Introduction - Lecture 1 - Information Visualisation (4019538FNR)

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

Transcript

1. 2 December 2005 Information Visualisation Introduction Prof. Beat Signer Department of Computer Science Vrije Universiteit Brussel beatsigner.com Department of Computer Science Vrije Universiteit Brussel beatsigner.com
2. Beat Signer - Department of Computer Science - bsigner@vub.be 2 February 12, 2026 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 ▪ Qi Xu Vrije Universiteit Brussel PL9.3.58 (Pleinlaan 9) +32 2 629 3487 qi.xu@vub.be wise.vub.ac.be/member/qi-xu
3. Beat Signer - Department of Computer Science - bsigner@vub.be 3 February 12, 2026 Course Organisation … ▪ Bingyan Li Vrije Universiteit Brussel PL9.3.58 (Pleinlaan 9) +32 2 629 3487 bingyan.li@vub.be wise.vub.ac.be/bingyan-li A person with long hair wearing glasses Description automatically generated
4. Beat Signer - Department of Computer Science - bsigner@vub.be 4 February 12, 2026 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 ▪ Human-Computer Interaction (1023841ANR) ▪ Next Generation User Interfaces (4018166FNR)
5. Beat Signer - Department of Computer Science - bsigner@vub.be 5 February 12, 2026 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 existing visualisations.
6. Beat Signer - Department of Computer Science - bsigner@vub.be 6 February 12, 2026 Exercises ▪ The course content is further investigated in the exercise sessions ▪ exercise sessions might also be helpful for the assignment ▪ assistants: Qi Xu and Bingyan Li - Group 1: Thursday 13:00–15:00, Group 2: Thursday 15:00–17:00 ▪ Lab Session ▪ two of the exercise sessions is a dedicated lab sessions where you can work and get feedback on your assignment ▪ Additional content might be covered in exercise sessions ▪ strongly recommended to attend all exercise sessions! ▪ exam covers content of lectures and exercises
7. Beat Signer - Department of Computer Science - bsigner@vub.be 7 February 12, 2026 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/43314 ▪ 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
8. Beat Signer - Department of Computer Science - bsigner@vub.be 8 February 12, 2026 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 B.031 B.031 B.031 B.031 I.1.04/05 I.1.04/05 I.1.04/05 27 28 Lecture 1: Introduction 22 Exercise 1: Introduction and Discussion of Visualisations I.1.04/05 Exercise 4: Ana lysis and Validation I.1.04/05 B.031 Lecture 5: Data Presentation Exercise 5: Visualisation in Python B.031 I.1.04/05 Lecture 6: Data Processing and Visualisation Frameworks Lecture 7: Design Guidelines and Principles Exercise 7: Visualisation in D3.js B.031 I.1.04/05
9. Beat Signer - Department of Computer Science - bsigner@vub.be 9 February 12, 2026 Lecture Schedule … Lecture 9: View Manipulation and Reduction Exercise 9: Interaction and Design Guidelines with p5.js and Plotly 32 33 34 34 Lecture 10: Interaction Lecture 11: Dashboards Lab Session Lecture 12: Course Review 30 31 No Lecture I.1.04/05 I.1.04/05 B.031 B.031 B.031 B.031 No Exercise 36 Final Project Presentations I.1.04/05 29 Lecture 8: Visualisation Techniques B.031 Interim Project Presentations I.1.04/05 Lecture 12: Case Studies B.031 Lab Session I.1.04/05 Exercise 8: Interactive Visualisations I.1.04/05
10. Beat Signer - Department of Computer Science - bsigner@vub.be 10 February 12, 2026 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 4 students per group - send an email with the 4 group members and your team name to Qi Xu by Monday, February 16 (qi.xu@vub.be) - final presentation (May 21), final report and code (May 24) ▪ assignment counts for 40% of the final grade
11. Beat Signer - Department of Computer Science - bsigner@vub.be 11 February 12, 2026 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!
12. Beat Signer - Department of Computer Science - bsigner@vub.be 12 February 12, 2026 Joseph Priestley (1769)
13. Beat Signer - Department of Computer Science - bsigner@vub.be 13 February 12, 2026 Joseph Priestley (1765) …
14. Beat Signer - Department of Computer Science - bsigner@vub.be 14 February 12, 2026 London Cholera Map by John Snow (1854)
15. Beat Signer - Department of Computer Science - bsigner@vub.be 15 February 12, 2026 London Cholera Map by John Snow (1854)
16. Beat Signer - Department of Computer Science - bsigner@vub.be 16 February 12, 2026 Florence Nightingale's Rose Diagram(1858)
17. Beat Signer - Department of Computer Science - bsigner@vub.be 17 February 12, 2026 Charles Minard (1869) ▪ Napoleon's March on Moscow (1812–1813)
18. Beat Signer - Department of Computer Science - bsigner@vub.be 18 February 12, 2026 London Underground, Harry Beck (1931)
19. Beat Signer - Department of Computer Science - bsigner@vub.be 19 February 12, 2026 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
20. Beat Signer - Department of Computer Science - bsigner@vub.be 20 February 12, 2026 Video: The Best Stats You've Ever Seen
21. Beat Signer - Department of Computer Science - bsigner@vub.be 21 February 12, 2026 MindXpres Data Visualisation
22. Beat Signer - Department of Computer Science - bsigner@vub.be 22 February 12, 2026 Mapping 2019-nCoV
23. Beat Signer - Department of Computer Science - bsigner@vub.be 23 February 12, 2026 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
24. Beat Signer - Department of Computer Science - bsigner@vub.be 24 February 12, 2026 Mercator Projection
25. Beat Signer - Department of Computer Science - bsigner@vub.be 25 February 12, 2026 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
26. Beat Signer - Department of Computer Science - bsigner@vub.be 26 February 12, 2026 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 losing details (details on demand)
27. Beat Signer - Department of Computer Science - bsigner@vub.be 27 February 12, 2026 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
28. Beat Signer - Department of Computer Science - bsigner@vub.be 28 February 12, 2026 Computer in the Loop ▪ Visualisation of large datasets that might dynamically change over time
29. Beat Signer - Department of Computer Science - bsigner@vub.be 29 February 12, 2026 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
30. Beat Signer - Department of Computer Science - bsigner@vub.be 30 February 12, 2026 Anscombe's Quartet [Visualization Analysis & Design, Tamara Munzner, 2014]
31. Beat Signer - Department of Computer Science - bsigner@vub.be 31 February 12, 2026 Anscombe's Quartet …
32. Beat Signer - Department of Computer Science - bsigner@vub.be 32 February 12, 2026 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
33. Beat Signer - Department of Computer Science - bsigner@vub.be 33 February 12, 2026 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!
34. Beat Signer - Department of Computer Science - bsigner@vub.be 34 February 12, 2026 Search Space Metaphor for Vis Design [Visualization Analysis & Design, Tamara Munzner, 2014]
35. Beat Signer - Department of Computer Science - bsigner@vub.be 35 February 12, 2026 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
36. Beat Signer - Department of Computer Science - bsigner@vub.be 36 February 12, 2026 Information Visualisation Process Data Representation Data Data Presentation Interaction mapping perception and visual thinking
37. Beat Signer - Department of Computer Science - bsigner@vub.be 37 February 12, 2026 Exercise 1 ▪ Introduction and Discussion of Visualisations
38. Beat Signer - Department of Computer Science - bsigner@vub.be 38 February 12, 2026 Further Reading ▪ Parts of this lecture are based on the book Visualization Analysis & Design ▪ chapter 1 - What's Vis and Why Do It?
39. Beat Signer - Department of Computer Science - bsigner@vub.be 39 February 12, 2026 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
40. Beat Signer - Department of Computer Science - bsigner@vub.be 40 February 12, 2026 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
41. Beat Signer - Department of Computer Science - bsigner@vub.be 41 February 12, 2026 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/
42. Beat Signer - Department of Computer Science - bsigner@vub.be 42 February 12, 2026 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
43. 2 December 2005 Next Lecture Human Perception and Colour Theory