Користувач:Orestotel/D3.js

<br />{{Картка програми|name=Data-Driven Documents (D3.js)|title=|logo=Logo D3.svg|logo caption=|logo_size=100px|logo_alt=|screenshot=<!-- Image name is enough -->|caption=|screenshot_size=|screenshot_alt=|collapsible=|author=|latest preview version=|status=Активний|platform=Бібліотека JavaScript|size=|language=Англійська|language count=<!-- DO NOT include this parameter unless you know what it does -->|language footnote=|genre=[[Data visualization]], [[JavaScript library]]|license=[[BSD License|BSD]]|website={{URL|d3js.org}}|standard=|тип=Візуалізація даних, Бібліотека JavaScript|developers=[[Майк Босток]], Джейсон Девіс, [[Джефрі Хір]], Вадим Огієвецкий, і спільнота|перший випуск={{Start date and age|2011|02|18|df=yes}}|версія останнього релізу=5.9.7|latest_release_date={{Start date and age|2019|06|28|df=yes}}<ref>{{cite web|title=d3 Releases|url=https://github.com/d3/d3/releases|website=Github.com}}</ref>|репозиторій=https://github.com/d3/d3|сайт=d3js.org}}{{Портал|Вільне та відкрите програмне забезпечення}} '''D3.js''' (також відомий як '''D3''', скорочено для '''Data-Driven Documents'''''(укр. Документи, керовані даними)'' ) - це бібліотека [[JavaScript]] для створення динамічної та інтерактивної візуалізації даних у [[Браузер|веб-браузерах]]. Він використовує широко реалізовані стандарти [[Scalable Vector Graphics|масштабованої векторної графіки]] (абревіація [[SVG]]), [[HTML5]] та [[CSS|Каскадних Таблиць Стилів]] ([[CSS]]). Він є спадкоємцем попередніх рам Protovis. <ref>{{Citation|url=https://mbostock.github.com/d3/tutorial/protovis.html|title=For Protovis Users|journal=Mbostock.github.com|access-date=August 18, 2012}}</ref> На відміну від багатьох інших бібліотек, D3.js дозволяє чудово контролювати кінцевий візуальний результат. <ref name="Viau_2012/06">{{Citation|url=https://www.datameer.com/blog/whats-behind-our-business-infographics-designer-d3-js-of-course-2/|title=What’s behind our Business Infographics Designer? D3.js of course|last=Viau|first=Christophe|journal=[[Datameer]]'s blog|date=June 26, 2012|access-date=August 18, 2012}}</ref> Його вперше помітили в 2011 році <ref>{{Citation|url=https://books.google.com/books?id=nTpjoNgJQOMC|title=Making Sense of Data III: A Practical Guide to Designing Interactive Data Visualizations|first=Glenn J.|last=Myatt|first2=Wayne P.|last2=Johnson|chapter-url=https://books.google.com/books?id=nTpjoNgJQOMC&pg=SL1-PA2|chapter=5.10 Further reading|page=A–2|publisher=[[John Wiley & Sons]]|place=Hoboken, New Jersey|date=September 2011|isbn=978-0-470-53649-0|access-date=January 23, 2013}}</ref>, хоч і версія 2.0.0 була випущена вже в серпні 2011 року, себто він отримав визнання не на ранніх стадіях. <ref>{{Citation|url=https://github.com/d3/d3/wiki/Release-Notes|title=Release Notes|journal=D3.js|access-date=August 22, 2012}}</ref> 

D3.js використовується у сотнях тисяч веб-сайтів. <ref>https://www.wappalyzer.com/technologies/d3</ref> Його часто застосовують для створення інтерактивної графіки на веб-сайтах новин. Також D3.js стає в нагоді при створенні інформаційних 'дошок', де дані стають легші для сприйняття та податливішими для досліджень.  

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

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

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

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

У 2009 році, спираючись на досвід розробки та використання програми Prefuse and Flare, Джефф Хір, Майк Босток та Вадим Огієвецький зі [[Стенфордський університет|Стенфордського]] гуртка візуалізації однойменного [[Стенфордський університет|університету]] створили Protovis, бібліотеку [[JavaScript]] для створення графіки [[SVG]] з даних. Бібліотека була відома практикам візуалізації даних та науковцям. <ref>Academic example: {{Citation|last=Savva|first=Manolis|last2=Kong|first2=Nicholas|last3=Chhajta|first3=Arti|last4=Li|first4=Feifei|last5=Agrawala|first5=Maneesh|last6=Heer|first6=Jeffrey|title=ReVision: Automated Classification, Analysisand Redesign of Chart Images|journal=ACM User Interface Software & Technology|year=2011|url=http://vis.stanford.edu/papers/revision|access-date=January 23, 2013}}</ref> 

У 2011 році розробку Protovis було зупинено, щоб зосередитися на новому проекті, а саме ''D3.js''. Спираючись на досвід роботи з Protovis, Босток разом з Хіром та Огієвецьким, розробили D3.js, щоб створити фреймворк із більшим візуальним потенціалом, який в той же час орієнтується на веб-стандарти та пропонує підвищену продуктивність. <ref>{{Harvnb|Bostock|Ogievetsky|Heer|2011}}</ref> 

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

=== Вибірки ===
Основний принцип [[Дизайн|дизайну]] D3.js полягає в тому, щоб програміст спочатку скористався селектором стилів [[CSS]] і вибрав певні елементи сторінки із [[Об'єктна модель документа|Document Object Model]] (DOM), а потім використав оператори для того, щоб маніпулювти цими елементами, подібно як це робиться у [[jQuery]] . <ref>{{Harvnb|Bostock|Ogievetsky|Heer|2011}}, chap. 3</ref> Наприклад, використовуючи D3.js, можна вибрати всі елементи HTML {{Tag|p}}, а потім змінити їх колір тексту, наприклад, на ''пурпуровий''(''lavender''): <source lang="javascript">
 d3.selectAll("p")               // вибрати усі елементи <p> 
  .style("color", "lavender")   // присвоїти атрибуту "color" значення "lavender"
  .attr("class", "squares")    // присвоїти атрибуту "class" значення "squares"
  .attr("x", 50);             // присвоїти атрибуту "x" значення 50px ("x" - позиція по горизонталі)
</source> Вибір може ґрунтуватися на тегах (як у наведеному вище прикладі), класі, ідентифікаторі, атрибуті чи місці в ієрархії. Після вибору елементів можна проводити з ними різні операції. До цих операції входить отримання(зчитування) та налаштування(зміна, присвоєння) атрибутів. Таким чином можна відображати різноманітні тексти та присвоювати їм стилі (як у наведеному вище прикладі). Елементи також можна додавати та видаляти. Цей процес зміни, створення та видалення DOM елементів HTML може бути зроблений залежно від даних, що ви внесете, що є базовою концепцією D3.js. 

=== Переходи ===
Оголошуючи перехід, значення атрибутів та стилів можна присвоїти із певною затримкою, таким собі плавним переходом. Код, що ви бачите унизу змусить елемент параграфу HTML {{Tag|p}} на сторінці поступово змінювати колір тексту на рожевий протягом певного часу: <source lang="javascript">
 d3.selectAll("p")       // вибрати усі елементи <p>
  .transition("perehid_1")   // Оголосити перехід і назвати його "perehid_1"
   .delay(0)         // Перехід починається за 0ms після активування (Пауза)
   .duration(500)      // Перехід триває 500ms          (вже після паузи)
   .ease(d3.easeLinear)      // заданий звичайний тип переходу (є ще й інші)
  .style("color", "pink");  // елемент набуває кольору - :pink (рожевий)
</source>

=== Обв'язування даних ===
Для більш просунотого використання, введені дані можуть керувати створенням елементів. D3.js завантажує заданий набір даних, після чого для кожного його елемента створює SVG-об’єкт із сталими властивостями (форма, кольори, значення) та поведінкою (переходи, події). <ref>{{Citation|date=February 5, 2012|first=Mike|last=Bostock|title=Thinking with Joins|url=http://bost.ocks.org/mike/join/}}</ref> <ref>{{Cite web|url=http://codepen.io/hugolpz/pen/wBorvq|title=A Pen by Lopez Hugo|website=Codepen.io|accessdate=2016-08-01|archiveurl=https://web.archive.org/web/20160322021453/http://codepen.io/hugolpz/pen/wBorvq|archivedate=March 22, 2016}}</ref> <ref>{{Cite web|last=|url=http://jsfiddle.net/9sggtr7a/|title=Edit fiddle|website=JSFiddle.net|date=|accessdate=2016-08-01}}</ref> 
<nowiki>
[[Категорія:Безкоштовне програмне забезпечення аналізу даних]]
[[Категорія:Бібліотеки JavaScript]]
[[Категорія:Вільне програмне забезпечення на JavaScript]]
[[Категорія:Візуалізація графів]]
[[Категорія:Візуалізація даних]]</nowiki>