D3.js

D3 (D3 za Data-Driven Documents) je Javaskript biblioteka koja koristi digitalne podatke da pokrene stvaranje i kontrolu dinamičkih i interaktivnih grafičkih oblika koji se pokreću u Pretraživač veba. To je alat za Vizuelizacija bioloških podataka u W3C –formatu kompatibilnom računarstvu, čineći korišćenje široko implementirane Vektorska grafika (SVG), JavaScript, HTML5 i Cascading Style Sheets (CSS3) standarde. To je naslednik ranijeg Protovis framework-a.. Za razliku od mnogih drugih biblioteka, D3 omogućava veliku kontrolu na krajnjim vizuelnim rezultatom. Njen razvoj zabeležen je u 2011, kao verzija 2.0.0 pušten je u avgustu 2011.

Context

Prvi veb pretraživač pojavio se u ranim 1990-im. U početku su bili u stanju da prikažu samo veb statičke stranice :jedini način da korisnik interaktuje sa veb-om je bilo pritiskanje linkova i skrolovanje stranice. Bilo je mnogo napora da se prevaziđu takva ograničenja. Jedan od najznačajnijih je integracijaJavaScript kao jezik za skriptovanje veb pretraživača. Java je postepeno postala standardni jezik za kreiranje veb stranica sa bogatim korisničkim interaktivnostima. Ovo je odigralo ključnu ulogu u odluci da se koristi JavaScript kao jezik za D3.

Istovremeno , istraživači, inženjeri , i praktičari iz različitih grana inženjeringa i nauke su tražili alate koji će omogućiti veb pretraživačima da vizuelno prikažu podatake u okviru veb stranice. Bilo je više projekata sa tim ciljem , od kojih svaka je imala svoje uspehe i neuspehe , i inspirisao one naredne. Najznačajniji primeri su Prefuse, Flare, i Protovis kompleti alata , koji svi mogu biti smatrani kao direktni prethodnici za D3.

Prefuse je alat za vizualizaciju kreiran u 2005-oj god. kojem je potrebno korišćenje Jave , i vizuelizacije su renderovane u pretraživačima sa Java plug-in-om. Flare je bio sličan alat iz 2007 koji koristi ActionScript, a zahteva Flash plug-in za renderovanje.

U 2009-oj , na osnovu iskustva u razvoju i korišćenju Prefuse i Flare-a, profesor Jeff Heer, doktor nauke, Student Mike Bostock, i M. S. Student Vadim Ogievetski iz Stanford UniversityStanford Vizuelizacija grupe na Univerzitetu Stanford stvorili Protovis, JavaScript biblioteka za generisanje SVG grafike iz podataka. Biblioteka je dobila zapaženo prihvatanje i od vizuelizacije podataka učesnika i od akademaca .

U 2011, razvoj Protovis je zaustavljen da bi se fokusirali na nov projekat , D3. Informisan sa iskustavom od Protovis-a Bostock, zajedno sa Heer and Ogievetsky, razvili su D3 da obezbedi više izražajan okvir koji se , u isto vreme , fokusiraju na veb standarde i pruža poboljšane performanse (Bostock, Heer & Ogievetsky 2011).

Tehnički principi

Ugrađeni u okviru veb stranice HTML-a , JavaScript D3 biblioteka koristi unapred izgrađene JavaScript funkcije da izaberete elemente , stvoriti SVG objekte , stilizuju ih , ili dodaju prelaze, dinamične efekte ili tooltip. Ovi objekti se takođe mogu široko stilizovati korišćenjem CSS-a. Veliki skupovi podataka se mogu lako vezati za SVG objektima koristeći jednostavne D3 funkcije da generišu bogate tekstualne ili grafičke grafikone i dijagrame. Podaci mogu biti u različitim formatima , najčešće JSON ,(CSV ) ili geoJSON, ali , ako je potrebno , JavaScript funkcija može biti napisana da čita druge formate podataka .

Selekcije

Centralni princip D3 dizajna je da omogući programeru da prvo koristi CSS - stil da izaberete dati skup Document Object Model (DOM) čvorova , zatim koriste operatore da ih manipulišu na sličan način jQuery (see Bostock, Ogievetsky & Heer 2011, chap. 3). Na primer , korišćenjem D3 , može izabrati sve HTML <p>...</p> elemente , a zatim promenite boju svog teksta , npr na zelenu :

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

Izbor može biti zasnovan na tag-u , klasi , identifikaciji , atributu , ili mesto u hijerarhiji. Nakon što se odabere element , mogu se primeniti operacije na njih. Ovo uključuje dobijanje i postavljanje atributa , displej tekstove i stilove. Elementi mogu takođe biti dodati i uklonjeni. Ovaj proces menjanja , kreiranja i uklanjanja HTML elemenata može da zavisi od podataka , koji jeosnovni koncept D3.

Prelazi

Proglašenjem prelaza , vrednosti atributa i stilova mogu biti glatko interpolisana tokom određenog vremena. Sledeći kod će učiniti sve HTML <p>...</p> elemente na stranici da postepeno promene boju teksta u roze :

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

Uobičajeno trajanje takvih prelaza je 250ms. Međutim , ova vrednost se može menjati u kodu. Pored trajanja , bitne karakteristike prelaza su kašnjenje i jednostavnost .

Podaci za vezivanje

Za naprednije upotrebe, učitani podaci pokreću stvaranje elemenata. D3 učitava dati skup podataka, zatim, za svaki element napravite SVG objekat sa pripadajućim svojstvima (oblika, boje, vrednosti) i ponašanja (tranziciji, događaja).

Dodavanje čvorova koristeći podatke

Kada su podaci povezani, D3 će pratiti obrazac, koristeći eksplicitno .enter() komande, implicitno i eksplicitno ažuriranje .exit(). Koristeći metod vezujući bilo šta prateći .enter() komanda će biti pozvan svaku stavku koja se ne predstavlja čvor na izboru dok ažuriranje zove na svim postojećim čvorovima i .exit() se zove na svim postojećim čvorovima koji rade nemaju podatke da se vezuju za njih. Postoji nekoliko primera kako se to radi.

API Struktura

D3 API sadrži par hiljada funkcija, i one mogu biti upisane u sledeće logičke jedinice:

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

Matematika

• Generisanje pseudoslučajnih brojeva sa normal, log-normal, Bates, i Irwin-Hall distribucije.
• Transformacija u 2D: translation, rotation, izobličenje, i skaliranje.

Nizovi

D3 nizovi operacija su napravljeni kao dopuna postojećeg nizovi podrška u JavaScript (Mutator metode: metodu, preokrenu, Pletenica, smene i unshift; accessor metode: concat, pridružiti, kriška, indekOf i lastIndekOf; metode iteracija: filter, svaki, foreach, mapa, neki, smanjiti i reduceRight). D3 proširuje ovu funkcionalnost sa:

• Funkcije za pronalaženje minimum, maximum, extent, sum, mean, median, and quantile of an array.
• Funkcije za određivanje, shuffling, permuting, merging, and bisecting arrays.
• Funkcije za postavljanje nizova.
• Funkcije za manipulaciju asocijativnih nizova.
• Podrška za mape i set zbirki.