Day 92: D3 Arc Diagram of Movie/Musical Adaptions

Today’s Visualization

Title: Broadway Adaptations: A Timeline of Movies to Musicals & Musicals to Movies

Notes: I’ve been working on this visualization for over a month! For my first attempt with D3 and my third time using JavaScript, I’m happy with how it turned out 😊

Tools: Google Sheets, D3

Reflection

This visualization has been in the works for over a month! It started when I heard about a movie adaptation of the musical Mean Girls, which itself was based on a movie. I then thought of Dear Evan Hansen, Cats, and Chicago, which went from stage to screen, as well as Moulin Rouge, Holiday Inn, and Tootsie, which went from screen to stage. If I could think of six adaptations off the top of my head, how many more were there? And when, if ever, was there a “boom” in musical adaptations?

So, I set off to collect data on musicals that have been adapted into movies and movies that have been adapted into musicals. The final dataset has 556 lines and took about 20 hours total to collect–I didn’t realize just how many adaptions there were, especially from the 1940s to 1970s!

As I collected the data, I also thought about the best way to present it. Ultimately, I decided on an arc diagram because the axis acts as a timeline and the height of the arc reflects the length of time between the first and second iterations. In addition, the color-coded nodes show which point is the first iteration and which is the second, which is helpful because the first iteration of one production could overlap with the second iteration of another. Lastly, the density of the lines (as well as the nodes) shows how many shows were adapted around the same time.

I searched through a bunch of tools (Tableau, Flourish, Python) to see if there was a relatively straightforward way to accomplish this, but I didn’t find anything promising, so I turned to D3. Before this viz, I had used JavaScript about 3 times and only written a few lines of code in D3; if you’re thinking I was in completely over my head, you’d be right!! To make things more difficult, I couldn’t find a good example of anything similar to what I was picturing, so I had to figure it out on my own. Luckily there are a lot of resources for Javascript and D3 basics that helped me make it this far 🤣

Ideally, I’d like this visualization to be interactive, but my D3 skills aren’t quite there yet. After a lot of trial and error, I did create a tooltip that shows the name of the movie/musical, but my attempts to add more effects didn’t work out the way I wanted. For my first attempt with D3 and my third time using JavaScript, I’m happy with how it turned out! I also have more ideas for this visualization, so I’m excited to continue learning and improving it in the future :)

Today’s Recommendation

The Emotional Valence of Broadway by Lindsey Poulter

This might be my favorite visualization I’ve shared up to this point!! Lindsay created an incredibly thorough viz showing the emotional valence of Broadway cast recordings. There’s more than just this screenshot shows (including a breakdown of each show’s individual soundtrack), so be sure to check it out here!

Until tomorrow,
Paige