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

When I was new to #dataviz, seeing only finalised projects by seasoned practitioners used to puzzle me: I always have thousands of questions on the process: how did you get there?
That’s why I document most of my projects, explaining the reasoning, design choices, technical hurdles etc.

On the 17^th of February, Hamilton will celebrate its 7^th 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:

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:

• An Interactive Visualization of Every Line in Hamilton by Shirley Wu – for the overall visualisation (especially representing group of lines and not individual ones) and for emphasing on the character of Eliza
• Genius.com page Hamilton Motifs page made me discover a couple of themes I didn’t see at first
• Hamilton and Motifs: Creating Emotional Paradoxes by J. Rose-Lyon‘s (YouTube) for his intro to motifs
• How Hamilton Works by Howard Ho (YouTube) for showing me that nerdy topics can interest people, when the story and explanations are compelling

#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

• Part 2 and part 3: I don’t know how you call that chart, but I had 2 technical issues and went to Tableau’s forums for help to
  • Force the axis (with discrete) to be wide enough for annotations – Jim Dehner jumped to help me
  • I used 2 navigations systems,  one from the Presidential Elections Timeline by Ken Flerlage and one from Tamas Varga’s SOGI-LI Index. Both helped me troubleshoot the compatibility issues I had with using both.

#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:

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-17^th century look (so dated for Hamilton) but it looked so good with the arcs of part 1.

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 🙂

#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