Yle Uutisten Plus-toteutuksien kehitys

PlusDesk on Yle Uutisissa toimiva tiimi, joka toteuttaa Yle Uutisten verkkosivuille niin sanottuja Plus-toteutuksia. Plus-toteutukset ovat uutisjuttuja, joita ei ole mahdollista toteuttaa julkaisujärjestelmässä. Toisinsanoen esimerkiksi interaktiiviset tai datajournalistiset toteutukset – kun ne vaativat jonkinlaista erityistä verkonkerrontaa – tehdään yhteistyössä PlusDeskin kanssa. Konkreettisesti tällaisia toteutuksia ovat olleet muun muassa:

• Maaseutu ei autioitunutkaan – kuusi tarinaa kylien uudesta elämästä
• Paljonko lainaa, montako neliötä? Asuntokone kertoo, missä sinulla on varaa asua
• Riittääkö nettisi nopeus? – Katso miten mobiiliyhteys toimii kunnassasi

PlusDesk on toiminut vuoden 2013 alusta eli nyt kolmen ja puolen vuoden ajan. Tänä aikana Plus-toteutuksien toteuttaminen ja julkaiseminen on kehittynyt monilla tavoin. Aloitimme julkaisemisen Ylen verkkolevyn nurkalta, josta on sittemmin luovuttu. Nyt olemme siirtymässä käyttämään AWS-palvelua ja projektikohtaisia Git-repositorioita.

Toteutusten kehitys

Tällä hetkellä PlusDeskissä työskentelee neljä kehitystyötä tekevää henkilöä. Käytössämme on niin Linux- kuin Mac-koneita. Meillä on kaikilla henkilökohtaiset kehitysympäristöt, jotka pyörivät lokaalisti. Kehitysympäristöjen ylläpito ja päivittäminen on pääasiassa käyttäjän vastuulla.

Kehitystyön kannalta olennaista on, että toteutuksia voidaan kehittää ja testata omilla laitteilla mahdollisimman pitkälle ja mahdollisimman vaivattomasti. Tämä helpottaa toteutusten julkaisemista, kun jo kehitysvaiheessa toteutukset testataan mahdollisimman autenttisessa ympäristössä. Eli rautalangasta väännettynä, kehittäjillä on omalla koneellaan kopio Yle Uutisten verkkosivuista, jossa he pystyvät testaamaan kehittämäänsä toteutusta ja näkemään miten toteutus toimii suhteessa muuhun sivustoon. (Kuva 1)

Lokaalisti toimiva kehitysympäristö helpottaa toteutusten testaamista. Kehitysympäristö on kuvankaappaus Yle Uutisten artikkelisivusta. (Kuva 1)

Toteutukset upotetaan suoraan Yle Uutisten sivupohjaan, joten kehittäjän on halutessaan mahdollista rikkoa (muuttaa) koko sivuston toimintaa. Pyrimme hallitsemaan tätä mahdollisuutta rajaamalla kaikki toteutukset koskemaan vain niitä elementtejä, jotka liittyvät itse toteutukseen. Tämä rajaaminen estää, etteivät koodit vaikuta mihinkään toteutuksen ulkopuolisiin elementteihin. Se, että toteutukset asetetaan suoraan sivupohjaan (esimerkiksi iFrame-upotuksen sijaan) kuitenkin mahdollistaa sen, että kehittäjän on helppoa manipuloida myös sivupohjaa niin halutessaan.

Toteutukset noudattavat tiedosto- ja kansiorakenteeltaan aina samaa muotoa, joka on kuvattu alla.

js/
data/
css/
img/
index.html

Näiden lisäksi projekteissa voi soveltuvasti olla mukana esimerkiksi audio, video tai script -nimisiä kansioita. Eri osa-alueet on siis jaettu omiin kansioihinsa. CSS-tyylitiedostot löytyvät omasta css/-kansiosta. Javascript-tiedostot eli toimintalogiikka löytyy js/-kansiosta ja niin edelleen. Käytämme toteutuksissa aina tätä samaa rakennetta, joka helpottaa projektien hallinnointia jälkikäteen ja eri kehittäjien kesken.

Koodauksessa pyrimme käyttämään apuna hyväksi havaittuja ja luotettuja kirjastoja kuten D3.js, jQuery ja Highcharts. Aina tarpeen mukaan käytämme projekteissa myös uusia kirjastoja, mutta näiden käytössä olemme tarkkoja, että ne toimivat varmasti kaikilla laitteilla. Soveltuvasti käytössämme on myös Three.js:n, Reactin ja Angular.js:n kaltaisia kirjastoja. Kirjastot tarjoillaan projekteille joko staattisina tiedostoina tai Node-moduuleina.

Javascriptissä käytämme niin ES5:sta kuin ES6:sta. CSS:ssä meillä on käytössä niin LESS kuin SASS. Nämä kehittäjästä ja projektista riippuen.

Yksinkertaiset projektit pyrimme pitämään mahdollisimman yksinkertaisina (KISS).

Alusta asti olemme käyttäneet Git-versionhallintaa. Versionhallinta mahdollistaa muun muassa koodien jakamisen kehittäjien kesken, mutta myös toteutusten versioinnin. Tähän päivään asti meillä on ollut jokaisen vuoden projekteja varten yksi repositorio, mutta nyt olemme siirtymässä käyttämään projektikohtaisia repositorioita. Projektikohtaiset repositoriot mahdollistavat ketterämmän versionhallinnan hyödyntämisen. Jatkossa nimeämme repositoriot seuraavasti:

"vvvv-kk-projektin_nimi"

Eli esimerkiksi 2016-06-asuntokone. Aikaisemmin kansiorakenne oli muotoa vvvv/kk-projektin_nimi. Meillä on komento, joka luo projektin perustamisen yhteydessä uuden repositorion (myös remoten).

Testaus

Testaamme toteutuksiamme vaihtelevasti, mutta etenkin uudet teknologiat isoimmat projektimme testaamme kattavasti eri laitteilla ja eri ympäristöissä. Tämä tarkoittaa, että kokeilemme toteutuksia puhelimilla, tableteilla, Mac- ja Windows-koneilla sekä eri selaimilla. Meillä on erikseen testaamiseen hankittuja laitteita.

Testaamiseen hyödynnämme Google Chrome DevTools:a, Xcode Simulator:a ja Ghostlab-ohjelmistoa.

Pyrimme siihen, että kaikki toteutuksemme toimivat teknisesti kaikilla nykyisillä laitteilla ja ympäristöillä.

Teemme myös käyttäjätestejä mahdollisuuksien mukaan.

Julkaistavan version buildaaminen

Olemme siirtymässä ja pääosin jo siirtyneet projektien "buildaamiseen". Buildaaminen tarkoittaa, että teemme Plus-toteutuksien koodeista erillisen julkaistavan version. Julkaistavat versiot asetetaan projekteissa public/-nimiseen kansioon, jonka alta löytyy käytännössä sama kansiorakenne kuin yllä kuvatulla kehityspuolella. Public-kansiossa asuvat vain tiedostot joita julkaistava versio tarvitsee.

Käytössämme on muutamia rinnakkaisia buildaustyökaluja, mutta useimmat meistä käyttävät työkalua nimeltä Gulp (olisi mahdollista käyttää myös Grunt:a. Olemme integroineet Gulp:n Sublime Gulp:lla Sublime Text -editoriin, jota käytämme koodin kirjoittamiseen (Kuva 2).

Gulp tarkkailee muutoksia tiedoissa ja suorittaa buildin. (Kuva 2)

HTML, CSS ja JS tiedostoille Gulp suorittaa omat tehtävänsä. Javascript-tiedostojen buildaus tekee seuraavat toiminnot (Suluissa ovat käytettyjen Node-moduulien nimet):

• Lint (gulp-jshint)
• Browserify (gulp-browserify)
• Uglify (gulp-uglify)
• Sourcemaps (gulp-sourcemaps)
• Livereload (gulp-livereload)

Lint tarkistaa koodin syntaksia, Browserify tekee koodeista selaimessa toimivia, Uglify minifoi koodin, Sourcemaps mahdollistaa minifoidun koodin palauttamisen, Livereload kertoo selaimelle tiedostojen muuttuneen.

CSS-tiedostoille buildi tekee toiminnot:

• Less (gulp-less)
• Cleancss (gulp-clean-css)
• Sourcemaps (gulp-sourcemaps)
• Livereload (gulp-livereload)

Less muuntaa Less-syntaksin selaimen ymmärtämään CSS-muotoon, Cleancss minifoi koodin, Sourcemaps mahdollistaa minifoidun koodin palauttamisen, Livereload kertoo selaimelle tiedostojen muuttuneen.

HTML-tiedostoille ajetaan:

• htmlmin (gulp-htmlmin)
• Livereload (gulp-livereload)

Htmlmin minifoi koodin, Livereload kertoo selaimelle tiedostojen muuttuneen.

Gulp rakentaa buildin public/-kansioon, jonka sisältö siirretään julkaisua varten julkisen verkko-osoitteen taakse. Tulevaisuudessa tämä julkinen paikka on AWS:ssa. AWS on pilvipalvelu, jonka kautta voidaan jakaa helposti ja tehokkaasti staattisia tiedostoja. Aikaisemmin olemme käyttäneet Ylen omia verkkolevyjä minne tiedostot on siirretty käsin. AWS:n myötä tämä tiedostojen siirtäminen automatisoituu. Tässä suhteessa yhtenäistämme käytäntöjä Ylen sisäisesti.

Toteutuksen siirtäminen julkaisujärjestelmään

Julkaisujärjestelmämme on nimeltään Escenic. Esceniciä käytetään Yle Uutisten sisällön luomiseen ja tallentamiseen. Escenicistä tiedot haetaan rajapinnan (Yle API) avulla yle.fi/uutiset-sivustolle. Plus-toteutuksien osalta Esceniciin luodaan erillinen sisältötyyppi nimeltä "Ulkoinen sisältö". Ulkoiselle sisällölle määritellään kaikki resurssit, joita toteutus tarvitsee eli tämä tarkoittaa HTML, CSS ja JS-tiedostoja. (Kuva 3)

Asetamme julkaisujärjestelmäämme projektin tarvitsemat resurssit. Tässä esimerkiksi Asuntokoneen ulkoinen sisältö. CSS ja JS resursseja voi tarvittaessa olla useita. (Kuva 3)

Ulkoinen sisältö voidaan sitten liittää uutisartikkelissa mihin tahansa haluttuun paikkaan, jolloin HTML-sisältö liitetään haluttuun kohtaan. CSS- ja JS-tiedostot menevät niille varattuun paikkaan sivupohjassa. Aikaisemmin ulkoiset sisällöt oli mahdollista sijoittaa vain jutun alkuun tai loppuun.

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.

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

Hjälp Calle!

Viime perjantaina tein yhteistyössä Svenska YLE uutisten:n kanssa joukkoistus/verkkokysely -kokeilun, jonka tarkoituksena oli kerätä tietoa kansalaisilta siitä minkälaista linjaa uuden puolustusministerimme Carl Haglund:n tulisi politiikassaan ajaa.

Lomakkeen toteutus

Toteutimme kyselyn Google Form -työkalulla, joka löytyy yhtenä komponenttina Google Drive -palvelusta. Google Form:lla on mahdollista helposti ja nopeasti tuottaa yksinkertaisia kyselykaavakkeita, joissa on erilaisia komponentteja. Esimerkiksi valintalaatikko, vapaatekstikenttä, pudotusvalikko ja muut tavalliset lomakkeiden komponentit ovat käytettävissä. Monimutkaisempia ehdollisia kyselylomakkeita, jotka mukautuvat käyttäjän valintojen mukaan, ei työkalulla kuitenkaan ymmärrykseni mukaan ole mahdollista toteuttaa.

Kyselymme sisälsi viisi toimittajan valitsemaa kysymystä, joissa kussakin oli kaksi vastausvaihtoehtoa, joten Google Form toimi tarkoitukseemme hyvin (Kuva 1). Myöskin käytettävissä ollut aika ja resurssit puolsivat Google Form:n kaltaisen valmiin työkalun käyttämistä. Käytännössä koko juttu toteutettiin tekniseltä osuudeltaan vajaassa tunnissa.

Google Form on usein riittävän monipuolinen työkalu kyselylomakkeiden toteuttamiseen. (Kuva 1)

Laajempana tarkoituksenamme oli myös kokeilla tämänkaltaisen journalismin toimivuutta. Erilaiset joukkoistusprojektit ovat ottaneet yhä suurempaa roolia eri mediataloissa ja ne tuntuvat myös kiinnostavan ihmisiä. Joukkoistamisen voima piilee siinä, että onnistuessaan ne sitouttavat ihmisiä, joka vaikuttaa positiivisesti sisältöjen kulutukseen.

Datan visualisoinnit

Google Form toimii periaatteessa Google Spreadsheet -työkalun (taulukkolaskentaohjelma) päällä, joten vastausdatan visualisoinnissa voidaan hyödyntää samoja visualisointikomponentteja, jotka ovat käytössä myös tehtäessä normaalia taulukkolaskentaa. Vaihtoehdoista löytyy siis mm. piirakka-, viiva- ja pylväsdiagrammit, joihin data syötetään taulukkolaskentaohjelmistoista tutulla tavalla määrittelemällä solut, joista data on saatavilla.

Google Form kerää datan taulukkoon tekstimuotoisena, joten jotta datan syöttäminen visualisointikomponentteihin onnistuu tulee kerätty data muuntaa numeeriseen muotoon. Tämä on suhteellisen helppoa, koska käytössä ovat tutut taulukkolaskentafunktiot, joten seuraavankaltaisella käskyllä kerätty data on mahdollista koostaa lukuarvoiksi:

=COUNTIF(B2:B2592, "Gör en gir åt höger")

Käsky laskee B-sarakkeesta löytyvien "Gör en gir åt höger" -vastausten lukumäärän. Vastaavalla tavalla kyseinen kaava voidaan kirjoittaa myös toiselle vastausvaihtoehdolle, jolloin näihin perustuen on esimerkiksi mahdollista piirtää piirakkadiagrammi (Kuva 2). Kaikki yksittäisten kysymysten tulokset ovat nähtävissä alkuperäisestä artikkelista.

Google Form:n keräämä data on mahdollista visualisoida ja jakaa kuvana tai interaktiisena toteutuksena. (Kuva 2)

Kysely keräsi hyvin vastauksia ja maanantaina kun kysely oli ollut avoinna perjantaista viikonlopun yli oli vastauksia kertynyt n. 500kpl:tta (lopulta 594 vastausta). Minulla oli mielenkiintona selvittää minkälaista korrelaatiota kysymysten väliltä oli löydettävissä. Entuudestaan minulle on tuttu käsite rinnakkaiskoordinaatistoista, mutta usein tähän ajattelutapaan perustuvat toteutukset vaativat käyttöönsä numeerista dataa. Meidän tapauksessamme data oli periaatteessa mahdollista kuvata numeerisesti antamalla vastausvaihtoehdoille numeeriset vastineet, mutta tämä olisi tuonut mukanaan ylimääräistä kompleksisuutta.

Löysin kuitenkin D3.js:n sivuilta esimerkin, jossa kuvattiin Titanic:n matkustajien kategorisia ominaisuuksia rinnakkaiskoordinaatistossa. Otin tämän esimerkkitoteutuksen oman analyysini pohjaksi ja sainkin melko nopeasti vaihdettua datan haluamaani (Kuva 3).

Vastausdatan esittäminen rinnakkaiskoordinaatistossa paljastaa vastausrivien keskinäisen suosituimmuuden. (Kuva 3)

Intekaktiivinen versio visualisoinnista on käytettävissä täällä ja vastausdata on ladattavissa .csv-muodossa siitä kiinnostuneille. Visualisoinnista nähdään, että vastausrivi:

1. Gör en gir åt höger
2. Stoppa pengaflödet från städerna till landsbygden
3. Gör SFP till ett sant tvåspråkigt parti
4. Se till att snuset blir lagligt
5. Flytta utbildningen till Obbnäs och gör det till ett tvåspråkigt truppförband

oli selkeästi suosituin vastaajien keskuudessa keräten jopa 33% kaikista vastauksista. Seuraavaksi suosituin vastausrivi sai 9%:n suosion. Mahdollisia vastausvaihtoehtorivejä tämänkaltaisessa viiden kysymyksen kyselyssä on 2^5 eli 32 kappaletta. Toisinsanoen sattunnaisjakaumassa yksittäisen vastausrivin suosio tulisi olla 1/32 eli n. 3%:a. Selkeästi siis vastanneiden keskuudesta löytyy yhteisiä mielipiteitä kyseessä olleisiin aiheisiin.

Emme kuitenkaan lähteneet viemään uutisoinnissa tulosten arviointia näin pitkälle, koska Google Form:ssa kuten ei kyselyissä yleensäkään ole kovin helppoa varmistua, ettei tuloksia ole manipuloitu vastaamalla useita kertoja. Tuloksista kirjoitettiin kyllä juttu, mutta siihen ei otettu mukaan esimerkiksi tätä vastausten korrelaatiota esittävää visualisointia, koska sen nähtiin esittävän asia liian pelkistetysti.

Journalismissa on usein vaarallista väittää asioita, joille ei ole mahdollista määritellä yksikäsitteisesti lähdettä. Gallup-kyselyiden tapauksessa pidetään huolta, että yksittäinen vastaaja voi vaikuttaa kyselyyn vain kerran, mutta Google Form:lla toteutussa Internetlomakekyselyssä yksittäiset henkilöt pystyvät vääristämään helposti tuloksia, joka täytyy ottaa huomioon johtopäätöksiä tehtäessä.

---

Loppukaneettina sanottakoon, että koimme tämän positiivisena kokeiluna ja tulemme oletettavasti tekemään vastaavanlaisia adhoc-tyyppisiä joukkoistusprojekteja myös tulevaisuudessa.

Tässä viestissä jaetut datasetit ovat lisensoitu Nimeä-Tarttuva (CC BY-SA).

#SuomiTop100-ilmiö

Keskiviikkona 20.6. suomalaisessa Twitterissä alkoi kuohua (Kuva 1). Niku Hooli ja Antti Hirvonen olivat Foreign Policy -lehden esimerkin innoittamina ryhtyneet joukkoistamalla keräämään listaa 100:sta suomalaisesta tai Suomessa vaikuttavista Twitter-aktiivista.

@suomitrendit on suosittuja suomalaisia hashtageja twiittaava Twitter-tili. (Kuva 1) 

Nopeasti, aiheesta hashtagilla #SuomiTop100 keskustelleiden keskuudessa, kasvoi tarve ilmentää ilmiötä visualisoinnin keinoin ja keskiviikkoiltapäivällä sainkin useampia vihjailuja (1, 2, 3) asiaa koskien. Sinällään ongelma oli, etten ennen ollut kerännyt Twitteristä dataa hashtageihin perustuen, joten jouduin hieman improvisoimaan lähtiessäni toteuttamaan tarvetta täyttävää visualisointia. Aikaisemmat Twitter-pohjaiset visualisointini ovat perustuneet yksittäisten Twitter-tilien seuraajien ja seurattavien visualisointiin. Sain kuitenkin nopeasti aikaan ensimmäisen version #SuomiTop100-hashtagin maininneiden käyttäjien keskinäisestä verkostosta (Kuva 2).

Verkostossa on 66 solmua (keskustelijaa) ja 744 yhteyttä (seuraa tai on seurattavana). (Kuva 2)

Verkostossa ovat siis mukana #SuomiTop100-hashtagin Twitterissä maininneet henkilöt, eivät listalla olleet tai sinne päätyneet, joskin toki osa asiasta keskustelijoista listalle myös päätyi. Toteutus oli kuitenkin siinä määrin nopeasti kasattu, että en ehtinyt huomioimaan mm., että versioon tulivat mukaan vain hashtagin 100 viimeisintä twiittiä eikä data siten ollut täydellistä.

Mitä tästä kuvassa 2 näkyvästä verkostosta pystyttiin kuitenkin jo näkemään oli, että aiheesta keskustelleiden verkosto on hyvin tiheä. Näytti siis siltä, että asiasta keskusteltiin ns. kaveriporukassa toisensa tuntevien ihmisten kesken. Sain kuitenkin siinä määrin palautetta ihmisiltä, jotka olivat asian maininneet, mutta eivät verkostosta löytyneet, että keskiviikkoiltana toteutin twiittien hakuskriptistä parannetun version.

Torstaina 21.6. aamulla julkaisin päivitetyn toteutuksen #SuomiTop100-hashtagin maininneiden verkostosta. Tällä kertaa luulen saaneeni mukaan todella kaikki asiasta keskustelleet ja heidän väliset yhteydet. Ainakin datan määrä kasvoi merkittävästi ja näytti oikeammalta twiittien määrään nähden (>500). Verkoston rakenteeseen tämä päivitys ei kuitenkaan juuri tuonut muutosta. Edelleen näytti siltä, että asiasta kiinnostuneet eli asiasta keskustelleet ovat myös kiinnostuneet keskenään toisistaan (Kuva 3).

Verkostossa on 284 solmua (keskustelijaa) ja 10556 yhteyttä (seuraa tai on seurattavana).  (Kuva 3)

Kuvissa 2 ja 3 näkyvien verkostojen rakenteen ja värityksen merkitystä on kuvattu mm. aikaisemmassa viestissäni: "Twitter-verkostoanalyysia Gephi:llä". Lyhyesti kuvattuna ihmiset asettuvat verkostossa lähelle niitä ihmisiä, jotka seuraavat toisiaan ja värit on asetettu verkostosta matemaattisesti tunnistettujen ryhmittymien mukaan. Solmun eli henkilöä kuvaavan pallon koko määräytyy sen mukaan miten keskeinen hän on verkoston kannalta. Latasin myöhemmin torstaina myös interaktiivisen version kuvassa 3 nähtävästä verkostosta ja annoin hakemani datan verkostomuodossa (.gexf) jatkokäsiteltäviksi siitä kiinnostuneille.

Torstaina iltapäivällä lopullinen lista julkistettiin YLE Uutisten toimesta. Laskin, että listalle päätyneistä ihmisistä 13% (37/284) osallistui aiheeseen liittyvään keskusteluun. Aiheesta keskustelleet löytyvät oheisesta .csv-tiedostosta, joka on mahdollista avata esimerkiksi Excelissä. Keskustelleet, jotka päätyivät myös listalle löytyvät tästä Google Fusion Tables -taulukosta.

Myös muut olivat aktivoituneet asian tiimoilta ja tehneet analyysia ilmiöstä. Mm. MikroPC:stä tuttu Ossi Jääskeläinen oli rakentanut PHP-ohjelman, jolla hän oli hakenut listalle päätyneiden numeeriset metatiedot (twiittejä, seuraajia, seurattavia, listojen jäsenyyksiä, omia listoja). Ossi tarjosi datan .csv-muodossa vapaasti käytettäväksi ja tästä innoittuneena aktivoiduin myös tämän osalta tekemään hieman visualisointityötä.

Toteutin D3.js kirjaston tarjoamaan Parallers Coordinates esimerkkiin perustuen visualisoinnin, jonka avulla on mahdollista tutkia korreloivatko #SuomiTop100-listalla olevien numeeriset ominaisuudet, jollain tavalla. Onko esimerkiksi niin, että twiittauksien määrä on suoraan verrannollinen käyttäjän seuraajien määrään tai ovatko käyttäjät, jotka itse käyttävät listoja todennäköisimpiä myös itse päätymään niille. (Kuva 4)

Suurin hajonta lopullisen #SuomiTop100 listan jäsenissä syntyy numeerisesti twiittien määrässä. Avaa visualisointi. (Kuva 4)

Kuten kuvasta 4 nähdään muutamat käyttäjät sokaistavat visualisoinnin melko tehokkaasti. Esimerkiksi Heikki Kovalaisen yli 150 000 seuraajaa on Suomen tasolla siinä määrin poikkeuksellinen määrä, että muut vain n. 1000 seuraajaa omaavat eivät erottaudu akselilla. Olisi ollut mahdollista toteuttaa hieman monipuolisemmat ominaisuudet omaava toteutus visualisoinnista, mutta päädyin helpompaan ratkaisuun ja poistin datasta manuaalisesti nämä muumat käyttäjät (@Haloefekti, 94 502 twiittiä @H_Kovalainen, 154 445 seuraajaa; @ptarkkonen, 108 793 seurattavaa), jotka omaavat suurimmat ääriarvot. Tällä ei kuitenkaan merkittävää vaikutusta ollut vaan data ilmentyi edelleen visualisoinnissa samankaltaisesti eikä kovinkaan merkittäviä korrelaatioita numeeristen ominaisuuksen välillä löytynyt. Listalle päätyneet suomalaiset Twitter-vaikuttajat ovat numeroiden valossa hyvin samankaltaisia. (Kuva 5)

Vaikka listalta poistetaan äärimmäisimmät käyttäjät ei data esiinny juurikaan erilaisempana. Avaa visualisointi. (Kuva 5) 

Toteuttamani verkostovisualisoinnit #SuomiTop100-hashtagin maininneista keskustelijoista aiheutti myös muutamia epäselvyyksiä. Visualisoinnin luultiin olevan tehty lopulliselle listalle päätyneiden keskinäisestä verkostosta (1, 2, 3). Tätä väärinkäsitystä jouduin oikomaan muutamaankin otteeseen ja lisätäkseni hämmennystä toteutin nyt jälkikäteen myös verkoston tästä listalle päätyneiden keskinäisestä verkostosta (Kuva 6). Verkosto löytyy myös interaktiivisena versiona ja data on saatavilla .gexf-muodossa.

Listalle päätyneet ovat keskenään tiiviisti verkostoituneita Twitterissä. (Kuva 6)

Kuten kuvassa 3 nähtävä #SuomiTop100-aiheesta keskustelijoiden verkosto on kuvassa 6 nähtävä lopulliselle listalle päätyneiden verkosto hyvin tiivis. Ainoastaan, pääosin urheilijoista ja urheiluvaikuttajista koostuva, joukko vasemmalla erottuu selkeästi omaksi saarekkeekseen. Yhteensä kuvassa 6 nähtävässä verkostossa on 100 solmua ja 3296 yhteyttä. Verkoston keskeisin henkilö on Tuija Aalto, joka myös seuraa eniten verkostossa olevia henkilöitä (96). Tuija myös kiinnostaa, koska 99:stä mahdollisesta häntä seuraa 64 verkoston jäsentä. Muut verkoston keskeisimmät henkilöt ovat järjestyksessä Mikael Jungner, Jyrki Kasvi ja Mikko Hyppönen.

Tässä oma näkökulmani #SuomiTop100-ilmiöön, joka vavisutti mielipiteitä näin juhannuksen alla puolesta ja vastaan.

Tässä viestissä jaetut datasetit ovat lisensoitu Nimeä-Tarttuva (CC BY-SA).