CAPP 30239 - Data Visualization for Policy Analysis

Data visualizations are powerful tools that can be used to explore, explain, convince and mislead. When working with data in a policy context, the clarity of a visualization and choices made during its design can have repercussions on the people that find themselves represented by pixels on a screen.

This course introduces important theoretical concepts for data visualization, focusing on explanatory visualization— building visualizations to explain or persuade. We will cover theory related to visualizations like perception of color and common visualization programming paradigms, primarily grammar of graphics.

In addition to the theory-focused content, the course will have a significant programming component: starting with a major Python visualization library (Altair), and providing an introduction to the ubiquitous D3 library. The latter will require picking up a bit of HTML, CSS, and JavaScript as we go.

WarningWhat to Expect

While lecture content will focus on theoretical concepts, expect to write a significant amount of code independently.

You will be writing quite a few visualizations in Python, and may need to clean & prepare some data as a prerequisite to producing your visualizations.

In the latter half of the course we will cover some HTML/CSS/JavaScript, with the expectation that you will spend some time outside of class learning these from online materials.

Two major assignments will have you building out a data visualization portfolio related to policy areas of your own choosing. These assignments will include peer critique— productive critique and incorporation of feedback is essential to building effective visualizations.

Goals

  • Understand & appreciate what makes a good data visualization.
  • Learn practical visualization techniques that will apply in any language & library.
  • Build a portfolio of static & interactive visualizations using real-world policy data.
  • Gain exposure to useful libraries in Python and JavaScript.

Prerequisites

  • CAPP 30122 (Computer Science with Applications 2) or equivalent
  • CAPP 30235 (Databases for Public Policy) or equivalent

Software

This course will be using Altair and D3.js for instruction and assignments.

For your project, you will be free to use other libraries.

If you’d like to use a framework not already on this list, please ask first.

You may not use:

  • matplotlib (except as a dependency to other libraries, like Seaborn)
  • streamlit
  • Plotly Dash

Course Staff

Instructor: James Turk

Email: jturk@uchicago.edu

Office: JCL 352

Office Hours

Who Where When
James Turk JCL 352 Wednesday 2pm-3pm
James Turk JCL 352 Thursday 3:30pm-5pm
Note

In addition to the drop-in hours above, James also has openings for appointments available: https://cal.com/jamesturk/office-hours

Please note that these are limited and they are shared between multiple classes. Please be considerate in your usage and favor the drop-in office hours for help on assignments.

Lectures

Time: Tuesday & Thursday, 11:00-12:20pm

Location: Ryerson 255

Week Tuesday Thursday
1 Sep 29
The Value of Data Visualization		 Oct 1
Grammar of Graphics with Altair
2 Oct 6
Perception and Color		 Oct 8
Part 2: Color on the Screen
3 Oct 13
Chart Design		 Oct 15
Critique
4 Oct 20
Narrative		 Oct 22
HTML/CSS
5 Oct 27
SVG		 Oct 29
JS
6 Nov 3
D3		 Nov 5
Mapping in the Browser
7 Nov 10
Uncertainty		 Nov 12
Animation & Interaction
8 Nov 17
TBD		 Nov 19
More Animation & Interaction
Thanksgiving - -
9 Dec 1
Special Topics		 Dec 3
Wrap-Up

Readings

WarningReading Documentation

At this point in your growth as a programmer, learning from documentation is one of your most important skills.

I would recommend setting aside an hour or two a week to review course readings.

Lecture material will cover high-level concepts, but can’t feasibly cover every method/etc. of libraries like Altair and D3 that you’ll need to use.

Readings come in a few forms:

  • Useful Context readings provide helpful context that you may or may not already have that will help you follow along in upcoming lectures.
  • Essential Reading is material not covered in lecture, that you will need to read on your own, typically on libraries & languages.
  • References & Tools libraries, templates, tools, etc. that may prove useful when working on data visualizations.

Week 1

Useful Context

If you have never encountered “tidy” data or “grammar of graphics” these two papers by Hadley Wikham provide context that might be useful:

Essential Reading

The most important reading for this week will be to begin working your way through the Altair User Guide.

https://altair-viz.github.io/user_guide/data.html

The sections you should read (in the left sidebar):

  • Specifying Data (you can stop when you hit ‘Generated Data’)
  • Encodings
  • Encodings -> Channels (skim Channel Options)
  • Marks (skim a few of the mark guides, including Bar & Point)
  • Data Transformations (skim a few, including Regression)
  • Layered and Multi-View Charts
  • Customizing Visualizations

There is also a tutorial you may find helpful which goes through small examples one at a time:

https://altair-viz.github.io/altair-tutorial/notebooks/01-Cars-Demo.html

Using Altair’s Documentation

Once you’ve read the above you have seen the core ideas of Altair.

The remaining sections of the guide are useful as reference. As you use Altair you will find your way to them as you ask yourself questions like “how do I work with geospatial data” or “how can I combine these axes”?

The other common thing you will use the documentation for is “what arguments can I pass to this?”

For that, use the API Reference and find the class you’re working with.

Example:

Warning

While using LLMs to learn an interface is allowed, I often have students tell me “I spent an hour trying to figure out why function didn’t work and it never existed at all/doesn’t exist anymore.”

While it may be tempting to learn the API of a library by using ChatGPT instead of the docs, there are a few caveats:

  • ChatGPT and other LLMs do not have a sense of what the current interface is, often with libraries like Altair & D3 they will use obsolete APIs that appear often in their training corpus.
  • LLMs have a well-known tendency to “hallucinate” APIs that do not exist at all, especially if similar to another library, this can be particularly frustrating.
  • Finally, while LLMs may work decently for established libraries like D3 and Altair in many cases, they cannot perform well on newer libraries or private libraries used within companies. There aren’t thousands of example projects to learn from.

By using LLMs to learn library interfaces, you are usually choosing to learn how things were as of a few years ago. Becoming overly-reliant on them will limit your ability to work with newer APIs, or APIs internal to your next job.

Week 2

Useful Context

For more on the science of color from the eye to the screen: https://jamie-wong.com/post/color/

In terms of relevance for this course, if you are going to buy one Tufte book I’d make it The Visual Display of Quantitative Information, with Envisioning Information a runner-up. The others are great as well, and you can often find bundles of all 4-5 together.

Buy direct from Graphics Press: https://www.edwardtufte.com/books/

Tools (from slides)

Week 3

Additional Resources

Week 4

Narrative Resources

Design

Typography

Free font libraries:

Week 5

Essential Reading: HTML/CSS Tutorials

If you’ve never worked with HTML/CSS, it’ll be helpful to start with these before class.

HTML & CSS Resources

More tutorials

CSS Frameworks

HTML Templates

Week 6

Good JS Tutorials (in addition to MDN)

JS in VS Code: https://code.visualstudio.com/docs/languages/javascript

A guide to avoiding bundlers/some of the harder parts of JS with the latest features of the web: https://plainvanillaweb.com/index.html

D3 Resources

Coursework

There are two major assignments, each of which will be worth a total of six points (spread across four milestones):

There are also a handful of additional small assignments each with a single grade. The grading scheme is designed in a way to allow you to consider some of these to be optional depending on what you hope to get out of the course & your available time.

Assignment Schedule

  • Assignments will be posted at least a week before they are due, typically more.
  • All work is due by 11:59pm on the stated day.
Assignment Points Late Allowed? Date
Static Project Proposal 1 Y Fri, Oct 2
Altair Lab 1 Y Fri, Oct 9
Analysis: Part 1 0.5 N Fri, Oct 9
Static Feedback Draft 1 Y Fri, Oct 16
Static Peer Critique 1 N Fri, Oct 23
Analysis: Part 2 0.5 N Fri, Oct 23
Static Final Deliverable 3 Y Fri, Oct 30
HTML/CSS Practice 1 Y Fri, Nov 6
Interactive Proposal 1 Y Fri, Nov 6
Analysis: Part 3 1 N Fri, Nov 13
d3 Practice 1 Y Fri, Nov 20
Interactive Prototype 1 Y Mon, Nov 30*
Interactive Peer Critique 1 N Mon, Nov 30
Interactive Final Deliverable 3 N TBD
Participation Grade 1
Note

*Interactive Prototype will be accepted on a rolling basis for earlier feedback if desired, but final due date is same day as critique to allow for flexibility.

Altair Lab

This assignment will have you practice with Altair by recreating a handful of visualizations.

Download Altair Assignment

The README contains instructions on how to run the assignment, which is contained in a Jupyter notebook.

HTML/CSS Lab

This assignment will have you practice with HTML/CSS.

HTML/CSS Practice Assignment

D3

This assignment will have you practicing with D3 by recreating an interactive visualization.

Analysis

Part 1: Gathering Static Visualizations

In Week 3 we will be focusing on what makes a good visualization, and how to provide meaningful critique.

For this assignment I would like you to consider a visualization that you’ve come across in your life that stands out to you: perhaps from a news article, book, class, or job (assuming you have permission to share it).

Do not bring a visualization from the various best/worst visualization galleries one can easily find online. We’ll likely use a few from those, but I am looking for visualizations that you have seen in their original intended context.

To participate in this assignment, please:

  • Create a new Ed Post in the ‘Analysis’ section.

  • Provide a link to or image of a data visualization that you’ve seen that was memorable to you.

  • Write a paragraph or two describing any context you think someone might need to understand the nature of the data viz.

  • Write another paragraph about your relationship to it: when did you encounter it, why do you remember it? At this point do not provide any critique, positive or negative.

Part 2: Providing Critique

Once we’ve had our discussion of critique, we’ll gain a bit of practice providing critique in a controlled environment.

To earn another half point please do the following (after our in-class critique conversation):

  • Pick one of the posts from Part 1. Please look for posts without critique first, but you may post a second critique if all other posts already have critique.
  • Write a detailed critique of the visualization using the framework provided in class.

Part 3: Interactive Analysis

This assignment aims to give additional practice with critique, and looking closely at how an interactive works.

You’ll again make an Ed post, with the following:

  1. A link to a unique interactive visualization you find interesting.
  2. Share your critique of the visualization based on criteria we’ve covered.
  3. Additionally, include a section titled “Reverse Engineering” where you try to figure out how the visualization in question works. Things to consider:
    • What library does it appear to be using? View the page source and try to learn as much as you can.
    • By inspecting the SVG/HTML what can you learn about how it works? Mention at least 3 different visual elements and what SVG elements they are made of. (e.g. bar chart -> rectangle, legend -> text/rect).
    • Any open questions about how it was made? Something you can’t figure out how they did?

Participation

We will have several in-class discussions, as well as some room for open-ended conversation on Ed.

You must meaningfully participate in at least two of these discussions to earn an S. (Participation in one will earn an N.)

Meaningful participation would include:

  • asking thoughtful questions
  • providing insight based on your own experiences
  • thoughtful commentary or critique on visualizations under discussion

Late Work

You start the quarter with three 24 hour “lateness tokens”.

These tokens may be distributed as you wish among any projects where lateness is allowed. (indicated above) Submitting an assignment between 1 and 24 hours late will use a token.

Submitting an assignment late without tokens to spend will result in a penalty. Certain assignments, particularly those related to peer critique, may not be submitted late without immediate penalty.

The penalty for late work is having the maximum grade capped at an N. After 48 hours it may be deemed Ungradable.

Given the fact that the major projects have the concept of resubmission & revision built in, there is no room in the schedule for additional resubmissions of work.

Grading

Each assignment/milestone will be graded on an S/N/U scale:

Grade Points Rationale
Satisfactory 1 The work meets the necessary criteria with no major omissions.
Needs Improvement 0.5 The work fails to meet one or more major criteria, or a large number of minor criteria.
Ungradable 0 The work does not meet even the minimal criteria to be considered complete (~50% of task).

As described in more detail on their respective pages, the final submissions of the two projects will earn multiple grades: Visual Design, Narrative, and Code Quality.

Final Grade

There will be 18 points available (6 from static, 6 from interactive, and 6 from small assignments).

There is some intentional padding in the grading scheme. This is intended to compensate for the trade-offs one must make when working at this pace & taking two other classes.

You may skip a small assignment here or there depending on your schedule & what you hope to get out of the course. It is also possible to submit half-complete work for partial credit, which may be a good approach if you feel you’ve gotten what you need out of a practice exercise.

Note

In the interest of fairness, I will not make individual extensions in this class barring legitimate emergencies.

The aforementioned padding & late policy are intended to provide for busy weeks and small personal disruptions.

Minimum Score Grade
16 A
15 A-
14 B+
13 B
12 B-
11 C+
<=10 will be discussed

Acknowledgments

Thanks to Andrew McNutt and Alex Kale for providing resources that were invaluable in the creation of these materials.