logo

Výukový program D3.js:Sestavte svůj první sloupcový graf

D3.js je JavaScriptová knihovna, která umožňuje vytvářet dynamické vizualizace dat ve webových prohlížečích . Specializuje se na vizualizaci velkých datových souborů srozumitelným a interaktivním způsobem. Knihovna D3.js vyniká jako jeden z nejlepších nástrojů pro vizualizaci dat pro front-end vývojáře kvůli jeho základním funkcím, jako je manipulace s DOM, dynamické vlastnosti a animace.

Dnes vám ukážeme, jak vytvořit svůj první sloupcový graf pomocí D3.js. Začněme!

Pokryjeme :

  • Přehled projektu
  • Počáteční nastavení
  • Vytvořte datovou sadu
  • Nastavte rozměry a okraje
  • Přidat prvek SVG
  • Shromažďujte a formátujte data
  • Přidat pruhy
  • Další kroky

Přehled projektu

Dnes vytvoříme sloupcový graf pomocí D3.js. Toto je skvělý projekt, protože vám umožňuje procvičit si dovednosti vizualizace dat D3.js praktickým způsobem.

Sloupcové grafy jsou užitečným a efektivním způsobem, jak porovnávat data mezi různými skupinami. Zlepšují čitelnost , což vám umožní snadno identifikovat vzorce nebo trendy ve vašich datech.

D3.js je skvělý pro vizualizaci dat z mnoha důvodů, například:

  • Vizuály :pracuje s HTML, CSS a SVG, takže nejsou potřeba žádné nové nástroje
  • Animace :umožňuje animovat a upravovat prvky stránky
  • Podporováno ve všech hlavních prohlížečích :funguje na webu a usnadňuje sdílení a publikování vizuálů
  • Flexibilní :funguje dobře se stávajícími webovými technologiemi a může manipulovat s jakoukoli částí DOM
  • Škálovatelné :funguje dobře s velkými soubory dat

Počáteční nastavení

Než vytvoříme náš sloupcový graf, musíme udělat tři věci:

  1. Nastavte hlavu a tělo dokumentu
  2. Nastavte CSS
  3. Načtěte knihovnu d3.js

Všechny lze provést pomocí následujícího kódu:

<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */

.bar { fill: steelblue; }

</style>
<body>

<!-- load the d3.js library -->     
<script src="https://d3js.org/d3.v6.min.js"></script>
<script>

V <style> části kódu nastavíme styl pro barvu pruhů. Umístění stylu na začátek kódu je volitelné, ale je vhodné to udělat brzy.

Vytvořte si datovou sadu

Než začneme pracovat na našem sloupcovém grafu, potřebujeme data. V tomto tutoriálu budeme pracovat s některými ukázkovými daty z fiktivního externího souboru CSV s názvem amounts.csv .

Soubor se skládá ze sloupce jmen a částek:

name,amounts
Foo, 33
Rishab, 12
Alexis, 41
Tom, 16
Courtney, 59
Christina, 38
Jack, 21
Mickey, 25
Paul, 30

Tato data použijeme k vytvoření svislého sloupcového grafu, který ukládá hodnoty částek.

Nastavte rozměry a okraje

Nastavíme velikost oblasti, kterou použijeme pro graf, a okraje. 

// Set graph margins and dimensions
var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

Nyní určíme rozsahy domén x a y:

// Set ranges
var x = d3.scaleBand()
          .range([0, width])
          .padding(0.1);
var y = d3.scaleLinear()
          .range([height, 0]);

Připojit prvek SVG

Následující kód vybere body na webové stránce a připojí k ní objekt SVG. Velikost objektu SVG je určena width , height a margin nastavíme:

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", 
          "translate(" + margin.left + "," + margin.top + ")")

Shromažďujte a formátujte data

Je čas načíst naše data do těla našeho skriptu. Načteme náš soubor CSV a poté jej projdeme, abychom se ujistili, že jsou všechna data správně rozpoznána:

// Get data
d3.csv("amounts.csv").then(function(data) {

  // Format
  data.forEach(function(d) {
    d.amounts = +d.amounts;
  });

Škálování domén

Než přidáme naše sloupce, projdeme si naše data x a y, abychom se ujistili, že jsou přizpůsobeny našim nastaveným doménám:

// Scale the range of the data in the domains
  x.domain(data.map(function(d) { return d.name; }));
  y.domain([0, d3.max(data, function(d) { return d.amounts; })]);

Přidat pruhy

Je čas přidat tyče! Kód, který napíšeme, vytvoří pruhy a každý z nich spojí se sadou dat. 

 // Append rectangles for bar chart
  svg.selectAll(".bar")
      .data(data)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return x(d.name); })
      .attr("width", x.bandwidth())
      .attr("y", function(d) { return y(d.amounts); })
      .attr("height", function(d) { return height - y(d.amounts); });

Poslední věc, kterou musíme udělat, je připojit naše osy a pak se můžeme podívat na hotový výsledek. 

 // Add x axis
  svg.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));

  // Add y axis
  svg.append("g")
      .call(d3.axisLeft(y));

Takto by měl náš kód vypadat celý:

<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */

.bar { fill: steelblue; }

</style>
<body>

<!-- load the d3.js library -->     
<script src="https://d3js.org/d3.v6.min.js"></script>
<script>

// Set graph margins and dimensions
var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

// Set ranges
var x = d3.scaleBand()
          .range([0, width])
          .padding(0.1);
var y = d3.scaleLinear()
          .range([height, 0]);
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", 
          "translate(" + margin.left + "," + margin.top + ")");

// Get data
d3.csv("amounts.csv").then(function(data) {

  // Format data
  data.forEach(function(d) {
    d.amounts = +d.amounts;
  });

  // Scale the range of the data in the domains
  x.domain(data.map(function(d) { return d.name; }));
  y.domain([0, d3.max(data, function(d) { return d.amounts; })]);

  // Append rectangles for bar chart
  svg.selectAll(".bar")
      .data(data)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return x(d.name); })
      .attr("width", x.bandwidth())
      .attr("y", function(d) { return y(d.amounts); })
      .attr("height", function(d) { return height - y(d.amounts); });

  // Add x axis
  svg.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));

  // Add y axis
  svg.append("g")
      .call(d3.axisLeft(y));

});

</script>
</body>

Toto je náš hotový sloupcový graf:

Další kroky

Gratulujeme k prvním krokům s vizualizací dat D3.js! Sloupcové grafy jsou skvělým způsobem, jak vizualizovat velké soubory dat srozumitelným a vizuálně přitažlivým způsobem. O knihovně D3.js je stále co učit, například:

  • Stromové diagramy
  • Sankeyho diagramy
  • Mapování
  • A mnohem více

Chcete-li se dozvědět o těchto konceptech a dozvědět se více o sloupcových grafech v D3.js, podívejte se na Educative kurz D3 Tipy a triky:Interaktivní vizualizace dat . V tomto kurzu prozkoumáte D3.js, počínaje jednoduchými spojnicovými grafy a přejdete k pokročilejším konceptům, jako jsou histogramy a prvky kreslení. Na konci budete moci vytvářet úžasné vizualizace dat pomocí D3.

Šťastné učení!

Pokračujte v učení o JavaScriptu

  • Konverzace se světovými vývojáři JavaScriptu
  • 15 kurzů JavaScriptu:Naučte se vývoj webu, HTML a CSS
  • 15 tipů pro JavaScript:doporučené postupy pro zjednodušení kódu