Подбор правильной визуализации данных — краеугольный камень для построения дашборда. График может классно выглядеть, но это не значит, что он информативен и его можно проанализировать, да и вообще корректно считать. Думаю, каждому знакомо выражение "смотрю в книгу — вижу фигу". Также и с данными: неправильно подобранный способ визуализации озадачит и огорчит любого пользователя.

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

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

Так как же правильно подобрать формат визуализации данных?

В Главе 1 мы выяснили, что у разных аудитории разные потребности в данных и информации, они воспринимают и используют их также порой совершенно по разному. В начале процесса создания визуализации, спросите себя и своих пользователей: «Чего мы пытаемся достичь, анализируя тот или иной набор данных?». Именно для этого стоит проводить интервью с ЦА, составлять требования (документацию) и делать проектные прототипы.

Просто "сырые" (необработанные) данные в виде строк и столбцов чисел мало чем могут помочь бизнесу, поскольку сложно определить особенности данных, когда они представлены в таком виде. Практичные и понятные визуализации — это не просто набор таблиц. Они позволяют обрабатывать бОльшее количество разных данных в более короткие сроки.

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

Рассмотрим четыре основных типа диаграмм, чтобы было проще определиться какой в дальнейшем формат использовать для своих визуализации своих данных:

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

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

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

А теперь перейдем визуализациям, которые используются конкретно для представления специализированных наборов данных:

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

Пузырьковая диаграмма — это разновидность точечной диаграммы, в которой точки данных заменены пузырьками, причем их размер служит дополнительным измерением данных. На пузырьковой диаграмме, как и на точечной, нет оси категорий — и горизонтальная, и вертикальная оси являются осями значений.

С помощью Воронки визуализируются этапы определенного процесса (например, шаги воронки продаж или оформления заказа); также такой тип диаграммы можно использовать для выявления потенциальных проблем в рамках процесса организации.

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

Тепловая карта чаще всего используется для отображения данных по гео. Индивидуальные значения отображаются при помощи цвета.

Лепестковая диаграмма предназначена для многомерных наблюдений с произвольным числом переменных в виде двумерной диаграммы. Альтернативные ее названия: радиолокационная карта, диаграмма "паутинка", полярная диаграмма.

Пирамидальная диаграмма используется для сравнения относительных величин. Чем "толще" слой, тем бОльшая величину он представляет.

Точечные диаграммы служат для размещения точек данных на горизонтальной и вертикальной оси с целью показать степень влияния одной переменной на другую. Каждая строка в таблице данных представлена маркером (точкой), позиция которого зависит от значений в столбцах. Точечные диаграммы лучше всего использовать в случаях, когда есть целочисленное значение как по оси Y, так и по оси X; в противном случае она будет выглядеть как линейная диаграмма без линии.

Инфокривые (спарклайны) подходят для одновременного отображения множества трендов в виде отрезков за короткий промежуток времени. С помощью них можно показать изменение в измерении просто и лаконично. Ярким примером графика спарклайна является обзор рынка акций США, где представлено изменение показателей индексов DOW Jones и S&P 500.

Блочная диаграмма (диаграмма размаха или ящик с усами) используется для статистического анализа и показывают распределение набора данных. Линии, которые проходят вертикально от прямоугольников на этих диаграммах, представляют собой «усы», которые обозначают изменчивость за пределами верхнего и нижнего квартилей.

На дашборде можно использовать статичные диаграммы, анимированные или же комбинацию из этих двух типов.

В Анимированных визуализациях есть возможность углубиться в детали по показателям. Анимация обычно делается с использованием Flash или HTML5, чтобы обработать данные, поэтому нужно заранее об этом предупредить тех, кто будет смотреть дашборд (особенно с мобильных устройств).

Без анимированной визуализации не получится отобразить динамику изменений в потоках данных в режиме реального времени. Если не дать контекст пользователям при обновлении статических диаграмм, то они будут только вводить пользователей в заблуждение. Конечные пользователи должны понимать, почему они смотрят на данные в динамике. Если нет контекста и способа сравнения эффективности в разные моменты времени, то ценность самого дашборда становится сомнительной. Поэтому для динамических данных стоит продумать отдельно требования к визуализации.

Анимированные диаграммы в визуализации дашборда добавляют к 4м основным параметрам еще один — интерактивность. То есть стоит продумать то, как элементы будут "отзываться" на действия пользователя при взаимодействии с ними. Например, можно добавить изменение цвета текста при наведении курсора или заанимировать какие-то манипуляции с графиками при клике на них.

Для добавления анимированных диаграмм на дашборд потребуется использование D3.js (Data Driven Documents) — это библиотека JavaScript для создания динамических интерактивных визуализаций данных в веб-браузерах. Это библиотека для управления документами упрощает повторное использование кода и добавление определенных функций в ваши визуализации. Принцип работы кода заключается в том, что ваши данные добавляются к элементам DOM (Document Object Model), при обработке используются общие веб-стандарты, такие как CSS3, HTML и SVG (векторный формат изображения на основе XML для двумерной графики с поддержкой интерактивности и анимации).

В D3 также есть возможность data-driven преобразования и адаптации для интерактивности ваших данных. Например, скажем, вы хотите анимировать прямой линейный график. Вы можете "ручками" написать код для его работы, что очень трудоемко, или же вы можете сделать это намного быстрее, используя D3, в котором уже есть встроенные шкалы, оси и минимальные и максимальные значения.

Если нужна глубокая детализация по данным, для этого используются функции детализации и масштабирования (zoom in & zoom out).

С помощью Детализации можно переключиться из просмотра общих данных к более точечным, чтобы изучить нюансы по показателям. Например, в отчете по доходу от продаж по стране, пользователь может выбрать страну, а затем перейти к детализации, чтобы увидеть данные по доходу продаж по региону, городу, области и т.д. (в зависимости от настроек).

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

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

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

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