Lecture for Capita Selecta - Infovis course at Computer Science - KU Leuven

1. Capita Selecta - Infovis
The Symbiosis of Visualization & Design
a/prof. Andrew Vande Moere
Design Lab - Department ASRO - KU Leuven
------.----------@asro.kuleuven.be - http://infosthetics.com - @infosthetics

3. Hackers - United Artists - 1996

4. Tron - The Electronic Gladiator - 1982

5. Johnny Mnemonic - Tristar Pictures -1995

6. Cyber Swap Worlds - 1997

7. City of News - MIT Media Lab - 1997

8. VR/Search - Andrew Vande Moere - 1998

9. VR Data Visualization - ETH-Zurich

10. Information Visualization for Immersive VR - Andrew Vande Moere - 2004
http://www.youtube.com/watch?v=AZmcrVplqDU
VR Data Visualization

11. Stock Market Swarm - Andrew Vande Moere - 2004
http://www.youtube.com/watch?v=LjUZ6vcTc1Q

12. Stock Market Swarm - Andrew Vande Moere - 2004
http://www.youtube.com/watch?v=LjUZ6vcTc1Q

13. University Finances Visualization - Andrew Vande Moere - 2003

14. University Finances Visualization - Andrew Vande Moere - 2003
http://www.youtube.com/watch?v=duxjQKgYtNY

15. Information Aesthetics - “Where Form Follows Data” - http://infosthetics.com

17. ThemeRiver - pnl.gov - 1999
http://vis.pnnl.gov/pdf/themeriver99.pdf

18. ThemeRiver - pnl.gov - 1999
http://vis.pnnl.gov/pdf/themeriver99.pdf

19. Stacked Graphs – Geometry & Aesthetics - StreamGraphs - Lee Byron - 2007
http://www.leebyron.com/else/streamgraph/

20. The Ebb and Flow of Movies - The New York Times
http://www.nytimes.com/interactive/2008/02/23/movies/20080223_REVENUE_GRAPHIC.html

21. From “research” in visualization to visualization “practice”

22. Movie Narrative Charts - Randall Munroe - xkcd
http://xkcd.com/657/large/

23. z
Software Evolution Storylines - Ogawa and Ma - 2010
http://www.michaelogawa.com/research/storylines/

24. Software Evolution Storylines - Ogawa and Ma - 2010
http://www.michaelogawa.com/research/storylines/

25. Design Considerations for Optimizing Storyline Visualizations
Yuzuru Tanahashi and Kwan-Liu Ma - 2012
http://ieeexplore.ieee.org/stamp/stamp.jsp?arnumber=06327274

26. Design Considerations for Optimizing Storyline Visualizations
Yuzuru Tanahashi and Kwan-Liu Ma - 2012
http://ieeexplore.ieee.org/stamp/stamp.jsp?arnumber=06327274

27. From visualization ‘exploration’ to visualization ‘research’

28. Learning Goals
1.Approaches of ‘designing’ infovis
2. Appreciation of kinds of infovis
3. Guidelines for ‘engaging’ infovis

29. http://www.slideshare.net/mobile/jkofmsk/intro-to-information-visualization

30. information visualisation
“... is the use of computer-
supported, interactive, visual
representations of abstract data
to amplify cognition”
Information Visualization Definition

31. “information visualisation is the use of
computer-supported, interactive,
visual representations of abstract
data to amplify cognition”
. automatic/automated algorithm
. versus custom or hand-made (sketching!)
. facilitates high complexity, analytics, ...

32. “information visualisation is the use of
computer-supported, interactive,
visual representations of abstract
data to amplify cognition”
. to make assumptions, test hypotheses
. to allow individualized exploration scenarios
. while and during the exploration itself

33. “information visualisation is the use of
computer-supported, interactive,
visual representations of abstract
data to amplify cognition”
. just ‘representing’ values or conveying meaning?
. guiding users, show example insights, highlighting
. engagement? involvement? immersion?

34. “information visualisation is the use of
computer-supported, interactive,
visual representations of abstract
data to amplify cognition”
. data without natural representation
. requires metaphor to be perceived
. complexity: size, dimensionality, time-variance

35. because the data is abstract...
“the challenge is to invent
new metaphors for
presenting information &
developing ways to
manipulate these
metaphors to make sense
out of the information...”
Information Visualization ‘Design’ Challenge

36. “information visualisation is the use of
computer-supported, interactive,
visual representations of abstract
data to amplify cognition”
. analytics versus communication
. creating insights: new, valuable, deep,...
. requires different kinds of visuals, interactivity, ...

37. Web2DNA
http://www.baekdal.com/web2dna/

38. Web2DNA
http://www.baekdal.com/web2dna/

39. Web2DNA Flickr Collection
http://www.flickr.com/photos/tags/web2dna/

40. Choice of “Metaphor”
. can be potentially seemingly “useless”
. yet receive a lot of interest
. how to interpret “useful”?
. persuasiveness of visual representations?

41. data insight
10010110 knowledge
transfer
data mapping
mapping
inversion
visualisation comprehension
!
visual transfer
Visual Mapping Methodology

42. Visualization as a “Medium”
. scientific visualization
. data graphics
. infographics
. information design
. data art

43. 1. (Scientific) Visualization

44. LineAO - Improved Three-Dimensional Line Rendering
http://www.informatik.uni-leipzig.de/~ebaum/Publications/eichelbaum2012a/

45. DNA Coiling, Replication, Transcription and Translation - WEHI
http://www.youtube.com/watch?v=DA2t5N72mgw

46. 2. Data Graphics
Eurovizion - Ben Willers
http://lifeindata.site50.net/work/eurovizion/eurovizion.html

47. Statistical Atlases of the United States - 1870-1890
http://www.handsomeatlas.com/

48. The Jobless Rate for People Like You - The New York Times
http://www.nytimes.com/interactive/2009/11/06/business/economy/unemployment-lines.html

49. Four Ways to Slice Obama’s 2013 Budget Proposal - The New York Times
http://www.nytimes.com/interactive/2012/02/13/us/politics/2013-budget-proposal-graphic.html

50. Spotlight on Profitability - Information is Beautiful Competition Entry (not winning...)
http://www.informationisbeautifulawards.com/2012/02/hollywood-visualisation-challenge-
design-shortlist/
http://szucskrisztina.hu/images/holly.png

51. 2. Information Graphics

52. Starbucks Coffee Cup vs. Country Origins - Fast Food Revenue vs. Brands

53. Telenet Social Media Report
http://blog.telenet.be/wp-content/uploads/2012/01/Telenet-Social-Media-Report-20111.jpg

54. Year Report 2011 - http://feltron.com

55. Debtris - David McCandless / Information is Beautiful
http://www.informationisbeautiful.net/2010/debtris/

56. 4. Data Visualization
OECD Better Life Index - Moritz Stefaner
http://www.oecdbetterlifeindex.org/

57. Flight & Expulsion - Nice One
http://www.niceone.org/lab/refugees/

58. Take a Look at Health - Fathom Design
http://visualization.geblogs.com/visualization/health_visualizer/

59. 5. Information Design
Chromosome 14 - Ben Fry

60. We Feel Fine - Jonathan Harris and Sep Kamvar
http://www.wefeelfine.org/

61. WorldShapin - Compare Countries through their Shape - Carlo Zapponi & Vasundhara Parakh
http://www.worldshap.in/#/PH/BZ/KE/

62. Notabilia - Visualizing Deletion Discussions on Wikipedia - Moritz Stefaner
http://notabilia.net/

63. 6. Information Art
DNA Portrait - dna11.com

64. TextArc - An Alternative Way to View a Text - Brad Paley
http://www.textarc.org/

65. Poetry on the Road 6 - Boris Müller
http://www.esono.com/boris/projects/poetry06/

66. DoodleBuzz - A Typographic News Explorer
http://www.doodlebuzz.com/

67. data insight
10010110 knowledge
transfer
data mapping
mapping
inversion
visualisation comprehension
!
visual transfer
Visual Mapping Methodology

69. Name Trends
http://nametrends.net/name.php?name=Andrew

70. Baby Name Wizard - Martin Wattenberg
http://www.babynamewizard.com/voyager#

71. Color Object - Martin Wattenberg
Offline Demo

72. 1. The Role of Interaction

73. Amazon Digital Cameras Treemap - The Hive Group
http://www.hivegroup.com/demos/amazon/499052.html

74. Newsmap - Marumishi - 2004
http://newsmap.jp/ and http://marumushi.com/projects/newsmap

75. 2. The Role of Aesthetics

76. A Year in Iraq and Afghanistan - The New York Times - 2009
http://www.nytimes.com/2011/01/30/opinion/30casualty-chart.html

77. Faces of the Fallen - Washington Post - 2009
http://apps.washingtonpost.com/national/fallen/

78. UK Casualties in Afghanistan and Iraq - BBC News - 2009
http://www.bbc.co.uk/news/uk-10634102

79. CNN Home and Away - CNN - Stamen Design
http://edition.cnn.com/SPECIALS/war.casualties/

80. Monument - Caleb Larsen - 2006
http://caleblarsen.com/

81. Monument - Caleb Larsen - 2006
http://caleblarsen.com/

82. 3. The Role of Data Focus (~ Meaning)

83. Lau A. and Vande Moere A. (2007), "Towards a Model of Information Aesthetic Visualization",
IEEE International Conference on Information Visualisation (IV'07), pp. 87-92.

84. Lau A. and Vande Moere A. (2007), "Towards a Model of Information Aesthetic Visualization",
IEEE International Conference on Information Visualisation (IV'07), pp. 87-92.

85. Narrative Visualization: Telling Stories with Data
Edward Segel and Jeffrey Heer
http://vis.stanford.edu/files/2010-Narrative-InfoVis.pdf
Genres of Narrative Visualization, Balancing Author-Driven versus Reader-Driven Stories

86. Narrative Visualization: Telling Stories with Data
Edward Segel and Jeffrey Heer
http://vis.stanford.edu/files/2010-Narrative-InfoVis.pdf

87. Our Irresistible Fascination with All Things Circular
http://www.perceptualedge.com/articles/visual_business_intelligence/
our_fascination_with_all_things_circular.pdf

88. Our Irresistible Fascination with All Things Circular
http://www.perceptualedge.com/articles/visual_business_intelligence/
our_fascination_with_all_things_circular.pdf

89. Aesthetic Effect in Data Visualization - Nick Cawthon and Andrew Vande Moere - 2007

90. Aesthetic Effect in Data Visualization - Nick Cawthon and Andrew Vande Moere - 2007

91. Aesthetic Effect in Data Visualization - Most Beautiful

92. Aesthetic Effect in Data Visualization - Least Beautiful

93. Aesthetic Effect in Data Visualization - Correct Responses

94. Aesthetic Effect in Data Visualization - Least Correct Responses

95. Aesthetic Effect in Data Visualization - Low Abandonment Rate

96. Aesthetic Effect in Data Visualization - High Abandonment Rate

97. Goal
•visualizationimpact of style in information
to measure
• by comparing 3 different ‘design alternatives’
• in terms of visual and interactive style
• style demonstrators based on real-world
examples
• then contrasted resulting insights against each
other
Evaluating the Effect of Style in Information Visualization
Andrew Vande Moere, Martin Tomitsch, Christoph Wimmer, Christoph Boesch, and Thomas
Grechenig, IEEE Infovis 2012

98. “Reversible”
“Factual”
Gapminder (2007)
Many Eyes (2007)
OECD eXplorer (2009)

99. “Irreversible”
“Meaningful”
Bitalizer (2008) Poetry on the Road (2004) Texone (2005)

100. Partly “Reversible”
Partly “Factual”
Digg Swarm (2007)
ReMap (2009)
We Feel Fine (2006)

101. “Analytical” Style (ANA)

102. “Magazine” Style (MAG)

103. “Artistic” Style (ART)

104. Interaction
18m09s
(average)
12m49s
(average)
11m55s
(average)
181.0
interactions
87.7
interactions
88.9
interactions
(average) (average) (average)
Analytical Magazine Artistic

105. No Reported Insights
1
participant
11
participants
9
participants
Analytical Magazine Artistic

106. Interface “Insights’
6%
6 insights
12%
13 insights
29%
27 insights
Analytical Magazine Artistic

107. Insight Analysis
ANA MAG ART
Difference 24% (24) 26% (26) 17% (11)
Cluster 22% (22) 15% (15) 9% (6)
Distribution 11% (11) 12% (12) 17% (11)
Compound 9% (9) 14% (14) 11% (7)
Trend 8% (8) 4% (4) 8% (5)
Outliers 6% (6) 10% (10) 15% (10)
Value 6% (6) 1% (1) 0% (0)
Association 5% (5) 3% (3) 6% (4)
Meaning (*) 3% (3) 4% (4) 14% (9)
Extreme 4% (4) 6% (6) 0% (0)
Categories 2% (2) 1% (1) 0% (0)
Rank 1% (1) 2% (2) 3% (2)

108. Insight Analysis
Rating (1 - 5) ANA MAG ART
uncertain - confident 4.10 (1.11) 4.21 (0.87) 4.17 (0.95)
difficult - easy 3.78 (1.17) 3.63 (1.29) 4.00 (1.24)
shallow - deep 3.18 (1.10) 2.93 (1.08) 2.54 (1.17)

109. Insight Analysis
Rating (1 - 5) ANA MAG ART
uncertain - confident 4.10 (1.11) 4.21 (0.87) 4.17 (0.95)
difficult - easy 3.78 (1.17) 3.63 (1.29) 4.00 (1.24)
shallow - deep 3.18 (1.10) 2.93 (1.08) 2.54 (1.17)
shallow – deep (expert rating) 2.44 (0.78) 2.36 (0.70) 2.28 (0.64)

110. Insight Analysis
Rating (1 - 5) ANA MAG ART
ugly - beautiful 3.48 (0.85) 3.08 (1.03) 3.11 (1.02)
obtrusive - fluid 3.27 (0.95) 3.08 (1.01) 2.80 (1.00)

111. Insight Analysis
Rating (1 - 5) ANA MAG ART
ugly - beautiful 3.48 (0.85) 3.08 (1.03) 3.11 (1.02)
obtrusive - fluid 3.27 (0.95) 3.08 (1.01) 2.80 (1.00)
ambiguous - clear 3.39 (1.17) 1.98 (0.89) 2.00 (0.86)
difficult - easy to understand 3.55 (1.04) 2.08 (1.07) 2.14 (1.07)
intended inform – express 2.80 (1.15) 3.54 (1.18) 3.66 (1.06)
useless - useful 3.61 (0.95) 2.70 (1.09) 2.45 (0.90)
frustrating - enjoyable 3.43 (1.00) 2.54 (1.16) 2.34 (1.06)
unusable - usable 3.77 (0.91) 2.78 (1.13) 2.64 (1.12)
boring - engaging 3.43 (0.93) 3.10 (0.95) 2.80 (1.00)
non-functional - functional 3.93 (0.82) 2.80 (1.18) 2.50 (1.13)
tool - art 2.30 (1.07) 3.32 (1.19) 3.68 (0.93)

112. Conclusions
•style impacts perception of usability
• analytical style was perceived as more
understandable, clear, enjoyable, engaging,
useful, functional, ...
•style does not impact insight depth
• participants were able to overcome huge
incomprehensibility issues of ART, and in a
minimum amount of time
• style has impact on ‘kind’ of insights
• analytical focus of facts versus meaning of
content, explanation of reasoning, ...

113. Design Study Methodology: Reflections from the Trenches and the Stacks
Michael Sedlmair, Miriah Meyer, Tamara Munzner, IEEE Infovis 2012
http://www.cs.ubc.ca/nest/imager/tr/2012/dsm/

114. Design Study Methodology: Reflections from the Trenches and the Stacks
Michael Sedlmair, Miriah Meyer, Tamara Munzner, IEEE Infovis 2012
http://www.cs.ubc.ca/nest/imager/tr/2012/dsm/

115. your technique
Design Study Methodology: Reflections from the Trenches and the Stacks
Michael Sedlmair, Miriah Meyer, Tamara Munzner, IEEE Infovis 2012
http://www.cs.ubc.ca/nest/imager/tr/2012/dsm/

116. Design Study Methodology: Reflections from the Trenches and the Stacks
Michael Sedlmair, Miriah Meyer, Tamara Munzner, IEEE Infovis 2012
http://www.cs.ubc.ca/nest/imager/tr/2012/dsm/

117. Edward Tufte

118. French Invasion of Russia (Minard, +-1864)
Napoleon Retreat (Minard, +-1864)

119. temperature
time
temp[day]

120. longitude
latitude
army[size, day]
army[position, day]

121. 1. Show comparisons, contrasts, differences
2. Show causality, mechanism, explanation,
systematic structure
3. Show multivariate data; that is, show more
than 1 or 2 variables
4. Completely integrate words, numbers, images,
diagrams
5.Thoroughly describe the evidence: title, authors
and sponsors, data sources, add measurement
scales, highlight relevant issues
6.Analytical presentations ultimately stand or fall
depending on the quality, relevance and
integrity of their content
Principles for the Analysis and Presentation of Data - Tufte

122. 1. Show comparisons, contrasts,
differences

123. 2. Show causality, mechanism,
explanation, systematic structure
French Invasion of Russia (Minard, +-1864)
Napoleon Retreat (Minard, +-1864)

124. 3. Show multivariate data; that is,
show more than 1 or 2 variables
French Invasion of Russia (Minard, +-1864)
Napoleon Retreat (Minard, +-1864)

125. 4. Completely integrate words,
numbers, images, diagrams
French Invasion of Russia (Minard, +-1864)
Napoleon Retreat (Minard, +-1864)

126. 5.Thoroughly describe the
evidence: title, authors and
sponsors, data sources, add
measurement scales, highlight
relevant issues
French Invasion of Russia (Minard, +-1864)
Napoleon Retreat (Minard, +-1864)

127. 6.Analytical presentations
ultimately stand or fall depending
on the quality, relevance and
integrity of their content
French Invasion of Russia (Minard, +-1864)
Napoleon Retreat (Minard, +-1864)

128. The Friendly Graphic - Tufte (p. 183, 1983)

129. http://www.informationisbeautifulawards.com/2012/02/hollywood-dataviz-challenge-

130. • Lau A. and Vande Moere A. (2007), "Towards a Model of Information Aesthetic Visualization",
IEEE International Conference on Information Visualisation (IV'07), IEEE, Zurich, Switzerland, pp.
87-92.
• Cawthon N. and Vande Moere A. (2007), "The Effect of Aesthetic on the Usability of Data
Visualization", IEEE International Conference on Information Visualisation (IV'07), IEEE, Zurich,
Switzerland, pp. 637-648.
• Vande Moere A., Tomitsch M., Wimmer C., Boesch C. and Grechenig T. (2012), "Evaluating the
Effect of Style in Information Visualization", IEEE Transactions on Visualization and Computer
Graphics, 18(12), December 2012, pp.2739-2748.
• Sedlmair, Michael; Meyer, Miriah; Munzner, Tamara; , "Design Study Methodology: Reflections
from the Trenches and the Stacks”, IEEE Transactions on Visualization and Computer Graphics,
18 (12), pp.2431-2440.
• Edward Segel, Jeffrey Heer, Narrative Visualization: Telling Stories with Data, IEEE Trans.
Visualization & Comp. Graphics (Proc. InfoVis), 2010.
• Jeffrey Heer, Michael Bostock,Vadim Ogievetsky, A Tour through the Visualization Zoo
http://queue.acm.org/detail.cfm?id=1805128
...

131. • http://www.tableausoftware.com/public/
first explorations of dataset for insights
•
http://visualizing.org
http://www.informationisbeautifulawards.com/
check winning entries!
• http://infosthetics.com
http://flowingdata.com/
blog with wide selection
• http://selection.datavisualization.ch/
collection of good tools!
• http://thewhyaxis.info
http://www.perceptualedge.com/blog/
what is good, what is bad, and why?
• http://moritz.stefaner.eu/
http://www.periscopic.com/
http://stamen.com/
http://tulpinteractive.com/
high quality infovis examples...

132. Thank you! Questions?
------.----------@asro.kuleuven.be /// http://infosthetics.com /// @infosthetics