02.526: Interactive Data Visualization
January Term 2020
Instructor: Ate Poorthuis
Tue 2.30-4.00pm Think Tank 17 (2.202)
Thu 1-2.30pm Think Tank 17 (2.202)
Office Hours: By appointment
Teaching Assistants: Bianchi Dy, Jo Hsi Keong, Feihong Zeng
The course is structured around two 1.5 hour classes per week that integrate lecture, discussion and in-class activities and exercises in an interactive manner. The class is further structured around 6 blocks (each lasting ~two weeks).
Students are expected to be present and actively participate in each class, as well as on the class online forum (Slack). Before coming to class, you will have read the assigned readings and you are coming to class prepared to participate in discussion and exercises.
You are also expected to produce your own work, whether individually or in groups. Do not copy work from the internet or other published sources without proper citations. This is plagiarism and if a student is found to be doing so, he or she will be subject to disciplinary measures including potentially failing the course.
There will be a variety of assessments throughout the semester. Emphasis is on your performance overall, with relatively low weight placed on individual items. Continued participation throughout the semester will enable you to do well in this course.
|Class Participation||15%||Throughout term|
|Assignments (five)||40%||Throughout term|
|Final Project||45%||Week 14|
Each block consists of a series of exercises that culminate in an assignment/report that will be due before the start of the next block (Monday 23.59).
For the final project, you will work in groups of 1-3 students and develop a visualization project. The project can roughly take two direction. The first direction is focused on communicating certain insights or concepts through an interactive, explorable explanation. The second is focused on building a visualization system for exploration of a specific dataset or topic. In Week 6, you will hand in a project proposal that discusses the motivation for your project; its objectives; data requirements (where do you get it from? does it need extensive processing); visualization design/prototype; and a project schedule. A working prototype is due at the end of Week 12, with the final project (and an oral presentation) due at the end of Week 14.
Deadlines are as noted in the course syllabus or on the specific assignment. If something is due on a specific date, you have until midnight on that day to submit the assignment.
In addition to the readings listed below and weekly lab hand-outs, we use this textbook:
- Visualization Analysis and Design (VAD), Tamara Munzner, CRC Press (2014)
We will only use open-source software in this course. Most of the course is based on HTML/CSS/JS, but we will also make use of Svelte from Week 5 onwards. In the first weeks, we will use CodeSandbox as our code editor. In later weeks, it is recommended to use a code editor installed on your own laptop. If you do not have a preference yet, I suggest you use Visual Studio Code. You also need to install Git (if you're on Mac, I suggest you install Homebrew first and install Git with
brew install git).
In the first half of the course, we focus on getting up to speed on the basic building blocks of data visualization on the web. We do so by recreating visualizations from Du Bois' 1900 Paris Exposition. In the second half of the course, we build on this foundation by moving from individual charts to systems of (interactive) visualizations, tentatively using a dataset on HDB Resale Prices (explored more quantitatively in 02.522 Computational Urban Analysis).
Block 1: Introduction to a 'modern' visualization workflow
- HTML / SVG ('Drawing')
- CSS / Git workflow ('Styling')
- VAD Chapter 2: What: Data Abstraction?
- Introduction to CSS (from
CSS First steps Overviewto
Getting Started with CSS)
Block 2: Programmatic Visualization
- VAD Chapter 3: Why: Task Abstraction
Block 3: Reactive Visualization
- Declarative & Reactive Programming I (Introduction to Svelte)
- VAD Chapter 5: Marks and Channels
- A Better Way to Code
- Declarative & Reactive Programming II (Combining Svelte & D3)
- VAD Chapter 7: Arrange Tables
- Explorable Explanations
Block 4: Grammar of Graphics
- A Grammar of Graphics I (Florence - a grammar for Svelte)
- A Grammar of Graphics II (Facets)
- VAD Chapter 5 & 7 (Review)
- VAD Chapter 12: Facets into Multiple Views
Block 5: Maps & Visualization Systems
- A Grammar of Graphics III (Interaction)
- VAD Chapter 11: Manipulate View
- VAD Chapter 13: Reduce Items and Attributes
- VAD Chapter 14: Embed: Focus+Context
- Maps & Cartography
- VAD Chapter 8: Arrange Spatial Data
- VAD Chapter 10: Map Color and Other Channels
- Making Maps Chapter 8: Map Classification
- Making Maps Chapter 9: Map Symbolization
Block 6: Visualization Systems II
- Project Studio
- Project Studio
- VAD Chapter 15: Analysis Case Studies
- Final Project Presentations