Assignment 4: Interactive Visualization


Working in groups of 3-4, build a visualization in D3 that enables interactive exploration of a dataset of your own choosing.

As you choose your topic, remember that you’ll need to complete the assignment over three weeks, with midterms and spring break in between. Focus on designing one limited yet compelling visualization along the most interesting, rather than all, dimensions. It is also good practice to ensure that as you work, you also have an idea of what parts of the project you might cut if you run out of time. You should finish with a tightly-focused, well-implemented project rather than an ambitious but sprawling, incomplete design.

Week 1 check-in: have your static Observable URL handy and each team member should be ready individually to discuss their project in class on 10/8.

Week 2 check-in: have your dynamic Observable URL handy and ready to discuss in class on 10/15.

Final submission: Submit your group’s Observable url and individually, your peer assessments for A4, by Monday 3/23, 11:59pm.

Week 1: Static

Design an interactive graphic to communicate a compelling insight in a dataset of your choice. Consider starting by performing exploratory analysis on datasets of interest, then making divergent and then refined sketches. Create user flow sketches to help you think through the stages of interactivity you will build.

By the end of the first week you should have a static D3 visualization in Observable, loading a near-final version of your dataset for this assignment. Have this ready for in-class critique on 10/8.

You may find it helpful to make a project plan for how you will divide up the rest of the work and complete it within the timeframe.

Week 2: Dynamic

Add interactivity to your project. Techniques we’ve covered in class include panning, zooming, brushing, details-on-demand (e.g., tooltips), query filters, and selecting different measures to display. Also consider highlights, annotations, and other narrative features to draw focus to particular items or provide additional context.

Your final deliverable should be one interactive visual that captures your main data finding. If you built supplementary visualizations, include them as part of your writeup in the 3rd week, but if you’re faced the decision of showing a different view of the data through interactivity vs. through making another visual, show with interactivity. Your viz should be complete by 10/15.

Week 3: Evaluation and Discussion

Conduct usability tests for your dynamic visualization. Choose 4 “users” who are not in this class (can be friends or family; doesn’t have to be experts.) Your goal is to observe how someone who might come across your project on the internet might react to it. Plan for 20min. per session with one user at a time, and without giving them background about your project or what your intentions were, ask them to talk out loud as they navigate your visualization on their own. You should take notes: What did they notice first? Did they use it the way you intended? What was confusing? After they’re finished, then guide them through anything they might have been missed. User feedback may be inconsistent; some users might like one feature that others dislike. Find out why.

In your Observable notebook, lead with your interactive visualization, including any narrative elements that may be part of its presentation. Then, include a 400-word write-up of your design decisions and process:

Make sure also to include process images (e.g. of abandoned alternatives) in your writeup. To upload images so they can be embedded in Observable, you can choose from any of imgbb (choose HTML full linked), Flickr (Share > Embed), or Google Photos (works with your LionMail account as long as you’ve turned on shareable link for that photo.)

Grading Criteria

You should have:

We’d also love to see:

Make sure you do not have:

D3 Resources