Kaip kurti interaktyvias diagramas?

Kas yra interaktyvios diagramos?

Pats naudotojas gali pasirinkti, kokią duomenų dalį nori matyti ir kokia forma – dažniausiai galima rinktis linijines, stulpelines diagramas, lenteles ar net pasaulio žemėlapį.

Kodėl verta kurti interaktyvias diagramas?

Remiantis „MarketingLTB“ ataskaita:

• 62 % naudotojų teikia pirmenybę interaktyviam content,
• 72 % auditorijos geriau įsimena prekės ženklą, naudojantį interaktyvų turinį,
• 91 % pirkėjų teikia pirmenybę vaizdiniam, dinaminiam content, o ne statiškam teksto blokui.

Taip pat išryškėja praktinė nauda:

1. Interaktyvias diagramas galima susieti su duomenų šaltiniu, todėl jos atsinaujina automatiškai. Straipsnis išlieka aktualus, o įmonei nereikia eikvoti nei laiko, nei biudžeto turinio pakeitimams prižiūrėti.
2. Diagramos autorius gali lengvai pritaikyti spalvas ar numatytąjį diagramos tipą savo įmonei. Pakanka vieną kartą nustatyti parametrus, kad būtų galima greitai generuoti nuoseklias ir patrauklias diagramas.
3. Naudojant sudėtingesnius sprendimus, naudotojas gali eksportuoti duomenis, stebėti pokyčius ir net pasiekti API. Galimybes galima nuolat plėsti.

Verta pabrėžti, kad pirmiau minėta nauda susijusi ne tik su vizualizacijomis – statišką turinį taip pat galima susieti su duomenų šaltiniu. Tokiu atveju atnaujinami ne tik grafikai, bet ir ištisi straipsnio sakiniai.

Kaip kurti interaktyvias diagramas?

Atsižvelgiant į gebėjimų lygį, galima rinktis iš trijų sprendimų:

Paruošti įrankiai, tokie kaip „Canva“

Žinomiausias pavyzdys – „Canva“, tačiau veikimo principas daugumoje tokio tipo platformų yra panašus.

Kaip tai atrodo praktiškai?

1. Diagramos šablono pasirinkimas – prisijungę pasirenkame vizualizacijos tipą: linijinę, stulpelinę, skritulinę ir kt. Interaktyvumas nustatomas iš anksto; dažniausiai tai būna „hover“ funkcija, rodanti patarimus užvedus žymeklį, arba duomenų variantų perjungimas.
2. Duomenų įvedimas – duomenis, deja, turime pridėti rankiniu būdu, įklijuodami lentelę, arba importuoti iš CSV failo. Šis sprendimas tinka paprastoms suvestinėms, tačiau greitai tampa problemiškas naudojant didesnius duomenų rinkinius ar dažnai juos atnaujinant.
3. Išvaizdos pritaikymas – galime pakeisti spalvas, šriftus, ašių aprašus ar legendą.
4. Diagramos įterpimas – interaktyvią diagramą eksportuojame kaip iframe arba įterpiamąją nuorodą.

Šis sprendimas yra greitas, tačiau turi aiškias ribas: nėra automatinio duomenų atnaujinimo iš API, pažangesnės logikos, pavyzdžiui, filtrų ar ryšių tarp duomenų sekų, taip pat kontrolė prieinamumo ir našumo srityse yra ribota. Tai geras pasirinkimas paprastam rinkodaros turiniui, tačiau ne toks tinkamas content, kuris turi būti lengvai plečiamas, veiksmingas ir nereikalaujantis nuolatinės priežiūros.

Duomenų platforma, tokia kaip „Monitly“

Šiuo atveju pakanka pasirinkti duomenis, kuriuos norite pateikti straipsnyje:

Pasirinkę duomenų rinkinį, galite pritaikyti išvaizdą ir spustelėti „Export“. Straipsniui reikia pasirinkti „Embed“, kad galėtumėte lengvai įterpti interaktyvią diagramą, kuri atsinaujina automatiškai.

Diagramą taip pat galite eksportuoti kitiems tikslams:

• PNG – kaip statinį vaizdą dokumentui ar pristatymui,
• CSV – išsamesnei duomenų analizei, pavyzdžiui, naudojant AI,
• API – duomenims panaudoti savo programėlėje,
• Animation – animacijai „YouTube“ ar „TikTok“ sukurti.

„Monitly“ siūlo paruoštą diagramų vizualizacijos sprendimą ir atnaujina duomenis. Tačiau tai reiškia, kad galima naudoti tik platformoje esančius duomenis. Galima rinktis iš kelių milijonų įvairių tiekėjų, pavyzdžiui, „Eurostat“, OECD, PSO ar viešųjų duomenų portalų, statistinių duomenų.

Jei norite vizualizuoti savo duomenis, turite rinktis tokius įrankius kaip „Canva“ arba pereiti prie kito sprendimo.

Interaktyvių diagramų programavimas nuo nulio

Kaip procesas atrodo techniškai?

1. Duomenų paruošimas – duomenys turi būti struktūrizuoti, dažniausiai JSON arba CSV formatu. Naudojant didelius rinkinius, dažnai reikia juos išvalyti, agreguoti ir normalizuoti, t. y. atlikti ETL procesus. Puikios diagramos prasideda nuo tvirto pagrindo – tinkamai paruoštos duomenų bazės, pavyzdžiui, „PostgreSQL“.
2. Bibliotekos pasirinkimas – dažniausiai naudojamas „Chart.js“, nes jį paprasta ir greita įdiegti. Lankstesnis, tačiau sudėtingesnis yra „D3.js“, o kompromisinį variantą siūlo „Recharts“, kurį naudojome šiame straipsnyje pateiktoms interaktyvioms diagramoms. Kiekvienam iš šių sprendimų reikia išmanyti „JavaScript“ ir frontend pagrindus, nors šiandien AI gerokai sumažina pradinių žinių barjerą.
3. Sąveikos logika – reikia savarankiškai apibrėžti, kas nutiks spustelėjus ar užvedus pelės žymeklį, kaip pasikeis duomenys juos filtruojant, kokius elementus naudotojas galės vizualiai pakeisti ir kt.
4. Integracija su tiesioginiais duomenimis – kad diagrama atsinaujintų, ją reikia tiesiogiai susieti su savo duomenų bazės API.

Šis paskutinis elementas yra ypač svarbus – diagrama yra tokia gera, kokia yra jos naudojama duomenų bazė. Todėl renkant duomenis iš išorinio šaltinio verta nustatyti, pavyzdžiui, „Python“ scenarijų, kuris kasdien aktyvuojamas, tarkime, naudojant nemokamą „GitHub Actions“, ir surenka naujausius duomenis.

Nuosavos diagramos suteikia didžiausią savarankiškumą, tačiau kiekvienam pakeitimui, net ir mažiausiam, reikia koreguoti kodą. Be to, būtina prižiūrėti duomenų bazę ir nuolat stebėti duomenų atnaujinimą bei kokybę, todėl tokį sprendimą verta rinktis tik įgyvendinant didelės apimties projektą.