d3 js tutorial data visualization framework
Tento výukový program D3.js vysvětluje, co je D3.js, jeho výhody, funkce, postup instalace krok za krokem a spousta praktických příkladů, takže se můžete rychle naučit D3.js:
V tomto výukovém programu je popsáno, jak lze ve vizualizaci dat využít D3.js, open-source JavaScriptovou knihovnu založenou na datech pomocí HTML, Document Object Model (DOM), Cascading Style Sheets (CSS), Scalable Vector Graphics (SVG), Canvas a JavaScript prostřednictvím webového prohlížeče.
Pomocí tohoto rámce lze externí data ve formátu XML, CSV nebo JSON převést na grafy, grafy nebo více formátů vizualizace prostřednictvím webového serveru.
V tomto tutoriálu se dozvíme o všech funkcích z této knihovny JavaScriptu a uvidíme, jak je můžeme využít k vizualizaci dat prostřednictvím webového serveru pomocí webového prohlížeče.
Začněme!!
Co se naučíte:
Co je D3.js
D3.js je datově orientovaný rámec, který je odlehčenou knihovnou JavaScriptu a vyžaduje méně řádků kódu, vhodný pro zpracování velkých dat za účelem získání interaktivních vizualizačních grafů, grafů a geoprostorových map.
Jedná se o knihovnu JavaScript s otevřeným zdrojovým kódem, která se používá hlavně k vykreslení grafické vizualizace manipulací s prvky DOM webových stránek pro průzkum a analýzu dat.
Data uložená v datových formátech, jako je pole, XML, CSV a JSON, lze převést na grafy, grafy a více způsoby připojením prvků HTML, plátna nebo seskupením tvarů škálovatelné vektorové grafiky (SVG) pomocí této knihovny JavaScriptu.
Velká data, jako jsou záznamy podrobností hovorů z mobilních a jiných zařízení, zprávy, diskuse nebo twitové protokoly z platforem sociálních médií, jako je Twitter, Facebook, WhatsApp, protokoly z tržních trendů a protokoly obchodních informací, lze převést na grafy, grafy nebo různé vizualizace pomocí této knihovny JavaScriptu.
Od příchodu různých platforem sociálních sítí, jako je Twitter, Facebook a WhatsApp, lze zachytit a převést různé komunikace, jako jsou twit, zprávy a protokoly komentářů, a převést je do vizuálních formátů, jako jsou grafy, grafy atd., Aby bylo možné porozumět trendovým tématům a vytvořit sentiment analýza.
Je snadné pochopit modus operandi skupiny podrobných záznamů o hovoru podezřelého z telekomunikačních věží a sledovat jejich strukturu volání v případě jejich účasti na podezřelých trestných činnostech.
Na základě změn probíhajících na burze cenných papírů, akciový index, jako je Bombay Stock Exchange (BSE), National Stock Exchange (NSE), který odráží pohyb cen akcií, rozhoduje o náladách na trhu a vede investory při nákupu nebo prodeji skladem.
D3.js může převádět aktivity podílu na trhu a vytvářet grafy nebo grafy, které mohou rychle předpovědět pravděpodobnost tržních trendů, nebo mobilní data ve formě podrobných záznamů hovorů pro vyšetřování jakékoli účasti podezřelých na zločinech nebo informací o prediktivním vyšetřování.
Vlastnosti D3.js
- Na základě dat: Používá se hlavně k prozkoumání a analýze dat a vytváření interaktivních grafů, grafů a rozsáhlých způsobů vizualizace dat v reálném čase.
- Manipulace s DOM: Jedná se o open-source JavaScriptovou knihovnu, která převádí data v různých formátech vizualizace manipulací s prvky DOM.
- Využívá webové standardy: K vytváření formátů vizualizace dat používá model Object Object (DOM), HTML, kaskádové styly (CSS), škálovatelnou vektorovou grafiku (SVG) a plátno.
- Rychlé a interaktivní: Je vysoce citlivý na změnu dat a může rychle animovat nebo transformovat vybraný prvek DOM z jednoho stavu do jiného.
- Zobrazit dynamické přechody: Tato knihovna je navržena k vytvoření rychlého dynamického přechodu ke generování rychlé responzivní vizualizace pomocí DOM.
Výhody používání souboru D3.js
- Jedná se o knihovnu JavaScript s otevřeným zdrojovým kódem, kterou lze použít spolu s dalšími rámci JavaScriptu, jako je Angular.JS, Ember.JS nebo React.
- Tato knihovna je open-source, takže je možné do zdrojového kódu přidat vlastní funkce, aby dosáhly svých cílů.
- Zpracovává webové standardy jako DOM, HTML, CSS, SVG a plátno, a proto nepotřebuje žádný jiný plug-in než prohlížeč, nepotřebuje žádné další ladicí nebo výukové nástroje.
- Může vytvářet dynamickou transformaci v reálném čase manipulací s prvky DOM, rychle do vizualizace dat bez latence.
- Funguje na datech a je specializovaný a vhodný pro funkce vizualizace dat obsažené v knihovně JavaScript.
Předpoklady k naučení souboru D3.js
- Textový editor: K psaní programovacího kódu, jako je HTML, CSS, JavaScript, a jejich integraci k dosažení požadovaného požadavku je nutný textový editor, jako je Notepad ++ nebo Vim.
- Webový prohlížeč: Měl by být nainstalován jakýkoli z moderních webových prohlížečů, jako je Firefox, Google Chrome, Safari, Opera nebo IE9, aby zkontroloval a ověřil výstup vytvořený po integraci kódu.
- HTML: Dobré pochopení značek a struktury HTML pomůže vytvořit základní webovou stránku a zarovnat prvky, aby se vizualizace dostala na další úroveň.
- CSS: Kaskádová šablona stylů (CSS) se používá k použití stylů včetně designu, rozložení a velikosti obrazovky na webové stránky.
- ROZSUDEK: Silné porozumění modelu Object Object (DOM) je zásadní, protože bude snazší znát strukturu a obsah webových dokumentů, přístup k prvkům DOM pro D3.js pro vizualizaci dat.
- JavaScript: Znalost základů a objektů JavaScript je předpokladem pro učení a implementaci D3.js do naší aplikace, aby bylo možné vizualizaci dat prohlížet na webovém serveru.
- Webový server: Je nezbytné mít nainstalovaný webový server, jako je Apache Tomcat nebo IIS (Internet Information Services), aby bylo možné data nahrávat externě ve formátu pole, objektu, XML, CSV, JSON a transformovat pomocí D3. js do vizualizačních formátů, jako jsou grafy, grafy a geoprostorová vizualizace.
Instalace / nastavení D3.js
Abychom mohli na našich webových stránkách vytvořit vizualizaci dat, musíme do naší webové stránky HTML zahrnout D3.js.
Lze to provést následujícími způsoby:
- Stáhněte si knihovnu D3.js do našeho klientského počítače a zahrňte cestu d3.min.js do