logo

Výukový program D3.js pro začátečníky:Naučte se vizualizaci dat pomocí JS

D3.js je výkonná JavaScriptová knihovna pro vizualizaci dat . Na rozdíl od mnoha nástrojů pro vizualizaci dat, které používají Python, je D3.js zcela řízen pomocí front-endových dovedností, jako je JavaScript, CSS a HTML. S kódem řízeným JS, vestavěnými funkcemi vykreslování a automatickou animací D3 trvale vystupoval jako nejlepší nástroj pro vizualizaci dat pro front-end vývojáře.

Dnes vám pomůžeme začít s komponentami D3.js a poskytneme vám praktické zkušenosti s vytvářením vašich prvních vizualizací.

Dnes se budeme zabývat tímto:

  • Co je to D3.js?
  • Nastavení prostředí D3.js
  • Základní součásti D3.js
  • Příklady vizualizace dat
  • Pokročilé koncepty, které je třeba se naučit jako další

Osvojte si D3.js rychle pomocí praktické praxe

Procvičte si vytváření desítek různých interaktivních grafů pomocí lekcí krok za krokem.

Úvod do vizualizace pomocí D3.js

Co je to D3.js?

D3.js (dokumenty založené na datech) je open-source JavaScriptová knihovna, která vám umožňuje vytvářet dynamické vizualizace dat ve webových prohlížečích pomocí SVC, HTML 5 a CSS. Vytvořil ji Mike Bostock v roce 2011 jako duchovní nástupce Protovise. D3.js se specializuje na reprezentaci velkých souborů dat stravitelnými a interaktivními prostředky.

Zatímco většina nástrojů pro vizualizaci dat vyžaduje Python, vizualizace D3.js jsou vytvářeny výhradně pomocí JavaScriptu. To umožňuje vývojářům frontendu přidat do svých uživatelských rozhraní pokročilou vizualizaci dat, aniž by se museli obtěžovat učit nový jazyk.

Mnoho pokročilých funkcí pro manipulaci s daty a vizualizaci je vestavěno a implementováno, což znamená, že nový uživatel D3.js může vytvářet efekty, které by jinak vyžadovaly roky zkušeností.

Například D3.js obsahuje vestavěné styly grafů pro cokoli od jednoduchého koláčového grafu po interaktivní kruhový barplot.

Zde je příklad koláčového grafu D3.js, který ukazuje nejlepší programovací jazyky pro použití v roce 2020.

Zatímco velká data jsou těžko pochopitelná, vizualizace jsou mnohem přístupnější. Dobře provedená vizuální stránka může dokonale přenést tisíce datových bodů do soudržného a použitelného trendu.

Vizualizace dat pomáhá:

  • Rychle se rozhodujte na základě velkých souborů dat
  • Pochopte zastřešující trendy na trhu
  • Sdělujte informace jedním pohledem
  • Najděte chyby v zaznamenaných datech

Hlavní funkce D3.js

  • Používá webové standardy :Používá zavedené standardy SVG, HTML a CSS, aby byl kompatibilní se stávajícími technologiemi.

  • Na základě dat :D3 může používat statická data nebo je načítat ze vzdálených serverů v několika formátech, jako jsou pole, objekty, CSV, JSON nebo XML.

  • Manipulace s DOM :D3 vám umožňuje manipulovat s objektovým modelem dokumentu (DOM) pomocí vašich dat.

  • Dynamické vlastnosti :D3 poskytuje dynamické vlastnosti a prvky. Vlastnosti mohou být specifikovány jako funkce dat, které pak upravují vaše prvky. Jinými slovy, vaše data definují styl vaší vizualizace.

  • Typy vizualizace :D3 obsahuje desítky vestavěných formátů grafů pro běžné aplikace, jako je hodnocení, korelace a distribuce.

  • Vlastní vizualizace :D3 vám umožňuje vytvářet vlastní vizualizace od začátku nebo vyladěním aktuálních formátů grafů.

  • Přechody a animace: D3 poskytuje vestavěné animační funkce transition() , duration() , delay() a ease() funkce, které automaticky animují prvky vašeho grafu na základě interakce uživatele, časovaných přechodů nebo jiných událostí.

Nastavení prostředí D3.js

Než se do toho pustíte, budete muset nastavit prostředí D3.js. Čtyři součásti prostředí D3.js jsou Knihovna D3 , webový server , textový editor a webový prohlížeč .

Knihovnu D3 můžete použít tak, že ji propojíte přímo se svou stránkou HTML ze sítě pro doručování obsahu (CDN). Použití CDN vám umožní pracovat s D3 bez stahování zdrojového kódu.

Zahrňte D3 zadáním adresy URL CDN pro D3 do head sekce:

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>

<script>
    // write your d3 code here.. 
</script>
</body>
</html>

U webových serverů většina prohlížečů serveruje místní soubory HTML přímo do prohlížeče. Můžete také použít webový server, jako je Apache, pokud vám to více vyhovuje.

Váš textový editor by měl podporovat JavaScript. Některá skvělá integrovaná vývojová prostředí (IDE) jsou:

  • Kód Visual Studio
  • Eclipse
  • Vznešený text

D3 funguje ve všech prohlížečích kromě IE8 a nižších. V tomto tutoriálu budu používat Google Chrome. Jakmile budete mít všechny tyto věci, jste připraveni začít!



Základní součásti D3.js

Nyní se podíváme na základní součásti jakéhokoli projektu D3. Důležité komponenty jsou:

  • Výběry , který se používá k výběru prvků DOM pro manipulaci
  • Manipulace s DOM , který se používá k přidávání nebo úpravě textu v rámci prvků DOM
  • Řetězení metod , který se používá k vytvoření potrubí metod, z nichž každá transformuje objekt.
  • Spojení dat , který se používá k navázání dat na vybraný prvek, aby se usnadnily manipulace založené na datech.

Výběry D3

Výběr je začátkem většiny řetězců metod D3, protože určuje, které prvky budou ovlivněny pozdějšími metodami. V D3.js existují dva způsoby výběru, select() a selectAll() .

Vybrat()

select() metoda se používá k výběru jedné instance daného HTML tagu. Pokud zadaný tag není přítomen, vrátí prázdný výběr. Pokud je přítomno více instancí vybrané značky, vybere pouze první prvek.

Spusťte slavný program „hello world“ pro D3.js pomocí select() metoda.

<head>
    <script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
    <div>Welcome to Educative</div>
    <div>Introduction to D3.js</div>
</body>
</html>

d3.selectAll('div').style("color","green");

Výše vybereme všechny HTML div značky pomocí selectAll() způsob, jak změnit jejich barvu na zelenou.

Nejprve vybereme veškerý text pod div pomocí značky selectAll() metoda. Potom použijeme style() metoda pro přidání stylu do vybraného textu.

Manipulace DOM pomocí D3

Nyní se podíváme na nejběžnější metody manipulace s DOM, text() , append() , remove() , style() a attr() .

text()

text() metoda manipuluje s prvky DOM a obecně se používá k přidání nebo úpravě textu uvnitř prvků DOM. 

<head>
    <script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
    <div></div>
</body>
</html>

d3.select('div').text("I am adding text");

Nejprve použijeme select() metodou vyberte div Prvky. Potom použijeme text() způsob přidání našeho textu do div prvek.

append()

append() metoda se používá k přidání nového nového prvku HTML na konec vybraného prvku. Vytvořme nový div prvek uvnitř body a přidejte do něj text pomocí text() metoda. 

<head>
    <script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
    <div>Introduction to Visualization using D3.js</div>
</body>
</html>

d3.select("body").append("div").text("Appending new div tag")

Jeden div tag je již přítomen uvnitř tagu body v souboru HTML. V řádku 1 použijeme append() metoda pro přidání nového prvku div do souboru HTML. Poté jsme pomocí metody text() přidali text „Připojování nové značky“.

remove()

remove() metoda se používá k odstranění vybraného prvku HTML. 

<head>
    <script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
    <div>1st div tag</div>
    <div>2nd div tag</div>
</body>
</html>

d3.select("div").remove()

select() metoda vybere první div živel. Potom použijeme remove() metoda k odstranění vybraného prvku. Nakonec už jen druhý div prvek je zobrazen.

style()

D3.js poskytuje style() metoda pro nastavení stylu vybraných prvků DOM. Styl je nastaven ve formátu podobném CSS, ale může změnit pouze jeden atribut najednou. První parametr style je vždy atribut, který chcete upravit, a druhý parametr je nová hodnota. 

 <head>
    <script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
    <div>Showing effect of the style method</div>
</body>
</html>

d3.select("div").style("color","blue").style("font-size","30px")

Stejně jako dříve začneme výběrem div poté změňte barvu na modrou s prvním style() a změňte písmo pomocí druhého. Každý style() metoda může změnit pouze jeden atribut.

attr()

Místo volání style() dvakrát, můžeme zavolat attr() jednou. attr() metoda propojí váš prvek se šablonou stylů CSS a použije nastavení listu na všechny vybrané prvky.

Používá se také k definování atributů geometrického útvaru, na které se podíváme později. 

<head>
    <script src="https://d3js.org/d3.v6.min.js"></script>

</head>
<body>
    <div>Showing effect of the attr method</div>
</body>
</html>

 d3.select("div").attr("class","error");

.error {
    color: blue;
    font-size: 30px
    }

Naše attr() metoda spojuje vybrané div prvek do našeho listu CSS. První parametr definuje typ listu a druhý parametr určuje název třídy, kterou chcete vybrat.

To umožňuje D3 přizpůsobit vybraný prvek tak, aby jeho atributy barvy a velikosti písma odpovídaly listu CSS.

Pokračujte v učení D3.js

Naučte se D3.js bez procházení videí.

Textové kurzy Educative urychlují a zefektivňují učení díky snadno proniknutelným lekcím a praktickým prostředím kódování.

Úvod do vizualizace pomocí D3.js

Řetězení metod

Zřetězení metod je technika, která umožňuje spojit více metod dohromady. Výstup první metody bude přiváděn jako vstup do druhé metody a tak dále, dokud nebude řetězec dokončen.

Podobně jako u skládání funkcí ve funkcionálním programování vám řetězení metod umožňuje kombinovat jednoduché metody a vytvářet komplexní chování.

Už jste to používali v celém tutoriálu, když používáme select() a další metoda na stejném prvku.

Tento předchozí příklad je skvělým příkladem. 

d3.select("div").style("color","blue").style("font-size","30px")

Nejprve předáme div jako vstup do select() metoda. Potom select() vrátí prvek výběru, který se používá jako vstup pro style() metoda. První style() poté aplikuje změny stylu na předaný prvek. Nově stylizovaný prvek je poté předán dalšímu style() pro další změnu. Nakonec použijeme 3 metody s jediným voláním na původní vstup.

Řetězce metod můžete také napsat na samostatné řádky pro usnadnění čitelnosti:

d3.select("div")
.style("color","blue")
.style("font-size","30px")

Spojení dat

Datové spoje nám umožňují svázat vybrané prvky s daty pole. Vazby jsou hlavním nástrojem, který budete používat k vykreslování vizualizací, protože díky nim budou vaše manipulace DOM více reagovat na vaše data.

Tři hlavní metody pro spojení dat jsou datum() , data() a enter() .

datum()

datum() metoda spojuje datové body s jediným výběrem D3. 

<head>
    <script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
    <p></p>
</body>
</html>

d3.select("body")
  .select("p")
  .datum(["10"])
  .text(function(d) { return d; });

Ve výše uvedeném příkladu chceme svázat datový prvek s HTML tagem. V řádku 1 , vybereme p pomocí značky select() metoda. V řádku 3 , používáme datum() svázat 10 s p štítek. V řádku 4 , používáme text() vrátit data spojená s p tag.

data()

Můžeme použít data() k přiřazení více datových bodů k sadě výběrů D3. To je užitečné při práci s velkými soubory dat, protože to znamená, že nemusíte vázat každý datový bod jednotlivě. 

<head>
    <script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
    <p></p>
   <p></p>
   <p></p>
</body>
</html>

d3.select("body").selectAll("p")
   .data([10, 20, 30])
   .text(function(d) { return d; });

Zde vybereme tři prvky v těle pomocí selectAll() a každý svázat s datovým bodem pomocí data() . Poslední řádek vytiskne data ze spárovaného výběru.

enter()

enter() metoda se používá k navázání prvků, když je vybraných prvků více než prvků v poli. 

<head>
    <script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
    <p></p>
    <p></p>
    <p></p>
</body>
</html>

d3.select("body").selectAll("p")
   .data([10, 20, 30, 50, 70])
   .text(function(d) { return d; })
   .enter()
   .append("p")
   .text(function(d) { return d; });

Výše máme tři vybrané p prvky, ale 5 prvků v data() pole. To sváže všechny možné prvky v pořadí, dokud nezůstanou žádné nesvázané p prvky vlevo. Potom pomocí append přidáme další p prvky, dokud nebude možné všechny svázat.

Příklady vizualizace dat

Nyní, když známe komponenty, uvidíme, jak můžeme použít D3 k dokončení dvou různých ukázkových vizuálů. Začneme jednoduchým řádkovým SVG, abyste se zahřáli, a pak vám ukážeme, jak vytvořit koláčový graf z výše uvedeného článku.

SVG s D3.js

Chcete-li vytvořit SVG s D3, budeme muset zahrnout svg tag uvnitř našeho HTML souboru. 

<body>
     <svg>content</svg>
</body>

D3 má také "čárový" grafický prvek, který lze konfigurovat pomocí attr() . 

<head>
    <script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
</body>
</html>

var svg = d3.select("body") //create Svg element
   .append("svg")
   .attr("height",200 )
   .attr("width", 200)
   .style("border", "solid 8px red");

svg.append("line")
   .attr("x1", 50)
   .attr("y1", 30)
   .attr("x2", 150)
   .attr("y2", 100)
   .attr("stroke", "black")
   .attr("stroke-width","2px");

Z řádku 1 na řádek 5 na stránce JavaScript jsme vytvořili svg tag uvnitř body štítek. S pomocí attr definujeme atributy svg .

Z řádku 7 na řádek 13 na stránce JavaScript jsme vytvořili řádek uvnitř svg tag a inicializované atributy řádku pomocí attr metoda.

Následující obrázek ukazuje, jak je čára umístěna vzhledem k počátku, který leží v levém horním rohu SVG plátna.

Koláčový graf s D3.js

Nyní použijeme d3.arc a d3.pie API pro vytvoření části grafu „Programovací jazyky používané v roce 2020“, který jsme viděli na začátku článku. 

<head>
    <script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
</body>
</html>

var margin = {top: 20, right: 20, bottom: 60, left: 80},
     width = 500 - margin.left - margin.right,
     height = 500 - margin.top - margin.bottom;
var data = [
  {language:  "Python", value: 30},
  {language:  "Java", value: 20},
  {language:  "C/C++", value: 15},
  {language:  "Javascript", value: 35},
  {language:  "PHP", value: 15},];
colors=["#00A5E3","#FF96C5","#00CDAC","#FFA23A","#74737A"]  
var svg = d3.select("body") //create Svg element
   .append("svg")
   .attr('width', width + margin.right + margin.left)
   .attr('height', height + margin.top + margin.bottom)
   .style("border", "solid 1px red")
    .attr("transform","translate(200,0)");                 
var chart=svg.append('g')
   .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
   .attr('width', width)
   .attr('height', height)
var pie=d3.pie() 
        .value(d => d.value)
var color_scale=d3.scaleOrdinal()
              .domain(data.map(d=>d.language))
              .range(colors)
let arc=d3.arc()
       .outerRadius(150)
       .innerRadius(0)
var p_chart=chart.selectAll("pie")
     .data(pie(data))
     .enter()
     .append("g")
     .attr('transform', 'translate(170,230)') 
p_chart.append("path")
     .attr("d",arc) 
     .attr("fill",d=>{
       return color_scale(d.data.language);
     })     
p_chart.append("text")
      .text(function(d){ return d.data.language})
      .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")";  }) 
      .style("text-anchor", "middle")

Řádek 29–33 :Nejprve jsme definovali p_chart . Vybrali jsme koláč, který neexistuje, takže vrátí prázdný výběr. Nyní se připojujeme k data() s naším výběrem vrácení přes data(pie(data)) . Potom jsme přidali g tag pro každý datový bod.

Řádek 34–38 je místo, kde se pomocí oblouku kreslí výsečový graf. S pomocí ordinalScale() , každému oblouku jsme přiřadili barvu.

Řádek 39–42 :Do příslušného oblouku jsme přidali název jazyka pomocí text() metoda. Toto text() bude umístěn do těžiště každého oblouku pomocí arc.centroid() metoda.

Pokročilé koncepty, které je třeba se naučit dále

Jak můžete vidět, D3 vám umožňuje vytvářet poutavé vizuály byť jen s těmito základními komponenty. Jak se budete učit D3.js, zde jsou některé pokročilé koncepty, které vám pomohou vytvářet ještě lepší tabulky a grafy:

  • Škálování a změna měřítka
  • Interaktivita uživatele
  • Hierarchické mapování
  • Pokročilé formuláře grafů

Abychom vám pomohli se tam dostat, Educative vytvořil Úvod do vizualizace pomocí D3.js . Najdete zde praktické příklady každého typu grafu a naučíte se, jak manipulovat s vašimi vizuály pomocí interaktivity a měřítka.

Na konci budete moci používat své dovednosti front-end JS k vytváření vizualizací dat na úrovni těch nejzkušenějších datových vědců.

Šťastné učení!

Pokračovat ve čtení o JavaScriptu a Data Science

  • Co je to jQuery? Naučte se nejoblíbenější knihovnu JavaScript
  • Zjednodušená analýza dat:Výukový program Python Pandas
  • Co jsou velká data? Vlastnosti, typy a technologie