Crossfilter.js, dc.js и D3.js для визуализации Данных

    Приветствую ценителей красивой и функциональной визуализации данных! Предлагаю вашему вниманию небольшой обзор нескольких JavaScript библиотек, которые вкупе с D3.js позволят создать интерактивную визуализацию многомерных данных с возможностью применения фильтрации «на лету».


    Заинтересовались, тогда добро пожаловать под кат.

    Примечание: Данная статья является в некоторой степени компиляцией нескольких статей из замечательного блога www.d3noob.org, переработанных и дополненных в соответствии с моим видением задачи визуализации данных.

    Визуализация данных и аналитика


    У нас в стране инфографика в основном ассоциируется с картинками, созданными дизайнерами (иногда весьма недурно), хотя последнее время стало активнее развиваться ещё и видео. Это лишь вершина айсберга, которую оккупировали маркетологи, истинная же мощь доступна лишь водолазам аналитикам-программистам. Но о сложившейся ситуации как-нибудь в другой раз, а сейчас давайте вернёмся к интерактивной инфографике. Обычно под словом «интерактивная» подразумевается возможность отображать тултипы, менять масштаб, иногда применять фильтры и менять структуру данных, но всё это, как правило, подчиняется заранее продуманной логике (сценарию). А теперь представьте, что вы можете управлять потоком данных сами, с минимальными ограничениями, представьте, что вы можете задавать произвольные простые (без формул) фильтры, не ограничиваясь выбором из списка. А теперь представьте ещё больше, а именно: все изменения практически мгновенно отображаются на всех графиках, представляющих многомерный массив данных. Звучит неплохо, не так ли?

    Crossfilter.js


    Crossfilter это JavaScript библиотека для работы с многомерными данными в браузере. Crossfilter обеспечивает экстремально быстрое взаимоизменение (менее 30мс) связанных между собой представлений данных (срезов многомерных данных) даже если входные данные содержат более миллиона строк. Библиотека создана людьми, имеющими непосредственное отношение к d3.js, это Mike Bostock и Jason Davies.

    В основе работы с данными лежат принципы модного нынче Map-Reduce. Для человека, который с этим прежде не сталкивался всё это звучит довольно сложно и запутанно, так что давайте разбираться. Итак что обычно делают с многомерными данными (вспоминаем сводные таблицы из Excel)? Их обычно группируют всевозможными способами, суммируют, сортируют, подсчитывают частоту вхождения значений и т. д. За это и отвечает Reduce, а Map обеспечивает параллельное вычисление всех этих манипуляций. Конечно в реальности всё немного сложней, но, думаю, для первого приближения сойдёт.

    Так что же может crossfilter


    Как говорится, лучше один раз увидеть, а сделать это можно на Github странице библиотеки.


    Перед нами информация о 231,083 полётах в различных разрезах. Здесь мы видим пять представлений данных: четыре столбчатых диаграммы и одна таблица. На графике Time of Day отображено распределение полётов в зависимости от часа. Arrival delay показывает распределение количества задержек рейсов, сгруппированных в 10-ти минутные интервалы. Distance показывает распределение рейсов по дальности полёта (интервал 50 миль). Date — количество рейсов в день. И всё это было отрендерено на стороне клиента, то есть у нас в браузере, согласитесь, неплохо для такого количества данных.

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

    И самое главное, всё это великолепие «Released under the Apache License 2.0».

    DC.js спешит на помощь


    Если вы посмотрите код демо-примера для crossfilter, вы увидите, что он занимает более 500 строк. Всё потому, что crossfilter создавался не для визуализации данных, а для манипуляции ими. D3.js же, в свою очередь, создавался как раз для визуализации данных. Тут нам на выручку приходит библиотека dc.js за авторством Nick Qi Zhu, которая связывает две интересующие нас технологии в один мощный инструмент. К сожалению, все многообразие графиков D3.js нам доступно не будет, но тех что реализованы в dc.js достаточно для большинства случаев. DC.js поддерживает следующие типы графиков:

    • Bar Chart
    • Pie Chart
    • Row Chart
    • Line Chart
    • Bubble Chart
    • Geo Choropleth Chart
    • Data Table

    Примеры реализованных графиков можно посмотреть на Github странице проекта. Библиотека тоже опубликована под лицензией «Apache License 2.0».

    Больше инфографики красивой и функциональной


    Ну вот, теперь вы знаете ещё несколько инструментов визуализации данных и можете создавать многокомпонентные графики с фильтрацией «на лету». Успехов вам в реализации ваших замыслов.

    Хаб, посвящённый визуализации данных


    Дорогие хабровчане, как вы смотрите на создание хаба Data visualization или Визуализация данных? Потому что сейчас из близких тематических хабов существует только хаб Инфографика, но он посвящён собственно инфографике (результатам), а не процессу её создания. Определения этих двух терминов можно найти в википедии: Infographic, Data visualization.
    Так что всех заинтересованных прошу выразить своё мнение по данному вопросу.

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

    Нужен ли новый Хаб, посвящённый визуализации данных?
    • 69.1%Нужен, отдаю предпочтение названию «Визуализация данных»307
    • 20.7%Нужен, отдаю предпочтение названию «Data visualization»92
    • 9.9%Не нужен, нечего засорять мой любимый хабрахабр сомнительными хабами!44
    • 0.2%Изложу свою позицию в комментариях1
    Поделиться публикацией

    Похожие публикации

    Комментарии 15
      +1
      А как обстоят дела с поддержкой IE8,9,10.
      На canvas или Webgl рисуется ??
        0
        SVG
          +1
          IE9/10 -всё работает, хотя есть свои нюансы. IE8 не поддерживается.
          На canvas рисовать можно, но с интерактивностью возникают сложности (смотрите мою предыдущую статью).
          +2
          Работал с D3 и dc на паре проектов.

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

          Последовательность вызовов тоже иногда ведет себя странно, пока разберешься запланированно ли это или открывать баг-репорт опять уходит лишний час (

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

          Отдельный инструмент для манипуляции с данными для диаграмм, как мне кажется, в большинстве случаев все усложнит, так как будет эквивалентен циклу или паре циклов с условиями.
            0
            Спасибо за релевантный опыт! Библиотеки развиваются, возможно в дальнейшем проблем будет меньше. Ну а то, что для каждого проекта необходимо рассматривать целесообразность использования той или иной сторонней библиотеки, это само собой. Для каждой задачи свой инструмент, и каждый выбирает его, исходя из собственных предпочтений.
            0
            Мне когда то давно говорили что D3 есть якобы условный продукт (для коммерческих целей он платный). Проясните ситуацию пожалуйста. (Желательно еще и про Crossfilter)
              +2
              На сайте написано BSD license. Подозреваю, что вас обманули.
                0
                спасибо
                0
                Класс, спасибо!
                0
                Было бы неплохо услышать о других системах визуализации данных.
                Их как-бы много, но на практике достойных и удобных для применения — единицы.

                PS selection.datavisualization.ch/ — многое перепробовал, но идеала не нашлось.
                  0
                  В добавок можно еще привести Flot.

                  А так — идеальных и нет. Все-таки, не самая простая штука — визуализация данных. Обычно приходится делать удобно для себя, под проект, создавать специфическое под данные проекты API работы с графикой.
                    0
                    Flot неплох, хотя по мне так AmChart лучше.

                    Но в обоих — нет прогресс баров, флагов состояния, gauges.
                  0
                  Если вы посмотрите код демо-примера для crossfilter, вы увидите, что он занимает более 500 строк.

                  Из которых 150 — это CSS, и ещё 50 — HTML.
                    0
                    Ну да, ну вы не обязаны использовать надстройку DC, работайте с crossfilter напрямую. У DC есть dc.css, который за вас уже написали.

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

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