-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
154 lines (132 loc) · 5.25 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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<style>
body {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
min-height: 100vh;
/* tell body to fill viewport */
display: flex;
flex-direction: column;
}
main {
display: flex;
flex-direction: row;
}
#controls {
flex-direction: column;
align-items: center;
}
h2 {
font-size: x-large;
text-align: center;
}
path {
stroke: black;
fill: white;
}
path.district0 {
fill: green;
stroke: green;
opacity: 0.80;
}
path.district1 {
fill: orange;
stroke: orange;
opacity: 0.80;
}
path.district2 {
fill: rgb(200, 60, 200);
stroke: rgb(200, 60, 200);
opacity: 0.80;
}
path.unassigned {
stroke-width: 0;
opacity: 0.80;
}
</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
<script src="//d3js.org/d3-tile.v0.0.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script src="d3-cartogram.js"></script>
<script src="simpleExpander.js"></script>
<script src="index.js"></script>
<h2>Redistrict Chester County, PA</h2>
This page allows you to assign the precincts of Chester county to one of three congressional districts,
called green, orange and purple.
The unassigned precincts are tinted red or blue to indicate a history of voting Republican or Democrat.
As you assign precincts to districts, we predict whether a Democrat or Republican will win each district
using the historical voting patterns for the precincts.
<p>
In 2004, Chester County's major party votes were split 48% Democrat and 52% Republican.
Under something like proportional representation, that would suggest that Republicans would win two of the three districts.
On the other hand, if people were allocated to districts completely at random,
all three districts would have that same splt as the county and all would go Republicans.
</p>
<ul>
<li>Suppose you are part of the Republican redistricting committee.
Can you come up with a redistricting plan that gives the Democrats zero districts? To do that,
you will have to "crack" the Democratic votes among the three districts.</li>
<li>Suppose you are part of the Democratic redistricting committee.
Can you come up with a redistricting plan that gives the Republicans only one district? To do that
you will have to "pack" all the Republicans into a single district.</li>
<li>Lopsided districts tend to suppress voter turn-out because voters feel their votes do not matter. How lopsided can you
make the three districts?</li>
<li> You can also select a different year to forecast the effect of redistricting.
Notice that in 2008, the Democrats took 55% of the votes. You can gerrymander
in favor of the Republicans if you can pack all the Democratic votes into
a single district and then leave the other two districts favoring Republicans. Hint: that
packed district will need to have over 65% Democrats.
</li>
<li>
Drawing district boundaries is complicated because some precincts are more dense and more biased.
You can reshape the precincts according to total population or according to the excess number
voters of either party.
Note: This reshaping process takes a few seconds.
</li>
</ul>
<p>
Click on a color below to select which district you want to build. Then paint precincts on the map with that color.
</p>
<main>
<div id="controls" style="width:200px">
<svg id="scoreSvg" width="200px" height="200px" style="float:left; clear:left">
<g id="score"></g>
<text x=10, y=180, style="font-family:monospace">Percent Democrat</text>
</svg>
<p>
<button onclick="doExpand()" title="Expand districts to fill adjacent precincts" style="font-size:12pt;">Fill</button>
<button onclick="resetDistricts()" style="font-size:12pt;" title="Clear all district assignments">Reset</button>
<select id="electionSelector" onChange="changeElection()" title="Historical election results">
<option value="PRES04">Pres 2004</option>
<option value="PRES08">Pres 2008</option>
<option value="PRES12">Pres 2012</option>
</select>
</p>
Reshape precincts:<select id="cartogramSelector" onChange="changeCartogram()" title="Use cartogram to reshape precincts">
<option value="">None</option>
<option value="POPULATION">Population</option>
<option value="EXCESS_DEMS">Excess Democrats</option>
<option value="EXCESS_REPS">Excess Republicans</option>
</select>
<hr>
<p id="overflowWarning" style="float:left; clear:left;visibility:hidden">
Sorry, your redistricting plan has been rejected by the courts because some of the
districts are too large.
</p>
<p id="summary" style="float:left; clear:left;">
</p>
</div>
<svg id="mapSvg" width="600px" height="600px">
<g id="images"></g>
<g id="mask">
<rect x=0 y=0 width="600px" height="600px" style="fill:white;opacity:.65" onMouseover="maskMouseOver()">
</rect>
</g>
<g id="areas"></g>
<g id="border"></g>
</svg>
</main>
</body>
</html>