Assignment 3: 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 in two weeks (your due date will seem to be three weeks out, but the midterm exam will occur 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 Observable URL handy and each team member should be ready to discuss their project in class on 10/9.

Final submission: Submit your group’s Observable url and individually, your peer assessments for A3, by Monday 10/30, 11:59pm (extended from 10/22.)

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. Post these to Slack by Monday 10/8 11:59pm for in-class critique.

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 submission should be one interactive visual that captures your main finding. If you built supplementary visualizations, include them as part of your writeup, 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.

In your Observable notebook, lead with your interactive visualization, including any narrative elements that may be part of its presentation. Then, include a 300-word write-up of your design decisions and process. Describe any abandoned alternative designs and describe how work was split amongst team members. Include specific technical or design challenges you encountered. Finally, list resources that helped you along the way (this list doesn’t count against your word limit.)

You’re welcome to include process images 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