Kuidas luua interaktiivseid diagramme?

Mis on interaktiivsed diagrammid?

Lugeja saab ise valida, millist andmelõiku ta soovib näha ja millises vormis – enamasti on võimalik valida joondiagrammi, tulpdiagrammi, tabeli või isegi maailmakaardi vahel.

Miks tasub luua interaktiivseid diagramme?

MarketingLTB raporti kohaselt:

• 62% kasutajatest eelistab interaktiivset content’i,
• 72% lugejatest jätab paremini meelde brändi, mis kasutab interaktiivset sisu,
• 91% ostjatest eelistab visuaalset ja dünaamilist content’i staatilisele tekstiplokile.

Lisaks kaasnevad ka praktilised eelised:

1. Interaktiivsed diagrammid saab ühendada andmeallikaga, mistõttu värskenduvad need automaatselt. Artikkel säilitab pidevalt oma värskuse ning ettevõte ei pea kulutama aega ega eelarvet sisu muutmise jälgimisele.
2. Diagrammi autor saab hõlpsalt kohandada värve või diagrammi vaikimisi tüüpi vastavalt oma ettevõttele. Ühekordsetest seadistustest piisab, et luua kiiresti ühtseid ja atraktiivseid diagramme.
3. Keerukamate lahenduste puhul saab kasutaja eksportida andmeid, jälgida muudatusi ja isegi kasutada API-t. Võimalusi saab pidevalt laiendada.

Tasub rõhutada, et need eelised ei puuduta ainult visualiseerimist – ka staatilist sisu saab andmeallikaga ühendada, nii et artikkel värskendab lisaks graafikale ka terveid lauseid.

Kuidas luua interaktiivseid diagramme?

Sõltuvalt oskuste tasemest on valida kolme lahenduse vahel:

Valmis tööriistad, näiteks Canva

Tuntuim näide on Canva, kuid tööpõhimõte on enamikul seda tüüpi platvormidel sarnane.

Kuidas see praktikas välja näeb?

1. Diagrammimalli valimine – pärast sisselogimist valime visualiseerimise tüübi (joon-, tulp-, sektordiagramm jne). Interaktiivsus on ette määratud; enamasti hõlmab see hover-funktsiooni ehk kursori liigutamisel kuvatavaid vihjeid või andmevariantide vahetamist.
2. Andmete sisestamine – andmed tuleb kahjuks lisada käsitsi (tabeli kleepimise teel) või importida CSV-failist. See lahendus sobib lihtsate koondite puhul, kuid suuremate andmehulkade või sagedaste uuenduste korral muutub kiiresti probleemseks.
3. Välimuse kohandamine – muuta saab värve, fonte, telgede kirjeldusi ja legendi.
4. Diagrammi manustamine – interaktiivse diagrammi saab eksportida iframe’i või manustamislingina.

See lahendus on kiire, kuid sellel on selged piirangud: puudub andmete automaatne uuendamine API kaudu, täiustatud loogika (filtrid, seosed andmesarjade vahel) ning kontroll ligipääsetavuse ja jõudluse üle on piiratud. See sobib hästi lihtsa turundussisu jaoks, kuid halvemini content’i jaoks, mis peab olema skaleeritav, tõhus ja vähest hooldust vajav.

Andmeplatvorm, näiteks Monitly

Sel juhul tuleb valida vaid andmed, mida soovid artiklisse lisada:

Pärast andmekogumi valimist saad välimust kohandada ja seejärel klõpsata nupul „Export“. Artikli jaoks tuleb valida „Embed“, et lisada hõlpsalt interaktiivne diagramm, mis värskendab end automaatselt.

Diagrammi saab eksportida ka muudel eesmärkidel:

• PNG – staatilise pildina dokumenti või esitlusse,
• CSV – andmete põhjalikumaks analüüsiks, näiteks tehisintellekti abil,
• API – andmete kasutamiseks oma rakenduses,
• Animation – animatsiooni loomiseks YouTube’i või TikToki jaoks.

Monitly pakub valmis lahendust diagrammide visualiseerimiseks ja uuendab ka andmeid. See tähendab aga, et kasutada saab ainult neid andmeid, mis platvormil olemas on. Valida saab mitme miljoni statistilise andmekogumi vahel, mille pakkujate hulka kuuluvad Eurostat, OECD, WHO ja dane.gov.pl.

Kui soovid aga visualiseerida enda andmeid, tuleb valida Canva-tüüpi tööriistad või liikuda järgmise lahenduse juurde.

Interaktiivsete diagrammide programmeerimine algusest peale

Milline näeb protsess tehniliselt välja?

1. Andmete ettevalmistamine – andmed peavad olema struktureeritud, enamasti JSON- või CSV-vormingus. Suurte andmehulkade korral lisanduvad sageli andmete puhastamise, koondamise ja normaliseerimise etapid (nn ETL-protsessid). Suurepärased diagrammid algavad tugevast alusest ehk hästi ettevalmistatud andmebaasist, näiteks PostgreSQL-ist.
2. Teegi valimine – kõige sagedamini kasutatakse Chart.js-i selle lihtsuse ja kiire rakendatavuse tõttu. Paindlikum, kuid nõudlikum on D3.js, samas pakub kompromissi Recharts (seda kasutasime interaktiivsete diagrammide esitamiseks selles artiklis). Kõik need valikud eeldavad JavaScripti ja frontend’i põhialuste tundmist, kuigi tänapäeval aitab AI sisenemisbarjääri märkimisväärselt vähendada.
3. Interaktsiooniloogika – tuleb ise määratleda, mis juhtub klõpsamisel või hiirega üle elemendi liikumisel, kuidas andmed pärast filtreerimist muutuvad, milliseid elemente saab kasutaja visuaalselt muuta jne.
4. Reaalajas andmetega integreerimine – diagrammi uuendamiseks tuleb see ühendada otse oma andmebaasi API-ga.

Viimane element on eriti oluline – diagramm on täpselt nii hea, kui hea on andmebaas, mida see kasutab. Seetõttu tasub välisest allikast andmete hankimisel seadistada näiteks Pythoni skript, mis käivitub iga päev (näiteks tasuta GitHub Actionsi abil) ja laadib alla värsked andmed.

Oma diagrammid pakuvad kõige suuremat autonoomiat, kuid iga muudatus – isegi kõige väiksem – nõuab koodi muutmist. Lisaks tuleb hallata andmebaasi ning pidevalt jälgida andmete värskendamist ja kvaliteeti. Seetõttu tasub selline lahendus valida alles siis, kui projekt on piisavalt suure mastaabiga.