D3.js

D3.js

Тип	Візуалізація даних, Бібліотека JavaScript
Розробники	Майк Босток, Джейсон Девіс, Джефрі Хір, Вадим Огієвецкий, і спільнота
Перший випуск	18 лютого, 2011; 14 років тому (2011-02-18)
Стабільний випуск	5.9.7 (7 вересня, 2019; 6 років тому (2019-09-07)[1])
Платформа	Бібліотека JavaScript
Операційна система	кросплатформність
Мова програмування	JavaScript
Доступні мови	Англійська
Стан розробки	Активний
Ліцензія	BSD
Репозиторій	https://github.com/d3/d3
Вебсайт	d3js.org
Медіафайли у Вікісховищі

D3.js (також відомий як D3, скорочено від Data-Driven Documents(укр. Документи, керовані даними)) — це бібліотека JavaScript для створення динамічної та інтерактивної візуалізації даних у веббраузерах. Він використовує широко реалізовані стандарти масштабованої векторної графіки (абревіація SVG), HTML5 та Каскадних Таблиць Стилів (CSS). Він є нащадком фреймворку Protovis.^[3] На відміну від багатьох інших бібліотек, D3.js дозволяє чудово контролювати кінцевий візуальний результат.^[4] D3.js вперше набув популярності в 2011 році^[5], хоч вже і версія 2.0.0 була випущена в серпні 2011 року, себто він отримав визнання не на ранніх стадіях.^[6]

D3.js використовується у сотнях тисяч вебсайтів.^[7] Його часто застосовують для створення інтерактивної графіки на вебсайтах новин. Також D3.js стає в пригоді при створенні інформаційних 'дошок', де дані стають легші для сприйняття та податливішими для досліджень.

За допомогою цієї бібліотеки також можливе створення інтерактивних карт із використанням даних GIS . Крім того, мобільність формату SVG через його векторну основу дозволяє створену у D3 графіку використовувати у широкометражному друці, на приклад для білбордів або ж журналів, на відміну від растрової.

Уже було багато спроб ввести концепт візуалізації даних у веб індустрію. Найбільш помітними прикладами були набори інструментів (методів) Prefuse, Flare та Protovis, які можна вважати прямими попередниками D3.js.

Prefuse — це інструментарій візуалізації, створений ще у 2005 році, який вимагав використання Java, бо саме за допомогою плагіна, написаного цією мовою, у браузері рендерилася графіка, створена цим інструментарієм.

Flare був аналогічним набором інструментів, тільки він був пристосованим до трендів веброзробки 2007 року (рік випуску Flare), тому використовував ActionScript, і для рендерингу потрібен був плагін Flash.

У 2009 році, спираючись на досвід розробки та використання програми Prefuse and Flare, Джефф Хір, Майк Босток та Вадим Огієвецький зі Стенфордського гуртка візуалізації однойменного університету створили Protovis [Архівовано 23 грудня 2019 у Wayback Machine.], бібліотеку JavaScript для створення графіки SVG з даних. Бібліотека була відома практикам візуалізації даних та науковцям.^[8]

У 2011 році розробку Protovis [Архівовано 23 грудня 2019 у Wayback Machine.] було зупинено, щоб зосередитися на новому проекті, а саме D3.js. Спираючись на досвід роботи з Protovis, Босток разом з Хіром та Огієвецьким, розробили D3.js, щоб створити фреймворк із більшим візуальним потенціалом, який в той же час орієнтується на вебстандарти та пропонує підвищену продуктивність.^[9]

Вбудована у HTML вебсторінки, бібліотека JavaScript D3.js використовує заздалегідь вбудовані функції JavaScript для вибору елементів, створення SVG-об'єктів, стилізування їх або додавання до них різних переходів, динамічних ефектів чи підказок (при наведенні миші на елемент, на приклад) . Ці об'єкти також можна всіляко змінювати за допомогою CSS. Великі набори даних можна легко вмістити у SVG-об'єкти за допомогою простих функцій D3.js для створення красивих текстових чи графічних таблиць та діаграм. Дані можуть бути в різних форматах, найчастіше — JSON, розділені комами значення (CSV) або geoJSON (для розробки карт різноманітного призначення). При потребі, можна налаштувати функції цієї бібліотеки так, щоб вони читали й інші формати.

Основний принцип дизайну D3.js полягає в тому, щоб програміст спочатку скористався селектором стилів CSS і вибрав певні елементи сторінки із Document Object Model (DOM), а потім використав оператори для того, щоб маніпулювти цими елементами, подібно як це робиться у jQuery .^[10] Наприклад, використовуючи D3.js, можна вибрати всі елементи HTML <p>...</p>, а потім змінити їх колір тексту, наприклад, на пурпуровий(lavender):

 d3.selectAll("p")         // вибрати усі елементи <p>
  .style("color", "lavender")   // присвоїти "color" значення "lavender"
  .attr("class", "squares")    // надати атрибуту "class" значення "squares"
  .attr("x", 50);         // призначити атрибуту "x" (позиція по-горизонталі) значення 50px

Вибір може ґрунтуватися на тегах (як у наведеному вище прикладі), класі, ідентифікаторі, атрибуті чи місці в ієрархії. Після вибору елементів можна проводити з ними різні операції. До цих операції входить отримання (зчитування) та налаштування (зміна, присвоєння) атрибутів. Таким чином можна відображати різноманітні тексти та присвоювати їм стилі (як у наведеному вище прикладі). Елементи також можна додавати та видаляти. Цей процес зміни, створення та видалення DOM елементів HTML буде виконаний залежно від даних, що ви внесете, що є базовою концепцією D3.js.

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

 d3.selectAll("p")       // вибрати усі елементи <p>
  .transition("trans_1")   // transition(перехід) з назвою "trans_1"
   .delay(0)         // перехід починається за 0ms після тригера(активації)
   .duration(500)      // перехід триває 500ms
   .ease(d3.easeLinear)      // характер переходу типу 'ease' є лінійним...
  .style("color", "pink");  // ... до присвоєння атрибуту "color" значення "pink"

Для більш «просунутого» використання, введені дані можуть керувати створенням елементів. D3.js завантажує заданий набір даних, після чого для кожного його елемента створює SVG-об'єкт із сталими властивостями (форма, кольори, значення) та поведінкою (переходи, події).^[11][12][13]

// 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" }
 ];
// Створити SVG-контейнер
 var svg = d3.select("#hook").append("svg")
    .attr("width", 120)
    .attr("height", 120)
    .style("background-color", "#D0D0D0");
// Створити SVG-елементи із даних
  svg.selectAll("circle")         // створити віртуальний макет кола
   .data(countriesData)          // прив'язати дані
  .enter()                 // для кожного рядка в масиві даних...
   .append("circle")           // Поєднати об'єкт коло з рядком даних таким чином:... 
    .attr("id", function(d) { return d.name })      // визначити id об'єкта circle згідно з ім'ям країни
    .attr("cx", function(d) { return d.income / 1000 }) // визначити позицію circle по горизонталі згідно з показником income(дохід) 
    .attr("cy", function(d) { return d.life })      // визначити позицію circle по вертикалі згідно з показником life(середній вік)
    .attr("r", function(d) { return d.pop / 1000 *2 })  // визначити радіус об'єкта circle згідно з показником pop(популяція країни) 
    .attr("fill", function(d) { return d.color });    // визначити колір заливки об'єкта circle згідно з показником color, заданим в масиві countriesData

Також варто зазначити, що SVG графіка була згенерована цим кодом відповідно до заданих даних.

Після того, як набір даних пов'язаний з документом, використання D3.js зазвичай слідує шаблону, в якому явна функція .enter(), неявне «оновлення» та явна .exit() функція «виходу» викликається для кожного елемента в пов'язаному наборі даних. Будь-які методи, ланцюгові функції після команди .enter() будуть викликані для кожного елемента в наборі даних, який ще не представлений вузлом DOM у вибірці (попередній selectAll()). Аналогічно, неявна функція оновлення викликається на всіх існуючих виділених вузлах, для яких у наборі даних є відповідний елемент, а .exit() викликається на всіх існуючих вибраних вузлах, у яких немає даних у наборі даних для їх прив'язки. Документація D3.js містить кілька прикладів того, як це працює.^[14]

API-шка D3.js містить кілька сотень функцій, і їх можна згрупувати в такі логічні одиниці:^[15]

• Вибірки
• Переходи
• Масиви
• Математика
• Колір
• Масштабування
• SVG
• Час
• Макети
• Географія
• Геометрія
• Поведінки

• Генерація псевдовипадкових чисел з нормальним, логонормальним розподілами, розподілом Бейтса та Ірвіна-Холла .
• 2D-Перетворення: паралельне перенесення, обертання, нахил та масштабування.

Операції з масивами у D3.js побудовані для доповнення існуючого функціоналу роботи з масивами в JavaScript (мутаторні методи [Архівовано 29 грудня 2019 у Wayback Machine.]: сортування, зворотнє упорядкування [Архівовано 31 грудня 2019 у Wayback Machine.], «сплайс» [Архівовано 4 січня 2020 у Wayback Machine.], додавання [Архівовано 29 грудня 2019 у Wayback Machine.] та видалення елементів [Архівовано 29 грудня 2019 у Wayback Machine.]; методи доступання [Архівовано 4 січня 2020 у Wayback Machine.]: concat [Архівовано 30 грудня 2019 у Wayback Machine.], join [Архівовано 28 грудня 2019 у Wayback Machine.], slice [Архівовано 4 січня 2020 у Wayback Machine.], indexOf [Архівовано 24 грудня 2019 у Wayback Machine.] та lastIndexOf [Архівовано 4 січня 2020 у Wayback Machine.]; методи ітерації [Архівовано 4 січня 2020 у Wayback Machine.]: filter [Архівовано 4 січня 2020 у Wayback Machine.], every [Архівовано 25 грудня 2019 у Wayback Machine.], forEach [Архівовано 29 грудня 2019 у Wayback Machine.], map [Архівовано 28 грудня 2019 у Wayback Machine.], some [Архівовано 28 грудня 2019 у Wayback Machine.], reduce [Архівовано 2 січня 2020 у Wayback Machine.], reduceRight [Архівовано 4 січня 2020 у Wayback Machine.]). D3.js розширює цей функціонал за допомогою цих методів:

• Функції для знаходження мінімуму, максимуму, міри, суми, середнього значення, медіани та квантиля масиву.
• Функції для впорядкування, переміщення, перестановки, об'єднання та розбиття масивів.
• Функції для вкладених масивів.
• Функції для маніпуляцій з асоціативними масивами.
• Підтримка підтримка масивів об'єктів map і set.

• Обчислення опуклої оболонки безлічі точок.
• Обчислення діаграми Вороного набору точок.
• Підтримка структури даних дерева квадрантів .
• Підтримка основних операцій на полігонах.

• Підтримка RGB, HSL, HCL та представлення кольорів за допомогою L * a * b *.
• Висвітлення, затемнення та інтерполяція кольорів.

Загальне ознайомлення з D3.js

• Bostock, Michael; Ogievetsky, Vadim; Heer, Jeffrey (October 2011), D3: Data-Driven Documents, IEEE Transactions on Visualization and Computer Graphics, IEEE Press, 17 (12): 2301—2309, doi:10.1109/TVCG.2011.185, PMID 22034350, архів оригіналу за 5 вересня 2018, процитовано 29 грудня 2019

Використання D3.js — початковий рівень

• Murray, Scott (March 2013), Interactive Data Visualization for the Web, An Introduction to Designing with D3 (вид. 1st), Sebastopol, California: O’Reilly Media, ISBN 978-1-4493-3973-9, архів оригіналу за 15 вересня 2018, процитовано 29 грудня 2019
• Timms, Simon (September 2013), Social Data Visualization with HTML5 and JavaScript (вид. 1st), Birmingham: Packt Publishing, ISBN 978-1-7821-6654-2, архів оригіналу за 2 серпня 2014, процитовано 29 грудня 2019

Використання D3.js — середній рівень

• Dewar, Mike (June 2012), Steele, Julie; Blanchette, Meghan (ред.), Getting Started with D3, Creating Data-Driven Documents (вид. 1st), Sebastopol, California: O’Reilly Media, ISBN 978-1-4493-2879-5
• Qi Zhu, Nick (October 2013), Data Visualization with D3.js Cookbook (вид. 1st), Birmingham: Packt Publishing, ISBN 978-1-7821-6216-2, архів оригіналу за 24 липня 2014, процитовано 29 грудня 2019

Інші

• Newton, Thomas; Villarreal, Oscar (2014), Learning D3.js Mapping, Birmingham: Packt Publishing, с. 126, ISBN 9781783985609, архів оригіналу за 13 вересня 2018, процитовано 29 грудня 2019
• Navarro Castillo, Pablo (2014), Mastering D3.js, Birmingham: Packt Publishing, с. 352, ISBN 9781783286270, архів оригіналу за 13 вересня 2018, процитовано 29 грудня 2019
• Teller, Swizec (2013), Data Visualization with d3.js, Birmingham: Packt Publishing, с. 194, ISBN 9781782160007, архів оригіналу за 13 вересня 2018, процитовано 29 грудня 2019
• Viau, Christophe (2013), Developing a D3.js Edge: Constructing Reusable D3 Components and Charts, Bleeding Edge Press, с. 268, ISBN 9781939902023, архів оригіналу за 3 вересня 2014, процитовано 29 грудня 2019
• Meeks, Elijah (2014), D3.js in Action, Manning Publications, с. 325, ISBN 9781617292118, архів оригіналу за 24 вересня 2019, процитовано 29 грудня 2019
• Maclean, Malcolm (2014), D3 Tips and Tricks, Leanpub, с. 580, архів оригіналу за 13 вересня 2018, процитовано 29 грудня 2019
• King, Ritchie (2014), Visual Storytelling with D3: An Introduction to Data Visualization in JavaScript, Addison-Wesley Data & Analytics Series, с. 288, архів оригіналу за 13 вересня 2018, процитовано 29 грудня 2019

Відео

• Gopal, Nikhil (October 2014), D3 and CoffeeScript: A Python Programmer's Introduction to Web Visualizations, Sebastopol, California: O’Reilly Media, архів оригіналу за 13 вересня 2018, процитовано 29 грудня 2019
• King, Ritchie (December 2014), D3 Visualization LiveLessons: An Introduction to Data Visualization in JavaScript, Addison-Wesley Professional, архів оригіналу за 13 вересня 2018, процитовано 29 грудня 2019

• Офіційний сайт
• Галерея D3.js [Архівовано 13 вересня 2018 у Wayback Machine.]
• Blocksplorer [Архівовано 19 січня 2015 у Wayback Machine.], пошук блоків за методами
• бібліотеки D3 «багаторазові діаграми»:
  • C3 https://c3js.org [Архівовано 1 квітня 2022 у Wayback Machine.]
  • Plotly https://plot.ly/javascript [Архівовано 30 грудня 2019 у Wayback Machine.]