CSE512 Data Visualization (Spring 2021)

Assignment 3: Interactive Visualization

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 – first explored in the 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 your chosen data domain.

One challenge is to scope the assignment so that you can finish it within 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!

Team Registration

For this assignment you should work in teams of 3-4 students. We encourage you to find project partners that you can continue to work with for the final project.

As soon as you have formed a team and chosen a dataset, you must submit a team registration form. Your form must include the names, UW email addresses, and GitHub usernames of each team member, along with a concise title for your interactive visualization. If you are looking for project partners, please post to Canvas to find classmates with similar interests! You should submit your team registration by Thur 4/29, 11:59pm.

After the proposal deadline, we will assign your team a repository in the CSE 512 GitHub Organization. We will name your repository based on the visualization title you provide in your registration form (so choose wisely!). See below for details about what your repository must contain at submission time.

Deliverables

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.

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.

Implement your interactive graphic and deploy it to the web. We expect most students will use D3.js or Vega-Lite/Altair for this assignment; however, you are free to use other web-based libraries. Your graphic should not require customized server-side support; you should simply load data from a static file or public web API.

You may use either GitHub pages or an online Observable notebook to host your visualization. If using GitHub, we recommend keeping everything (development files and website) in your master branch: either serve your website from the root folder or from the "/docs" folder. Your repo must also contain the (unobfuscated) source code for your visualization.

If using Observable, make sure to either publicly publish your notebook or enable Share Link under the ... menu: you can then provide the URL to your notebook on Observable as described under "Deliverables" below. In addition, you should use the Download Tarball menu item to export an archive of your notebook. Add the contents of this exported archive file to your GitHub repository for archival purposes.

Alternatively, you are also free to use Jupyter notebooks to author your interactive visualization. The resulting notebook and data files should be added to your GitHub repository. For web-based viewing, one acceptable option is to ensure that the GitHub files are loadable from Colab. That said, we encourage you to export a stand-alone web page using the Altair library and directly publish it online using GitHub pages.

The README.md file in your GitHub repository must include a write-up with the following components:

A rationale for your design decisions. How did you choose your particular visual encodings and interaction techniques? What alternatives did you consider and how did you arrive at your ultimate choices?
An overview of your development process. Describe how the work was split among the team members. Include a commentary on the development process, including answers to the following questions: Roughly how much time did you spend developing your application (in people-hours)? What aspects took the most time?

Grading Criteria

Projects that squarely meet the requirements for the assignment will receive a score of 9 (A). 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

Submit your team registration form by Thur 4/29, 11:59pm.

You must have a working prototype online by Mon 5/10, 11:59pm. Your prototype should be publicly accessible on a notebook service (Observable, Colab) or via GitHub pages using a URL of the form:
https://cse512-21s.github.io/YOUR-A3-PROJECT-NAME/

In addition, you must submit the URL for your prototype on Canvas.