Erik Söderholm

Digital journalist

Mitt första projekt: 185 viltolyckor – varje dag

Nu under hösten sker 185 viltolyckor varje dag. De kostar skattebetalarna tre miljarder om året – men det är inte alls Norrland som är värst drabbat, utan de södra delarna av Sverige. Så här gick det till när jag skapade mitt första projekt inom datajournalistik.

Publicerat 2013-10-18

Här kan du se artikeln

Jag fick ett pressmeddelande från Motormännen om att 185 viltolyckor sker varje dag under hösten. Det lät som en intressant artikel, men pressmeddelandet innehöll väldigt mycket siffror. En vanlig textartikel skulle bara bli rörig.

Därför började jag snickra på en lite mer grafisk artikel. Första steget var att hitta "vinkeln" och försöka komma fram till vad jag faktiskt ville visa med artikeln.

Först och främst ville jag visa att det faktiskt har inträffat nästan 30 000 viltolyckor på de svenska vägarna bara i år. Det visade jag med en stor, röd siffra högst upp. Egentligen gillar jag inte animationer, men här kändes det ändå kul att använda en så kallad "ticker". Det finns ju ingen brödtext att läsa så det gör inte så mycket att siffran tickar upp till rätt tal. Det bidrar till rätt känsla.

Tekniken är ett jQuery-skript som heter countTo. När skriptet har inkluderats går det bra att använda taggen <span> för att visa siffran. Därefter lägger man till data-from för den siffra som ska räknas från, data-to för den siffra som ska räknas upp till och data-speed för att reglera hur snabb själva räkningen ska vara.

Klassen "timer" använder jag bara för att snygga till siffran i CSS.

Åtta av tio som råkar ut för en viltolycka krockar med ett rådjur. Det visade jag med ett cirkeldiagram. Jag är inte helt nöjd med diagrammen som går att skapa i Google Drive. Därför använde jag en annan teknik som heter Peity.

När Piety-skriptet är inkluderat används taggen <span> för att rita diagrammet. Se till att taggen har class="pie". Inom <span>-taggarna skrivs sedan siffrorna för diagrammet. I det här fallet ville jag ha tre "tårtbitar" med 78%, 12% och 10%. Det blev 0.78,0.12,0.1. Efter taggarna använder man Javascript för att förklara att det som står inom taggen <span class="pie"> ska göras om till ett Piety-diagram.

Stapeldiagrammet för hur många som omkommit och skadats svårt i viltolyckor var lite mer invecklat. Det räckte inte att använda Piety, som här ovan. Istället använde jag ett annat bibliotek, som heter D3.js.

D3 är extremt kraftfullt och har många avancerade funktioner. Här utgick jag från ett exempel på hemsidan för D3, och lade sedan till de små informationsrutorna som ploppar upp när man för pekaren över staplarna.

Ett stapeldiagram innehåller ofta mer data än ett cirkeldiagram, och därför skrivs inte siffrorna in i källkoden för sidan. Istället inkluderade jag en fil som heter data.tsv. Där står först årtalet. Det följs av en tabb. Därefter kommer siffran för hur många personer som omkom eller skadades svårt i en viltolycka det året.

Här kan du titta på data.tsv-filen.

D3-diagrammet är jag nöjd med, men av någon anledning fick jag inte till visning av årtalen i den horisontella x-axeln. Därför gjorde jag en enkel lista där varje punkt har ett avstånd på 42px från den föregående.

Siffran för "185 viltolyckor varje dag" fungerar precis som siffran högst upp på sidan.

Men 185 viltolyckor varje dag kanske inte säger så mycket. Därför ville jag ha en "nedräknare" som visade att det faktiskt rapporteras in en ny viltolycka var 15:e minut.

Jag letade länge efter olika skript för nedräkning och hittade till slut ett som helt enkelt heter countdown. Inkludera skriptet, skriv in koden <div id="countdown"></div> där du vill ha själva nedräkningen och förklara sedan i ett Javascript att elementet ska göras om till en nedräknare.

Men vad skulle hända när nedräkningen var klar? Jag är ingen duktig Javascript-hacker, och därför lyckades jag inte starta om nedräkningen från noll. Däremot fixade jag så att sidan laddar om när nedräkningen är klar.

Variabeln onExpiry styr vad som ska hända när nedräkningen når noll. Där skrev jag reloadPage. Sedan fixade jag en funktion med samma namn som gör att sidan laddas om.

De senaste tio åren har antalet viltolyckor ökat med över 40 procent. Det visade jag med ett linjediagram. Hittills har jag ju använt två olika statistikbibliotek (Piety och D3) så egentligen borde jag ju använt något av dem. Men här blev det istället ytterligare ett bibliotek: chart.js.

Eftersom skalan börjar på 30 000 viltolyckor och inte på "noll" borde jag också haft ett litet streck längst ned på y-axeln. Tyvärr finns inte den möjligheten i chart.js. Men annars är jag riktigt nöjd.

All data för diagrammet skrivs in i ett skript i html-filen. labels styr vad som ska stå i den horisontella x-axeln, i det här fallet ["2003", "2012"]. data styr vad som ska visas i diagrammet ([35000,50000]). Sedan finns ett gäng andra variabler för att styra exempelvis vad som ska stå på y-axeln och daigrammets bakgrundsfärg.

Två tredjedelar av alla trafikolyckor som rapporteras in till polisen är viltolyckor. Det visade jag med ytterligare ett cirkeldiagram tack vare Piety.

Viltolyckorna kostar tre miljarder om året, och det satte jag i relation till den genomsnittliga lönen för en bilmekaniker (hämtat från SCB) samt omsättningen för två taxibolag (hämtat från Allabolag.se).

Jag skapade en "gubbe-ikon" och satte den som bakgrund i en CSS-div. Bakgrunden upprepas sedan, även det med hjälp av CSS: background-repeat: repeat;.

Var sker viltolyckorna? Det ville jag förstås också visa. Jag hämtade siffror från Älgskadefondsföreningen och importerade det i ett verktyg som heter Google Fusion. Det fungerar ungefär som Excel, men med två skillnader. Dels finns det enbart tillgängligt online (i Google Drive), och dels finns en fantastisk möjlighet att skapa en karta utifrån all data i dokumentet.

Jag importerade alltså en siffra för varje län (antal viltolyckor totalt under 2012). I nästa kolumn står länets namn, och i den tredje kolumnen finns koordinaterna för alla Sveriges län.

Jag letade länge efter just dessa koordinater. Tyvärr finns de inte öppet tillgänliga från varken SCB eller Lantmäteriverket. Dåligt! Däremot kom räddningen från SVT Pejl. De delade vänligt med sig av KML-koordinater för alla Sveriges län och kommuner i Google Fusion-format. Tack!

Färgen på länen fixade jag med något som kallas "buckets" i Google Fusion. Alla län som har upp till ett visst värde blir gröna, och så vidare. Här har alltså datajournalisten en enorm makt att göra ett län grönt eller rött. Tänk efter före!

Google Fusion-kartan bäddade jag sedan in på sidan med hjälp av en iframe. Efter påtryckningar från redaktionen fixade jag också en annan karta, för antal viltolyckor per invånare. Växlingen mellan dessa två kartor görs med ett Javascript, som visar respektive gömmer två CSS-divar.

Efter kartan gjorde jag en liten puff för vårt extraljustest i senaste numret och en uppmaning om att alla som vill kan kommentera ämnet. Just läsarnas kommentarer kan ju sedan bli utgångspunkt i en ny artikel.

En del av diagrammen jag gjorde går ju också att peka på, för att få fram mer information. Men det var inte helt enkelt att förstå. Därför fixade jag en liten pil med texten "peka på diagrammet!" och "klicka på länen!".

Sist av allt ordnade jag två rutor för "Så gör du vid en krock" och ett citat från Erik Kjellin på Motormännen. Sedan ordnade jag lite ikoner och illustrationer som ger rätt "skogskänsla". Även om vildsvinen tyvärr blev alldeles för stora. Jag skyller på att jag är stadsbo...

Här kan du se artikeln

Läs också: Första steget: Så skapar du datajournalistik

Blogginlägg
2016-02-22

9 sätt att jobba smartare och effektivare

2015-08-15

Nya bilinbrottskartan – så gjorde jag granskningen

2015-04-07

Första recensionerna av nya Apple Watch

2015-03-21

Interaktiv karta: Se när Sverige byter däck

2015-03-20

Så fixade jag ett mediacenter för 350 spänn

Projekt & artiklar

Laddhybriderna ger enormt stor osäkerhet i hur mycket utsläppen minskar Recharge granskar: Nu har det hänt – elbilar körs längre än bensinbilar i Sverige Recharge granskar: Nu kan du "optimera" din elbil eller laddhybrid för längre räckvidd – men du riskerar garantin Lista: Här är elbilarna där du kommer längst per krona Svenska AdBlue-piraterna säljer fuskbox till lastbilar – och den går igenom besiktningen Recharge granskar: Därför har elbilsförsäljningen i Danmark havererat fullständigt Recharge granskar: Därför kan elbilar vara dyrare att försäkra än fossilbilar Nästan alla elbilsägare skulle göra om köpet – men Tesla är inte bäst Begagnade miljöbilar vräks ut ur Sverige – exporteras till utlandet Testa själv: Så snabbt kommer du fram med Hyperloop Kritikerna har fel – det behövs inte mer än en simpel skärm i Tesla Model 3 Därför är trådlös laddning mycket viktigare än de flesta tror för elbilsomställningen Årets Bil utsedd – knappt en miljöbil i sikte 6 anledningar till att energimiljardären har fel – elbilar är framtiden och Tesla riskerar INTE konkurs Räckvidden framför allt – eller ställer vi fel frågor om nya elbilar? Miljösmart, ja – men det kommer inte alltid vara tokbilligt att köra elbil Det är egentligen på landsbygden som elbilarna passar bäst Detta säger jag till alla elbilsskeptiker – funkar nästan varje gång Efter dödskraschen: "Lösningen är inte att stoppa utvecklingen – snarare tvärt om" Succé eller konkurs – Tesla vinner i vilket fall BMW betalar inte rasslande kamkedjor automatiskt – trots ARN:s beslut Skrotningsklassad Mercedes låg ute på annons hos auktoriserad säljare Toyota Prius säljer bra – så länge bensinpriset är högt Bilrån drabbar inte bara lyxbilsägare – detta gäller om du blir rånad Läsarna hyllar sina elbilar: "Jag är oförskämt nöjd" BMW fälls för kamkedjehaveri i dieselmotor – kostar 50.000 Ägarna berättar: Nya bilar allt snålare – men inte så mycket roligare BMW svarar på kritiken: "Vi prövar saken internt" Försäkringsbolagen känner till Volkswagens dåliga kvalitet Volkswagen svarar på kritiken: "Det är förstås olyckligt" Bilhandlare slutar sälja vissa Volkswagen- och Audimodeller: "Orkar inte med eländet" Vi köper allt fler bilar – men kör allt mindre Här är bilhandlarna som fuskat med momsen – och dömts Unik karta: Här sker bilinbrotten – kolla läget i din kommun Car2go-bilarna kör med vinterdäck på sommaren – det är du som får betala Så fuskar bilhandlarna – struntar i moms och skruvar mätarna Trots siffrorna: "Tycker polisen gör ett bra jobb" Bilhandlarnas åtta vanligaste knep Unik grafik: 185 viltolyckor – varje dag Handlare säljer bilar med olagliga lån Lista: Här är fartkamerorna som fångar flest Så många fastnar i fartkamerorna Läsarna tycker till om bilhandlarna Bilhandlarna med bäst service – enligt köparna Bilhandlarna utnyttjar inte nätet Många bilhandlare svarar inte på mejl Polisen krockar – för dina skattepengar Så får polisen köra – och inte köra Unik karta: Här sker flest bilinbrott Så undviker du bilinbrott Polisen: "Bilinbrotten har minskat dramatiskt" Läsarna berättar om bilinbrotten

Om mig

Jag är digital redaktör på Auto Motor & Sport och Recharge. Jag har en kandidatexamen i journalistik från Mittuniversitetet i Sundsvall och jobbar gärna med datajournalistik och visualiseringar.

Jag skapade min första hemsida i stolpig HTML-kod när jag var tolv. Sedan dess har jag lärt mig CSS, PHP, Javascript, MySQL och en del annat nyttigt. Den här sajten är byggd i mitt eget publiceringssystem eCMS.

Jag jobbar i Sublime Text och Coda och versionshanteringsprogrammet SourceTree. Jag borrar gärna ner mig i avancerade Excelark och gräver runt i Open Refine. Jag använder också grafikbiblioteket D3.js, InDesign, Photoshop, Illustrator och Audacity. Experimenterar med en del PHP-ramverk, Final Cut och Motion, Python, Xcode och Swift.

Kontakt

Mejla mig gärna på eriksdh snabel-a gmail punkt com, följ mig på Twitter eller läs mina artiklar på Auto Motor & Sport och Recharge.