После завершения моего конкурса дизайнеров Dashboard 2012 года я создал свою собственную версию Dashboard для учащихся, основанную на тех же данных, которые использовали конкуренты.
После завершения моего конкурса дизайнеров Dashboard 2012 года я создал свою собственную версию Dashboard для учащихся, основанную на тех же данных, которые использовали конкуренты. С тех пор несколько человек и поставщиков программного обеспечения попросили копию данных, чтобы они могли воспроизвести мою версию панели мониторинга, используя свой инструмент для создания панели мониторинга. Недавно я получил такой запрос от разработчика приложений по имени Роберт Монфера. Он хотел создать функциональную версию панели инструментов, используя d3, инструмент программирования для создания богатых графиков для Интернета. В последние годы d3, созданный Майклом Бостоком из New York Times, когда он учился в докторантуре в Стэнфорде, стал предпочтительным инструментом среди графических дизайнеров и разработчиков для создания инфографики и веб-аналитических приложений для коммерческого продукта визуализации данных. не буду Роберт хотел создать инструментальную панель Student Performance Dashboard, используя d3 в качестве учебного упражнения. В качестве напоминания, вот небольшой раздел панели инструментов:
Я был рад предоставить Роберту данные вместе с разрешением воссоздать мой дизайн, но это переросло в энтузиазм, когда Роберт начал показывать мне, что он может сделать с d3. Я быстро понял, что он не был вашим повседневным разработчиком программного обеспечения. Я предложил ему добавить некоторые функции сортировки, которые я хотел продемонстрировать на рабочем примере панели инструментов, и пообещал продемонстрировать свою работу, когда она будет готова – и теперь это так.
Когда я представил свою версию панели показателей успеваемости учащихся, которая появляется во втором издании моей книги « Дизайн информационных панелей информации» , я признал, что возможность сортировки строк информации о студентах различными способами может оказаться полезной. Однако я предложил, чтобы это было реализовано так, чтобы всегда автоматически возвращаться к исходному порядку сортировки сразу после просмотра данных. Это связано с тем, что панели мониторинга будут работать только для быстрого мониторинга производительности, если они представляют данные одинаково изо дня в день, без изменений. В противном случае люди никогда не научатся быстро их использовать из-за дезориентации, которая возникает, когда меняется что-либо, кроме данных, включая способ сортировки элементов. В идеале я хотел, чтобы интерфейс позволил зрителю щелкнуть столбец данных, что приведет к сортировке строк на основе переменной, содержащейся в столбце, до тех пор, пока кнопка мыши удерживается нажатой, а затем вернется в исходный порядок. как только кнопка была отпущена. Роберт смог реализовать эту функциональность, как я и предполагал, что привело к визуальному переупорядочению строк, что заняло достаточно времени, чтобы зритель заметил, нужно ли переставить только несколько или несколько строк, чтобы продемонстрировать новый порядок. Он прекрасно работает, что вы можете увидеть сами, взаимодействуя с приборной панелью.
Несмотря на то, что я бы не стал включать функции очистки и фильтрации в панель мониторинга производительности, Роберт хотел увидеть ее эффекты для себя, поэтому он добавил и эту функцию. Когда вы выбираете одну или несколько строк на приборной панели, сводные графики внизу каждой строки фильтруются, чтобы отражать только выбранных учащихся. Чтобы выбрать несколько строк, просто нажмите и перетащите по всему набору. Вы можете выбрать несмежные строки, удерживая клавишу Ctrl и щелкая отдельные строки или перетаскивая несколько строк вниз.
Я должен позволить Роберту рассказать о своей работе для себя. Вот что он написал мне:
D3.js – это ведущий инструмент для разработки визуализации данных, который я использовал для составления графиков торговли опционами своих клиентов, визуализации машинного обучения и панели мониторинга окружающей среды. Майк Босток, который создал d3.js, и другие предоставили множество примеров размером с укус, в том числе ваш график пули .
Ваши книги и статьи по дизайну приборной панели соответствуют моему опыту, что люди заинтересованы в контексте и деталях, стоящих за фокусом, а не в редких презентациях из-за их кажущейся простоты и привлекательности. Многие из ваших статей посвящены простоте и сложности, а ваши учения приводят к сложной, насыщенной информацией, но понятной, специализированной информационной графике, также основанной на выводах Tufte, таких как:
Если визуальная задача – это контраст, сравнение и выбор – как это часто бывает, – чем больше релевантной информации в пределах видимости, тем лучше. Вакантные дисплеи с низкой плотностью, страшная постеризация данных, распределенных по страницам и страницам, требуют от зрителей полагаться на зрительную память – слабый навык…
Мои цели обучения заключались в том, чтобы внедрить панель данных с богатым набором данных с помощью d3.js, которая может стать основой для дальнейших совместных экспериментов. Лучший общедоступный ресурс по разработке приборной панели, о котором я знаю, ваш Конкурс дизайна приборной панели 2012 года, даже имеет несколько реализаций , включая ваше решение задачи , которое включает в себя некоторые ваши исследования, например, по цвету и полосам , которые, как и ваши диаграммы маркеров, готовы стать широко распространенными. Кроме того, я глубоко отношусь к образованию через визуализацию, используя, как Брет Виктор назвал это, магические чернила как недостаточно изученную среду, чтобы помочь людям понять и научиться.
Эксперимент включал сложные, глубоко вложенные визуальные элементы, следуя самым простым структурам и самым легким абстракциям – тестируя d3.js на требовательном, подробном, сделанном на заказ дизайне, без привлечения других инструментов структурирования, которые я использовал бы для клиентов. Несмотря на то, что у программы есть определенные недостатки, результат состоит в том, что возникли проблемы и закономерности, которые не могли бы решить гораздо меньшую задачу.
Также было добавлено несколько взаимодействий – никаких претензий к их полезности – даже если панель инструментов, как вы ее определяете, не является инструментом анализа исследовательских данных.Некоторые из них выглядят интересными: например, щелкнув заголовок столбца и увидев, сколько (или сколько) строк перемещаются и на сколько, визуально выявляется корреляция с оценкой. Кроме того, совокупная полоса кажется информативной и участвует в своих переходах, так как набор рядов изменяется во время чистки.
Запланированная работа включает в себя выделение функции полосы для легкого повторного использования всеми; улучшение абстракции привязки данных (также в свете d3 v4), правильное структурирование кода и последующий открытый поиск. Взаимодействие на мобильных устройствах еще не включено. Фиксированные координаты должны быть заменены конфигурацией или автоматической оптимизацией макета.
Стив, я благодарен за разрешение, которое вы дали мне на реализацию вашего дизайна и использование ваших данных, и за наши обсуждения дизайна. Это был образовательный путь и отправная точка для дальнейшего исследования.
Почитать еще
Несколько видео о наших продуктах
