D3.js Vadnica - ogrodje vizualizacije podatkov za začetnike

d3 js tutorial data visualization framework

V tej vadnici za D3.js je razloženo, kaj je D3.js, njegove prednosti, funkcije, postopek namestitve po korakih in veliko praktičnih primerov, da se lahko hitro naučite D3.js:

Ta vadnica opisuje, kako lahko D3.js, podatkovno usmerjeno odprtokodno knjižnico JavaScript, uporabimo za vizualizacijo podatkov z uporabo HTML, objektnega modela dokumenta (DOM), kaskadnih slogovnih listov (CSS), razširljive vektorske grafike (SVG), platna in JavaScript prek spletnega brskalnika.

Z uporabo tega ogrodja lahko zunanje podatke v formatu XML, CSV ali JSON preko spletnega strežnika pretvorimo v diagrame, grafe ali več oblik vizualizacije.

V tej vadnici bomo spoznali vse funkcije iz te knjižnice JavaScript in videli, kako jih lahko uporabimo za vizualizacijo podatkov prek spletnega strežnika z uporabo spletnega brskalnika.

Začnimo!!

Kaj se boste naučili:

• Kaj je D3.js
  • Značilnosti D3.js
  • Prednosti uporabe D3.js
  • Predpogoji za učenje D3.js
  • Namestitev / nastavitev D3.js
  • Namestitev Apache Tomcat - spletni strežnik
• Razumevanje spletnih konceptov in standardov
• Različne metode in API-ji iz knjižnice D3.js
  • Dodajanje oblik SVG elementu HTML z d3.select ()
  • Preoblikovanje oblik SVG
  • Primer preoblikovanja SVG
  • Funkcije iskanja statistike matrike
  • API za prehode D3.js
  • API zbirke D3.js
  • Maps API
  • Nastavi API
  • API poti
• Zaključek
  • Priporočeno branje

Kaj je D3.js

D3.js je podatkovno usmerjen okvir, ki je lahka knjižnica JavaScript in zahteva manj vrstic kode, primerne za obdelavo velikih podatkov za pridobitev interaktivnih grafikonov za vizualizacijo podatkov, grafov in geoprostorskih zemljevidov.

Je odprtokodna knjižnica JavaScript, ki se v glavnem uporablja za načrtovanje grafične vizualizacije z manipulacijo elementov DOM spletnih strani za raziskovanje in analizo podatkov.

Podatke, shranjene v podatkovnih oblikah, kot so matrika, XML, CSV in JSON, je mogoče pretvoriti v grafi, diagrame in na več načinov, tako da s to knjižnico JavaScript priložite elemente HTML, platno ali razvrstite oblike razširljive vektorske grafike (SVG).

Velike podatke, kot so zapisi o podrobnostih klicev z mobilnih in drugih naprav, sporočila, razprave ali twit dnevniki s platform družbenih medijev, kot so Twitter, Facebook, WhatsApp, dnevniki tržnih trendov in dnevniki informacij o trgovanju, lahko pretvorimo v grafikone, grafikone ali različne vizualizacije s to knjižnico JavaScript.

Od pojava različnih platform za družabna omrežja, kot so Twitter, Facebook in WhatsApp, lahko različne komunikacije, kot so twit, sporočila in dnevniki komentarjev, zajamejo in pretvorijo v vizualne formate, kot so grafikoni, grafikoni itd., Da bi razumeli trendne teme in ustvarili sentiment. analiza.

Preprosto je razumeti način delovanja skupine zapisov podrobnosti klica osumljenca iz telekomunikacijskih stolpov in spremljati njihov klic v primeru vpletenosti v sumljive kriminalne dejavnosti.

Na podlagi sprememb na borzi delniški indeks, kot je Bombajska borza (BSE), Nacionalna borza (NSE), ki odraža gibanje cen delnic, odloča o tržnih občutkih in usmerja vlagatelje pri nakupu ali prodaji zalog.

D3.js lahko pretvori dejavnosti tržnega deleža za ustvarjanje grafikonov ali grafikonov, ki lahko hitro predvidijo verjetnost tržnih trendov, ali mobilne podatke v obliki zapisov podrobnosti klica za preiskovanje kakršne koli vpletenosti osumljencev v kazniva dejanja ali informacije o napovedni preiskavi.

Značilnosti D3.js

• Na podlagi podatkov: Uporablja se predvsem za raziskovanje in analizo podatkov ter ustvarjanje interaktivnih grafov, grafikonov in obsežnih načinov za vizualizacijo podatkov v realnem času.
• DOM manipulacija: To je odprtokodna knjižnica JavaScript, ki pretvarja podatke v različne formate vizualizacije z manipulacijo elementov DOM.
• Uporablja spletne standarde: Za oblikovanje oblik vizualizacije podatkov uporablja dokumentni objektni model (DOM), HTML, kaskadne slogovne liste (CSS), prilagodljivo vektorsko grafiko (SVG) in platno.
• Hitro in interaktivno: Zelo se odziva na spremembe podatkov in lahko hitro animira ali preoblikuje izbrani element DOM iz enega stanja v drugo.
• Prikaži dinamične prehode: Ta knjižnica je zasnovana za ustvarjanje hitrega dinamičnega prehoda za ustvarjanje hitre odzivne vizualizacije z DOM.

Prednosti uporabe D3.js

• To je odprtokodna knjižnica JavaScript, ki jo lahko uporabljate skupaj z drugimi okviri JavaScript, kot so Angular.JS, Ember.JS ali React.
• Ta knjižnica je odprtokodna, zato lahko k izvorni kodi dodate lastne funkcije za dosego svojih ciljev.
• Obravnava spletne standarde, kot so DOM, HTML, CSS, SVG in platno, zato ne potrebuje nobenega drugega vtičnika razen brskalnika, ne potrebuje nobenega dodatnega orodja za odpravljanje napak ali učenja.
• Z manipulacijo elementov DOM lahko hitro ustvari dinamično transformacijo v realnem času, hitro v vizualizacijo podatkov brez zakasnitve.
• Deluje na podatke in je specializiran ter primeren za funkcije vizualizacije podatkov, ki jih vsebuje knjižnica JavaScript.

Predpogoji za učenje D3.js

• Urejevalnik besedil: Urejevalnik besedil, kot sta Notepad ++ ali Vim, je potreben za pisanje programske kode, kot je HTML, CSS, JavaScript, in njihovo integracijo, da ustvari želeno zahtevo.
• Spletni brskalnik: Kateri koli sodobni spletni brskalnik, kot je Firefox, Google Chrome, Safari, Opera ali IE9, mora biti nameščen za preverjanje in preverjanje rezultatov, ki nastanejo po integraciji kode.
• HTML: Dobro razumevanje oznak in strukture HTML bo pomagalo zgraditi osnovno spletno stran in poravnati elemente, da bo vizualizacija na višji ravni.
• CSS: Cascading Style Sheet (CSS) se uporablja za uporabo slogov, vključno z oblikovanjem, postavitvijo in velikostjo zaslona na spletnih straneh.
• OBSODBA: Bistveno je razumevanje objektnega modela dokumenta (DOM), saj bo lažje poznati strukturo in vsebino spletnih dokumentov, dostopati do elementov DOM za D3.js za vizualizacijo podatkov.
• JavaScript: Poznavanje osnov in predmetov JavaScript je predpogoj za učenje in uporabo D3.js v našo aplikacijo, tako da si lahko vizualizacijo podatkov ogledate v spletnem strežniku.
• Spletni strežnik: Nujno je, da je nameščen spletni strežnik, kot je strežnik Apache Tomcat ali IIS (Internet Information Services), tako da se lahko podatki nalagajo zunaj v obliki matrike, predmeta, XML, CSV, JSON in jih je mogoče transformirati s pomočjo D3. js v formate vizualizacije, kot so grafi, diagrami in geoprostorska vizualizacija.

Namestitev / nastavitev D3.js

Da bi na naših spletnih straneh ustvarili vizualizacijo podatkov, moramo na našo spletno stran HTML vključiti D3.js.

To lahko storite na naslednje načine:

• Prenesite knjižnico D3.js v naš odjemalski stroj in vključite pot d3.min.js v