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:
| Name | Email (CSE) | |
|---|---|---|
| Paul Michael Curry | paulmc@washington.edu | paulmc@cs.washington.edu |
| MacKevin Fey | mackfey@washington.edu | mackfey@cs.washington.edu |
| Dmitri Murphy | dmitri2@washington.edu | dmitri2@cs.washington.edu |
Title:
A Drop in the Bucket: Who Owns the Largest Share of U.S. Debt?
- Possible alternate title: A Breakdown of US Debt Ownership
Topic:
Our project visualizes U.S. debt ownership, focusing on which countries hold the largest shares. The national debt, currently at $7.7 trillion, is a frequent topic in economic discussions.
Our goal is to make this data more tangible through a physics-based simulation. Countries that own U.S. debt are represented as weighted balls dropping into a bucket, with size and weight proportional to their debt holdings. Users can click a button to add or remove a country’s ball, with toggle buttons indicating active selections. Each country’s flag, name, and total debt amount will be displayed alongside their button in the visualization. Our intended audience is laypeople, as our embedding is simple and would be placed in a newspaper article, it is simply to give people an understanding of the relative amounts of these dollar values, and not necessarily for research to discover a new pattern.
Our project will also include interactive charts that allow the user to explore the historical data through the use of features including zoom/pan, and dynamic filtering based on country and year range.
Dataset:
Our data comes from the U.S. Department of the Treasury and provides a breakdown of the largest foreign holders of U.S. debt. The dataset can be accessed here:
U.S. Treasury Data on Foreign Debt Holders (https://ticdata.treasury.gov/resource-center/data-chart-center/tic/Documents/slt_table5.html)
Supplemental data here: https://ticdata.treasury.gov/Publish/mfhhis01.txt
Design Sketches
Our visualization will be constructed using the 3d modeling software Spline3d, which has built in support for simple physics and can be easily embedded into a web page.
Additionally, our visualization will include at least one area chart displaying ownership of US Debt holdings by record date and country leveraging panning, details-on-demand via tooltips, and dynamic filtering which will allow users to explore and key in on different data points.
