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

Alle disse gratisverktøyene vi bruker…

Hva er egentlig Infogram? Eller Datawrapper? Jeg har fått spørsmålene mange ganger, og her er en oversikt over de verktøyene vi bruker mest, og eksempler på prosjekter vi har laget med disse verktøyene:

TimelineJS-logo

Timeline JS er laget av Knigtlab på Northwestern University i Chicago. Verktøyet gir deg en enkel måte å illustrere – nettopp –  en tidlinje på. Du legger til datoer, steder, hendelser og bilder/video, og får ut i andre enden en embed-kode du kan legge til på nettsiden din. Enkelt! Det eneste du må huske på er at alt av bilder og video må allerede finnes et sted på nettet. Du kan altså ikke laste opp bilder eller videoer direkte i Timeline – bare nettadresser. Vi brukte TimelineJS på disse prosjektene:

Aksladrapet       Flaggsaken


thinglink_logo1-2ci0gdf

Thinlink er en tjenester som lar deg laste opp et bilde og legge inn interaktive punkter i det. De interaktive punktene kan være tekst, bilder, video, lenker til andre nettsider osv. Du kan til en viss grad bestemme layout på punktene, og du kan bruke Thinglink til veldig mye rart. Du får en embedd-kode til slutt, som du legger inn på nettsiden din. Vi brukte thinglink i disse prosjektene:

RUSH     Aksla-pp-bilde


Infogram-logo

Infogram er et infografikk-verktøy. Du legger inn tekst, tall og data, og infogram gir deg diagrammer i en interaktiv infografikk tilbake. Det er ikke like lett å integrere infogram rett i artikler på våre netsider, pga begrensninger i bredde på infografikken. Derfor har vi lagt disse på egene, blanke sider, der de får den beste presentasjonen. Du får også her en embeddkode ut som du limer inn på din nettside. Vi bruke infogram på disse sakene:

ValgNabolag     Skatt2013


2JHwwi3B_400x400

Datawrapper er et enkelt og nyttig verktøy som lar deg lage grafikk som søyle-, sirkel- og linjediagram til publisering på nett. Verktøyet er gratis, du må kun registrere deg med ei epostadresse. Det du trenger er et datasett behandlet i for eksempel Microsoft Excel, som limes inn i Datarwrapper. Her kan du velge diagramtype, endre farger og utforming og navngi variabler. Du kan også lage søkbare tabeller. Når diagrammet er ferdig kopieres embedd-kode som du legger til på din nettside. Diagrammet kan endres etter publisering. Vi brukte Datawrapper på bl.a. dette prosjektet:

Julekaker


FusionTables
Google Fusion Tables er et verktøy for å lage interaktive grafikker. Verktøyet kan brukes både til å lage søylediagram etc basert på et datasett, eller du kan sammenligne geografiske områder (f.eks. kommuner) på et kart. Krever at man har en gmail-konto. Datasett behandlet i f.eks. Microsoft Excel lastes gjerne opp i et Google-spreadsheet før det kan brukes i Fusion Tables, evt lastes rett opp fra datamasinen.
Framstilling av kart kan være vanskelig, det avhenger av hvilket område man jobber med og om det finnes lett tilgjengelige kart med grenser. I Sunnmørsposten har vi et kart som kan brukes til sammenlikning mellom de 25 kommunene i dekningsområdet vårt.
Du har stor frihet til modifisering av grafisk uttrykk, det finnes enkle forhåndsinnstillinger man kan bruke. I tillegg er det stor frihet til modifisering av uttrykket, men det fordrer litt mer enn grunnleggende datakunnskap. Når grafikken er ferdig kopieres embedd-kode inn på din nettside. Skal du lage diagrammer uten kart er Datawrapper et enklere alternativ. Vi har brukt Google Fusion Tables på disse prosjektene:
Forurensing Boligbygging UlykkerSulavegen