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
Thursday, April 1, 2010
Programma• Korte introductie infographics
• Interactive storytelling
• Powerpoint Cinema
• Data & Realtime Web
• Tools
• Opdracht
Thursday, April 1, 2010
Infographics
Thursday, April 1, 2010
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
Thursday, April 1, 2010
Beeld sterker dan woorden• sugarstacks.com
Thursday, April 1, 2010
Kranten en magazines
Thursday, April 1, 2010
Kranten en magazines
Thursday, April 1, 2010
Frisia-Nederland conflict• Afstudeerproject Ruiter Janssen WDKA
Thursday, April 1, 2010
Kranten en magazines
Thursday, April 1, 2010
Design• 10 Billion Tweets
Thursday, April 1, 2010
Design• What Are People Really Buying Online?
Thursday, April 1, 2010
Kenmerken• Statisch
• Beeldend
• Helder
• Duidelijk
• Groot
• Informatief
Thursday, April 1, 2010
Interactive storytelling
Thursday, April 1, 2010
Interactie• De tijdlijn: http://www.nytimes.com/interactive/2009/07/19/
us/politics/20090717_HEALTH_TIMELINE.html
Thursday, April 1, 2010
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
Thursday, April 1, 2010
Interactie• De kaart: http://www.nytimes.com/interactive/2010/03/09/
dining/20100309-new-york-coffee-map.html?src=tp
Thursday, April 1, 2010
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/
Thursday, April 1, 2010
Beeld• Artscope: http://www.sfmoma.org/projects/artscope/
#r=982&artwork=16581&zoom=9
Thursday, April 1, 2010
Beeld• Niet meer alleen van instellingen, jaarverslag KPMG:
http://jaarverslag.kpmg.nl/#view=00043
• Meer op: http://delicious.com/wilbertbaan/storytelling?detail=3
Thursday, April 1, 2010
Kenmerken• Veel werk
• Duur
• Duidelijk
• Logisch vervolg op de statische infographic
• Van simpel tot storytelling
• Beperkte interactie
Thursday, April 1, 2010
Powerpoint Cinema en uitleganimaties
Thursday, April 1, 2010
Al Gore• Heeft powerpoint cinema op de kaart gezet met de film
An Inconvenient Truth.
Thursday, April 1, 2010
Al Gore• Heeft powerpoint cinema op de kaart gezet met de film
An Inconvenient Truth.
Thursday, April 1, 2010
Animatie• De animatie Empires laat zien hoe de verhoudingen
waren door de tijd.
Thursday, April 1, 2010
Animatie• De animatie Empires laat zien hoe de verhoudingen
waren door de tijd.
Thursday, April 1, 2010
Explanimation• The Credit Crunch legt eenvoudig uit, hoe de crisis is
ontstaan
Thursday, April 1, 2010
Explanimation• The Credit Crunch legt eenvoudig uit, hoe de crisis is
ontstaan
Thursday, April 1, 2010
Explanimation• Iran: a Nation of Bloggers door Vancouver film school
Thursday, April 1, 2010
Explanimation• Iran: a Nation of Bloggers door Vancouver film school
Thursday, April 1, 2010
Kenmerken• Lineair
• Geen controle (behalve doorspoelen)
• Kort
• Krachtig
• Goed verhaal
• Video, werkt altijd, simpel te bedienen
• Goed te delen (YouTube)
Thursday, April 1, 2010
Data & Realtime Web
Thursday, April 1, 2010
Real Time Web• Wat is het?
Thursday, April 1, 2010
Kaarten• Oakland Crimespotting: http://oakland.crimespotting.org/
Thursday, April 1, 2010
Kaarten• Mapumental Channel 4
Thursday, April 1, 2010
Kaarten• Mapumental Channel 4
Thursday, April 1, 2010
The Whale Hunt• Jonathan Harris: http://thewhalehunt.org
Thursday, April 1, 2010
Kenmerken• Meer data beschikbaar (overheden)
• Meer “emotionele data” beschikbaar via sociale netwerken zoals Twitter, Facebook, Hyves
• Standaarden om snel informatie uit te kunnen wisselen
Thursday, April 1, 2010
Tools
Thursday, April 1, 2010
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
Thursday, April 1, 2010
Data visualisatietools• IBM ManyEyes: http://manyeyes.alphaworks.ibm.com/
manyeyes
Thursday, April 1, 2010
Data visualisatietools• XTimeline: http://xtimeline.com
Thursday, April 1, 2010
Data visualisatietools• Wordle: http://www.wordle.net/
Thursday, April 1, 2010
Data visualisatietools• Tableaux: http://www.tableausoftware.com/products/tour
Thursday, April 1, 2010
Data visualisatietools• Swivel: http://www.swivel.com/
Thursday, April 1, 2010
Data visualisatietools• Google Chart API: http://code.google.com/apis/charttools/
Thursday, April 1, 2010
Data visualisatietools• Gapminder: http://www.gapminder.org
Thursday, April 1, 2010
Data visualisatietools• Google Public Data Explorer: http://www.google.com/
publicdata/home
Thursday, April 1, 2010
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
Thursday, April 1, 2010
Verhaal vertellen
Thursday, April 1, 2010
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?
Thursday, April 1, 2010
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?
Thursday, April 1, 2010
Suggestie door beeld• Obamaʼs weergave van de “Road to recovery” via
beeldtaal.boom.nl / mybarackobama.com
Thursday, April 1, 2010
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/
Thursday, April 1, 2010
Opdracht
Thursday, April 1, 2010
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?
Thursday, April 1, 2010
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.
Thursday, April 1, 2010
Enkele voorbeelden• NY Times Expit Polls: http://elections.nytimes.com/2008/
results/president/exit-polls.html
Thursday, April 1, 2010
Enkele voorbeelden• What Twitter Votes: http://www.hypernarrative.com/
wordpress/2008/11/04/analyzed-what-twitter-votes-graphic/
Thursday, April 1, 2010
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
Thursday, April 1, 2010
Enkele voorbeelden
Thursday, April 1, 2010
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?
Thursday, April 1, 2010
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.
Thursday, April 1, 2010