В этом посте кратко описаны изменения и новые функции VizHub, новой онлайн-платформы для обучения и изучения визуализации данных с помощью D3.js и JavaScript, с момента ее бета-релиза в августе.

Https://vizhub.com

VizHub прошел испытания в качестве инструмента для создания контента и отправки заданий для Курса визуализации данных 2018, 10-недельного онлайн-курса для выпускников в WPI. Начиная с бета-версии, разработка велась в основном на основе реальных отзывов пользователей, в основном студентов курса. Мне очень приятно видеть, как платформа превращается в полезный продукт, и видеть ее эффективность в качестве инструмента преподавания и обучения на практике.

Кстати, сегодня мне 2⁵ день рождения! Если вы цените мою работу по созданию общедоступного контента и контента с открытым исходным кодом (или просто хотите сделать подарок на день рождения), подумайте о том, чтобы стать покровителем и жертвовать 1 доллар в месяц.

Что такое VizHub?

Подводя итог более ранним сообщениям VizHub Alpha и VizHub Beta, я создал VizHub в первую очередь как инструмент обучения. Когда я начал преподавать курсы, связанные с программированием, много лет назад, я начал с настольных инструментов. Разочарованный тем фактом, что студентам потребовались недели, чтобы изучить все необходимое для настройки своей локальной среды разработки (и Git / GitHub для загрузки), я начал использовать онлайн-редакторы кода.

Сначала (около 2010 года) я использовал маститый JSBin. Это работало довольно хорошо в течение многих лет, но я также хотел дать студентам возможность публиковать свои работы более правильно. В то время как JSBin фокусируется на предоставлении надежного редактора для HTML, JS и CSS, его внимание не уделяется представлению работы. Мне очень хотелось, чтобы студенты использовали bl.ocks.org, потому что опубликованные там работы публикуются правильно, с запущенной программой, именем автора, датой и описанием.

Когда в 2015 году вышел отличный проект Blockbuilder, я был взволнован тем, что теперь студенты могут легко публиковать свои работы на bl.ocks.org. Барьер для изучения Git и локальной разработки был снят. Я использовал Blockbuilder, чтобы провести прошлогодний онлайн-курс по визуализации данных с помощью WPI, и это сработало очень хорошо. Главное разочарование было в разработке более сложных программ. Когда я (или студенты) захотели изучить модули ES6, они были недоступны для использования в Blockbuilder. Я хотел использовать систему, аналогичную Blockbuilder, но с поддержкой модулей ES6.

CodeSandbox довольно близко подошел к завершению, так как там можно использовать модули ES6. Однако, как и в JSBin, здесь нет дизайна для презентации работы. Кроме того, как и при разработке для настольных компьютеров, CodeSandbox демонстрирует сложность базовых инструментов (например, package.json, Webpack, Parcel).

Observable был еще одним сильным соперником, но я не хотел использовать его для обучения, потому что слишком много нестандартных вещей, зависящих от платформы, студентам нужно будет изучить в дополнение к и без того сложному веб-сайту. стандарты (и D3). Настоящим препятствием для меня при использовании Observable для обучения является то, что вы не можете экспортировать работу для дальнейшего развития за пределами Observable.

Это не значит, что вы не можете экспортировать свой код из Observable - вы полностью можете! Я хочу сказать, что вы не можете с комфортом развивать экспортированные записные книжки Observable вне платформы Observable. Для комфортной дальнейшей разработки вы должны вернуться в Observable Платформа.

Это хорошо для многих случаев, и действительно удивительно видеть, как в Observable зародилось процветающее творческое сообщество. Я рекомендую вам попробовать Observable и просмотреть его недавно опубликованные работы (которые я часто проверяю). Это действительно круто, но аспект привязки к платформе - это препятствие для моего конкретного варианта использования. А именно, обучение визуализации данных с использованием современных стандартов для применения в любой среде, особенно для экспорта и интеграции в текущие проекты (например, собственные проекты компании), которые уже используют модули ES6.

За прошедшие годы у меня было много идей по улучшению bl.ocks.org, таких как совместная работа в реальном времени, количество просмотров, форк-связи, связи наборов данных, встраивание, раздел комментариев, прямая доставка распечаток и многое другое. Вместо того, чтобы использовать существующую систему, я решил продолжить и построить систему, которую я хотел использовать для обучения визуализации данных. Основная идея состоит в том, чтобы упростить и упростить разработку визуализаций в браузере с использованием стандартных технологий, а затем построить платформу с годами, чтобы она больше походила на платформу для публикации визуализаций и совместной работы. Так родился VizHub.

В следующих разделах описаны новые функции, добавленные после бета-версии.

Визуализация Экспорт

Одной из функций, которая быстро оказалась на вершине нашего невыполненного списка заданий с приоритетом приоритезации, был экспорт визуализаций. Этот вопрос получил 5 голосов в течение первой недели после запуска бета-версии, тогда как по другим вопросам почти не было голосов. Это действительно основная функция, поскольку одна из целей VizHub - дать пользователям возможность создавать вещи с использованием ванильных технологий, таких как модули ES6, и не полагаться на какую-либо платформу. конкретные вещи, которые могут привести к блокировке платформы.

При нажатии кнопки экспорт будет загружен файл .zip, содержимое которого можно развернуть на любом статическом файловом сервере. Эти файлы также содержат package.json и rollup.config.js, так что вы можете редактировать и создавать исходные файлы локально, запустив npm install && npm run build. Это воссоздает этап сборки на основе Rollup, используемый VizHub для внутренних целей в вашей локальной среде. Поскольку модули основаны на стандарте ES6, экспортированные проекты должны просто работать с Webpack или Babel, поэтому перенос любого кода из VizHub непосредственно в реальный проект должен быть простым.

Экспортированные файлы также совместимы с bl.ocks.org. Вы можете отразить свою работу с VizHub на bl.ocks.org, используя Gistup для публикации разархивированных файлов. Еще одна идея функции - автоматически зеркально отображать визуализации на bl.ocks.org и поддерживать их в актуальном состоянии по мере изменения визуализации в VizHub. По сути, это сделало бы VizHub редактором для bl.ocks.org. Если вам нравится эта идея, проголосуйте за Зеркало на Bl.ocks.org!

Раздельная панель с изменяемым размером

Всякий раз, когда я показывал людям VizHub и наблюдал, как они его используют, они в обязательном порядке пытались изменить размер разделенной панели между кодом и запущенной программой. Разочарование последовало, когда между левой и правой панелями было не за что ухватиться. Поскольку это, вероятно, будет одной из первых вещей, которые кто-либо попробует, размер разделенной панели был изменен (благодаря response-split-pane). В сочетании с масштабированием браузера эта функция дает пользователям полный контроль над балансом площади экрана между кодом и выводом.

Адаптивные встраивания YouTube

По мере того, как с помощью встроенных видео YouTube создавалось больше визуализаций, фиксированная ширина встроенных видео стала проблемой. Видео обрезались с правой стороны, а когда панель визуализации была большой, видео заполняли только половину доступного пространства. Была добавлена ​​некоторая специальная логика, чтобы сделать YouTube встраиваемым отзывчивым, поэтому они плавно изменяют размер при изменении размера разделенной панели, всегда занимая всю доступную ширину. Надеюсь, это позволит смотреть видео в VizHub и следить за ним, манипулируя кодом во время воспроизведения видео. Несколько студентов сказали, что это их предпочтительный метод обучения.

Ясность лицензирования

Несколько человек с некоторым трепетом поинтересовались, могут ли они использовать примеры кода, найденные на VizHub. Я ответил: «Да, конечно!», И тут я понял, что лицензирование должно быть четко разъяснено всем, кто просматривает работы в VizHub. Поэтому в нижнюю часть представления визуализации был добавлен следующий текст для всех визуализаций:

Весь код в VizHub выпущен под лицензией MIT.

Цель этой политики - сделать VizHub местом, где люди могут свободно извлекать контент для использования в реальных (проприетарных) проектах. Это также делает практику разветвления и модификации свободной от стресса, поощряя создание производных работ. Я не уверен, что критично разрешить пользователям изменять лицензию на свои произведения. Если у вас есть мнение по этому поводу, проголосуйте за или прокомментируйте вопрос« Редактируемая лицензия ».

Настраиваемая высота

Теперь вы можете выбрать высоту визуализации, как художник может выбрать размер своего холста. Просто нажмите «Установить высоту» и введите новую высоту в пикселях. Авторы визуализаций больше не ограничиваются рамками 960 X 500! Историческое примечание: размеры по умолчанию 960 X 500 были выбраны для совместимости с bl.ocks.org, который использует те же размеры по умолчанию.

Лучшая отладка

На Курсе визуализации данных WPI 2018 я просил студентов выполнять домашние задания с помощью VizHub. В течение первых нескольких недель я делал задания тривиальными, типа вилки и модификации, но на 5-й и 6-й неделях задания были более сложными и требовали оригинальной разработки. Когда я попросил студентов на 6 неделе высказать свое разочарование по поводу курса в целом, к моему большому удивлению, номером один была отладка в VizHub.

Несколько студентов упомянули «потерянные часы времени» на поиск неуместной запятой или синтаксической ошибки, «нечеткие сообщения об ошибках», «бессмысленные номера строк» ​​и «bundle.js не обновляется, и я не знаю почему». Эти отзывы ясно дали понять, что улучшенная отладка должна быть главным приоритетом, поскольку она вызывает наибольшую боль и вдохновляет на желание «выйти из VizHub».

Встроенные исходные карты были реализованы вскоре после получения этой обратной связи (благодаря rollup-plugin-hypothetical), что позволило инструментам разработчика указывать на правильные номера строк в исходных модулях ES6, а не в скомпилированном пакете. Также было внесено другое изменение, которое выявляет синтаксические ошибки (и любые другие ошибки из Rollup, такие как несоответствие имен импорта и экспорта или импорт из несуществующих файлов).

Внедрение улучшенной поддержки отладки неожиданно оказалось очень сложной задачей, потому что могло произойти очень много видов ошибок. Ошибки времени выполнения, синтаксические ошибки, импорт из неправильного файла, несоответствие импорта / экспорта - все это требовало особого внимания для начала работы. Это было похоже на хорошую игру «Ударь крота», в которой раскрытие одного дела сломает другие. К счастью, студенты разместили вопросы о том, что «bundle.js не обновляется», и делились ссылками на программы в VizHub, которые воспроизводили поведение, так что я мог использовать их примеры в качестве тестовых примеров для решения, один за другим.

Удалить визуализацию

Теперь вы можете удалять визуализации. Это была функция номер один, за которую проголосовали 11 человек! Это последняя проблема, за которую проголосовали более одного раза. Похоже, что после предыдущего запуска бета-версии модель голосования за нее застопорилась. Если вы хотите помочь расставить приоритеты в разработке, загляните в публичный бэклог и проголосуйте за вопросы, которые вам интересны!

Более полный текстовый редактор

Один из моих студентов сказал: Одна из причин, по которой я хотел бы развиваться вне VizHub, - это возможность использовать более полный текстовый редактор. Это поразило меня как абсолютно верный момент, к которому действительно можно обратиться. К счастью, уже используется зрелая библиотека текстового редактора CodeMirror, а в экосистеме CodeMirror есть множество надстроек для добавления функциональности. Чтобы сделать редактор более полным, в редактор были интегрированы привязки SublimeText. Они включают в себя широкий спектр функций, таких как поиск и замена, сворачивание разделов и соответствующие скобки.

Затем я подумал, что можно сделать, чтобы редактор VizHub был даже лучше, чем полнофункциональные традиционные IDE? Что, если бы VizHub мог предоставить что-то сверхъестественное, что заставило бы людей перейти с настольного редактора на VizHub, а не наоборот?

Затем я вспомнил превосходный проект Inlet, в котором есть интерактивный слайдер для чисел, флажок для логических значений и палитра цветов для цветов (вдохновленный удивительным докладом Брета Виктора« Изобретая принцип ). Это замечательно реализовано в Blockbuilder. Учитывая, что это низко висящие плоды, поскольку интеграция проста в реализации, Inlet также был добавлен в редактор.

Дорога впереди

Итак, что будет дальше с VizHub? Кому ты рассказываешь! Пожалуйста, проголосуйте за вопросы, которые важны для вас, в нашем публичном бэклоге (который меняет порядок в зависимости от голосов). Для снимка состояния разработки см. Нашу Скрам-доску. Это на самом деле используется и обновляется по мере того, как вещи всплывают в приоритете и над ними работают.

Что касается функций VizHub, приблизительная приоритезация на данный момент (для крупных функций) выглядит примерно так: Эскизы, Наборы данных JSON, Разветвляет ссылки, Зеркало на Bl.ocks.org, Поддержка JSX. , Встраивание , Комментарии , Количество просмотров , Совместная работа в реальном времени , Сохранение состояния и Композиция .

Что касается контента, я хотел бы сделать видео и реализации для: линейной диаграммы с несколькими линиями, диаграммы с накоплением областей, StreamGraph, составных и сгруппированных гистограмм, пузырьковой карты, использования наложения Вороного, круговой диаграммы, кольцевой диаграммы, графика Кокскомба , Панорамирование и масштабирование на глобусе, метки на карте, древовидная карта, солнечные лучи, сосульки, график с направлением силы, малые кратные, отображение нескольких видов, связанная навигация, карта птичьего глаза, чистка, связанное выделение, агрегирование (гистограмма, группировка по) , Hexbinning, Crossfiltering, Parallel Coordinates, Box Plot, Responding to Resize, Redux with D3, React with D3, а затем целая серия по оптимизации интерактивных визуализаций с Topologica.js (библиотека, реализующая реактивный поток данных).

Дай денег

Онлайн-курс заканчивается 1 ноября, а вместе с ним и финансирование, которое поддерживало эту работу до сих пор. Даже после предоставления большей части контента для онлайн-курса я чувствую, что только что коснулся поверхности того, что возможно с помощью этого средства онлайн-обучения и авторской веб-визуализации данных.

Я действительно хотел бы продолжать вечно создавать интерактивные визуализации данных с открытым исходным кодом, а также развивать VizHub в полноценную онлайн-платформу для создания, публикации, критики и совместная работа над визуализацией данных. Я хочу раздвинуть границы возможного с точки зрения масштабирования сложности интерактивных визуализаций, и, снимая видео о работе, я хочу взять с собой других, чтобы они могли создавать собственные визуализации.

Я заметил интересный феномен со студентами, участвующими в курсе, а именно: после того, как я создаю видео (и реализую его) на определенную тему или технику, она входит в «область возможностей», которую они могут использовать без страха и страха. трепет. Они начинают думать с этой новой концепцией в своем наборе инструментов. Например, я был немного удивлен тем, что в предложениях студентов по проектам были включены методы, которым я обучал, но не методы, которые я связал с примерами «в дикой природе» (на bl.ocks.org и в других местах) .

Я хотел бы продолжить эту работу и охватывать пространство дизайна интерактивных визуализаций, по сути, проводя курс «в масштабе». Цель состоит в том, чтобы раскрыть (воплотить в реальность) различные темы и методы для всех, кто хочет просматривать и изучать общедоступный контент. Основной аудиторией для этого будут существующие сообщества D3 и Data Visualization, а также новички в области визуализации данных, которые хотят расширить свои возможности.

Чтобы воплотить эту мечту в жизнь, мне нужна ваша помощь. Финансово. В настоящее время мне нужно проводить большую часть своего времени, работая над консультационными проектами, чтобы оплачивать счета. Хотя это нормально, я предпочитаю тратить большую часть своего времени на эти увлеченные проекты - создание визуализаций с открытым исходным кодом, создание видео и развитие VizHub. С вашей помощью это вполне возможно!

Если вы цените эту работу и хотите поддержать меня в этом квесте, пожалуйста, подумайте стать покровителем на Patreon. Сделав взнос в размере 30 долларов в месяц, вы можете присоединиться к эксклюзивному онлайн-сообществу обучения, организованному мной и не имеющему отношения к университету, где мы будем проводить своего рода мастер-класс по визуализации данных на неопределенный срок, в котором студенты могут взаимодействовать со мной напрямую, делиться своими работать со сверстниками и требовать конструктивной критики.

Спасибо за прочтение!

Ссылки по теме: