-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
281 lines (231 loc) · 18.8 KB
/
Copy pathindex.html
File metadata and controls
281 lines (231 loc) · 18.8 KB
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
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<script src="js/rastertiles.js"></script>
<!-- Fonts -->
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<!-- Semantic -->
<!-- <script src="semantic/dist/semantic.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.5.0/semantic.min.js" integrity="sha512-Xo0Jh8MsOn72LGV8kU5LsclG7SUzJsWGhXbWcYs2MAmChkQzwiW/yTQwdJ8w6UA9C6EVG18GHb/TrYpYCjyAQw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- <link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css"> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.5.0/semantic.min.css" integrity="sha512-KXol4x3sVoO+8ZsWPFI/r5KBVB/ssCGB5tsv2nVOKwLg33wTFP3fmnXa47FdSVIshVTgsYk/1734xSk9aFIa4A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- <script src="semantic/dist/components/dropdown.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.5.0/components/dropdown.min.js" integrity="sha512-PD2QRjH0s7TFz8Oicpi4UFJBdKP0vFeYpmNPsEoNDHfG3QcGLTs8XUrkXWEQXX2Q0g+1oEwvow27TM2VfPdTxw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- <link rel="stylesheet" type="text/css" href="semantic/dist/components/dropdown.min.css"> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.5.0/components/dropdown.min.css" integrity="sha512-tdyzfjYDk2OR9L10jvzzuGUB0Rvl5fyMW/Z8yfbYyyENfuXxtcDtEq7d/PdiA0hzQzXjWwvZasjEp8Joli2tkw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Range Slider -->
<script src="js/d3-simple-slider-wfx.js"></script>
<!-- Axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<!-- D3 -->
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="js/d3v3.js"></script>
<!-- Mapbox -->
<link href="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js"></script>
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.1.0/mapbox-gl-compare.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.1.0/mapbox-gl-compare.css' type='text/css' />
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
<link href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" rel="stylesheet">
<!-- CARTO -->
<script src="https://libs.cartocdn.com/carto-vl/v1.4.4/carto-vl.min.js"></script>
<!-- <script src="dist/carto-vl.js"></script> -->
<link href="https://carto.com/developers/carto-vl/v1.4.4/examples/maps/style.css" rel="stylesheet">
<!-- City params -->
<script src="js/cities.js"></script>
<!-- Custom Styling -->
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body >
<div class="ui dimmerwrapper ">
<div class="ui page dimmer active">
<div class="content ui very padded container introSegment">
<h1 class="ui header introHeader">The Legacy of Redlining:
<br>Residential Segregation in 147 American Cities</h1>
<p class="ui introHeader">In response to foreclosure risk during the Great Depression, the US Home Owners' Loan Corporation (HOLC) was founded in 1930 to map city-level perceived lending risk for home mortgage refinancing. In these “residential security” maps, black and other minority neighborhoods were often designated as higher risk neighborhoods. As minority homeownership was considered to threaten property values, these maps were used to maintain racial segregation.
</p>
<br>
<p class="ui introHeader">Notably, homeowners in class D (“high risk”) areas were systematically denied mortgage bailouts. Residential security maps were effectively used for “redlining” - the widespread illegal practice of denying home loans based on race - and therefore were instrumental as to institutionalize the practice.
</p>
<br>
<p class="ui introHeader">Home ownership tends to have long-lasting effects over many generations. This interactive map illustrates the historical socioeconomic development of the neighborhoods categorized by the HOLC in 147 American cities between 1930s and 2016.</p>
<p class="ui introHeader">This site currently only (really) works in Chrome and on a computer. Safari and Firefox support are on the way!</p>
<!-- <div class="ui primary button">Add</div> -->
<div id='undim'class="ui disabled big basic loading inverted button introButton"><b>Enter</b></div>
</div>
</div>
<div class = 'container' id='mapcontainer'>
<div id='left' class='map'></div>
<div id='right' class='map'></div>
</div>
<div class="container" id="menucontainer">
<div class="ui menu fixed secondary">
<div class="ui simple dropdown item">
<h5 style="margin-bottom: 0px"><i class="sidebar icon" ></i> Menu</h5>
<div class="ui menu myMenu secondary">
<div class="item compact homeIcon" data-value="home">
Home
</div>
<div class="item compact infoIcon" data-value="info">
About
</div>
<div class="item compact dataIcon" data-value="info">
Data
</div>
<div class="ui divider"></div>
<div class="item compact disabled legendIcon" data-value="legend">
<div class='left aligned content'>
<h5 class=" smallHeader">
<!-- <i class="fa fa-info-circle "></i> -->
HOLC Class
</h5>
<ul class="ui list">
<div class="item">
<i class="large square icon classA"></i>Grade A: Best
</div>
<div class="item">
<i class="large square icon classB"></i>Grade B: Still Desirable
</div>
<div class="item">
<i class="large square icon classC"></i>Grade C: Definitely Declining
</div>
<div class="item">
<i class="large square icon classD"></i>Grade D: Hazardous
</div>
</ul>
<font size="1px">Source: HOLC Residential Security Maps from Digital Scholarship Lab</font>
</div>
<br>
<div class='left aligned content censusLegend'>
<h5 class="header smallHeader ">
<!-- <i class="fa fa-info-circle "></i> -->
Census Category
</h5>
</div>
<font size="1px">Source: NHGIS Decennial census and ACS </font>
</div>
</div>
</div>
</div>
</div>
<!-- Widget Panel -->
<!-- <div id ='info'> -->
<div id ='info' >
<h5> City</h5>
<div id = "cityDropdown1" class="ui fluid search selection dropdown">
<input type="hidden" name="year">
<i class="dropdown icon"></i>
<div class="text">Cleveland</div>
<div id='cityDropdown' class="menu"></div>
</div>
<h5 > Census Category</h5>
<div id = "censusDropdown1" class="ui fluid search selection dropdown">
<input type="hidden" name="year">
<i class="dropdown icon"></i>
<div class="text" >% Black</div>
<div id='censusDropdown' class="menu"></div>
</div>
<h5 > Year</h5>
<div >
<div id="yearSlider"></div>
</div>
<div class='infoDesc1'> </div>
<div class ='boxPlot'></div>
<div class='infoDesc2'> </div>
<div class ='historicalBoxPlot'></div>
<div >
<font size="1px">**The lower and upper percentiles are 40% and 60% for legibility.</font>
</div>
</div>
<!-- Info message -->
<div class="ui message floating transition hidden infoSegment" id='infoMessage'>
<i class="large close red icon"></i>
<h5>History of the HOLC "Redlining" Maps</h5>
<p>The Home Owners' Loan Corportation (HOLC) was a New Deal era agency that helped provide emergency bailouts to banks and homeowners during the 1930s mortgage crisis that resulted from the Great Depression. The HOLC created credit worthiness maps for local banks and the Federal Housing Administration that indicated the lending risk by neighborhood. Since risk is based on property values as well as individual credit worthiness, the agency relied on local banks and realtors in 239 cities to appraise neighborhoods based for various levels of economic conditions, categorizing them into "Best", "Still Desirable", "Definitely Declining", and "Hazardous".</p>
<p>Guidelines for lenders are:
<ul>
<li>"The <b>First grade or A areas</b> are 'hot spots'; they are not fully built up. In demand during good times and bad.</li>
<li>"The <b>Second grade or B areas</b>, as a rule, are completely developed."</li>
<li>"The <b>Third grade or C areas</b> are characterized by age, obsolescence, and change of style; expiring restrictions or lack of them; infiltration of a lower grade population."</li>
<li>"The <b>fourth grade or D areas</b>...are characterized by detrimental influences in a pronounced degree, undesirable population or an infiltration of it...Some mortgage lenders may refuse to make loans in these neighborhoods and others will lend only on a conservative basis."</li>
</ul>(FHLBB Division of Research and Statistics, 1937)</p>
<p>These appraisers evaluated neighborhoods based on criteria such as housing conditions, transportation access, distance to amenities and disamentiies, the economic class and status of the neighborhood's residents, and their ethnic and racial composition. (<a href='https://ncrc.org/holc/' target="_blank">NRSC, 2018</a>) The presence of minority (mostly black at the time) homeowners was considered to devalue both the property and the neighborhood; therefore, local appraisers also had an incentive to reinforce racial homogeneity.</p>
<p>Many consider the creation of these "residential security maps" to have faciliated residential <a href='https://en.wikipedia.org/wiki/Redlining' target="_blank">redlining</a> - the widespread practice of illegally denying home loans (and the opportunity to build wealth) based on race. The influence of these maps is debated: some argue that these maps directly bolstered governmental redlining (<a href='https://books.google.com/books/about/Crabgrass_Frontier.html?id=XDQC1w1LIFMC' target="_blank">Jackson, 1987</a>, <a href='http://www.hup.harvard.edu/catalog.php?isbn=9780674018211' target="_blank">Massey and Denton, 1993</a>), while others say that, since these maps were made after 1936, when most of the HOLC bailout loans were provided, there is no direct impact (<a href='https://repository.upenn.edu/cgi/viewcontent.cgi?article=1008&context=cplan_papers' target="_blank">Hillier, 2003a</a>, <a href='http://journals.sagepub.com/doi/abs/10.1177/0096144203029004002' target="_blank">Hillier, 2003b</a>). However, it is undeniable that there was (and <a href='https://www.revealnews.org/article/for-people-of-color-banks-are-shutting-the-door-to-homeownership/' target='_blank'>continues to be</a>) institutional discrimination against minority borrowers. These maps reflect the perceived lending risk held by banks and other real estate actors.</p>
<p>The <a href='https://www.gpo.gov/fdsys/pkg/STATUTE-82/pdf/STATUTE-82-Pg73.pdf' target="_blank">1968 Fair Housing Act</a> made housing discriminination based on "race, color, religion, or national origin" a federal crime. By this point, however, the spatial structure of neighborhood segregation had already been established.</p>
<p>This map aims to show that the impact of discriminatory housing practices on the landscape of American cities and on the welfare of its residents is still seen today. Many of those neighborhoods deemed "Hazardous" or "Definitely Declining" were and remain minority areas with lower levels of income, education, and employment than their counterparts with higher HOLC grades. </p>
<h5>Data</h5>
<p>This map is indebted to the work done by the <a href='https://dsl.richmond.edu/' target="_blank">Digital Scholarship Lab</a>, who geo-referenced the original HOLC maps as well as produced the shapefiles. They have a great <a href='https://dsl.richmond.edu/panorama/renewal/#view=0/0/1&viz=cartogram' target="_blank"> interactive feature</a> of all the HOLC maps. They also have a <a href='https://dsl.richmond.edu/panorama/redlining/#loc=4/36.71/-96.93&opacity=0.8' target="_blank">project</a> mapping the impact of urban displacement due to "slum" clearance (a.k.a urban renewal) projects during the mid-20th century.</p>
<p>The historical decennial census and American Community Survey data comes from IPUMS's <a href='https://www.nhgis.org/' target="_blank">National Historical Geographic Information System</a> (NHGIS) at the University of Minnesota. Because census areas, categories, and collection methods changed every decennial census, comparison between decades is not straightforward. Here are some notes about the data used:
</p>
<ul>
<li>
Before the 1940, the census only took place in metropolitan areas. Not all of our cities have coverage in 1930.
</li>
<li>
Education information is not available until 1940.
</li>
<li>
Income information is not available until 1950.
</li>
<li>
Only starting in the 1960 census was Hispanic origin information collected. The census considers Hispanic origin not be a race but a "heritage, nationality, lineage, or country of birth". But only starting in 1990 did the Census start to separate race groups by Hispanic and non-Hispanic (for ex: Hispanic asian and non-Hispanic asian). Starting in the 1990s, I use non-Hispanic populations for White, Black, Asian, Native American, Pacific Islander, and other races.
</li>
<li>Unemployment information is not available until 1970.</li>
<li>
Until the 1970 census, the only required races were "White","Black", and "Other non-white".
</li>
<li>
In 1960 and 1970s, median household income information only exists in ranges. I've created a random uniform sample of each income range based on the number of households in each range to estmate the median income value.
</li>
<li>
All median household incomes have been inflation-adjusted from levels on the year before the census year (this is the year the information was actually collected) to 2016 levels. For instance, the 1960 census has incomes adjusted from 1959 to 2016.
</li>
<li>Staring in 2010, I use the American Community Survey - a monthly rolling survey published annually - as the longform census (containing additional questions such as education and income) was replaced by the ACS.</li>
<li>The 2010 data uses the 2008-2012 5-year American Community Survey as an unbiased estimate of 2010 statistics.</li>
<li>The 2016 data uses the 2016 1-year American Community Survey.</li>
</ul>
<p>To learn more, the US Census Bureau provides a <a href='https://www.census.gov/history/www/through_the_decades/overview/' target="_blank">historical overview</a> of each decade's census.</p>
<h5>Method</h5>
<p>The census data for HOLC zones is created through a population-weighted average of census data for each year, where the population is assumed to be proportional to the percentage overlap of the tract or block group with the HOLC zone. (This assumes that people are distributed uniformly across each census area, which of course, is not true.) As census units change size, each year's census needs to be calculated separately. Until 1980, I use the smallest geographic unit available, which is the census tract. Starting in 1990, I use census block groups.</p>
<h5>Get in touch!</h5>
<p>This project was created by <a href='https://wenfeixu.com' target = "_blank">Wenfei Xu</a>. I am a PhD candidate in urban planning at Columbia GSAPP.
</p>
<p>
<button class="ui circular mini icon button" style="background-color:#ff3700">
<a href= "https://twitter.com/iamwfx" target = "_blank"><i class="twitter icon" style="margin-right: 0px;color:white"></i></a>
</button>
<button class="ui circular mini icon button" style="background-color:#ff3700">
<a href= "mailto:xu.wenfei@gmail.com"><i class="envelope icon" style="margin-right: 0px;color:white"></i></a>
</button>
<button class="ui circular mini icon button" style="background-color:#ff3700">
<a href= "https://github.com/iamwfx" target = "_blank"><i class="github icon" style="margin-right: 0px;color:white"></i></a>
</button>
</p>
</div>
<div class="ui message floating transition hidden infoSegment" id='dataMessage'>
<i class="large close red icon"></i>
<p>The original HOLC residential security map data was created by the <a href='https://dsl.richmond.edu/' target="_blank">Digital Scholarship Lab</a>. Please reach out if you'd like a copy of my data: xu.wenfei[at]gmail.com </p>
</ul>
</div>
</div>
</body>
<footer>
<script src='js/main.js'></script>
<script src='js/box.js'></script>
<script src='js/charts.js'></script>
<script>
// (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
// (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
// m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
// })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
// ga('create', 'UA-91894646-1', 'auto');
// ga('send', 'pageview');
</script>
</footer>
</html>