D3.js

Разработчик(и)	Майк Босток , Джейсон Дэвис, Джеффри Хир , Вадим Огиевецкий и сообщество
Первоначальный выпуск	18 февраля 2011 г ( 18 февраля 2011 )
Стабильная версия	7.9.0 / 12 марта 2024 г ( 12 марта 2024 г. )
Репозиторий	github .с /d3 /d3
Написано в	JavaScript
Тип	Визуализация данных , библиотека JavaScript
Лицензия	БСД
Веб-сайт	d3js .org

D3.js (также известный как D3 , сокращение от Data-Driven Documents ) — это библиотека JavaScript для создания динамических интерактивных визуализаций данных в веб-браузерах . Он использует стандарты масштабируемой векторной графики (SVG), HTML5 и каскадных таблиц стилей (CSS). Это преемник более ранней платформы Protovis. Его развитие было отмечено в 2011 году, поскольку версия 2.0.0 была выпущена в августе 2011 года. С выпуском версии 4.0.0 в июне 2016 года D3 превратилась из одной библиотеки в набор небольших модульных библиотек, которые можно использовать независимо.

Контекст

Ранее предпринимались различные попытки реализовать визуализацию данных в веб-браузерах. Наиболее яркими примерами были наборы инструментов Prefuse, Flare и Protovis, которые можно считать прямыми предшественниками D3.js.

Prefuse — это набор инструментов для визуализации, созданный в 2005 году, который требовал использования Java , а визуализации отображались в браузерах с помощью подключаемого модуля Java. Flare представлял собой аналогичный набор инструментов 2007 года, который использовал ActionScript и требовал подключаемого модуля Flash для рендеринга.

В 2009 году, основываясь на опыте разработки и использования Prefuse и Flare, Джеффри Хир , Майк Босток и Вадим Огиевецкий из Stanford Visualization Group Стэнфордского университета создали Protovis, библиотеку JavaScript для создания графики SVG из данных. Библиотека была известна практикам визуализации данных и ученым.

В 2011 году разработка Protovis была остановлена, чтобы сосредоточиться на новом проекте D3.js. Опираясь на опыт работы с Protovis, Босток вместе с Хиром и Огиевецки разработали D3.js, чтобы обеспечить более выразительную среду, которая в то же время фокусируется на веб-стандартах и ​​обеспечивает повышенную производительность.

Технические принципы

Библиотека D3.js использует встроенные функции для выбора элементов, создания объектов SVG, их стилизации или добавления переходов, динамических эффектов или всплывающих подсказок . Этим объектам также можно стилизовать с помощью CSS. Большие наборы данных можно привязать к объектам SVG с помощью функций D3.js для создания текстовых/графических диаграмм и диаграмм. Данные могут быть в различных форматах, таких как JSON , значения, разделенные запятыми (CSV) или geoJSON , но при необходимости можно написать функции JavaScript для чтения других форматов данных.

Выбор

Центральный принцип проектирования D3.js заключается в том, чтобы позволить программисту сначала использовать селектор в стиле CSS для выбора заданного набора узлов объектной модели документа (DOM), а затем использовать операторы для управления ими аналогично jQuery . Например, можно выбрать все элементы абзаца HTML (представленные <p>...</p>), а затем измените цвет текста, например, на лавандовый:

 d3.selectAll("p")                 // select all <p> elements
   .style("color", "lavender")     // set style "color" to value "lavender"
   .attr("class", "squares")       // set attribute "class" to value "squares"
   .attr("x", 50);                 // set attribute "x" (horizontal position) to value 50px

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

Переходы

Объявив переход, значения атрибутов и стилей можно плавно интерполировать в течение определенного времени. Следующий код сделает весь HTML <p>...</p> элементы на странице постепенно меняют цвет текста на розовый:

 d3.selectAll("p")             // select all <p> elements
   .transition("trans_1")      // transition with name "trans_1"
     .delay(0)                 // transition starting 0ms after trigger
     .duration(500)            // transitioning for 500ms
     .ease(d3.easeLinear)           // transition easing progression is linear...
   .style("color", "pink");    // ... to color:pink

Привязка данных

Для более продвинутого использования загруженные данные управляют созданием элементов. D3.js загружает заданный набор данных, затем для каждого из его элементов создает объект SVG со связанными свойствами (форма, цвета, значения) и поведением (переходы, события).

// Data
  var countriesData = [
     { name: "Ireland", income: 53000, life: 78, pop: 6378, color: "black" },
     { name: "Norway", income: 73000, life: 87, pop: 5084, color: "blue" },
     { name: "Tanzania", income: 27000, life: 50, pop: 3407, color: "grey" }
  ];
// Create SVG container
  var svg = d3.select("#hook").append("svg")
        .attr("width", 120)
        .attr("height", 120)
        .style("background-color", "#D0D0D0");
// Create SVG elements from data 
    svg.selectAll("circle")                  // create virtual circle template
      .data(countriesData)                   // bind data
       .join("circle")                                 // joins data to the selection and creates circle elements for each individual data
        .attr("id", function(d) { return d.name })            // set the circle's id according to the country name
        .attr("cx", function(d) { return d.income / 1000  })  // set the circle's horizontal position according to income 
        .attr("cy", function(d) { return d.life })            // set the circle's vertical position according to life expectancy 
        .attr("r",  function(d) { return d.pop / 1000 *2 })   // set the circle's radius according to country's population 
        .attr("fill", function(d) { return d.color });        // set the circle's color according to country's color

Сгенерированная графика SVG разрабатывается в соответствии с предоставленными данными.

Добавление узлов с использованием данных

После привязки набора данных к документу использование D3.js обычно следует шаблону, в котором явное .enter() функция, неявное «обновление» и явное .exit() Функция вызывается для каждого элемента в связанном наборе данных. Любые методы, связанные после .enter() команда будет вызываться для каждого элемента набора данных, который еще не представлен узлом DOM в выборке (предыдущий selectAll()). Аналогично, неявная функция обновления вызывается для всех существующих выбранных узлов, для которых есть соответствующий элемент в наборе данных, и .exit() вызывается для всех существующих выбранных узлов, у которых нет элемента в наборе данных для привязки к ним. В документации D3.js приведено несколько примеров того, как это работает.

См. также

• Фреймворк JavaScript
• библиотека JavaScript

Дальнейшее чтение

Общая информация о самом D3.js

• Босток, Майкл; Огиевецкий, Вадим; Хир, Джеффри (октябрь 2011 г.), «D3: Документы, управляемые данными» , IEEE Transactions on Visualization and Computer Graphics , 17 (12), IEEE Press : 2301–2309, doi : 10.1109/TVCG.2011.185 , PMID   22034350 , S2CID   505461

Использование D3.js — начальный уровень

• Мюррей, Скотт (март 2013 г.), Интерактивная визуализация данных для Интернета, Введение в проектирование с помощью D3 (1-е изд.), Севастополь, Калифорния: O'Reilly Media , ISBN  978-1-4493-3973-9
• Тиммс, Саймон (сентябрь 2013 г.), Визуализация социальных данных с помощью HTML5 и JavaScript (1-е изд.), Бирмингем: Packt Publishing , ISBN  978-1-7821-6654-2

Использование D3.js — средний уровень

• Дьюар, Майк (июнь 2012 г.), Стил, Джули; Бланшетт, Меган (ред.), Начало работы с D3 , Создание документов, управляемых данными (1-е изд.), Севастополь, Калифорния: O'Reilly Media , ISBN  978-1-4493-2879-5
• Ци Чжу, Ник (октябрь 2013 г.), Визуализация данных с помощью кулинарной книги D3.js (1-е изд.), Бирмингем: Packt Publishing , ISBN  978-1-7821-6216-2

Другие

• Ньютон, Томас; Вильярреал, Оскар (2014), Изучение картографирования D3.js , Бирмингем: Packt Publishing , стр. 126, ISBN  9781783985609
• Наварро Кастильо, Пабло (2014), Освоение D3.js , Бирмингем: Packt Publishing , стр. 352, ISBN  9781783286270
• Теллер, Свижек (2013), Визуализация данных с помощью d3.js , Бирмингем: Packt Publishing , стр. 194, ISBN  9781782160007
• Виау, Кристоф (2013), Разработка D3.js Edge: создание повторно используемых компонентов и диаграмм D3 , Bleeding Edge Press , стр. 268, ISBN  9781939902023 , заархивировано из оригинала 3 сентября 2014 г. , получено 27 августа 2014 г.
• Микс, Элайджа (2014), D3.js в действии , Manning Publications , стр. 325, ISBN  9781617292118
• Маклин, Малкольм (2014), Советы и рекомендации по D3 , Leanpub , стр. 580
• Кинг, Ричи (2014), Визуальное повествование с помощью D3: Введение в визуализацию данных в JavaScript , Серия данных и аналитики Аддисона-Уэсли , стр. 288

Видео

• Гопал, Нихил (октябрь 2014 г.), D3 и CoffeeScript: введение программиста Python в веб-визуализацию , Севастополь, Калифорния: O'Reilly Media
• Кинг, Ричи (декабрь 2014 г.), Живые уроки по визуализации D3: введение в визуализацию данных в JavaScript , Addison-Wesley Professional

Связанные проекты

• Грамматики визуализации Vega и Vega-Lite представляют собой декларативную спецификацию визуализации, построенную на основе частей D3.js.

Внешние ссылки

• Официальный сайт
• Галерея D3.js
• Blocksplorer , поиск блоков по используемым методам
• Библиотеки «многоразовых диаграмм» D3:
  • С3 https://c3js.org
  • Сюжет https://plot.ly/javascript
• bl.ock.org. Архивировано 7 апреля 2017 г. на Wayback Machine и Blockbuilder.org : популярной ранней системе галерей.
• Observablehq.com : основная площадка D3js.