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

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

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

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

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

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

Crossfilter.js

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Автор: KoGor

Источник ^[18]