CS 7295: Special Topics Course / Information Visualization

Syllabus

Spring 2023


Instructor: John Alexis Guerra Gómez

Students' homework submissions

Full Course Syllabus PDF

Description

The purpose of Data Visualization is to discover insights from data, not just produce pretty pictures. In this course we will cover both the theory behind producing insightful data visualizations, as well as the practical components on how to create them. At the end of this course you will be able to:
  • Design efficient and insightful data visualizations based on perception theories and best practices from the research community.
  • Implement insightful and interactive, could based data visualizations using D3, Vega-Lite or Tableau.
  • Use a systematic approach for abstracting data analysis and visualization problems based on what and why is being visualized, and how is being represented. This will allow you to choose the right visualization for the tasks and data at hand beyond simple subjective rules of thumb.
  • Judge data visualizations based on their ability to help the target users address the proposed tasks on the data.
  • Conduct basic usability experiments to evaluate the value of a visualization with real users.
  • Work with real world clients on real world data problems to help them generate insights

Weekly Schedule

Week Date Topic Tech Videos Homeworks Final Project
1 01/11 Class welcome and logistics
Introduction

Readings: CH1 VAD

Web Development Basics for Visualization
ObservableHQ: From nothing to an interactive tree visualization in 20 mins
Introduction to D3 with Observable
Introduction to Vega-Lite for Observable
Introduction to Tableau
2 01/18 What we visualize

Readings: CH2 VAD

Javascript Fundamentals for Information Visualization
Introduction to Observable's not Javascript
Data files for dataviz: JSON vs CSV
Array operations, map, filter, reduce and above
Nesting, Pivoting and Folding in JavaScript
Tableau for Nesting, Folding and Pivoting Data
HW1 Adapting communitie's visualizations
3 01/25 Why we visualize

Readings: CH3 VAD

SVG, the building blocks of dataviz on the web
Introduction to web Canvas for visualization
Webgl for even more performant data visualizations
Setting up D3 for Observable and local development
Setting up the Vega-lite Javascript API for Observable and beyond
Setting up Tableau
4 02/01 How we visualize

Readings: CH5 VAD

D3 v6 Selections explained
Translating Marks and Channels visualization theory to practice with D3
Translating marks and channels visualization theory to practice with the Vega-Lite JS API
Translating Marks and Channels Visualization theory to practice with Tableau Calculated Fields, Level of Detail (LOD) Functions
HW2 Basic Vega-Lite Viz
5 02/08 Rules of thumb

Readings: CH6 VAD

D3 v6 Data Binding explained using Observable
Towards reusable d3 v6 charts on Observable
Vega-Lite API custom charts
How to use D3 path to generate lines, areas, shapes and more
Other scales in D3: scaleSqrt, scaleTime, scalePoint and more
D3: Creating a Histogram step by step
D3 Stack and other layouts
HW3 Visualization Problem Abstraction
6 02/15 Tabular, Multidimensional Data

Readings: CH7 VAD

Using D3 for creating a donut chart step by step
Creating a Donut Chart with Vega-Lite API
Creating stacked and radial charts in Tableau
Select team and topic
7 02/22 Temporal Data Using D3 with temporal data
How to create a D3 heatmap from scratch
Creating temporal visualizations with Vega-Lite API
Visualizing temporal data with Tableau
HW4 Multidimensional data
8 03/01 Midterm recap
Midterm
Visualizing Node-Link Networks with D3 v6 and Observable
Visualizing Node-Link Networks with Vega-Lite-API, D3 and Observable
Network Visualization with Tableau (and D3 + Observable)
Using color in D3
Working with color in Vega-Lite API
Working with Color in Tableau
Initial proposal (15%)
9 03/08 Spring Break
10 03/15 Networks and Color

Readings: CH9 and CH10 VAD

Visualizing Trees with D3 v6 and Observable
Visualizing Trees with Vega-Lite API
Visualizing Trees with Tableau
Visualizing Geo with D3
Using Vega-Lite for Maps and Geographical Data
Visualizing Maps with Tableau and Mapbox
HW5 Temporal
11 03/22 Trees and Geo

Readings: CH8-10 VAD

D3 Transitions and animations in Observable
Animations with the Vega Lite API on Observable
HW6 Networks Project progress report and presentation (20%)
12 03/29 Evaluation

Readings: CH10-14 VAD

How to create a scrolly-telling visualization
D3 Faceting visualizations into multiple views
Vega-Lite API faceting into multiple views
Tableau faceting into multiple views
HW7 Trees
13 04/05 Manipulating Views

Readings: CH11 VAD

How to implement crossfiltering across charts in Observable
Filtering attributes and items in Javascript
Tableau Data Preparation
14 04/12 Faceting

Readings: CH12 VAD

Usability Study Result (25%)
15 04/19 Reducing
Advanced Concepts
Finals week 04/26 Project presentation/Blog/Demo (40%)

Slack Workspace infovis-neu.slack.com

All the class' messages are going to be sent using our Slack workspace. Students are encouraged to use slack to ask questions, coordinate and collaborate. Some guidelines:

  • Use #general for general issues, questions etc.
  • Use #project for proposing projects and requesting approval. All projects must be approved by the teacher.
  • Only the teaching assistants and the professor should create threads on #announcements. This channel is used for major announcements.
  • Use #random for sharing random stuff.

Videos and Lectures

For previous iterations of this course I have pre-recorded more than 60 technical videos where I show how to go from the theory concepts to actual visualizations using D3, the Vega-Lite API and Tableau.
There are also some recordings (in Spanish) of previous lectures

Grading

Concept %
Participation 15%
Midterm 15%
Final project
30%
Homeworks 40%

Bibliography