-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
104 lines (93 loc) · 5.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cormorant&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap" rel="stylesheet">
<!-- <script src="p5.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js"
integrity="sha512-WIklPM6qPCIp6d3fSSr90j+1unQHUOoWDS4sdTiR8gxUTnyZ8S2Mr8e10sKKJ/bhJgpAa/qG068RDkg6fIlNFA=="
crossorigin="anonymous"></script>
<!-- <script src="p5.sound.min.js"></script> -->
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
<title>Visualizing the 2020 US Presidential Debates - Stephen Boyd</title>
</head>
<body>
<div id="header">
<p><a href="/index.html">sspboyd.ca</a> // <a href="/blog/">blog</a> // <a
href="https://github.com/sspboyd/Presidential_Debates">github</a> // <a
href="https://www.instagram.com/sspboyd/">instagram</a> // <a href="https://twitter.com/sspboyd">twitter</a> //
<a href="/blog/hello/">contact</a></p>
</div>
<img src="assets/images/debates_banner2.jpg" class="full-screen-width" />
<div id="description">
<div id="title">
<h1>Visualizing the 2020 US Presidential Debates</h1>
<h2>A look at the flow, duration and cross-talk from the two debates.</h2>
<p>By <a href="https://sspboyd.ca/">Stephen Boyd</a>. <br />Updated December 8, 2020.</p>
</div>
<p>On September 29, 2020, the US held their first presidential debate between President Trump and former Vice
President Biden. The debate immediately became known not for what was said or policies debated but for the
interuptions and complete lack of decorum. One anchor called it a "shitshow" and to quote an anchor
from
CNN:
</p>
<blockquote>
<p>"That was a hot mess inside a dumpster fire inside a train wreck. That was the worst debate I have ever
seen. It wasn't even a debate. It was a disgrace. And it's primarily because of President Trump, who spent the
entire time interrupting not abiding by the rules he agreed to."</p>
</blockquote>
<p>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.</p>
<p><b>So what does this debate look like when visualized? Are all of these interruptions visible? Is it possible to tell who is interrupting the most?</b></p>
<h2>The Data and Tools used.</h2>
<p>To test out this idea, I am using transcripts from <a
href="https://www.rev.com/blog/transcripts/donald-trump-joe-biden-1st-presidential-debate-transcript-2020">Rev
Transcription Services</a>. I have processed the data to include the times when each person speaks. You can
find the ways I adjusted the data in the <a
href="https://github.com/sspboyd/Presidential_Debates/blob/master/date_munging.js">data_munging.js file</a>.</p>
<p>There is also <a href="https://sspboyd.ca/blog/2020/11/10/demystifying-regex-a-walk-through-on-how-to-prep-data-for-a-visualization/">a related blog post</a> about how Regex was used to pre-process the data. <br /><a href="https://sspboyd.ca/blog/2020/11/10/demystifying-regex-a-walk-through-on-how-to-prep-data-for-a-visualization/">Demystifying Regex: A Walk-through On How To Prep Data For A Visualization</a>.</p>
<p>The visualization is built using (the fantastic) <a href="https://p5js.org/">P5.js</a>. And as of Oct 20, 2020, the visualization is still being adjusted and tweaked.</p>
<p>Further questions to be asked are how does this debate compare to previous debates and possibly future debates
between Trump and Biden?</p>
<h2>How to read the graphs...</h2>
<ol>
<li>Each bubble represents either Joe Biden, Donald Trump or the moderator talking. </li>
<li>The size of each bubble is determined by how many words were spoken. Lots of words make for bigger circles.</li>
<li>Use your mouse or finger over the bubbles to see what was being said.</li>
<li>Press "S" to save a screenshot of the visualizations.</li>
</ol>
</div>
<hr />
<div id="debate_viz" class="viz_title">
<h2>First Debate</h2>
<p>Date: September 29, 2020
<br />
Moderator: Chris Wallace.</p>
</div>
<hr />
<div id="debate2_viz" class="viz_title">
<h2>Second Debate</h2>
<p>Date: October 22, 2020
<br />
Moderator: Kristen Welker.</p>
</div>
<script src="sketch.js"></script>
<!-- <div id="findings">
<h2>Findings</h2>
<p>It is clearly visible from the two charts that the second debate was far more restrained and typical of previous Presidential debates than the first.</p>
<p></p>
</div> -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-22771087-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'UA-22771087-1');
</script>
</body>
</html>