Presentatie data visualisatie, interactive storytelling

Maps & Graphics Nieuwe Media Dagen Wilbert Baan / 30 maart 2010 Thursday, 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 ﬁgurative 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

Frisia-Nederland conﬂict • 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 • Print • 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 ﬁlm An Inconvenient Truth. 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 • Iran: a Nation of Bloggers door Vancouver ﬁlm 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

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.bespaciﬁc.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 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) 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.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 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

http://www.erwinblom.nl	70
http://www.somehow.be	49
http://erwinblom.squarespace.com	33
http://www.slideshare.net	17
http://celinebonami.wordpress.com	9
http://windesheim.posterous.com	6
http://winnydejong.tumblr.com	6
http://mxm-storytelling.posterous.com	4
http://static.slidesharecdn.com	2
http://dvanhoudt.posterous.com	1
http://www.linkedin.com	1

Presentatie data visualisatie, interactive storytelling

by Wilbert Baan

Accessibility

Categories

Upload Details

Usage Rights

11 Embeds 198

Statistics

Presentatie data visualisatie, interactive storytelling Presentation Transcript