Блог

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

12 июля 2024
711
image
image
image
Александра Паняшкина руководитель проектов
image
Елена Андреева редактор-копирайтер
Визуализация данных. Как мы в Uplab делаем информацию наглядной и понятной
Информации в интернете всё больше, а потому и разбираться в ней всё сложнее. В этой непростой задаче на помощь приходит магия визуализации. Когда данные представлены в виде карт и диаграмм, с ними гораздо проще работать, например, сравнивать или принимать решение на основе новых вводных. В этой статье мы начнём с примера: покажем, как мы преобразовали в цифры данные о выбросах парниковых газов в одном из наших недавних проектов.

Способы визуализации

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

Кейс: как мы составили из графиков углеродный паспорт компании

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

Кооперация дизайнеров, разработчиков и аналитиков

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

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

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

Как данные проходят путь от набора чисел к информативному дашборду: рассматриваем визуализацию данных и её методы на портале ГИС «Энергоэффективность».

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

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

Вывод: зачем нужна визуализация

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

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

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

Принципы визуализации данных

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

Логика

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

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

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

Простота

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

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

Цвет

Цвет помогает сделать информацию наглядной и понятной. Выбор цветовой схемы должен быть тщательно продуман, чтобы она была контрастной и вызывала правильные ассоциации у зрителей. Не забывайте и о научной основе — особенностях восприятия цветов: яркие диаграммы и графики в чистых либо «неоновых» цветах притягивают взгляд, а пастельные или в сдержанной «минеральной» палитре могут потеряться на их фоне. При этом яркие и кричащие цвета, особенно неоновых оттенков, могут вызвать раздражение и усталость глаз зрителей.
Семантика цвета важна:
  • зеленый ассоциируется с положительными значениями или успехом, а также с экологией, природой, аграрным сектором, знаками безопасности;
  • красный — с отрицательными значениями, запретами, опасностью;
  • синий и голубой — с коммуникацией, социальными сетями, IT, морем (туризм, рыболовство, морские перевозки);
  • серый — с тяжелой промышленностью.
Помните об инклюзивности. Не все люди хорошо видят оттенки цвета, некоторым сложно различить голубой и сиреневый, оранжевый и желтый. Иногда это происходит из-за специфики устройства, а иногда — из-за особенностей зрения. Поэтому лучше не применять в диаграммах похожие цвета.
Не используйте слишком много цвета — он должен быть лишь вспомогательным инструментом. Лучшая стратегия — взять для визуализации набор из 2−5 сдержанных, но хорошо контрастирующих друг с другом цветов.

График + текст

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

Визуализация данных: что выбрать?

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

Tableau

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

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

Google Data Studio

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

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

Plotly

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

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

Datawrapper

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

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

Flourish

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

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

Power BI Desktop

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

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

ChartBlocks

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

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

Саммари

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

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

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

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

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

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

Расскажите
о вашем проекте