Какое-то время назад коллеги обратили моё внимание на библиотеку d3.js, предназначенную для визуализации данных. По началу я подумал, что это очередная штуковина для построения графиков, ну или, как максимум, библиотека для работы с векторной графикой. На деле всё оказалось несколько интересней.
Последовательность работы сводится примерно к следующему:
- Получаем данные, которые будем визуализировать. Формат, в общем-то не важен, но удобней всего работать с JSON.
- Привязываем данные к DOM-контейнеру при помощи
data
. - Используем селектор
enter
, которые выбираем ещё несуществующие представления для каждого элемента данных. Например, это могут быть столбики в графике. - Для каждого выбранного создаём столбик.
На словах это выходит немного запутанно. Код более красноречив:
d3.select("body").selectAll("p") // выбрали все p внутри body .data([4, 8, 15, 16, 23, 42]) // привязали к выборке данные .enter() // будем создавать элементы, если их ещё нет .append("p") // это будет элемент p .text(function(d){ // используем наши данные для задания текста return "I'm number " + d + "!"; });
Результатом будет шесть элементов p
с номерами, соответствующими переданным данным. Подобно тексту можно задавать и другие свойства, CSS, атрибуты… да всё что угодно. В результате можно получить очень интересные визуализации прилагая к этому минимум усилий. Это главная идея и возможность библиотеки. Остальное предназначено для удобной манипуляции данными, работы с SVG, созданию анимации, AJAX, работы с цветом, проекции значений на разные координатные системы и даже работы с гео-API. Всё вместе позволяет создавать очень интересные интерактивные визуализации.
Да, изучение рекомендую начинать с главной страницы. Пониманию основной идеи помогает вот эта интерактивная страница.
Ну и небольшая визуализация от меня. Количество постов в месяц за всё время существования этого блога.