Datajournalisti vs. Internet Explorer

Tämä on tarina turhautumisesta ja liian pitkäksi venyneestä päivästä.

---

Tein yhteistyössä Eva Koskisen ja Pekka Palmgrenin kanssa Radar:lle muutaman visualisoinnin koskien amerikkalaisen Capital Group -investointipankin sijoituksia suomalaisissa pörssiyhtiöissä. Aiheesta julkaistu juttu löytyy täältä: Radar: Anonyma ägare på finska börsen

Visualisointien toteutus ja kasaaminen oli melko suoraviivainen ja nopea prosessi, koska käytin olemassa olevia komponentteja. Tämä oli tarkoituksenmukaista sillä muutamassa päivässä, jotka minulla oli aikaa ei ollut mahdollista lähteä toteuttamaan mitään laajempaa omaa ja uudenlaista toteutusta.

Juttuun toteuttamiani tiedonvisualisointikomponentteja oli kolme:

1. pallovisualisointi, joka kuvaa Capital Group:n sijoitusten suuruutta yrityksissä. (Kuva 1)
2. taulukko, josta on mahdollista vertailla tietoja perustuen yrityksen omiin kotisivuihin ja muualta kerättyihin tietoihin. (Kuva 2)
3. pylväsdiagrammi, joka mahdollistaa valittujen yritysten omistajatietojen tarkastelun. (Kuva 3)

Pallovisualisointi kuvasi Capital Group:n sijoitusten arvoja eri yrityksissä. Värit oli asetettu satunnaisesti USA:n lipun väreihin. (Kuva 1)

Taulukosta oli mahdollista vertailla yksittäisen yrityksen omistajalistaa kahden eri lähteen perusteella. (Kuva 2)

Pylväsdiagrammista oli mahdollista selata halutun yrityksen suurimpia omistajia perustuen vaihtoehtoisesta tietolähteestä kerättyihin tietoihin. (Kuva 3)

Pallovisualisoinnin (Kuva 1) toteutin perustuen esimerkkiin, joka löytyy täältä:
http://vallandingham.me/vis/gates/

Samaa lähdekoodia on hyödynnetty mm. New York Times:n toteuttamassa visualisoinnissa, jossa käsitellään USA:n budjettia.

Pylväsdiagrammin toteutin D3-Generator -palvelun avulla. Muokkasin palvelun tuottamaa koodia vain niin, että käyttäjän oli mahdollista valita pudotusvalikon avulla tarkasteluun haluamansa yrityksen tiedot.

Taulukkovisualisointi toteutettiin leipätekstin sekaan sellaisenaan HTML:n ja CSS:n avulla. Kyseessä oli siis tavallinen <table>-HTML-taulukko.

---

Interaktiiviset visualisoinnit toteutin D3.js-JavaScript-kirjaston avulla. Kirjasto mahdollistaa graafisten elementtien yksinkertaisemman toteuttamisen samaan tapaan kuin jQuery helpottaa tavallisten JavaScript-toiminnallisuuksien toteuttamista. D3.js-kirjasto tarjoaa valmiita funktioita ja toiminnallisuuksia, joiden avulla esimerkiksi kuvassa 3 nähtävien pylväiden piirtäminen onnistuu vain muutaman koodirivin avulla.

D3.js:ää on käytetty maailmalla paljon ja se on Raphaël-kirjaston ohella yksi eniten käytetyistä JavaScript-kirjastoista mitä tulee interaktiviisten visualisointien toteuttamiseen selainympäristöissä. Vaikka D3.js on yleisesti käytetty ei se kuitenkaan ole ongelmaton kaikkien selainten suhteen. Tai pikemminkin kaikki selaimet eivät noudata Internet-standardeja siinä määrin, että D3.js:llä toteutetut visualisoinnit toimisivat niissä aina suoraan. Syyttävä sormi osoittaa tässä etenkin Internet Explorer -selaimeen ja sen vanhempiin versioihin (IE 8 ja vanhemmat).

Myös toteuttamani visualisointien kohdalla jouduin toteamaan, etteivät ne toimi IE 8:n ja vanhemmilla selaimilla. Virheilmotukseksi selain antaa:

CSSStyleDeclaration undefined

joka aiheuttaa, että koko D3.js-kirjasto jää määrittelemättä eikä visualisointi toimi siten lainkaan. Google:n avulla ongelmaan löytää D3.js:ään ja kyseiseen virheilmoitukseen linkittyviä aiheita, mutta mitkään niistä eivät tarjonneet toimivaa ratkaisua, jota olisin voinut hyödyntää.

Tilanne oli sinällään erittäin turhauttava, että visualisointi toimi hienosti missä tahansa modernissa selaimessa. Kuitenkin kun Yleisradio:n hiljainen lupaus on tuottaa sisältöä kaikille kansalaisille velvoittaa se ottamaan huomioon kaikki kohderyhmät. En kuitenkaan halunnut jättää toteutusta tämän lupauksen takia julkaisematta, koska olin käyttänyt jo suhteellisen paljon aikaa visualisointien toteuttamiseen.

Vaihtoehtoina oli pyrkiä korjaamaan virhe ja tekemään D3.js:stä paremmin yhteensopiva Internet Explorer -selaimen kanssa, mutta sinällään tämä tie olisi voinut olla hyvinkin kivinen ja aikataulullisesti haastava, koska toteutus tuli saada ulos seuraavana päivänä. Ratkaisuni oli päätyä toteuttamaan visualisoinneista erilliset versiot vanhemmille selaimille, jotka eivät vaatisi niin monimutkaisia JavaScript-toiminnallisuuksia.

Pallovisualisoinnille (Vis 1) toteutin version, joka toimii myös IE:llä (Vis 2) ottamalla kuvankaappauksen alkuperäisestä versiosta ja lisäämällä kuvankäsittelyohjelmassa eri yritysten tiedot visualisoinnin päälle käsin. Eli sen sijaan, että käyttäjän oli mahdollisuus osoittaa palloja hiirellä näytettiin hänelle kaikki data kerralla (joka ironisesti ehkä osoittautui kyllä paremmaksikin tavaksi esittää data).

Interaktiivinen D3.js toteutus näytti yritysten tiedon käyttäjän viedessä hiiren halutun yrityksen päälle. (Vis 1)

Staattisessa kuvassa kaikki yritysten tiedot olivat esillä heti. (Vis 2)

Pylväsdiagrammivisualisoinnissa taas otin kuvankaappaukset kaikista yksittäisten yritysten tiedoista (Kone, Sampo, Nokian Renkaat, Orion ja Nokia) ja muutin toteutusta niin, että datan interaktiivisen uudelleen piirtämisen sijaan visualisointia hallitaan CSS+JavaScript -toiminnallisuuden avulla. IE:lle optimoitu toteutus toimii niin, että kun käyttäjä klikkaa haluamaansa yritystä, piilottaa JavaScript-koodi CSS:n avulla kaikki muut kuin käyttäjän valitseman yrityksen kuvat näkyvistä. Tämänkaltainen toteutus on siinä määrin yksinkertainen, että edes IE ei pysty sen implementoinnissa epäonnistumaan. (Vis 3 & Vis 4)

Interaktiivisessa pylväsdiagrammissa käyttäjän oli mahdollista osoittaa yksittäisiä pylväitä saadakseen lisätietoja. (Vis 3)

Internet Explorer -selaimelle toteutetussa versiossa yrityksen valinta oli tehty linkkien avulla, jotka mukautuvasti näyttivät ja piilottivat kuvia. (Vis 4)

Leipätekstiin interaktiiviset visualisoinnit upotettiin <iframe>:n avulla seuraavasti:

<!--[if (lt IE 9)&(!IEMobile)]>
<iframe src="http://svenska.yle.fi/dataviz/capitalgroup/juttu3/fallback/index.html?l=se" width="400" height="560" frameborder="0" scrolling="no" style="overflow:hidden;">Laddar...</iframe>
<![endif]-->

<!--[if gte IE 9]><!-->
<iframe src="http://svenska.yle.fi/dataviz/capitalgroup/juttu3/index.html?l=se" width="400" height="560" frameborder="0" scrolling="no" style="overflow:hidden;">Laddar...</iframe>
<!--[endif]-->

Koodissa käytetään IE:n tunnistamia conditional comments -lausekkeita, jotka mahdollistavat IE:lle erityisten koodipätkien kirjoittamisen. Kyseisessä koodissa IE 9:ää vanhemmille selaimille tai IE:n mobiiliselaimelle näytetään yksinkertaistettu "fallback" versio toteutuksesta.

Internet Explorer yhteensopivuuden toteuttaminen vei aikaani siitä kun olisin voinut viimeistellä visualisointeja paremmiksi ja selkeämmiksi, joka aiheutti etenkin pallovisualisoinnin (Vis 1) kohdalla, että en ollut lopputulokseen täysin tyytyväinen.

http://stefanvermaas.nl/wp-content/uploads/2012/08/internet_explorer_fail.jpeg

Suosittelen kaikille esimerkiksi Google Chrome, Mozilla Firefox tai Safari -selaimia, joita käyttäessänne teette minun ja monen muun web-sovelluksia kehittävän ihmisen elämän todella paljon helpommaksi.

Alkoholinmyyntitiedon visualisointia

Julkaisimme n. kuukausi sitten Eva Koskisen ja Radar:n kanssa jutun alkoholin myyntitiedoista. Ajattelin hieman valaista taustoja tarinan takaa, koska kyseessä oli lukijoita ja kuulijoita kiinnostanut datajournalistinen juttu, joka levisi myös muihin tiedostusvälineisiin.

Datan hankinta

Tilastojen ja datan hankkimisen ei useinkaan tarvitse poiketa luonteeltaan ns. normaalista tiedon hausta (kuten piirakkareseptien etsiminen) eikä alkoholinmyyntitilastojen etsiminen tehnyt tähän poikkeusta. Google on erinomainen työkalu ja hakulauseella "alkoholijuomien kulutus" löytää nopeasti Tilastokeskuksen sivuille, josta käy ilmi, että alkoholijuomien myyntitilastoa ylläpitää Terveyden ja hyvinvoinnin laitos (THL).

THL kerää erinäisiä terveyteen ja ihmisten hyvinvointiin liittyviä tilastoja, joihin kuuluvat mm. alkoholinmyyntitilastot. Tilastot pitävät sisällään kunnittaiset alkoholinmyyntimäärät litroittain juomatyyppikohtaisesti, puhtaana alkoholina sekä suhteutettuna asukasta kohden. Tilastot löytyvät THL:n sivuilta vuositasolla vuosittaisten raporttien yhteydestä (Valvivan sivut antavat ymmärtää, että tilastoja kerättäisiin myös kuukausitasolla).

Ainoa ongelma THL:n sivuilta saatavassa datassa oli, että se on .pdf-muodossa. PDF-muotoista dataa ei usein mielletä koneluettavaksi tai helposti automaattisesti käsiteltäväksi, mutta myös .pdf-dokumenttien käsittely on mahdollista. Mm. Acrobat Readerin Pro -versiosta löytyy toiminnallisuus, jonka avulla .pdf-muotoinen dokumentti on mahdollista muuntaa Excel-muotoiseksi, mutta saatavilla on myös ilmaisia työkaluja kuten esimerkiksi Cometdocs-palvelu, jota itse käytin. Vaikka muunnos ei ollutkaan täydellinen oli yksittäiset virheet helppo korjata käsin.

Myöhemmin ottaessani yhteyttä THL:ään sain myös selville, että THL ylläpitää Sotkanet-nimistä palvelua, josta on mahdollista hakea kaikkia THL:n tuottamia tilastoja monipuolisten rajaustyökalujen avulla ja datat ovat ladattavissa tietokoneluettavassa muodossa. Palvelu mahdollistaa myös suoraan yksinkertaiset datan visualisoinnit mm. karttojen muodossa. Tämänkaltaisten loistavien palveluiden markkinointiin voisi panostaa enemmänkin aikaa ja rahaa.

Kokeilut Google Fusion Tables -työkalulla

Google Fusion Tables on datan visualisointityökalu, joka on osa, nykyisin Google Drive nimellä, tunnettua palvelua (aiemmin Google Docs). Fusion Tablesiin on mahdollista ladata omia datataulukoita tai palvelusta on mahdollista hakea käyttöönsä muiden käyttäjien julkisia taulukoita. Fusion Tables mahdollistaa datan näyttämisen mm. kartta-, verkosto-, viiva-, piirakka- sekä pylväsvisualisulisoinnin muodossa. Kaikki komponentit ovat muutaman hiiren klikkauksen ulottuvissa.

Alkoholinmyyntitietodata oli kuntakohtaista, joten mielekästä oli kuvata data kunnittain Suomen kartalle. Fusion Tables:ssa kuntiin (ja yleensäkin paikkatietoon) perustuvan visualisoinnin toteuttaminen on helppoa, koska palvelusta on mahdollista hakea kuntanimiin perustuen paikkojen sijainnit. Sijainnin merkitään oletuksena ns. "täpillä" (marker), joille on dataan perustuen mahdollista esimerkiksi määrittää arvoa kuvaava väri.

Google Maps -komponentti, jota käytetään kartan piirtoon osaa kuitenkin tulkita myös kuntarajoja (maantieteellisiä alueita) kun ne syötetään KML-muodossa. Näin on mahdollista käyttää yksittäisten täppien sijaan kunnan pinta-alaa datan esittämiseen. Lopputulos on myös paljon miellyttävämmän näköinen visuaalisesti kuin käytettäessä täppiä. Toki tässä tapauksessa datan luonne ei myöskään tue täppien käyttöä, koska ilmiö ei tapahdu spatiaalisesti yhdessä pisteessä vaan data kuvaa suuremman pinta-alan käyttäytymisen keskiarvoa. Toisissa datoissa tietysti taas täpät ovat luontevia datan kuvaamiselle. (Kuva 1)

Google Fusion Tables:ssa hypoteesien erilaisten testaaminen on lähtökohtaisesti näppärää. (Kuva 1)

Google Fusion Tablesissa erilaisten hypoteesien kokeileminen on helppoa, koska mm. värivalintojen tekeminen onnistuu suoraan käyttöliittymäkomponenttien avulla. Tämä mahdollistaa isojenkin muutosten tekemisen nopeasti, joka esimerkiksi omassa toteutuksessa vaatii aina koodaustyötä. Fusion Tables:n ongelmia ovat, että tuotokset eivät erotu, koska ne näyttävät Google:n tuotteilta ja toisaalta, että datan joutuu luovuttamaan Google:lle, joka voi olla arkaluontoisten datojen kohdalla ongelma.

Goole Maps:n ja Google Fusion Tables:n ymmärtämä KML-muotoinen Suomen kuntarajat vuodelta 2011 sisältävä data on ladattavissa täältä.

Lopullinen toteutus HS:n kuntakoneella

Kuten olen tässä blogissa aikaisemminkin maininnut on Helsingin Sanomat ollut aktiivinen toimija suomalaisen datajournalismin saralla. Tähän toimintaan on kuulunut mm., että HS julkaisi toukokuussa toteuttamansa kuntakoneen avoimena lähdekoodina HS Next -blogissa. Kuntakonetta hyödynnettiin laajasti seuranneessa HS Open -tapahtumassa, jossa se näytti toimivuutensa erilaisten datojen esittämiseen.

Alkuperäinen HS:n toteutus kuntakoneesta oli tehty kuntaliitoksia silmällä pitäen, joten karttaa käyttääksemme jouduimme hieman muuntamaan sitä tarpeeseemme. Poistimme kartasta mahdollisuuden yhdistellä kuntia keskenään, mutta mahdollistimme samalla helpomman kunnan uudelleenvalitsemisen. Lisäksi teimme kartan kaksikielisenä sekä toteutimme siihen mahdollisuuden rajata piirron pelkkiin ruotsinkielisiin kuntiin. (Kuva 2)

Kartan värit perustuivat YLE:n uuteen ilmeeseen. Toteutus mahdollisti kartan näkökulman muokkauksen. (Kuva 2)

Toteutimme siis lopullisen ja julkaistun karta Helsingin Sanomien kuntakarttaan perustuen Google Fusion Tables toteutuksen sijaan, koska kuntakarttaan perustuva toteutus osoittautui visuaalisesti paremman näköiseksi ja lisäksi näimme, että omassa toteutuksessa pystyimme paremmin hallitsemaan sitä miten karttaa käytetään. Pyrkimys riippumattomuuteen ulkopuolisesta toimijasta ei sinällään ollut merkittävä tekijä päätöstä tehtäessä.

Jälkipyykki; mitä näimme, mitä opittiin

Radar teki keväällä useampia alkoholiin liittyviä juttuja radioon sekä nettiin ja siten tämä alkoholinmyyntikartta oli osa suurempaa juttujen kokonaisuutta. Lisäksi on huomioitavaa, että Radar:ssa päätuote on radio-ohjelma, jolle netti pyrkii tarjoamaan täydentävää sisältöä. Tässä tapauksessa nähtiin, että nettiin tehty uutinen keräsi hyvin paljon sivulatauksia ja että sisällöt tukivat hyvin toisiaan, koska radiossa pystyttiin keskittymään tiettyihin toimittajan valitsemiin näkökulmiin kun taas netissä pystyttiin tarjoamaan kohdennettua sisältöä kaikille siitä kiinnostuneille.

Saman alkoholinmyyntitiedon uutisointia nähtiin myös muilta suomalaisilta media-alan toimijoilta ja myös YLE Uutiset julkaisi oman uutisensa asiasta rikastettuna samalla kartalla, jota me olimme käyttäneet.

Risuja saimme lähinnä siitä, että kuntakartassa oli otettu huomioon vuoden 2013 kuntaliitokset, jotka eivät kuitenkaan olleet vielä varmistuneita. Esimerkiksi Siuntio oli liitetty Lohjaan ennenaikaisesesti, koska prosessi on vielä kesken. Pyrimme kuitenkin palvelemaan myös heitä, jotka olivat kokeneet itsensä väärin kohdelluiksi antamalla heille THL:n tarjoaman datan keskustelussa.

Yhteenvetona todettakoon, että kyseessä oli erittäin suosittuun aihealueeseen tehty datan karttavisualisointi, joka toi tehdylle jutulle huomattavaa lisäarvoa. Toteutus tuki päätuotetta eli radio-ohjelmaa ja toi myös sille lisäkuuntelijoita.