Information Visualisation: Introduction

Information visualisation
Introduction
Katrien Verbert
katrien.verbert@cs.kuleuven.be

Overview
1. Examples 2. History 3. Definition
4. Principles 5. Workflow
6. Tools and
APIs
7. Course overview

visual explorations of urban mobility
http://senseable.mit.edu/visual-explorations-urban-mobility/touching-bus-rides.html

http://vizwiz.blogspot.in/2012/05/how-common-is-your-birthday-find-out.html

Immersion
https://immersion.media.mit.edu/

2/6/19 6
https://flowingdata.com/2018/01/23/the-
demographics-of-others/

https://www.nytimes.com/interactive/2017/07/28/climate/more-
frequent-extreme-summer-heat.html

AcademyScope
https://www.youtube.com/watch?feature=pla
yer_embedded&v=m_TwZXnZrkg

Two centuries of US migration
http://metrocosm.com/us-immigration-history-map.html

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

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

William Playfair
… and the line/area chart based on time series

William Playfair
…and the bar chart

Florence Nightingale’s diagram showing the dramatic reduction in death rates in
the hospitals of Scutari following the changes she introduced.

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

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

overview
1. Examples 2. History 3. Definition
4. Principles 5. Workflow
6. Tools and
APIs
7. Course overview

Data visualization
Slide source: John Stasko
Scientific
visualization
Information
visualization

How many circles?
Slide source: Joris Klerkx

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

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

Scientific visualization
Specifically concerned with data that has a well-defined representation in 2D or
3D space (e.g., from simulation mesh or scanner).
Slide source: Robert Putman

Also: visual analytics
http://www.visual-analytics.eu/faq/

What’s wrong with this graph?
Source: Stephen Few

Bar values should start at zero
Source: Stephen Few

http://flowingdata.com/category/statistics/mistaken-data/
Bad examples

http://flowingdata.com/category/statistics/mistaken-data/
Bad examples
Source: Joris Klerkx

What about 3D?
Source: Stephen Few

But what if there is a 3rd variable
Source: Stephen Few

How to display additional variables?
Source: Stephen Few

What about pie charts?
“Save the pies for dessert” (Stephen Few)
Source: Stephen Few

What makes these graphics bad?

Summary of Tufte’s Principles
Source: Information Visualization Course, Katy Börner, Indiana University
"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
o Graphical integrity
• Do it effectively with clarity, precision...
o Design aesthetics

Design aesthetics: five principles
1. Above all else show the data.
2. Maximize the data-ink ratio, within reason.
3. Erase non-data ink, within reason.
4. Erase redundant data-ink.
5. Revise and edit.

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)

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 data-
information.
= 1.0 – proportion of graphic that can be
erased without the loss of information

What is the data-ink ratio?
< 0.05
What is the data-ink ratio?

What is the data-ink ratio of this graphic?
< 0.001

Five Principles
2. Maximize the data-ink ratio.
o Within reason
o Every bit of ink on a graphic requires a reason
5. Revise and edit.

Maximize the data-ink ratio, within reason
A pixel
is a
terrible
thing to
waste.
(Shneiderman)
Slide source: Chris North, Virginia Tech

Five Principles
2. Maximize the data-ink ratio, within reason.
5. Revise and edit.

Erase non-data ink
source: Joey Cherdarchuk

Erase redundant data-ink

Revise and edit

“Perfection is achieved not when there is nothing more to
add, but when there is nothing left to take away”
– Antoine de Saint-Exupery

Lie factor
Size of effect shown in graphic
Lie Factor = ---------------------------
Size of effect in data
Edward Tufte
The Visual Display of
Quantitative
Information
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

Lie factor
• Use of area to portray 1D data
can be confusing
o Area has 2 dimensions
• The ‘incredible’ shrinking
family doctor
o Lie factor of 2.8
o Plus perspective distortion
o Plus incorrect horizontal
spacing

Workflow
• Acquire
• Parse
• Filter
• Mine
• Represent
• Refine
• Interact
Adapted from Fry, Visualizing Data
Available at: http://it-ebooks.info/book/143/

Workflow
Acquire / Parse / Filter / Mine

Overview
1.
Examples
2. History
3.
Definition
4.
Principles
5.
Workflow
6. Tools
and APIs
7. Course overview

Spotfire
http://spotfire.tibco.com/products/spotfire-desktop

Tableau public
http://www.tableausoftware.com/public/community

Gephi https://gephi.org/

Google chart: treemap example
06-02-19 PAGE 90
https://developers.google.com/chart/interac
tive/docs/gallery/treemap

http://www.simile-widgets.org/

06-02-19 PAGE 92
http://www.simile-widgets.org/timeplot/docs/

http://processingjs.org/

D3.js
• https://d3js.org/
• demo: http://vimeo.com/29862153

D3 example treemap
06-02-19
/ name of
department
PAGE 95
http://bl.ocks.org/mbostock/4063582

Course goals
know the
foundations
learn the principles of
information visualization
learn about existing
techniques and tools
learn about existing
techniques and systems,
and their effectiveness
develop the knowledge to
select appropriate
visualization techniques
for particular tasks
build
build your own
visualizations
apply theoretical
foundations

Grading
Team project
build an interactive
visualization in teams
100%

Team project:
an interactive visualization
• Teams of 2-3
• Limited number of restrictions
• Be creative!

Team project
BYOD (Bring Your Own Data)
you (or your teammates) have your own data to analyze
• thesis/research topic
• personal interest
FDOI (Find Data Of Interest)
• many existing datasets
o https://datavisualisationcourse.wordpress.com/data/
o http://www.cs.ubc.ca/group/infovis/resources.shtml#data
-repos
• can be tricky to find reasonable/interesting task

Team project
• hands-on experience of building interactive visualizations
• using D3.js

Inspiration
• Related courses
UBC: https://www.cs.ubc.ca/~tmm/courses/547-17/projects.html
Berkeley: http://blogs.ischool.berkeley.edu/i247s13/
Columbia university: http://columbiadataviz.wordpress.com/student-work/
• Other examples
Gap Minder World: http://www.gapminder.org/world
Netflix Map
http://www.nytimes.com/interactive/2010/01/10/nyregion/20100110-
netflix-map.html
NYC Parking Map
http://www.nytimes.com/interactive/2008/11/26/nyregion/20081128_PARK
ING.html
How people spend their day
http://www.nytimes.com/interactive/2009/07/31/business/20080801-
metrics-graphic.html

http://nycusefuldata.com/

Datasets
https://datavisualisationcourse.wordpress.com/data/

Team project milestones
1. Form teams
2. Project proposal
3. Intermediate presentation
4. Final presentation
5. Report
Due 25 Feb
Due 19 March
Due 25 April
Due 20 May
Due 27 May

Project proposal
1 page description of your intended project:
o motivation
o which datasets you will use
o current status. If available, first designs.
o problems/questions
Due 19 March
If you want earlier feedback, send us your proposal earlier ;-)

Intermediate and final presentation
• 15 mins (10 mins presentations + 5 mins questions)
• What is your project about?
• Most important part final presentation: demo
• What have you learned when implementing the project?

Report
• Motivation
• Dataset
• Visualization design and implementation
• Reflection
o How is your work related to the topics taught in the course?
o If you would start over, what would you do differently?
• Effort
o How much effort did it take to implement the project?
o how did you distribute it in your group?

Tentative schedule
date Monday (16:00-18:00) date Thursday (8:30-10:30)
11 Feb. Introduction 14 feb Exercise session: D3.js (Martijn)
18 Feb. Perception and principles 21 Feb. Exercise session: D3.js (Martijn)
25 Feb. Representation
4 March No Lecture
11 March Presentation, Interaction
18 March Information dashboards
25 March Project implementation + feedback
1 April Project implementation + feedback
22 April No Lecture 25 April Intermediate presentations
29 April Project implementation + feedback
6 May No Lecture
13 May Project implementation + feedback
20 May Final team project presentations

Teaching assistant
• Martijn Millecamp
• Office Dept. CW 03.10
• Email: martijn.millecamp@cs.kuleuven.be

Contact
Office
Katrien: Dept. CW 04.49
Martijn: Dept. CW 03.10
Email
katrien.verbert@cs.kuleuven.be
martijn.millecamp@cs.kuleuven.be

Additional examples
• http://infosthetics.com/
• http://www.visualcomplexity.com/vc/
• http://visual.ly/
• http://flowingdata.com
• http://www.infovis-wiki.net

The beauty of data visualization - David
McCandless
http://www.youtube.com/watch?v=5Zg-C8AAIGg
https://www.youtube.com/watch?v=5Zg-C8AAIGg

Don’t forget
Form teams by 25 Feb
Send names to Martijn

Next lecture:
perception and principles

References
• Card, S. K., Mackinlay, J. D., & Shneiderman, B. (1999).
Readings in information visualization: using vision to think.
Morgan Kaufmann.
• Tufte, E. R., & Graves-Morris, P. R. (1983). The visual
display of quantitative information (Vol. 2, No. 9). Cheshire,
CT: Graphics press.

Information Visualisation: Introduction

More Related Content

Similar to Information Visualisation: Introduction

More from Katrien Verbert

Recently uploaded

Information Visualisation: Introduction