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 Framework. Observable Framework lets you create websites that run on the same reactive engine as Observable Notebooks, but you can also edit your code in an editor of your choice, work easily with teams using GitHub, and deploy your project to a webpage (e.g., using GitHub Pages, Netlify, or similar services). I also expect most teams will use Vega-Lite to create interactive visualizations, but you are also encouraged to use D3.js for custom interactive graphics. 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 (see below) 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.
As your project begins to take shape, please read Up and Down the Ladder of Abstraction by Bret Victor.
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
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 the rest of the course schedule and see that we will cover more advanced visualization tools and techniques. So you are certainly going to go beyond the visualizations and interactions that are possible through Vega-Lite.
Turn in your write-up to Canvas as a PDF. Only one team member will need to make the submission.
P2: Interactive Prototype
Develop an initial interactive prototype on Observable and submit the following to Canvas:
- A public link to your webpage.
- 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 day of week 10.
The final interactive article should include:
- 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.
Additionally, your article should clearly cite its sources. This includes:
- Links and attributions for your data sources.
- Links and attributions to sources of design ideas or partial implementations that you used as building blocks (e.g., from the D3 example gallery).
- References in support of any claims you make in your prose.
Final presentation
Final presentations will take place on the last day of class: Thursday, June 4.
Presentation content
Each presentation will include three pieces:
- A set of slides briefly introducing the project,
- A live demonstration of one or two major interactive elements of your explorable explanation,
- A slide or two summarizing your contributions (as in, your article’s contributions).
- A description of preliminary evaluations of your contributions (in accordance with the nested model).
- A brief analysis of possible future work or extensions o fyour design to different topics, extended data in the original topic, or more advanced visualization techniques.
Since you have a relatively short time in which to present, it’s extremely important that you rehearse!
Each presentation should include the following pieces (with the recommended amount of time you should devote to each piece). I strongly recommend that you rely on graphics and visuals in your slides—try not to have slides with a lot of text.
- Project goal (< 1 minute): What was the goal of your article? Who were your imagined audience?
- Motivation (1–2 minutes): Why is your topic socially or scientifically important?
- Overarching approach (< 1 minute): What was your approach to the explorable explanation? What tools did you use, what narrative structure?
- Interactive elements (1–2 minutes): Include screen-captured GIFs or videos of the major interactive elements of your explorable explanation. This will serve two goals:
- To show the audience what you built in a lightweight way. I expect you’ll spend less than 30 seconds on this.
- Optionally, this would serve as a backup in case something goes wrong during the live demo (it happens!)
- Live demo (2–3 minutes): At this point you will move to your webpage and demonstrate live usage of the major interactive elements.
- It is strongly recommended that you include a link to your notebook in your slides so that your transition is smooth.
- Don’t try to show everything, just the important parts and the parts you’re most proud of.
- Please have a plan ready for what you will demonstrate! We won’t have time for an “unstructured walkthrough” of the webpage.
- Summary (2 minutes): Close with a brief summary of your article’s contribution, evaluation, limitations in your approach, and how you would extend the project if you had more time.
Deliverable and grading
In the Canvas Discussion for this assignment, submit two links:
- A link to your final explorable explanation (publicly accessible, so everyone can visit it).
- A link to your final presentation slides.
Presentations will be graded on the following criteria:
- Submission: On-time submission of slides.
- Attendance: Were all team members present and on time?
- Completeness: Did the presentation cover all of the required content in the allotted time?
- Clarity and professionalism: Was the presentation clear and practiced, or did it feel unprepared?
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.