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



    Автор: Александр Кашеверов, Senior JavaScript Developer

    Добро пожаловать и приятного чтения!

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

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

    Для лучшего понимания — необходимо знание 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.


    Всем спасибо!
    • +5
    • 7,7k
    • 5
    DataArt
    135,55
    Технологический консалтинг и разработка ПО
    Поделиться публикацией

    Комментарии 5

      0
      В чем польза статьи? Загуглить библиотеки для построения графиков может любой
        +1
        Напротив, довольно удобная статья — справка для быстрого старта
          0
          Как раз хотели упростить поиск :)
          0
          D3 реально мощная штука, но своеобразная, потребуется попотеть вначале. Ее гибкость может стать проблемой в неопытных руках — способов сделать что-то много и не всегда понятно какой из них правильный.
            0
            Согласны!

          Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

          Самое читаемое