Ú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
- knihovna: https://d3js.org/
- instalace knihovny: https://d3js.org/getting-started#d3-in-vanilla-html
- ukázkový graf (zobrazí pouze osy): https://d3js.org/getting-started
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.)
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ů
5) Vylepšení grafu
- přidání titulku a zdroje dat
- případná úprava os a jejich popisu
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
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