Syllabus

To enroll, see course listing in WPI.

Required Textbook:

Visualization Analysis & Design by Tamara Munzner (2014) (ISBN 9781466508910)

 

Reference Material (optional, but awesome):

 

Course Description:

This course is all about data visualization, the art and science of turning data into readable graphics. We’ll explore how to design and create data visualizations based on data available and tasks to be achieved. This process includes data modeling, data processing (such as aggregation and filtering), mapping data attributes to graphical attributes, and strategic visual encoding based on known properties of visual perception as well as the task(s) at hand. Students will also learn to evaluate the effectiveness of visualization designs, and think critically about each design decision, such as choice of color and choice of visual encoding. Students will create their own data visualizations, and learn to use Open Source data visualization tools, especially D3.js. Students will also read papers from the current and past visualization literature and create video presentations of their findings.

 

Prerequisites:

Some programming experience in any language. Ideally you have taken a course on computer graphics, but this is not strictly required.

 

Learning Outcomes:

By the completion of this course, learners will be able to:

 

Course Content:

Class

Material to be Covered

Homework Assignments/Projects

1

Overview of Data Visualization, Introduction to Web Technologies

Reading: Chapter. 1 “What’s Vis, and Why Do It?”

Lectures:

  • Why Visualize Data?
  • Introduction to SVG and CSS.
  • Introduction to JavaScript.
  • Introduction to VizHub.
  • Making a Face with D3.js.

Assignments:

  • Introduce yourself via video.
  • Find and describe a data visualization relating to current events.
  • Tweak a face with D3.js.

2

The Shapes of Data

Reading:

  • Chapter 2 “What: Data Abstraction”
  • Chapter 3 “Why: Task Abstraction”

Lectures:

  • Input for Visualization: Data and Tasks
  • Loading and Parsing Data with D3.js

Assignments:

  • Find and describe 3 datasets that you’d like to potentially visualize for your project.
  • Load and parse those 3 datasets using D3.js.

3

Marks and Channels

Reading: Chapter 5 “Marks and Channels”

Lectures:

  • Encoding Data with Marks and Channels
  • Rendering Marks and Channels with D3.js and SVG
  • Introduction to D3 Scales
  • Creating a Scatter Plot with D3.js

Assignments:

  • Re-create one of the small graphics from Figure 5.1 (page 94) using D3.js.

4

Common Visualization Idioms

Reading:  Chapter 7 “Arrange Tables”

Lectures:

  • Reusable Dynamic Components using the General Update Pattern
    • Reusable Scatter Plot
  • Common Visualization Idioms with D3.js
    • Bar Chart, Vertical & Horizontal
    • Pie Chart and Coxcomb Plot
    • Line Chart
    • Area Chart

Assignment:

Create a visualization of the dataset you chose for your project using D3.js, following one of the idioms discussed, including axes and legends.

5

Visualization of Spatial Data, Networks, and Trees

Reading:

  • Chapter 8 “Arrange Spatial Data”
  • Chapter 9 "Arrange Networks and Trees"

Lectures:

  • Making Maps
  • Visualizing Trees and Networks

Assignment:

  • If your project dataset has a spatial, network, or tree aspect, visualize it.

6

Using Color and Size in Visualization

Reading:
Ch. 10 “Map Color and Other Channels”

Lectures:

  • Encoding Data using Color
  • Encoding Data using Size
  • Stacked & Grouped Bar Chart
  • Stacked Area Chart & Streamgraph
  • Line Chart with Multiple Lines

Assignment (Project):
Add color to (or refine the palette of) your project using D3.js and one of the tools discussed.

7

Interaction Techniques

Reading:
Chapter 11 “Manipulate View”

Lectures:

  • Adding interaction with Unidirectional Data Flow
  • Using UI elements to control a scatter plot
  • Panning and Zooming on a Globe
  • Adding tooltips

Assignment (Project):
Add one of the interaction techniques discussed to your project using D3.js.

8

Multiple Linked Views

Reading:
Chapter 12 “Facet into Multiple Views”

Lectures:

  • Small Multiples
  • Linked Highlighting with Brushing
  • Linked Navigation: Bird's Eye Map

Assignment (Project):
Combine your 2 visualizations from week 4 with some form of linked interaction.

9

Data Reduction

Reading:
Chapter 13 “Reduce Items and Attributes”

Lectures:

  • Histograms
  • Aggregating Data with Group-By
  • Hexbin Mapping
  • Crossfiltering

Assignment (Project)
Create a histogram or aggregated bar chart of your project dataset.

10

Focus + Context

Reading:
Chapter 14 “Focus + Context”

Lectures:

  • Building a Migrant Deaths Dashboard

Assignment (Project):
Use Focus + Context idiom in your project.

Note: Weekly assignments may be subject to change, and will be given in detail week by week.