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.
All material will be available in Moodle, and linked from the table below.
Information about your individual projects.
Instructions to prepare your PC assignment submissions are also available.
| 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 |