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, anim...
Programma
      •       Korte introductie infographics

      •       Interactive storytelling

      •       Powerpoint C...
Infographics




Thursday, April 1, 2010
Charles Joseph Minard
      •       Kaart uit 1869 - Carte figurative des pertes successives
              en hommes de l'A...
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

      •       Gro...
Interactive storytelling




Thursday, April 1, 2010
Interactie
      •       De tijdlijn: http://www.nytimes.com/interactive/2009/07/19/
              us/politics/20090717_HE...
Tijdlijnen
      •       BBC Geschiedenis internet: http://news.bbc.co.uk/2/hi/
              technology/8552410.stm

    ...
Interactie
      •       De kaart: http://www.nytimes.com/interactive/2010/03/09/
              dining/20100309-new-york-c...
Kaarten
      •       Clean Water Act Violations: http://www.nytimes.com/
              interactive/2009/09/13/us/0913-wat...
Beeld
      •       Artscope: http://www.sfmoma.org/projects/artscope/
              #r=982&artwork=16581&zoom=9




Thurs...
Beeld
      •       Niet meer alleen van instellingen, jaarverslag KPMG:
              http://jaarverslag.kpmg.nl/#view=00...
Kenmerken
      •       Veel werk

      •       Duur

      •       Duidelijk

      •       Logisch vervolg op de statis...
Powerpoint Cinema en
  uitleganimaties




Thursday, April 1, 2010
Al Gore
      •       Heeft powerpoint cinema op de kaart gezet met de film
              An Inconvenient Truth.




Thursd...
Al Gore
      •       Heeft powerpoint cinema op de kaart gezet met de film
              An Inconvenient Truth.




Thursd...
Animatie
      •       De animatie Empires laat zien hoe de verhoudingen
              waren door de tijd.




Thursday, A...
Animatie
      •       De animatie Empires laat zien hoe de verhoudingen
              waren door de tijd.




Thursday, A...
Explanimation
      •       The Credit Crunch legt eenvoudig uit, hoe de crisis is
              ontstaan




Thursday, Ap...
Explanimation
      •       The Credit Crunch legt eenvoudig uit, hoe de crisis is
              ontstaan




Thursday, Ap...
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

      •       Krac...
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
  ...
Tools




Thursday, April 1, 2010
Kaarten!
      •       Open Source Streetmap, sneller bijgewerkt: http://
              www.fastcompany.com/1554072/open-s...
Data visualisatietools
      •       IBM ManyEyes: http://manyeyes.alphaworks.ibm.com/
              manyeyes




Thursday...
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



...
Kenmerken
      •       Diensten

      •       Eenvoudig

      •       Snel

      •       Goedkoop

      •       Toega...
Verhaal vertellen




Thursday, April 1, 2010
Waar begin je?
      •       Wat wil je vertellen?

      •       Voor wie maak je het?

      •       Wat is je beschikba...
Tips
      •       Hoe lang kan iemand zijn aandacht erbij houden?

      •       Mensen hebben controle, een muis vast. W...
Suggestie door beeld
      •       Obamaʼs weergave van de “Road to recovery” via
              beeldtaal.boom.nl / mybara...
Beeldstrategie
      •       Visueel specialist Edward Tufte in Obama adviesgroep
              om data inzichtelijk te ma...
Opdracht




Thursday, April 1, 2010
Verkiezingen
      •       9 juni 2010, Tweede Kamerverkiezingen


      •       Hoe breng je als krant of televisiezender...
Enkele voorbeelden
      Uitslag Rotterdam                                                       Deze pagina automatisch v...
Enkele voorbeelden
      •       NY Times Expit Polls: http://elections.nytimes.com/2008/
              results/president/...
Enkele voorbeelden
      •       What Twitter Votes: http://www.hypernarrative.com/
              wordpress/2008/11/04/ana...
Enkele voorbeelden
      •       Election results overzicht: http://infosthetics.com/archives/
              2008/11/
    ...
Enkele voorbeelden




Thursday, April 1, 2010
Verkiezingen
      •       9 juni 2010, Tweede Kamerverkiezingen


      •       Wat vertel je?

      •       Wat voeg je...
Data
      •       Historische informatie

      •       Peilingen

      •       Nog niet binnen (live)

      •       La...
Upcoming SlideShare
Loading in...5
×

Presentatie data visualisatie, interactive storytelling

4,058

Published on

Presentatie data visualisatie, interactive storytelling

Published in: Design
0 Comments
16 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,058
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
107
Comments
0
Likes
16
Embeds 0
No embeds

No notes for slide

Presentatie data visualisatie, interactive storytelling

  1. 1. Maps & Graphics Nieuwe Media Dagen Wilbert Baan / 30 maart 2010 Thursday, April 1, 2010
  2. 2. Thursday, April 1, 2010
  3. 3. 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
  4. 4. Programma • Korte introductie infographics • Interactive storytelling • Powerpoint Cinema • Data & Realtime Web • Tools • Opdracht Thursday, April 1, 2010
  5. 5. Infographics Thursday, April 1, 2010
  6. 6. 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
  7. 7. Beeld sterker dan woorden • sugarstacks.com Thursday, April 1, 2010
  8. 8. Kranten en magazines Thursday, April 1, 2010
  9. 9. Kranten en magazines Thursday, April 1, 2010
  10. 10. Frisia-Nederland conflict • Afstudeerproject Ruiter Janssen WDKA Thursday, April 1, 2010
  11. 11. Kranten en magazines Thursday, April 1, 2010
  12. 12. Design • 10 Billion Tweets Thursday, April 1, 2010
  13. 13. Design • What Are People Really Buying Online? Thursday, April 1, 2010
  14. 14. Kenmerken • Statisch • Beeldend • Helder • Duidelijk • Groot • Print • Informatief Thursday, April 1, 2010
  15. 15. Interactive storytelling Thursday, April 1, 2010
  16. 16. Interactie • De tijdlijn: http://www.nytimes.com/interactive/2009/07/19/ us/politics/20090717_HEALTH_TIMELINE.html Thursday, April 1, 2010
  17. 17. 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
  18. 18. Interactie • De kaart: http://www.nytimes.com/interactive/2010/03/09/ dining/20100309-new-york-coffee-map.html?src=tp Thursday, April 1, 2010
  19. 19. 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
  20. 20. Beeld • Artscope: http://www.sfmoma.org/projects/artscope/ #r=982&artwork=16581&zoom=9 Thursday, April 1, 2010
  21. 21. 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
  22. 22. Kenmerken • Veel werk • Duur • Duidelijk • Logisch vervolg op de statische infographic • Van simpel tot storytelling • Beperkte interactie Thursday, April 1, 2010
  23. 23. Powerpoint Cinema en uitleganimaties Thursday, April 1, 2010
  24. 24. Al Gore • Heeft powerpoint cinema op de kaart gezet met de film An Inconvenient Truth. Thursday, April 1, 2010
  25. 25. Al Gore • Heeft powerpoint cinema op de kaart gezet met de film An Inconvenient Truth. Thursday, April 1, 2010
  26. 26. Animatie • De animatie Empires laat zien hoe de verhoudingen waren door de tijd. Thursday, April 1, 2010
  27. 27. Animatie • De animatie Empires laat zien hoe de verhoudingen waren door de tijd. Thursday, April 1, 2010
  28. 28. Explanimation • The Credit Crunch legt eenvoudig uit, hoe de crisis is ontstaan Thursday, April 1, 2010
  29. 29. Explanimation • The Credit Crunch legt eenvoudig uit, hoe de crisis is ontstaan Thursday, April 1, 2010
  30. 30. Explanimation • Iran: a Nation of Bloggers door Vancouver film school Thursday, April 1, 2010
  31. 31. Explanimation • Iran: a Nation of Bloggers door Vancouver film school Thursday, April 1, 2010
  32. 32. Kenmerken • Lineair • Geen controle (behalve doorspoelen) • Kort • Krachtig • Goed verhaal • Video, werkt altijd, simpel te bedienen • Goed te delen (YouTube) Thursday, April 1, 2010
  33. 33. Data & Realtime Web Thursday, April 1, 2010
  34. 34. Real Time Web • Wat is het? Thursday, April 1, 2010
  35. 35. Kaarten • Oakland Crimespotting: http://oakland.crimespotting.org/ Thursday, April 1, 2010
  36. 36. Kaarten • Mapumental Channel 4 Thursday, April 1, 2010
  37. 37. Kaarten • Mapumental Channel 4 Thursday, April 1, 2010
  38. 38. The Whale Hunt • Jonathan Harris: http://thewhalehunt.org Thursday, April 1, 2010
  39. 39. 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
  40. 40. Tools Thursday, April 1, 2010
  41. 41. 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
  42. 42. Data visualisatietools • IBM ManyEyes: http://manyeyes.alphaworks.ibm.com/ manyeyes Thursday, April 1, 2010
  43. 43. Data visualisatietools • XTimeline: http://xtimeline.com Thursday, April 1, 2010
  44. 44. Data visualisatietools • Wordle: http://www.wordle.net/ Thursday, April 1, 2010
  45. 45. Data visualisatietools • Tableaux: http://www.tableausoftware.com/products/tour Thursday, April 1, 2010
  46. 46. Data visualisatietools • Swivel: http://www.swivel.com/ Thursday, April 1, 2010
  47. 47. Data visualisatietools • Google Chart API: http://code.google.com/apis/charttools/ Thursday, April 1, 2010
  48. 48. Data visualisatietools • Gapminder: http://www.gapminder.org Thursday, April 1, 2010
  49. 49. Data visualisatietools • Google Public Data Explorer: http://www.google.com/ publicdata/home Thursday, April 1, 2010
  50. 50. 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
  51. 51. Verhaal vertellen Thursday, April 1, 2010
  52. 52. 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
  53. 53. 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
  54. 54. Suggestie door beeld • Obamaʼs weergave van de “Road to recovery” via beeldtaal.boom.nl / mybarackobama.com Thursday, April 1, 2010
  55. 55. 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
  56. 56. Opdracht Thursday, April 1, 2010
  57. 57. 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
  58. 58. 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
  59. 59. Enkele voorbeelden • NY Times Expit Polls: http://elections.nytimes.com/2008/ results/president/exit-polls.html Thursday, April 1, 2010
  60. 60. Enkele voorbeelden • What Twitter Votes: http://www.hypernarrative.com/ wordpress/2008/11/04/analyzed-what-twitter-votes- graphic/ Thursday, April 1, 2010
  61. 61. 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
  62. 62. Enkele voorbeelden Thursday, April 1, 2010
  63. 63. 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
  64. 64. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×