-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.src.html
329 lines (302 loc) · 22.4 KB
/
index.src.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
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
<!DOCTYPE html>
<html lang="en">
<head>
<title>PlanScore</title>
<!--[include_head]-->
<!-- Highcharts does charts and also maps -->
<script src="https://code.highcharts.com/maps/8.0.4/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="/data/usmapchart.json"></script>
<!-- PapaParse CSV reader -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.3.6/papaparse.min.js"></script>
<!-- various polyfills required by IE -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>
<!-- local config -->
<link href="index.css?[hash]" rel="stylesheet" />
<script src="index.js?[hash]"></script>
<!-- OG tags -->
<meta property="og:title" content="PlanScore" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://planscore.org" />
<meta property="og:image" content="https://planscore.org/images/OG-default-01.jpg" />
<meta property="og:description" content="PlanScore is a first-of-its-kind gerrymandering scoring service for new district plans, allowing users to upload maps and instantly receive projected data about their partisan consequences. You can also use historical data to discover how partisan advantage has influenced redistricting in your state." />
<!-- Twitter tags note that per https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started, we need only use the card metas that differ from OG -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@PlanScore" />
</head>
<body>
<!--[include_navbar]-->
<div class="container container-mainbody">
<h1 class="title">Score Electoral District Maps</h1>
<h2 class="subtitle">Evaluate their fairness.</h2>
<div class="intro">
<p>Most of our federal and state legislators are elected from districts. Every ten years, state governments redraw district boundaries in a process known as redistricting. PlanScore promotes fairness in the redistricting process. We make it easy for policymakers and advocates to <a href="/upload.html">score new district maps</a> and assess whether they’re fair or gerrymandered. We also provide access to the most comprehensive <a href="/about/historical-data/">historical dataset</a> of partisan gerrymandering ever assembled.</p>
</div>
<div class="row" id="boundarypicker">
<div class="center" data-boundary="ushouse" title="Show partisan skew analysis for US House district plans">
<a href="javascript:void(0);">U.S. House</a>
</div>
<div class="center" data-boundary="statesenate" title="Show partisan skew analysis for State Senate district plans">
<a href="javascript:void(0);">State Senates</a>
</div>
<div class="center" data-boundary="statehouse" title="Show partisan skew analysis for State House district plans">
<a href="javascript:void(0);">State Houses</a>
</div>
</div>
<br/>
<div id="maplegend">
<div class="slice d3"></div>
<div class="slice d2"></div>
<div class="slice d1"></div>
<div class="slice balanced"></div>
<div class="slice r1"></div>
<div class="slice r2"></div>
<div class="slice r3"></div>
<div class="slice nodata"></div>
<div class="demtext">Skews Democrat</div>
<div class="reptext">Skews Republican</div>
<div class="nodatatext">No Data</div>
</div>
<div id="map"></div>
<!-- the mobile + desktop year picker UIs; see initYearPickers() and of course selectYear() -->
<div class="row hidden-xs" id="yearpicker-big-wrapper">
<div class="col-xs-1" id="yearpicker-big-playbutton">
<a data-status="paused" href="javascript:void(0);" title="Play an animation showing change in plan skew over time"><i class="glyphicon glyphicon-play"></i></a>
<a data-status="playing" class="hidden" href="javascript:void(0);" title="Pause the animation"><i class="glyphicon glyphicon-pause"></i></a>
</div>
<div class="col-xs-11" id="yearpicker-big"></div>
</div>
<div class="container visible-xs-block">
<div id="yearpicker-small" class="row">
<!-- two giant hit boxes for next/prev; year readout is positioned over top -->
<div class="col-xs-6 left nextprev" title="Previous year"><i class="glyphicon glyphicon-chevron-left"></i></div>
<div class="col-xs-6 right nextprev" title="Next year"><i class="glyphicon glyphicon-chevron-right"></i></div>
<div class="readout center"></div>
</div>
</div>
<div class="container">
<!-- be careful of changing the structure: updateStateListingSwatches() expects A with span + statename in order to key to a state -->
<!-- note that there are multiple of these for varying screen widths -->
<!-- note too that updateStateListingHashes() will update the lirnks below to include #! components, to link to the state with year+district selected -->
<div class="row states-listing visible-lg-block">
<div class="col-lg-3">
<a href="/alabama/"><span class="swatch"></span> Alabama</a>
<a href="/alaska/"><span class="swatch"></span> Alaska</a>
<a href="/arizona/"><span class="swatch"></span> Arizona</a>
<a href="/arkansas/"><span class="swatch"></span> Arkansas</a>
<a href="/california/"><span class="swatch"></span> California</a>
<a href="/colorado/"><span class="swatch"></span> Colorado</a>
<a href="/connecticut/"><span class="swatch"></span> Connecticut</a>
<a href="/delaware/"><span class="swatch"></span> Delaware</a>
<a href="/florida/"><span class="swatch"></span> Florida</a>
<a href="/georgia/"><span class="swatch"></span> Georgia</a>
<a href="/hawaii/"><span class="swatch"></span> Hawaii</a>
<a href="/idaho/"><span class="swatch"></span> Idaho</a>
<a href="/illinois/"><span class="swatch"></span> Illinois</a>
</div>
<div class="col-lg-3">
<a href="/indiana/"><span class="swatch"></span> Indiana</a>
<a href="/iowa/"><span class="swatch"></span> Iowa</a>
<a href="/kansas/"><span class="swatch"></span> Kansas</a>
<a href="/kentucky/"><span class="swatch"></span> Kentucky</a>
<a href="/louisiana/"><span class="swatch"></span> Louisiana</a>
<a href="/maine/"><span class="swatch"></span> Maine</a>
<a href="/maryland/"><span class="swatch"></span> Maryland</a>
<a href="/massachusetts/"><span class="swatch"></span> Massachusetts</a>
<a href="/michigan/"><span class="swatch"></span> Michigan</a>
<a href="/minnesota/"><span class="swatch"></span> Minnesota</a>
<a href="/mississippi/"><span class="swatch"></span> Mississippi</a>
<a href="/missouri/"><span class="swatch"></span> Missouri</a>
<a href="/montana/"><span class="swatch"></span> Montana</a>
</div>
<div class="col-lg-3">
<a href="/nebraska/"><span class="swatch"></span> Nebraska</a>
<a href="/nevada/"><span class="swatch"></span> Nevada</a>
<a href="/new_hampshire/"><span class="swatch"></span> New Hampshire</a>
<a href="/new_jersey/"><span class="swatch"></span> New Jersey</a>
<a href="/new_mexico/"><span class="swatch"></span> New Mexico</a>
<a href="/new_york/"><span class="swatch"></span> New York</a>
<a href="/north_carolina/"><span class="swatch"></span> North Carolina</a>
<a href="/north_dakota/"><span class="swatch"></span> North Dakota</a>
<a href="/ohio/"><span class="swatch"></span> Ohio</a>
<a href="/oklahoma/"><span class="swatch"></span> Oklahoma</a>
<a href="/oregon/"><span class="swatch"></span> Oregon</a>
<a href="/pennsylvania/"><span class="swatch"></span> Pennsylvania</a>
</div>
<div class="col-lg-3">
<a href="/rhode_island/"><span class="swatch"></span> Rhode Island</a>
<a href="/south_carolina/"><span class="swatch"></span> South Carolina</a>
<a href="/south_dakota/"><span class="swatch"></span> South Dakota</a>
<a href="/tennessee/"><span class="swatch"></span> Tennessee</a>
<a href="/texas/"><span class="swatch"></span> Texas</a>
<a href="/utah/"><span class="swatch"></span> Utah</a>
<a href="/vermont/"><span class="swatch"></span> Vermont</a>
<a href="/virginia/"><span class="swatch"></span> Virginia</a>
<a href="/washington/"><span class="swatch"></span> Washington</a>
<a href="/west_virginia/"><span class="swatch"></span> West Virginia</a>
<a href="/wisconsin/"><span class="swatch"></span> Wisconsin</a>
<a href="/wyoming/"><span class="swatch"></span> Wyoming</a>
</div>
</div>
<div class="row states-listing visible-sm-block visible-md-block">
<div class="col-sm-4">
<a href="/alabama/"><span class="swatch"></span> Alabama</a>
<a href="/alaska/"><span class="swatch"></span> Alaska</a>
<a href="/arizona/"><span class="swatch"></span> Arizona</a>
<a href="/arkansas/"><span class="swatch"></span> Arkansas</a>
<a href="/california/"><span class="swatch"></span> California</a>
<a href="/colorado/"><span class="swatch"></span> Colorado</a>
<a href="/connecticut/"><span class="swatch"></span> Connecticut</a>
<a href="/delaware/"><span class="swatch"></span> Delaware</a>
<a href="/florida/"><span class="swatch"></span> Florida</a>
<a href="/georgia/"><span class="swatch"></span> Georgia</a>
<a href="/hawaii/"><span class="swatch"></span> Hawaii</a>
<a href="/idaho/"><span class="swatch"></span> Idaho</a>
<a href="/illinois/"><span class="swatch"></span> Illinois</a>
<a href="/indiana/"><span class="swatch"></span> Indiana</a>
<a href="/iowa/"><span class="swatch"></span> Iowa</a>
<a href="/kansas/"><span class="swatch"></span> Kansas</a>
<a href="/kentucky/"><span class="swatch"></span> Kentucky</a>
</div>
<div class="col-sm-4">
<a href="/louisiana/"><span class="swatch"></span> Louisiana</a>
<a href="/maine/"><span class="swatch"></span> Maine</a>
<a href="/maryland/"><span class="swatch"></span> Maryland</a>
<a href="/massachusetts/"><span class="swatch"></span> Massachusetts</a>
<a href="/michigan/"><span class="swatch"></span> Michigan</a>
<a href="/minnesota/"><span class="swatch"></span> Minnesota</a>
<a href="/mississippi/"><span class="swatch"></span> Mississippi</a>
<a href="/missouri/"><span class="swatch"></span> Missouri</a>
<a href="/montana/"><span class="swatch"></span> Montana</a>
<a href="/nebraska/"><span class="swatch"></span> Nebraska</a>
<a href="/nevada/"><span class="swatch"></span> Nevada</a>
<a href="/new_hampshire/"><span class="swatch"></span> New Hampshire</a>
<a href="/new_jersey/"><span class="swatch"></span> New Jersey</a>
<a href="/new_mexico/"><span class="swatch"></span> New Mexico</a>
<a href="/new_york/"><span class="swatch"></span> New York</a>
<a href="/north_carolina/"><span class="swatch"></span> North Carolina</a>
<a href="/north_dakota/"><span class="swatch"></span> North Dakota</a>
</div>
<div class="col-sm-4">
<a href="/ohio/"><span class="swatch"></span> Ohio</a>
<a href="/oklahoma/"><span class="swatch"></span> Oklahoma</a>
<a href="/oregon/"><span class="swatch"></span> Oregon</a>
<a href="/pennsylvania/"><span class="swatch"></span> Pennsylvania</a>
<a href="/rhode_island/"><span class="swatch"></span> Rhode Island</a>
<a href="/south_carolina/"><span class="swatch"></span> South Carolina</a>
<a href="/south_dakota/"><span class="swatch"></span> South Dakota</a>
<a href="/tennessee/"><span class="swatch"></span> Tennessee</a>
<a href="/texas/"><span class="swatch"></span> Texas</a>
<a href="/utah/"><span class="swatch"></span> Utah</a>
<a href="/vermont/"><span class="swatch"></span> Vermont</a>
<a href="/virginia/"><span class="swatch"></span> Virginia</a>
<a href="/washington/"><span class="swatch"></span> Washington</a>
<a href="/west_virginia/"><span class="swatch"></span> West Virginia</a>
<a href="/wisconsin/"><span class="swatch"></span> Wisconsin</a>
<a href="/wyoming/"><span class="swatch"></span> Wyoming</a>
</div>
</div>
<div class="row states-listing visible-xs-block">
<div class="col-xs-6">
<a href="/alabama/"><span class="swatch"></span> Alabama</a>
<a href="/alaska/"><span class="swatch"></span> Alaska</a>
<a href="/arizona/"><span class="swatch"></span> Arizona</a>
<a href="/arkansas/"><span class="swatch"></span> Arkansas</a>
<a href="/california/"><span class="swatch"></span> California</a>
<a href="/colorado/"><span class="swatch"></span> Colorado</a>
<a href="/connecticut/"><span class="swatch"></span> Connecticut</a>
<a href="/delaware/"><span class="swatch"></span> Delaware</a>
<a href="/florida/"><span class="swatch"></span> Florida</a>
<a href="/georgia/"><span class="swatch"></span> Georgia</a>
<a href="/hawaii/"><span class="swatch"></span> Hawaii</a>
<a href="/idaho/"><span class="swatch"></span> Idaho</a>
<a href="/illinois/"><span class="swatch"></span> Illinois</a>
<a href="/indiana/"><span class="swatch"></span> Indiana</a>
<a href="/iowa/"><span class="swatch"></span> Iowa</a>
<a href="/kansas/"><span class="swatch"></span> Kansas</a>
<a href="/kentucky/"><span class="swatch"></span> Kentucky</a>
<a href="/louisiana/"><span class="swatch"></span> Louisiana</a>
<a href="/maine/"><span class="swatch"></span> Maine</a>
<a href="/maryland/"><span class="swatch"></span> Maryland</a>
<a href="/massachusetts/"><span class="swatch"></span> Massachusetts</a>
<a href="/michigan/"><span class="swatch"></span> Michigan</a>
<a href="/minnesota/"><span class="swatch"></span> Minnesota</a>
<a href="/mississippi/"><span class="swatch"></span> Mississippi</a>
<a href="/missouri/"><span class="swatch"></span> Missouri</a>
<a href="/montana/"><span class="swatch"></span> Montana</a>
</div>
<div class="col-xs-6">
<a href="/nebraska/"><span class="swatch"></span> Nebraska</a>
<a href="/nevada/"><span class="swatch"></span> Nevada</a>
<a href="/new_hampshire/"><span class="swatch"></span> New Hampshire</a>
<a href="/new_jersey/"><span class="swatch"></span> New Jersey</a>
<a href="/new_mexico/"><span class="swatch"></span> New Mexico</a>
<a href="/new_york/"><span class="swatch"></span> New York</a>
<a href="/north_carolina/"><span class="swatch"></span> North Carolina</a>
<a href="/north_dakota/"><span class="swatch"></span> North Dakota</a>
<a href="/ohio/"><span class="swatch"></span> Ohio</a>
<a href="/oklahoma/"><span class="swatch"></span> Oklahoma</a>
<a href="/oregon/"><span class="swatch"></span> Oregon</a>
<a href="/pennsylvania/"><span class="swatch"></span> Pennsylvania</a>
<a href="/rhode_island/"><span class="swatch"></span> Rhode Island</a>
<a href="/south_carolina/"><span class="swatch"></span> South Carolina</a>
<a href="/south_dakota/"><span class="swatch"></span> South Dakota</a>
<a href="/tennessee/"><span class="swatch"></span> Tennessee</a>
<a href="/texas/"><span class="swatch"></span> Texas</a>
<a href="/utah/"><span class="swatch"></span> Utah</a>
<a href="/vermont/"><span class="swatch"></span> Vermont</a>
<a href="/virginia/"><span class="swatch"></span> Virginia</a>
<a href="/washington/"><span class="swatch"></span> Washington</a>
<a href="/west_virginia/"><span class="swatch"></span> West Virginia</a>
<a href="/wisconsin/"><span class="swatch"></span> Wisconsin</a>
<a href="/wyoming/"><span class="swatch"></span> Wyoming</a>
</div>
</div>
</div>
<h2>What is Partisan Gerrymandering?</h2>
<p>Gerrymandering is the process by which politicians draw voting maps to make it easier to get reelected. Through gerrymandering, a party is able to translate its votes into seats more efficiently than its opponent. Seats translate to legislative power and more control over the policies the government enacts.</p>
<p>Gerrymandering has been a practice in American elections nearly since the founding of the country. But in recent redistricting cycles, the accuracy of voter databases and mapping software has skyrocketed, leading to a trend of increasingly skewed maps in the states where politicians control district line drawing. One way to combat gerrymandering is through the creation of independent redistricting commissions, bodies separate from state legislatures that are responsible for drawing the districts. You can <a href="https://campaignlegal.org/democracyu/accountability/independent-redistricting-commissions" target="_blank">learn more about independent redistricting commissions</a> in Campaign Legal Center's DemocracyU toolkit, and <a href="https://campaignlegal.org/story/how-michigan-voters-came-together-flip-gerrymandering-its-head" target="_blank">read the story of Nancy Wang, executive director of Voters Not Politicians</a>, the group that spurred the creation of the Michigan Independent Redistricting Commission in 2018. </p>
<p>But first, in order to understand the impact of gerrymandering on our voting maps, we need to be able to measure it.</p>
<h3>How Do We Measure It?</h3>
<p>We use four distinct measures of partisan gerrymandering: the efficiency gap, partisan bias, the mean-median difference, and declination. All of these metrics are reliable when a state is competitive, but only the efficiency gap and declination should be trusted when one party predominates in a state.</p>
<ul class="nav nav-tabs" id="tabs-metrics">
<li class="active"><a href="#tab-efficiencygap" data-toggle="tab">Efficiency Gap</a></li>
<li><a href="#tab-partisanbias" data-toggle="tab">Partisan Bias</a></li>
<li><a href="#tab-meanmedian" data-toggle="tab">Mean-<span class="mobilespace"> </span>Median</a></li>
<li><a href="#tab-declination2" data-toggle="tab">Declination</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="tab-efficiencygap">
<p>Partisan gerrymandering is always carried out by cracking a party’s supporters among many districts, in which their preferred candidates lose by relatively narrow margins; and/or by packing a party’s backers in a few districts, in which their preferred candidates win by enormous margins. Both cracking and packing produce votes that are inefficient in the sense that they do not contribute to a candidate’s election. In the case of cracking, all votes cast for the losing candidate are inefficient. In the case of packing, all votes cast for the winning candidate, above the 50% (plus one) threshold needed for victory, are inefficient. The efficiency gap is calculated by taking one party’s total inefficient votes in an election, subtracting the other party’s total inefficient votes, and dividing by the total number of votes cast. It captures in a single number the extent to which district lines crack and pack one party’s voters more than the other party’s voters.</p>
<p><a href="/metrics/efficiencygap/">Learn more about the efficiency gap <i class="glyphicon glyphicon-chevron-right" style="font-size:0.8em;"></i></a></p>
</div>
<div class="tab-pane fade" id="tab-partisanbias">
<p>Partisan bias is the difference between each party’s seat share and 50% in a hypothetical, perfectly tied election. For example, if a party would win 55% of a plan’s districts if it received 50% of the statewide vote, then the plan would have a bias of 5% in this party’s favor. To calculate partisan bias, the observed vote share in each district is shifted by the amount necessary to simulate a tied statewide election. Each party’s seat share in this hypothetical election is then determined. The difference between each party’s seat share and 50% is partisan bias.</p>
<p><a href="/metrics/partisanbias/">Learn more about partisan bias <i class="glyphicon glyphicon-chevron-right" style="font-size:0.8em;"></i></a></p>
</div>
<div class="tab-pane fade" id="tab-meanmedian">
<p>The mean-median difference is a party’s median vote share minus its mean vote share, across all of a plan’s districts. For example, if a party has a median vote share of 45% and a mean vote share of 50%, then the plan has a mean-median difference of 5% against this party. When the mean and the median diverge significantly, the district distribution is skewed in favor of one party and against its opponent. Conversely, when the mean and the median are close, the district distribution is more symmetric.</p>
<p><a href="/metrics/meanmedian/">Learn more about the mean-median difference <i class="glyphicon glyphicon-chevron-right" style="font-size:0.8em;"></i></a></p>
</div>
<div class="tab-pane fade" id="tab-declination2">
<p>
A gerrymander designs districts with the win/loss threshold in mind, to ensure that more districts of the favored party end up on the winning side of the threshold. A neutral map designs districts for other reasons, and does not treat the win/loss threshold as special.
The declination metric treats threshold-related asymmetry in the distribution of votes across districts as indicative of partisan gerrymandering.
</p>
<p><a href="/metrics/declination/">Learn more about the declination <i class="glyphicon glyphicon-chevron-right" style="font-size:0.8em;"></i></a></p>
</div>
</div>
</div><!--/container-mainbody-->
<!-- this popup will be displayed by selectState() -->
<div id="stateinfo-popup">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title"><span data-field="statename"></span></h4>
<span data-field="analysis"></span>
<br>
<a href="javascript:void(0);" class="learnmore"><span>Learn More <i class="glyphicon glyphicon-chevron-right" style="font-size:0.8em;"></i></span></a>
</div>
<!--[include_footer]-->
</body>
</html>
<!-- 😱 -->