Přeskočit obsah

Úloha 4 – Knihovna D3.js

Při práci ve VS Code je nutné nainstalovat extension Live Sever

Jednotlivé kroky jsou rozděleny do samostatných commitů pro případné hledání chyb:

1) Instalace knihovny a příprava template grafu

Ukázkový graf

2) Rozdělení JS a HTML souborů

  • vytvoření JS souboru, do kterého se přesune kód z HTML

3) Přidání přímo zadaných dat

  • vytvoření matice dat (datum, hodnota)
  • základní úprava os
  • vykreslování hodnot grafu
  • změna atributů grafu (barva apod.)

Vložení vlastních dat do grafu

4) Import dat z csv

  • stažení dat v XSLX z ČSÚ (ideální data -> rok, hodnota): https://vdb.czso.cz/vdbvo2/faces/cs/index.jsf?page=statistiky
  • úprava v Excelu (ponechat pouze dva sloupce - datum, hodnota) a vyexportovat včetně záhlaví jako CSV s kódováním UTF-8
  • import dat v kódu
  • změna datového formátu vložených atributů

Import dat ze souboru

5) Vylepšení grafu

  • přidání titulku a zdroje dat
  • případná úprava os a jejich popisu

Přidání popisu grafu

6) Interaktivita

  • vytvoření interaktivity grafu
  • základní úprava html - vytvoření nadpisu karty, head, body
  • vytvoření stylu v html pro listening rectangle
  • vytvoření indikátoru zobrazené hodnoty na linii grafu
  • skrytí indikátoru zobrazené hodnoty po opuštění grafu ukazatelem myši

Přidání interaktivity grafu

7) Pop-up

  • vytvoření stylu v html pro pop-up
  • vytvoření divu pro pop-up
  • přidání pop-upu s výpisem vybraných hodnot
  • skrytí pop-upu, pokud nejsou zjišťované hodnoty

Pop-up s informacemi o zobrazovaném bodě

 Užitečné odkazy