Project Four - Storytelling

Deliverable	Due Date
Project 04	November 19, 2025 at 11:59 PM
Project 04 (final)	December 03, 2025 at 09:15 AM

Note

Note that this project already has the revision date set. For the challenges, tutorials an other projects, the revision cycle was there to provide an opportunity to “try again” to meet the requirements. For the final project, you have a great deal of freedom, so I want the opportunity for feedback and iteration to be built into the process. As such, everyone will be expected to hand things in a second version that builds upon feedback provided on the first version.

Objectives

• Think critically about how to present information to persuade or educate
• Practice techniques for building interactive visualizations with D3
• Demonstrate your grasp of visualization design for different data types and tasks
• Apply the skills and concepts you have learned in the class to personally meaningful project

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.

Narrative Visualization

For your fourth project, I would like you to tell me a story with data and visualizations. The story and the data you use to support it are completely up to you. If you are still looking around for data, I suggest you browse through the collection of data sets I’ve assembled for you. I would suggest staying away from the Vega datasets or anything from Kaggle that is labeled for machine learning training – these are unlikely to have good stories for you. I would also love to see you bring in data from other classes or professors you are working with.

The objective is to tell a story, using visualizations to illustrate the key ideas. I expect there to be a central point that you are trying to convey. We have seen a collection of these in the various examples I showed you in class. They can be direct (like Pinellas County is the worst place in Florida to be black and go to public school) or implied (like we lose thousands of years to gun violence). They can make serious points (like testing more is not why Covid case counts are rising), or just be odd observations like songs of the summer sound the same, Americans are addicted to trucks, or our tutorial about how gloomy Radiohead is – though that should be taken as a tech tutorial, not a good storytelling example.

As I said in class, the one thing I don’t want is the trip report of your exploratory analysis. Figure out what the point is and use the tools at your disposal to convey that point. You can get at the point however you like, though I recommend the inverted pyramid approach.

That said, I strongly urge you to start you process with some exploratory analysis. Drop your data into Observable and poke at it. It would be fine (encouraged even) to fall back on Plot for some quick graphs to get a feel for the data. You don’t even need to visualize everything. It is fine to use some of the aggregation tools to just look at the raw data. As a quick example, when I was poking around in the Spotify data you used for project 2, I was curious at the representation of different genres in the data, so I just did a quickdata.filter(d=>d.Genre.includes(“pop”))anddata.filter(d=>d.Genre.includes(“rock”))` and looked at the lengths of the two lists (819 vs 74 for the curious). If I was to try to convey that, I would want to produce a visualization, but while trying to figure out the story myself, I didn’t need the picture.

Your process should be

• Pick a data set (you may have an angle in mind when you do this, or you may not)
• Do some exploratory data analysis to determine what the story is
• Figure out what combination of text and visuals will best tell the story (draw sketches of what you what it to be – I can always help if your skills/knowledge don’t quite extend to your aspirations)
• Refine the visuals in Observable and sketch a rough prototype
• Combine the work together into the final narrative project

Implementation

I’ve started you with some sample code that is basically a striped down version of the scrollytelling tutorial code. You should take this as a suggestion rather than a requirement. If you are not terribly comfortable with HTML/CSS/JavaScript, stick with this framework and focus on the content. If you are more comfortable, however, feel free to mix up the pattern. You could use the basic scroller code I gave you to trigger transitions, with little blocks of text that float over everything like the Florida example. You could have some scrolling and then some more magazine style text and fixed visualizations that move with the text. You could decide to build a stepper and have more of a slideshow format. You could opt for any of the other genres like animation or magazine style. It is up to you. If you end up throwing out all of the starter code, that is okay.

I will say that I would really like to see at least some effort to restyle the page in a way that is appropriate to your story. It would be depressing if we just a string of identical looking project submissions that all look almost exactly like the tutorial.

You are free to use any visualization you like. We have covered most of the basic ones in D3, but if you want to branch out and pull some from the example gallery, be my guest (just provide credit to any examples where you lift a substantial amount of code). ## Requirements

The Visualization

The narrative should have a clear point it is trying to convey.

I would like at minimum four “views”. These could be four completely different visualizations, or they could be builds of the same visualization (e.g., annotations that highlight parts of the visualization that we should pay attention to).

The visualizations should be easy to understand. Use legends and labeling where appropriate. If you want to create more novel visual representations, contemplate using the tacit tutorial approach to help teach the reader how to interpret the graph.

Animation should be present to help readers stay engaged.

Your final project should have at least one bespoke element. This just means something that is not a basic statistical visualization. This could mean using one of the more exotic visualization forms that we have seen (or that you can find in the various galleries for D3). It could mean adding an annotation layer. It could mean that you create custom glyphs or create bar charts from stacks of cow images. It could even mean completely inventing your own visual representation. If it verges into data art and you can fit it into your narrative, that is okay.

Note that this does not mean taking the graph you made for the “bespoke visualization” tutorial and applying your own data. That visualization was bespoke for the particular data we were working with. You want to come up with something novel that makes sense for the data you are looking at.

Group reflection

I would like you to write a reflection piece about the story in the the README.md included in the starter code. I am mostly interested in your process.

How did you arrive at your story? (you can include links to any Observable notebooks you used as scratch pads, but I would still like a little discussion)

Why did you pick the visualizations that you did? (I’m looking for thoughtful choices based on the data and the point being made)

What are you most proud of?

What aspects are disappointing? (did the story you expect not emerge from the data?, are the visualizations not working? were there things you wanted to do but didn’t have the skill for?)

Personal reflection

Separately, I would like everyone to write a brief personal reflection. 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 did you personally learn from this process?
• What are you most proud of?
• What did not live up to your expectations?
• 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 4 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.