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

Getting started

This project is another group project for teams of 2-3.

As with the tutorial, start the project by accepting the assignment on GitHub Classroom. As this is a group assignment, you will need to pick your team when you accept the assignment, so coordinate who is going to create the team.

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.

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 invert 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 Vega-Lite 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 assignment 2, I was curious at the representation of different genres in the data, so I just did a quick data.filter(d=>d.Genre.includes("pop")) and data.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 tutorial code. You should take this as a suggestion rather than a requirement. If you are not terribly comfortable with HTML/CSS/JavaScrip, 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. It is up to you. If you end up throwing out all of the starter code, that is okay.

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 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.

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?)?

Submission

To submit, make sure that your project is pushed to GitHub. Then submit the URL to the GitHub repository to Canvas (I can see your repositories, I just want the indicator that you have declared it ready for me to look at).