Information Visualisation

Introduction

Prof. Beat Signer

Department of Computer Science

Vrije Universiteit Brussel

beatsigner.com

2 December 2005
 Course Organisation
▪ Prof. Beat Signer
Vrije Universiteit Brussel
PL9.3.60 (Pleinlaan 9)
+32 2 629 1239
bsigner@vub.be
wise.vub.ac.be/beat-signer
▪ Maxim Van de Wynckel
Vrije Universiteit Brussel
PL9.3.58 (Pleinlaan 9)
+32 2 629 3487
mvdewync@vub.be

February 11, 2021 Beat Signer - Department of Computer Science - bsigner@vub.be 2

 Prerequisites
▪ Note that this is an advanced Master's level
course and the following previous knowledge is required
▪ good programming skills
▪ It is not impossible to follow the course without these
prerequisites, but in this case you should not complain
about the potential additional workload!
▪ Note that the following courses teach principles that are
also relevant for this course on Information Visualisation
▪ Gebruikersinterfaces (1019885ANR)
▪ Next Generation User Interfaces (4018166FNR)

February 11, 2021 Beat Signer - Department of Computer Science - bsigner@vub.be 3

 Course Goals
▪ After attending the course on Information Visuali-
sation, the student has solid background knowledge
about information visualisation (terminology, principles
and issues, visualisation techniques, data representation
and presentation).
▪ The student can design, develop and test interactive
visualisations.
▪ The student can criticise visualisations.

February 11, 2021 Beat Signer - Department of Computer Science - bsigner@vub.be 4

 Exercises
▪ The course content is further investigated in
the exercise sessions
▪ exercise sessions might also be helpful for the assignment
▪ assistant: Maxim Van de Wynckel
- Thursday 16:00–18:00

▪ Lab Session
▪ one of the exercise sessions is a dedicated lab session where
you can work and get feedback on your assignment
- Thursday 16:00–18:00

▪ Additional content might be covered in exercise sessions

▪ strongly recommended to attend all exercise sessions!
▪ exam covers content of lectures and exercises

February 11, 2021 Beat Signer - Department of Computer Science - bsigner@vub.be 5

 Course Material
▪ All material will be available on Canvas
▪ lecture slides, exercises, research papers, tutorials, ...
▪ Make sure that you are subscribed to the
Information Visualisation course on Canvas
▪ https://canvas.vub.be/courses/17989
▪ Handouts are available on Canvas at least the day
before the lecture
▪ Handouts are also available on the WISE website
▪ https://wise.vub.ac.be/course/information-visualisation

February 11, 2021 Beat Signer - Department of Computer Science - bsigner@vub.be 6

 Lecture Schedule

Lecture 1: Introduction online

22
Exercise 1: Introduction and Discussion of Visualisations online
Lecture 2: Human Perception and Colour Theory online
23
Exercise 2: Data Sources and Dataset Quality Assessment online
Lecture 3: Data Representation online
24
Exercise 3: Preprocessing and Data Analysis Using Python online
Lecture 4: Analysis and Validation online
25
Exercise 4: Analysis and Validation online
Lecture 5: Data Presentation online
26
Exercise 5: Visualisation in Python online
Lecture 6: Data Processing and Visualisation Frameworks online
27
Exercise 6: Visualisation Frameworks online
Lecture 7: Design Guidelines and Principles online
28
Exercise 7: Visualisation in D3.js online

February 11, 2021 Beat Signer - Department of Computer Science - bsigner@vub.be 7

 Lecture Schedule …

Lecture 8: Visualisation Techniques online

29
Interim Project Presentations online
Lecture 9: View Manipulation and Reduction online
32
Lab Session online
Lecture 10: Interaction online
33
Exercise 8: Interaction and Design Guidelines with Bokeh and Plotly online
Lecture 11: Dashboards online
34
Exercise 9: Interaction with D3.js online
Lecture 12: Case Studies and Course Review online
36
Final Project Presentations online

February 11, 2021 Beat Signer - Department of Computer Science - bsigner@vub.be 8

 Assignment
▪ Interactive information visualisation
▪ realisation of an interactive information visualisation
for the domain and dataset(s) of your choice
- various presentations and report
- evaluated based on creativity, design principles and visualisation techniques,
evaluation, documentation, presentations, source code, …

▪ Assignment handed out later this week

▪ group project with 3 students per group
- send an email with the 3 group members and your team name to Maxim
Van de Wynckel by Monday, February 15 (mvdewync@vub.be)
- final presentation (May 20), final report and code (May 23)
▪ assignment counts for 40% for the final grade

February 11, 2021 Beat Signer - Department of Computer Science - bsigner@vub.be 9

 Exam
▪ Oral exam in English
▪ covers content of lectures and exercises
▪ counts 60% for the overall grade
▪ 5 mins questions about the assignment
▪ 15 mins questions about the course content (no preparation time)
▪ Overall grade = oral exam (60%) + assignment (40%)
▪ assignment is composed out of two grades
- overall grade for project where students have some flexibility in distributing
the grades (±2 points) (70%)
- your contribution/knowledge to the project as checked in oral exam (30%)
▪ note that if either the grade for the oral exam or the grade for the
assignment is lower than 8/20, then this automatically becomes
the final grade!

February 11, 2021 Beat Signer - Department of Computer Science - bsigner@vub.be 10

 Joseph Priestley (1769)

February 11, 2021 Beat Signer - Department of Computer Science - bsigner@vub.be 11

 Joseph Priestley (1769) …

February 11, 2021 Beat Signer - Department of Computer Science - bsigner@vub.be 12

 London Cholera Map by John Snow (1854)

February 11, 2021 Beat Signer - Department of Computer Science - bsigner@vub.be 13

 London Cholera Map by John Snow (1854)

February 11, 2021 Beat Signer - Department of Computer Science - bsigner@vub.be 14

 Florence Nightingale's Rose Diagram (1858)

February 11, 2021 Beat Signer - Department of Computer Science - bsigner@vub.be 15

 Charles Minard (1869)
▪ Napoleon's March on Moscow (1812-1813)

February 11, 2021 Beat Signer - Department of Computer Science - bsigner@vub.be 16

 London Underground, Harry Beck (1931)

February 11, 2021 Beat Signer - Department of Computer Science - bsigner@vub.be 17

 Gapminder, Hans Rosling

▪ Hans Rosling working with developmental data for over

30 years
▪ Gapminder demonstrated at 2007 TED talk 'The Best Stats
You've Ever Seen'
▪ "Let the dataset change your mindset", Rosling 2007
▪ animated presentation in space and time

February 11, 2021 Beat Signer - Department of Computer Science - bsigner@vub.be 18

 Video: The Best Stats You've Ever Seen

February 11, 2021 Beat Signer - Department of Computer Science - bsigner@vub.be 19

 MindXpres Data Visualisation

February 11, 2021 Beat Signer - Department of Computer Science - bsigner@vub.be 20

 Mapping 2019-nCoV

February 11, 2021 Beat Signer - Department of Computer Science - bsigner@vub.be 21

 Australia Bushfires (2020)
▪ Not a satellite image!
▪ 3D visualisation of one
month of data by Anthony
Hearsey
▪ data collected by Nasa's
Fire Information for Re-
source Management System
▪ Information visualisation
can be misused to deliver
the wrong message

February 11, 2021 Beat Signer - Department of Computer Science - bsigner@vub.be 22

 Mercator Projection

February 11, 2021 Beat Signer - Department of Computer Science - bsigner@vub.be 23

 What is Visualisation (Vis)?
▪Computer-based
F visualisation systems provide visual
representations of datasets designed to help people carry
out tasks more effectively.
T. Munzner
▪ Augmentation of human capabilities
▪ A vis idiom is a distinct approach to creating and
manipulating visual representations
▪ find best design for a particular task
▪ Resource limitations
▪ computers: computational capacity and scalability
▪ humans: perceptual and cognitive capacity
▪ displays: number of pixels
- information density (data-ink ratio) = amount of information vs. unused space
February 11, 2021 Beat Signer - Department of Computer Science - bsigner@vub.be 24
 Why Use Visualisation?
▪ Human eyes have "superpowers"!
▪ visual system provides very high-bandwidth channel
▪ Visual reasoning is way faster and more reliable
than mental reasoning
▪ perceptual inferences based on spatial location etc.
▪ External representation or "external cognition"
▪ augment human capacity beyond internal cognition and memory
▪ information can be organised by spatial location
▪ Summarise information without loosing details
(details on demand)

February 11, 2021 Beat Signer - Department of Computer Science - bsigner@vub.be 25

 Human in the Loop
▪ Many analysis problems are ill specified
▪ many possible questions to be asked
▪ human-in-the-loop exploration making use of human pattern
detection
▪ augment human capabilities rather than replacing the
human in the loop
▪ Exploratory analysis for scientific discovery (data
analysis)
▪ Visualisation tools for presentation (communication)
▪ presenting existing knowledge

February 11, 2021 Beat Signer - Department of Computer Science - bsigner@vub.be 26

 Computer in the Loop
▪ Visualisation of large datasets that might dynamically
change over time

February 11, 2021 Beat Signer - Department of Computer Science - bsigner@vub.be 27

 Showing Dataset Details
▪ Exploring a dataset to find patterns
▪ not possible if we only see a summary of the dataset
▪ Assessing the validity of a statistical model
▪ does the model fit the data?
▪ Statistical characterisation (descriptive statistics) of a
dataset loses information through summarisation
▪ single summary often an oversimplification hiding the true
structure of a dataset
▪ e.g. Anscombe's Quartet

February 11, 2021 Beat Signer - Department of Computer Science - bsigner@vub.be 28

 Anscombe's Quartet

[Visualization Analysis & Design, Tamara Munzner, 2014]

February 11, 2021 Beat Signer - Department of Computer Science - bsigner@vub.be 29

 Anscombe's Quartet …

February 11, 2021 Beat Signer - Department of Computer Science - bsigner@vub.be 30

 Interactivity
▪ Interactivity is necessary for vis tools handling complexity
▪ limitations of people and displays make it impossible to show a
large dataset at once
▪ change level of details
▪ show different aspects of a dataset
▪ different representations and summaries of data
▪ different presentations of data

February 11, 2021 Beat Signer - Department of Computer Science - bsigner@vub.be 31

 Difficulties in Design
▪ Main issue is that the vast majority of the possibilities in
the design space will be ineffective for any specific
usage context
▪ Design might be a poor match with the human
perceptual and cognitive system
▪ Design might be a bad match with the intended task

▪ Design alternatives: consider multiple alternatives and

choose the best one!

February 11, 2021 Beat Signer - Department of Computer Science - bsigner@vub.be 32

 Search Space Metaphor for Vis Design

[Visualization Analysis & Design, Tamara Munzner, 2014]

February 11, 2021 Beat Signer - Department of Computer Science - bsigner@vub.be 33

 What-Why-How Question
▪ What data is shown
▪ Why is the visualisation tool used (task)
▪ How is the vis idiom constructed in terms of design
choices

February 11, 2021 Beat Signer - Department of Computer Science - bsigner@vub.be 34

 Information Visualisation Process
perception and
visual thinking

mapping

Data Data
Data
Representation Presentation

Interaction

February 11, 2021 Beat Signer - Department of Computer Science - bsigner@vub.be 35

 Exercise 1
▪ Introduction and Discussion of Visualisations

February 11, 2021 Beat Signer - Department of Computer Science - bsigner@vub.be 36

 Further Reading
▪ Parts of this lecture are based on the
book Visualization Analysis & Design
▪ chapter 1
- What's Vis and Why Do It?

February 11, 2021 Beat Signer - Department of Computer Science - bsigner@vub.be 37

 References
▪ Visualization Analysis & Design, Tamara
Munzner, Taylor & Francis Inc, (Har/Psc edition),
November 2014,
ISBN-13: 978-1466508910
▪ Information Visualization: Perception for Design,
Colin Ware, Morgan Kaufmann (3rd edition),
May 2012,
ISBN-13: 978-0123814647
▪ Envisioning Information, Edward R. Tufte,
Graphics Press (1st edition)
December 1990,
ISBN-13: 978-0961392116
February 11, 2021 Beat Signer - Department of Computer Science - bsigner@vub.be 38
 References ...
▪ Semiology of Graphics: Diagrams, Networks,
Maps, Jacques Bertin, ESRI PR (1st edition),
January 2010,
ISBN-13: 978-1466508910
▪ Data Visualization: A Practical Introduction,
Kieran Healy, Princeton University Press,
January 2019,
ISBN-13: 978-0691181622
▪ The Functional Art: An Introduction to Information
Graphics and Visualization, Alberto Cairo,
New Riders (Pap/Dvdr edition), August 2012,
ISBN-13: 978-0321834737
February 11, 2021 Beat Signer - Department of Computer Science - bsigner@vub.be 39
 References …
▪ Factfulness: Ten Reasons We're Wrong
About The World – And Why Things Are Better
Than You Think, Hans Rosling et al., April 2018,
ISBN-13: 978-1119547259
▪ Mapping 2019-nCoV
▪ https://systems.jhu.edu/research/public-health/ncov/
▪ Australia Bush Fires
▪ https://www.sbs.com.au/news/how-fake-bushfire-images-and-misleading-
maps-of-australia-are-spreading-on-social-media
▪ beautiful news daily
▪ https://informationisbeautiful.net/beautifulnews/

February 11, 2021 Beat Signer - Department of Computer Science - bsigner@vub.be 40

 References …
▪ Gapminder
▪ https://www.gapminder.org
▪ https://www.youtube.com/watch?v=usdJgEwMinM
▪ https://www.youtube.com/watch?v=Z8t4k0Q8e8Y
▪ B. Shneiderman, Data Visualization’s Breakthrough
Moment in the COVID-19 Crisis, 2020
▪ https://medium.com/nightingale/data-visualizations-breakthrough-
moment-in-the-covid-19-crisis-ce46627c7db5
▪ R. Roels, Y. Baeten and B. Signer, Interactive and
Narrative Data Visualisation for Presentation-based
Knowledge Transfer, Communications in Computer and
Information Science (CCIS), 739, 2017
▪ https://beatsigner.com/publications/roels_CCIS2017.pdf
February 11, 2021 Beat Signer - Department of Computer Science - bsigner@vub.be 41
Next Lecture
Human Perception and Colour Theory

2 December 2005