Presentatie data visualisatie, interactive storytelling

Maps & Graphics
Nieuwe Media Dagen

Wilbert Baan / 30 maart 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 ﬁgurative 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 conﬂict
• 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 ﬁlm
An Inconvenient Truth.


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
• Iran: a Nation of Bloggers door Vancouver ﬁlm 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


Tools


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.bespaciﬁc.com/mt/
archives/014041.html


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


• XTimeline: http://xtimeline.com


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


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


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


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


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


• 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
Uitslag Rotterdam Deze pagina automatisch verversen
iedere 1 min. 5 min. 10 min. Verkiezingen 2006

Meest opgevraagde gemeenten
Rotterdam (CDA)
Amsterdam (PvdA)
Utrecht (Groen Links)
Hilversum (PvdA)
Utrecht (VVD)
Rotterdam (D66)
Uitslag in Rotterdam na 157.957 stemmen Amsterdam (PvdA)

1. CDA 20.234 stemmen 50 % Laatst binnengekomen gemeenten
2. VVD 19.435 stemmen 49 % Rotterdam (PvdA)
3. PvdA 15.786 stemmen 40 %
Amsterdam (CDA)
4. D66 11.456 stemmen 33 %
Utrecht (D66)
5. Groen Links 11.753 stemmen 33 %
Hilversum (PvdA
6. CDA 20.234 stemmen 50 %
Utrecht (Groen Links)
7. VVD 19.435 stemmen 49 %
8. PvdA 15.786 stemmen 40 % Rotterdam (Partij voor de Dieren)
9. D66 11.456 stemmen 33 % Amsterdam (SGP)
10. Partij voor de Dieren 11.753 stemmen 33 %
11. CDA 20.234 stemmen 50 % Bekijk de uitslag per gemeente
12. VVD 19.435 stemmen 49 % Kies Provincie
Kies Gemeente

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)


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.ht
ml

• 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

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (20)

Semelhante a Presentatie data visualisatie, interactive storytelling

Semelhante a Presentatie data visualisatie, interactive storytelling (6)

Mais de Wilbert Baan

Mais de Wilbert Baan (7)

Presentatie data visualisatie, interactive storytelling