<rmcreative>

RSS

Визуализация данных на JavaScript, d3.js

28 января 2012

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

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

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

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

Комментарии RSS

  1. №5811
    BOLVERIN
    BOLVERIN 28.01.2012, 17:12:47

    удобная и простая штукенсия. надо будет где-нить попользовать)

  2. №5813
    Kaener
    Kaener 28.01.2012, 18:35:00

    Забавно, только позавчера смотрел лекцию на тему d3.js. Таки надо поэкспериментировать.

  3. №5814
    Максим
    Максим 29.01.2012, 1:02:24

    Спасибо, глянем

  4. №5817
    Алексей
    Алексей 29.01.2012, 21:58:05

    Ода!!!!! Одаааа!!!! Аааа!!! ААААА!!!! Это та тема которая мне нужна! arborjs - просто достал. А нужно визуализировать огромное количество данных. Если можно будет добавлять к каждому кружочку кнопочки для интерактивности и удаления, то вообще то что доктор прописал, тогда когда доктор прописал.

  5. №5819
    Sam
    Sam 30.01.2012, 21:37:44

    Можно добавлять кнопочки.

  1. Почта опубликована не будет.

  2. Можно использовать синтаксис Markdown или HTML.

  3. Введите ответ в поле. Щёлкните, чтобы получить другую задачу.