1. Information Visualization
Katrien Verbert
Department of Computer Science
Faculty of Science
Vrije Universiteit Brussel
katrien.verbert@vub.ac.be
20/02/14
pag. 1

2. overview
1.
Examples
2.
History
3.
Defini7on
4.
Principles
5.
Workflow
6.
Tools
and
APIs
7.
Course
overview
20/02/14
pag. 2

3. Where people run?
hJp://flowingdata.com/2014/02/05/where-­‐people-­‐run/
pag. 3
20/02/14

4. visual explorations of urban mobility
hJp://senseable.mit.edu/visual-­‐explora7ons-­‐urban-­‐mobility/touching-­‐bus-­‐rides.html
20/02/14
pag. 4

5. professional network
hJp://inmaps.linkedinlabs.com/network
pag. 5
20/02/14

6. Immersion
hJps://immersion.media.mit.edu/demo#
pag. 6
20/02/14

7. Last.fm music history
hJp://www.frederikseiffert.de/lasthistory/
pag. 7
20/02/14

8. Twitter sentiment
hJp://www.csc.ncsu.edu/faculty/healey/
tweet_viz/tweet_app/
20/02/14
pag. 8

9. overview
1.
Examples
2.
History
3.
Defini7on
4.
Principles
5.
Workflow
6.
Tools
and
APIs
7.
Course
overview
20/02/14
pag. 9

10. Napoleon’s army drawn by Minard (1781-1870)
Source: http://www.napoleanic-literature.com, © John Schneider
20/02/14
pag. 10

11. • Thickness of brown line is proportional to number of soldiers
(422,00 soldiers started out).
• Black similarly encodes the retreat (10,000 returned).
• Crossing of Berezina river.
• Temperature plot at the bottom.
Source: Information Visualization Course, Katy Börner, Indiana University

12. William Playfair
… and the line/area chart based on time series
20/02/14
pag. 12

13. William Playfair
…and the bar chart
20/02/14
pag. 13

14. Florence Nightingale’s diagram showing the dramatic reduction in death
rates in the hospitals of Scutari following the changes she introduced
Source: Nightingale (1858)

15. Map of Cholera by John Snow in 1854
•
•
•
link between cholera and
water
cholera occurred among
those near the Broad
Street water pump
removing the handle of
the pump ended the
neighborhood epidemic
Source: Information Visualization Course, Katy Börner
20/02/14
pag. 15

16. London Underground Map by Harry Beck in 1933
• Harry Beck’s London
Underground’s way
finding system is an
extraordinary example
of directional signage.
• Note the stylized
angles (90 and 45
degrees) and the
regular spacing
between station stops.
Source: Information Visualization Course, Katy Börner
20/02/14
pag. 16

17. overview
1.
Examples
2.
History
3.
Defini7on
4.
Principles
5.
Workflow
6.
Tools
and
APIs
7.
Course
overview
20/02/14
pag. 17

18. information visualization
the use of computer-supported, interactive, visual
representations of abstract data to amplify cognition
[Card et al. 1999]
20/02/14
pag. 18

19. How many circles?
Slide
source:
Joris
Klerkx
20/02/14
pag. 19

20. How many circles?
Humans have advanced perceptual abilities
Our brains makes us extremely good at recognizing visual patterns
Slide
source:
Joris
Klerkx
20/02/14
pag. 20

21. Overview
Visualization
Scientific
visualization
Slide
source:
John
Stasko
Information
visualization
20/02/14
pag. 21

22. Information visualization
Concerned with data that does not have a well-defined
representation in 2D or 3D space (i.e., “abstract data”)
Introduction to Information Visualization - Fall 2013
Slide
source:
Robert
Putman
20/02/14
pag. 22

23. Scientific visualization
Specifically concerned with data that has a well-defined representation
in 2D or 3D space (e.g., from simulation mesh or scanner).
Introduction to Information Visualization - Fall 2013
Slide
source:
Robert
Putman
20/02/14
pag. 23

24. Also: visual analytics
hJp://www.visual-­‐analy7cs.eu/faq/
20/02/14
pag. 24

25. Focus: information visualization
20/02/14
pag. 25

26. overview
1.
Examples
2.
History
3.
Defini7on
4.
Principles
5.
Workflow
6.
Tools
and
APIs
7.
Course
overview
20/02/14
pag. 26

27. some bad examples
20/02/14
pag. 27

28. What’s wrong with this graph?
Source: Stephen Few
20/02/14
pag. 28

29. Bar values should start at zero
Source: Stephen Few
20/02/14
pag. 29

30. Bad examples
hJp://flowingdata.com/category/sta7s7cs/mistaken-­‐data/
Source: Joris Klerkx
20/02/14
pag. 30

31. Bad examples
hJp://flowingdata.com/category/sta7s7cs/mistaken-­‐data/
Source: Joris Klerkx
20/02/14
pag. 31

32. What about 3D?
Source: Stephen Few
20/02/14
pag. 32

33. But what if there is a 3rd variable
Source: Stephen Few
20/02/14
pag. 33
20/0
PAG

34. How to display additional variables?
Source: Stephen Few
20/02/14
pag. 34

35. What about pie charts?
“Save the pies for dessert” (Stephen Few)
Source: Stephen Few
20/02/14
pag. 35

36. What makes these graphics bad?
20/02/14
pag. 36

37. Summary of Tufte’s Principles
"The success of a visualization is based on deep
knowledge and care about the substance, and the
quality, relevance and integrity of the content."
(Tufte, 1983)
• Tell the truth
– Graphical integrity
• Do it effectively with clarity, precision...
– Design aesthetics
Source: Information Visualization Course, Katy Börner, Indiana University
20/02/14
pag. 37

38. design aesthetics
20/02/14
pag. 38

39. design aesthetics: five principles
1.
2.
3.
4.
5.
Above all else show the data.
Maximize the data-ink ratio, within reason.
Erase non-data ink, within reason.
Erase redundant data-ink.
Revise and edit.
20/02/14
pag. 39

40. Above all else, show the data
20/02/14
pag. 40

41. Above all else, show the data
20/02/14
pag. 41

42. Data-ink ratio
“A large share of ink on a graphic should present data
information, the ink changing as the data change. Data-ink is
the non-erasable core of a graphic...” (Tufte, 1983)
20/02/14
pag. 42

43. Data-Ink Ratio
Data-ink ratio
=
data-ink
Total ink used to print graphic
=
Proportion of a graphic’s ink devoted to
the non-redundant display of datainformation.
=
1.0 – proportion of graphic that can be
erased without the loss of information
20/02/14
pag. 43

44. Data-ink ratio
20/02/14
pag. 44

45. What is the data-ink ratio?
20/02/14
pag. 45

46. What is the data-ink ratio?
< 0.05
20/02/14
pag. 46

47. What is the data-ink ratio of this graphic?
< 0.001
20/02/14
pag. 47

48. Five Principles
1. Above all else show the data.
2. Maximize the data-ink ratio.
– Within reason
– Every bit of ink on a graphic requires a reason
3. Erase non-data ink, within reason.
4. Erase redundant data-ink.
5. Revise and edit.
20/02/14
pag. 48

49. Maximize the data-ink ratio, within reason
(Tufte)
“A pixel
is a
terrible
thing to
waste.”
(Shneiderman)
Slide
source:
Chris
North,
Virginia
Tech
20/02/14
pag. 49

50. Five Principles
1.
2.
3.
4.
5.
Above all else show the data.
Maximize the data-ink ratio, within reason.
Erase non-data ink, within reason.
Erase redundant data-ink.
Revise and edit.
20/02/14
pag. 50

51. Erase non-data ink
source:
Joey
Cherdarchuk
20/02/14
pag. 51

52. Erase non-data ink
source:
Joey
Cherdarchuk
20/02/14
pag. 52

53. Erase non-data ink
source:
Joey
Cherdarchuk
20/02/14
pag. 53

54. Erase redundant data-ink
source:
Joey
Cherdarchuk
20/02/14
pag. 54

55. Erase non-data ink
source:
Joey
Cherdarchuk
20/02/14
pag. 55

56. Erase redundant data-ink
source:
Joey
Cherdarchuk
20/02/14
pag. 56

57. Erase redundant data-ink
source:
Joey
Cherdarchuk
20/02/14
pag. 57

58. Erase redundant data-ink
20/02/14
pag. 58

59. Revise and edit
source:
Joey
Cherdarchuk
20/02/14
pag. 59

60. Revise and edit
source:
Joey
Cherdarchuk
20/02/14
pag. 60

61. Revise and edit
source:
Joey
Cherdarchuk
20/02/14
pag. 61

62. Revise and edit
source:
Joey
Cherdarchuk
20/02/14
pag. 62

63. Revise and edit
source:
Joey
Cherdarchuk
20/02/14
pag. 63

64. Revise and edit
source:
Joey
Cherdarchuk
20/02/14
pag. 64

65. Revise and edit
source:
Joey
Cherdarchuk
20/02/14
pag. 65

66. Revise and edit
source:
Joey
Cherdarchuk
20/02/14
pag. 66

67. Revise and edit
source:
Joey
Cherdarchuk
20/02/14
pag. 67

68. Revise and edit
source:
Joey
Cherdarchuk
20/02/14
pag. 68

69. Revise and edit
source:
Joey
Cherdarchuk
20/02/14
pag. 69

70. Revise and edit
source:
Joey
Cherdarchuk
20/02/14
pag. 70

71. Revise and edit
source:
Joey
Cherdarchuk
20/02/14
pag. 71

72. Revise and edit
source:
Joey
Cherdarchuk
20/02/14
pag. 72

73. Revise and edit
20/02/14
pag. 73

74. Revise and edit
source:
Joey
Cherdarchuk
20/02/14
pag. 74

75. Revise and edit
source:
Joey
Cherdarchuk
20/02/14
pag. 75

76. “Perfection is achieved not when there is nothing more to
add, but when there is nothing left to take away”
– Antoine de Saint-Exupery
20/02/14
pag. 76

77. graphical integrity
20/02/14
pag. 77

78. Pseudo-decline
20/02/14
pag. 78

79. Lie factor
Size
of
effect
shown
in
graphic
Lie Factor = --------------------------Size
of
effect
in
data
Edward
Tu)e
The
Visual
Display
of
Quan7ta7ve
Informa7on
page
57
(27.5-­‐18.0)/18=53%
actual
increase
(5.3-­‐0.6)/0.6=783%
visual
increase
Lie
factor=783/53=14.8
20/02/14
pag. 79

80. Same data, simple graphic
20/02/14
pag. 80

81. Lie factor
•
Use of area to portray 1D
data can be confusing
– Area
has
2
dimensions
•
The ‘incredible’ shrinking
family doctor
– Lie
factor
of
2.8
– Plus
perspec7ve
distor7on
– Plus
incorrect
horizontal
spacing
20/02/14
pag. 81

82. Lie factor
•
Use of area to portray 1D data can be
confusing
– Area
has
2
dimensions
•
The ‘incredible’ shrinking dollar
•
A more accurate representation of the
1978 dollar would be about twice the
size of the one in this chart
20/02/14
pag. 82

83. overview
1.
Examples
2.
History
3.
Defini7on
4.
Principles
5.
Workflow
6.
Tools
and
APIs
7.
Course
overview
20/02/14
pag. 83

84. Workflow
•
•
•
•
•
•
•
Acquire
Parse
Filter
Mine
Represent
Refine
Interact
Adapted
from
Fry,
Visualizing
Data
Available
at:
hJp://it-­‐ebooks.info/book/143/
Introduction to Information Visualization - Fall 2013
20/02/14
pag. 84

85. Workflow
• Acquire
[p. 7, Fry, Visualizing Data]
Introduction to Information Visualization - Fall 2013
20/02/14
pag. 85

86. Workflow
• Parse
[p. Introduction to Information Visualization - Fall 2013
8, Fry, Visualizing Data]
20/02/14
pag. 86

87. Workflow
• Filter/Mine
Introduction to Information Visualization - Fall 2013
[p. 10, Fry, Visualizing Data]
20/02/14
pag. 87

88. Workflow
• Represent
[p. 10, Fry, Visualizing Data]
Introduction to Information Visualization - Fall 2013
20/02/14
pag. 88

89. Workflow
• Refine
[p. Introduction to Information Visualization - Fall 2013
12, Fry, Visualizing Data]
20/02/14
pag. 89

90. Workflow
• Interact
• Demo
[p. 12, Fry, Visualizing Data]
Introduction to Information Visualization - Fall 2013
20/02/14
pag. 90

91. Not the entire story!
20/02/14
pag. 91

92. overview
1.
Examples
2.
History
3.
Defini7on
4.
Principles
5.
Workflow
6.
Tools
and
APIs
7.
Course
overview
20/02/14
pag. 92

93. Visualization tools and APIs!
•
•
•
•
•
•
•
Many Eyes
http://www-958.ibm.com/software/data/cognos/manyeyes/
Ggplot2
http://ggplot2.org/
Tableau public
http://www.tableausoftware.com/public/
Google Charts
http://code.google.com/apis/chart/interactive/docs/gallery.html
Simile Widgets
http://www.simile-widgets.org/
Processing.js
http://processingjs.org/
D3.js
http://d3js.org/
20/02/14
pag. 93

94. Many Eyes
http://www-958.ibm.com/software/
data/cognos/manyeyes/"
/ name of department
20/02/14
pag. 94

95. Tableau public
hJp://www.tableausocware.com/public/community
20/02/14
pag. 95

96. Google chart: treemap example
hJps://developers.google.com/chart/
interac7ve/docs/gallery/treemap
20/02/14
pag. 96
20/0
PAG

97. Simile Widgets
• http://www.simile-widgets.org/
20/02/14
pag. 97
20/0
PAG

98. Timeplot
hJp://www.simile-­‐widgets.org/7meplot/docs/
20/02/14
pag. 98
20/0
PAG

99. Processing.js
• http://processingjs.org/
20/02/14
pag. 99
20/0
PAG

100. D3.js!
• http://d3js.org/
• demo: http://vimeo.com/29862153
20/02/14
pag. 100

101. D3 example treemap
hJp://bl.ocks.org/mbostock/4063582
/ name of department
20/02/14
pag. 101
20/0
PAG

102. D3 resources
•
•
•
•
•
•
•
•
•
•
•
•
http://vimeo.com/m/35005701 - nice overview and run-through video/talk
http://alignedleft.com/tutorials/d3/ - thorough d3 tutorials from an academic instructor
and the author of the open OReilly book, "Interactive Data Visualization for the
Web" (look for free preview link for the actual book draft
https://github.com/mbostock/d3/wiki/Tutorials - big list of resources from the author of
D3
https://github.com/mbostock/d3/wiki/API-Reference - well-done D3 documentation
http://www.d3noob.org - free ebook with lots of tips and tricks, actively update
http://www.jeromecukier.net/wp-content/uploads/2012/10/d3-cheat-sheet.pdf - cheat
sheet for D3, also see parent site for blog post
https://groups.google.com/forum/?fromgroups=#!forum/d3-js - D3 Google group
http://bost.ocks.org/mike/selection/ - Guide to understanding selections, key part of D3.
http://benclinkinbeard.com/talks/2012/NCDevCon/ - A talk, with interactive examples
and code snippets, explaining d3
http://enjalot.github.com/dot-enter/ - A live-coding set of videos to walk through a lot of
the basics
http://enjalot.github.com/dot-append/ - A live-coding set of videos to walk through a lot
of the basics (part 2)
http://tributary.io/ - A fast prototyping lounge similar to CodePen to let you test your
ideas out. Used by the enjalot fellow.
Source: John Stasko
20/02/14
pag. 102

103. D3 support
• Active community online
– hJps://github.com/mbostock/d3/wiki
– Including
Mike
Bostock
ocen
answering
ques7ons
• In active development
– Though
the
cri7cal
features
are
unlikely
to
change
20/02/14
pag. 103

104. hJp://blog.profitbricks.com/39-­‐data-­‐visualiza7on-­‐tools-­‐for-­‐big-­‐data/
20/02/14
pag. 104

105. overview
1.
Examples
2.
History
3.
Defini7on
4.
Principles
5.
Workflow
6.
Tools
and
APIs
7.
Course
overview
20/02/14
pag. 105

106. About me
20/02/14
pag. 106

107. About me
20/02/14
pag. 107

108. Teaching assistant
• Sandra Trullemans
http://wise.vub.ac.be/sandra-trullemans
20/02/14
pag. 108

109. Required text book
20/02/14
pag. 109

110. Course goals
know
the
founda1ons
learn
the
principles
of
informa7on
visualiza7on
Learn
about
exis1ng
techniques
and
systems
learn
about
exis7ng
techniques
and
systems,
and
their
effec7veness
develop
the
knowledge
to
select
appropriate
visualiza7on
techniques
for
par7cular
tasks
build
build
your
own
visualiza7ons
apply
theore7cal
founda7ons
20/02/14
pag. 110

111. Grading
Team
project
build
an
interac7ve
visualiza7on
in
teams
Research
paper
present
research
paper
during
WPO
hours
+
prepare
3
ques7ons
about
a
second
paper
40%
20%
Exam
Oral
exam
Closed
book
40%
20/02/14
pag. 111

112. Grading
Team
project
build
an
interac7ve
visualiza7on
in
teams
Research
paper
present
research
paper
during
WPO
hours
+
prepare
3
ques7ons
about
a
second
paper
40%
20%
Exam
Oral
exam
Closed
book
40%
20/02/14
pag. 112

113. Team project:
an interactive visualization
• Teams of 3-4
• Limited number of restrictions
• Be creative!
20/02/14
pag. 113

114. Team project
• hands-on experience of building interactive visualizations
• using D3
20/02/14
pag. 114

115. Inspiration
•
•
Related courses
KU Leuven: http://ariadne.cs.kuleuven.be/wiki/index.php/MM-Course1314
Berkeley: http://blogs.ischool.berkeley.edu/i247s13/
Columbia university: http://columbiadataviz.wordpress.com/student-work/
Other examples
Information is beatiful:
http://www.informationisbeautiful.net/2013/over-300-of-the-best-datavisualization/?utm_source=feedly
Gap Minder World: http://www.gapminder.org/world
Netflix Map
http://www.nytimes.com/interactive/2010/01/10/nyregion/20100110netflix-map.html
NYC Parking Map
http://www.nytimes.com/interactive/2008/11/26/nyregion/
20081128_PARKING.html
How people spend their day
http://www.nytimes.com/interactive/2009/07/31/business/20080801metrics-graphic.html
20/02/14
pag. 115

116. hJp://nycusefuldata.com/
20/02/14 pag. 116

117. hJp://bit.ly/1fqy8yy
20/02/14
pag. 117

118. Datasets
hJp://websci14.org/#info
20/02/14
pag. 118
20/0
PAG

119. Team project milestones
1.
2.
3.
4.
5.
due
27
Feb.
Form teams
due
13
March
Project proposal
due
3
April
Intermediate presentation
Final presentation
Short report
22
May
due
29
May
20/02/14
pag. 119

120. Project proposal
1 page description of your intended project:
– mo7va7on
– which
datasets
you
will
use
– current
status.
If
available,
first
designs.
– problems/ques7ons
due
13 March
If you want earlier feedback, send us your proposal earlier ;-)
20/02/14
pag. 120

121. Intermediate and final presentation
•
•
•
•
20 mins (15 mins presentations + 5 mins questions)
What is your project about?
Most important part final presentation: demo
What have you learned when implementing the project?
20/02/14
pag. 121

122. Short report (max. 3 pages)
Motivation
Dataset
Visualization design and implementation
Reflection
– How
is
your
work
related
to
the
topics
taught
in
the
course?
– If
you
would
start
over,
what
would
you
do
differently?
• Effort
– How
much
effort
did
it
take
to
implement
the
project?
– how
did
you
distribute
it
in
your
group?
•
•
•
•
20/02/14
pag. 122

123. Grading
Team
project
build
an
interac7ve
visualiza7on
in
teams
Research
paper
present
research
paper
during
WPO
hours
+
prepare
3
ques7ons
about
a
second
paper
40%
20%
Exam
Oral
exam
Closed
book
40%
20/02/14
pag. 123

124. Research paper
• Select papers from list available on pointcarré
– Present
a
paper
of
your
choice
in
class
– Prepare
3
ques7on
about
a
second
paper
• Topics:
–
–
–
–
–
–
–
–
–
Trees
Hierarchies
Focus
+
context
Graphs
Time
series
Interac7on
Documents
Social
media
…
• Individual assignment
20/02/14
pag. 124

125. Research presentation
• Selected papers available on PointCarré
• Select paper at: http://doodle.com/3ubzmy6fid4baqgk
• When all presentations are scheduled: select a second paper
for questions.
20/02/14
pag. 125

126. Grading
Team
project
build
an
interac7ve
visualiza7on
in
teams
Research
paper
present
research
paper
during
WPO
hours
+
prepare
3
ques7ons
about
a
second
paper
40%
20%
Exam
Oral
exam
Closed
book
40%
20/02/14
pag. 126

127. Oral exam
• 40% of the grade
• Closed book
• Material:
– Robert
Spence.
Informa7on
visualiza7on:
design
for
interac7on
– Lecture
slides
– Two
research
papers
• Paper
from
presenta7on
• Paper
you
asked
ques7ons
about
• Example questions will be posted
20/02/14
pag. 127

128. Tentative schedule
week
date
Lecture
14:00-­‐16:00
WPO
16:00-­‐18:00
23
20
Feb.
Introduc7on:
defini7on,
examples,
toolkits,
overview
assignments
24
27
Feb.
Percep7on
and
principles
25
6
March
Representa7on:
values
and
rela7ons
26
13
March
Presenta7on
presenta7ons
27
20
March
Interac7on
presenta7ons
28
27
March
Case
studies
presenta7ons
29
3
April
32
24
April
Informa7on
dashboards
presenta7ons
34
8
May
Visual
analy7cs
presenta7ons
35
15
May
No
lecture:
work
on
team
projects
36
22
May
Final
team
project
presenta7ons
Intermediate
team
project
presenta7ons
20/02/14
pag. 128

129. Contact
Office
Katrien:
10F721
Sandra:
10G731e
Email
Katrien:
katrien.verbert@vub.ac.be
Sandra:
sandra.trullemans@vub.ac.be
20/02/14
pag. 129

130. Questions?
20/02/14
pag. 130

131. 5 minute paper
What do YOU expect from this course?
20/02/14
pag. 131

132. Additional examples
•
•
•
•
•
•
http://infosthetics.com/
http://visualizing.org
http://www.visualcomplexity.com/vc/
http://visual.ly/
http://flowingdata.com
http://www.infovis-wiki.net
Introduction to Information Visualization - Fall 2013
20/02/14
pag. 132

133. Readings
• Chapter 1 – 2
20/02/14
pag. 133

134. The beauty of data visualization - David
McCandless
hJp://www.youtube.com/watch?v=5Zg-­‐C8AAIGg
20/02/14
pag. 134

135. Don’t forget
Form teams by 27 February
20/02/14
pag. 135

136. Next lecture:
perception and principles
20/02/14
pag. 136

137. References
• Stuart K. Card, Jock D. Mackinlay, and Ben Scheiderman,
Academic Press, San Diego CA, 1999, p. 7
20/02/14
pag. 137