Визуализация данных для вашего Web-проекта

30 июля
Александр Кашеверов, Senior JavaScript Developer
Визуализация данных для вашего Web-проекта
Статья для тех, кто раньше не использовал графики в веб, но собирается. Также для тех, кто хочет глубже познакомиться с этой темой.

Цель — осветить предметную область и упростить проблему выбора конкретного решения. Рассмотрим отличия библиотек и остановим взгляд на популярных вариантах, будут примеры и совсем немного теории.

Для лучшего понимания — необходимо знание JavaScript и общее представление о работе веб.

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

Моя статья, вероятно, не всеобъемлющая, поэтому пишите комментарии и личные сообщения, я готов выслушать критику и дополнить материал.

Итак, поехали!

Допустим, у вас есть сайт...

… который вы захотели раскрасить с помощью визуализации данных.

Это могут быть как простейшие графики, так и совсем нетривиальные. Статические или интерактивные. Несколько отрисованных элементов или несколько десятков тысяч. Какое решение подходит для конкретного случая — вот задача, которую необходимо решить.

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

Возьмем, к примеру, визуализацию спроса на авиабилеты внутри США в День Благодарения, которую «Нью-Йорк таймс» представила в 2015 году. То, как реализовать подобную визуализацию, сразу не очевидно.

Как вы станете решать задачу, не зная предметной области? Скорее всего выберете один из вариантов:

  • Взять «помощь друга»;
  • Загуглить, изучить вопрос самостоятельно и выбрать нужный инструмент.

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

Итак, задача — визуализировать данные на сайте. Рассмотрим более детально задачу и из каких решений мы можем выбирать?

Технологическое разнообразие

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

  • HTML — почему бы и нет? Мы ведь можем нарисовать простейший bar-chart с помощью HTML-тегов и CSS.
  • SVG — векторная графика, она гарантирует четкое изображение вне зависимости от масштаба. Синтаксис у него XML-подобный. Правда, если для сложной визуализации понадобится несколько десятков тысяч точек, это может заметно влиять на производительность.
  • Canvas — здесь мы можем нарисовать практически все, что угодно. Для этого нам нужно создать элемент на странице и обращаясь к нему через API. Нарисовать что-то, добавить цвет, фон, текст и т. д. С помощью Canvas обычно визуализируют большие объемы данных.
  • WebGL — позволяет рисовать трехмерную графику.
  • VML — устаревшая технология от Microsoft, XML-подобная. Подойдет тем, кому нужно обеспечить нормальную работу сайта в браузере Internet Explorer более старых версий, чем десятая.

Конечно, все перечисленные варианты можно комбинировать. Можно, например, реализовать динамическое переключение от SVG на Canvas в зависимости от объема отображаемых данных.

Функциональное разнообразие

Графики могут:

  • быть разных типов:
    линейный, столбчатый, древовидный и т. д.
    Картинки взяты отсюда.
  • быть адаптивными:
    реагировать на изменение размера страницы.
    Картинка взята отсюда.
  • быть анимированными:
    например, допускать появление и удаление элементов.
    Пример взят здесь.
  • быть открытыми или закрытыми для кастомизации:
    скажем, известную библиотеку D3 можно очень тонко настроить под свои нужды, в отличие от многих других библиотек.
  • быть стабильными или нет:
    например, при загрузке данных значение какого-то параметра равного null/undefined может привести к полной неотрисовке графика.
  • быть кроссбраузерными или нет:
    будет ли график работать в мобильной Opera?
  • поддерживать экспорт (сохранение) графика в картинку.
  • поддерживать интеграцию с фреймворками:
    сейчас трудно себе представить крупное приложение на чистом JS без Angular/React/тому подобное.
  • поддерживать сохранение/загрузку состояния:
    например, сохранить состояние когда скрыта какая-нибудь серия точек на линейном графике.

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

Посмотрим на не-технические характеристики

Вот они:

  • Сообщество. Например, у Google Charts или D3 большие и активные комьюнити, где можно получить ответы на многие вопросы. Если вы выбрали малоизвестную библиотеку, то придется самому лезть в код и со всем этим разбираться.
  • Поддержка. Понятие применимо скорее к платным решениям. На ваши вопросы ответят разработчики.
  • Лицензия. Доступна ли библиотека для коммерческого использования? Например, Google Charts разрешают использовать свою библиотеку бесплатно, но библиотека должна быть загружена с серверов Google.
  • Актуальность. Из всего многообразия библиотек добрая половина потенциально подходящих уже не поддерживается и забыта.

Теперь перейдем к практике и рассмотрим реальные продукты, которые есть на рынке.

Решения, популярные в 2018 году

Платные решения

Это далеко не полный список, однако стоит перечислить ряд популярных библиотек:

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

Бесплатные решения

Google Charts by Google, USA, 2007.

  • Продукт предлагает огромный выбор: от простейших линейных до сложных комбинированных, многоуровневых графиков. Есть множество готовых примеров. Фичи легко применить, например, графики можно эмбеддить или экспортировать в виде картинок. Библиотека совместима с разными браузерами и платформами, работает на iOS и Android, поддерживает старые версии IE и не требует установки плагинов. Использует HTML, SVG, VML для визуальной отрисовки. Есть минус — согласно лицензии, вы не можете использовать файлы библиотеки локально.
  • Продукт бесплатный, но не опенсорс. Вы обязаны подгружать исходный код библиотеки с серверов Google.
  • Пример простейшего графика
  • Примеры

D3.js by Mike Bostock, USA, 2011.

  • Библиотека претендует на воплощение некого data-driven подхода. В отличие от многих других, позволяет отобразить данные именно так, как вы хотите. Это происходит за счет гибкого API, к которому нужно привыкнуть. Функционал библиотеки позволяет кастомизировать любые графики и предоставляет более широкие возможности, чем Google Charts (в последней представлены наиболее распространенные варианты графиков). Для отображения можно использовать любой вариант: html, svg, canvas, webgl, …
  • Лицензия: BSD-3
  • Пример простейшего графика
  • Примеры

Echarts by Chinese Baidu, China, 2013.

  • Бесплатная библиотека для визуализации данных от наших друзей из Китая. Она действительно достойна внимания, предоставляет набор из готовых, достаточно хорошо кастомизируемых стандартных графиков и их комбинаций. Отмечу приятный UI и интерактивность из коробки. Библиотека хорошо работает с большими объемами данных и включает много примеров, в том числе 3D-графиков. Написана на чистом JS, использует библиотеку zrender в качестве движка для отрисовки Canvas. Из минусов — не все описание есть на английском и англоязычное комьюнити небольшое.
  • Лицензия: BSD
  • Пример простейшего графика
  • Примеры

Chart.js by open-source contributors, Worldwide, 2013.

  • Библиотека предлагает воспользоваться базовым набором графиков нескольких типов (8 на момент написания статьи). Использует Canvas для отрисовки графики. Очень приятная ламповая библиотека для быстрого старта. Отмечу UI и красивый дизайн, а также легкость освоения.
  • Лицензия: MIT
  • Пример простейшего графика
  • Примеры

Chartist by an individual developer Gion Kunz, Switzerland, 2014.

  • Предлагает красивые респонсив-чарты, немного кастомизации и быстрый старт. Из минусов — всего три типа чартов (на момент написания статьи), плюс их некоторые комбинации. Использует SVG для отрисовки графики. Еще одна теплая, ламповая библиотека со своей красотой, но достаточно узкой областью применения.
  • Лицензия: MIT
  • Пример простейшего графика
  • Примеры

Plotly by Plotly team, Canada, 2015.

  • В основе этой библиотеки лежит D3.js и stack.gl. Заметен высокоуровневый, декларативный подход. Предлагает 20 видов графиков (на момент написания статьи), в том числе трехмерные. D3js, которая лежит в основе, позволяет хорошо кастомизировать графики. Использует SVG, WebGL для отрисовки графики. Комбинация количества и качества графиков с MIT-лицензией может быть привлекательной для разработчиков крупных продуктов.
  • Лицензия: MIT
  • Пример простейшего графика

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

Примеры

  1. Визуализация дорожного движения от Uber. Uber визуализирует большой объем данных о дорожном движении с помощью JavaScript и WebGL. Библиотеку для этого Uber разрабатывают сами, причем с MIT лицензией.
  2. Интерактивная инфографика: «Распорядок дня знаменитых творческих людей». Реализовано простой версткой на HTML + CSS.
  3. Занятия среднестатистического американца в течение дня. Данные получены на основе опроса, а их визуализацию сделана на D3, используется SVG.

Всем спасибо!