6 принципов эффективной визуализации данных
Ключевые принципы создания полезных и информативных графиков
Визуализация данных является важным этапом в процессе постижения науки о данных. Здесь вы представляете свои результаты и сообщаете о них в графическом формате, который является интуитивно понятным и лёгким для понимания.
Визуализация данных требует большой работы, большой труд по очистке и анализу уходит на перегонку и превращение грязных данных в красивые графики и диаграммы. Но даже с подготовленными данными всё равно приходится придерживаться определённых принципов или методологий, чтобы создать полезную, информативную графику.
Тем не менее при написании этой статьи я черпал вдохновение в книге Эдварда Тафта «Beautiful Evidence», которая содержит шесть принципов, посвящённых тому, как сделать графики данных полезными. Именно эти принципы отделяют полезные графики от бесполезных.
Эта статья также в значительной степени вдохновлена книгой Роджера Д. Пенга «Exploratory Data Analysis in R» Она доступна бесплатно на Bookdown, и вы можете прочитать её, чтобы узнать больше о EDA.
Давайте ближе познакомимся с этими принципами.
1. Покажите сравнение (контрольная и экспериментальная группы)
Демонстрация сравнения — основа хорошего научного исследования. Доказательства гипотезы всегда связаны с чем-то другим. Возьмём пример: вы говорите: «Тёмный шоколад улучшает концентрацию внимания и способность к обучению». Важный вопрос в этом утверждении — «по сравнению с чем?» Без сравнения (относительная гипотеза) утверждение бесполезно.
Один из способов показать сравнение — контрольная и экспериментальная группы. Люди одной группы будут есть шоколад, люди во второй группе — не будут. Таким образом, вы сможете сравнить влияние шоколада на концентрацию и способность к обучению на основе результатов теста или путём измерения активности мозга.
При создании графиков для презентации вашего исследования вы можете составить график для контрольной и экспериментальной групп с помощью ящика с усами. Таким образом, читатели получают чёткое представление об эффекте эксперимента.
При создании графики для представления вашего исследования вы можете построить график контрольной и лечебной группы с помощью прямоугольной диаграммы. Таким образом, читатели получают чёткое представление о последствиях лечения.
2. Причинно-следственная связь и объяснение
Далее следует объяснение, показывающее причинно-следственную связь в размышлениях над вопросом, на который вы пытаетесь ответить. Если вы показали, что в экспериментальной группе получен эффект, а в контрольной группе его нет, вы должны сформулировать гипотезу из доказательств, почему это так.
Возвращаясь к предыдущему примеру, допустим, что испытуемые из экспериментальной группы получили более высокие баллы по тесту, и это показывает, что тёмный шоколад улучшает концентрацию. Важный вопрос: почему это именно так?
Этот вопрос важен потому, что он помогает поднять другие вопросы, которые могут либо опровергнуть, либо подкрепить вашу гипотезу на протяжении всего исследования.
Чтобы показать причинно-следственную связь или механизм, вы можете измерить активность мозга контрольной и экспериментальной групп и построить графики результатов, показав их рядом. С помощью графика тестовых баллов и графика активности мозга вы увидите причину того, почему принимавшие шоколад испытуемые получили более высокие баллы, т. е. ответ на вопрос, как тёмный шоколад улучшает когнитивные функции.
3. Данные со многими переменными (более двух переменных)
Реальный мир сложен, и отношения между двумя событиями обычно нелинейны. Поэтому в исследованиях у вас есть атрибуты или переменные, которые вы можете измерить. Все эти переменные по-разному взаимодействуют друг с другом. Некоторые из них могут быть путающими, в то время как другие могут быть важными атрибутами, объясняющими взаимосвязь событий.
Как вы уже знаете, корреляция не подразумевает причинно-следственной связи. Поэтому не лучшее решение — ограничивать свое исследование только двумя переменными: это приводит к ошибочным выводам. Таким образом, вы должны показать как можно больше данных на своих графиках. Это может помочь вам выявить любую путаницу в ваших данных.
Возьмем парадокс Симпсона, парадокс в вероятностной статистике, когда «при объединении групп исчезает тенденция, возникающая в разных группах данных». Чтобы проиллюстрировать:
4. Не позволяйте инструментам управлять анализом
Хороший рассказчик знает, как удержать внимание людей, рассказывая историю продуктивно. Рассказчик не ограничивается самой историей, но может уникальным образом выразить историю, сочетая различные виды восприятия и включая множество образов, что делает историю живой.
Аналогичным образом хороший визуализатор данных не ограничивается имеющимися под рукой инструментами для работы с визуализацией. Визуализирующий данные человек имеет возможность переключаться от одной формы выражения (например, линий или кругов) к использованию нескольких режимов представления.
Например, вместо того чтобы создавать отчёты, содержащие только текст, используйте инфографику: изображения, диаграммы, слова, числа и т. д., всё это обогатит информацию. Обладая обилием информации и графиков, читатели могут наблюдать множество различных корреляций доказательства в одном месте. Так что помните, что вы рассказываете историю. Не позволяйте инструментам ограничивать ваше мышление. Пусть анализ управляет инструментами, создаёт сногсшибательные, богатые доказательствами графики.
5. Документируйте свои графики соответствующими метками, шкалами и источниками данных
Когда вы впервые смотрите на график, то сначала видите заголовок, а затем метки контекста графика. Без них график не рассказывает ничего. Хорошие отчёты/графики должным образом документируются, при этом каждому графику присваиваются соответствующие шкалы и метки. Источники данных, используемые для создания графиков, также имеют решающее значение. Таким образом, хорошая практика заключается в сохранении кода, который применялся для генерации данных и графиков: это позволяет воспроизводить данные. Это также добавляет достоверности вашим графикам. Более того, сохраняя код, вы можете редактировать график в случае необходимости.
6. Содержание превыше всего
В конечном счёте, независимо от всех вышеперечисленных принципов, без контента, качественного, актуального и целостного, ваша графика будет бесполезна или она будет вводить в заблуждение. Другими словами, «мусор внутри, мусор снаружи». Прежде чем сообщать о каком-либо результате, убедитесь, что результат — это нечто интересное и важное. Независимо от того, насколько красива или наглядна ваша графика, бесполезные результаты никому не нужны. Нечто интересное — это личный опыт или что-то, навеянное Интернетом. В любом случае всегда задавайте вопросы: так идея становится реальностью.
Заключение
Визуализация данных — это невероятный навык. Вы можете взять данные и превратить их в красивую графику и сюжеты, рассказывающие людям историю. В эпоху, когда данные растут в геометрической прогрессии, всё большее значение приобретает умение рассказать историю с помощью данных. Это лучший момент, чтобы научиться новому. И резюме принципов:
Я оставляю цитату американского математика Джона Тьюки, который открыл новую эру статистики:
Простой график привнёс больше информации в сознание аналитика данных, чем любое устройство.
Для более глубокого понимания этих принципов я рекомендую обратиться к книге Роджера Д. Пенга «Exploratory Data Analysis in R» (ссылку на нее я оставлю чуть ниже).
Ресурсы и ссылки
Если вы хотите узнать больше о визуализации данных, посмотрите эти замечательные бесплатные книги:
Визуализация данных для вашего Web-проекта
Автор: Александр Кашеверов, Senior JavaScript Developer
Добро пожаловать и приятного чтения!
Статья для тех, кто раньше не использовал графики в веб, но собирается. Также для тех, кто хочет глубже познакомиться с этой темой.
Цель — осветить предметную область и упростить проблему выбора конкретного решения. Рассмотрим отличия библиотек и остановим взгляд на популярных вариантах, будут примеры и совсем немного теории.
Для лучшего понимания — необходимо знание JavaScript и общее представление о работе веб.
Конечно, у визуализации данных есть своя история (в статье мы этого касаться не будем), если интересно — можно ознакомиться, например, здесь.
Моя статья, вероятно, не всеобъемлющая, поэтому пишите комментарии и личные сообщения, я готов выслушать критику и дополнить материал.
Допустим, у вас есть сайт.
… который вы захотели раскрасить с помощью визуализации данных.
Это могут быть как простейшие графики, так и совсем нетривиальные. Статические или интерактивные. Несколько отрисованных элементов или несколько десятков тысяч. Какое решение подходит для конкретного случая — вот задача, которую необходимо решить.
Проекты, где можно использовать графики — разные. Это могут быть простые сайты-визитки, сделанные на WordPress за один день, или огромные индустриальные монстры, которые разрабатываются большими командами множество лет. Конечно, подходы к разработке и выбору решения в этих случаях будут различаться.
Возьмем, к примеру, визуализацию спроса на авиабилеты внутри США в День Благодарения, которую «Нью-Йорк таймс» представила в 2015 году. То, как реализовать подобную визуализацию, сразу не очевидно.
Как вы станете решать задачу, не зная предметной области? Скорее всего выберете один из вариантов:
Итак, задача — визуализировать данные на сайте. Рассмотрим более детально задачу и из каких решений мы можем выбирать?
Технологическое разнообразие
Технически, мы можем реализовать представление данных на странице разными способами:
Функциональное разнообразие
Посмотрим на не-технические характеристики
Решения, популярные в 2018 году
Платные решения
Это далеко не полный список, однако стоит перечислить ряд популярных библиотек:
Бесплатные решения
Примеры
Всем спасибо!
Визуализация данных в интерфейсе
Меня зовут Илона, я Lead Experience Designer в EPAM. Я проектирую сложные интерфейсы для зарубежных заказчиков, выступаю с докладами, менторю дизайнеров. В свободное время преподаю проектирование интерфейсов в магистратуре Университета ИТМО и веду Телеграм-канал о UX-дизайне.
В этой статье хочу немного поговорить об истории инфографики и о том, как с точки зрения дизайна визуализировать данные и эффективно отображать их в интерфейсе.
Множественные данные, которые, в принципе, можно считать Big Data, представляют из себя набор информации (цифры, процентные соотношения, статусы, параметры, текст и пр.), на основании которой пользователь может делать определённые выводы.
Любимые дизайнерами дашборды — результат визуализации таких данных.
Dashboard by Ghulam Rasool
Но раскидать цветастые графики по экрану — ещё не значит хорошо визуализировать информацию.
Проектирование интерфейса, который визуализирует и отображает данные — это отдельная сложная задача.
Как же подходить к проектированию такого интерфейса и сделать результат действительно полезным для пользователя?
В первую очередь вам понадобятся знания основ инфографики.
Инфографика — одна из форм коммуникационного дизайна, которая помогает организовать и наглядно показать большие объёмы данных.
Инфографика зародилась в 18 веке с изобретением столбчатой, линейной и круговой диаграмм шотландским экономистом по имени Уильям Плейфей, которые он опубликовал в книге Commercial and Political Atlas and Statistical Breviary. Его, по моему скромному мнению, гениальные наработки послужили базисом визуализации данных и до сих пор активно используются для отображения информации.
Первая столбчатая диаграмма за авторством Уильяма Плейфея, 1781
Большое влияние на современную визуализацию данных оказал профессор Йельского университета Эдвард Тафти, написавший несколько книг об отображении информации, в том числе The Visual Display of Quantitative Information. Книга содержит множество примеров и я крайне рекоммендую её к прочтению, для расширения кругозора.
Книги Э. Тафти о данных
Тафти выступает за создание информационно насыщенных визуализаций, показывающих все доступные данные для микро/макрочтения. При беглом обзоре насыщенной данными визуализации (макрочтение) человек должен увидеть общую картину и тенденции, а при близком изучении (микрочтение) разглядеть каждый элемент и понять причины наблюдаемых тенденций.
Кроме того, Тафти пропагандирует аскетичную инфографику, где главный компонент — данные, а не визуальная эстетика, ведь основная задача — наглядно отобразить точную информацию и убрать всё лишнее.
Косметическое украшение никогда не компенсирует ошибки отображения данных, зато может их исказить.
– Э. Тафти
Способы визуализации информации
Для отображения данных используются базовые элементы изобразительного искусства:
Точка — индикатор положения данных. Может находиться на оси графика, точке окружности и т.д.
Линия — соединяет две точки и отображает тенденцию изменения данных.
Цвет — инструмент выделения качества данных (например, «хорошо» — зеленый, «плохо» — красный). Имейте в виду, что около 4% людей в силу физиологических или национальных причин могут трактовать значение цвета по-разному. Например, многие дальтоники видят и красный и зеленый цвета как коричневый.
Пропорции — инструмент отображения соотношения данных. Например, взглянув на два столбика в диаграмме, мы быстро определим, каких данных больше, исходя из высоты столбиков.
На основе этих простых элементов можно построить множество визуализаций. Перечислю лишь основные и самые распространённые типы в зависимости от целей отображения.
Инструменты визуализации
Крупный показатель — для быстрого информирования без погружения в контекст.
Примеры применения: сумма дохода за квартал, количество активных пользователей, класс энергоэффективности.
Круговая диаграмма, пончик — отображение количества чего-либо от общей массы.
Примеры применения: количество гостей/зарегестрированных/регулярных покупателей от общего числа пользователей интернет-магазина, отношение затрат на развлечения/здоровье/путешествия в онлайн-банке, процент любителей белого/красного/розового вина в винном бутике.
Солнечные лучи — похожа на круговую диаграмму, но бонусом содержит иерархическую структуру (внешнее кольцо — дочерние элементы внутреннего).
Примеры применения: количество продаж за разные кварталы по месяцам, количество жильцов в субьектах по федерациям.
Вертикальная (столбчатая), горизонтальная диаграмма/гистограмма — сравнение значений. Могут быть сгруппированными и сегментированными. Горизонтальный вариант лучше в случае длинных заголовков.
Примеры применения: сравнение количества продаж разных товаров по месяцам, сравнение количества сотрудников разного уровня в компании, сравнение количества посетителей на разных сайтах.
Пулевая диаграмма — разновидность столбчатой диаграммы для отображения нескольких слоев информации.
Примеры применения: доходы за год по сравнению со средним значением, количество новых пользователей по сравнению с контрольными показателями.
Пузырьковая диаграмма — сравнение значений в объеме.
Примеры применения: пробег автомобилей в зависимости от года выпуска, объём продаж на продукты в зависимости от цены.
Линейный график, диаграмма с областями — отображение перспективы изменения данных во времени и предсказания тенденций. Линейный график хорошо отображает несвязанные потоки данных, а диаграмма с областями подходит для отображения частей целого.
Внимание! Полупрозрачные заливки внахлёст — не очень хорошее решение, так как могут путать и создавать впечатление «отдельности» данных.
Примеры применения: доходы и расходы в неделю за январь, количество активных пользователей в каждом месяце 2020 года.
Временной график — линейное отображение событий.
Примеры применения: отображение опыта работы, план выполнения проекта.
Диаграмма Ганта — вариация временного графика для отображения нескольких слоев информации.
Примеры применения: отображение опыта работы в разных областях, план выполнения разных частей проекта.
Картограмма — отображение этнографической информации.
Примеры применения: уровень опасности в разных странах по количеству заболевших COVID-19, количество людей в разных штатах.
Диаграмма Венна — отображение пересечений, классов и общих черт.
Примеры применения: виды реагентов и результат их взаимодействия, появление мультидисциплинарных специалистов на пересечениях профессий. Другие примеры и виды диаграмм можно посмотреть по этой ссылке.
Граф — отображение связей и структуры данных.
Примеры применения: связи сущностей в базе данных, связи в рабочем коллективе, визуализация нейросети.
Ящик с усами и Японские свечи — два похожих, но совершенно разных графика, которые лучше не путать. Ящик с усами используется для отображения распределения вероятностей и применяется статистами в ответах на вопросы симметричны ли данные, насколько плотно они сгруппированы и т.д. Японские свечи (совмещение интервального и линейного графиков) больше применим акционерами и помогает следить за биржевыми котировками, ценами и пр.
Дерево — выглядит совсем не как дерево, но отображает пропорции в иерархии. Саму иерархию визуализирует плохо, для этого больше подходит диаграмма отношений.
Диаграмма отношений — отображение иерархической структуры данных формата «родитель-ребенок».
Примеры применения: карта сайта, структура организации, люди в департаментах.
Блок-схема, дорожки бассейна— визуализация процесса.
Примеры применения: сценарий работы устройств на конвейере, процесс взаимодействия разных департаментов во время работы над проектом.
Пример дорожки бассейна. Если убрать департаменты получится блок-схема
Таблица — простое отображение большого объёма однородной информации для детального изучения. Убедитесь, что таблицы отображают только нужную информацию, достаточно читаемы и интерактивны. Отличный гайд по оформлению таблиц можно найти тут.
Комбинированная диаграмма — гибрид любых диаграмм и подходов для сравнения различных наборов данных (аккуратнее с ней, легко перегрузить и сделать неинформативной).
Проектирование интерфейса
Теперь, когда мы преисполнились видами визуализации и готовы проектировать интерфейс, необходимо перейти к потребностям пользователей, как и всегда в UX-дизайне.
Чаще всего у пользователей подобных систем множество задач, связанных с принятием решений на основе разнородных данных, которые должны отображаться компактно и, желательно, на одном экране. Очень важно определить, какая задача является ведущей. Именно данные по ведущей задаче должны быть наиболее заметны. График с этими данными может быть крупнее или выделен цветом, располагаться в левом верхнем углу (этот угол привлекает больше всего внимания у читающих слева направо).
В целом, можно разделить цели пользователей интерфейсов с визуализированными данными на два типа: анализ актуального состояния и анализ статистики.
Анализ актуального состояния
Анализом актуального состояния занимаются, к примеру, сотрудники АЭС, производства, аэропорта, тот самый админ в серверной.
Дашборд для анализа актуального состояния нагрузки порта Хобокен, Нью-Джерси
Задача таких пользователей — видеть актуальное состояние объектов и быстро принимать решения, так как от оперативности их действий зависит качество работы.
К примеру, человек, отвечающий за работу сложного станка, должен вовремя увидеть, что один из элементов неисправен, и быстро его отремонтировать или остановить работу устройства.
Приложение мониторинга на производстве от devvela
Данные, отображающие актуальное состояние, постоянно меняются и быстро устаревают. Из всего объёма данных, наибольший интерес всегда представляет последний, самый новый показатель. В визуализации таких данных помогают выделение главной информации цветом и размером, анимация прогресса или статуса.
Анализ статистики
Другой тип потребностей — анализ статистики. В отличие от анализа актуального состояния, нам не нужно немедленно реагировать на данные. Они, скорее, позволяют увидеть всю картину целиком и предсказать, что может случиться в будущем.
Например, статистика продаж может обновляться раз в день или неделю, но эта информация позволяет менеджеру понять тенденции и предложить варианты улучшения показателей (акции устроить или рекламу с Нагиевым снять).
Дашборд состатистики продаж
В визуализации данных подобного рода крайне важно показать динамику и «вид сверху». Часто требуется высокоинтерактивный интерфейс, в котором можно менять параметры, разрезы, временные рамки, скрывать и показывать слои данных. Хорошим решением для подобных сервисов будет автоматическое предсказание будущих показателей на основе предыдущих. Например, Анализ расходов Сбербанк Онлайн может предсказать, сколько вы потратите в следующем месяце, на основе ваших предыдущих трат.
Десять советов дизайнеру дашборда
Начните проектирование с анализа потребностей пользователя. Определите цель пользователя и какую информацию он анализирует: актуальную или статистическую.
Подберите способ визуализации данных исходя из того, что пользователь хочет оценить (сравнить объём данных, соотношение, увидеть иерархию и т.д.).
Не перегружайте интерфейс эстетическими «рюшами». В погоне за красивым UI и богатыми градиентами можно исказить восприятие данных.
Группируйте разные данные в отдельные блоки.
Старайтесь определить главный блок на основе самой важной задачи пользователя. Расположите его вверху слева или по центру, выделите размером или цветом.
Не перегружайте один экран множеством разнородных блоков данных. Человек не очень хорошо справляется с объемом более 5–7 блоков.
Используйте понятные заголовки для всех данных и графиков.
Не прячьте важную информацию в хинты и выпадающие списки без острой необходимости. Да, это облегчит интерфейс, но есть вероятность, что пользователь упустит что-то важное.
Будьте осторожны с комбинированием разнородных данных в один график. Лучше протестировать получившуюся визуализацию на понятность.
Кастомизируемый интерфейс это замечательно. Но ещё лучше, когда система автоматически настроена должным образом и сама покрывает все потребности пользователя. В создании такого интерфейса поможет анализ пользовательских потребностей, интервью и наблюдения.
Не очень позитивный, но актуальный и информативный пример дашборда от Johns Hopkins
Больше о проектировании интерфейсов и UX можно почитать в моём телеграм-канале «Поясни за UX».
