D3.js — Вікіпедія

D3.js
(На жаль, формат фото не підтримується) Логотип d3js
(На жаль, формат фото не підтримується) Логотип d3js
Тип Візуалізація даних, Бібліотека JavaScript
Розробники Майк Босток, Джейсон Девіс, Джефрі Хір, Вадим Огієвецкий, і спільнота
Перший випуск 18 лютого, 2011; 13 років тому (2011-02-18)
Стабільний випуск 5.9.7 (7 вересня, 2019; 4 роки тому (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[ред. | ред. код]

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

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

Математика[ред. | ред. код]

Масиви[ред. | ред. код]

Операції з масивами у 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 *.
  • Висвітлення, затемнення та інтерполяція кольорів.

Список літератури[ред. | ред. код]

  1. ↑ d3 Releases. Github.com. Архів оригіналу за 27 червня 2017. Процитовано 29 грудня 2019.
  2. ↑ https://hsrr.nlm.nih.gov/hsrr_search/record_details/5898
  3. ↑ For Protovis Users, Mbostock.github.com, архів оригіналу за 6 серпня 2012, процитовано 18 серпня 2012
  4. ↑ Viau, Christophe (26 червня 2012), What’s behind our Business Infographics Designer? D3.js of course, Datameer's blog, архів оригіналу за 19 червня 2018, процитовано 18 серпня 2012
  5. ↑ Myatt, Glenn J.; Johnson, Wayne P. (September 2011), 5.10 Further reading, Making Sense of Data III: A Practical Guide to Designing Interactive Data Visualizations, Hoboken, New Jersey: John Wiley & Sons, с. A–2, ISBN 978-0-470-53649-0, архів оригіналу за 3 січня 2014, процитовано 23 січня 2013
  6. ↑ Release Notes, D3.js, процитовано 22 серпня 2012
  7. ↑ Архівована копія. Архів оригіналу за 11 вересня 2018. Процитовано 29 грудня 2019.{{cite web}}: Обслуговування CS1: Сторінки з текстом «archived copy» як значення параметру title (посилання)
  8. ↑ Academic example: Savva, Manolis; Kong, Nicholas; Chhajta, Arti; Li, Feifei; Agrawala, Maneesh; Heer, Jeffrey (2011), ReVision: Automated Classification, Analysisand Redesign of Chart Images, 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), Thinking with Joins, архів оригіналу за 28 травня 2014, процитовано 29 грудня 2019
  12. ↑ A Pen by Lopez Hugo. Codepen.io. Архів оригіналу за 22 березня 2016. Процитовано 1 серпня 2016.
  13. ↑ Edit fiddle. JSFiddle.net. Архів оригіналу за 28 грудня 2016. Процитовано 1 серпня 2016.
  14. ↑ Three Little Circles. Mbostock.github.io. Архів оригіналу за 19 липня 2016. Процитовано 1 серпня 2016.
  15. ↑ d3 (30 червня 2016). API Reference · d3/d3 Wiki · GitHub. Github.com. Архів оригіналу за 9 грудня 2017. Процитовано 1 серпня 2016.

Подальше читання[ред. | ред. код]

Загальне ознайомлення з D3.js
Використання D3.js — початковий рівень
Використання D3.js — середній рівень
Інші
Відео

Посилання[ред. | ред. код]

Отримано з https://uk.wikipedia.org/w/index.php?title=D3.js&oldid=39354614