This course provides an introduction to data visualization theory and methods for students entirely new to the fields of computation and information design. Through a series of in-class exercises and take-home assignments, students will learn how to critically engage and produce interactive data visualization pieces that can serve as exploratory and analytical tools. The course is part of a larger initiative, hosted by the Center for Spatial Research to teach courses in the critical use of digital tools across fields in architecture, urbanism, and the humanities.

The course will be centered around a semester long data visualization group project, through which the students will learn the basics of data visualization, data analysis, data collection, programming and version control. However, even though the course will teach specific visualization tools, the main conceptual thread will be centered around how to work with data, both in the humanities and in architecture and urbanism. Students will define their final projects around their own interests, and will bring their own datasets into their final projects.

General Topics

  • Data visualization history and concepts
  • Working with data: collection and analysis
  • Basic programming skills and web languages (HTML, CSS, Javascript)
  • Interactivity and online data visualization
  • Collaborative work and version control (GitHub)
  • Working with text data
  • APIs and Web-scraping
  • Generative art


Lecture Assignment
Jan 17

Syllabus overview
What is data viz?
What is code?

Data Humanism by Georgia Lupi
Digital Networks, Public Spaces pp.14-15 DPS, Future Everything
P5.js Getting Started, Color
Intro–Chp.3 Braitenburg Vehicles (1986).

A0 Sharpie Instructions
A1.1 Helloworld: 1+2+3
Jan 24

Digital drawing 101: mental models
Web tech 101: servers, browsers, HTML, CSS, JS
Coding: version control, Github

What is Code? Form + Code Chp. 1
Understanding Comics, Chp. 5,7,8 by Scott McCloud
Interaction of Color, Excerpts by Josef Albers

A1.2 Helloworld: add time
A2.1 Clocks: sketches (no code)
Jan 31

Programming 101: var, loop, if-else, functions
Coding: psuedocode, art of debugging

Learning Processing: Chp. 4-7, 9, 11 by Shiffman, D.
(For reference: O'Reilly JavaScript book by Flanagan, D.)

A2.2 Clocks: choose three to code
Feb 7

Coding: strings, layout, JSON
Web tech 201: APIs

Learning Processing: Chp. 8, 10, 17-19 by Shiffman, D.
Evolution of a Scientific American Graphic by Accurat Studio, 2016
Design and Redesign in Data Visualization by Viegas & Wattenberg

A3.1 Text: one dataset visualized two ways
Feb 14

Graphics: information hierarchy, states
Coding: mouse input, labels, forms

The death of interactive infographics? by Baur, D.
In Defense of Interactive Graphics by Aisch, G.
You Say Data, I Say System by Jer Thorp

A3.2 Text: make one interactive
Feb 21

Graphics: visual variables reprise, perception
Inspiration: quantitative data viz
Coding: parse, format, collect data

Learning About Your Data, Chp. 3 from Data Visualization by Kirk, A.
Finding Stories in Census Data, Source, E. Reyes
Bad Data Guide by Quartz data team

A4.1 Geography: 1 dataset, 3 layers, 1 coded
Feb 28

Multi-view interactives
Coding: state, animation, complexity

The Architecture of a Data Visualization, Accurat Studio
The Whole Brilliant Enterprise,

A4.2 Geography: multi-view interactive
Mar 7

Snow emergency—class cancelled

Nature of Code: Introduction by Shiffman, D.
In Theory and Practice Chp. 1 from Generative Art: A Practical Guide

A5 Generative sketch + 3 final ideas
Mar 14

Spring Break—no class

Mar 21 ☃️make-up: Mar 23 & Mar 24

Data biases: abstraction pitfalls, data collection
Perception biases: visual illusions
Code: concept review, state part 2

What's the Point? Chp. 1 from Naked Statistics
The Well-Chosen Average, Chp. 3 from How to Lie with Statistics
The most misleading charts of 2015, fixed by Quartz
Artificial Intelligence’s White Guy Problem by Crawford, K.

A6 Misrepresentation

Mar 28

Sick day—no class


A7.1 Final: 3 proposals

Apr 4

Proposal pin-up
Narrative structure
Other viz tools (three.js, d3.js)
Examples and inspiration for final projects


A7.2 Final: 3 dataset explorations

Apr 11

Dataset pin-ups


A7.3 Final: working prototype

Apr 18

Desk crits


A7.4 Final: polishes & documentation

Apr 25

Final Review, group A
Guest critics: Juan Francisco Saldarriaga, Arlene Ducao, and Chris Willard

May 2

Final Review, group B
Guest critics: Richard The, Yuliya Parshina-Kottas, TBD



  • 40% Weekly assignments
  • 35% Final project
  • 25% Participation and discussion


  • A0 Sharpie Instructions: letter-size sheet of paper + a sharpie. I’ll explain.
  • A1 Helloworld: setting up github, p5.js, and your homepage.
  • A2 Clocks: a series of exercises in visualizing time.
  • A3 Text: working with and text data, layout, and basic interactivity.
  • A4 Geography: working with more complex datasets (e.g. Census, World Bank), multiple dimensions, and more interactivity.
  • A5 Misrepresentation: design, as critique, a visualization that is misleading while being a technically accurate representation of the data set.
  • A6 Generative Form: build a generative aesthetic representation of a self-chosen dataset.
  • A7 Final Project: follow your own data adventure and define a project around your own interests.


  • Unless otherwise noted, each week we will begin class with 3min. presentations and discussion on the weekly assignment and reading.
  • Lecture slides, readings, assignments and tutorials will be posted to this course website unless otherwise announced.
  • Post questions, ideas, confusions, complaints and excitement to Piazza. Office hours by individual appointment.

Caveat Emptor

Reasons you might plausibly want to take or drop this class:
  • This class is about “learning by making”: we will read and we will discuss, but it’s mainly about making.
  • There will be code in this class: you are not expected to have prior programming experience and class lectures and materials will reflect this expectation, but if that is the case, expect to spend more time on your first few assignments than your peers.
  • We will use p5.js as the main development platform in this class but you are welcome to choose other tools as long as your work can be presented on the web. You are otherwise encouraged to combine your workflow with other tools you are already familiar with (analog or digital!)
  • While the main theme of this class is geospatial data—i.e. datasets that capture an aspect of the human relationship to space and geography—this class will not teach you how to make charts, maps, or choropleths*. Instead, the goal is to help you learn to make flexible, custom visual representations.
    (*This is a choropleth: , source:



Data Visualization
  • Data Flow: Visualizing Information in Graphic Design
  • Data Flow 2: Visualizing Information in Graphic Design
  • Data Points, Nathan Yau
  • Visualizing Information for Advocacy, Tactical Technology Creative
  • Design for Information, Isabel Meirelles
  • Semiology of Graphics, Jacques Bertin
  • The Visual Display of Quantitative Information (2nd Edition), Edward R. Tufte
  • Envisioning Information, E. R. Tufte
  • Visualization Analysis and Design, Tamara Munzer
  • Dear Data, Giorgia Lupi, Stefanie Posavec
  • Show Me the Numbers: Designing Tables and Graphs to Enlighten, Stephen Few
  • Now You See It: Simple Visualization Techniques for Quantitative Analysis, Stephen Few
  • Information Visualization: Perception for Design, Colin Ware
  • The Functional Art: An Introduction ton Information Graphics and Visualization, Alberto Cairo
  • Data Flow: Visualizing Information in Graphic Design
  • Data Flow 2: Visualizing Information in Graphic Design
  • Data Points, Nathan Yau
Graphic Design
  • Data Flow: Visualizing Information in Graphic Design
  • Data Flow 2: Visualizing Information in Graphic Design
  • Data Points, Nathan Yau


  • Sublime
  • Atom
  • ...