INF552 - Data Visualization (2023-2024)

Emmanuel Pietriga
with Olivier Gladin.
example viz

The visual representation of data takes full advantage of the human visual system in terms of perception and cognition. Elaborate patterns, interesting data points and outliers can easily be identified, individual data points and sets can efficiently be compared and contrasted, provided that the data is properly represented. Visualization enables users to explore their data in an interactive manner, to get overviews and drill down to detailed views, following processes that yield insights that would be difficult to obtain using fully automated data analysis techniques from fields such as, e.g., data mining or machine learning. They serve different purposes, but can complement one another very effectively. Visualization can for instance help formulate hypotheses, that can then be tested using statistical tests or other elaborate data analysis techniques. Beyond these exploratory aspects, data visualization can also support decision making, and plays a central role in the communication of findings to a wide range of audiences.

This course first gives an overview of the field of data visualization. It then discusses fundamental principles of human visual perception, focusing on how they help inform the design of visualizations. The following sessions focus on visualization techniques for specific data structures, and discuss them in depth from both design and implementation perspectives, including: multi-variate data, hierarchical structures, networks, time-series, statistical data and geographical data.

All exercises are based on Web technologies, including the D3 software library (Data-Driven Documents) and the Vega-lite interactive graphics grammar. While positioned at different levels of abstraction, both enable developers to create a wide range of interactive, Web-based visualizations that run on a variety of platforms, ranging from desktop workstations to mobile devices.

Requirements: some prior experience with Web-based development (Javascript) is a plus, but not a hard requirement.


Session # Course Exercises
01 Introduction to Data Visualization Crash course HTML/CSS/SVG/DOM/JS
Slides Slides - Instructions - Code template - Solution
02 Fundamental Principles of Visual Perception for Visualization Creating visualizations with D3
Slides Slides - Instructions - Code template - Solution
03 Multi-variate Data Visualisation (Part I) Creating visualizations with Vega-lite
Slides (Part I) Slides - Instructions - Code template - Solution
04 Multi-variate Data Visualisation (Part II) — FC Visualizing time-series with D3
Slides (Part II) Instructions - Code template - Solution - Video
05 Visualization of Temporal Data — FC
Animated Transitions
Animated transitions with D3
Slides Slides - Instructions - Code template - Solution
06 Geovisualization, Multi-scale Navigation Geovisualization with D3 and Vega-lite
Slides Slides - Instructions - Code template - Solution
07 Visualization of Hierarchical & Graph Structures (Part I) — FC Visualizing networks with D3
Slides Slides - Instructions - Code template - Video - Solution
08 Visualization of Hierarchical & Graph Structures (Part II) — FC Visualizing trees with D3
Slides Instructions - Code template - Solution
09 Session entirely dedicated to Petite Classe Visualization of live data streams with D3 and Vega-lite
Instructions - Code template - Solution