Workspouse
CrockerHighlandsElem
entarySchool
LuisBarragan(executive)
StarTrek:Enterpriseallegedcontinuityproblems(thirdnom...
Moritz Stefaner
1998 – 2002
2002 – 2005
2005 – 2007
2007 – 2009
2004 –
Web designer
BSc Cognitive Science
MA Interface Des...
DATA VISUALIZATION &
INFORMATION AESTHETICS
PAST, PRESENT, FUTURE
~ 6000BC: early maps
First quantitative abstractionsKirkuk, Iraque. The original was
carved in stone.
Herodotus. Anaximander of
Miletus (c.610B...
14th century: Abraham Cresques
~1500: Leonardo da Vinci
Yay! The first pie chart! (Playfair 1801)
19th century: The golden age of infographics
19th century: The golden age of infographics
datavis.ca/milestones
Otto Neurath
John Tukey: Exploratory data analysis
John Tukey et al: PRIM-9 system (1972)
Open Street maps: One year of edits (2008) ITO WORLD
“INFOPORN” density design lab for wired.it
http://manyeyes.com
1HR IN FRONT OF THE TV http://www.flickr.com/photos/the_bumblebee/2229041742/sizes/o/
Microsoft: Sustainability (vision video, 2009) http://ohhello.tv/index.php/work/view/microsoft_sustainability/
PROJECTS
well–formed.eigenfactor
X by Y
revisit
map your moves
well-formed.eigenfactor
Moritz Stefaner & Eigenfactor Team, 2009 | http://well-formed.eigenfactor.org
Demos
Demos
Demos
Demos
Hierarchical Edge Bundling
Danny Holten: Hierarchical Edge Bundles: Visualization of Adjacency Relations in Hierarchical D...
Visual tweaks
X by Y
http://moritz.stefaner.eu/projects/x-by-y/
First guesses of what might be interesting
Ein-
reichung
X
Ein-
reichung
X
X
X
X
X
Winner?
Winner?
Keywords
XKategorie
Jah...
What’s in the databases http://well-formed-data.net/archives/306/dbcounter-quick-visual-database-stats
Wattenberg. A Note on Space-Filling Visualizations and Space-Filling Curves .
!
!
!"#$%&'E)'F1"D#'.D'345$%6&'A+'5%&.A&'.':...
Looking at Data Through the Eyes of Experts
/Theory/In/Practice
Beautiful
Visualization
Edited by
Julie Steele
& Noah Ilii...
Revisit
http://moritz.stefaner.eu/projects/revisit-twitter-visualization/
SOCIALCOLLIDER.NET Sascha Pohflepp & Toxi | http://socialcollider.net/
Map your moves
Hermann Zschiegner | http://www.two-n.com
http://www.a-stranger.com/
http://www.scottleta.com/
EXPLORATION >< EXPLANATION
“The pure and simple truth is
rarely pure and
never simple.”
Oscar Wilde
New York Times graphics http://www.nytimes.com/interactive/2010/02/02/us/politics/
Segel and Heer. Narrative Visualization: Telling Stories with Data.
ucture
ation structure be-
approach, initially
ns, or ...
relevance
function
integrity
form
Information
Design
Based on a draft by David McCandless
acquire parse filter mine represent refine interact
COMPUTER SCIENCE STATISTICS VISUAL DESIGN UI DESIGN
Based on Ben Fry’s P...
acquire parse filter mine represent refine interact
COMPUTER SCIENCE STATISTICS VISUAL DESIGN UI DESIGN
Mind Sketch
create
read
Based on an illustration in Bill Buxton: Sketching User Experiences
moritz.stefaner.eu
infosthetics.com
flowingdata.com
Thanks!
Q?
A!
http://moritz.stefaner.eu
Lasst die Daten sprechen
Lasst die Daten sprechen
Lasst die Daten sprechen
Lasst die Daten sprechen
Lasst die Daten sprechen
Lasst die Daten sprechen
Lasst die Daten sprechen
Lasst die Daten sprechen
Lasst die Daten sprechen
Lasst die Daten sprechen
Lasst die Daten sprechen
Lasst die Daten sprechen
Lasst die Daten sprechen
Lasst die Daten sprechen
Lasst die Daten sprechen
Lasst die Daten sprechen
Lasst die Daten sprechen
Lasst die Daten sprechen
Lasst die Daten sprechen
Lasst die Daten sprechen
Lasst die Daten sprechen
Lasst die Daten sprechen
Lasst die Daten sprechen
Lasst die Daten sprechen
Lasst die Daten sprechen
Lasst die Daten sprechen
Lasst die Daten sprechen
Lasst die Daten sprechen
Lasst die Daten sprechen
Lasst die Daten sprechen
Lasst die Daten sprechen
Lasst die Daten sprechen
Lasst die Daten sprechen
Lasst die Daten sprechen
Lasst die Daten sprechen
Lasst die Daten sprechen
Lasst die Daten sprechen
Lasst die Daten sprechen
Lasst die Daten sprechen
Lasst die Daten sprechen
Lasst die Daten sprechen
Lasst die Daten sprechen
Lasst die Daten sprechen
Lasst die Daten sprechen
Lasst die Daten sprechen
Lasst die Daten sprechen
Lasst die Daten sprechen
Lasst die Daten sprechen
Lasst die Daten sprechen
Lasst die Daten sprechen
Lasst die Daten sprechen
Lasst die Daten sprechen
Lasst die Daten sprechen
Lasst die Daten sprechen
Lasst die Daten sprechen
Lasst die Daten sprechen
Lasst die Daten sprechen
Lasst die Daten sprechen
Lasst die Daten sprechen
Lasst die Daten sprechen
Upcoming SlideShare
Loading in …5
×

Lasst die Daten sprechen

6,456 views
6,344 views

Published on

My presentation at the decoded conference Munich, October 23, 2010

Published in: Design, Education, Spiritual
1 Comment
7 Likes
Statistics
Notes
No Downloads
Views
Total views
6,456
On SlideShare
0
From Embeds
0
Number of Embeds
2,030
Actions
Shares
0
Downloads
64
Comments
1
Likes
7
Embeds 0
No embeds

No notes for slide

Lasst die Daten sprechen

  1. 1. Workspouse CrockerHighlandsElem entarySchool LuisBarragan(executive) StarTrek:Enterpriseallegedcontinuityproblems(thirdnomination) Fairm ontPreparatoryAcadem y(2nd nom ination) Listoffictionaltelevisionstations Ev Jeopardy!inpopularculture(2ndnomination) Centralskolan,Staffanstorp Hayah EasternAlliance Philadelphiamayoralelection,2007 ListofItaliandivisionsinWWII Republican/Dem ocratIn Nam e Only SuvalkaiRegion CityofthePyramids H JoiIto MichelleStith Matthe LonelySwedish(TheBumBumSong) V7ndotcomElursrebmem JoshuaP.Warren Listoflargestempires(3rdnomination) NewsMaxMedia ReubenRestaurant Romapeoplenationalfootballteam (2ndnomination) Blanketclemency Scottishinventions KOS-MOS CommunityMiddleSchool ChuckieMullins Lasst die Daten sprechen! Datenvisualisierung und Informations-Aesthetik Moritz Stefaner decoded conference // München, Oktober 2010
  2. 2. Moritz Stefaner 1998 – 2002 2002 – 2005 2005 – 2007 2007 – 2009 2004 – Web designer BSc Cognitive Science MA Interface Design Research assistant FH Potsdam Freelance information visualizer working for Skype, World Economic Forum, dpa, Yahoo…
  3. 3. DATA VISUALIZATION & INFORMATION AESTHETICS PAST, PRESENT, FUTURE
  4. 4. ~ 6000BC: early maps
  5. 5. First quantitative abstractionsKirkuk, Iraque. The original was carved in stone. Herodotus. Anaximander of Miletus (c.610BC-546BC). c. 950 First known record of showing variables graphically (position of the sun, moon and planets during the year). c. 1350 The French Bishop Nicole Oresme (1323-1382) proposes the use of bar graphics to demonstrate a variable that depends on another value. M Denis and MJ Friendly : “Milestones in the History of Data Visualization”
  6. 6. 14th century: Abraham Cresques
  7. 7. ~1500: Leonardo da Vinci
  8. 8. Yay! The first pie chart! (Playfair 1801)
  9. 9. 19th century: The golden age of infographics
  10. 10. 19th century: The golden age of infographics
  11. 11. datavis.ca/milestones
  12. 12. Otto Neurath
  13. 13. John Tukey: Exploratory data analysis
  14. 14. John Tukey et al: PRIM-9 system (1972)
  15. 15. Open Street maps: One year of edits (2008) ITO WORLD
  16. 16. “INFOPORN” density design lab for wired.it
  17. 17. http://manyeyes.com
  18. 18. 1HR IN FRONT OF THE TV http://www.flickr.com/photos/the_bumblebee/2229041742/sizes/o/
  19. 19. Microsoft: Sustainability (vision video, 2009) http://ohhello.tv/index.php/work/view/microsoft_sustainability/
  20. 20. PROJECTS well–formed.eigenfactor X by Y revisit map your moves
  21. 21. well-formed.eigenfactor Moritz Stefaner & Eigenfactor Team, 2009 | http://well-formed.eigenfactor.org
  22. 22. Demos
  23. 23. Demos
  24. 24. Demos
  25. 25. Demos
  26. 26. Hierarchical Edge Bundling Danny Holten: Hierarchical Edge Bundles: Visualization of Adjacency Relations in Hierarchical Data, IEEE Transactions on Visualization and Computer Graphics, Vol. 12, No. 5, September/October 2006 Danny Holten and Jarke J. van Wijk: Force-Directed Edge Bundling for Graph Visualization, Eurographics/ IEEE-VGTC Symposium on Visualization 2009, Volume 28 (2009), Number 3
  27. 27. Visual tweaks
  28. 28. X by Y http://moritz.stefaner.eu/projects/x-by-y/
  29. 29. First guesses of what might be interesting Ein- reichung X Ein- reichung X X X X X Winner? Winner? Keywords XKategorie Jahr X X XXLand XAutor XX KeywordsKategorieJahrLandAutor
  30. 30. What’s in the databases http://well-formed-data.net/archives/306/dbcounter-quick-visual-database-stats
  31. 31. Wattenberg. A Note on Space-Filling Visualizations and Space-Filling Curves . ! ! !"#$%&'E)'F1"D#'.D'345$%6&'A+'5%&.A&'.':"#1.;'<./)' ' '
  32. 32. Looking at Data Through the Eyes of Experts /Theory/In/Practice Beautiful Visualization Edited by Julie Steele & Noah Iliinsky
  33. 33. Revisit http://moritz.stefaner.eu/projects/revisit-twitter-visualization/
  34. 34. SOCIALCOLLIDER.NET Sascha Pohflepp & Toxi | http://socialcollider.net/
  35. 35. Map your moves
  36. 36. Hermann Zschiegner | http://www.two-n.com
  37. 37. http://www.a-stranger.com/
  38. 38. http://www.scottleta.com/
  39. 39. EXPLORATION >< EXPLANATION
  40. 40. “The pure and simple truth is rarely pure and never simple.” Oscar Wilde
  41. 41. New York Times graphics http://www.nytimes.com/interactive/2010/02/02/us/politics/
  42. 42. Segel and Heer. Narrative Visualization: Telling Stories with Data. ucture ation structure be- approach, initially ns, or written articles to introduce the vi- no text is used at all, as the visualization ing default view or annotations. Once the is complete, the visualization opens up to the user is free to interactively explore the es a martini glass, with the stem represent- driven narrative and the widening mouth he available paths made possible through Using this image, we can think of varying ion, observation, article) as corresponding ort, long), and varying degrees of reader- path-choosing) corresponding to different ese permutations, the general structure re- es a martini glass, with the stem represent- driven narrative and the widening mouth he available paths made possible through Using this image, we can think of varying ion, observation, article) as corresponding ort, long), and varying degrees of reader- path-choosing) corresponding to different se permutations, the general structure re- or-driven narrative functioning first, then reader-driven interactions. The authoring jumping off point for the reader’s interac- ations, and themes suggesting the types of re on his own. This structure is the most ive visualizations we examined. how tructure follows a t incorporates in- in the confines of each slide. This structure xplore particular points of the presentation next stage of the story. We saw this struc- yle, again communicating author-intended g the user to interact with the display. work well with both complex datasets and atasets, this structure allows the author to a-dimensions and manipulations step-by- ser only moves forward in the presentation nd allows the user to repeat steps if desired. s format allows the author to draw discrete nt story segments, similar to a cut in film. alization structure nd then allows the cular instances of that theme to reveal addi- es. For instance, the theme might be “His- 1] and the visualization will allow the user r bear market to learn more about its his- North Korean Prison Camps” [A38] may e about individual camps by clicking on a p. This structure puts more emphasis on the ting the user dictate what stories are told Martini glass structure Drill–down story Interactive slideshow
  43. 43. relevance function integrity form Information Design Based on a draft by David McCandless
  44. 44. acquire parse filter mine represent refine interact COMPUTER SCIENCE STATISTICS VISUAL DESIGN UI DESIGN Based on Ben Fry’s PhD Thesis: Computational Information Design
  45. 45. acquire parse filter mine represent refine interact COMPUTER SCIENCE STATISTICS VISUAL DESIGN UI DESIGN
  46. 46. Mind Sketch create read Based on an illustration in Bill Buxton: Sketching User Experiences
  47. 47. moritz.stefaner.eu
  48. 48. infosthetics.com
  49. 49. flowingdata.com
  50. 50. Thanks! Q? A! http://moritz.stefaner.eu

×