d3 js tutorial data visualization framework
Tento výukový program D3.js vysvetľuje, čo je D3.js, jeho výhody, funkcie, postup inštalácie krok za krokom a množstvo praktických príkladov, aby ste sa D3.js naučili rýchlo:
Tento výukový program popisuje, ako sa dá vo vizualizácii údajov využiť D3.js, dátová knižnica JavaScript s otvoreným zdrojovým kódom, ktorá sa používa na vizualizáciu údajov pomocou HTML, Object Object Model (DOM), kaskádových štýlov (CSS), škálovateľnej vektorovej grafiky (SVG), Canvas a JavaScript cez webový prehliadač.
Pomocou tohto rámca možno externé údaje vo formáte XML, CSV alebo JSON prevádzať na grafy, grafy alebo viac formátov vizualizácie prostredníctvom webového servera.
V tomto tutoriáli sa dozvieme o všetkých funkciách z tejto knižnice JavaScript a uvidíme, ako ich môžeme použiť na vizualizáciu údajov prostredníctvom webového servera pomocou webového prehliadača.
Začnime!!
Čo sa dozviete:
Čo je D3.js
D3.js je dátovo založený rámec, ktorý je ľahkou knižnicou JavaScriptu a vyžaduje menej riadkov kódu, vhodný na prácu s veľkými dátami, aby sa získali interaktívne vizualizačné grafy, grafy a geopriestorové mapy.
Jedná sa o knižnicu JavaScript s otvoreným zdrojovým kódom, ktorá sa používa hlavne na vykreslenie grafickej vizualizácie manipuláciou s prvkami DOM webových stránok na účely prieskumu a analýzy údajov.
Dáta uložené v dátových formátoch, ako sú pole, XML, CSV a JSON, je možné prevádzať do grafov, grafov a rôznymi spôsobmi pripojením HTML prvkov, plátna alebo zoskupenia tvarov škálovateľnej vektorovej grafiky (SVG) pomocou tejto knižnice JavaScript.
Veľké dáta, ako napríklad záznamy podrobností hovorov z mobilných a iných zariadení, správy, diskusie alebo twitové protokoly z platforiem sociálnych médií, ako sú Twitter, Facebook, WhatsApp, protokoly z trhových trendov a protokoly obchodných informácií, je možné previesť do grafov, grafov alebo rôzne vizualizácie pomocou tejto knižnice JavaScript.
Od nástupu rôznych platforiem sociálnych sietí, ako sú Twitter, Facebook a WhatsApp, je možné zachytávať a komunikovať rôzne komunikácie, ako napríklad twit, správy a protokoly komentárov, a prevádzať ich do vizuálnych formátov, ako sú tabuľky, grafy atď., Aby ste pochopili trendové témy a vytvorili sentiment analýza.
Ľahko sa pochopí spôsob činnosti skupiny podrobných záznamov o hovoroch podozrivého z telekomunikačných veží a monitoruje sa ich vzor hovorov v prípade ich účasti na podozrivých trestných činoch.
Na základe zmien prebiehajúcich na burze cenných papierov rozhoduje trhový sentiment a usmerňuje investorov pri nákupe alebo predaji akciový index, ako napríklad Bombay Stock Exchange (BSE), National Stock Exchange (NSE), ktorý odráža pohyb cien akcií. skladom.
D3.js dokáže prevádzať aktivity podielu na trhu na vytváranie diagramov alebo grafov, ktoré môžu rýchlo predpovedať pravdepodobnosť trhových trendov, alebo mobilné dáta vo forme podrobných záznamov o hovoroch na vyšetrovanie akejkoľvek účasti podozrivých na trestných činoch alebo informácií o prediktívnom vyšetrovaní.
Vlastnosti súboru D3.js
- Na základe údajov: Používa sa hlavne na skúmanie a analýzu údajov a na vytváranie interaktívnych grafov, grafov a rozsiahlych spôsobov vizualizácie údajov v reálnom čase.
- Manipulácia s DOM: Toto je open-source knižnica JavaScript, ktorá prevádza údaje v rôznych formátoch vizualizácie manipuláciou s prvkami DOM.
- Využíva webové štandardy: Na vytváranie formátov vizualizácie údajov používa model Object Object (DOM), HTML, kaskádové štýly (CSS), škálovateľnú vektorovú grafiku (SVG) a plátno.
- Rýchle a interaktívne: Je vysoko citlivý na zmenu údajov a môže rýchlo animovať alebo transformovať vybraný prvok DOM z jedného stavu do druhého.
- Zobraziť dynamické prechody: Táto knižnica je navrhnutá na vytvorenie rýchleho dynamického prechodu na generovanie rýchlej responzívnej vizualizácie pomocou modelu DOM.
Výhody používania súboru D3.js
- Jedná sa o knižnicu JavaScript s otvoreným zdrojovým kódom, ktorú možno použiť spolu s ďalšími rámcami jazyka JavaScript, ako sú Angular.JS, Ember.JS alebo React.
- Táto knižnica je otvorená ako zdrojový kód, takže do zdrojového kódu môžete pridať svoje vlastné funkcie, aby dosiahli svoje ciele.
- Spracováva webové štandardy ako DOM, HTML, CSS, SVG a plátno, preto nepotrebuje žiadny iný doplnok okrem prehliadača, nepotrebuje žiadne ďalšie ladiace alebo výučbové nástroje.
- Môže vytvárať dynamické transformácie v reálnom čase manipuláciou s prvkami DOM, rýchlo do vizualizácie údajov bez akejkoľvek latencie.
- Pracuje na dátach a je špecializovaný a vhodný pre funkcie vizualizácie údajov obsiahnuté v knižnici JavaScript.
Predpoklady naučiť sa D3.js
- Textový editor: Na napísanie programovacieho kódu ako HTML, CSS, JavaScript a na vytvorenie požadovanej požiadavky je potrebný textový editor, napríklad Notepad ++ alebo Vim.
- Webový prehliadač: Na kontrolu a overenie výstupu vytvoreného po integrácii kódu by mal byť nainštalovaný akýkoľvek moderný webový prehliadač, ako je Firefox, Google Chrome, Safari, Opera alebo IE9.
- HTML: Dobré pochopenie značiek a štruktúry HTML pomôže zostaviť základnú webovú stránku a zarovnať prvky, aby sa vizualizácia posunula na vyššiu úroveň.
- CSS: Kaskádová tabuľka štýlov (CSS) sa používa na použitie štýlov vrátane dizajnu, rozloženia a veľkosti obrazovky na webové stránky.
- ROZSUDOK: Silné pochopenie modelu DOM (Document Object Model) je nevyhnutné, pretože uľahčí spoznanie štruktúry a obsahu webových dokumentov a prístup k prvkom DOM pre súbor D3.js na vizualizáciu údajov.
- JavaScript: Znalosť základov a objektov JavaScript je nevyhnutným predpokladom na učenie a implementáciu súboru D3.js do našej aplikácie, aby bolo možné vizualizáciu údajov zobraziť na webovom serveri.
- Webový server: Je nevyhnutné mať nainštalovaný webový server ako Apache Tomcat alebo IIS (Internet Information Services), aby bolo možné dáta externe nahrávať vo formáte poľa, objektu, XML, CSV, JSON a transformovať ich pomocou D3. js do vizualizačných formátov, ako sú grafy, tabuľky a geopriestorová vizualizácia.
Inštalácia / nastavenie súboru D3.js
Aby sme mohli na našich webových stránkach vytvoriť vizualizáciu údajov, musíme do našej webovej stránky HTML zahrnúť súbor D3.js.
Môžete to urobiť nasledujúcimi spôsobmi:
- Stiahnite si knižnicu D3.js do nášho klientskeho počítača a uveďte cestu do súboru d3.min.js