Пређи на садржај

D3.js

С Википедије, слободне енциклопедије

D3 (D3 za Data-Driven Documents) je Јаваскрипт библиотека која користи дигиталне податке да покрене стварање и контролу динамичких и интерактивних графичких облика који се покрећу у Претраживач веба. То је алат за Vizuelizacija bioloških podataka у W3C –формату компатибилном рачунарству, чинећи коришћење широко имплементиране Векторска графика (SVG), JavaScript, HTML5 и Cascading Style Sheets (CSS3) стандарде. То је наследник ранијег Protovis framework-а.[1]. За разлику од многих других библиотека, D3 омогућава велику контролу на крајњим визуелним резултатом.[2] Њен развој забележен је у 2011,[3] као верзија 2.0.0 пуштен је у августу 2011.[4]

Context

[уреди | уреди извор]

Први веб претраживач појавио се у раним 1990-им. У почетку су били у стању да прикажу само веб статичке странице :једини начин да корисник интерактује са веб-ом је било притисканје линкова и скролованје странице. Било је много напора да се превазиђу таква ограничења. Један од најзначајнијих је интеграцијаJavaScript као језик за скриптовање веб претраживача. Јава је постепено постала стандардни језик за креирање веб страница са богатим корисничким интерактивностима. Ово је одиграло кључну улогу у одлуци да се користи JavaScript као језик за D3.

Истовремено , истраживачи, инжењери , и практичари из различитих грана инжењеринга и науке су тражили алате који ће омогућити веб претраживачима да визуелно прикажу податаке у оквиру веб странице. Било је више пројеката са тим циљем , од којих свака је имала своје успехе и неуспехе , и инспирисао оне наредне. Најзначајнији примери су Prefuse, Flare, и Protovis комплети алата , који сви могу бити сматрани као директни претходници за D3.

Prefuse је алат за визуализацију креиран у 2005-ој год. којем је потребно коришћење Јаве , и визуелизације су рендероване у претраживачима са Јава плуг-ин-ом. Flare је био сличан алат из 2007 који користи ActionScript, а захтева Flash плуг-ин за рендеровање.

У 2009-ој , на основу искуства у развоју и коришћењу Prefuse и Flare-а, професор Jeff Heer, доктор науке, Студент Mike Bostock, и М. С. Студент Вадим Огиеветски из Stanford UniversityСтанфорд Визуелизација групе на Универзитету Станфорд створили Protovis, JavaScript библиотека за генерисање СВГ графике из података. Библиотека је добила запажено прихватање и од визуелизације података учесника и од академаца .[5]

У 2011, развој Protovis је заустављен да би се фокусирали на нов пројекат , D3. Информисан са искуставом од Protovis-а Bostock, заједно са Heer and Ogievetsky, развили су D3 да обезбеди више изражајан оквир који се , у исто време , фокусирају на веб стандарде и пружа побољшане перформансе (Bostock, Heer & Ogievetsky 2011).

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

[уреди | уреди извор]

Уграђени у оквиру веб странице HTML-а , JavaScript D3 библиотека користи унапред изграђене JavaScript функције да изаберете елементе , створити SVG објекте , стилизују их , или додају прелазе, динамичне ефекте или tooltip. Ови објекти се такође могу широко стилизовати коришћењем CSS-а. Велики скупови података се могу лако везати за SVG објектима користећи једноставне D3 функције да генеришу богате текстуалне или графичке графиконе и дијаграме. Подаци могу бити у различитим форматима , најчешће JSON ,(CSV ) или geoJSON, али , ако је потребно , JavaScript функција може бити написана да чита друге формате података .

Селекције

[уреди | уреди извор]

Централни принцип D3 дизајна је да омогући програмеру да прво користи CSS - стил да изаберете дати скуп Document Object Model (DOM) чворова , затим користе операторе да их манипулишу на сличан начин jQuery (see Bostock, Ogievetsky & Heer 2011, chap. 3). На пример , коришћењем D3 , може изабрати све HTML <p>...</p> елементе , а затим промените боју свог текста , нпр на зелену : 

 d3.selectAll("p")
   .style("color", "green");

Избор може бити заснован на таг-у , класи , идентификацији , атрибуту , или место у хијерархији. Након што се одабере елемент , могу се применити операције на њих. Ово укључује добијање и постављање атрибута , дисплеј текстове и стилове. Елементи могу такође бити додати и уклоњени. Овај процес мењања , креирања и уклањања HTML елемената може да зависи од података , који јеосновни концепт D3.

Прелази

[уреди | уреди извор]

Проглашењем прелаза , вредности атрибута и стилова могу бити глатко интерполисана током одређеног времена. Следећи код ће учинити све HTML <p>...</p> елементе на страници да постепено промене боју текста у розе : 

 d3.selectAll("p")
   .transition()
   .style("color", "pink");

Уобичајено трајање таквих прелаза је 250мс. Међутим , ова вредност се може мењати у коду. Поред трајања , битне карактеристике прелаза су кашњење и једноставност .

Подаци за везивање

[уреди | уреди извор]

За напредније употребе, учитани подаци покрећу стварање елемената. D3 учитава дати скуп података, затим, за сваки елемент направите SVG објекат са припадајућим својствима (облика, боје, вредности) и понашања (транзицији, догађаја).[6]

Додавање чворова користећи податке

[уреди | уреди извор]

Када су подаци повезани, D3 ће пратити образац, користећи експлицитно .enter() команде, имплицитно и експлицитно ажурирање .exit(). Користећи метод везујући било шта пратећи .enter() команда ће бити позван сваку ставку која се не представља чвор на избору док ажурирање зове на свим постојећим чворовима и .exit() се зове на свим постојећим чворовима који раде немају податке да се везују за њих. Постоји неколико примера како се то ради.[7]

API Структура

[уреди | уреди извор]

D3 API садржи пар хиљада функција, и оне могу бити уписане у следеће логичке јединице:[8]

  • Selections
  • Transitions
  • Arrays
  • Math
  • Color
  • Scales
  • SVG
  • Time
  • Layouts
  • Geography
  • Geometry
  • Behaviors

Математика

[уреди | уреди извор]

Низови

[уреди | уреди извор]

Д3 низови операција су направљени као допуна постојећег низови подршка у JavaScript (Мутатор методе: методу, преокрену, Плетеница, смене и унсхифт; аццессор методе: цонцат, придружити, кришка, индекОф и ластИндекОф; методе итерација: филтер, сваки, фореацх, мапа, неки, смањити и редуцеРигхт). Д3 проширује ову функционалност са:

  • Функције за проналажење minimum, maximum, extent, sum, mean, median, and quantile of an array.
  • Функције за одређивање, shuffling, permuting, merging, and bisecting arrays.
  • Функције за постављање низова.
  • Функције за манипулацију асоцијативних низова.
  • Подршка за мапе и сет збирки.

Референце

[уреди | уреди извор]
  1. ^ „For Protovis Users”, D3.js, Архивирано из оригинала 12. 03. 2013. г., Приступљено 18. 8. 2012 
  2. ^ Viau, Christophe (26. 6. 2012), „What’s behind our Business Infographics Designer? D3.js of course”, Datameer's blog, Архивирано из оригинала 23. 9. 2015. г., Приступљено 18. 8. 2012 
  3. ^ Myatt, Glenn J.; Johnson, Wayne P. (септембар 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, Приступљено 23. 1. 2013 
  4. ^ „Release Notes”, D3.js, Приступљено 22. 8. 2012 
  5. ^ 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 (UIST), Приступљено 23. 1. 2013 
  6. ^ Thinking with Joins
  7. ^ http://mbostock.github.io/d3/tutorial/circle.html
  8. ^ API Reference · mbostock/d3 Wiki · GitHub
D3.js на Викимедијиној остави.
Преузето из „https://sr.wikipedia.org/w/index.php?title=D3.js&oldid=26737332”