Инструменты визуализации данных: D3.js

Сегодня мы начинаем серию статей, которые расскажут о самых современных средствах визуализации данных. Первая на очереди – библиотека D3.js, позволяющая добавить эффективный модуль визуализации данных в любое веб-приложение. В этой статье мы расскажем о библиотеке и принципах ее работы, обсудим главные особенности, которые выделяют этот инструмент среди ему подобных.

D3.js и концепция Data-Driven Documents

D3.js (или просто D3 – DataDrivenDocuments) – это библиотека JavaScript, использующая цифровые данные для создания и контроля динамических и интерактивных графических элементов, которые могут отображаться в веб-браузере. Кроме всего прочего, D3 как инструмент визуализации данных поддерживает технологии, предусмотренные стандартом W3CSVG (ScalableVectorGraphics – масштабируемая векторная графика), JavaScript, HTML5 и CSS3.

Естественно, D3 – не первый подход к веб-визуализации данных. Предшественники D3.js, такие как, например, IEEE и Flare, также предполагали «бесшовную» работу всех компонентов, однако в угоду инкапсуляции используемые классы были скрыты от пользователя и программиста в том числе. В этом смысле D3 является инновационным подходом, поскольку в библиотеке используется стандартная DOM-модель (DocumentObjectModel, объектная модель документа). Любой элемент (например, HTML-документ или веб-приложение) известной структуры, таким образом, может быть представлен в виде дерева узлов, каждый из которых представляет собой образец данных – текстовый, графический или любой другой объект. Узлы связаны между собой отношением «родитель-потомок», что позволяет программам и скриптам получать доступ к веб-документам, изменять их структуру и содержимое, а также, естественно, оформление.

d3

 

Важно подчеркнуть, что программный интерфейс DOM является полностью универсальным, то есть не зависит ни от языка, ни от платформы. Надо ли говорить, что использование этой модели – несомненный козырь в рукаве разработчиков D3.js? Для нашей с вами специфики – визуализации больших данных – особенно полезно было бы контролировать окончательный результат. D3, в отличие от многих подобных библиотек, дает такую возможность.

Принципы работы

Как уже было сказано, библиотека D3.js обладает возможностью подключения к абсолютно любой HTML-странице с использованием JavaScript. D3 использует стандартные функции языка для выделения элементов, создания SVG-объектов и стилей, а также динамических эффектов. Что особенно актуально, даже очень большие наборы данных могут быть преобразованы в SVG-объекты при помощи простых функций и представлены в виде диаграмм и таблиц, как графических, так и в формате richtext. При этом библиотека может использовать данные в абсолютно любом формате; единственное условие – все используемые форматы должны быть прописаны в коде.

Разберемся с основными техническими принципами библиотеки и структурой программного интерфейса. Итак, четыре основополагающих принципа работы D3.js:

  • Выделение. Центральный принцип D3 – возможность выбора (выделения) необходимого набора DOM-узлов (вроде того, как это реализовано через CSS), чтобы затем использовать операторы преобразования этих данных (как через jQuery).
  • Переход. Еще одна функция библиотеки применяется к объектам для постепенного перехода одного значения некоего атрибута к другому. Простейший пример – некий текст постепенно изменяет свой цвет с синего, например, на красный.
  • Привязка данныхДля более сложных задач можно создать ситуацию, при которой загрузка данных провоцирует создание элементов. Допустим, библиотека загружает некий набор данных, а затем для каждого элемента создает SVG-объект с соответствующими параметрами (форма, цвет, значение) и поведением (переходы, события).
  • Добавление узлов. После того как созданы все объекты, библиотека добавляет на страницу DOM-узлы, обеспечивая странице или приложению желанный внешний вид. Еще раз подчеркнем, что для визуализации больших данных это означает не только полностью «прозрачное» представление информации, но и полноценный контроль над внутренними механизмами работы программного интерфейса.

Резюме, или почему D3?

Мы постарались объяснить, в чем состоит концепция и основные принципы работы библиотеки D3 – и хотим еще раз напомнить о ее «фишках»:

  • «бесшовная» интеграция с самыми современными технологиями вроде HTML5 и CSS3;
  • использование стандартной, универсальной модели DOM, которая не только работает с любым языком, но и позволяет представить любой документ (в частном случае, представление набора данных) в удобном для конечного пользователя формате;
  • прозрачность разработки – функции библиотеки не скрыты внутри неких классов (как это происходило с некоторыми ее предшественниками), а могут использоваться в любом месте документа при условии обращения к библиотеке;
  • контроль над представлением данных – как в рамках программирования, так и относительно конечного результата визуализации.

В следующих статьях мы продолжим рассказ об инструментах визуализации данных, рассмотрим самые современные и актуальные концепции, методологии и подходы, призванные помочь специалисту по большим данным в сложной, но интересной задаче визуализации информации.

Добавить комментарий

Ваш e-mail не будет опубликован.

закрыть

Поделиться

Отправить на почту
закрыть

Вход

закрыть

Регистрация

+ =