Hamilton Motifs – how I (re)created my dataviz

Link to the viz Hamilton: the outstanding usage of motifs in the American musical

Link to the viz Hamilton: the outstanding usage of motifs in the American musical

On the 17th of February, Hamilton will celebrate its 7th anniversary: an optimal time to celebrate my favourite musical and more specifically, my preferred part of it: its text.

I’ve seen it live on stage twice in London and a couple of times on Disney+ and I kid you not: every time, I discover something new about the meaning of the story, and how the setting, lighting, choregraphy and overall set design reinforce it.

Tableau’s dataviz competition Iron Viz’s deadline helped me focus on this project on which I spent approx. 100 hours this time around. To be completely transparent with you reader, this is not my first attempt at covering the topic, and I have covered why I’ve re-vizzed-it in another blogpost.

Let’s focus on my 2022 viz!

# 1 Goal and audience

This viz is not an introduction to Hamilton: it’s a viz for people who’ve seen and enjoyed it and want to dig deeper into its many themes.

As such, it contains a spoiler alert in the intro:

Spoiler alert: important details of the musical are revealed!
Spoiler alert: important details of the musical are revealed!

And is quite wordy and I am not expecting anyone who is not interested in the musical to focus for long and read it, especially the second part!

#2 Getting the data

Genius.com and a bit of webscrapping with webscraper.io, my favourite tool for scraping without learning Beautiful Soup!

#3 Analysis

I am in debt of the following sources:

#4 Creating the dataviz in the tool Tableau / technical challenges

  1. Intro: simple jitter in a chart, see Data School tutorial here

Why this chart? Because the jitter evokes notes on a music sheet and because without the jitter, you have this chunky effect:

You can then toggle with another chart to sort out by occurences by songs, instead of repetition of the motifs. The shape is an arc because it ties nicely with the next visualisation…

  • Part 1: arcs diagrams to create jumps between songs

I’m in love with arc diagrams and they brought me luck last year at Ironviz, when I used them in my 6 reasons to (re)watch Buffy.

When the data is right, I find they have this interesting mix of wow while being intuitively read. In hindsight, I shouldn’t have flatten them as much but hey, I didn’t want to make you scroll forever 😀

I once again used Ken’s Flerlage tutorial and template – creating an Arc Sankey in Tableau and even had an epiphany

#5 Design

It’s the third time I use Figma and there is no turning back! I used to design my backgrounds in PowerPoint and Figma was very intuitive to me, after watching the dataviz tutorials out therefrom Ghafar Shah, and Autumn Battani and Lindsay Betzendahl.

In all transparency, it’s only after I published that I realised I probably got a lot inspired by Dinushki De Livera:

one of my fave viz in the world: Dinushki De Livera’s 2019 IronViz feeder entry
Firebird Suite

Colours

A light yellowish background: a couple of months ago, I completed a LinkedIn Learning course on the Universal Principles of Design by William Lidwell and Jill Butler. And one thing I learnt around (the numerous effects) of the colour yellow: it increases attentional focus and perhaps even cognitive performance. My viz is complex, long to read so I need to help my reader.

Other colours: each character is represented by the colour of their main outfit during the musical. I’m gonna be honest, I thought the Tableau 20 colour palette was doing a decent job (well, Tableau thought about them a lot) so I used them.

Fonts

If you are vizzing in Tableau Public, you have probably already bookmarked Judit Bekker’s guide on how to use fonts in Tableau: following her blog, I used Georgia for the most part. The elegant handwriting font is Tangerine, it’s supposed to have a 16-17th century look (so dated for Hamilton) but it looked so good with the arcs of part 1.

Look at this beautiful font

I used a third, which is usually a no-no in design but there’s a reason! The title Hamilton is in Cinzel, but it’s more like a “logo” than a different font.

#6 What about mobile?

Ok, so I’m very stubborn but I always to give the possibility for my reader to have a sneak peek of the dataviz even if they are on their smartphone.

The mobile version is not optimal but I’ve shorten the text, increased the font size and put a warning in the header to recommend people to bookmark the link for when they are on their mobile 🙂

The mobile version has a little header to encourage people to read this on desktop

#7 Getting feedback

I’m going to sound like a broken record but feedback is key, whether coming from dataviz professionals or your audience.

In the dataviz field,I went to Michelle Frayman and Zaks Geis‘ weekly #vizofficehours when my viz was still in its infancy; and joined twice the additional Iron Viz ad hoc office hours organised by Sarah Bartlett where I got additional feedback from Sarah, Michelle and Judit Bekker.

That’s all folks, any question, do not hesitate!

Anne-Sophie

2 thoughts on “Hamilton Motifs – how I (re)created my dataviz

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s