D3.js

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

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

Контекст [ править ]

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

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

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

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

Технические принципы [ править ]

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

Выборы [ править ]

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

 д3  .   selectAll  (  "p"  )                   // выбираем все элементы <p> 
    .   style  (  "color"  ,   "lavender"  )       // устанавливаем для стиля "color" значение "lavender" 
    .   attr  (  "class"  ,   "squares"  )         // устанавливаем атрибуту "class" значение "squares" 
    .   атрибут  (  «х»  ,   50  );                    // устанавливаем атрибут "x" (горизонтальное положение) на значение 50 пикселей

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

Переходы [ править ]

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

 д3  .   selectAll  (  "p"  )               // выбираем все элементы <p> 
    .   переход  (  "trans_1"  )        // переход с именем "trans_1" 
      .   задержка  (  0  )                   // переход начинается через 0 мс после триггера 
      .   длительность  (  500  )              // переход на 500 мс 
      .   легкость  (  d3  .easileLinear  // прогресс замедления перехода  )             линейный... 
    .   стиль  (  «цвет»  ,   «розовый»  );       // ... цвет: розовый

Привязка данных [ править ]

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

// Данные 
   varcountriesData   " черный   =   [ 
      {   имя  :   "Ирландия"  ,   доход  :   53000  ,   жизнь  :   78  ,   население  :   6378  ,   цвет  :   "   }, 
      {   имя  :   "Норвегия"  ,   доход  :   73000  ,   жизнь  :   87  ,   население  :   5084  ,   цвет  :   «синий»   }, 
      {   имя  :   «Танзания»  ,   доход  :   27000  ,   жизнь  :   50  ,   население  :   3407  ,   цвет  :   «серый»   } 
   ]; 
  // Создаём SVG-контейнер 
   var   svg   =   d3  .   выберите  (  «#крючок»  ).   добавить  (  «SVG»  ) 
         .   attr  (  "ширина"  ,   120  ) 
         .   attr  (  "высота"  ,   120  ) 
         .   стиль  (  «цвет фона»  ,   «#D0D0D0»  ); 
  // Создаём элементы SVG из данных 
     svg  .   selectAll  (  "circle"  )                    // создаем шаблон виртуального круга 
       .   data  (  countriesData  )                     // привязываем данные 
        .   join  (  "circle"  )                                   // объединяет данные в выделение и создает круговые элементы для каждого отдельного данных 
         .   attr  (  "id"  ,   function  (  d  )   {   return   d  .  name   })              // устанавливаем идентификатор круга в соответствии с названием страны 
         .   attr  (  "cx"  ,   function  (  d  )   {   return   d  .  Income   /   1000    })    // устанавливаем горизонтальное положение круга в соответствии с доходом 
         .   attr  (  "cy"  ,   function  (  d  )   {   return   d  .  life   })              // устанавливаем вертикальное положение круга в соответствии с ожидаемой продолжительностью жизни 
         .   attr  (  "r"  ,    function  (  d  )   {   return   d  .  pop   /   1000   *  2   })     // устанавливаем радиус круга в соответствии с населением страны 
         .   attr  (  "fill"  function   (  d  )  {   return   d.color   }  )  ,   ;         // устанавливаем цвет круга в соответствии с цветом страны

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

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

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

См. также [ править ]

Ссылки [ править ]

^ «Выпуск 7.9.0» . 12 марта 2024 г. Проверено 22 марта 2024 г.
^ «Для пользователей Protovis» , Mbostock.github.com , заархивировано из оригинала 6 августа 2012 г. , получено 18 августа 2012 г.
^ Мятт, Гленн Дж.; Джонсон, Уэйн П. (сентябрь 2011 г.), «5.10 Дополнительная литература» , « Осмысление данных III: Практическое руководство по проектированию интерактивных визуализаций данных» , Хобокен, Нью-Джерси: John Wiley & Sons , стр. А–2, ISBN 978-0-470-53649-0 , получено 23 января 2013 г.
^ «Примечания к выпуску» , D3.js , получено 22 августа 2012 г.
^ «Релиз v4.0.0 · d3/d3» . Гитхаб . 28 июня 2016 г. Проверено 27 декабря 2021 г.
^ Академический пример: Савва, Манолис; Конг, Николас; Чхайта, Арти; Ли, Фейфей; Агравала, Маниш; Хир, Джеффри (2011), «ReVision: автоматизированная классификация, анализ и редизайн изображений диаграмм» , Программное обеспечение и технологии пользовательского интерфейса ACM , получено 23 января 2013 г.
^ Босток, Огиевецкий и Хир, 2011 г.
^ Босток, Огиевецкий и Хир 2011 , гл. 3
^ Босток, Майк (5 февраля 2012 г.), Думая с объединениями
^ «Ручка Лопеса Хьюго» . Codepen.io . Архивировано из оригинала 22 марта 2016 года . Проверено 1 августа 2016 г.
^ «Редактировать скрипку» . JSFiddle.net . Проверено 1 августа 2016 г.
^ «Три маленьких круга» . Mbostock.github.io . Проверено 1 августа 2016 г.

Дальнейшее чтение [ править ]

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

Босток, Майкл; Огиевецкий, Вадим; Хир, Джеффри (октябрь 2011 г.), «D3: Документы, управляемые данными» , Транзакции IEEE по визуализации и компьютерной графике , 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.

[wikidata-a809806a9f7219347af04d7d1c6d87bbcc68b521-v12-1] «Выпуск 7.9.0» . 12 марта 2024 г. Проверено 22 марта 2024 г.

[2] «Для пользователей Protovis» , Mbostock.github.com , заархивировано из оригинала 6 августа 2012 г. , получено 18 августа 2012 г.

[3] Мятт, Гленн Дж.; Джонсон, Уэйн П. (сентябрь 2011 г.), «5.10 Дополнительная литература» , « Осмысление данных III: Практическое руководство по проектированию интерактивных визуализаций данных» , Хобокен, Нью-Джерси: John Wiley & Sons , стр. А–2, ISBN 978-0-470-53649-0 , получено 23 января 2013 г.

[4] «Примечания к выпуску» , D3.js , получено 22 августа 2012 г.

[5] «Релиз v4.0.0 · d3/d3» . Гитхаб . 28 июня 2016 г. Проверено 27 декабря 2021 г.

[6] Академический пример: Савва, Манолис; Конг, Николас; Чхайта, Арти; Ли, Фейфей; Агравала, Маниш; Хир, Джеффри (2011), «ReVision: автоматизированная классификация, анализ и редизайн изображений диаграмм» , Программное обеспечение и технологии пользовательского интерфейса ACM , получено 23 января 2013 г.

[7] Босток, Огиевецкий и Хир, 2011 г.

[8] Босток, Огиевецкий и Хир 2011 , гл. 3

[9] Босток, Майк (5 февраля 2012 г.), Думая с объединениями

[10] «Ручка Лопеса Хьюго» . Codepen.io . Архивировано из оригинала 22 марта 2016 года . Проверено 1 августа 2016 г.

[11] «Редактировать скрипку» . JSFiddle.net . Проверено 1 августа 2016 г.

[12] «Три маленьких круга» . Mbostock.github.io . Проверено 1 августа 2016 г.

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]

[10]

[11]

[12]