WebView on datajournalistin uusi Internet Explorer

Kun Tim Berners-Lee vuonna 1990 kehitti nykyisin tuntemamme netin ensiaskeleet hänellä ei varmasti ollut käsitystä minkälaisen vallankumouksen hän aiheuttaisi. Berners-Lee on edelleen keskeinen hahmo, koska hän toimii netin standardointia ja suosituksia hoitavassa W3C-organisaatiossa.

Netin alkuaikoina käytänteistä käytiin perustavanlaatuisia kamppailuja kun päädyttiin esimerkiksi käyttämään Javascriptiä. Tuolloin suosituimmat selaimet Netscape Navigator ja Internet Explorer vetivät kehitystä omiin suuntiinsa (Kuva 1). Esimerkiksi CSS:n osalta tilanne on ollut erityisen ongelmallinen näihin päiviin asti.

Tämänkaltaiset ilmoitukset olivat hyvin tavallisia 2000-luvun taitteessa. (Kuva 1)

Nykyisin selainmarkkinoita hallitsevat Mozilla Firefox, Internet Explorer (Edge), Chrome ja Safari. Esimerkiksi Yle Uutisten sivuilla nämä neljä kattavat noin 90 % liikenteestä (lähde Google Analytics). Standardien noudattamisen osalta ollaan viime vuosina menty huimasti eteenpäin, mutta etenkin Internet Explorer oli pitkään piikki netinkehittäjien lihassa ja kirjoitinkin aiheesta vuonna 2012.

Vuosi 2012: "Toimiiko Internet Explorerissa"

Nykyisin tilanne Internet Explorerin suhteen on kehittäjän näkökulmasta uusien versioiden myötä  paljon siedettävämpi. Toisaalta myös, että IE:n osuus käytöstä on pudonnut huomattavasti.

Vuosina 2012–2016 nähtiin kuitenkin hyvin merkittävä mobiilikäytön kasvu. Nykyisin Yle Uutisten käytöstä yli puolet tulee mobiililaitteista kun vuonna 2012 osuus oli noin 10 % (lähde Google Analytics).

Ennen mobiilin tuloa netin kehitystyötä pystyi teskemään riittävän natiivisti ja kattavasti yhdellä tietokoneella. Mobiilikäytön kasvu tarkoitti, että päätelaitteiden ja selainten määrä kasvoi rajusti, joka taas johti siihen, ettei toteutusten testaaminen kaikilla päätelaitteilla ja selaimilla enää ollut mahdollista.

/* Good browsers */
opacity: 0.5;

/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

/* IE 5-7 */
filter: alpha(opacity=50);

Esimerkki siitä miten Internet Explorer tuli esimerkiksi huomioida CSS-tyyleissä.

Vuonna 2012 IE:llä toimimattoman toteutuksen saattoi vielä räätälöidä IE:lle toimivaksi, mutta mobiilimaailmassa tämä räätälöinti ei enää ollut käyttöympäristöjen määrästä johtuen mahdollista. Tässä uudessa tilanteessa standardien noudattaminen ja yhteiset netin käytänteet tulivat yhä tarkeämmiksi. Kehittäjän tuli voida luottaa, että jos hän noudattaa netin standardeja ja suosituksia toimii toteutus kaikissa päätelaitteissa.

Mobiilin alkuvuosina tilanne oli kaoottisempi ja ongelmat olivat teknisen lisäksi myös sisällöllisiä rajatusta näytönleveydestä johtuen (responsive = "toimii myös mobiilissa" ja mobile-first = "toimii myös desktopissa").

Vuosi 2015: "Toimiiko mobiilissa"

Verkko on toimintaympäristöltään siinä mielessä hyvin erityislaatuinen, että kehittäjä ei voi juurikaan määritellä tai rajata käyttäjän päätelaitetta. Esimerkiksi tehtäessä televisio-ohjelmaa toimintaympäristö ja jakelukanava on melko selkeästi määritelty. Tai jos kehityksen kohteena on HSL:n kortinlukijan käyttöliittymä, jossa päätelaite on vakioitu, ei järjestelmän tarvitse olla samalla tavalla skaalautuva kuin kehitettäessä nettipalveluita.

Verkossa päätelaitetta, käytettävissä olevia teknologioita eikä jakelukanavaa voi käytännössä rajata mitenkään. Toteutuksen tulisi skaalautua niin, että se toimii niin desktop-selaimella ADSL-yhteydellä kuin hitaammalla yhteydellä älykellosta. Toisaalta toteutuksen tulisi olla käytettävä yhtälailla esimerkiksi TV:stä kaukosäätimellä. Huomioon tulisi ottaa myös, että toisissa päätelaitteissa ei ole käytössä esimerkiksi Javascriptiä, Flashiä tai Javaa.

Tämä heterogeenisuus ei ole ongelma jos kaikki pelaavat yhteisten pelisääntöjen mukaan. Yhteisten pelisääntöjen noudattaminen on mahdollista, koska (suuria) laitevalmistajia on kuitenkin rajallinen määrä.

Tuorein haaste verkon kehityksessä on kuitenkin ns. WebView-kerros. WebView on älypuhelin sovelluksen (applikaatio) ominaisuus, jossa verkkosisältöä voidaan näyttää suoraan sovelluksessa.

Sovelluskehittäjälle tämä tarjoaa mahdollisuuden rakentaa nettisivusto ja tarjoilla sitä periaatteessa sellaisenaan applikaationa. WebView:tä käytetään myös natiiveissa sovelluksissa verkkosisältöjen tarjoilemiseen suoraan applikaatiossa ilman, että käyttäjää tarvitsee ohjata esimerkiksi puhelimen Safari-selaimeen. Sovelluksen näkökulmasta tämä on mukavaa, koska käyttäjä ei poistu sovelluksesta.

Etenkin jälkimmäisessä tapauksessa WebView:n tekee ongelmalliseksi se, että sovelluskehittäjä voi melko mielivaltaisesti ottaa käyttöön ja poistaa netin ominaisuuksia WebView:ssä.

Esimerkiksi tuoreessa Ilmakehä-jutussamme Ampparit-sovelluksen Webviewssä ei ilmeisesti oltu sallittu iPhonessa allowsInlineMediaPlayback-ominaisuutta, koska videosisällöt aukesivat määrittelystä poiketen koko ruudussa (full screen).

Vuosi 2017: "Toimiiko WebViewssä"

WebView on siinä mielessä haasteellinen, että virheiden korjaaminen siinä on erittäin vaikeaa ellei jopa mahdotonta. WebView on kehittäjälle mustalaatikko, jonka ominaisuuksista ja toiminnasta on todella vaikea saada palautetta.

Kuitenkaan toimivuutta WebViewssä ei voi ohittaa, koska esimerkiksi pikaviestin sovelluksissa (Facebook, Twitter) jaetut linkit jaetaan hyvin usein juuri WebViewssä. Toisaalta meillä Ylellä WebViewtä käyttävät myös Uutisvahti ja Yle.fi-applikaatio. Toisaalta taas erittäin suosittu WhatsApp avaa linkit (vielä) Safarissa.

Kehitys kehittyy!

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:

• Nouseeko kotiseudullesi jättimäisiä tuulimyllyjä? Katso kartalta
• Suomalaisten sieppaus Jemenissä - tapahtumat kartalla

kuin myös erilaisia aluisiin perustuvia Google Maps -karttoja kuten:

• Tuoko ryntäys kaivoksen naapuriisi? Katso kartalta
• Kilpailuta terveytesi – täällä yksityinen lääkäri on halvin

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ä:

• Täällä punkit aiheuttavat tauteja – katso alueesi tilanne
• Täällä lohen vaellus katkeaa - katso kartalta pahimmat nousuesteet

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ä.

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.