Presentatie data visualisatie, interactive storytelling

Maps & GraphicsNieuwe Media Dagen

Wilbert Baan / 30 maart 2010Thursday, April 1, 2010

Thursday, April 1, 2010

Wilbert Baan• HKU (Arts, Media & Technology)

• Interaction designer de Volkskrant (website, animaties, widgets, IPTV, mobiel, iPhone)

• EN.nl (Autonome nieuwssite)

• SOMEHOW branded utilties

• Storytelling, concept, design, technology, installaties

Programma• Korte introductie infographics

• Interactive storytelling

• Powerpoint Cinema

• Data & Realtime Web

• Tools

• Opdracht

Infographics

Charles Joseph Minard• Kaart uit 1869 - Carte figurative des pertes successives

en hommes de l'Armée Française dans la campagne de Russie 1812-1813

Beeld sterker dan woorden• sugarstacks.com

Kranten en magazines

Frisia-Nederland conflict• Afstudeerproject Ruiter Janssen WDKA

Design• 10 Billion Tweets

Design• What Are People Really Buying Online?

Kenmerken• Statisch

• Beeldend

• Helder

• Duidelijk

• Groot

• Print

• Informatief

Interactive storytelling

Interactie• De tijdlijn: http://www.nytimes.com/interactive/2009/07/19/

us/politics/20090717_HEALTH_TIMELINE.html

Tijdlijnen• BBC Geschiedenis internet: http://news.bbc.co.uk/2/hi/

technology/8552410.stm

• NY Times Tweets Chatter during Super Bowl: http://www.nytimes.com/interactive/2009/02/02/sports/20090202_superbowl_twitter.html

Interactie• De kaart: http://www.nytimes.com/interactive/2010/03/09/

dining/20100309-new-york-coffee-map.html?src=tp

Kaarten• Clean Water Act Violations: http://www.nytimes.com/

interactive/2009/09/13/us/0913-water.html

• NRC Crisiskaart: http://www.nrc.nl/achtergrond/article2146829.ece

• Volkskrant Banen Migratiewijzer: http://www.vkbanen.nl/volkskrantbanen/migratiewijzer/wijzer/

Beeld• Artscope: http://www.sfmoma.org/projects/artscope/

#r=982&artwork=16581&zoom=9

Beeld• Niet meer alleen van instellingen, jaarverslag KPMG:

http://jaarverslag.kpmg.nl/#view=00043

• Meer op: http://delicious.com/wilbertbaan/storytelling?detail=3

Kenmerken• Veel werk

• Duur

• Duidelijk

• Logisch vervolg op de statische infographic

• Van simpel tot storytelling

• Beperkte interactie

Powerpoint Cinema en uitleganimaties

Al Gore• Heeft powerpoint cinema op de kaart gezet met de film

An Inconvenient Truth.

Al Gore• Heeft powerpoint cinema op de kaart gezet met de film

An Inconvenient Truth.

Animatie• De animatie Empires laat zien hoe de verhoudingen

waren door de tijd.

Animatie• De animatie Empires laat zien hoe de verhoudingen

waren door de tijd.

Explanimation• The Credit Crunch legt eenvoudig uit, hoe de crisis is

ontstaan

Explanimation• The Credit Crunch legt eenvoudig uit, hoe de crisis is

ontstaan

Explanimation• Iran: a Nation of Bloggers door Vancouver film school

Kenmerken• Lineair

• Geen controle (behalve doorspoelen)

• Kort

• Krachtig

• Goed verhaal

• Video, werkt altijd, simpel te bedienen

• Goed te delen (YouTube)

Data & Realtime Web

Real Time Web• Wat is het?

Kaarten• Oakland Crimespotting: http://oakland.crimespotting.org/

Kaarten• Mapumental Channel 4

The Whale Hunt• Jonathan Harris: http://thewhalehunt.org

Kenmerken• Meer data beschikbaar (overheden)

• Meer “emotionele data” beschikbaar via sociale netwerken zoals Twitter, Facebook, Hyves

• Standaarden om snel informatie uit te kunnen wisselen

Kaarten!• Open Source Streetmap, sneller bijgewerkt: http://

www.fastcompany.com/1554072/open-source-developers-help-the-world-bank-save-lives-in-haiti

• Beste kaart van Bagdad: http://www.bespacific.com/mt/archives/014041.html

Data visualisatietools• IBM ManyEyes: http://manyeyes.alphaworks.ibm.com/

manyeyes

Data visualisatietools• XTimeline: http://xtimeline.com

Data visualisatietools• Wordle: http://www.wordle.net/

Data visualisatietools• Tableaux: http://www.tableausoftware.com/products/tour

Data visualisatietools• Swivel: http://www.swivel.com/

Data visualisatietools• Google Chart API: http://code.google.com/apis/charttools/

Data visualisatietools• Gapminder: http://www.gapminder.org

Data visualisatietools• Google Public Data Explorer: http://www.google.com/

publicdata/home

Kenmerken• Diensten

• Eenvoudig

• Snel

• Goedkoop

• Toegankelijk voor iedereen

• Embeddable

• Grootste nadeel is niet in eigen huisstijl, niet alles is mogelijk, geen eigenaar van informatie. Komt allemaal wel steeds meer

Verhaal vertellen

Waar begin je?• Wat wil je vertellen?

• Voor wie maak je het?

• Wat is je beschikbare informatie?

• Hoe deel je het?

• Waarom wil iemand het zien/lezen/klikken?

• Wat voegt het toe t.o.v. bestaande media?

Tips• Hoe lang kan iemand zijn aandacht erbij houden?

• Mensen hebben controle, een muis vast. Wat kunnen ze doen?

• Wat voegt interactie toe?

• Kost het meer tijd dan een tekstverhaal om te maken?

• Is het duidelijker in beeld?

Suggestie door beeld• Obamaʼs weergave van de “Road to recovery” via

beeldtaal.boom.nl / mybarackobama.com

Beeldstrategie• Visueel specialist Edward Tufte in Obama adviesgroep

om data inzichtelijk te maken: http://vizthink.com/blog/2010/03/08/tufte-appointed-by-obama-to-recovery-independent-advisory-panel/

Opdracht

Verkiezingen• 9 juni 2010, Tweede Kamerverkiezingen

• Hoe breng je als krant of televisiezender de verkiezingen online interactief in beeld voor je lezers?

• In de aanloop naar de verkiezingen en tijdens de verkiezingen?

Enkele voorbeelden

Verkiezingen 2006Uitslag Rotterdam

Meest opgevraagde gemeenten

Rotterdam (CDA)

Amsterdam (PvdA)

Utrecht (Groen Links)

Hilversum (PvdA)

Utrecht (VVD)

Rotterdam (D66)

Amsterdam (PvdA)

Laatst binnengekomen gemeenten

Rotterdam (PvdA)

Amsterdam (CDA)

Utrecht (D66)

Hilversum (PvdA

Utrecht (Groen Links)

Rotterdam (Partij voor de Dieren)

Amsterdam (SGP)

Bekijk de uitslag per gemeente

Uitslag in Rotterdam na 157.957 stemmen

1. CDA 20.234 stemmen 50 %

2. VVD 19.435 stemmen 49 %

3. PvdA 15.786 stemmen 40 %

4. D66 11.456 stemmen 33 %

5. Groen Links 11.753 stemmen 33 %

6. CDA 20.234 stemmen 50 %

7. VVD 19.435 stemmen 49 %

8. PvdA 15.786 stemmen 40 %

9. D66 11.456 stemmen 33 %

10. Partij voor de Dieren 11.753 stemmen 33 %

11. CDA 20.234 stemmen 50 %

12. VVD 19.435 stemmen 49 %

Opkomst in Rotterdam 78 % 200.000 mensen van de 300.000 kiesgerechtigden

Andere gemeenten met ongeveer evenveel kiezers als Rotterdam zijn:

Amsterdam (350.000), Groningen (175.000), Utrecht (170.000)

Kies Provincie

Kies Gemeente

Deze pagina automatisch ververseniedere 1 min. 5 min. 10 min.

Enkele voorbeelden• NY Times Expit Polls: http://elections.nytimes.com/2008/

results/president/exit-polls.html

Enkele voorbeelden• What Twitter Votes: http://www.hypernarrative.com/

wordpress/2008/11/04/analyzed-what-twitter-votes-graphic/

Enkele voorbeelden• Election results overzicht: http://infosthetics.com/archives/

2008/11/question_what_is_the_best_us_election_result_graph.html

• Zoekopdracht Partij voor de Dieren: http://www.google.com/insights/search/?hl=nl#q=Partij%20voor%20de%20Dieren&geo=NL&date=today%2012-m&cmpt=geo

Enkele voorbeelden

Verkiezingen• 9 juni 2010, Tweede Kamerverkiezingen

• Wat vertel je?

• Wat voeg je toe?

• Welke data is er? Hoe maak je nieuwe informatie?

• Voor wie vertel je het? Hoe betrek je mensen?

• Wat willen mensen weten?

Data• Historische informatie

• Peilingen

• Nog niet binnen (live)

• Laatst binnen gekomen gemeenten

• Opkomstpercentage per gemeente, provincie, landelijk

• Aantal stemmen per gemeente, provincie, landelijk

• Uitslag per gemeente, provincie, landelijk

• Etc.

Presentatie data visualisatie, interactive storytelling

Design

Presentatie Carrefour

We are True: Presentatie Storytelling - Bert ter Horst #waardevol2014

Recruitr presentatie

Introductie en situering - Visualisatie: data in beeld

Presentatie Prototyping

Presentatie speedart

Marts | 3d visualisatie -- Manhattan Kitchen

Presentatie onderzoek meetingindustrie in Vlaanderen_ presentatie Kimburg

Jquery presentatie

Presentatie powershell

Presentatie smc070 storytelling: mensinga en havermans

Presentatie onderzoek meetingindustrie in Vlaanderen_ presentatie Gent

Geo-Informatiesystemen: theorie en visualisatie

HANDOUT Presentatie Patrick Petersen - conversie & storytelling #multichannel14 #mc14 april 2014 te Jaarbeurs

BA Summit 2014 Haal heldere inzichten uit complexe data met visualisatie

Erik Boertjes (TNO) @ Tech Update Big Data Visualisatie

Presentatie 1We

Minor Visualisatie

Zoetermeer presentatie

Presentatie Carrierebeurs