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