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

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


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

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

Источник вдохновения:

• Crossfilter, dc.js and d3.js for Data Discovery
• Introduction to dc.js

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

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

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.
Так что всех заинтересованных прошу выразить своё мнение по данному вопросу.