Näytetään tekstit, joissa on tunniste Raphaël. Näytä kaikki tekstit
Näytetään tekstit, joissa on tunniste Raphaël. Näytä kaikki tekstit

perjantai 28. kesäkuuta 2013

Kesäloma edessä, mitä takana?

Aloitin yhdessä Juha Rissasen, Juho Salmisen, Mika Pippurin ja Stina Tuomisen kanssa työt Yle:n PlusDesk-toimituksessa tammikuun 21. päivä kuluvaa vuotta. Tehtävämme PlusDeskissä on tehdä yhdessä muiden toimitusten kanssa verkonomaisia sisältöjä.

Näin heinäkuun kynnyksellä voidaan sanoa, että ensimmäinen rypistys on takana ja omalta osaltani edessä siintää kesäloma. Kolme viikkoa (toivottavasti) jotain aivan muuta.

Mitä sitten on takana? Kulunutta viittä kuukautta ja viikkoa voidaan katsoa monesta näkökulmasta, mutta eräs mittari jota seuraamme on miten paljon juttuja joiden tekemisessä olemme mukana on luettu. Seuraamme lukijamääriä mm. viikkotasolla missä tavoitteenamme on olla Yle Uutisten top3-luetuimman jutun joukossa. Tähän asti olemme onnistuneet tässä yksitoista kertaa.

Tässä nämä onnistumiset koottuna lukijamääräjärjestyksessä. Mukana on eri tyyppisiä juttuja ja juttutyyppejä sisältäen niin laskureita, karttoja, graafeja kuin myös upeita kuvituskuvia. Keräsin jutuista keskeisimmät metatiedot kuten julkaisuajan, kotiosasto, tekijät, lukijamäärät, käytetyt tekniikat sekä datalähteet. Olen merkinnyt kursiivilla PlusDeskin ulkopuoliset tekijät.

1. Laske uusi painoindeksisi täältä

2. Kuinka rikas olet verrattuna muihin eurooppalaisiin? Kokeile laskurilla

  • Linkki: http://yle.fi/uutiset/6672048
  • Kotiosasto: Talous
  • Julkaistu: Torstaina 6. kesäkuuta 2013 klo 6:25
  • Tekijät: Teemo Tebest, Johan Jaakkola, Juha Rissanen, Juho Salminen
  • Lukijamäärä: 166 548
  • Tekniikka: jQuery UI Slider
  • Data: Tilastokeskus, Eurostat

3. Mistä sinä säästäisit jos olisit ministeri? Kokeile laskurilla

  • Linkki: http://yle.fi/uutiset/6544401
  • Kotiosasto: Kotimaa
  • Julkaistu: Torstaina 21. maaliskuuta 2013 klo 6:28
  • Tekijät: Teemo Tebest, Juha Rissanen, Juho Salminen
  • Lukijamäärä: 107 619
  • Tekniikka: Ei erityistä teknologiaa.
  • Data: Valtiovarainministeriö

4. Täällä punkit aiheuttavat tauteja – katso alueesi tilanne

  • Linkki: http://yle.fi/uutiset/6598455
  • Kotiosasto: Kotimaa
  • Julkaistu: Keskiviikkona 15. toukokuuta 2013 klo 6:18
  • Tekijät: Teemo Tebest, Anne Pirskanen, Juha Rissanen, Juho Salminen
  • Lukijamäärä: 106 528
  • Tekniikka: Raphaël
  • Data: Terveyden ja hyvinvoinnin laitos

5. Pyöräilijä: Testaa osaatko liikennesäännöt

  • Linkki: http://yle.fi/uutiset/6688871
  • Kotiosasto: Liikenne
  • Julkaistu: Maanantaina 17. kesäkuuta 2013 klo 6:29
  • Tekijät: Teemo Tebest, Elina Jämsen, Juho Salminen, Juha Rissanen
  • Lukijamäärä: 87 519
  • Tekniikka: Google Form + kuvitus
  • Data: Liikenneturva

6. Katso paljonko ikäisilläsi sinkuilla on asuntolainaa

7. Kannattaako koulutus? Näin työntekijä pärjää maisterille

  • Linkki: http://yle.fi/uutiset/6696442
  • Kotiosasto: Kotimaa
  • Julkaistu: Maanantaina 24. kesäkuuta 2013 klo 6:13
  • Tekijät: Teemo Tebest, Hanna Hantula, Mika-Matti Taskinen, Stina Tuominen, Juho Salminen 
  • Lukijamäärä: 70 375
  • Tekniikka: Highcharts Line chart + kuvitus
  • Data: Tilastokeskus, ammattiliitot

8. Nouseeko kotiseudullesi jättimäisiä tuulimyllyjä? Katso kartalta

  • Linkki: http://yle.fi/uutiset/6590722
  • Kotiosasto: Ajankohtainen kakkonen
  • Julkaistu: Tiistaina 23. huhtikuuta 2013 klo 7:09
  • Tekijät: Teemo Tebest, Jari Hakkarainen, Pasi Toivonen, Mika Pippuri, Stina Tuominen
  • Lukijamäärä: 54 314
  • Tekniikka: Google Fusion Tables
  • Data: Suomen Tuulivoimayhdistys ry

9. "Jäin eläkkeelle parikymppisenä"

10. Katso, kuka on kuuma Twitterissä – #SuomiTop100 on täällä taas

  • Linkki: http://yle.fi/uutiset/6698234
  • Kotiosasto: Internet
  • Julkaistu: Tiistaina 25. kesäkuuta 2013 klo 6:27
  • Tekijät: Teemo Tebest, Antti Hirvonen, Juha Rissanen, Stina Tuominen
  • Lukijamäärä: 47 884
  • Tekniikka: Tablesorter, kuvitus
  • Data: Twitter, Toni Nummela, Hampus Brynolf

11. Tuoko ryntäys kaivoksen naapuriisi? Katso kartalta

  • Linkki: http://yle.fi/uutiset/6476988
  • Kotiosasto: Yritysvastuu
  • Tekijät: Teemo Tebest, Jaana Kanninen, Juha Rissanen, Juho Salminen
  • Julkaistu: Maanantaina 4. helmikuuta 2013 klo 10:17
  • Lukijamäärä: 33 506
  • Tekniikka: Google Fusion Tables
  • Data: Tukes
Nämä ovat siis juttuja joita PlusDesk on ollut tekemässä ja jotka ovat nousseet Yle Uutisten top3-luetuimmaksi jutuksi julkaisuviikollaan. Lukijamäärät ovat peräisin ComScore:sta ja ne on tarkastettu aamupäivällä 28.6.2013.

Ruutia jätkät, ruutia!

perjantai 24. toukokuuta 2013

Karttatoteutuksista ja koordinaatistoista

Olemme PlusDeskin ensimmäisten neljän kuukauden aikana toteuttaneet muiden muassa suuret määrät erilaisia karttavisualisointeja. (Kuva 1)

Olemme tehneet niin yksittäisiin pisteisiin perustuvia Google Maps -pohjaisia karttoja kuten:
kuin myös erilaisia aluisiin perustuvia Google Maps -karttoja kuten:

Kartat ovat oiva visualisointikeino kun halutaan kuvata datan spatiaalista merkitystä kuten tässä esimerkissä, jossa ilmiön voidaan keskittynyt rannikolle. (Kuva 1)
Toisinaan olemme myös piirtäneet kartalle yhtäaikaisesti yksittäisiä pisteitä ja alueita kuten Bostonin tapahtumat -jutun yhteydessä, jossa maratonin reitti piirrettiin yhtenäisenä viivana kun taas räjähdykset ja muut tapahtumapaikat yksittäisinä pisteinä.

Google Maps:n lisäksi olemme hyödyntäneet kartoissa OpenStreetMap-palvelua kuten esimerkiksi jutussa, jossa kerroimme mistä löytyy keskimäärin paras sää hiihtolomakaudella.

Mainittujen palveluiden lisäksi olemme toteuttaneet karttoja räätälöidyillä SVG-pohjaisilla ratkaisuilla kuten näissä esimerkeissä:
Räätälöidyissä toteutuksissa olemme hyödyntäneet Raphaël-nimistä JavaScript-kirjastoa, joka sopii hyvin tarpeisiimme, koska se toimii myös vanhemmilla Internet Explorer -selaimilla. Tavoitteemme kun on, että Yle Uutiset ja sen sisällöt toimivat mahdollisimman laajasti kaikilla laitteilla.

Interaktiivisten ja klikattavien karttojen lisäksi olemme julkaisset staattisia kuviin perustuvia karttoja kuten tässä euroviisupisteiden jakautumista maiden välillä kuvaavassa jutussa.

Se mitä työkalua ja ratkaisua kulloinkin hyödynnämme ohjaa ensisijaisesti se minkälaista dataa olemme visualisoimassa. Joskus toiset työkalut soveltuvat paremmin toisille datoille. Esimerkiksi käsiteltäessä suuria datamassoja on Google Maps usein toimiva työkalu.

Välillä eteen tulee tilanteita, jolloin meillä on olemassa tarvittava karttapohja (kuten sairaanhoitopiirien rajat) valmiina vain SVG-toteutusta varten, joka rajaa meitä käyttämästä Google Maps:n kaltaisia palveluita, koska ne perustuvat SVG:n käyttämien pikseleiden sijaan koordinaatistotietoon.



Julkaisimme viime maaliskuussa jutun koskien lakkautettuja kouluja Suomessa vuosina 2006–2012. Jutun taustalla on Tilastokeskukselta tilaamamme kouluaineisto, johon olimme pyytäneet mukaan koulujen paikkatiedot. Ajatuksenamme oli visualisoida lakkautettavat koulut kartalle käyttäen OpenStreetMap-palvelua. (Kuva 2)

Toteutuksesta oli mahdollista tarkastella lakkautettuja kouluja Suomen kartalta valitulla aikajaksolla ja oppilasmäärällä. (Kuva 2)
Saimme datan Excel-tiedostona, johon oli listattu kaikki lakkautetut koulut vuosittain yhdessä koordinaattitietojen kanssa. Ongelma oli, että koordinaattitiedot olivat kartastokoordinaattijärjestelmässä (KKJ), joka on erityisesti Suomeen kehitetty koordinaattijärjestelmä, jota edellä mainitut Google Maps ja OpenStreetmap-palvelut eivät tue.

KKJ jakaa Suomen neljään projektiokaistaan ja projektiokaistoilla on oma koordinaatistonsa. Projektiokaistojen tehtävä on käsittääkseni poistaa maan kaarevuudesta aiheutuvaa vääristymää. (Kuva 3)

KKJ:ssa Suomi on jaettu neljään projektiokaistaan. (Kuva 3)
KKJ-järjestelmän eri projektiokaistojen käyttäminen on siinä määrin monimutkaista etenkin rajakohdissa, että siitä on kehitetty yksinkertaistettu versio nimeltään yhtenäiskoordinaatistojärjestelmä (YKJ).

YKJ tunnetaan myös nimellä KKJ3, koska se vastaa kartastokoordinaattijärjestelmän projektiokaistaa kolme jatkettuna itään ja länteen niin, että se kattaa koko Suomen. YKJ-koordinaateille on ominaista, että kolmoskaistalle sijoittuviin koordinaatteihin ei lisätä alkuun projektiokaistan merkitsevää numeroa kolme.

YKJ-koordinaatit ovat siis muotoa:
  • p=6700000, i=3500000
tai lyhyemmin muotoa:
  • 6700000, 3500000.
Itäinen koordinaatti lasketaan metreinä keskimeridiaanille ja pohjoinen koordinaatti kertoo matkan päiväntasaajalta pohjoiseen.

Kuten sanottua ongelma KKJ- ja YKJ-koordinaatistoissa on, etteivät kartastopalvelut tue niitä. Esimerkiksi Google Maps tukee GPS:lle kehitettyä WGS84-koordinaatistojärjestelmää, ja tämän vuoksi meidän täytyi muuntaa koordinaattien järjestelmä.

Googlen avulla löysin Luonnontieteellisen keskusmuseon ylläpitämän palvelun nimeltä Luomus, joka mahdollistaa koordinaattijärjestelmien välisen muunnoksen. Palveluun on mahdollista syöttää muunnettavat YKJ:n mukaiset itä- ja pohjoiskoordinaatit, jonka jälkeen palvelu palauttaa muunnoksen tuloksen.

Esimerkiksi kysely http://www.luomus.fi/projects/coordinateservice/?orig_system=ykj&north=6982696&east=3541961 palauttaa vastauksen:

<CoordinateData>
<result>
<new_system>etrs89</new_system>
<north>62.94538003831</north>
<east>27.823170453332</east>
</result>
<orig_system>ykj</orig_system>
<version>2.0</version>
<disclaimer>
This is coordinate translation system provided by Finnish Museum of Natural History (FMNH). Copyright FMNH and National Land Survey of Finland. FMNH makes best effort to keep the data and conversions as accurate as possible.
</disclaimer>
</CoordinateData>


Vastauksen kohdista <north>62.94538003831</north> ja <east>27.823170453332</east> ovat luettavissa annettuja YKJ-koordinaatteja vastaavat WGS84-koordinaatiston mukaiset koordinaatit.

Muunnettavia koordinaattitietoja minulla oli 26 185 Excel-rivin edestä, joten rakensin Python-ohjelmointikielellä yksinkertaisen koodinpätkän, joka automatisoi tämän muunnostyön. Toteutus on saatavilla kirjoituksen lopusta. (Kuva 4)

Tekemäni koodi muunsi YKJ-koordinaatistossa olleet tasokoordinaatit WGS84-koordinaatissa oleviksi maantieellisiksi koordinaateiksi. (Kuva 4)
Mikä on kuitenkin myös luettavissa vastauksesta on kohta <new_system>etrs89</new_system>. Eli kohdejärjestelmä ei tässä siis olekaan WGS84 vaan ETRS89. Tästä seuraavaksi.



Käsiteltäessä karttatietoa koordinaatistojärjestelmät eivät ole ainoa huomioitava asia vaan koordinaatit voidaan eri järjestelmien lisäksi esittää myös eri formaateissa yhden järjestelmän sisällä. Yleisiä esitysformaatteja ovat ainakin tasokoordinaatit ja maantieteelliset koordinaatit. YKJ- ja KKJ-koordinaatit ilmoitetaan kokemuksieni mukaan yleisimmin tasokoordinaatteina kun taas Google Maps tukee maantieteellisiä koordinaatteja.

Ero tasokoordinaattien ja maantieteellisten koordinaattien välillä on esitystapa. Tasokoordinaatit kertovat matkan pohjoiseen ja itään kun maantieteelliset koordinaatit kertovat leveys- ja pituuskoordinaatit. Tasokoordinaatit ovat siis kokonaislukuja ja maantieteelliset koordinaatit asteita.

Koordinaatistoformaatteihin ja niiden muunnoksiin pääsin tutustumaan kun teimme äskettäin jutun painorajoitettavista silloista Suomessa. Saimme Liikennevirastolta tiedot 391:stä tulevaisuudessa uuden painorajoituksen saavasta sillasta ja mukana olivat siltojen paikkatiedot. Paikkatiedot olivat saamassamme Excel-tiedostossa ETRS89-koordinaatiston suomalaisen EUREF-FIN-nimisen projektion mukaisia. ETRS89-koordinaatit vastaavat käytännössä WGS84-koordinaatteja (ero on alle metrin).

Koordinaattitiedot olivat kuitenkin tasokoordinaatistoformaatissa, jotka eivät tietääkseni ole tuettuja Google Maps -työkalussa. Tässä tapauksessa minun ei kuitenkaan tarvinnut muuntaa koordinaattijärjestelmää toiseen vaan kuten edellä vaan vaihtaa vain koordinaattien esitystapa. Luomus.fi-palvelusta ei harmikseni löytynyt työkaluja formaattimuunnoksiin, mutta löysin ratkaisun Karttapaikka.fi-palvelusta Juho Salmisen avustuksella.

Karttapaikka.fi-palvelusta löytyvän Karttapaikka-nimisen työkalun avulla on mahdollista tehdä monipuolisesti erilaisia koordinaatteihin liittyviä muunnoksia. Palveluun voi syöttää koordinaatteja niin taso- kuin maantieteellisessä formaatissa, jonka jälkeen palvelu palauttaa tiedot kattavasti. Tarjolla ovat kaikki Suomessa yleisesti käytetyt koordinaatistojärjestelmät ja -formaatit.

Tein myös tässä tapauksessa samanlaisen yksinkertaisen koodinpätkän, jolla automatisoin formaattimuunnoksen tekemisen kaikille hallussani olleille koordinaateille. Tämäkin toteutus on saatavilla kirjoituksen lopusta. (Kuva 5)

Tekemäni koodi muunsi kaikki painorajoitettujen siltojen tasokoordinaatit maantieteellisiksi koordinaateiksi. (Kuva 5)
Itseasiassa ensimmäisessäkin esimerkissä lähdeaineistomme oli aluksi tasokoordinaatistoformaatissa. Eli Luomus.fi-palvelu teki itseasiassa muunnoksen niin koordinaattijärjestelmän kuin myös koordinaattiformaatin osalta.



Yhteenvetona voitaneen todeta, että paikkatieto ja sen esittäminen on melko moninaista, mutta kokemuksieni mukaan Suomessa paikkatietodata julkaistaan useimmin tasokoordinaatteina joko YKJ- tai KKJ-järjestelmässä, jotka siis ovat hankalia käytössä olevien karttapalveluiden kannalta.

2000-luvulla Suomessa on pyritty siirtymään ETRS89-järjestelmään, mutta esimerkiksi Tilastokeskuksen ruututietokanta on siirtynyt siihen vasta vuonna 2011. Suunta on kuitenkin kohti ETRS89:ää, joka vastaa siis melkein WGS84-järjestelmää. Eli ETRS89-koordinaatteja on mahdollista käyttää esimerkiksi Google Maps:ssä kunhan ne vain ovat maantieteellisessä formaatissa.



Tämän kirjoituksen myötä julkistan Yle Plus -GitHub-repositorion. Repositorion tarkoitus on toimia julkaisukanavana Yle Uutisten ja ainakin PlusDeskin tekemille avoimille lähdekoodille. (Kuva 6)

Tulemme käyttämään Yle Plus-repositoriota toteuttamiemme koodien julkaisemiseen avoimena lähdekoodina. (Kuva 6)
Ensimmäisinä työkaluina julkaisemme tässä kirjoituksessa mainittujen koordinaattimuunnosten lähdekoodit, jotka siis mahdollistavat YKJ-tasokoordinaattien muuntamisen WGS84-järjestelmän maantieteellisiksi koordinaateiksi sekä ETRS89-tasokoordinaattien muuntamisen maantieteellisiksi koordinaateiksi.

Lähdekoodit julkaistaan CC-BY-SA-lisenssillä, joka mahdollistaa koodien hyödyntämisen niin yksityisessä kuin kaupallisessakin käytössä. Ainoat rajoitteet ovat, että käytettäessä alkuperäinen lähde (Yle Uutiset) on mainittava ja että kaikki mahdolliset jatkototeutukset on jaettava samalla lisenssillä.

maanantai 10. joulukuuta 2012

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.

maanantai 5. marraskuuta 2012

Näin tehtiin: "Tässä ovat Suomen parhaat terveyskeskukset"

Viime viikolla Yle:llä pitämästäni datajournalismi koulutuksesta innostuneena Sara Rigatelli Yle Uutisista otti minuun yhteyttä. Hän oli tekemässä juttua suomalaisen terveydenhuollon toimivuudesta ja ajatteli, että olisi mahdollisesti kiinnostavaa kuvata ilmiötä datajournalismin keinoin.

Ajatuksena Saralla oli, josko karttavisualisoinnin avulla voisi kuvata eri sairaanhoitopiirien välisiä eroja keskimääräisen jonotusajan ja toisaalta yleisesti lääkärille pääsemisen osalta. Alunperin ajattelimme, että olisi etenkin toimituksellisesti hyödyllistä nähdä data kartalla, koska tämä helpottaisi mm. alueellisten trendien hahmottamista. Keskustelimme toki, että karttaa olisi mahdollista käyttää myös uutisen yhteydessä mikäli lopputulos olisi selkeä ja lukijalle hyödyllinen.

Tarvitsemamme datan keräsimme THL:n ylläpitämästä Sampo-palvelusta. Palvelusta on mahdollista selata erilaisia terveydenhuoltoon liittyviä tilastoja eri muuttujiin perustuen. Otin tarvittavan datan Sampo-palvelusta talteen Excel-taulukkoon jatkokäsiteltäväksi yksinkertaisesti maalaamalla ja copy-pasteamalla. Itseasiassa käytin LibreOffice:n Spreadsheet -työkalua, jonka olen kokenut olevan hieman kätevämpi tämänkaltaisessa datankäsittelyssä (Kuva 1). Esimerkiksi .csv-tiedostojen avaaminen ja käsittely on ollut mielekkäämpää LibreOffice:ssa kuin Excel:ssä.

Taulukko on hyvä formaatti datan käsittelyyn, koska sen käyttäminen onnistuu niin toimittajalta kuin koneeltakin. (Kuva 1)
Seuraavaksi latasin tallentamani .csv-tiedoston Google Fusion Tables -työkaluun. Ajatuksenani oli, että saisin nopeasti tehtyä demon siitä minkälaiseksi kartta muodostuisi eri muuttujilla. Ongelma oli kuitenkin, ettei minulla ollut käytössäni sairaanhoitopiirien rajoja sisältävää karttapohjaa. Pystyin kuitenkin tekemään demon hyödyntämällä käytössäni ollutta kuntakarttapohjaa yhdistämällä siihen tiedot siitä mihin sairaanhoitopiiriin kukin kunta kuuluu. Sairaanhoitopiirien jäsenkunnat löysin ladattavassa muodossa Kunnat.net -palvelusta.

Yhdistettyäni ensinnäkin käytössäni olleen kuntakarttapohjan sairaanhoitopiiritiedon ja toiseksi keräämämme terveydenhuoltodatan kanssa sainkin demon toteutettua (Kuva 2). Ongelma tässä toteutuksessa – lopulliseen versioon verrattuna – oli kuitenkin, että kartta pohjautui kuntarajoihin eikä sairaanhoitopiirien rajoihin. Tämä aiheutti ongelman, ettei kahta sairaanhoitopiiriä voinut erottaa visuaalisesti toisistaan mikäli ne asettuivat samaan arvoalueeseen ja saivat siten saman värityksen. Esimerkiksi kuvassa 2 nähtävästä esimerkkitoteutuksesta on mahdotonta erottaa Pohjois-Pohjanmaan ja Lapin sairaanhoitopiirien rajaa.

Sairaanhoitopiirit eivät erotu kartassa jos kahden vierekkäisen sairaanhoitopiirin väri on sama. (Kuva 2)
Koimme kuitenkin esimerkkitoteutuksesta, että kartasta muodostui mielenkiintoinen ja tietoja oli hauskaa selata sen kautta. Lähdinkin seuraavaksi toteuttamaan karttaa aikaisemminkin käyttämälläni Raphaël-karttapohjalla. Raphaël on JavaScript-kirjasto, joka mahdollistaa mm. räätälöityjen karttavisualisointien toteuttamisen. Alkuperäinen ongelma kuitenkin säilyi sillä edelleenkään minulla ei ollut käytössäni kuin Suomen kuntakarttapohja ja edellenkään vierekkäisiä sairaanhoitopiirejä ei ollut mahdollista erottaa toisistaan jos ne sattuivat ominaisuuksiensa kautta saamaan saman värityksen. (Kuva 3)

Myös räätälöidyssä JavaScript-toteutuksessa ilmenee sama ongelma käytettäessä kuntapohjaista karttaa. Vierekkäisten sairaanhoitopiirien rajaa ei ole mahdollista erottaa jos sairaanhoitopiirit kuvataan samalla värillä. (Kuva 3)
En myöskään keksinyt mitään (helppoa) tapaa, jolla olisin onnistunut kummassakaan toteutustavassa (Google Fusion Tables tai Raphaël) korostamaan sairaanhoitopiirien rajoja, jotta ne olisivat erottuneet kuntarajoista, joten päädyin etsimään uutta karttapohjaa, joka perustuisi nimenomaan sairaanhoitopiireihin.

Onnekseni löysinkin – edelleen Kunnat.net -palvelusta – kartan, jossa sairaanhoitopiirien rajat oli kuvattu. Haaste oli, että karttadata oli julkaistu .pdf-muodossa ja minulla ei ollut aikaisempaa kokemusta siitä miten .pdf-muotoista dataa olisi mahdollista visualisoida ja hyödyntää etenkään JavaScript-pohjaisessa toteuksessa. Päätin kuitenkin lähteä kokeilemaan miten tämä onnistuisi. Tiesin, että tavoitteena minulla olisi saada karttadata .svg-muotoon, koska tämä oli käyttämäni Raphaël-kirjaston tukema tiedostomuoto.

Päädyin Googlettamaan asiaa hakusanoilla ".pdf to .svg" ja yllätyin, että kyse olikin suhteellisen triviaalista operaatiosta. Tiesin kyllä etukäteen, että .pdf on vektorigrafiikkaan perustuva formaatti, mutta jostain syystä ajattelin, ettei yksittäisten elementtien poimiminen .pdf:stä olisi niin helppoa. Toteutin muunnoksen lopulta Inkscape-ohjelmalla Wikipediasta löytyviä ohjeita mukaillen. Muunnoksessa kyse on käytännössä 1) tiedoston avaamisesta ohjelmassa 2) halutun sivun valitsemisesta ja 3) tiedon uudelleentallentamisesta .svg-muodossa.

Lopulliseen visualisointiin toteutimme mahdollisuuden valita karttaan tarkastelun alle kaksi eri tilastoa:
  1. Missä lääkärille pääsee nopeimmin?
  2. Missä lääkäriajan saa helpoimmin?
Lisäksi merkitsimme karttaan sinisillä palluroilla tilastojen mukaan parhaat terveyskeskukset. (Vis 1)

Kartta sisällytettiin uutisen yhteyteen ja siitä oli mahdollisista tarkastella sairaanhoitopiirejä haluamansa muuttujan perusteella. (Vis 1)
Toteutin projektin pääasiassa viikonlopun (26.10. - 28.10.) aikana, mutta maanantaina ja tiistaina jouduin tekemään vielä muutamia pieniä viilauksia esimerkiksi, jotta saimme kartan toimimaan Internet Explorer -selaimessa. Lisäksi halusimme alunperin toteuttaa kartan "inline-koodina", joka upotettaisiin suoraan uutissivuston leipätekstin sekaan, mutta jouduimme lopulta tyytymään iframe-toteutukseen. Inline-koodin etu iframe-toteutukseen nähden olisi ollut laajempi yhteensopivuus eri laitteiden kanssa sekä parempi mobiilikäytettävyys. Edellä mainituissa viilauksissa sain apua Yle:n Web-suunnittelija Oskari Blombergilta, josta suuri kiitos.

Lopullinen uutinen julkaistiin sunnuntaina 4.11. maanantaina 5.11. ja on luettavissa Yle Uutisten verkkosivuilta.

perjantai 28. syyskuuta 2012

Naistutka 2000 – minne naiset menneet on?

Viikolla eksyin keskusteluun, jossa yhtenä argumenttina esiin nousi, että datajournalismista tulisi tehdä kansantajuista ja suosittua. Ratkaisumalliksi ongelmaan ehdotimme, että datajournalismin tulisi käsitellä seksiä tavalla tai toisella, koska se tunnetusti myy.

Ihan siihen ei nyt vielä päästä, mutta tässä jokaiselle opiskelupaikkakuntaansa pohtivalle nuorelle miehelle (sexism intended) työkalu, joka tekee valinnasta helppoa. (Kuva 1)

Antakaa minun esitellä....

Naistutka 2000
  – minne naiset menneet on?

Naistutka 2000 kertoo, että naisia on etelän suurissa keskuksissa. Kaupungeissa on kuitenkin eroja. (Kuva 1)
Yleisestihän meillä Suomessa on ihan hyvä tilanne, koska naisia on yli 100 000 miehiä enemmän. Tämä johtuu osittain naisten pidemmästä odotetusta eliniästä. Naisilla 0-vuotiaan ennakollinen elinajanodote on tällä hetkellä 83,2 ja miehillä 76,7 vuotta. (Lähde)

Päivitys 29.9.2012

Sottungassa tilanne on optimaalisin sillä sadan ihmisen kunnassa on tasan 50 naista ja 50 miestä. Kyseessä on muuten myös asukasluvultaan Suomen pienin kunta. Ilmeisesti pienessä kunnassa asiat on helpompi järjestää kuntoon asian osalta. Sottungan alapuolelle sijoittuu Jalasjärvi ja yläpuolelle Siilinjärvi missä naisia siis on juuri ja juuri enemmän kuin miehiä.

Kommenteissa on toivottu siviilisääty sekä ikäjakauman tietojen lisäämistä visualisointiin. Jääköön nähtäväksi jos nämäkin tiedot kävelisivät vastaan jossain vaiheessa. Toki olisi hieman ikävää huomata parikymppisenä, että pääosa naisvaltaisuudesta koostuu oman ikähaitarin ulkopuoltelta tai pelkästään jo parisuhteessa elävistä vastakkaisen (tai saman) sukupuolen ihmisistä.

Data visualisointiin löytyi väestörekisterikeskukselta ja tiedot on päivitetty 31.8. Käyttämäni .csv-muotoinen data, jossa on laskettu suhdeluvut, on ladattavissa Dropbox-palvelusta.

lauantai 22. syyskuuta 2012

Bensan hinta, no sehän kiinnostaa meitä ~kaikkia!

Heräsin aamulla aikaisin tukkoisuuteen – hieman nuhaa tuntuu olevan liikkeella – ja aloin selailemaan Amppareita puhelimellani. Silmiini osui Taloussanomien artikkeli: "Suomessako kallis bensa – näin kurjaa on muualla". Sinänsä räväkästi otsikoitu artikkeli ja ihan kiinnostava avata, koska yleinen näkemyshän on, että etenkin me Suomessa maksamme polttoaineesta todella paljon. Lisäksi itsellänikin on auto ja joskus jopa tykkään tankata sitä.

Sinällään en juttua jaksanut kovin tarkkaan lukea, mutta mielenkiintoni kohdistui artikkelin yhteydessä julkaistuun taulukkodataan, jossa esitetään jutussa hyödynnetyt EU-maiden keskimääräiset polttoaineiden hinnat ajankohdalta 16.7. ja 17.9. sekä E95-polttoaineen kuin myös dieselin osalta. (Kuva 1)

Taloussanomien julkaisema taulukkodata on desimaaleineen vaikeasti tulkittava. (Kuva 1)
Ajattelin, että tämähän on hienoa kuten se onkin. Ongelma vain on, että julkaistu taulukkomuotoinen data on todella epäinformatiivinen ja vaikealukuinen. Huomasin kerta toisensa jälkeen tavaavani mitä eri sarakkeet oikeastaan tarkoittavatkaan ja mitkä luvut ovat keskenään vertailukelpoisia. Esimerkiksi taulukon tapa esittää data ei-kronologisessa järjestyksessä on todella aivojani niksauttava. Jokainen ensisilmäys taulukkoon näyttäytyy minulle, että hinnat olisivat järjestäen tippuneet valitulla kahden kuukauden tarkkailujaksolla. Toiseksi se, että polttoainetyyppien vertailuarvot eivät ole taulukossa vierekkäin vaikeuttaa tulkitsemista.

Nämä ovat helposti korjattavissa olevia asioita. Kyseisen taulukossa on kuitenkin myös muita ongelmia. Toteutustapa ei esimerkiksi mahdollista sarakkeiden uudelleenjärjestelyä, jotta lukijan olisi mahdollista helposti tarkistaa missä muutos on esimerkiksi E95-polttoaineen hinnassa on ollut pienintä ja suurinta. Dataa ei ole myöskään sivustolta mahdollistaa tallentaa suoraan Excel-muodossa omalle koneelle missä tarkempi aineiston tutkiminen olisi mahdollista. Tavallisen käyttäjän työkalupakkiin ei kuulu sisällön maalaaminen www-sivulta ja sen kopioiminen käytettävissä olevaan taulukkolaskentaohjelmistoon.

Ylipäänsä taulukkomuotoisen datan lukeminen on vaikeaa. Numerot alkavat hyppiä silmille ja eikä datan julkaiseminen mielestäni ole tässä muodossa tarkoituksenmukaista. On erinomaista toimintaa Taloussanomilta jakaa sivujensa kautta jutussa hyödynnetty raakadata, mutta kyseinen data olisi ollut mielekkäämpää julkaista puettuna interaktiiviseksi visualisoinniksi. Mieleen tulee kaksi hyvin ilmeistä tapaa visualisoida kyseessä oleva data.

Ensinnäkin data voitaisiin esittää pylväsdiagrammina, joka järjestää maat annetun attribuutin mukaan suurimmasta pieninpään. Tämän kaltainen diagrammi havainnoi lukijalle helpolla tavalla datan olemuksen. Missä polttoaine on halvinta, missä kalleinta ja mikä on todellinen absoluuttinen ero näiden välillä. Taulukkomuotoisesta datasta suurimman ja toiseksi suurimman arvon etsiminen on vielä helppoa, mutta sen hahmottaminen miten nämä arvot suhteutuvat muihin data-alkioihin onkin vaikeampaa.

Toiseksi, koska kyse on spatiaalisesta, valtioita koskevasta, datasta olisi arvot mielenkiintoista nähdä Euroopan kartalle piirrettynä. Visualisointi voisi paljastaa esimerkiksi trendejä Etelä- ja Pohjois-Euroopan hintojen välillä. Nykyinen taulukkoesitystapa ei tämänkaltaista analyysiä tue, koska keskivertokansalainen – ja tällä tarkoitan itseäni – ei osaa edes absoluuttisesti sijoittaa datassa olevia maita Eurooppaan.

Mitä asialle voidaan tehdä. Kello on nyt 11:00. Aloitan työt....

...11:34 pylväsdiagrammi on valmis (Kuva 2).

Visualisoinnista voimme helposti lukea miten polttoaineen hinta Suomessa on Euroopan kärkiluokkaa, mutta hinnan kasvu on ollut muuta Eurooppa hitaampaa. (Kuva 2)
Kuvassa 2 olevasta diagrammista ja sen takaa avautuvasta interaktiivisesta visualisoinnista on helppo nähdä missä Euroopan maassa polttoaineen hinta on korkein ja millä tavalla tilanne on muuttunut valitun tarkastelujakson aikana. Interaktiivisesta visualisoinnista on mahdollista valita tarkasteluun haluttu attribuutti (E95-polttoaineen hinta tai dieselin hinta valituilla tarkastelupisteillä sekä muutos näille molemmille).

Mielestäni tämänkaltainen visualisointi olisi antanut juttuun aivan erilaista lisäarvoa nykyiseen taulukkoesitykseen verrattuna. Lisäksi se, että datalla on nyt mahdollista "leikkiä" pidentää lukijan vierailuaikaa sivustolla, joka taas näyttäytyy hyvältä tuloksellisesta näkökulmasta. Näen hyvin selkeästi, että tämänkaltaisten interaktiivisten datan esitystapojen on pakko tulla osaksi verkkomediaa ja ne näyttäytyvät tulevaisuudessa todellisina kilpailuvaltteina suhteessa kilpailijoihin.

Päivitetty: 22. syyskuuta 19:30

Kuvassa 3 näemme saman polttoaineenhintadatan piirrettynä Euroopan kartalle. Kuten nähdään on lopputulos visuaalisesti hyvin miellyttävä ja pelinomainen. Etenkin naapurivaltioiden ja muutenkin valtioiden lähialueiden eroja on kartasta helppo vertailla. Esimerkiksi on helppo nähdä, että Ruotsissa polttoaine on meitä kalliimpaa, mutta meillä hinnan nousu taas on ollut suurempaa.

Kartasta nähdään mm. kuinka Baltianmaissa polttoaine on Euroopan tasolla huokeaa. (Kuva 3)
Karttavisualisoinnin tekemiseen meni muutama tunti, koska minulla ei ollut valmista Euroopan karttapohjaa vaan jouduin tekemään sellaisen mallista.

Nyt sitten vain odottamaan Taloussanomien yhteydenottoa ja isoja rahoja.</sarkasmi>

Ps. Kartta näyttää Euroopan bensahinnat uudella tavalla