D3.js

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

D3.js

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

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

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

Контекст

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

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

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

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

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

Технічні принципи

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

Вибірки

Основний принцип дизайну D3.js полягає в тому, щоб програміст спочатку скористався селектором стилів CSS і вибрав певні елементи сторінки із Document Object Model (DOM), а потім використав оператори для того, щоб маніпулювти цими елементами, подібно як це робиться у jQuery . Наприклад, використовуючи 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-об'єкт із сталими властивостями (форма, кольори, значення) та поведінкою (переходи, події).

// 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 містить кілька прикладів того, як це працює.

Структура API

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

• Вибірки
• Переходи
• Масиви
• Математика
• Колір
• Масштабування
• 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.

Геометрія

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

Колір

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

Список літератури

1. . Github.com. Архів оригіналу за 27 червня 2017. Процитовано 29 грудня 2019.
2. https://hsrr.nlm.nih.gov/hsrr_search/record_details/5898
3. , Mbostock.github.com, архів оригіналу за 6 серпня 2012, процитовано 18 серпня 2012
4. Viau, Christophe (26 червня 2012), , 's blog, архів оригіналу за 19 червня 2018, процитовано 18 серпня 2012
5. Myatt, Glenn J.; Johnson, Wayne P. (September 2011), , Making Sense of Data III: A Practical Guide to Designing Interactive Data Visualizations, Hoboken, New Jersey: , с. A–2, ISBN , архів оригіналу за 3 січня 2014, процитовано 23 січня 2013
6. Release Notes, D3.js, процитовано 22 серпня 2012
7. . Архів оригіналу за 11 вересня 2018. Процитовано 29 грудня 2019.{{}}: Обслуговування CS1: Сторінки з текстом «archived copy» як значення параметру title ()
8. Academic example: Savva, Manolis; Kong, Nicholas; Chhajta, Arti; Li, Feifei; Agrawala, Maneesh; Heer, Jeffrey (2011), , ACM User Interface Software & Technology, архів оригіналу за 4 квітня 2018, процитовано 23 січня 2013
9. Bostock, Ogievetsky та Heer, 2011
10. Bostock, Ogievetsky та Heer, 2011, chap. 3
11. Bostock, Mike (5 лютого 2012), , архів оригіналу за 28 травня 2014, процитовано 29 грудня 2019
12. . Codepen.io. Архів оригіналу за 22 березня 2016. Процитовано 1 серпня 2016.
13. . JSFiddle.net. Архів оригіналу за 28 грудня 2016. Процитовано 1 серпня 2016.
14. . Mbostock.github.io. Архів оригіналу за 19 липня 2016. Процитовано 1 серпня 2016.
15. d3 (30 червня 2016). . Github.com. Архів оригіналу за 9 грудня 2017. Процитовано 1 серпня 2016.

Подальше читання

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

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

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

• Murray, Scott (March 2013), (вид. 1st), Sebastopol, California: , ISBN , архів оригіналу за 15 вересня 2018, процитовано 29 грудня 2019
• Timms, Simon (September 2013), (вид. 1st), Birmingham: , ISBN , архів оригіналу за 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: , ISBN 
• Qi Zhu, Nick (October 2013), (вид. 1st), Birmingham: , ISBN , архів оригіналу за 24 липня 2014, процитовано 29 грудня 2019

Інші

• Newton, Thomas; Villarreal, Oscar (2014), , Birmingham: , с. 126, ISBN , архів оригіналу за 13 вересня 2018, процитовано 29 грудня 2019
• Navarro Castillo, Pablo (2014), , Birmingham: , с. 352, ISBN , архів оригіналу за 13 вересня 2018, процитовано 29 грудня 2019
• Teller, Swizec (2013), , Birmingham: , с. 194, ISBN , архів оригіналу за 13 вересня 2018, процитовано 29 грудня 2019
• Viau, Christophe (2013), , , с. 268, ISBN , архів оригіналу за 3 вересня 2014, процитовано 29 грудня 2019
• Meeks, Elijah (2014), , , с. 325, ISBN , архів оригіналу за 24 вересня 2019, процитовано 29 грудня 2019
• Maclean, Malcolm (2014), , , с. 580, архів оригіналу за 13 вересня 2018, процитовано 29 грудня 2019
• King, Ritchie (2014), , , с. 288, архів оригіналу за 13 вересня 2018, процитовано 29 грудня 2019

Відео

• Gopal, Nikhil (October 2014), , Sebastopol, California: , архів оригіналу за 13 вересня 2018, процитовано 29 грудня 2019
• King, Ritchie (December 2014), , 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.]