<rmcreative>

Какое-то время назад коллеги обратили моё внимание на библиотеку d3.js, предназначенную для визуализации данных. По началу я подумал, что это очередная штуковина для построения графиков, ну или, как максимум, библиотека для работы с векторной графикой. На деле всё оказалось несколько интересней.

Последовательность работы сводится примерно к следующему:

1. Получаем данные, которые будем визуализировать. Формат, в общем-то не важен, но удобней всего работать с JSON.
2. Привязываем данные к DOM-контейнеру при помощи data.
3. Используем селектор enter, которые выбираем ещё несуществующие представления для каждого элемента данных. Например, это могут быть столбики в графике.
4. Для каждого выбранного создаём столбик.

На словах это выходит немного запутанно. Код более красноречив:

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

Пробуем и пользуемся

Да, изучение рекомендую начинать с главной страницы. Пониманию основной идеи помогает вот эта интерактивная страница.

Ну и небольшая визуализация от меня. Количество постов в месяц за всё время существования этого блога.