Course project: Explorable explanations
Overview
For this project, you’ll work in teams of 3–4 to create and publish an interactive article that uses visualization to explain some complex subject to a reader. The visualizations you create should all embody the best practices for effective visualization that you have learned in class.
In terms of toolkits, I expect most teams will build an “interactive webpage” using Observable Notebooks. I also expect most teams will use Vega-Lite to create interactive visualizations, but you are also free to use D3.js or p5.js (both of which we will talk about later this term), or some combination thereof. D3 in particular has a vast gallery of examples that you are encouraged to explore and adapt as you see fit. The only requirement here is that you cite your sources (in a code comment) whenever you use code from another example.
If you want to use other tools that we haven’t talked about or that are not JavaScript-based, please talk to me first.
You will choose the topic, but it must have social or scientific importance. Example topics include philanthropic spending, election donations, economic development, humanitarian aid, climate change, education, civil rights, legislative voting records, a computer science algorithm or mathematical concept (or music concept, or any discipline you’re into in addition to CS), or some other important societal topic. Within this constraint, I encourage you to select something of great personal interest.
Create an interactive, engaging explorable explanation of your topic. Your job is to educate your non-expert reader about your topic, and also highlight its importance to society. You should use interactive visualizations to do this.
You may be inspired by the following examples:
- Why outbreaks like coronavirus spread exponentially, and how to “flatten the curve”. Harry Stevens. Washington Post.
- The Hidden Cost of Digital Consumption. Halden Lin, Aishwarya Nirmal, Shobhit Hathi, and Lilian Liang.
- 512 Paths to the White House. Mike Bostock and Shan Carter. New York Times archive.
- Bicycle. Bartosz Ciechanowski.
- Visualizing MBTA Data: An interactive exploration of Boston’s subway system. Mike Barry and Brian Card.
- See other examples at explorabl.es
Before you start, please read A Nested Model for Visualization Design and Validation by Tamara Munzner, or watch the videos about the topic (Part I and Part II) to help you understand what goes into making an effective interactive visualization.
Milestones
The project has three key milestones (see due dates in the course schedule):
- P1: Project proposal: An initial proposal answering specific questions about your planned work (see below); includes information about your teammates as well as initial sketches.
- P2: Prototypes: An initial interactive prototype in Observable.
- P3: Final deliverable: Your final explorable explanation, deployed publicly and presented in class. The class will collectively vote for their top explorable explanation as well as the most impactful topic.
P1: Project Proposal
Using this Word document as a template, propose your topic, dataset(s), and team members. Answer the following questions in your write-up:
- What is your topic?
- Why is it socially or scientifically significant?
- Who is your audience? Why are they reading your article? What are your assumptions about them?
- What dataset(s) are you using? Why are they authoritative? Please include hyperlinks when relevant.
- What are some questions you could answer with these data? Include at least two sketches made with pen and pencil or a tablet and stylus to illustrate your team’s initial ideas.
Not including sketches, your write-up should be no longer than 1.25 pages.
As you brainstorm, consider that we will cover the following as this project progresses:
- Cartographic visualizations.
- p5.js and d3.js, allowing you to draw custom marks and animations, and graphics in general.
So you are not limited to the visualizations and interactions that are possible through Vega-Lite.
Turn in your write-up to Canvas as a PDF filled out by your team.
P2: Interactive Prototype
Develop an initial interactive prototype on Observable and submit the following to Canvas:
- A public (but possibly unlisted) link to your notebook. Please choose a custom URL for your notebook that communicates your chosen topic.
- A static PDF of your notebook, so that improvements you make between now and the final submission may be considered.
- A reflection of what you’ve learned and what you’ve been challenged by so far.
Your interactive prototype will be presented to the rest of the class in a “gallery walk” situation, kind of like a conference poster session. This will be an opportunity to receive constructive feedback from myself and your classmates about your prototype. At this stage, your project does not need to be in its final state. However, you should have:
- An overall structure and flow to your document (i.e., some key headings).
- A draft introduction to your article.
- A description of your dataset and its integrity (including hyperlinks).
- More than one interactive visualization with some basic descriptive text.
P3: Final Deliverable
Finalise and publish your interactive article, and prepare a live demo for the rest of the class. You will present to the class on the last two days of week 10.
The final interactive visualization should have:
- Significant improvements over the P2 prototype, based on feedback received.
- Multiple interactive visualizations that follow best practices and engagingly explain your topic, including coordination of interactions across linked graphics.
- Well-written and concise prose interspersed through your visualizations. That said, try to avoid excessive amounts of prose in your article—the reader should primarily explore your topic through your visuals, not paragraphs of text.
More details about the final presentation will be forthcoming closer to week 10.
Resources
Visualization tools
- UW Data Visualization Curriculum (using Vega-Lite). Jeffrey Heer, Dominik Moritz, Jake VanderPlas, Brock Craft.
- Introduction to D3. Jeffrey Heer.
- Using p5.js in Observable. Jon Froehlich.
Possible data sources
Within the requirement that your topic be societally or scientifically important, you’re strongly encouraged to choose a topic that aligns with your own interests. This list of possible data sources should not dictate your project topic. I provide the list in the hope that something in there intersects with your chosen topic. But if not, please talk to me about finding a dataset! (Note that if your topic is an explanation of an algorithm or mathematical or musical concept, your dataset may be generated instead of downloaded.)
You’re obviously not required to choose from here!
- opendata.slocounty.ca.gov — San Luis Obispo County Open Data
- data.ca.gov — California Open Data
- data.gov — US Government Open Datasets
- data.census.gov — US Census Bureau Open Data
- IPUMS.org — Integrated Census and Survey data from around the world
- Gapminder.org — Gapminder’s mission is to “fight devastating ignorance with a fact-based worldview everyone can understand”
- Federal Elections Commission — Campaign finance data
- NOAA weather datasets — See code in the appendix of this notebook for examples of tidying this data
- DEA Pain Pills database — You may need to enter an email to access this data
- fivethirtyeight.com — Code and data behind stories on 538
- Yelp open dataset
- Datasets curated by Tableau
- Datasets curated by Observable
- Kaggle datasets
- The CORGIS dataset of datasets — Note that these datasets are cleaned and curated specifically for educational use and may be of limited direct utility or may be out of date. However, many link to their original sources (e.g., government websites and the like), which may be useful.
- The Vega datasets collection — Same caveat as above.
You may also consider services like Google Dataset Search, but note that you are responsible for judging the legitimacy of the data you find.
Acknowledgement
This assignment is adapted from the original assignments from Jon Froehlich’s CSE 412 course and Jeffrey Heer’s CSE 442 course at UW.