Assignment: Interactive Visualization, Part 1

For this assignment, you will explore the issues involved in implementing interactive visualizations. You will build a visualization that enables interactive exploration of a dataset of your own choosing and deploy it on the web.

One goal of this assignment is to gain familiarity implementing interaction techniques for visualizations. For example, the zipdecode and NameVoyager applications shown in class apply the interactive technique of dynamic queries – as explored in the earlier HomeFinder application – to the problem of uncovering patterns in zip codes and baby names. Similarly, treemaps were originally developed to display hierarchical file structure, and were later adapted to the problem of interactively depicting a map of the stock market. We have seen many other examples of interactive visualization techniques in class and in the readings. The goal with this assignment is not only for you to gain hands-on implementation experience, but also for you to think about the effectiveness of the specific techniques for a chosen data domain.

This assignment will span two weeks. In the first week, you should form a project team, select a dataset, and sketch your initial designs. In the second week, you will implement and publish a working web-based visualization.

Assignment Description

Your task is to design an interactive graphic aimed at enabling understanding of a compelling question for a dataset of your own choosing. In order to determine what subset of the data and which interactive options are most promising, you may want to perform additional exploratory analysis. What aspects of the data reveal the most interesting discoveries or stories? Do not feel obligated to try to convey everything about the data: focus on a compelling subset.

One challenge is to scope the assignment so that you can finish it in two weeks. Focus on designing a limited yet compelling visualization that enables interactive exploration along a few critical dimensions. The NameVoyager application is a nice example that uses a simple but elegant interaction design to enable engaging explorations. A tightly-focused, well-implemented interactive graphic is much preferred to a sprawling design that attempts too much!

Your graphic must include interactions that enable exploration. Possible techniques include panning, zooming, brushing, details-on-demand (e.g., tooltips), dynamic query filters, and selecting different measures to display. You are free to also consider highlights, annotations, or other narrative features intended to draw attention to particular items of interest and provide additional context.

You will implement your interactive graphic and ultimately deploy it to the web by adding it to the Week 6 content of your repo. We expect most students will use D3.js or Vega-Lite for this assignment; however, you are free to use other web-based libraries.

Team Structure

You may work in teams ranging from 1-3 people. If you choose to work as a multi-person team, be sure to assign appropriate task roles up front and balance the workload. Use class time to schedule any out of class assignment meetings ahead of time! For multi-person teams, all team members must include a submission in their individual repos.

Grading

Projects that squarely meet the requirements for the assignment will receive an A grade. Going beyond the call of duty can net additional points, for example:

• advanced interaction techniques
• novel visualization elements
• effective multi-view coordination
• thoughtful and elegant graphic design
• insightful & engaging exploration experience

Point deductions will be made when projects suffer from:

• errors or broken features
• clearly ineffective visual encodings
• confusing interface design or unhelpful interactions
• lack of exploratory interaction techniques
• incomplete or insufficient write-up

Submission Details

For this week, your task is to form a team, pick a topic, acquire and wrangle the necessary data, and make early design sketches or prototypes. To submit your work, fill in the sections below and commit them to your GitLab repository. You do not need to submit anything to Gradescope this week.

Your implemented visualization and write-up will be due later as part of next week’s assignment.

Team and Project Formation

Team Members: List names and UW emails here.

Title: Provide a title for your visualization here.

Topic: Briefly describe the topic, goals, and intended audience of your work.

Dataset: Describe your data and data source here.

Design Sketches

Place your initial design plans and sketches here. These may consist of text notes, photos of drawn sketches and storyboards, and any initial visualization prototypes. If helpful, you are free to add additional pages to your repo under w5 and link to those pages here.