-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
99 lines (99 loc) · 4.49 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
<!DOCTYPE html>
<html>
<head>
<title>DCision14</title>
<link rel="stylesheet" href="leaflet.css"/>
<style type="text/css">
body { font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; }
h1 { margin-top: 3px; margin-bottom: 2px; font-size: 32px; }
.votes td { line-height: 1; }
.right { text-align: right; }
.winner { font-weight: bold; text-transform: uppercase; }
.leaflet-popup-content h4 { margin-bottom: 2px; }
#map { height: 400px; padding: 0; margin-right: 6px; border-right: 1px solid black; }
#sidebar { float: right; width: 25%; }
#controls { background-color: #ddd; padding: 10px; }
.color-block { height: 12px; width: 12px; display: inline-block; opacity: 0.6; }
.gray { opacity: 1; border: 1px solid black; }
#credits > p { margin-top: 2px; }
#explanations { padding: 10px; }
.subtitle { font-size: 24px; font-weight: bold; background-color: white; padding: 15px; opacity: 0.8; }
</style>
<script src="jquery-1.11.0.min.js"></script>
<script src="leaflet.js"></script>
<script src="underscore-min.js"></script>
<script src="underscore.string.min.js"></script>
<script src="index.js"></script>
</head>
<body>
<h1>Results of 4 Nov 2014 DC General Election</h1>
<div id="sidebar">
<div id="controls">
<p><select id="contest"></select></p>
<p><select id="candidate"></select></p>
<div id="layer-radio"></div>
</div>
<div id="explanations">
<div id="explanation-1">
<div id="legend-1"></div>
<p>Each precinct is colored to indicate which candidate received the most
votes there. A more opaque (darker) version of the color is used when the
candidate managed to win a majority of the votes in the precinct.</p>
<p>The map can be misleading in the same way typical U.S. presidential
election maps are, since the area of a precinct is not proportional to the
number of voters there. A candidate who wins in densely populated,
high-turnout areas will often look worse on the map than a candidate who
wins in less dense or low-turnout areas.</p>
<p>Click on a precinct to see the vote breakdown.</p>
</div>
<div id="explanation-2" style="display: none;">
<div id="legend-2"></div>
<p>Each precinct is shaded to indicate the percentage of the vote that
went for the candidate, with darker grays indicating higher percentages.</p>
<p>Click on a precinct to see the vote breakdown.</p>
</div>
<div id="explanation-3" style="display: none;">
<div id="legend-3"></div>
<p>Each precinct is shaded to indicate the number of votes the candidate
received there, with darker grays indicating higher numbers.</p>
<p>Click on a precinct to see the vote breakdown.</p>
</div>
<div id="explanation-4" style="display: none;">
<div id="legend-4"></div>
<p>Each precinct is shaded to indicate the total number of votes
cast there, with darker grays indicating higher numbers.</p>
<p>Click on a precinct to see the vote breakdown.</p>
</div>
<div id="explanation-5" style="display: none;">
<p>The 20 precincts that gave the candidate the most votes are colored.</p>
<p>Click on a precinct to see the vote breakdown.</p>
</div>
<div id="explanation-6" style="display: none;">
<div id="legend-6"></div>
<p>This map is like the one of the precinct winners, except that precincts
are colored to indicate the candidate who won second place in each. It's
probably most interesting for the at-large race, which has two winners.</p>
<p>Click on a precinct to see the vote breakdown.</p>
</div>
<div id="explanation-7" style="display: none;">
<div id="legend-7"></div>
<p>Each precinct is shaded to indicate what percentage of the registered voters voted,
with darker grays indicating higher turnout.</p>
<p>Click on a precinct to see the vote breakdown.</p>
</div>
<div id="explanation-8" style="display: none;">
<div id="legend-8"></div>
<p>Each precinct is shaded to indicate the average number of votes cast in this contest
on each ballot, with darker grays indicating higher numbers. For the at-large council
race a voter has two votes.</p>
<p>Click on a precinct to see the vote breakdown.</p>
</div>
</div>
</div>
<div id="map"></div>
<div id="credits">
<p>Page by <a href="https://twitter.com/kcivey">Keith C. Ivey</a> (<a href="https://github.com/kcivey/dcision14">source</a>),
Nov 2014. Send comments to keith at iveys dot org.</p>
</div>
</body>
</html>