-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
233 lines (185 loc) · 9.64 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Document</title>
<!-- font awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"
crossorigin="anonymous">
<link rel="stylesheet" href="folders/css/styles.css" crossorigin="anonymous">
<!-- jquery ui css -->
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<!-- leaflet map -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css" />
<script>
// var judgeJudy = document.getElementByID('judgeJudy');
function judgeJudy() {
document.getElementById('judgeJudy').classList.add("shake");
}
</script>
<style>
.shake:hover{
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
@keyframes shake {
10%, 90% {
transform: translate3d(-1px, 0, 0);
}
20%, 80% {
transform: translate3d(2px, 0, 0);
}
30%, 50%, 70% {
transform: translate3d(-4px, 0, 0);
}
40%, 60% {
transform: translate3d(4px, 0, 0);
}
}
</style>
</head>
<body>
<div class="jumbotron bg-dark" id="jumbo">
<div class="container">
<div class="row">
<div class="col-md-12 text-white">
<h1>Charm City Crimes <i class="fas fa-gavel fa-1x" id='judgeJudy' onclick="judgeJudy();" ></i> </h1>
<h5>Gun offense records from Baltimore Maryland</h5>
</div>
</div>
</div>
</div> <!-- end of jumbotron -->
<!-- intro paragraph -->
<div class="container">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10 text-center">
<h1>Who is gun toting in Charm City?</h1>
<p>The City of Baltimore Maryland, otherwise known as "Charm City" keeps tabs on gun offenders and released records relating to almost 3,000 offenders via Data.Gov. The site description explains that the dataset <a href="https://catalog.data.gov/dataset/gunoffenders" target="blank">(download link)</a> "represents the Gun Offender Registry for persons convicted of at least one gun-related offense and are required to register their name and address with police; also required to check-in with police every 6 months for three years". </p>
<p>To see what is "under the hood", the code is on GitHub: <a href="https://github.com/sherirosalia/guns_of_charm_city" target='blank'>Guns of Charm City</a>.</p>
<p>Please join me to explore some of the findings in a visual journey below.</p>
</div>
<div class="col-md-1"></div>
</div>
</div> <!-- end of intro paragraph div -->
<!-- leaflet map -->
<div class="container">
<div class="row">
<div class="col-md-12">
<h3>Where do they live?</h3>
<p><span>Use the timeline slider in the upper right hand corner of the map </span> to see reported addresses for registered offenders over the last 13 years.</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12" id='map'></div>
</div>
</div> <!-- end of leaflet map div -->
<div class="container">
<div class="row">
<div class="col-md-12">
<h3>Demographic profile</h3>
<p>Analysis shows that of the approximately 2750 offenders, 2,688 are male, the youngest 15, oldest 80 and a median age of 26. The majority identified as black.</p>
</div>
</div> <!-- end of demographic row -->
</div> <!-- end of demographic container -->
<div class="container">
<div class="row">
<div class="col-md-12">
<h3>Count by zipcode</h3>
<p>The zipcodes with the highest counts of gun offender inhabitants are either approaching or tilt over the 200 count line. Moving the bubbles around in the visualization below will also display a tooltip with zipcode information</p>
</div>
</div> <!-- end of row -->
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8" id="my_dataviz"></div> <!-- bubble -->
<div class="col-md-2"></div>
</div> <!-- end of row -->
<div class="row">
<div class="col-md-12">
<h3>December 26</h3>
<p>Initially, the scatter plot produced below suggested that the day after Christmas was a wild card for reported offenses, but on deeper inspection, this seems to only be true for the years of 2018 and 2019. Perhaps this reflects some reason related to a clerical issue, but it would be interesting to be able to find out why especially in light of the fact that this was only for two of 12 years that included Christmas (2021 Christmas has not happened as of the day of this writing). Maybe law enforcement increased neighborhood sweeps?</p>
</div>
</div> <!-- end of row -->
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<img src="folders/images/plot.jpeg" class="img-fluid" alt="Responsive image" alt="december 26 scatter plot" id='dec26'>
</div>
<div class="col-md-2"></div>
</div> <!-- end of row -->
</div> <!-- end of container-->
<div class="container">
<div class="row">
<div class="col-md-12">
<h3>Graphing Districts by Year</h3>
<p>Double click the legend on the right to isolate Districts for an analysis by year.</p>
</div>
</div> <!-- end of row -->
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10" id="graph"></div> <!-- bubble -->
<div class="col-md-1"></div>
</div> <!-- end of row -->
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<h3>Covid related decline?</h3>
<p>As seen in the chart below, a steady and then escalating increase in offenses drops precipitously right around the same time that the US went into lockdown due to the pandemic. <span>If this is causational</span> and not just a simple correlation, one has to wonder why. Was the reason economic? Did the supplemental unemployment benfits take a "bite out of crime"? Alternatively, was reporting and enforcement less robust because of government closures? It is also possible that with eateries, shopping centers and bars shut down there was simply less opportunity for folks to get into trouble. Perhaps all or some of those factors contributed to a decrease in firearm violations</p>
</div>
</div> <!-- end of row -->
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10" id="line"></div> <!-- bubble -->
<div class="col-md-1"></div>
</div> <!-- end of row -->
</div>
<div class="container mt-5">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8"></div>
<h3>Dreams of supplemental data</h3>
<p>What little nuggets of insights could we get with more information? Unfortunately the nature of the offenses are not listed as part of this dataset. Are these simple gun possession violations or was a serious crime involved? Sex offender statistics, how funding is distributed in the community, educational access, employment statistics and proximity to to mental health services are only few potential resources that could help to "flesh out" the information gleaned during the analytical process that produced the above insights with the hope of telling a "human story" of "why" these crimes happened and "how" to fix it.</p>
<div class="col-md-2"></div>
</div><!-- end of row-->
</div> <!-- end of ROW dist year by count-->
<footer class="bg-dark text-white page-footer ">
<div class="text-center py-3">
<p class='text-white'>2021 Copyright © Sheri Rosalia <a href="http://www.sherirosalia.com"><img src ="folders/images/rose2.png" style="margin-top: .25em; height: 2em; width:2em;" alt="rose logo"></a></p>
</div>
</footer>
<!-- jquery -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- d3 v 6 -->
<script type="text/javascript" src="https://d3js.org/d3.v6.js"></script>
<!-- jquery ajax -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- plotly js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<!-- external js and data files -->
<!-- config -->
<!-- <script type="text/javascript" src="folders/js/config.js"></script> -->
<script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js"></script>
<script type="text/javascript" src="folders/js/map.js"></script>
<!-- slider control for map -->
<script type="text/javascript" src="folders/js/SliderControl.js"></script>
<!-- geojson data for map -->
<script type="text/javascript" src="folders/data/gun_data.js"></script>
<!-- district bar graph -->
<script type="text/javascript" src="folders/js/district_year.js"></script>
<!-- year line graph -->
<script type="text/javascript" src="folders/js/line.js"></script>
<!-- d3 bubble plot -->
<script type="text/javascript" src="folders/js/bubble.js"></script>
<!-- jquery ui js -->
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</body>
</html>