Setup, Delivery & Punchline!
Can you visualize stand-up comedy?
Over the years, visualizing performance art has been attempted in one form or the other. Whether it’s showing the character arcs in a play, or visualizing how characters speak in Shakespeare, performance art has some form of inherent structure, and that structure can be visualized.
One such performance art that hasn’t been looked at as much is stand-up comedy. Even though stand-up comedy can have an inherent structure, not many efforts have been directed towards this. Perhaps it comes across as purely a novelty, but there might be more to it.
Comedy in general is known to have structure. A joke can be broken up into the setup and a punchline, and comedy shows can span across seasons and years.
A similar range of structure can be found in a stand-up comedy routine. A one-liner comedian like Jimmy Carr has the least amount of structure in his comedy and George Carlin, with his immense exposés about modern culture, has more structure than you’d imagine.
How can it be visualized?
So what do we do with this structure? Essentially it’s hierarchical data. And hierarchical data has been visualized before in more than one way. But the hierarchical data in this case is slightly different because it also has a temporal element to it. The best way to visualize such data is with the use of arc diagrams.
The other major aspect of stand-up comedy is the laughter. Comedians spend a lot of time tuning their jokes based on the amount of laughter they get. They do this by performing minor or major variations of their set to different audiences until they feel like they have the right one. Laughter in this scenario is essentially discrete quantitative data with a temporal aspect. This can be visualized like a bar-chart with the horizontal axis as a timescale.
Well, that all makes sense, but what does it look like?
This visualization can be potentially be used to look at the amount of laughter at any point during a routine and trace the arcs to decide how the structure of the set affected the laughter for that joke.
So, insights?
Let’s take a look at the most laughter in the second half of Ali Wong’s Baby Cobra. This occurs at 56:02. The joke is pretty simple. On it’s own, it’s not that funny. But it did get the highest amount of laughter in the second half of the set. Why is that?
If you trace the arcs from that point, the joke exists because of themes set up much before in the set. Ali Wong talks about meeting her husband, getting older, and feminism at different points. But it all culminates at this point where she talks about trying to get pregnant with her husband and how she’s trying harder — “I don’t wanna work anymore”. The form made the joke funnier. The structure of the entire set has already built Ali Wong’s worldview in the viewer’s head.
How was it built?
The visualization was built on an Observable notebook using D3.js. The data was obtained from pudding.cool’s Github page for Ali Wong’s Baby Cobra Netflix Special.
The data is in two files. One file contains the captions for the special with the length of laughter at the end of each line. This creates the inverted bar chart with the length of laughter. The other file contains the topics in the special and the start time and end time for these topics. This forms the arcs in the visualization.
Working with D3
For this project, I was working with D3 for the first time. D3 is a JavaScript library that manipulates DOM elements based on data. So essentially you select DOM elements and manipulate their attributes based on the data you have at hand. If you’re someone who works with Objected Oriented Programming, D3 might look alien to you in the beginning. And although it has its quirks, once you start to get the hang of it, it starts to make sense and things fall into place. The biggest requirement to work with D3 is patience.
Things to keep in mind
While working with D3, one of the major things to keep in mind is the scale. To help with this, D3 has multiple functions like scaleLinear(), scaleBand() and scaleTime(). Deciding which one to use requires one to dive into the documentation a little bit and it would have saved me time if I did it sooner than later.
The other thing to consider is the fact that there can be more than one way to do something. When I started with the arc diagrams, I used the in-built arc function. The arc function creates an arc with 3 parameters — the inner radius, outer radius, start angle and the end angle. Although this seemed to be quite straightforward, it couldn’t work with the data I had on hand. Moving to a line instead of sticking with the arc and tinkering with it would have saved me a lot of time.
How can it be better?
Any arc diagram should essentially be a node-link diagram. Adding interactivity to the visualization requires nodes so that the attached DOM elements can be manipulated on mouseover. In my case, I realized this only at the end when I thought about adding interactivity after creating a static visualization. If I spent some time in the beginning manipulating the data to generate nodes and links, adding interactions would have been easy. Right now, the bar chart and the arc diagram are completely separate and this makes it impossible to add any interactivity.
The visualization can also be improved by adding more detail. This provides a good overview about the whole set, but using the captions and the time data, it’s possible to add much more detail that can be shown when the user chooses to interact with it. For instance, each individual joke can be textually analysed to detect the set-up and punchline and it can be displayed on hover.
Overall, building a rich interactive visualization might prove to be a useful exercise to help comedians with their set, given that the data collection method is streamlined somehow.
Thanks to pudding.cool for the inspiration and the data used for this visualization.
