Interaktiva verktyg

 

Den här sidan handlar om de visualiseringsverktyg som finns gratis tillgängliga på webben. Som är relativt enkla att använda och publicera i webbtidning.

Då utbudet ständigt förändras blir denna sida också stadd i ständig förändring. Jag är tacksam för tips och länkar till bra produkter som inte är med här.

 

Ibland vill läsaren veta när…

Tidslinjer är oerhört användbara. De kan ge läsaren en historisk bakgrund eller användas för att visualisera ett förlopp. De kan sträcka sig över miljoner år (t ex dinosauriernas uppgång och undergång) och de kan handla om millisekunder (t ex så fungerar Cern-acceleratorn). De kan vara komplement till en artikel och de kan vara ett artikelformat i sig.

Fler exempel på när man skulle kunna använda en tidslinje:

  • Så förberedde de 9/11
  • Håkan Hellströms bästa dag, timme för timme.
  • Så sjönk Titanic
  • Så bärgades Titanic
  • Rånet mot Forex, med övervakningskamerans bilder

 

JSTimeline

Bäst just nu. Applikationen är utvecklad av Northwestern University KnightLab i Chicago, en sammanslutning av teknologer och journalister med mål att tillhandahålla digitala journalistiska verktyg.

JSTimeline redovisar varje tidpunkt med text, bild eller video. Den är enkel och självinstruerande, bara att klicka på länken nedan och sätta igång (se till att ha material redo).

http://timeline.knightlab.com/

Här nedan ett exempel på hur JSTimeline kan användas, från CNN:s webbplats:

 

Och några länkar till exempel från amerikanska tidningar:

http://www.denverpost.com/breakingnews/ci_21119904

http://world.time.com/2013/12/05/nelson-mandelas-extraordinary-life-an-interactive-timeline/

 

Ibland vill läsaren veta var

Kartor, kartor, kartor. Att få se var någonting har hänt, händer eller ska hända kan vara av stort värde för läsaren. Var ligger egentligen Malaysia? Och hur flög flygplanet? Eller bankrånarnas flyktväg – vart tog de vägen? Var begås det flest inbrott i vår stad? Och så vidare, och så vidare.

Här föreslår jag att den duktiga presentationsjournalisten använder egna kartor, gjorda i exvis Illustrator, för att ge publikationen en egen professionell profil. Här kan du läsa hur:
http://manual.jmg.gu.se/?page_id=45
En stadskarta behöver ju bara göras en gång – kan sedan återanvändas och anpassas/uppdateras hur länge som helst. Och de kan anpassas och användas för både papper och som interaktiva versioner för webb.

Det finns flera bra kartverktyg som är gratis.

Storymap

Den första jag visar här är dock mer än bara en karta, applikationen Storymap är också från KnightLab och som namnet antyder är det ett verktyg för att interaktivt berätta en historia med geografiska hållpunkter.
Här kan du se exempel:

https://storymap.knightlab.com/#examples

Enkel att komma igång med, bara att följa steg-för-steg-guiden:

https://storymap.knightlab.com/

Google Maps

Nej, Google Maps kan inte förbigås. Det känns som att alla webbtidningar använder dem och det är nästan så man börjar tro att en karta på webben inte kan se ut på något annat sätt. Men att kunna visa var något har hänt, på en google-karta, kan nog räknas som allmänbildning för webbredaktörer:

 

Det är enkelt att skapa en sådan här karta. Först går du till:

https://mapsengine.google.com/map/ (observera att du måste vara inloggad med ett google-konto/gmail-konto)

Klicka på Create Map.

Du navigerar till platsen du vill visa och zoomar in till lämplig förstoring. I överkant finns en liten list med verktyg. Välj det som ser ut som en markör och droppa dina markörer där du vill. Du får tillfälle att skriva rubrik och text till varje markör. Till vänster på skärmen ser du en palett som ger dig möjlighet att 1. ändra utseende på markörerna 2.Lägga dina rubriker vid markörerna och 3. importera kartdata från egen tabell eller Google Fusion Tables. Klickar du på Base map får du möjlighet att ändra utseende på själva kartan.

När du är klar med din karta ska du fixa en embedcode. Den hittar du under mappsymbolen uppe till vänster i paletten. Kopiera den och klistra in i din webbtidning.

Skärmavbild 2014-09-12 kl. 10.57.30

Om du får problem kan du hitta en fullständig tutorial här:

https://support.google.com/mapsenginelite/answer/3024925?p=lite_addplaces&rd=1

 

Ibland vill läsaren veta hur

Jag är av den meningen att diagram bör skapas och designas på redaktionen, då de bär en del av tidningens/webbtidningens grafiska identitet (här finns kompendium för att göra diagram o kartor i InDesign/Illustrator : http://manual.jmg.gu.se/?page_id=45 ). För den som är van och har lite färdiga mallar att utgå från går det lika fort som någon webblösning. Dessutom blir de tryckbara ifall man har en papperstidning också.
Det dock inte ovanligt att webbtidningar använder sig av grafikresurser på internet, så det är bra att ha koll på detta.

Datawrapper

https://datawrapper.de/

Fina grejer! Här kan du bara kopiera in data från excel och få publicerat ett proffsigt och lättläst diagram på ett par minuter. Många användbara typer av diagram att välja bland, kontroll av färger mm. Man kan tyvärr inte påverka typsnittet, men det är Helvetica som ju är snygg och sober.
Man publicerar med embed-kod och det blir snyggt i tidningen – så här:

 

 

Google Charts

https://developers.google.com/chart/

Ja, Google Charts kommer man ju inte förbi i det här sammanhanget. Standardverktyget för grafik på webben, med möjligheter till dynamiska diagram (kopplade till databaser och förändras i realtid – ”live charts” ). Men det går också att publicera vanliga statiska diagram, dock inte så enkelt som med Datawrapper. I Google charts jobbar man med tabeller och script, inte särskilt svårt men man ska nog vara intresserad av kodning för att få det som man vill. Det finns dock tydliga kodexempel på Google, man kan klippa och klistra och lära sig mycket (exempel: https://developers.google.com/chart/interactive/docs/gallery/piechart#Example )

 Wordpress-plugin: Chartboot

Jobbar man med WordPress kan man inte koda manuellt, dock finns det som vanligt utmärkta plugins att använda som gör det enkelt att publicera diagram. Jag rekommenderar ChartBoot, där kan du klippa och klistra direkt ur Excel och få ett diagram på nolltid. Här följer två exempel:

made with ChartBoot


made with ChartBoot

En viktig detalj med ChartBoot: när du kopierar från Excel – se till att ta med en tom rad under. Annars får du inte med den sista raden.

 

Ibland vill läsaren jämföra…

Juxtapose är ännu ett användbart verktyg från KnightLab. Det är enkelt men häpnadsväckande. Två bilder med en slider ger läsaren interaktiv kontroll över jämförelsen.
Ett exempel från KnightLabs website (Sotji före och efter vinter-OS):

Detta verktyg kan naturligtvis användas till annat än flygbilder. T ex:

  • Före-efter-bilder (Stadsbilder, arkitektur, Göteborg förr och nu).
  • Kläder (en skådespelare klädd och sminkad för rollen/civilklädd)
  • Alla möjliga sorters ”make-overs”.

Verktyget är väldigt lätt att använda. Här hittar du det:
https://juxtapose.knightlab.com/

Några exempel på hur tidningar använder Juxtapose:
http://interaktiv.morgenpost.de/berlin-1945-2015/
http://espn.go.com/nba/story/_/id/12499977/guess-stars-nicknames
http://www.bostonglobe.com/metro/2014/10/23/returning-jackie-kennedy-vision/t7TCSfcdkjcQNBBkdbuvEO/story.html
http://fusion.net/story/112590/hot-mess-to-haute-couture-how-kim-gaga-and-nicki-toned-down-their-over-the-top-looks/

 

Ordmoln

Ordmoln kan användas ibland (inte för ofta) för att illustrera, eller för att visa på de vanligaste orden i något sammanhang.
Exempel:
Vanligaste orden i olika partiledares valtal.
Vanligaste orden i pojkbok resp flickbok
Vanligaste orden i olka tidningsartiklar

 

Wordle

http://www.wordle.net/

Wordle är den klassiska ordmolnsgeneratorn. Flexibel och lättanvänd. Ger snygga ordmoln i valfitt typsnitt och färgschema.

Exempel (Kristdemokraternas ideologidokument):

ordmoln KD2

 

Tagxedo

http://www.tagxedo.com/

Ett fantastiskt verktyg. Här kan du skapa ordmoln utifrån bilder så att de får den form du vill. T ex ett djur, en symbol eller kanske ett porträtt (som i mitt exempel här).
Ska du använda ett foto bör du ta den genom Photoshop först (Bild>Justeringar>Tröskelvärde).
Stora möjligheter att vara kreativ här.

Exempel (Robin Williams-artiklar):

williams wordcloud2

 

http://www.denverpost.com/breakingnews/ci_21119904

http://storymap.knightlab.com/

http://extras.thetimes.co.uk/public/2014/maps/15-02/Ivory_Storymap.html

http://cdn.knightlab.com/libs/storymapjs/latest/embed/?url=https://www.googledrive.com/host/0B1d8oNIpMx53anVuVUFOTXlOVXc/published.json

http://blog.visual.ly/data-visualization-tools-for-journalists/

http://ncva.itn.liu.se/explorer?l=en

http://www.scb.se/Kartor/Statistikatlas_44_KN_201306/index.html#story=5

http://infogr.am/
[