Slik gjorde vi det: Narkodommer

NARKODOMMER PÅ SUNNMØRE (grafikkside)
Sak1, sak2, sak3, sak4 fra Sunnmørposten

Idé
Journalist Arne Per Andersen kom med et datasett over alle narkodommer på Sunnmøre mellom 2011-2013, hentet fra tingrettene på Sunnmøre og Søre Sunnmøre. Dataene inneholdt kommuner, alder på dømte, kjønn, forbrytelse, type stoff og dom.

I tillegg til å lage grafer over datasettet, hadde vi lyst til å lage en sorterbar liste over alle dommene. Og kart, man må selvfølgelig ha kart. Vel, ikke alltid (det er ganske viktig å huske at kart ikke alltid har noe å gjøre i slike saker) men akkurat i dette tilfellet, passet det godt inn med kart – for å visualisere hvor mange dommer som fantest i kommunene. Sunnmørsposten dekker 25 kommuner, og i datasettet var 16 av disse med.

Datasettet
Datasettet var ganske ustrukturert og rotete, og denne prosessen er det som tar nesten mest tid, å få datasettet riktig strukturert. Det må tenkes nøye gjennom hva man ønsker å fortelle og hvordan man da strukturerer datasettet. For eksempel, skal man finne ut hvor mange forbrytelser som har med hasj å gjøre, hjelper det lite at man i kolonnene i exceldokumentet skriver under STOFF: hasj, amfetamin, metamfetamin. Da trenger man en egen kolonne for HASJ: 1. På den måten klarer du å lage Pivot tables som kan lese av datasettet ditt mye fortere enn du klarer.

Listen
Når det var gjort, startet vi med listen. Vi fant et javascript som heter Handlebars.js. Med Handlebars kunne vi skrive enkle templates som ville generere hele listen for oss. For eksempel, ved å skrive:

{{year}} {{place}} {{age}} {{sex}} {{verdict}}

ville Handlebars hente ut info fra vår csv-fil kalt «narko.csv» (generert fra Excel) og putte riktig info på riktig sted. Hele tabellen så slik ut:

{{#narko}}

{{/narko}}

KOMMUNE ÅR KJØNN ALDER FORBRYTELSE STOFF DOM
{{place}} {{year}} {{sex}} {{age}} {{crime}} {{drug}} {{verdict}}

De øverste radene viser hvilke overskrifter som synes på den ferdige sida, lista under viser hvilke kolonner fra csv-fila den skal hente ut. Engelsk bruker vi fordi disse scriptene har problemer med æøå.

Så fant vi et annet javascript som heter Footable,.js. Footable lager en responsiv datatabell, og er super å bruke for å sortere og filtre data på en enkel måte. Footable tryller listene fine på mobil også! Neat! Den trekker sammen kolonner og genererer symboler for å utvide og trekke sammen.

Problem
Så kom et problem. Handlebars.js. og Footable.js var ikke 100% kompatible med hverandre. Symboler forsvant og ting funka ikke helt slik vi hadde tenkt. Hadde vi hatt litt mer tid, hadde vi helt sikkert klart å løse dette, men deadline var svært nær, så den kjappeste løsningen ble å la Handlebars generere ut hele listen, så lime inn den ferdige listen i index-fila. Dette kan gjøre sida litt treigere å laste, og koden blir utrooooooolig lang, men ellers spiller det ingen rolle.

Grafer og kart
Så – hva med grafene? Datawrapper-bonanza! Datawrapper er et fantastisk verktøy for å lage grafer og diagrammer for nett. Hvis du ikke har prøvd det ennå, er det på tide.

Til slutt laget vi kartet. Det er laget i illustrator, og hentet inn i et annet fantastisk verktøy som heter Thinglink, et verktøy som lager klikkbare punkter i et bilde du laster opp. Gøy! Og – den tar vare på statistikk for deg – enda mer gøy!

Så lanserte vi hele pakka samtidig, og til papiravis/nettavis hentet vi ut grafer og Arne skrev case rundt disse i serien «Narkodommer på Sunnmøre» som gikk ei ukes tid i avisa.

Resulatet
Folk gikk litt bananas ei stund, og grafikken leste veldig bra. Vi har landa på 17.000 treff på sida i skrivende stund, noe som grundig knuser forrige rekord på rundt 6.000 treff. Folk har klikka på punktene i kartet rundt 150.000 ganger og bruker i snitt godt over 5 (!) minutter på å lese hele sida. Det er vi superfornøyde med!

Sakene skapte også debatt, folk mener mye om narkokrim, og da er det fint å kunne presentere ei ellers ganske ugjennomtrengelig liste på denne måten.

Liv-J.

Advertisements

Legg igjen en kommentar

Fyll inn i feltene under, eller klikk på et ikon for å logge inn:

WordPress.com-logo

Du kommenterer med bruk av din WordPress.com konto. Logg ut / Endre )

Twitter picture

Du kommenterer med bruk av din Twitter konto. Logg ut / Endre )

Facebookbilde

Du kommenterer med bruk av din Facebook konto. Logg ut / Endre )

Google+ photo

Du kommenterer med bruk av din Google+ konto. Logg ut / Endre )

Kobler til %s