Визуализация данных. Как мы в Uplab делаем информацию наглядной и понятной

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

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

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

Проект компании Uplab, о котором пойдёт речь — ГИС «Энергоэффективность». Это система электронной отчетности (реестр) по выбросам парниковых газов. Для портала мы создали 9 интерактивных дашбордов, которые представляют данные по выбросам в наглядном виде.

Что такое дашборд и чем он отличается от инфомассы? Читайте в специальной статье нашего блога!

О том, как происходили визуализация и анализ данных в проекте, рассказывает руководитель проекта Александра Паняшкина.

В крупном проекте визуализация данных — это работа, в которой задействовано множество специалистов. Такие проекты как портал ГИС «Энергоэффективность» мы в Uplab делаем вместе с привлеченными бизнес-аналитиками. На основе требований заказчика они создают макеты или прототипы дашбордов. Дизайнеры и фронтенд-разработчики нашей компании их улучшают; после улучшения макеты проходят ревью у наших аналитиков и потом отправляются в разработку.

Фронтенд- и бэкенд-разработчики в Uplab обычно используют бесплатные библиотеки. И для некоторых решений нужно искать сложные пути реализации, потому что инструментов в доступе меньше. Возможности разработчиков зависят от платформы, на которой сайт создаётся. Например, в работе с порталом ГИС «Энергоэффективность» ограничения были связаны в первую очередь с безопасностью. Это закрытый контур, сайт не должен отправлять запросы и передавать данные «наружу». Все используемые библиотеки и инструменты должны были отвечать стандартам безопасности. Также доступы к виртуальным машинам, задачам, документациям и к коду для разработки осуществлялись только по защищенному VPN-каналу.

Александра Паняшкина

руководитель проектов

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

Зачастую прототип проходит немало изменений, прежде чем стать «живой» визуализацией на сайте.

Мы можем улучшить прототип, который получили от заказчика: например, добавить переключатели или какие-то дополнительные столбики диаграммы. Это небольшие изменения.

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

Случается, что нам не нравятся какие-то детали или решения прототипа, либо их нельзя реализовать инструментами, доступными разработчикам. Тогда мы предлагаем своё решение и обсуждаем его с заказчиком

Александра Паняшкина

руководитель проектов

Все дашборды этого проекта интерактивные, и это было одним из пунктов технического задания. Например, в пузырьковой диаграмме «Потенциал снижения выбросов по отраслям» размер пузырьков отражает объем выбросов, а наведя на него курсор, можно увидеть таблицу с данными статистики.

Некоторые визуализации для ГИС «Энергоэффективность» прошли более 20 итераций, пока не стали наглядными и хорошо читаемыми. Например, для этой диаграммы дизайнеры много раз меняли размеры и прозрачность пузырьков, а также формулы для построения диаграммы.

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

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

Дашборд «Углеродный паспорт организации» тоже интерактивный: можно изменить производственный процесс и вид топлива и получить новую визуализацию.

Но на портале ГИС «Энергоэффективность» есть и не интерактивные элементы. Например, эта страница. Она отображает данные в Национальном кадастре, которые существуют только за один год, а потому не меняются.

Визуализация помогает решить несколько задач:

• понять, что происходит в данных;
• сравнить данные (на графике легче сопоставить величины, увидеть закономерности и сделать выводы);
• быстро принять решение.

Если данные на графике представлены правильно, руководителю проще понять обстановку, и выбрать дальнейшие шаги.

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

Как и в любой сфере, ключевые принципы визуализации данных рождены из опыта, успеха и неудач дизайнеров. Опирайтесь на этих четырёх «китов», и в визуализации данных ваши графики и диаграммы будут наглядными и понятными для пользователя: не придется тратить время на объяснения, зачем нужна эта визуализация данных и что это такое изображено на графиках.

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

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

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

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

Поэтому при создании визуализации важно использовать минимум цветов и элементов, чтобы не отвлекать внимание от главной идеи. Откажитесь от детализированных изображений и подберите простые, легко читаемые шрифты.
Не забывайте и про принцип «Одна задача — один график»: если нужно наглядно показать несколько массивов данных, сделайте несколько графиков или схем и объедините их в один дашборд.

Цвет помогает сделать информацию наглядной и понятной. Выбор цветовой схемы должен быть тщательно продуман, чтобы она была контрастной и вызывала правильные ассоциации у зрителей. Не забывайте и о научной основе — особенностях восприятия цветов: яркие диаграммы и графики в чистых либо «неоновых» цветах притягивают взгляд, а пастельные или в сдержанной «минеральной» палитре могут потеряться на их фоне. При этом яркие и кричащие цвета, особенно неоновых оттенков, могут вызвать раздражение и усталость глаз зрителей.

Семантика цвета важна:

Помните об инклюзивности. Не все люди хорошо видят оттенки цвета, некоторым сложно различить голубой и сиреневый, оранжевый и желтый. Иногда это происходит из-за специфики устройства, а иногда — из-за особенностей зрения. Поэтому лучше не применять в диаграммах похожие цвета.
Не используйте слишком много цвета — он должен быть лишь вспомогательным инструментом. Лучшая стратегия — взять для визуализации набор из 2−5 сдержанных, но хорошо контрастирующих друг с другом цветов.

Визуальные данные не должны быть повторением текста. Золотой стандарт — когда визуализация и текстовые пояснения к ней дополняют друг друга. Важно, чтобы взаимное расположение текста и визуализации было логичным и удобным для восприятия. Например, легенду лучше разместить после заголовка, но выше графика или диаграммы. Либо напротив соответствующих метрик.

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

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

Технические тонкости: существует в двух вариантах, Tableau Public и Tableau Desktop. Есть бесплатная версия, с достаточным функционалом для работы, и платная — с расширенным.

Инструмент для создания дашбордов от Google: позволяет визуализировать большие данные (big data). Обрабатывает информацию из разных источников: не только из Google, но и из Cloud SQL, YouTube Analytics, Яндекс. Метрика, Яндекс. Директ, PostgreSQL и Adwords API. Часто используется для визуализации научных данных. Уступает Tableau по арсеналу возможностей, но все же успешно справляется с задачами визуализации.

Технические тонкости: бесплатный, но только в рамках лимита времени. Не работает офлайн. Неудобная адаптация для мобильных устройств.

Plotly позволяет получить очень детальные графики. Здесь для визуализации данных есть библиотека с большим количеством шаблонов.

Технические тонкости: нет бесплатной версии. Интересная фича сервиса: проектам Plotly присваивается уникальный URL, который легко встроить в блоги

«Заточен» под пользователей с творческими профессиями: блогеров, журналистов, дизайнеров. Программа позволяет создавать сложные диаграммы, карты и таблицы без написания кода.

Технические тонкости: в бесплатной версии число визуализаций не ограничено, но в платной больше дизайнерских настроек, включая экспорт результата в PNG, SVG и PDF.

Генерирует красивые визуализации аналитических данных. Сервис использует анимацию и создаёт сторителлинг (серии визуализаций).

Технические подробности: в бесплатной версии результат содержит вотермарк.

Часть семейства программ Business Intelligence от Microsoft и признанный лидер среди сервисов для визуализации баз данных. Представляет собой обширный набор инструментов для разработки дашбордов. Те, кто имел дело с Excel и PowerPoint, легко разберутся в интерфейсе.

Технические подробности: Power BI Desktop доступен бесплатной для загрузки в базовой версии без взимания платы, при этом функционал вполне достаточный.

Это удобное приложение позволяет создавать диаграммы в формате HTML5, для отображения на разнообразных устройствах и во всех интернет-браузерах. Работает с широким спектром данных.

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

1. Визуализация данных — это процесс преобразования сложных числовых или текстовых данных в наглядные и понятные графики, диаграммы или инфографики.

2. Визуализация позволяет быстро и эффективно воспринимать информацию, выявлять связи и тенденции, делать выводы и принимать решения.

3. Хорошая визуализация внутри сервиса или приложения — результат работы большой команды специалистов.

4. Очень важно уметь выбирать правильный тип визуализации в зависимости от целей и характеристик данных.

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

6. Существует множество сервисов для создания визуализаций, от простых с необходимым функционалом до сложных, которые требуют времени на освоение.