INF552 - Data Visualization (2018-2019)

Emmanuel Pietriga
with Caroline Appert and Maxime Buron.
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, and geographical data. All exercises are based on the D3 software library (Data-Driven Documents) or on 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.

Session # Course Exercises
01 Introduction to Data Visualization Crash course HTML/CSS/SVG/DOM/JS
Slides Slides - Code (Skeleton, Full)
02 Fundamental Principles of Visual Perception for Visualization Creating visualizations with D3
Slides Slides - Code (Skeleton, Full)
03 Multi-variate Data Visualisation Creating visualizations with Vega-lite
Slides Slides - Code (Skeleton, Full)
04 Visualization of Hierarchical Structures and Graph Structures (Part I) Visualizing networks with D3
Slides Slides - Code (Skeleton, Full)
05 Visualization of Hierarchical Structures and Graph Structures (Part II) Visualizing trees with D3
Slides Slides - Code (Skeleton, Full)
06 Visualization of Temporal Data (time-series) Visualizing time-series with Vega-lite and D3
Slides Slides - Code (Skeleton, Full)
07 Multi-scale Navigation and Animated Transitions Animated transitions with D3
Slides Slides - Video - Code (Skeleton, Full)
08 Geovisualization & Geographical Information Systems Geovisualization with Vega-lite and D3
Slides Slides - Code (Skeleton, Full)
09 Collaborative visualization in multi-surface environments Remote control of D3 visualizations using Web Sockets
Slides Slides - Code