Project Three - Data Dashboard

Published

October 19, 2025

Due
November 03, 2025 at 11:59 PM

Objectives

  • Learn about dashboards
  • Practice making D3 visualizations
  • Get experience composing a multi-view, interactive visualization

Interactive Data Dashboard

For this project I would like you to build an interactive data dashboard. I have provided some Olympic results data covering 120 years of the games from 1896 - 2016 (data from Kaggle). You are not expected to come up with a visualization that covers every piece of data in this data set. You are, in fact, encouraged to focus on some sub topic within the data (e.g., medal tracking, performance of certain teams, top athletes, etc…)

I will be looking for at least four distinct visualizations, and at least two interactive elements, at least one of which should using one visualization to change another (highlight, filter, etc…).

This is not exploratory data analysis – this is presentation, so you should know what you are showing ahead of time. Don’t just start throwing things together and call it a dashboard. Spend some time doing some exploration (in a different notebook) and experimenting with different visualizations. I suggest building each element individually before trying to combine them. I would also suggest sketching out some possible designs (paper, white board, tablet, whatever…) so you have a basic design laid out in your mind before you get to implementation.

Teamwork

This will be a team project. You should find a partner to work with you. If you don’t have someone to work with, post a message on CampusWire under General. You are encouraged to find a new partner to get experience working with a variety of people.

You should use a pair programming approach to this project. In other words, you should never be working on the assignment alone. In pair programming, there is only one keyboard. The person in front of the keyboard is the driver. The second person is responsible for maintaining the bigger picture as well as catching typos, etc. There should be constant communication between the two. This should be a noisy process. If it is quiet, then it means the driver has taken over and not letting the other person participate. Every fifteen to twenty minutes, you should switch roles.

Deliverables

Getting started

As usual, I have prepared a Framework template for you to start from.

Important

Only one of the members of the group should accept the assignment. You should share the repository.

  1. Create the git repository for your project by accepting the assignment from GitHub Classroom. You will have the option to create a team or join an existing one. Make sure to coordinate with your partner so you know who is going first (and thus creating the team).

  2. Clone the repository to you computer with git clone (get the name of the repository from GitHub).

  3. Open the directory with VSCode. You should see all of the files down the panel on the left in the Explorer.

  4. In the VSCode terminal, type pnpm install. This will install all of the necessary packages.

  5. Open package.json and fill in your names and email addresses under “contributors”.

  6. In the terminal, type pnpm dev to start the development server.

Project structure

Make your dashboard in index.md. Use the format I introduced in the interaction tutorial and lay the dashboard out in HTML at the top of the page. Create your visualizations in visualization.js.

Underneath the dashboard, write a short description about what the dashboard is about and how to interact with it.

Reflections

In reflection.md, I would like you to write a short reflection about the process. What were the thoughts that led to the final dashboard? Were there other designs? How close is this to what you imagined (you can include images of design sketches or visualizations that didn’t work out or that didn’t fit into the dashboard)? What are you most proud of? What didn’t live up to your expectations, or didn’t work out the way you had hoped?

I would also like a reflection from each of you, so I am asking you not to submit these with the repository.

Instead, create a blank markdown file and answer these questions individually:

  • Is your project complete?
  • If not, what remains to make it complete?
  • What was most challenging about this project?
  • What was the most interesting part of this process?
  • What questions do you have after doing this project?
  • What resources did you use (if any) to help you complete this project?
  • How was the experience of working with your partner?

Submit this file in the Project 3 reflections assignment.

Submitting your work

  • Commit your work to the repository (see the git basics guide if you are unfamiliar with this process)
  • push the work to github
  • submit the repository on Gradescope (see the Gradescope submission guide). _only one member of the group needs to submit. Just make sure both names are listed.