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

Beat Signer - Department of Computer Science - [email protected] 2 February 13, 2025 Course Organisation ▪ Prof. Beat Signer Vrije Universiteit Brussel PL9.3.60 (Pleinlaan 9) +32 2 629 1239 [email protected] wise.vub.ac.be/beat-signer ▪ Qi Xu Vrije Universiteit Brussel PL9.3.58 (Pleinlaan 9) +32 2 629 3487 [email protected] wise.vub.ac.be/member/qi-xu

Beat Signer - Department of Computer Science - [email protected] 3 February 13, 2025 Course Organisation … ▪ Ingela Rossing Vrije Universiteit Brussel PL9.3.56 (Pleinlaan 9) +32 2 629 3749 [email protected] wise.vub.ac.be/ingela-rossing

Beat Signer - Department of Computer Science - [email protected] 4 February 13, 2025 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)

Beat Signer - Department of Computer Science - [email protected] 5 February 13, 2025 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.

Beat Signer - Department of Computer Science - [email protected] 6 February 13, 2025 Exercises ▪ The course content is further investigated in the exercise sessions ▪ exercise sessions might also be helpful for the assignment ▪ assistants: Qi Xu and Ingela Rossing - Group 1: Thursday 13:00–15:00, Group 2: Thursday 15:00–17:00 ▪ Lab Session ▪ one of the exercise sessions is a dedicated lab session 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

Beat Signer - Department of Computer Science - [email protected] 7 February 13, 2025 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/37759 ▪ 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

Beat Signer - Department of Computer Science - [email protected] 8 February 13, 2025 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 E.0.06 E.0.06 E.0.06 E.0.06 I.1.01 I.1.01 I.1.01 27 28 Lecture 1: Introduction 22 Exercise 1: Introduction and Discussion of Visualisations I.1.01 Exercise 4: Analysis and Validation I.1.01 E.0.06 Lecture 5: Data Presentation Exercise 5: Visualisation in Python E.0.06 I.1.01 Lecture 6: Data Processing and Visualisation Frameworks Lecture 7: Design Guidelines and Principles Exercise 7: Visualisation in D3.js E.0.06 I.1.01

Beat Signer - Department of Computer Science - [email protected] 9 February 13, 2025 Lecture Schedule … Lecture 9: View Manipulation and Reduction No Exercise 32 33 34 35 No Lecture Lecture 10: Interaction Exercise 9: Interaction and Design Guidelines with Bokeh and Plotly Lecture 12: Case Studies and Course Review 30 31 No Lecture I.1.01 E.0.06 E.0.06 E.0.06 No Exercise 36 Final Project Presentations I.1.01 29 Lecture 8: Visualisation Techniques E.0.06 Interim Project Presentations I.1.01 Lecture 11: Dashboards E.0.06 Lab Session I.1.01 Exercise 8: Interactive Visualisations I.1.01

Beat Signer - Department of Computer Science - [email protected] 10 February 13, 2025 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 17 ([email protected]) - final presentation (May 22), final report and code (May 25) ▪ assignment counts for 40% of the final grade

Beat Signer - Department of Computer Science - [email protected] 11 February 13, 2025 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!

Beat Signer - Department of Computer Science - [email protected] 12 February 13, 2025 Joseph Priestley (1769)

Beat Signer - Department of Computer Science - [email protected] 13 February 13, 2025 Joseph Priestley (1765) …

Beat Signer - Department of Computer Science - [email protected] 14 February 13, 2025 London Cholera Map by John Snow (1854)

Beat Signer - Department of Computer Science - [email protected] 15 February 13, 2025 London Cholera Map by John Snow (1854)

Beat Signer - Department of Computer Science - [email protected] 16 February 13, 2025 Florence Nightingale's Rose Diagram(1858)

Beat Signer - Department of Computer Science - [email protected] 17 February 13, 2025 Charles Minard (1869) ▪ Napoleon's March on Moscow (1812–1813)

Beat Signer - Department of Computer Science - [email protected] 18 February 13, 2025 London Underground, Harry Beck (1931)

Beat Signer - Department of Computer Science - [email protected] 19 February 13, 2025 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

Beat Signer - Department of Computer Science - [email protected] 20 February 13, 2025 Video: The Best Stats You've Ever Seen

Beat Signer - Department of Computer Science - [email protected] 21 February 13, 2025 MindXpres Data Visualisation

Beat Signer - Department of Computer Science - [email protected] 22 February 13, 2025 Mapping 2019-nCoV

Beat Signer - Department of Computer Science - [email protected] 23 February 13, 2025 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

Beat Signer - Department of Computer Science - [email protected] 24 February 13, 2025 Mercator Projection

Beat Signer - Department of Computer Science - [email protected] 25 February 13, 2025 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

Beat Signer - Department of Computer Science - [email protected] 26 February 13, 2025 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)

Beat Signer - Department of Computer Science - [email protected] 27 February 13, 2025 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

Beat Signer - Department of Computer Science - [email protected] 28 February 13, 2025 Computer in the Loop ▪ Visualisation of large datasets that might dynamically change over time

Beat Signer - Department of Computer Science - [email protected] 29 February 13, 2025 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

Beat Signer - Department of Computer Science - [email protected] 30 February 13, 2025 Anscombe's Quartet [Visualization Analysis & Design, Tamara Munzner, 2014]

Beat Signer - Department of Computer Science - [email protected] 31 February 13, 2025 Anscombe's Quartet …

Beat Signer - Department of Computer Science - [email protected] 32 February 13, 2025 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

Beat Signer - Department of Computer Science - [email protected] 33 February 13, 2025 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!

Beat Signer - Department of Computer Science - [email protected] 34 February 13, 2025 Search Space Metaphor for Vis Design [Visualization Analysis & Design, Tamara Munzner, 2014]

Beat Signer - Department of Computer Science - [email protected] 35 February 13, 2025 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

Beat Signer - Department of Computer Science - [email protected] 36 February 13, 2025 Information Visualisation Process Data Representation Data Data Presentation Interaction mapping perception and visual thinking

Beat Signer - Department of Computer Science - [email protected] 37 February 13, 2025 Exercise 1 ▪ Introduction and Discussion of Visualisations

Beat Signer - Department of Computer Science - [email protected] 38 February 13, 2025 Further Reading ▪ Parts of this lecture are based on the book Visualization Analysis & Design ▪ chapter 1 - What's Vis and Why Do It?

Beat Signer - Department of Computer Science - [email protected] 39 February 13, 2025 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

Beat Signer - Department of Computer Science - [email protected] 40 February 13, 2025 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

Beat Signer - Department of Computer Science - [email protected] 41 February 13, 2025 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/

Beat Signer - Department of Computer Science - [email protected] 42 February 13, 2025 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

2 December 2005 Next Lecture Human Perception and Colour Theory