<rmcreative>

RSS

Все заметки с тегами «визуализация, данные»

Можно уточнить:

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

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

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

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

    5 комментариев