-
Notifications
You must be signed in to change notification settings - Fork 0
/
cash-bail-and-race.html
158 lines (158 loc) · 6.89 KB
/
cash-bail-and-race.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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>ACLU Cash Bail</title>
<!-- TODO: Extract the styles we use from these and remove the imports -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/components/transition.min.css"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/components/dropdown.min.css"
/>
<link rel="stylesheet" href="src/css/style.css" />
<link rel="stylesheet" href="src/css/table.css" />
<link rel="stylesheet" href="src/css/search.css" />
<link rel="stylesheet" href="src/css/visualization.css" />
<link rel="stylesheet" href="src/css/graph.css" />
<link rel="stylesheet" href="src/css/map.css" />
<link rel="stylesheet" href="src/css/mobile.css" />
<link rel="stylesheet" href="src/css/tooltip.css" />
</head>
<body>
<div id="race-rate" class="map-container">
<h3 class="title">Rates of Cash Bail for Black and White by County</h3>
<div class="legend-container">
<div class="color-scale-legend"></div>
</div>
<div class="legend"></div>
<div class="map-row">
<div id="black" class="map race-map choropleth"></div>
<div id="white" class="map race-map choropleth"></div>
</div>
<p class="footnote map-footnote">
Note: Counties that had fewer than 50 cases involving a Black
defendant are specially marked to flag the small number of cases.
Numbers for these counties may not be meaningful. Further, AOPC data
misclassifies Latinx people as white, leading to higher estimates of
white cash bail. Finally, poor data reporting makes it difficult to
measure bail rates for people of other races and ethnicities. For
more information about our methodology and limitations, please see
our report.
</p>
</div>
<div class="container">
<div id="race-container">
<h3 class="title">Rates and Average Amounts of Cash Bail for Black and White by County</h3>
<div class="table-container" id="bail-race-rate-container">
<div class="search-container">
<div class="ui fluid multiple search selection dropdown">
<input type="hidden" name="county" />
<i class="dropdown icon"></i>
<div class="default text">Search counties</div>
<div class="menu"></div>
</div>
<div class="btn-text outliers-btn">Show Outliers</div>
</div>
<div class="switch-container">
<div class="btn-text switch left showing">Cash bail rt.</div>
<div class="btn-text switch right">Bail amt.</div>
<div class="btn-text outliers-btn mobile-only">Show Outliers</div>
</div>
<table id="bail-race-rate-table">
<thead></thead>
<tbody></tbody>
</table>
<div class="btn-text view-all-btn"></div>
</div>
<div class="table-container" id="bail-race-amount-container">
<div class="search-container">
<div class="ui fluid multiple search selection dropdown">
<input type="hidden" name="county" />
<i class="dropdown icon"></i>
<div class="default text">Search counties</div>
<div class="menu"></div>
</div>
<div class="btn-text outliers-btn">Show Outliers</div>
</div>
<div class="switch-container">
<div class="btn-text switch left">Cash bail rt.</div>
<div class="btn-text switch right showing">Bail amt.</div>
<div class="btn-text outliers-btn mobile-only">Show Outliers</div>
</div>
<table id="bail-race-amount-table">
<thead></thead>
<tbody></tbody>
</table>
<div class="btn-text view-all-btn"></div>
</div>
<p class="footnote">
Note: Counties that had fewer than 50 cases involving a Black
defendant are specially marked to flag the small number of cases.
Numbers for these counties may not be meaningful. Further, AOPC data
misclassifies Latinx people as white, leading to higher estimates of
white cash bail. Finally, poor data reporting makes it difficult to
measure bail rates for people of other races and ethnicities. For
more information about our methodology and limitations, please see
our report.
</p>
</div>
<div class="graph" id="race-scatter-plot">
<h3 class="title">Racial Disparities in Cash Bail</h3>
<div class="ui fluid multiple search selection dropdown">
<input type="hidden" name="county" />
<i class="dropdown icon"></i>
<div class="default text">Search counties</div>
<div class="menu"></div>
</div>
<div class="scatter-plot-subhead">
<div class="scatter-plot-key">
<span class="key-circle black-race">Black Defendants</span>
<span class="key-circle white-race">White Defendants</span>
<span class="key-circle outlier">Outliers</span>
</div>
</div>
<div class="plot-container">
<svg
class="scatter-plot"
viewBox="0 0 600 500"
xmlns="http://www.w3.org/2000/svg"
></svg>
</div>
<p class="footnote graph-footnote">
Note: Counties that had fewer than 50 cases involving a Black
defendant are specially marked to flag the small number of cases.
Numbers for these counties may not be meaningful. Further, AOPC data
misclassifies Latinx people as white, leading to higher estimates of
white cash bail. Finally, poor data reporting makes it difficult to
measure bail rates for people of other races and ethnicities. For
more information about our methodology and limitations, please see
our report.
</p>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/components/transition.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/components/dropdown.min.js"></script>
<script src="https://unpkg.com/popper.js@1"></script>
<script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
<script src="src/js/cash-bail-and-race.js" charset="utf-8" type="module"></script>
<script>
$(document).ready(() => {
$(".dropdown").dropdown({
fullTextSearch: true,
ignoreCase: true,
delimiter: ";",
label: {
transition: undefined,
duration: 0,
variation: false
}
});
});
</script>
</html>