This lecture forms part of an Information Visualisation course given at the Vrije Universiteit Brussel.

1. 2 December 2005
Information Visualisation
Introduction
Prof. Beat Signer
Department of Computer Science
Vrije Universiteit Brussel
beatsigner.com

2. Beat Signer - Department of Computer Science - bsigner@vub.be 2
February 11, 2021
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

3. Beat Signer - Department of Computer Science - bsigner@vub.be 3
February 11, 2021
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)

4. Beat Signer - Department of Computer Science - bsigner@vub.be 4
February 11, 2021
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.

5. Beat Signer - Department of Computer Science - bsigner@vub.be 5
February 11, 2021
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

6. Beat Signer - Department of Computer Science - bsigner@vub.be 6
February 11, 2021
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

7. Beat Signer - Department of Computer Science - bsigner@vub.be 7
February 11, 2021
Lecture Schedule
Exercise 2: Data Sources and Dataset Quality Assessment
23
24
25
26
Lecture 2: Human Perception and Colour Theory
Lecture 3: Data Representation
Exercise 3: Preprocessing and Data Analysis Using Python
Lecture 4: Analysis and Validation
Exercise 6: Visualisation Frameworks
online
online
online
online
online
online
online
27
28
Lecture 1: Introduction
22
Exercise 1: Introduction and Discussion of Visualisations online
Exercise 4: Analysis and Validation online
online
Lecture 5: Data Presentation
Exercise 5: Visualisation in Python
online
online
Lecture 6: Data Processing and Visualisation Frameworks
Lecture 7: Design Guidelines and Principles
Exercise 7: Visualisation in D3.js
online
online

8. Beat Signer - Department of Computer Science - bsigner@vub.be 8
February 11, 2021
Lecture Schedule …
Lecture 9: View Manipulation and Reduction
Exercise 8: Interaction and Design Guidelines with Bokeh and Plotly
32
33
34
36
Lecture 10: Interaction
Lecture 11: Dashboards
Exercise 9: Interaction with D3.js
Lecture 12: Case Studies and Course Review
Lab Session
29
Final Project Presentations
Lecture 8: Visualisation Techniques online
online
online
online
online
online
online
online
online
Interim Project Presentations online

9. Beat Signer - Department of Computer Science - bsigner@vub.be 9
February 11, 2021
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

10. Beat Signer - Department of Computer Science - bsigner@vub.be 10
February 11, 2021
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!

11. Beat Signer - Department of Computer Science - bsigner@vub.be 11
February 11, 2021
Joseph Priestley (1769)

12. Beat Signer - Department of Computer Science - bsigner@vub.be 12
February 11, 2021
Joseph Priestley (1769) …

13. Beat Signer - Department of Computer Science - bsigner@vub.be 13
February 11, 2021
London Cholera Map by John Snow (1854)

14. Beat Signer - Department of Computer Science - bsigner@vub.be 14
February 11, 2021
London Cholera Map by John Snow (1854)

15. Beat Signer - Department of Computer Science - bsigner@vub.be 15
February 11, 2021
Florence Nightingale's Rose Diagram(1858)

16. Beat Signer - Department of Computer Science - bsigner@vub.be 16
February 11, 2021
Charles Minard (1869)
▪ Napoleon's March on Moscow (1812-1813)

17. Beat Signer - Department of Computer Science - bsigner@vub.be 17
February 11, 2021
London Underground, Harry Beck (1931)

18. Beat Signer - Department of Computer Science - bsigner@vub.be 18
February 11, 2021
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

19. Beat Signer - Department of Computer Science - bsigner@vub.be 19
February 11, 2021
Video: The Best Stats You've Ever Seen

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

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

22. Beat Signer - Department of Computer Science - bsigner@vub.be 22
February 11, 2021
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

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

24. Beat Signer - Department of Computer Science - bsigner@vub.be 24
February 11, 2021
What is Visualisation (Vis)?
▪ F
▪ 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
Computer-based visualisation systems provide visual
representations of datasets designed to help people carry
out tasks more effectively.
T. Munzner

25. Beat Signer - Department of Computer Science - bsigner@vub.be 25
February 11, 2021
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)

26. Beat Signer - Department of Computer Science - bsigner@vub.be 26
February 11, 2021
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

27. Beat Signer - Department of Computer Science - bsigner@vub.be 27
February 11, 2021
Computer in the Loop
▪ Visualisation of large datasets that might dynamically
change over time

28. Beat Signer - Department of Computer Science - bsigner@vub.be 28
February 11, 2021
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

29. Beat Signer - Department of Computer Science - bsigner@vub.be 29
February 11, 2021
Anscombe's Quartet
[Visualization Analysis & Design, Tamara Munzner, 2014]

30. Beat Signer - Department of Computer Science - bsigner@vub.be 30
February 11, 2021
Anscombe's Quartet …

31. Beat Signer - Department of Computer Science - bsigner@vub.be 31
February 11, 2021
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

32. Beat Signer - Department of Computer Science - bsigner@vub.be 32
February 11, 2021
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!

33. Beat Signer - Department of Computer Science - bsigner@vub.be 33
February 11, 2021
Search Space Metaphor for Vis Design
[Visualization Analysis & Design, Tamara Munzner, 2014]

34. Beat Signer - Department of Computer Science - bsigner@vub.be 34
February 11, 2021
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

35. Beat Signer - Department of Computer Science - bsigner@vub.be 35
February 11, 2021
Information Visualisation Process
Data
Representation
Data
Data
Presentation
Interaction
mapping
perception and
visual thinking

36. Beat Signer - Department of Computer Science - bsigner@vub.be 36
February 11, 2021
Exercise 1
▪ Introduction and Discussion of Visualisations

37. Beat Signer - Department of Computer Science - bsigner@vub.be 37
February 11, 2021
Further Reading
▪ Parts of this lecture are based on the
book Visualization Analysis & Design
▪ chapter 1
- What's Vis and Why Do It?

38. Beat Signer - Department of Computer Science - bsigner@vub.be 38
February 11, 2021
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

39. Beat Signer - Department of Computer Science - bsigner@vub.be 39
February 11, 2021
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

40. Beat Signer - Department of Computer Science - bsigner@vub.be 40
February 11, 2021
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/

41. Beat Signer - Department of Computer Science - bsigner@vub.be 41
February 11, 2021
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

42. 2 December 2005
Next Lecture
Human Perception and Colour Theory