Kā izveidot interaktīvas diagrammas?

Kas ir interaktīvas diagrammas?

Lietotājs pats var izvēlēties, kādu datu daļu vēlas aplūkot un kādā formā — visbiežāk pieejamas līniju un stabiņu diagrammas, tabulas un pat pasaules karte.

Kāpēc veidot interaktīvas diagrammas?

Saskaņā ar MarketingLTB ziņojumu:

• 62% lietotāju dod priekšroku interaktīvam content,
• 72% auditorijas labāk atceras zīmolu, kas izmanto interaktīvu saturu,
• 91% pircēju dod priekšroku vizuālam, dinamiskam content, nevis statiskam teksta blokam.

Interaktīvi risinājumi sniedz arī praktiskas priekšrocības:

1. Interaktīvas diagrammas var savienot ar datu avotu, tāpēc tās tiek automātiski atjauninātas. Raksts pastāvīgi saglabā aktualitāti, un uzņēmumam nav jātērē ne laiks, ne budžets satura pārveidošanai.
2. Diagrammas autors var viegli pielāgot krāsas vai noklusējuma diagrammas veidu uzņēmuma vajadzībām. Pietiek ar vienreizējiem iestatījumiem, lai ātri izveidotu saskaņotas un pievilcīgas diagrammas.
3. Sarežģītākos risinājumos lietotājs var eksportēt datus, sekot izmaiņām un pat piekļūt API. Šīs iespējas var pastāvīgi paplašināt.

Jāuzsver, ka iepriekš minētās priekšrocības neattiecas tikai uz vizualizācijām — statisku saturu tikpat labi var savienot ar datu avotu, tādējādi raksts atjauno ne tikai grafikus, bet arī veselus teikumus.

Kā izveidot interaktīvas diagrammas?

Atkarībā no prasmju līmeņa pieejami trīs risinājumi:

Gatavie Canva tipa rīki

Vispazīstamākais piemērs ir Canva, taču darbības princips lielākajā daļā šādu platformu ir līdzīgs.

Kā tas izskatās praksē?

1. Diagrammas veidnes izvēle — pēc pieteikšanās izvēlamies vizualizācijas veidu (līniju, stabiņu, sektoru diagrammu u. c.). Interaktivitāte jau ir iepriekš noteikta; parasti tā ietver hover funkciju (padomus, kas parādās, novietojot kursoru) vai datu variantu pārslēgšanu.
2. Datu ievade — dati diemžēl jāievada manuāli (ielīmējot tabulu) vai jāimportē no CSV faila. Šis risinājums ir piemērots vienkāršiem apkopojumiem, taču ātri kļūst problemātisks, ja datu kopas ir lielas vai bieži jāatjaunina.
3. Izskata personalizēšana — varam mainīt krāsas, fontus, asu aprakstus un leģendu.
4. Diagrammas iegulšana — interaktīvo diagrammu eksportējam kā iframe vai iegulšanas saiti.

Šis risinājums ir ātrs, taču tam ir skaidri ierobežojumi: nav iespējams automātiski atjaunināt datus no API, trūkst sarežģītas loģikas (filtru un saistību starp sērijām), kā arī ir ierobežota kontrole pār pieejamību un veiktspēju. Tas ir piemērots vienkāršam mārketinga saturam, bet mazāk piemērots content, kam jābūt mērogojamam, efektīvam un viegli uzturamam.

Monitly tipa datu platforma

Šajā gadījumā atliek izvēlēties rakstā ievietojamos datus:

Pēc datu kopas izvēles varat personalizēt izskatu un pēc tam noklikšķināt uz „Export”. Rakstam izvēlieties „Embed”, lai viegli ievietotu interaktīvu diagrammu, kas tiek automātiski atjaunināta.

Diagrammu varat eksportēt arī citiem mērķiem:

• PNG — kā statisku attēlu dokumentam vai prezentācijai,
• CSV — padziļinātai datu analīzei, piemēram, ar AI,
• API — lai izmantotu datus savā lietotnē,
• Animation — lai izveidotu animāciju YouTube vai TikTok platformai.

Monitly nodrošina gatavu risinājumu datu vizualizācijai un arī atjaunina datus. Tomēr tas nozīmē, ka var izmantot tikai platformā pieejamos datus. Ir pieejami vairāki miljoni statistikas datu no tādiem avotiem kā Eurostat, OECD, PVO un dati.gov.lv.

Ja vēlaties vizualizēt savus datus, jāizvēlas Canva tipa rīki vai jāpāriet pie nākamā risinājuma.

Interaktīvu diagrammu programmēšana no nulles

Kā process izskatās tehniski?

1. Datu sagatavošana — datiem jābūt strukturētiem, visbiežāk JSON vai CSV formātā. Lielu datu kopu gadījumā bieži nepieciešama arī datu tīrīšana, apkopošana un normalizēšana (t. s. ETL procesi). Lieliskas diagrammas sākas ar stabilu pamatu — labi sagatavotu datubāzi, piemēram, PostgreSQL.
2. Bibliotēkas izvēle — vienkāršības un ātras ieviešanas dēļ visbiežāk izmanto Chart.js. Elastīgāks, taču prasīgāks risinājums ir D3.js, savukārt kompromisu piedāvā Recharts (to izmantojām arī šajā rakstā esošo interaktīvo diagrammu izveidei). Katra no šīm iespējām prasa JavaScript un frontend pamatzināšanas, lai gan mūsdienās AI būtiski atvieglo apguves sākumposmu.
3. Mijiedarbības loģika — patstāvīgi jādefinē, kas notiek pēc klikšķa vai peles novietošanas, kā mainās dati pēc filtrēšanas un kādus elementus lietotājs var vizuāli pārveidot.
4. Integrācija ar reāllaika datiem — lai diagramma atjauninātos, tā ir tieši jāsavieno ar savas datubāzes API.

Pēdējais elements ir īpaši svarīgs — diagramma ir tik laba, cik laba ir izmantotā datubāze. Tāpēc, iegūstot datus no ārēja avota, ieteicams iestatīt, piemēram, Python skriptu, kas aktivizējas katru dienu (piemēram, bezmaksas GitHub Actions vidē) un iegūst jaunākos datus.

Pašu veidotas diagrammas nodrošina visplašāko autonomiju, taču ikvienām izmaiņām, pat vismazākajām, nepieciešama iejaukšanās kodā. Turklāt jāuztur datubāze un pastāvīgi jāuzrauga datu atjaunošana un kvalitāte, tāpēc šādu risinājumu ieteicams izvēlēties tikai liela mēroga projektiem.