Assignment: Interactive Visualization, Part 2

This week you will complete the interactive visualization you began last week.

Assignment Description

Your task this week is to implement and publish your interactive visualization, and provide a write-up. Your write-up must include 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?
• References to external resources. Be sure to list the data sources you used. If your work adapts or builds on existing visualization examples, please cite those as well.
• 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?

Submission Details

Your interactive visualization should be submitted as a stand-alone page (named src/w6/visualization.md) within your GitLab repo. You should also provide your write-up on this page. For multi-person teams, all team members should include a submission in their individual repos. See below for more information.

Second, your team must submit a URL on Gradescope that links to a published interactive visualization on GitLab pages. Only one team member should submit the link, but must list all team members as part of the Gradescope submission.

Visualization

You should modify the w6/visualization.md page with your implemented interactive visualization, and publish the page to your GitLab repo. The resulting visualization should then be accessible on your course GitLab Pages site. For multi-person teams, all team members should include a copy in their individual repos.

Just a Drop in the Bucket? Who Owns the Most U.S Debt

Press start to begin the animation, each ball is colored with its country's flag, its size is relative to the portion of U.S debt it owned in that year.

Note: to select multiple countries, hold down the Shift key while clicking on the legend. If you would like to use the brush to select a date range for only theose countries, continue holding down the Shift key while selecting the date range.

Write-Up: A Drop in the Bucket: Visualizing U.S. Debt Ownership

Design Rationale

In our project, we aimed to create an engaging and informative visualization of U.S. debt ownership, focusing on the distribution among various countries. Our primary objectives were to ensure that the designs were both functional and intuitive, enabling users to easily comprehend complex data through interactive and visually appealing representations. We also wanted to experiment with a physics-based encoding.

Visual Encodings

• 3D Physics-Based Simulation: We chose a 3D physics-based simulation to represent each country’s debt share as a sphere (ball) dropping into a container. Each sphere is textured with the respective country’s flag, enhancing visual identification and adding an intuitive geographic reference. The size and weight of each ball are proportional to the amount of debt held by the respective country, leveraging human spatial perception to convey quantitative differences effectively.

• 2D Interactive Area Chart: To complement the 3D visualization, we implemented a 2D stacked area chart using Vega-Lite. This chart displays the temporal evolution of debt holdings by different countries, allowing users to observe trends and changes over time. The visual encodings employed in this chart include:

  • X-Axis (Temporal Encoding): The horizontal axis represents time, displaying dates formatted as “%b %Y” (e.g., Jan 2025). This temporal encoding allows users to track changes in debt ownership over specific periods, facilitating the analysis of trends and patterns.

  • Y-Axis (Quantitative Encoding): The vertical axis quantifies the amount of debt held, with values stacked to show the cumulative total. This quantitative encoding enables users to assess the magnitude of debt holdings and compare contributions among countries.

  • Color (Categorical Encoding): Distinct colors are assigned to each country, differentiating them within the stacked areas. This categorical encoding aids in distinguishing between countries and understanding their respective shares in the overall debt.

  • Opacity (Highlighting Interaction): An opacity encoding is applied, where the selected country’s area is highlighted with full opacity, and non-selected areas are rendered with reduced opacity. This interaction technique directs user attention to specific countries of interest while maintaining context.

  • Tooltip (Details-on-Demand): Interactive tooltips provide additional information, such as the exact date, country name, and debt amount when users hover over a specific area. This feature offers details on demand without cluttering the visual space.

  • Interactive Legend and Brushing with zoom/pan: The legend allows users to interactively select and highlight specific countries, updating the chart accordingly. Additionally, a brushing tool enables users to select a time interval on the x-axis, dynamically filtering the data to focus on the chosen period. These interactive elements enhance user engagement and facilitate personalized data exploration.

Alternative Considerations

During the planning phase, we considered implementing more complex multi-view displays and advanced cross-filtering and highlighting techniques to provide a comprehensive analytical experience. Multi-view displays, which present multiple distinct views to support the investigation of a single conceptual entity, could have allowed users to analyze the data from various perspectives simultaneously. Advanced cross-filtering and highlighting would enable users to interact with one visualization and see corresponding changes in others, facilitating deeper insights into the relationships within the data. However, due to time constraints and the complexity involved in seamlessly integrating these features, we decided to focus on developing robust and intuitive interactions within the 3D simulation and the 2D area chart. This approach ensured that the core functionalities were well-executed and user-friendly.

References to External Resources

Data Sources:

• U.S. Department of the Treasury:

  • Historical Data: https://ticdata.treasury.gov/resource-center/data-chart-center/tic/Documents/mfhhis01.txt

• Visualization Tools and Libraries:

  • Spline 3D Modeling Software:
    • Spline Official Website: https://spline.design/
    • Spline Documentation: https://docs.spline.design/
  • Vega-Lite Visualization Library:
    • Vega-Lite Documentation: https://vega.github.io/vega-lite/docs/

Development Process

Our team consisted of three members: Paul Michael Curry, MacKevin Fey, and Dmitri Murphy. We adopted an iterative development process with the following steps:

• Planning and Design (4 hours):

  • Conceptualization: Paul proposed the original idea for the 3D visualization and the overall project concept. MacKevin suggested the ideas for the 2D interactive charts. Together, the team brainstormed and refined these concepts to form a cohesive plan.
  • Design Sketches: Created initial sketches and storyboards to outline the visualization structure and user interactions.

• Data Collection and Processing (4 hours):

  • Data Acquisition: Sourced data from the U.S. Department of the Treasury.
  • Data Cleaning: Processed and formatted the data to align with our visualization requirements.

• Implementation and Testing (10 hours):

  • 3D Simulation Development: Paul utilized Spline to create the 3D scene, incorporating physics simulations for the interactive elements.
  • 2D Chart Development: MacKevin and Dmitri collaborated on developing the 2D interactive area chart using Vega-Lite, integrating features like brushing and interactive legends.
  • Web Integration: Dmitri handled the integration of both the Spline scene and Vega-Lite chart into our webpage, ensuring seamless interaction between components.
  • User Testing: Conducted tests to gather feedback on usability and engagement. Iteration: Refined the visualizations based on feedback, optimizing performance and enhancing user experience.

Time Allocation

• Total Hours Spent: Approximately 18 person-hours.
• Most Time-Consuming Aspect: The implementation and testing phase required the most effort due to the complexity of developing and integrating the 3D simulation and the interactive features of the 2D chart. The data wrangling phase also took longer than expected.

Team Contributions

• Paul Michael Curry: Proposed the original idea for the 3D visualization and the overall project concept. Led the development of the 3D simulation in Spline.
• MacKevin Fey: Suggested the ideas for the 2D interactive charts. Collaborated with Dmitri on implementing the 2D charts and took the lead on drafting the project write-up.
• Dmitri Murphy: Worked alongside MacKevin to develop the 2D interactive charts and was responsible for integrating all components of the project to ensure cohesive functionality.

Through collaborative effort and iterative development, we successfully created an interactive visualization that effectively communicates the distribution of U.S. debt ownership among various countries, providing users with both an engaging 3D experience and a detailed 2D analytical tool.