Project 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 scientific or environmental dataset and deploy it on the web.

One goal of this assignment is to gain familiarity with implementing interaction techniques for visualizations. For example, the zipdecode and NameGrapher applications 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 structures 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. In the same spirit, your goal is to extend these ideas to modern Earth and climate data, such as global temperature projections, atmospheric patterns, or satellite imagery. Interactivity will be essential to help viewers explore spatial and temporal variation in these complex datasets.

We have seen many examples of interactive visualization techniques in class. The goal of this assignment is not only for you to gain hands-on implementation experience, but also for you to think critically about how effective specific techniques are for your chosen data domain—for instance, how zooming, filtering, or time sliders support insight into environmental change.

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 NameGrapher 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. You might want to find project partners that you will continue to work with for the final project.

As soon as you have formed a team and chosen a dataset, submit the team registration form. Your form must include the names, UCSD email addresses, and PIDs of each team member, along with a concise title for your interactive visualization. The visualization title need not be exact, just a rough title should be a good start. If you are looking for project partners, please post to Piazza to find classmates with similar interests! You should submit your team registration by Mon 11/03, 11:59 pm. Please ensure that the team has been finalized before filling the form, and that the details are correct.

You will submit your interactive prototype as a webpage hosted on GitHub Pages, just like you did for your Project 2 and the labs.

If you don’t fill out the team registration form before the deadline, we will randomly assign you to a group.

Deliverables

Design an interactive graphic aimed at enabling understanding of a compelling question. You must use one of the datasets listed below. 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. You may use only D3.js for this project. Vega-lite/Plotly/Altair/any other high-level plotting library or tool are strictly not allowed for this project. You can use other non-plotting related JavaScript libraries, e.g. Lodash, Svelte, Moment, etc. Your graphic should not require customized server-side support; you should simply load data from a static data file or public web API.

You will use GitHub pages to host your visualization from your project repository. Make sure that you make your repository “Public”. We recommend keeping everything (development files and website) in your master branch: either serve your website from the root folder or the “/docs” folder. Your repo must also contain the (unobfuscated) source code for your visualization.

Your deployed web page should also 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?

You can either include your write-up on the same page as your visualization or link to a separate file.

Rubric

The assignment is out of 14 points possible. Submissions that squarely meet the project requirements (Satisfactory column) will get 11/14 points.

Submission Details

Team Registration

Submit your team registration form by Mon 11/03, 11:59 PM.

Checkpoint Submission

The submission must be made on gradescope by Tue 11/04, 11:59 PM. For this submission, submit an mp4 video no longer than 2 minutes with the following details:

1. Name of your team and team members
2. Dataset chosen. Explain the aspects of the datasets you plan to use.
3. 5-6 exploratory graphs you have come up with (static/dynamic) that lead you to choose the (below) question.
4. Title of your graph / the question you are aiming to answer.
5. Current progress on the final dynamic graph.

Please ensure that the video has an associated audio/voiceover rather than just text. The video recording does not need to include all members of the team.

Only submit one video per team. It is important to add all members of your team to the submission.

Final Submission

You must have a working prototype online by Tue 11/11, 11:59 pm. Your prototype should be accessible on GitHub pages using a publicly viewable URL.

In addition, you must submit the URL on Gradescope. One submission per team is sufficient.

Submissions will be reviewed as part of a subsequent peer review assignment, so try to avoid a late submission; assignments submitted late may not be included as part of the peer review and thus not receive peer feedback.

Data Sources

We’ve provided three datasets for you to use. You must only pick a dataset from the list below.

All datasets contain spatiotemporal environmental data from satellite and climate observation systems, each differing in resolution, time scale, and modality. Time-based analyses are not mandatory, but they allow for exploring temporal patterns and relationships across regions and variables.

Coupled Model Intercomparison Project (CMIP6)

The CMIP6 dataset contains global climate model simulations produced by research centers around the world under the World Climate Research Programme. These simulations include temperature, precipitation, and greenhouse gas projections across multiple climate scenarios.

Address: NOAA Public CMIP6 Dataset on Google Cloud Marketplace

Data can be accessed through Google Cloud’s public repository. You can subset by region, time, or variable using preprocessed .nc (NetCDF) or .csv files. An example Colab notebook demonstrating data access and processing is linked below.

Example notebook: CMIP6 Example (updated Nov 8, 2025)

NOAA Geostationary Operational Environmental Satellite (GOES) Data

The GOES dataset provides real-time satellite imagery from NOAA’s GOES-R series (GOES-16 and GOES-17). These geostationary satellites continuously observe the Western Hemisphere, collecting visible, infrared, and water vapor imagery used for weather, ocean, and climate monitoring.

Address: NOAA GOES Dataset on AWS Open Data Registry

Data is available as cloud-optimized NetCDF and Zarr files that can be accessed via AWS or loaded using Python libraries such as xarray. An example Jupyter notebook demonstrating access and visualization is linked below.

Example notebook 1: GOES Data Access via Zarr/NetCDF (nbviewer)

Example notebook 2: Simple GOES Demo

NASA MODIS (MODerate Resolution Imaging Spectroradiometer) Satellite Imagery

The MODIS dataset provides global daily satellite imagery of Earth’s surface and atmosphere collected by NASA’s Terra and Aqua satellites. It includes measurements of vegetation, ocean color, land temperature, and aerosols spanning more than two decades.

Address: NASA Worldview Application

The data can be explored through NASA’s Worldview web interface or accessed directly using the GIBS REST API. The API allows downloading imagery or data tiles for specific coordinates, layers, and time ranges.

API documentation: GIBS REST API Basics

Advanced usage: GIBS Python Access Guide