Ako vytvárať interaktívne grafy?

Čo sú interaktívne grafy?

Používateľ si môže sám vybrať, ktorú časť údajov chce vidieť a v akej forme – najčastejšie má na výber čiarové a stĺpcové grafy, tabuľky alebo dokonca mapu sveta.

Prečo sa oplatí vytvárať interaktívne grafy?

Podľa správy MarketingLTB:

• 62 % používateľov uprednostňuje interaktívny content,
• 72 % príjemcov si lepšie zapamätá značku, ktorá využíva interaktívny obsah,
• 91 % kupujúcich uprednostňuje vizuálny, dynamický content pred statickým blokom textu.

Objavujú sa aj praktické výhody:

1. Interaktívne grafy možno prepojiť so zdrojom údajov, takže sa aktualizujú samy. Článok si neustále zachováva aktuálnosť a firma nemusí strácať čas ani rozpočet dohľadom nad úpravami obsahu.
2. Autor grafu môže jednoducho prispôsobiť farby alebo predvolený typ grafu svojej firme. Jednorazové nastavenie stačí na rýchle vytváranie konzistentných a atraktívnych grafov.
3. Pri pokročilejších riešeniach môže používateľ exportovať údaje, sledovať zmeny a dokonca pristupovať k API. Možnosti možno neustále rozširovať.

Treba zdôrazniť, že uvedené výhody sa netýkajú výhradne vizualizácií – aj statický obsah možno prepojiť so zdrojom údajov, takže článok neobnovuje iba grafiku, ale aj celé vety.

Ako vytvárať interaktívne grafy?

V závislosti od úrovne zručností sú k dispozícii tri riešenia:

Hotové nástroje, napríklad Canva

Najznámejším príkladom je Canva, no princíp fungovania je podobný na väčšine platforiem tohto typu.

Ako to vyzerá v praxi?

1. Výber šablóny grafu – po prihlásení vyberieme typ vizualizácie (čiarový, stĺpcový, koláčový a podobne). Interaktivita je vopred určená; najčastejšie zahŕňa hover (zobrazenie tipov po nabehnutí kurzorom) alebo prepínanie variantov údajov.
2. Zadanie údajov – údaje, žiaľ, pridávame ručne (vložením tabuľky) alebo ich importujeme zo súboru CSV. Toto riešenie je vhodné pri jednoduchých prehľadoch, no pri väčších súboroch alebo častých aktualizáciách sa rýchlo stáva problematickým.
3. Prispôsobenie vzhľadu – môžeme zmeniť farby, písma, popisy osí alebo legendu.
4. Vloženie grafu – interaktívny graf exportujeme ako iframe alebo odkaz na vloženie.

Toto riešenie je rýchle, no má svoje pevné limity: chýba automatická aktualizácia údajov z API, pokročilá logika (filtre, závislosti medzi sériami) aj kontrola nad prístupnosťou a výkonom. Hodí sa na jednoduchý marketingový obsah, no menej na content, ktorý má byť škálovateľný, efektívny a bezúdržbový.

Platforma s údajmi, napríklad Monitly

V tomto prípade stačí vybrať údaje, ktoré chcete umiestniť do článku:

Po výbere súboru údajov môžete prispôsobiť vzhľad a následne kliknúť na „Export“. Pre článok vyberte možnosť „Embed“, aby ste mohli jednoducho vložiť interaktívny graf, ktorý sa automaticky aktualizuje.

Graf môžete exportovať aj na iné účely:

• PNG – ako statický obrázok do dokumentu alebo prezentácie,
• CSV – na podrobnejšiu analýzu údajov, napríklad pomocou AI,
• API – na využitie údajov vo vlastnej aplikácii,
• Animation – na vytvorenie animácie pre YouTube alebo TikTok.

Monitly ponúka hotové riešenie na vizualizáciu grafov a zároveň aktualizuje údaje. To však znamená, že možno využiť iba údaje dostupné na platforme. Na výber sú milióny štatistík od poskytovateľov, ako sú Eurostat, OECD, WHO alebo data.gov.

Ak však chcete vizualizovať vlastné údaje, musíte si vybrať nástroje typu Canva alebo prejsť k ďalšiemu riešeniu.

Programovanie interaktívnych grafov od nuly

Ako vyzerá tento proces po technickej stránke?

1. Príprava údajov – údaje musia byť štruktúrované, najčastejšie vo formáte JSON alebo CSV. Pri veľkých súboroch často nasleduje čistenie, agregácia a normalizácia údajov (takzvané procesy ETL). Kvalitné grafy sa začínajú pevným základom, teda dobre pripravenou databázou, napríklad v PostgreSQL.
2. Výber knižnice – najčastejšie sa používa Chart.js pre svoju jednoduchosť a rýchlosť implementácie. Flexibilnejší, no náročnejší je D3.js, zatiaľ čo kompromis predstavuje Recharts (ktorý sme použili na prezentáciu interaktívnych grafov v tomto článku). Každá z týchto možností si vyžaduje znalosť JavaScriptu a základov frontendu, hoci AI dnes výrazne znižuje vstupnú bariéru.
3. Logika interakcií – ide o samostatné definovanie toho, čo sa stane po kliknutí alebo nabehnutí kurzorom, ako sa zmenia údaje po filtrovaní, ktoré prvky môže používateľ vizuálne upraviť a podobne.
4. Integrácia so živými údajmi – aby sa graf aktualizoval, treba ho priamo prepojiť s API vlastnej databázy.

Posledný prvok je mimoriadne dôležitý – graf je len taký dobrý, ako databáza, ktorú využíva. Preto sa pri získavaní údajov z externého zdroja oplatí nastaviť skript, napríklad v Pythone, ktorý sa každý deň aktivuje (napríklad prostredníctvom bezplatnej služby GitHub Actions) a načíta aktuálne údaje.

Vlastné grafy poskytujú najväčšiu mieru samostatnosti, no každá zmena – aj tá najmenšia – si vyžaduje zásah do kódu. K tomu sa pridáva údržba databázy a neustála kontrola aktualizácie a kvality údajov, preto je vhodné zvoliť toto riešenie až pri veľkom rozsahu projektu.