-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
79 lines (67 loc) · 3.14 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>How Bronxites voted</title>
<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=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap" rel="stylesheet">
<style>
.inv {
display: none;
}
img {
width: 100%;
height: auto;
object-fit: contain;
}
body {
font-family: "Source Sans 3", sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
h1 {
text-align: center;
}
img {
max-height: 80svh;
}
</style>
</head>
<body>
<h1>How Bronxites vote for president</h1>
<p><b>Sources:</b> <a href="https://vote.nyc/page/election-results-summary" target="_blank">NYC Board of Elections</a>, <a href="https://www.nyc.gov/site/planning/data-maps/open-data/districts-download-metadata.page" target="_blank">Department of City Planning</a> <br>
<b>Research and graphic:</b> Cherry Salazar <a href="https://github.com/cmgsalazar/us-elex-official-results" target="_blank">(Github)</a></p>
<p>Maps show the percentage-point difference in votes between Democratic and Republican presidential candidates in each election distrct in the Bronx, New York City. The vote differential was calculated by subtracting the share of total votes per district of one candidate from the other.</p>
<select id="target">
<option value="">Select election year...</option>
<option value="content_1">2024: Harris vs Trump</option>
<option value="content_2">2020: Biden vs Trump</option>
<option value="content_3">2016: Clinton vs Trump</option>
</select>
<div id="content_1" class="inv">
<img src="images/bx-2024.png" alt="2024 Election Results">
<p>Note: Data show unofficial election night results, as of Nov. 6, 2024</p>
</div>
<div id="content_2" class="inv">
<img src="images/bx-2020.png" alt="2020 Election Results">
</div>
<div id="content_3" class="inv">
<img src="images/bx-2016.png" alt="2016 Election Results">
</div>
<script>
document.getElementById("target").addEventListener("change", function() {
// hide all content divs
document.getElementById("content_1").classList.add("inv");
document.getElementById("content_2").classList.add("inv");
document.getElementById("content_3").classList.add("inv");
// show selected content div
const selectedValue = this.value;
if (selectedValue) {
document.getElementById(selectedValue).classList.remove("inv");
}
});
</script>
</body>
</html>