Grafer som funkar på mobilen

Igår gjorde jag om Naturvårdsverkets visualisering av Sveriges koldioxidutsläpp. För att komma tillrätta med informationsöverflöd måste vi göra diagram som framhäver data och håller igen med allt annat. Ett problem med diagrammet är dock att det är nästan oläsbart på mobiler, se själv (ja använd din mobil):

Så idag tänkte jag försöka mobilanpassa diagrammet. I försök ett klämmer jag helt enkelt ihop mitt ursprungsdiagram och förstorar texten.

Det blir inte speciellt bra att bara klämma ihop även om det går att se data hyfsat. Rubrikerna gör jag större för att mobilskärmen är mindre. x- och y-axelns värden känns som att de tar onödigt stort utrymme. Hur kan vi ändra det här till något användbart på mobilen?

Vi får gå tillbaka till tabelldata. Vad är det vi försöker visualisera? Vad är viktigt för att visa just de här uppgifterna? Det handlar om klimatutsläpp, alltså utsläpp av koldioxid. Vi har en tabell med värden för ett antal områden från 1990 till 2016. Vi ser förändringar i enskilda branscher och vi jämför olika branscher över tid. Ganska mycket information alltså.

En metod för att göra det mer läsbart på mobil är att ta bort data, att till exempel bara presentera ett årtal eller en bransch. Men det vill vi helst slippa.

Jag är inte speciellt erfaren grafisk designer så det här blir ett första test. Jag vänder på den hopklämda grafen. Då gör det inte så mycket att jag klämmer ihop grafen. Även om förändringarna inte syns jättetydligt så är det lätt att läsa av trenderna.

Jag plockade bort årtal och utsläppstal i både x- och y-axel för att göra bilden mindre plottrig- framhäv data! Det svåra var att få in rubriker på ett sätt som är läsbart och som inte är i vägen för alla data. Färger är lite vanskligt men hjälper till att göra skillnad mellan branscherna. Rubrikerna är större och i fetstil och jag la dem helt enkelt ovanpå graferna. Okonventionellt men jag tycker det gör jobbet. Tror jag gör ett nytt försök i morgon. Om du har idéer eller förslag vore det kul att höra, skicka ett meddelande.