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

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. 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. DATA VISUALIZATION &
INFORMATION AESTHETICS
PAST, PRESENT, FUTURE

4. ~ 6000BC: early maps

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. 14th century: Abraham Cresques

7. ~1500: Leonardo da Vinci

8. Yay! The first pie chart! (Playfair 1801)

9. 19th century: The golden age of infographics

11. 19th century: The golden age of infographics

12. datavis.ca/milestones

13. Otto Neurath

14. John Tukey: Exploratory data analysis

15. John Tukey et al: PRIM-9 system (1972)

16. Open Street maps: One year of edits (2008) ITO WORLD

18. “INFOPORN” density design lab for wired.it

19. http://manyeyes.com

20. 1HR IN FRONT OF THE TV http://www.flickr.com/photos/the_bumblebee/2229041742/sizes/o/

22. Microsoft: Sustainability (vision video, 2009) http://ohhello.tv/index.php/work/view/microsoft_sustainability/

23. PROJECTS
well–formed.eigenfactor
X by Y
revisit
map your moves

24. well-formed.eigenfactor
Moritz Stefaner & Eigenfactor Team, 2009 | http://well-formed.eigenfactor.org

25. Demos

26. Demos

27. Demos

29. Demos

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

31. Visual tweaks

42. X by Y
http://moritz.stefaner.eu/projects/x-by-y/

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

53. What’s in the databases http://well-formed-data.net/archives/306/dbcounter-quick-visual-database-stats

60. Wattenberg. A Note on Space-Filling Visualizations and Space-Filling Curves .
!
!
!"#$%&'E)'F1"D#'.D'345$%6&'A+'5%&.A&'.':"#1.;'<./)'
'
'

63. Looking at Data Through the Eyes of Experts
/Theory/In/Practice
Beautiful
Visualization
Edited by
Julie Steele
& Noah Iliinsky

64. Revisit
http://moritz.stefaner.eu/projects/revisit-twitter-visualization/

66. SOCIALCOLLIDER.NET Sascha Pohflepp & Toxi | http://socialcollider.net/

84. Map your moves

94. Hermann Zschiegner | http://www.two-n.com

95. http://www.a-stranger.com/

96. http://www.scottleta.com/

98. EXPLORATION >< EXPLANATION

99. “The pure and simple truth is
rarely pure and
never simple.”
Oscar Wilde

100. New York Times graphics http://www.nytimes.com/interactive/2010/02/02/us/politics/

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

102. relevance
function
integrity
form
Information
Design
Based on a draft by David McCandless

103. acquire parse filter mine represent refine interact
COMPUTER SCIENCE STATISTICS VISUAL DESIGN UI DESIGN
Based on Ben Fry’s PhD Thesis: Computational Information Design

104. acquire parse filter mine represent refine interact
COMPUTER SCIENCE STATISTICS VISUAL DESIGN UI DESIGN

105. Mind Sketch
create
read
Based on an illustration in Bill Buxton: Sketching User Experiences

106. moritz.stefaner.eu

107. infosthetics.com

108. flowingdata.com

110. Thanks!
Q?
A!
http://moritz.stefaner.eu