www.wikidata.uk-ua.nina.az

D3 js також відомий як D3 скорочено від Data Driven Documents укр Документи керовані даними це бібліотека JavaScript для

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

У 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
  • Час
  • Макети
  • Географія
  • Геометрія
  • Поведінки

Математика ред.

Масиви ред.

Операції з масивами у 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. . 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). . Datameer's blog. Архів оригіналу за 19 червня 2018. Процитовано 18 серпня 2012. 
  5. Myatt, Glenn J.; Johnson, Wayne P. (September 2011). 5.10 Further reading. . 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. 
  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. 

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

  • Bostock, Michael; Ogievetsky, Vadim; Heer, Jeffrey (October 2011). . IEEE Transactions on Visualization and Computer Graphics (IEEE Press) 17 (12): 2301–2309. PMID 22034350. doi:10.1109/TVCG.2011.185. Архів оригіналу за 5 вересня 2018. Процитовано 29 грудня 2019. 
  • Murray, Scott (March 2013). (вид. 1st). Sebastopol, California: O’Reilly Media. ISBN 978-1-4493-3973-9. Архів оригіналу за 15 вересня 2018. Процитовано 29 грудня 2019. 
  • Timms, Simon (September 2013). (вид. 1st). Birmingham: Packt Publishing. ISBN 978-1-7821-6654-2. Архів оригіналу за 2 серпня 2014. Процитовано 29 грудня 2019. 
  • 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). (вид. 1st). Birmingham: Packt Publishing. ISBN 978-1-7821-6216-2. Архів оригіналу за 24 липня 2014. Процитовано 29 грудня 2019. 
  • Newton, Thomas; Villarreal, Oscar (2014). . Birmingham: Packt Publishing. с. 126. ISBN 9781783985609. Архів оригіналу за 13 вересня 2018. Процитовано 29 грудня 2019. 
  • Navarro Castillo, Pablo (2014). . Birmingham: Packt Publishing. с. 352. ISBN 9781783286270. Архів оригіналу за 13 вересня 2018. Процитовано 29 грудня 2019. 
  • Teller, Swizec (2013). . Birmingham: Packt Publishing. с. 194. ISBN 9781782160007. Архів оригіналу за 13 вересня 2018. Процитовано 29 грудня 2019. 
  • Viau, Christophe (2013). . Bleeding Edge Press. с. 268. ISBN 9781939902023. Архів оригіналу за 3 вересня 2014. Процитовано 29 грудня 2019. 
  • Meeks, Elijah (2014). . Manning Publications. с. 325. ISBN 9781617292118. Архів оригіналу за 24 вересня 2019. Процитовано 29 грудня 2019. 
  • Maclean, Malcolm (2014). . Leanpub. с. 580. Архів оригіналу за 13 вересня 2018. Процитовано 29 грудня 2019. 
  • King, Ritchie (2014). . Addison-Wesley Data & Analytics Series. с. 288. Архів оригіналу за 13 вересня 2018. Процитовано 29 грудня 2019. 
  • Gopal, Nikhil (October 2014). . Sebastopol, California: O’Reilly Media. Архів оригіналу за 13 вересня 2018. Процитовано 29 грудня 2019. 
  • King, Ritchie (December 2014). . Addison-Wesley Professional. Архів оригіналу за 13 вересня 2018. Процитовано 29 грудня 2019. 

Посилання ред.

Вікіпедія, Українська, Україна, книга, книги, бібліотека, стаття, читати, завантажити, безкоштовно, безкоштовно завантажити, mp3, відео, mp4, 3gp, jpg, jpeg, gif, png, малюнок, музика, пісня, фільм, книга, гра, ігри
Дата публікації:
D3 js takozh vidomij yak D3 skorocheno vid Data Driven Documents ukr Dokumenti kerovani danimi ce biblioteka JavaScript dlya stvorennya dinamichnoyi ta interaktivnoyi vizualizaciyi danih u vebbrauzerah Vin vikoristovuye shiroko realizovani standarti masshtabovanoyi vektornoyi grafiki abreviaciya SVG HTML5 ta Kaskadnih Tablic Stiliv CSS Vin ye nashadkom frejmvorku Protovis 3 Na vidminu vid bagatoh inshih bibliotek D3 js dozvolyaye chudovo kontrolyuvati kincevij vizualnij rezultat 4 D3 js vpershe nabuv populyarnosti v 2011 roci 5 hoch vzhe i versiya 2 0 0 bula vipushena v serpni 2011 roku sebto vin otrimav viznannya ne na rannih stadiyah 6 D3 js Na zhal format foto ne pidtrimuyetsya Logotip d3js Na zhal format foto ne pidtrimuyetsya Logotip d3jsTip Vizualizaciya danih Biblioteka JavaScriptRozrobniki Majk Bostok Dzhejson Devis Dzhefri Hir Vadim Ogiyeveckij i spilnotaPershij vipusk 18 lyutogo 2011 12 rokiv tomu 2011 02 18 Stabilnij vipusk 5 9 7 7 veresnya 2019 4 roki tomu 2019 09 07 1 Platforma Biblioteka JavaScriptOperacijna sistema kros platformova programaMova programuvannya JavaScriptDostupni movi AnglijskaStan rozrobki AktivnijLicenziya BSDRepozitorij https github com d3 d3Vebsajt d3js org D3 js u VikishovishiPortal Vilne ta vidkrite programne zabezpechennya D3 js vikoristovuyetsya u sotnyah tisyach vebsajtiv 7 Jogo chasto zastosovuyut dlya stvorennya interaktivnoyi grafiki na vebsajtah novin Takozh D3 js staye v prigodi pri stvorenni informacijnih doshok de dani stayut legshi dlya sprijnyattya ta podatlivishimi dlya doslidzhen Za dopomogoyu ciyeyi biblioteki takozh mozhlive stvorennya interaktivnih kart iz vikoristannyam danih GIS Krim togo mobilnist formatu SVG cherez jogo vektornu osnovu dozvolyaye stvorenu u D3 grafiku vikoristovuvati u shirokometrazhnomu druci na priklad dlya bilbordiv abo zh zhurnaliv na vidminu vid rastrovoyi Zmist 1 Kontekst 2 Tehnichni principi 2 1 Vibirki 2 2 Perehodi 2 3 Obv yazuvannya danih 2 4 Dodavannya vuzliv za dopomogoyu danih 3 Struktura API 3 1 Matematika 3 2 Masivi 3 3 Geometriya 3 4 Kolir 4 Spisok literaturi 5 Podalshe chitannya 6 PosilannyaKontekst red Uzhe bulo bagato sprob vvesti koncept vizualizaciyi danih u veb industriyu Najbilsh pomitnimi prikladami buli nabori instrumentiv metodiv Prefuse Flare ta Protovis yaki mozhna vvazhati pryamimi poperednikami D3 js Prefuse ce instrumentarij vizualizaciyi stvorenij she u 2005 roci yakij vimagav vikoristannya Java bo same za dopomogoyu plagina napisanogo ciyeyu movoyu u brauzeri renderilasya grafika stvorena cim instrumentariyem Flare buv analogichnim naborom instrumentiv tilki vin buv pristosovanim do trendiv vebrozrobki 2007 roku rik vipusku Flare tomu vikoristovuvav ActionScript i dlya renderingu potriben buv plagin Flash U 2009 roci spirayuchis na dosvid rozrobki ta vikoristannya programi Prefuse and Flare Dzheff Hir Majk Bostok ta Vadim Ogiyeveckij zi Stenfordskogo gurtka vizualizaciyi odnojmennogo universitetu stvorili Protovis Arhivovano 23 grudnya 2019 u Wayback Machine biblioteku JavaScript dlya stvorennya grafiki SVG z danih Biblioteka bula vidoma praktikam vizualizaciyi danih ta naukovcyam 8 U 2011 roci rozrobku Protovis Arhivovano 23 grudnya 2019 u Wayback Machine bulo zupineno shob zosereditisya na novomu proekti a same D3 js Spirayuchis na dosvid roboti z Protovis Bostok razom z Hirom ta Ogiyeveckim rozrobili D3 js shob stvoriti frejmvork iz bilshim vizualnim potencialom yakij v toj zhe chas oriyentuyetsya na vebstandarti ta proponuye pidvishenu produktivnist 9 Tehnichni principi red Vbudovana u HTML vebstorinki biblioteka JavaScript D3 js vikoristovuye zazdalegid vbudovani funkciyi JavaScript dlya viboru elementiv stvorennya SVG ob yektiv stilizuvannya yih abo dodavannya do nih riznih perehodiv dinamichnih efektiv chi pidkazok pri navedenni mishi na element na priklad Ci ob yekti takozh mozhna vsilyako zminyuvati za dopomogoyu CSS Veliki nabori danih mozhna legko vmistiti u SVG ob yekti za dopomogoyu prostih funkcij D3 js dlya stvorennya krasivih tekstovih chi grafichnih tablic ta diagram Dani mozhut buti v riznih formatah najchastishe JSON rozdileni komami znachennya CSV abo geoJSON dlya rozrobki kart riznomanitnogo priznachennya Pri potrebi mozhna nalashtuvati funkciyi ciyeyi biblioteki tak shob voni chitali j inshi formati Vibirki red Osnovnij princip dizajnu D3 js polyagaye v tomu shob programist spochatku skoristavsya selektorom stiliv CSS i vibrav pevni elementi storinki iz Document Object Model DOM a potim vikoristav operatori dlya togo shob manipulyuvti cimi elementami podibno yak ce robitsya u jQuery 10 Napriklad vikoristovuyuchi D3 js mozhna vibrati vsi elementi HTML lt p gt lt p gt a potim zminiti yih kolir tekstu napriklad na purpurovij lavender d3 selectAll p vibrati usi elementi lt p gt style color lavender prisvoyiti color znachennya lavender attr class squares nadati atributu class znachennya squares attr x 50 priznachiti atributu x poziciya po gorizontali znachennya 50pxVibir mozhe gruntuvatisya na tegah yak u navedenomu vishe prikladi klasi identifikatori atributi chi misci v iyerarhiyi Pislya viboru elementiv mozhna provoditi z nimi rizni operaciyi Do cih operaciyi vhodit otrimannya zchituvannya ta nalashtuvannya zmina prisvoyennya atributiv Takim chinom mozhna vidobrazhati riznomanitni teksti ta prisvoyuvati yim stili yak u navedenomu vishe prikladi Elementi takozh mozhna dodavati ta vidalyati Cej proces zmini stvorennya ta vidalennya DOM elementiv HTML bude vikonanij zalezhno vid danih sho vi vnesete sho ye bazovoyu koncepciyeyu D3 js Perehodi red Ogoloshuyuchi perehid znachennya atributiv ta stiliv mozhna prisvoyiti iz pevnoyu zatrimkoyu takim sobi plavnim perehodom Kod sho vi bachite unizu zmusit element paragrafu HTML lt p gt lt p gt na storinci postupovo zminyuvati kolir tekstu na rozhevij protyagom pevnogo chasu d3 selectAll p vibrati usi elementi lt p gt transition trans 1 transition perehid z nazvoyu trans 1 delay 0 perehid pochinayetsya za 0ms pislya trigera aktivaciyi duration 500 perehid trivaye 500ms ease d3 easeLinear harakter perehodu tipu ease ye linijnim style color pink do prisvoyennya atributu color znachennya pink Obv yazuvannya danih red Dlya bilsh prosunutogo vikoristannya vvedeni dani mozhut keruvati stvorennyam elementiv D3 js zavantazhuye zadanij nabir danih pislya chogo dlya kozhnogo jogo elementa stvoryuye SVG ob yekt iz stalimi vlastivostyami forma kolori znachennya ta povedinkoyu perehodi podiyi 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 Stvoriti SVG kontejner var svg d3 select hook append svg attr width 120 attr height 120 style background color D0D0D0 Stvoriti SVG elementi iz danih svg selectAll circle stvoriti virtualnij maket kola data countriesData priv yazati dani enter dlya kozhnogo ryadka v masivi danih append circle Poyednati ob yekt kolo z ryadkom danih takim chinom attr id function d return d name viznachiti id ob yekta circle zgidno z im yam krayini attr cx function d return d income 1000 viznachiti poziciyu circle po gorizontali zgidno z pokaznikom income dohid attr cy function d return d life viznachiti poziciyu circle po vertikali zgidno z pokaznikom life serednij vik attr r function d return d pop 1000 2 viznachiti radius ob yekta circle zgidno z pokaznikom pop populyaciya krayini attr fill function d return d color viznachiti kolir zalivki ob yekta circle zgidno z pokaznikom color zadanim v masivi countriesDataTakozh varto zaznachiti sho SVG grafika bula zgenerovana cim kodom vidpovidno do zadanih danih Dodavannya vuzliv za dopomogoyu danih red Pislya togo yak nabir danih pov yazanij z dokumentom vikoristannya D3 js zazvichaj sliduye shablonu v yakomu yavna funkciya enter neyavne onovlennya ta yavna exit funkciya vihodu viklikayetsya dlya kozhnogo elementa v pov yazanomu nabori danih Bud yaki metodi lancyugovi funkciyi pislya komandi enter budut viklikani dlya kozhnogo elementa v nabori danih yakij she ne predstavlenij vuzlom DOM u vibirci poperednij selectAll Analogichno neyavna funkciya onovlennya viklikayetsya na vsih isnuyuchih vidilenih vuzlah dlya yakih u nabori danih ye vidpovidnij element a exit viklikayetsya na vsih isnuyuchih vibranih vuzlah u yakih nemaye danih u nabori danih dlya yih priv yazki Dokumentaciya D3 js mistit kilka prikladiv togo yak ce pracyuye 14 Struktura API red API shka D3 js mistit kilka soten funkcij i yih mozhna zgrupuvati v taki logichni odinici 15 Vibirki Perehodi Masivi Matematika Kolir Masshtabuvannya SVG Chas Maketi Geografiya Geometriya PovedinkiMatematika red Generaciya psevdovipadkovih chisel z normalnim logonormalnim rozpodilami rozpodilom Bejtsa ta Irvina Holla 2D Peretvorennya paralelne perenesennya obertannya nahil ta masshtabuvannya Masivi red Operaciyi z masivami u D3 js pobudovani dlya dopovnennya isnuyuchogo funkcionalu roboti z masivami v JavaScript mutatorni metodi Arhivovano 29 grudnya 2019 u Wayback Machine sortuvannya zvorotnye uporyadkuvannya Arhivovano 31 grudnya 2019 u Wayback Machine splajs Arhivovano 4 sichnya 2020 u Wayback Machine dodavannya Arhivovano 29 grudnya 2019 u Wayback Machine ta vidalennya elementiv Arhivovano 29 grudnya 2019 u Wayback Machine metodi dostupannya Arhivovano 4 sichnya 2020 u Wayback Machine concat Arhivovano 30 grudnya 2019 u Wayback Machine join Arhivovano 28 grudnya 2019 u Wayback Machine slice Arhivovano 4 sichnya 2020 u Wayback Machine indexOf Arhivovano 24 grudnya 2019 u Wayback Machine ta lastIndexOf Arhivovano 4 sichnya 2020 u Wayback Machine metodi iteraciyi Arhivovano 4 sichnya 2020 u Wayback Machine filter Arhivovano 4 sichnya 2020 u Wayback Machine every Arhivovano 25 grudnya 2019 u Wayback Machine forEach Arhivovano 29 grudnya 2019 u Wayback Machine map Arhivovano 28 grudnya 2019 u Wayback Machine some Arhivovano 28 grudnya 2019 u Wayback Machine reduce Arhivovano 2 sichnya 2020 u Wayback Machine reduceRight Arhivovano 4 sichnya 2020 u Wayback Machine D3 js rozshiryuye cej funkcional za dopomogoyu cih metodiv Funkciyi dlya znahodzhennya minimumu maksimumu miri sumi serednogo znachennya mediani ta kvantilya masivu Funkciyi dlya vporyadkuvannya peremishennya perestanovki ob yednannya ta rozbittya masiviv Funkciyi dlya vkladenih masiviv Funkciyi dlya manipulyacij z asociativnimi masivami Pidtrimka pidtrimka masiviv ob yektiv map i set Geometriya red Obchislennya opukloyi obolonki bezlichi tochok Obchislennya diagrami Voronogo naboru tochok Pidtrimka strukturi danih dereva kvadrantiv Pidtrimka osnovnih operacij na poligonah Kolir red Pidtrimka RGB HSL HCL ta predstavlennya koloriv za dopomogoyu L a b Visvitlennya zatemnennya ta interpolyaciya koloriv Spisok literaturi red d3 Releases Github com Arhiv originalu za 27 chervnya 2017 Procitovano 29 grudnya 2019 https hsrr nlm nih gov hsrr search record details 5898 For Protovis Users Mbostock github com Arhiv originalu za 6 serpnya 2012 Procitovano 18 serpnya 2012 Viau Christophe 26 chervnya 2012 What s behind our Business Infographics Designer D3 js of course Datameer s blog Arhiv originalu za 19 chervnya 2018 Procitovano 18 serpnya 2012 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 amp Sons s A 2 ISBN 978 0 470 53649 0 Arhiv originalu za 3 sichnya 2014 Procitovano 23 sichnya 2013 Release Notes D3 js Procitovano 22 serpnya 2012 Arhivovana kopiya Arhiv originalu za 11 veresnya 2018 Procitovano 29 grudnya 2019 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 amp Technology Arhiv originalu za 4 kvitnya 2018 Procitovano 23 sichnya 2013 Bostock Ogievetsky ta Heer 2011 Bostock Ogievetsky ta Heer 2011 chap 3 Bostock Mike 5 lyutogo 2012 Thinking with Joins Arhiv originalu za 28 travnya 2014 Procitovano 29 grudnya 2019 A Pen by Lopez Hugo Codepen io Arhiv originalu za 22 bereznya 2016 Procitovano 1 serpnya 2016 Edit fiddle JSFiddle net Arhiv originalu za 28 grudnya 2016 Procitovano 1 serpnya 2016 Three Little Circles Mbostock github io Arhiv originalu za 19 lipnya 2016 Procitovano 1 serpnya 2016 d3 30 chervnya 2016 API Reference d3 d3 Wiki GitHub Github com Arhiv originalu za 9 grudnya 2017 Procitovano 1 serpnya 2016 Podalshe chitannya red Zagalne oznajomlennya z D3 jsBostock Michael Ogievetsky Vadim Heer Jeffrey October 2011 D3 Data Driven Documents IEEE Transactions on Visualization and Computer Graphics IEEE Press 17 12 2301 2309 PMID 22034350 doi 10 1109 TVCG 2011 185 Arhiv originalu za 5 veresnya 2018 Procitovano 29 grudnya 2019 Vikoristannya D3 js pochatkovij rivenMurray Scott March 2013 Interactive Data Visualization for the Web An Introduction to Designing with D3 vid 1st Sebastopol California O Reilly Media ISBN 978 1 4493 3973 9 Arhiv originalu za 15 veresnya 2018 Procitovano 29 grudnya 2019 Timms Simon September 2013 Social Data Visualization with HTML5 and JavaScript vid 1st Birmingham Packt Publishing ISBN 978 1 7821 6654 2 Arhiv originalu za 2 serpnya 2014 Procitovano 29 grudnya 2019 Vikoristannya D3 js serednij rivenDewar Mike June 2012 U Steele Julie Blanchette Meghan Getting Started with D3 Creating Data Driven Documents vid 1st Sebastopol California O Reilly Media ISBN 978 1 4493 2879 5 Qi Zhu Nick October 2013 Data Visualization with D3 js Cookbook vid 1st Birmingham Packt Publishing ISBN 978 1 7821 6216 2 Arhiv originalu za 24 lipnya 2014 Procitovano 29 grudnya 2019 InshiNewton Thomas Villarreal Oscar 2014 Learning D3 js Mapping Birmingham Packt Publishing s 126 ISBN 9781783985609 Arhiv originalu za 13 veresnya 2018 Procitovano 29 grudnya 2019 Navarro Castillo Pablo 2014 Mastering D3 js Birmingham Packt Publishing s 352 ISBN 9781783286270 Arhiv originalu za 13 veresnya 2018 Procitovano 29 grudnya 2019 Teller Swizec 2013 Data Visualization with d3 js Birmingham Packt Publishing s 194 ISBN 9781782160007 Arhiv originalu za 13 veresnya 2018 Procitovano 29 grudnya 2019 Viau Christophe 2013 Developing a D3 js Edge Constructing Reusable D3 Components and Charts Bleeding Edge Press s 268 ISBN 9781939902023 Arhiv originalu za 3 veresnya 2014 Procitovano 29 grudnya 2019 Meeks Elijah 2014 D3 js in Action Manning Publications s 325 ISBN 9781617292118 Arhiv originalu za 24 veresnya 2019 Procitovano 29 grudnya 2019 Maclean Malcolm 2014 D3 Tips and Tricks Leanpub s 580 Arhiv originalu za 13 veresnya 2018 Procitovano 29 grudnya 2019 King Ritchie 2014 Visual Storytelling with D3 An Introduction to Data Visualization in JavaScript Addison Wesley Data amp Analytics Series s 288 Arhiv originalu za 13 veresnya 2018 Procitovano 29 grudnya 2019 VideoGopal Nikhil October 2014 D3 and CoffeeScript A Python Programmer s Introduction to Web Visualizations Sebastopol California O Reilly Media Arhiv originalu za 13 veresnya 2018 Procitovano 29 grudnya 2019 King Ritchie December 2014 D3 Visualization LiveLessons An Introduction to Data Visualization in JavaScript Addison Wesley Professional Arhiv originalu za 13 veresnya 2018 Procitovano 29 grudnya 2019 Posilannya red Oficijnij sajt Galereya D3 js Arhivovano 13 veresnya 2018 u Wayback Machine Blocksplorer Arhivovano 19 sichnya 2015 u Wayback Machine poshuk blokiv za metodami biblioteki D3 bagatorazovi diagrami C3 https c3js org Arhivovano 1 kvitnya 2022 u Wayback Machine Plotly https plot ly javascript Arhivovano 30 grudnya 2019 u Wayback Machine Otrimano z https uk wikipedia org w index php title D3 js amp oldid 39354614