I dag er SMPlab til stede på Hauststormen i Bergen, vestlandets største journalistkonferanse. Vi presenterer RUSH i Ålesund, og her er bildene fra presentasjonen – ps: du kan klikke på bildene og komme til nettsakene underveis i presentasjonen. (Klikk på bildet for å se bildene, eller klikk her):
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:
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:
| KOMMUNE | ÅR | KJØNN | ALDER | FORBRYTELSE | STOFF | DOM | {{#narko}}
|---|---|---|---|---|---|---|
| {{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.
This talk was given at the Pecca Kucha session at FUSION14 – Society of News Designers / Scandinavia’s annual news design conference in Copenhagen on the 9th of October 2014. (Touch the image to see the slides -or find them here: Pecha kucha Fusion14 )
Hello, my name is Liv and I am a designer at Sunnmørsposten i Ålesund, Norway. My background is graphic design at commercial agencies and newspapers. I want to give you a five step guide on how to get over it. Get over what? I’ll get to that, but first let me tell you a story.
I love cute things, and I like to be in control. So print design suits me well. But when I had the opportunity to work with a data journalist team visualizing data driven stories on our website, I said yes.
I had basic web design experience and pictured our good stories and designs, now with the possibility to add audio, video, animation, make interactives! I mean, the sky is the limit online, right?
Well so I thought until I met Mr. CMS – our Content Management System. Boy, was he square! I tried publishing cute designs, but every time I felt like he said: “Hey there, missy! I’ll decide how things look around here, and everything will look the same when it hits the screen!
And THIS is how I felt my designs looked when I published them. That was so frustrating! I thought, maybe I can change the way our CMS is set up, so I gain control over my designs? I don’t know how to do that. I know, I’ll call the CMS Help Desk!
“Hello, you have now reached the CMS Help Desk, you are number seven zillion in line, please hold, we’ll get back to you in two years”… I sat down, looked around for someone – anyone to come help me. A Computer Jesus to come save me. Guess what – nobody came.
And I was in the dark. But where do I turn when I’m in the dark? To Google, of course. I started searching for help with our CMS problem and for an animation tool. I tweeted people I barely knew, read blogs to see what people had done before us.
And I chose Adobe Edge Animate, a great tool for animation. I spent time learning how to use it and even more time figuring out how to implement animations through our CMS. But with a lot of help from kind people out there, I made it – and published our first self-made interactive. Our readers went “Yei! Hey – what about mobile – it doesn’t work on mobile!”
What? I have to think about that too? Of course I do. I had made the animation too heavy for mobiles to handle. Back to square one. I started looking for tools that were easier to get started with and worked better on all platforms.
And I found a lot of great ones. All these require is that you put data in, and they provide the interactives for you. Great, right? Only not all of them worked well inside our CMS. So we decided to set up a domain outside our website – a blank canvas to publish these kind of stories on. At this point we were so lucky to have a developer assigned to our team, and we got even more advanced in ideas to projects. But then happened what always happens to single developers in a news room.
He drowned in work. So my situation now was: I have a blank canvas, I have tools and some knowledge and I have a developer by my side who I can ask stupid questions. It’s time to get over it and learn how to code.
I need to learn how to build the ideas I have. I used a site call Codecadamy to learn the basics, I went to conferences and jumped into hands on sessions far beyond my knowledge. I’ve used html5, CSS, JavaScript, JQuery and even Python for one project.
We’ve made a lot of news apps and services for our readers, and even won awards for some of them! And the best part is: coding isn’t that hard, it’s actually fun – and I am back in control over my online design. So my five steps to you are:
1 – Get over it! The world is digital. I know you as designers want to still influence the world an how it’s designed in the future. But you won’t be able to if you don’t know how to build it. You need to learn how to code – or at least understand code.
2 – Imagine how you want your designs to work. There are (almost) no limits to what you can to online. We are at the starting point of how to tell the news digitally – who knows how we consume news in five years? Your ideas may contribute to push the limits further.
3 – Care about how your stuff looks on all platforms, and get pissed when it breaks. The online audiences are the most impatience in the world of consumers. Do not let it be up to your CMS to decide what works and what doesn’t. Fix it.
4 – It takes time to learn to code, but it’s worth it! No Computer Jesus is going to come save you, and if he does, he’ll have your job before long. And to all editors out there: invest this time in your designers. Computer Jesus is going to cost you a lot more, and he does not necessarily know good design!
5 – Search! Even great developers spend about 70% of their time searching for code snippets, asking each other for help. Use social media, google, get on Git Hub and Stack Overflow. People are out there and actually willing to help.
Last, but not least, check out our blog to see what’s going on at Sunnmørsposten’s Data Team. Thanks!
#smpLAB 