-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
119 lines (86 loc) · 6.45 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Residential demolitions in Detroit, MI</title>
<!-- Should external libraries be updated? -->
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
<link href="https://fonts.googleapis.com/css?family=Roboto|PT+Sans" rel="stylesheet" type="text/css" />
<link href="css/styles.css" rel="stylesheet" />
<style>
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div id="content" class="col-md-3 py-0 overflow-scroll" style="height: 100vh;">
<p>The map represents the dynamics of demolitions in Detroit.</p>
<h2>Background</h2>
<p>“Shrinking cities today are focused more on demolition than construction strategies” (Ryan 2012, xiii).
<br>After years of disinvestment and filing for Chapter 9 bankruptcy, in 2013 major institutions in Detroit started to restructure.
As one of results, in November 2013, the Detroit Blight Removal Task Force, in partnership with
Michigan Nonprofit Association, Data Driven Detroit, and Loveland Technologies, conducted a physical survey that gathered property condition data for all 380,000 parcels in the entire city.
The project was called Motor City Mapping. The reasoning for undertaking the project was the lack of
“comprehensive, single database that accurately defined the current scope of blight in Detroit” <a href="https://www.documentcloud.org/documents/1173946-detroit-blight-removal-task-force-plan-may-2014">Detroit Blight Removal Task Force</a>.
The previous survey dated back to 2009, was not comprehensive and was not updated since.
<br>As a result of Motor City Mapping, “40,077 structures are recommended for removal as they meet the Task Force definition of blight (residential and non-residential structures).
The Department of Demolition is undertaking this task. Many blighted structures are being demolished. The built environment is changing significantly, and the city fabric is becoming less dense.
<a href=""></a>
<h3>Sources</h3>
<br>
<ul>
<li> Ryan, Brent D. Design After Decline: How America Rebuilds Shrinking Cities. Philadelphia: University of Pennsylvania Press, Inc, 2012.
</li>
</ul>
</p>
<h2>Data sources and manipulation</h2>
<p>This map was done using Census Blocks TIGER/Shaperfile obtained from <a href="https://www.census.gov/geographies/mapping-files/2010/geo/tiger-line-file.html">US Census</a>.
<br>Housing Units Estimates are obtained from <a href="https://data.census.gov/map?g=050XX00US26163$1400000&tid=DECENNIALPL2020.P1&layer=VT_2020_140_00_PY_D1&mode=thematic&loc=42.3350,-82.9896,z10.4068">American Community Survey</a>.
The combined file can be downloaded <a href="data/ACSDP5Y.DP05-Data2014-2021.csv" target="_blank">here</a>.
<br>The Neighborhoods' boundaries is obtained from <a href="https://data.detroitmi.gov/datasets/neighborhoods/explore">The City of Detroit Open Data Portal</a>.
<br>The demolitions datasets is acquired from <a href="https://data.detroitmi.gov/datasets/neighborhoods/explore">The City of Detroit Open Data Portal</a>.
<br>The colors were picked from the <a href="https://www.100abandonedhouses.com">100 abandoned houses</a> photo using <a href="https://coolors.co/ ">Coolors.co</a>.
</p>
<p>This map utilizes Leaflet.js, chroma.js, the leaflet.heat and jQuery. The web page uses Bootstrap for responsive design.
<br> Map authored by Irina Golovitskaya for NewMapPlus.
<br> <a href="https://irinagolovitskaya.github.io">Digital portfolio</a>
</p>
<div class="footer">New Maps Plus | March, 2023</div>
<!-- closing up the first column -->
</div>
<!-- the second column with the map -->
<div class="col-md-9 p-0">
<div id="map"></div>
</div>
<!-- ui slider -->
<div id="ui-controls">
<label>
<span class="min">2014</span>
<span class="max">2023</span>
<input type="range" min="2014" , max="2023" , value="2014" , step="1" , class="year-slider" />
</label>
</div>
<!-- closing up the container-fluid -->
</div>
<!-- closing up the row -->
</div>
<!-- Leaflet JS -->
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.heat/0.2.0/leaflet-heat.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.1/papaparse.min.js"
integrity="sha512-EbdJQSugx0nVWrtyK3JdQQ/03mS3Q1UiAhRtErbwl1YL/+e2hZdlIcSURxxh7WXHTzn83sjlh2rysACoJGfb6g=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.1.2/chroma.min.js"
integrity="sha512-8TVPS0EFkkmtT6yPb5K4csnSt3tjbKRrs0F8gvTNKv2OxOcwDO7+Klkz86gMVrzfqtZos5N2a+k+r9D+hlccmQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script
src="https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.3.1/leaflet-omnivore.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>