Kuinka luoda interaktiivisia kaavioita?

Mitä interaktiiviset kaaviot ovat?

Käyttäjä voi itse valita, minkä osan datasta hän haluaa nähdä ja missä muodossa – vaihtoehtoina ovat yleensä viiva- ja pylväskaaviot, taulukot ja jopa maailmankartta.

Miksi interaktiivisia kaavioita kannattaa luoda?

MarketingLTB:n raportin mukaan:

• 62 % käyttäjistä suosii interaktiivista sisältöä,
• 72 % vastaanottajista muistaa paremmin brändin, joka käyttää interaktiivista sisältöä,
• 91 % ostajista suosii visuaalista ja dynaamista sisältöä staattisen tekstikappaleen sijaan.

Interaktiivisiin kaavioihin liittyy myös käytännön hyötyjä:

1. Interaktiiviset kaaviot voidaan yhdistää tietolähteeseen, jolloin ne päivittyvät automaattisesti. Artikkeli säilyy jatkuvasti ajantasaisena, eikä yrityksen tarvitse käyttää aikaa tai budjettia sisällön muutosten hallintaan.
2. Kaavion tekijä voi mukauttaa värit ja oletuskaaviotyypin helposti yrityksensä tarpeisiin. Kerran tehdyt asetukset riittävät yhtenäisten ja houkuttelevien kaavioiden nopeaan luomiseen.
3. Edistyneemmissä ratkaisuissa käyttäjä voi viedä tietoja, seurata muutoksia ja jopa käyttää API-rajapintaa. Mahdollisuuksia voidaan laajentaa jatkuvasti.

On hyvä huomata, etteivät edellä mainitut hyödyt koske vain visualisointeja – myös staattinen sisältö voidaan yhdistää tietolähteeseen. Tällöin artikkeli päivittää kuvien lisäksi myös kokonaisia tekstikappaleita.

Kuinka interaktiivisia kaavioita luodaan?

Käytettävissä on kolme vaihtoehtoa taitotasosta riippuen:

Canvan kaltaiset valmiit työkalut

Tunnetuin esimerkki on Canva, mutta toimintaperiaate on samanlainen useimmilla tämänkaltaisilla alustoilla.

Miltä prosessi näyttää käytännössä?

1. Kaaviomallin valinta – kirjautumisen jälkeen valitaan visualisoinnin tyyppi, kuten viiva-, pylväs- tai ympyräkaavio. Interaktiivisuus on määritelty valmiiksi, ja siihen kuuluvat yleensä hover-toiminnot eli hiiren viemiseen osoittimen päälle liittyvät vihjeet tai datanäkymien vaihtaminen.
2. Datan syöttäminen – tiedot lisätään yleensä manuaalisesti liittämällä taulukko tai tuomalla ne CSV-tiedostosta. Ratkaisu toimii yksinkertaisissa koonneissa, mutta muuttuu nopeasti hankalaksi suurten tietomäärien tai toistuvien päivitysten yhteydessä.
3. Ulkoasun mukauttaminen – värejä, fontteja, akselien kuvauksia ja selitettä voidaan muuttaa.
4. Kaavion upottaminen – interaktiivinen kaavio viedään iframe-kehyksenä tai upotuslinkkinä.

Ratkaisu on nopea, mutta sillä on selkeät rajansa: API:n kautta tapahtuva automaattinen datapäivitys ei onnistu, edistynyt logiikka, kuten suodattimet ja sarjojen väliset riippuvuudet, puuttuu, ja käytettävyyttä sekä suorituskykyä voi hallita vain rajallisesti. Se sopii hyvin yksinkertaiseen markkinointisisältöön, mutta huonommin sisältöön, jonka pitäisi olla skaalautuvaa, tehokasta ja vähän ylläpitoa vaativaa.

Monitlyn kaltainen data-alusta

Tässä tapauksessa sinun tarvitsee vain valita artikkeliin lisättävät tiedot:

Kun tietojoukko on valittu, voit mukauttaa ulkoasua ja napsauttaa sen jälkeen ”Export”. Artikkelia varten valitse ”Embed”, jotta voit lisätä helposti interaktiivisen kaavion, joka päivittyy automaattisesti.

Voit myös viedä kaavion muihin tarkoituksiin:

• PNG – staattisena kuvana asiakirjaan tai esitykseen,
• CSV – datan syvällisempää analysointia varten, esimerkiksi tekoälyn avulla,
• API – tietojen hyödyntämiseen omassa sovelluksessa,
• Animation – animaation luomiseen YouTubeen tai TikTokiin.

Monitly tarjoaa valmiin ratkaisun kaavioiden visualisointiin ja myös päivittää tiedot automaattisesti. Tämä tarkoittaa kuitenkin, että käytettävissä ovat vain alustalla olevat tiedot. Valittavana on useita miljoonia tilastoja esimerkiksi Eurostatilta, OECD:ltä ja WHO:lta sekä kansallisista avoimen datan portaaleista.

Jos haluat kuitenkin visualisoida omia tietojasi, sinun on käytettävä Canvan kaltaisia työkaluja tai siirryttävä seuraavaan ratkaisuun.

Interaktiivisten kaavioiden ohjelmointi alusta alkaen

Miltä prosessi näyttää teknisesti?

1. Datan valmistelu – tiedot on jäsenneltävä, yleensä JSON- tai CSV-muotoon. Suurten tietomäärien yhteydessä tarvitaan usein myös datan puhdistamista, yhdistämistä ja normalisointia eli ETL-prosesseja. Hyvät kaaviot rakentuvat vankalle perustalle: hyvin valmistellulle tietokannalle, kuten PostgreSQL:lle.
2. Kirjaston valinta – Chart.js on yleinen valinta yksinkertaisuutensa ja nopean käyttöönottonsa vuoksi. D3.js on joustavampi mutta vaativampi, kun taas Recharts tarjoaa hyvän kompromissin. Käytimme sitä tämän artikkelin interaktiivisten kaavioiden esittämiseen. Kaikki nämä vaihtoehdot edellyttävät JavaScriptin ja frontend-kehityksen perusteiden hallintaa, vaikka tekoäly helpottaa nykyään merkittävästi aloittamista.
3. Vuorovaikutuslogiikka – määritellään itse, mitä tapahtuu napsautuksen tai hiiren liikkeen jälkeen, miten tiedot muuttuvat suodatuksen yhteydessä ja mitä elementtejä käyttäjä voi muokata visuaalisesti.
4. Integrointi reaaliaikaiseen dataan – jotta kaavio päivittyy, se on yhdistettävä suoraan oman tietokannan API-rajapintaan.

Viimeinen kohta on erityisen tärkeä: kaavio on yhtä hyvä kuin sen käyttämä tietokanta. Siksi ulkoisesta lähteestä tietoja haettaessa kannattaa määrittää esimerkiksi Python-skripti, joka käynnistyy päivittäin – vaikkapa maksuttomassa GitHub Actionsissa – ja noutaa ajantasaiset tiedot.

Omat kaaviot tarjoavat laajimman itsenäisyyden, mutta jokainen muutos, pieninkin, edellyttää koodin muokkaamista. Lisäksi tietokantaa on ylläpidettävä ja datan päivittymistä sekä laatua valvottava jatkuvasti. Siksi tämä ratkaisu kannattaa valita vasta hankkeen ollessa riittävän laaja.