-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
116 lines (93 loc) · 7.17 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Purple States of America</title>
<meta name="description" content="Traditional U.S. electoral maps not only illustrate polarization, they can exacerbate it. No state is strictly red or blue, they are all shades of purple.">
<meta name="keywords" content="electoral map, electoral college, presidential election, United States of America, politics, mapping, data visualization">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="schema.dcterms" href="https://purl.org/dc/terms/">
<meta name="dcterms.title" content="Purple States of America">
<meta name="dcterms.creator" content="Greg Albers">
<meta name="dcterms.date" content="2020-11-06">
<meta name="dcterms.description" content="Traditional U.S. electoral maps not only illustrate polarization, they can exacerbate it. No state is strictly red or blue, they are all shades of purple.">
<meta name="dcterms.language" content="en">
<meta name="dcterms.rights" content="© 2020 Greg Albers">
<meta name="dcterms.subject" content="electoral map">
<meta name="dcterms.subject" content="Electoral College">
<meta name="dcterms.subject" content="presidential election">
<meta name="dcterms.subject" content="United States of America">
<meta name="dcterms.subject" content="politics">
<meta name="dcterms.subject" content="mapping">
<meta name="dcterms.subject" content="data visualization">
<meta property="og:title" content="Purple States of America">
<meta property="og:type" content="website">
<meta property="og:url" content="https://purplestatesofamerica.org/">
<meta property="og:image" content="https://purplestatesofamerica.org/img/social.jpg">
<meta property="og:description" content="Traditional U.S. electoral maps not only illustrate polarization, they can exacerbate it. No state is strictly red or blue, they are all shades of purple.">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Purple States of America">
<meta name="twitter:site" content="https://purplestatesofamerica.org/">
<meta name="twitter:image" content="https://purplestatesofamerica.org/img/social.jpg">
<meta name="twitter:description" content="Traditional U.S. electoral maps not only illustrate polarization, they can exacerbate it. No state is strictly red or blue, they are all shades of purple.">
<script type="application/ld+json">{"@context":"http://schema.org/","type":"Website","name":"Purple States of America","url":"https://purplestatesofamerica.org/","author":[{"type":"Person","name":"Greg Albers","url":"https://geealbers.net"}],"datePublished":"2020-11-06","keywords":"electoral map, electoral college, presidential election, United States of America, politics, mapping, data visualization","license":"http://creativecommons.org/licenses/by-nc/4.0/","image":"https://purplestatesofamerica.org/img/social.jpg","description":"Traditional U.S. electoral maps not only illustrate polarization, they can exacerbate it. No state is strictly red or blue, they are all shades of purple."}</script>
<link rel="canonical" href="https://purplestatesofamerica.org/">
<link rel="license" href="https://creativecommons.org/licenses/by-nc/4.0/">
<link rel="version-history" href="https://github.com/geealbers/purple-states/">
<link rel="icon" href="favicon.ico">
<link rel="apple-touch-icon" href="icon.png">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="map-info" role="header">
<div class="map-info--underlay"></div>
<h1 class="map-title">Purple States of America</h1>
<ul class="map-key">
<li><div id="dem-75" class="key-item"></div> 75% Democrat</li>
<li><div id="dem-65" class="key-item"></div> 65% Democrat</li>
<li><div id="split" class="key-item"></div> 50% Split</li>
<li><div id="rep-65" class="key-item"></div> 65% Republican</li>
<li><div id="rep-75" class="key-item"></div> 75% Republican</li>
</ul>
<p class="map-description">In the United States, no state ever votes 100% Democratic (blue) or 100% Republican (red), and yet this is how we are accustomed to seeing our electoral maps illustrated, despite a 2009 study showing that this can exacerbate polarization. <a href="https://github.com/geealbers/purple-states#purple-states-of-america-" target="_blank"><em>Read more ...</em></a></p>
</div>
<div class="select-group">
<form id="map-select">
<input type="radio" name="map" id="geographic" onchange="buildMap()" checked> Geographic</input>
<input type="radio" name="map" id="population" onchange="buildMap()"> Population (<button type="button" onclick="toggleLabels(this)">labels</button>)</input>
<!-- <input type="radio" name="map" id="electoral" onchange="buildMap()"> Electoral (<button type="button" onclick="toggleLabels(this)">labels</button>)</input> -->
</form>
<form id="color-select">
<input type="radio" name="color" id="purple" onchange="changeColor()" checked> Purple</input>
<input type="radio" name="color" id="blue-yellow" onchange="changeColor()"> Blue-Yellow</input>
<input type="radio" name="color" id="grayscale" onchange="changeColor()"> Grayscale</input>
</form>
</div>
<a href="https://github.com/geealbers/purple-states#purple-states-of-america-" target="_blank">
<svg id="info" viewBox="0 0 24 24"> <path class="st0" d="M10.87,13.31c0-0.55,0.37-1.16,1.08-1.93l0.84-0.92c0.72-0.79,0.99-1.38,0.99-2.15c0-1.23-0.86-2.02-2.15-2.02 c-1.12,0-1.94,0.66-2.03,1.78h0.48c0.27,1.1-0.26,1.83-1.21,1.83c-0.71,0-1.21-0.62-1.21-1.41c0-1.54,1.61-3.01,4.31-3.01 c2.9,0,4.36,1.49,4.36,3.17c0,0.99-0.53,2.09-2.05,3.01l-1.41,0.84c-0.6,0.37-0.92,0.77-0.92,1.15c0,0.28,0.15,0.62,0.53,0.81 C11.42,14.72,10.87,14.12,10.87,13.31z M13.18,15.79v2.71h-2.75v-2.71H13.18z"/> <path class="st0" d="M12,2c5.51,0,10,4.49,10,10s-4.49,10-10,10S2,17.51,2,12S6.49,2,12,2 M12,0C5.37,0,0,5.37,0,12s5.37,12,12,12 s12-5.37,12-12S18.63,0,12,0L12,0z"/> </svg>
</a>
<ul role="navigation">
<li><button type="button" onclick="buildMap(1980); tagYear(this)">1980</button></li>
<li><button type="button" onclick="buildMap(1984); tagYear(this)">1984</button></li>
<li><button type="button" onclick="buildMap(1988); tagYear(this)">1988</button></li>
<li><button type="button" onclick="buildMap(1992); tagYear(this)">1992</button></li>
<li><button type="button" onclick="buildMap(1996); tagYear(this)">1996</button></li>
<li><button type="button" onclick="buildMap(2000); tagYear(this)">2000</button></li>
<li><button type="button" onclick="buildMap(2004); tagYear(this)">2004</button></li>
<li><button type="button" onclick="buildMap(2008); tagYear(this)">2008</button></li>
<li><button type="button" onclick="buildMap(2012); tagYear(this)">2012</button></li>
<li><button type="button" onclick="buildMap(2016); tagYear(this)">2016</button></li>
<li><button type="button" onclick="buildMap(2020); tagYear(this)">2020</button></li>
<li><button type="button" onclick="buildMap(2024); tagYear(this)" id="current-year">2024</button></li>
</ul>
<svg id="d3-map" class="map" viewBox="0 0 624 377">
<g id="body"></g>
<g id="labels" class="map-labels hidden"></g>
</svg>
<script src="js/d3.min.js"></script>
<script src="js/main.js"></script>
<script>
buildMap(2020);
</script>
</body>
</html>