Vizualizacija podatkov z D3.js

Uvod

D3 pomeni Data-Driven Documents. D3.js je JavaScript knjižnica, ki omogoča manipulacijo dokumentov na podlagi podatkov, povezanih z njimi.

Uporabljamo jo predvsem za dinamične in interaktivne vizualizacije podatkov na spletu.

Priprava okolja

D3 knjižnico vključimo z ukazom:

<script src="d3js/d3.min.js"></script>

To pomeni, da je datoteka d3.min.js shranjena lokalno v mapi d3js.

Knjižnico lahko naložimo tudi neposredno s speta:

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

Kaj počnemo z D3?

D3 uporablja standardne spletne tehnologije:

• HTML
• CSS
• SVG

Glavne stvari, ki jih omogoča:

• Izbira elementov v DOM
• Spreminjanje elementov (barva, velikost, besedilo)
• Povezovanje podatkov z elementi
• Ustvarjanje novih elementov iz podatkov
• Animacije in dogodki

Ključna ideja: podatki → vplivajo na izgled in strukturo strani

Prvi SVG primer

Preden začnemo z D3, poglejmo še navaden SVG. SVG je vektorski zapis, s katerim lahko v HTML rišemo oblike.

Koda za ogled

<svg width="100" height="100">
    <rect x="0" y="0" width="50" height="100"></rect>
</svg>

Izvedena koda

Tukaj smo narisali pravokotnik. Kasneje bomo podobne elemente ustvarjali dinamično z D3.

Izbira elementov v DOM

D3 omogoča izbiro elementov v HTML dokumentu podobno kot CSS. Z ukazom d3.select() izberemo prvi element, ki ustreza izbirniku. Z ukazom d3.selectAll() pa izberemo vse ustrezne elemente.

• d3.select("p") izbere prvi odstavek.
• d3.select("#p2") izbere element z ID-jem p2.
• d3.selectAll("p") izbere vse odstavke.

Koda za ogled

<p id="p1">Prvi odstavek</p>
<p id="p2">Drugi odstavek</p>

<script>
d3.select("p").style("color", "green");
d3.select("#p2").style("color", "blue");
d3.selectAll("p").style("font-size", "50%");
</script>

Izvedena koda

V tem primeru najprej prvi odstavek pobarvamo zeleno, nato drugi odstavek modro, na koncu pa vsem odstavkom spremenimo velikost pisave.

Izbira znotraj gnezdene strukture

D3 omogoča tudi izbiro elementov znotraj drugih elementov. To naredimo z veriženjem ukazov:

• select() – izbere en element
• selectAll() – izbere več elementov

Pomembno: izbira poteka korak za korakom (od starša do otrok).

Koda za ogled

<table id="t1">
    <tr>
        <td>ena</td>
        <td>dva</td>
    </tr>
    <tr>
        <td>tri</td>
        <td>štiri</td>
    </tr>
</table>

<script>
d3.select("#t1")
  .select("tr")
  .selectAll("td")
  .style("background-color", "lightblue");
</script>

Izvedena koda

Koraki:

1. Izberemo tabelo #t1
2. Izberemo prvi tr
3. Znotraj njega izberemo vse td

Naloga:

• Pobarvaj samo drugo vrstico tabele.
• Pobarvaj vse celice v tabeli.
• Pobarvaj samo drugi stolpec.

Upravljanje z DOM

Z D3 lahko spreminjamo:

• besedilo (.text())
• atribute (.attr())
• lastnosti (.property())
• dodajamo elemente (.append())
• brišemo elemente (.remove())

Koda za ogled

<p id="p3">Tretji odstavek</p>

<script>
d3.select("#p3").text("Tudi to je odstavek.");
</script>

Izvedena koda

Z .text() prepišemo vsebino elementa.

Koda za ogled

<p id="p4">Četrti odstavek</p>

<script>
d3.select("body")
  .append("p")
  .attr("id","p5")
  .text("Peti odstavek");

d3.select("body")
  .insert("p")
  .attr("id","p6")
  .text("Šesti odstavek");

d3.select("#p6").remove();
</script>

Izvedena koda

• append() doda element na konec
• insert() vstavi element
• remove() izbriše element

Koda za ogled

<input id="i1" type="checkbox">

<script>
d3.select("#i1").property("checked", true);
</script>

Izvedena koda

Z .property() nastavljamo lastnosti elementov (npr. checkbox). To ni isto kot attr().

Izbira elementov v DOM

D3 omogoča izbiro HTML elementov podobno kot CSS. Z d3.select() izberemo prvi ustrezni element, z d3.selectAll() pa vse ustrezne elemente.

Koda za ogled

<p id="p1">Prvi odstavek</p>
<p id="p2">Drugi odstavek</p>

<script>
d3.select("p").style("color", "green");
d3.select("#p2").style("color", "blue");
d3.selectAll("p").style("font-size", "50%");
</script>

Izvedena koda

Izbira elementov v DOM

Prvi odstavek

Drugi odstavek

Upravljanje z DOM

Tretji odstavek

Četrti odstavek

D3

jQuery

Povezovanje DOM s podatki 1.

Dogodki - Eventi

Animacije - tranzicije

Povezovanje DOM s podatki 2.

Branje podatkov

Pa pojdimo končno k slikam - SVG in D3

A si upamo narisat barchart?

Kaj pa čisto pravi razsevni grafikon?