Skip to content

Interactive Visualization Project

The remainder of this course you will be focusing on building an interactive visualization project.

The final deliverable will be a hosted webpage at a public URL that gives readers/viewers the opportunity to better understand the topic of your choice by allowing them to interact with the data in some meaningful way.

You will have a lot of flexibility in what you build, static visualizations shared in class and on Ed may provide some idea of the enormous range of visualization options available to you.

You may consider:

I encourage you to be creative, and think about work that has captured your imagination.

If you are unsure if replicating something would be achievable in the allotted time, please reach out ASAP to discuss. Public Ed questions would be appreciated as they may help inspire others, but private is fine as well.

Final Deliverable

For this project it'll be helpful to lay out the final criteria first.

Submission specifics will be listed under Milestone 4 below.

Your interactive narrative will be a website. Hosting details/etc. will be shared later, but it should consist of:

  • One or more HTML pages containing interactive visualizations (see options below)
  • Standalone data files in CSV, JSON, or similar format.
  • CSS style written by you, in a standalone CSS file.
  • JavaScript written by you, in one or more standalone JS files.
  • Python or JavaScript code used to clean/prepare your data.

It may also include:

  • Additional CSS/JS files from frameworks or libraries.

In terms of the interactive portion itself, I am defining 3 options to act as guidelines:

Option A: Core Interactive

An interactive focused on a single major visualization with significant interactivity.

This option should use D3.js or P5.js which will be introduced in class. The visualization should be the centerpiece of your narrative, taking up the majority of the page with explanatory text and details in the periphery.

The interactivity must be non-trivial, beyond hover effects/tooltips or zooming/panning a chart. Examples might include:

  • Run a simulation in JavaScript, so a user can visualize different outcomes based on different starting conditions/assumptions.
  • An interactive map or chart where clicking on items changes content elsewhere on the page, such as loading additional graphics providing deeper insight into the selected area. (Again: hover/tooltip alone will not suffice.)
  • Exploration of a large data set by allowing users to drill down into specifics which will update the central visualization. This should extend beyond a single drop down, allowing users to evaluate different scenarios or compare data from different regions/time spans. It is also possible to approach something similar via Option B below.

Option B: Dynamic Ensemble

Instead of a single centerpiece, you may focus on three or more distinct visualizations with more limited interactivity.

You may use Altair if you wish to accomplish this, exporting to Vega/HTML and embedding those results in your page.

At least two of your visualizations must use features beyond tooltip/etc. There should still be choices a user can make (dropdowns, sliders, etc.) to interact with your product.

If you choose this, your page must still have hand-written HTML and CSS to provide a cohesive theme.

Option C: Custom Option

If there are tools you would like to use, or you have something in mind that does not fit the above I will gladly entertain other options that exhibit a comparable level of interactivity.

We will need to discuss to come to an understanding of a minimum level of interactivity on par with the above options. If you are planning to go this route, I would recommend providing as much detail as possible in your proposal so we can start the discussion early.

Milestone 1: Proposal

For your proposal you will:

  • select a policy area of interest to you;
  • explore what data is available; and
  • offer 2-3 examples of the kind of visualization that you are considering creating. This does not need to be in the same topic area, and should just be used to loosely define the kind of interactive you'd like to create.

For example, perhaps you want to simulate outcomes of environmental policy changes to show what would happen if some countries met their goals and others did not. You might cite https://www.270towin.com/2024-simulation/ as an example since allows users to run simulations on a map. It is fine that the topic area & map-based presentation are different, if your focus is on the simulation idea itself.

You should take into consideration the same things you did for the static project with the following differences:

  • If you are focused on 1-2 larger interactive visualizations, you will not need as wide a variety of data. If you want to have a more dashboard/interactive chart approach you may still need a wide variety.
  • The kind of data you select will likely guide what libraries will work for you. If you are using maps you will need to focus primarily on d3's mapping libraries or other options offered in class.
  • If you want to stick to Python, you will be using Altair's interactive charts, it may be useful to look at Altair's interactive documentation (https://altair-viz.github.io/user_guide/interactions.html) and examples to think about what you can achieve.

Submission

You will be asked to submit a link to your repository (it can be the same one as before or a new one) with an interactive_proposal.md file containing the following:

Note

If you are creating a new private repository, be sure to add James, Krisha, and Sam to it as you did before.

  • Your name.
  • A description of the topic and data you plan to use. For each data source include:
    • a URL
    • short description
  • 2-3 examples of the kinds of interactive visualization you are considering. Refer to the notes from Week 4 for examples, and/or look for unique interactives that you can imagine telling a story about your chosen data. For each of your examples include:
    • a URL
    • short description of what how you're currently thinking about approaching your data with ideas from the visualization you've linked
    • make it clear if you think that your approach fits best with Options A/B/C from above.
  • A questions section with a numbered list of questions for us to answer.

Additionally, you should include at least one image file with a mock-up of what you're considering for us to provide feedback on. If multiple images help make the intent clear, please include more.

This can be a quick pen & paper sketch of your current idea. Or you can do this in Inkscape, or any other tool. Nothing needs to be built at this point, but a rough sense of what will be shown and how the user will interact with it should be clear from your illustration(s).

Grading Specification

To earn an S on this assignment it must be complete. If any portion is missing (e.g. no sketch/mock-up) you will receive an N.

You are not being graded on having the right answers to any of these questions, this is to get you thinking about it early— and for us to get you feedback.

Milestone 2: Draft

You will have about two weeks to create a draft/prototype.

At this point you should have the basic framework of your website created with interactivity in place. This will, as before, serve as the basis of critique, so you can explore the ideas you have and how they are resonating with your peers.

Specifications

To receive an S you must:

  • Have a webpage (in a single HTML file) that can be opened in the browser to allow someone to interact with your data & experience your prototype. You must include:

    • A working prototype of your planned interactions. A user must be able to click/type/etc. and see the result of their interaction.
    • Be using data (real or mocked) loaded from CSV/JSON/API/etc.
    • A standalone CSS file with your custom styles. You may use a pre-built theme/etc. but you should be providing some customization at this point.

  • Answer the following questions in interactive_draft.md:

# Project Name

Your Name

## What is your current goal? Has it changed since the proposal?

## Are there data challenges you are facing? Are you currently depending on mock data?

## Walk us through an interaction, either in words or you can record a quick 2-3 minute video.

## Include a _numbered_ list of questions for us to respond to.

1. 

2. 

3. 

...

Non-Factors

A few things that you will not be graded on at this point:

  • Quality of design choices, beyond fulfillment of requirements stated above. (You must have some custom CSS in place, but we won't penalize based on color/font/etc.)
  • Cohesiveness, which is only a factor in the final submission.
  • Bugs
  • Code quality, comments.

Milestone 3: Critique

You will again meet with and provide feedback among a group of peers. Your group assignment will remain the same from the prior project, and the TAs will switch groups. Be sure to include your TA on planning emails!

I will share an Ed post with specific questions closer to the due date.

As before, good-faith participation in this process will earn you an S.

Milestone 4: Final Submission

Your final submission will be:

  • a URL to a hosted web page (instructions on how to host on GitHub and Netlify will be shared on Ed)
  • a repository of your work with data cleaning/preparation code cleanly separated from the final deliverable

Grading Specification: Design

The design of your final webpage will be taken into account. To receive an S we will look at:

  • Well-reasoned choices on the visualization itself, based on criteria discussed throughout the quarter. (Use of chart types, visual encodings, color, etc.)
  • No significant presentation errors such as misleading axes or improper encodings.
  • Demonstration of critique feedback incorporated into final product.

Grading Specification: Interactivity

The focus here will be on the manner in which your interactive is implemented and enhances your narrative.

  • Minimum interactive criteria met (See options A-C above.)
  • Writing and visuals are clear and relevant to stated goal.
  • Visualization enhances understanding of/engagement with chosen topic. (In other words, it isn't just visual noise/flashy, but utilizes what we've discussed about interactivity to go beyond what would have been possible with pure static visualization.)
  • Cohesive visual design between graphic and rest of page.

Grading Specification: Code Quality / Documentation

Finally, for your code quality and documentation. An S requires:

  • Your repository should make use of at directories to keep it managable, I'd suggest:
  • data/ - All data (and optionally, data-fetching code).
    • If your data will exceed 100MB, please reach out to discuss options on how to share your data with us.
  • scratch/ - Anything in this directory won't be graded, useful for experimentation.
  • src/ - Code that you would like us to include in final evaluation, should at minimum generate all graphs from included data.
  • static_draft/ - Files specific to the second milestone.
  • static_file/ - Files specific to the final milestone.
  • Code may be:
    • One or more .py files with clear instructions on how to generate all graphs.
    • An ipython or marimo notebook.
  • In either case, code (non-scratch) must be clean & well-commented.
  • A README.md file that contains:
    • your project name
    • your name
    • a description of your project
    • an embedded screenshot of your final project
    • a ## Data Sources section that cites all sources and explains data usage/licenses

Example repository structure

├── LICENSE
├── README.md
├── data
│  ├── crown_exxon_ash.json
│  ├── download_census.py
│  └── fips.csv
├── scratch
│  ├── experiments.js
│  └── exploration.ipynb
├── www
   ├── index.html
   ├── theme.css
   ├── main.js
   ├── d3.js
   └── bulma.css