forked from caranvr/gentrification-crime-ldn
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
306 lines (277 loc) · 19.1 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
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
<!DOCTYPE html>
<html>
<head>
<title>Gentrification and Crime in London, 2008-2018</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<!-- google fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- stylesheet -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- landing -->
<div id="intro">
<div class="layer">
<div class="intro-text">
<h1>Gentrification and Crime</h1>
<h2>A case study of Waltham Forest and Bromley</h2>
<a class="button scroll-btn" href="#background">
Start <span class="material-icons material-icons-outlined md-18">expand_more</span>
</a>
</div>
</div>
</div>
<a class="button top-btn" id="scroll-top" href="#intro"><span class="material-icons material-icons-outlined md-18">expand_less</span></a>
<!-- background -->
<div id="background">
<p class="emphasis">In London, different neighbourhoods show "specialisation" in different types of crime.</p>
<p>Compared to the citywide average, some neighbourhoods have higher proportions of crime classified as violent, while others have higher proportions of burglaries or thefts. Criminological research suggests that the type of crime a neighbourhood is specialised in is related to its average income: a relationship that holds true for London.</p>
</div>
<!-- income and crime scatterplot -->
<div id="income-crime">
<div id="scatter-container"></div>
<div class="scatter-description">
<p class="emphasis">Each crime type has a different relationship with area-level income.</p>
<p>Relative to the overall share of property crimes in London, burglary and theft are overrepresented in areas with higher average incomes. The opposite can be seen for violent crime, which is linked to socio-economic conditions in deprived areas; and drug-related offences, for which ethnic minorities — who are more likely to live in deprived areas — are over-prosecuted.</p>
<div class="custom-select">
<p class="font-400">Explore how the local concentration of each major crime category correlates with income.
<a href="#income-crime-overlay" onclick="showOverlay('income-crime-overlay')"><span class="material-icons material-icons-outlined md-18">info</span></a></p>
<input type="button" class="button scatter-btn" value="Burglary" />
<input type="button" class="button scatter-btn" value="Criminal Damage" />
<input type="button" class="button scatter-btn" value="Drugs" />
<input type="button" class="button scatter-btn" value="Robbery" />
<input type="button" class="button scatter-btn" value="Theft and Handling" />
<input type="button" class="button scatter-btn active" value="Violence Against the Person" />
</div>
<!-- info and sources for income crime plot -->
<div id="income-crime-overlay" onclick="hideOverlay('income-crime-overlay')" class="overlay">
<div id="income-crime-sources" class="overlay-content">
<p class="emphasis">About the location quotient (LQ)</p>
<p>A measure of local concentration relative to a region, LQs are calculated for a certain crime category in an area. This measure is the ratio between the local share of crime in this category and the citywide share of crime in this category.</p>
<p>An LQ equal to 1 indicates that the local proportion of crime in a category is equal to the citywide share of crime in that category. An LQ more than 1 indicates that crime is locally overrepresented relative to its share of citywide crime, while an LQ less than 1 shows that crime is locally underrepresented.</p>
<p>In this plot, LQs are calculated based on Middle-Layer Super Output Areas (MSOAs) and Metropolitan Police major crime categories.</p>
<p class="emphasis">Data sources</p>
<ul id="income-crime-source-list">
<li>Income: <a href="https://www.ons.gov.uk/peoplepopulationandcommunity/personalandhouseholdfinances/incomeandwealth/methodologies/incomeestimatesforsmallareasinenglandandwalestechnicalreportfinancialyearending2018" target="_blank">Office for National Statistics</a></p></li>
<li>Crime: <a href="https://data.london.gov.uk/dataset/recorded_crime_summary" target="_blank">Metropolitan Police Service</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="divider">
<p>These varying relationships raise an important question:</p>
<p class="emphasis">How does gentrification change a neighbourhood's relative concentrations of different crime types?</p>
<p>We looked at how it happens in two London boroughs that have been gentrifying in recent years:
<span class="font-400">Waltham Forest</span> and <span class="font-400">Bromley.</span></p>
<a class="button scroll-btn" href="#income-change">Why these boroughs? <span class="material-icons material-icons-outlined md-18">expand_more</a>
</div>
<!-- income choropleth -->
<div id="income-change">
<div class="divider">
<p class="emphasis">Both boroughs saw significant increases in average income between 2008 and 2018. <a href="#income-change-overlay" onclick="showOverlay('income-change-overlay')"><span class="material-icons material-icons-outlined md-18">info</span></a></p>
</div>
<div id="income-change-overlay" class="overlay" onclick="hideOverlay('income-change-overlay')">
<div id="income-change-overlay-content" class="overlay-content">
<p>Data source: <a href="https://www.ons.gov.uk/peoplepopulationandcommunity/personalandhouseholdfinances/incomeandwealth/bulletins/smallareamodelbasedincomeestimates/financialyearending2018" target="_blank">Office for National Statistics</a></p>
</div>
</div>
<section id="services" class="services section-bg">
<div class="slider" data-aos="fade-up" data-aos-delay="100">
<center>
<span id="value">
<font size="4"><span class="font-400">London Average Year Income by MSOA:</span></font>
<font size="4" weight="100"><b id="year">2008</b></font>
</span>
<input id="slider" type="range" min="2008" max="2018" step="2" value="2008" oninput="change()"
onchange="change()">
<script type='text/javascript'>
</script>
<div class='row labels'>
<div class='label1'>2008</div>
<div class='label2'>2018</div>
</div>
</center>
</div>
</section>
<div class="map" id="income-change-map">
<!-- 3、 -->
<div class="lenged">
<div class="title">Legend</div>
<div class="lenged-item">
<span style="width: 15px;height: 15px;background: #fed976;margin-right: 10px;"></span>
<span style="font-size: 16px;">£20,000-£30,000</span>
</div>
<div class="lenged-item">
<span style="width: 15px;height: 15px;background:#feb24c;margin-right: 10px;"></span>
<span style="font-size: 16px;">£30,000-£40,000 </span>
</div>
<div class="lenged-item">
<span style="width: 15px;height: 15px;background: #feb24c;margin-right: 10px;"></span>
<span style="font-size: 16px;"> £40,000-£50,000 </span>
</div>
<div class="lenged-item">
<span style="width: 15px;height: 15px;background: #fd8d3c;margin-right: 10px;"></span>
<span style="font-size: 16px;">£50,000-£60,000 </span>
</div>
<div class="lenged-item">
<span style="width: 15px;height: 15px;background: #fc4e2a;margin-right: 10px;"></span>
<span style="font-size: 16px;"> £60,000-£70,000 </span>
</div>
<div class="lenged-item">
<span style="width: 15px;height: 15px;background: #e31a1c;margin-right: 10px;"></span>
<span style="font-size: 16px;"> £70,000-£90,000 </span>
</div>
<div class="lenged-item">
<span style="width: 15px;height: 15px;background: #BD0026;margin-right: 10px;"></span>
<span style="font-size: 16px;"> £90,000+</span>
</div>
</div>
<a class="button scroll-btn" href="#pop-change">Population changes<span class="material-icons material-icons-outlined md-18">expand_more</span></a>
</div>
</div>
<div id="pop-change">
<div class="divider">
<p class="emphasis">Waltham Forest in particular saw increases in population density between 2001 and 2011, suggesting an influx of new residents — an indicator of gentrification.</p>
</div>
<div id='pop-map'></div>
<div class='pop-map-overlay'>
<div class='pop-map-overlay-inner'>
<h2>London Population Density and Employment<br>Census 2001 - 2011 Comparison</h2>
<table><tr><td>
<input type="radio" name="layers" id="layer1" value="Population 2001" checked><label>Population Density change </label><br>
<input type="radio" name="layers" id="layer2" value="Population 2011" ><label>Employment change </label>
</td>
</tr>
</table>
<p class="credit">Data: Census 2011, Office for Nat. Statistics. Cartography: <a href="http://citygeographics.org">citygeographics</a>.</p>
</div>
</div>
<div class="overlay-scroll">
<a class="button scroll-btn" href="#lq-text">Crime and income changes<span class="material-icons material-icons-outlined md-18">expand_more</span></a>
</div>
</div>
<div id="lq-text">
<div class="divider annotations">
<p class="emphasis">In Waltham Forest and Bromley, changes in resident population counts and demographics have occurred alongside shifts in the types of crimes that are concentrated in these areas, as measured by changes in the <a href="#lq-overlay" onclick="showOverlay('lq-overlay')">location quotients</a> (LQs) for different crime types.</p>
<p><span class="font-400">Burglary LQs</span> decreased between 2008 and 2018. This could be because of the increased security installed by new, high-economic status arrivals in the area, and new and well-developed, secure estates built within the 10 years.</p>
<p><span class="font-400">Theft LQs</span> show a significant increase, accompanied by decreases in theft LQs for nearby areas. This could be dependent on the relative difference in economic and social status between new and existing residents, and hence increased opportunity for criminal behaviour.</p>
<p>Similar trends can be seen when looking at LQs of assault and robbery. Although those are observations in line with Aliprantis (2015), Autor et al. (2017) has stated that those are temporary changes in the gentrified area and only occur during the transitional period of gentrification.</p>
<p class="font-400">Explore how LQs for different crime types changed between 2008 and 2018.</p>
<a class="button scroll-btn" href="#lq">View map<span class="material-icons material-icons-outlined md-18">expand_more</span></a>
</div>
<div id="lq-overlay" onclick="hideOverlay('lq-overlay')" class="overlay">
<div class="overlay-content">
<p class="emphasis">About the location quotient (LQ)</p>
<p>A measure of local concentration relative to a region, LQs are calculated for a certain crime category in an area. This measure is the ratio between the local share of crime in this category and the citywide share of crime in this category.</p>
<p>An LQ equal to 1 indicates that the local proportion of crime in a category is equal to the citywide share of crime in that category. An LQ more than 1 indicates that crime is locally overrepresented relative to its share of citywide crime, while an LQ less than 1 shows that crime is locally underrepresented.</p>
<p>In this map, LQs are calculated based on Middle-Layer Super Output Areas (MSOAs) and Metropolitan Police major crime categories.</p>
</div>
</div>
</div>
<div id="lq">
<div id="lq-map"></div>
<div class="overlay-scroll">
<a class="button scroll-btn" href="#footer">About this site<span class="material-icons material-icons-outlined md-18">expand_more</span></a>
</div>
<div class='lq-map-overlay' id='features'>
<div id='pd'><p><h3><strong>Hover over an area!</strong></p></div>
</div>
<div id='console'>
<h1>Location Quotients</h1>
<p>Data: <a href='https://data.cityofnewyork.us/Public-Safety/NYPD-Motor-Vehicle-Collisions/h9gi-nx95'>Crime in London by MSOA</a>, years 2008-2018</p>
<div id='pd'><p>Choropleths describe the Location Quotients of crimes in the area, as used in <a href='https://data.cityofnewyork.us/Public-Safety/NYPD-Motor-Vehicle-Collisions/h9gi-nx95'>Mapping Crime for Analytic Purposes, P. Brantingham</a> </p>
<div class='session'>
<div class='session' id='sliderbar'>
<h2>Year <label id='active-year'>2008</label></h2>
<input id='lq-slider' class='row' type='range' min='2008' max='2018' step='1' value='2008' />
</div>
</div>
<div class='session'>
<h2>Type of crime:</h2>
<div class='row' id='filters'>
<input id='Total' type='radio' name='toggle' value='Total' checked='checked'>
<label for='Total'>Total</label>
<br />
<input id='Burglary' type='radio' name='toggle' value='Burglary'>
<label for='Burglary'>Burglary</label>
<br />
<input id='Criminal Damage' type='radio' name='toggle' value='Criminal Damage'>
<label for='Criminal Damage'>Criminal Damage</label>
<br />
<input id='Drugs' type='radio' name='toggle' value='Drugs'>
<label for='Drugs'>Drugs</label>
<br />
<input id='Robbery' type='radio' name='toggle' value='Robbery'>
<label for='Robbery'>Robbery</label>
<br />
<input id='Theft and Handling' type='radio' name='toggle' value='Theft and Handling'>
<label for='Theft and Handling'>Theft and Handling</label>
<br />
<input id='Violence Against the Person' type='radio' name='toggle' value='Violence Against the Person'>
<label for='Violence Against the Person'>Violence Against the Person</label>
<br />
<input id='Other Notifiable Offences' type='radio' name='toggle' value='Other Notifiable Offences'>
<label for='Other Notifiable Offences'>Other Notifiable Offence</label>
</div>
</div>
<nav id="listing-group" class="listing-group">
<input type="checkbox" id="showPoints" checked="checked">
<label for="showPoints">Show Crime Points</label>
</nav>
<div id="fly-buttons">
<h2>Fly to:</h2><input type="button" class="button lq-map-btn" value="Waltham Forest" />
<input type="button" class="button lq-map-btn" value="Bromley" /></p>
</div>
</div>
</div>
</div class='lq-map-overlay' id='legend'></div>
</div>
<div id="footer">
<h3>About</h3>
<p>Created by Cara Navarro, Alina Pietruszewicz, Jiaxi Tang, and Haihua Huang</p>
<a href="#footer" onclick="showOverlay('reference-overlay')" class="button link-btn">References</a>
<a href="https://github.com/caranvr/gentrification-crime-ldn" target="_blank" class="button link-btn">Github</a>
<div id="reference-overlay" onclick="hideOverlay('reference-overlay')" class="overlay">
<div id="reference-overlay-content" class="overlay-content">
<p class="emphasis">References</p>
<p>Aliprantis, H., Harley, D. (2015) Blowing it up and knocking it down: The Local and City-Wide Effects of Demolishing High Concentration Public Housing on Crime, Journal of Urban Economics. 88</p>
<p>Atkinson, Rowland; Bridge, Gary, eds. (2005). Gentrification in a Global Context: The New Urban Colonialism. Gentrification in a Global Context. London: Routledge.</p>
<p>Autor, D. H., Palmer, C. J., Pathak, P. A. (2017), Gentrification and the Amenity Value of Crime Reductions: Evidence from Rent Deregulation, National Bureau of Economic Research 23914</p>
<p>BBC News. (2021). London population: Why so many people leave the UK's capital. [online] Available at: https://www.bbc.co.uk/news/uk-47529562 [Accessed 20 April 2021].</p>
<p>Bedingfield, W. (2019). How dark mode took over our screens. Wired UK. Available at: https://www.wired.co.uk/article/google-chrome-dark-mode-design (Accessed: 26 May 2021).</p>
<p>Brantingham, P. L. and Brantingham, P. J. (1997). Mapping Crime for Analytic Purposes: Location Quotients, Counts, and Rates. in Crime Mapping and Crime Prevention. Crime Prevention Studies. Criminal Justice Press.</p>
<p>Goldenberg, R. (2017). Responsive scrollytelling best practices. The Pudding. Available at: https://pudding.cool/process/responsive-scrollytelling (Accessed: 25 May 2021).</p>
<p>Iacoviello, M., Neri, S. (2010) Housing Market Spillovers: Evidence from an Estimated DSGE Model, American Economic Journal: Macroeconomics 2(2) 125-164</p>
<p>Lützeler R (2008) Population increase and ‘new-build gentrification’ in central Tokyo. Erdkunde 62(4): 287–299.
MacDonald, Z. (1998). The Under-Reporting of Property Crime: A Microeconometric Analysis, p. 17. Available at: https://www2.le.ac.uk/departments/economics/research/repec/lec/lpserc/tmppserc98-6.pdf.</p>
<p>McDonald, S. (1986). Does Gentrification Affect Crime Rates? Crime and Justice, 8, 163-201</p>
<p>Mekhatria, M. (2020). Data science and Highcharts: linear regression Highcharts, 21 April. Available at: https://www.highcharts.com/blog/tutorials/data-science-and-highcharts-linear-regression/ (Accessed: 13 May 2021).</p>
<p>Newburn, T. (2016). Social Disadvantage, Crime, and Punishment. in Dean, H. and Platt, L. (eds) Social Advantage and Disadvantage. Oxford University Press, pp. 322–340. doi: 10.1093/acprof:oso/9780198737070.003.0016.</p>
<p>O’Sullivan, Arthur. (2005) Gentrification and Crime. Journal of Urban Economics 57:73–85.</p>
<p>rubycollyer (2020). ORANGY?. Available at: https://www.colourlovers.com/palette/4806319/ORANGY (Accessed: 12 May 2021).</p>
<p>Tarozzi, Massimiliano & Rapanà, Francesca & Ghirotto, Luca. (2013). Ambiguities of Citizenship. Reframing the Notion of Citizenship Education. Ricerche di Pedagogia e Didattica. 8. 201-218.</p>
</div>
</div>
</div>
<!--libraries-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- charts -->
<script charset="utf-8" src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jstat@latest/dist/jstat.min.js"></script>
<!-- maps -->
<link href='https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css' rel='stylesheet' />
<script src='https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js'></script>
<script src='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.css' rel='stylesheet' />
<!-- custom JS -->
<script src="script.js" type="text/javascript"></script>
</body>
</html>