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

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