-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
133 lines (110 loc) · 5.64 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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!doctype html>
<html lang="en">
<head>
<title>On Our Own Terms</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta property="og:title" content="On Our Terms" />
<meta property="og:description" content="Explore the top words used in American left & right online news headlines each week." />
<meta property="og:image" content="https://dataculture.northeastern.edu/our-own-terms/img/screenshot.png" />
<meta property="og:image:alt" content="screenshot showing top terms for a week used in left and right news sources" />
<meta property="og:url" content="https://dataculture.northeastern.edu/our-own-terms" />
<meta property="og:type" content="website" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display&family=Source+Sans+Pro&display=swap" rel="stylesheet">
<!-- Bootstrap CSS v5.2.1 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<!-- INCLUDE JS FILES -->
<!-- use d3.js for easy DOM manipluation -->
<script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>
<script src="apps.js"></script>
<link rel="stylesheet" href="./styles.css">
</head>
<body onload="populateDates()">
<header>
<div class="container">
<div class="row">
<div class="col-lg-8 offset-lg-2">
<h1>On Our Own Terms</h1>
<h2>Explore a partisan breakdown of top words used in American online news headlines each week.</h2>
</div>
</div>
</div>
</header>
<main>
<div class="container">
<div class="row">
<div class="col-lg-6 offset-lg-3">
<p>
The US political and online news systems have been increasingly defined by their polarization. Since 2016,
<a href="https://cyber.harvard.edu/publications/2017/08/mediacloud">media researchers</a> and
<a href="https://www.usatoday.com/in-depth/news/investigations/2022/09/09/congress-twitter-language-used-democrats-republicans/10146954002/">journalists</a>
have found strong evidence of this. This has led to <em>two sets of media that speak about completely differing things</em>.
</p>
<p>
This site lets you explore media polarization via the <em>top words</em> used in article headlines across two sets of
American online news sources. These partisan sets are based on sharing patterns of Twitter users, and thus more of an
assessment of what registered voters from each party are sharing rather than a direct assessment of the editorial
positions of the publication itself. The data is collected from an under-construction new archive of online news being
collaboratively built by the <a href="https://www.mediacloud.org/">Media Cloud</a> organization and the
<a href="https://archive.org/about">Internet Archive's</a> <a href="https://web.archive.org/">Wayback Machine</a>.
</p>
</div>
</div>
<div class="row">
<div class="col-lg-6 offset-lg-3">
<form id="form">
<select name="select-date" id="inputDate" onchange="handleDateSelected(); showResultText(); return false;">
<option value="" selected>Select a date</option>
</select>
</form>
</div>
</div>
<div class="row">
<div class="col-lg-6 offset-lg-3">
<div id="resultWeek"></div>
</div>
</div>
<div class="row">
<div class="col-xl-4" id="left-only-terms" >
</div>
<div class="col-xl-4" id="shared-terms" >
</div>
<div class="col-xl-4" id="right-only-terms" >
</div>
</div>
<div id="viz-wrapper" margin="'0 auto">
</div>
</div>
</div>
<canvas id="font-helper-canvas" style="display:none; padding-left:20px"></canvas>
</main>
<footer>
<div class="row">
<div class="col-lg-6 offset-lg-3">
<p>
<a href="https://github.com/dataculturegroup/us-politics-weekly-terms" target="_blank" rel="noopener noreferrer">View our source code and data on GitHub</a>
<br />
© 2023 Copyright - Claire Pan and Rahul Bhargava.
<br />
A project of the Northeasern University <a href="https://dataculture.northeastern.edu">Data Culture Group</a>.
<br />
<a href="https://dataculture.northeastern.edu"><img width="80" src="img/dcg-logo.png" alt="Data Culture Group logo" /></a>
<a href="https://mediacloud.org"><img width="80" src="img/mediacloud-logo-black.png" alt="Media Cloud logo" /></a>
</p>
</div>
</div>
</footer>
<!-- Bootstrap JavaScript Libraries -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"
integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.min.js"
integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous">
</script>
</div>
</body>
</html>