A look at the flow, duration and cross-talk from the two debates

On September 29, 2020, the US held their first presidential debate between the incumbent President Trump and former Vice President Biden. The debate immediately became known not for what was said or policies debated but for the interruptions and complete lack of decorum. One anchor called it a "shitshow" and to quote an anchor from CNN:

"That was a hot mess inside a dumpster fire inside a train wreck… And it’s primarily because of President Trump, who spent the entire time interrupting not abiding by the rules he agreed to."

The second debate took place on October 22, 2020 and it garnered a lot of interest to see if it would be the same style (disaster) as the first debate.

What do these debates look like when visualized?

For a quick answer to the question above, take a look at the online version here: https://sspboyd.ca/US-Presidential-Debates/.

So what is our "why" here? What is the goal of the visualization? What are we trying to figure out? Can a visualization help understand these debates?

For me, the question I am trying to ask the data is:

Are candidates and moderators able or not able to engage in a traditional flow of moderator questions, candidate answers, rebuttals and exchanges between candidates?

Can we use a visualization to help us see the flow, interruptions and cross-talk? Are all of the interruptions from the first debate evident? Is it possible to tell who is interrupting the most?

The next decision to consider is what type of graphic representation best fits the aim of the visualization? Before we look at that, let’s do a quick detour and examine the data and tools used.

The Data and Tools Used

The data for this project is coming from Rev Transcription Services. I converted their raw CSV data to JSON and along the way added in data to include a timestamp for when each person speaks.

You can find the ways the data has been adjusted in the data_munging.js and date_munging_2nd_Debate.js files. There is an accompanying blog post about using Regex for parsing this data as well.

The visualization is built using (the fantastic) P5.js. I will try not to be overly effusive in my love for P5.js so I’ll just say that it is a great tool for doing quick prototypes of ideas and should be considered for the final product tooling too.

Early Prototypes

So what type of graphic representation will work best given the primary goal of the visualization: "Are candidates and moderators able or not able to engage in a traditional flow of moderator questions, candidate answers and exchanges between candidates?".

To help us decide, we need to think about the kind(s) of information we want to convey and insights we want to find through the visualization. For example, are we looking for a single quantified answer or number? No, not really in this case. Or is it a ranking question? Again, no. This is more a question of the overall quality of exchanges between participants.

We want to be able to look at the visualization and say things like, "all the exchanges are short and coming right after each other" or "you can see how each participant had their uninterrupted time mixed with brief back-and-forths".

So this tells us we’re looking for more of an overarching view as opposed to specific quantities and metrics.

Early prototype screenshots

In the visualization development process, every project goes through a phase of ideation and ‘getting to know the data’. This step will ideally produce a wide variety of different variants on how the data can be visualized.

Sometimes it is even helpful to generate our own test data first so that we can get to know what characteristics of the real data could be of greater use.

Here are some examples below.

Lines, Circles and Squares, Vertical and Horizontal Layouts

In general each of these tests are showing the democratic candidate as blue, republican as red and moderator as grey.

Visualizing Debate

Visualizing Debate

Visualizing Debate

Visualizing Debate

Tests using Squares and Area


These are always some of my favourites. You can’t beat the random strangeness of code not quite working the way you intended. Glitchy Prototype

Glitchy Prototype

Glitchy Prototype

Glitchy Prototype

Glitchy Prototype

Final Design

The layout chosen from all of this experimentation is the circle based horizontal layout. It allows for seeing the entire debate on one screen and the circles’ locations and areas help convey the amount of uninterrupted or interrupted talking time.

I have left in the ability to inspect each circle and see the text spoken, and also the collisions and occlusions that happen. I feel this provides a good ‘retelling’ of the experience of trying to listen to the debate where longer stretches of speech are easier to follow and understand whereas the shorter interruptions get in each others way and nothing is really understood except the cacophony.

Let me know what you think!