-
Notifications
You must be signed in to change notification settings - Fork 0
/
dc.html
253 lines (221 loc) · 13.7 KB
/
dc.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
<!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">
<title>DC Race, Wealth, and Inequality</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://webfonts.brand.ucsb.edu/webfont.min.css" rel="stylesheet">
</head>
<style>
.avenir-light {
font-family:Avenir, "Century Gothic", sans-serif;
font-weight:100;
font-style:normal;
}
body {
color: #1A1B1D;
font-family: Avenir, "Century Gothic", sans-serif;
}
#wealth-race
{
background-color: #f86c5b;
padding-top: 5vh;
}
#header {
background-color: #f86c5b;
padding-top: 30vh;
text-align: right;
padding-right: 5vw;
padding-left: 5vw;
}
#header h1 {
color: white;
padding-top: 15vh;
}
img {
max-width: 30vw;
}
#red {
background-color: #f86c5b;
padding: 10%;
}
#red h2 {
color: white;
text-align: center;
}
#red h4 {
text-align: center;
}
#race-in-district .row{
padding-top: 10%;
padding-bottom: 10%;
}
#wealth-race h3{
color: white;
text-align: center;
}
#wealth-race {
padding-top: 10vh;
padding-bottom: 10vh;
}
#deserts {
background-color: #f86c5b;
}
a {
color: #1A1B1D;
}
</style>
<body>
<div class="row" id="header">
<div class="col-lg-4 col-md-4 col-sm-4">
<img src="assets/images/white-dc.png"/>
</div>
<div class="col-lg-8 col-md-8 col-sm-4" style="padding-right: 5vw;">
<h1>Race, Wealth, and Inequality in the Nation’s Capital</h1>
</div>
</div>
<section id="red">
<div class="col-lg-12 col-md-12 col-sm-12">
<h2>DC Has the Largest Wealth Disparity in the US</h2>
</div>
<br />
<br />
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">
<h4>The <strong>Top 20% Richest</strong> Households in DC Have <strong>29</strong> Times More Income Than The <strong>Poorest 20%</strong>.</h4>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<h4>White Households in DC Have a Median Net Worth <strong>81 Times</strong> Greater than Black Households.</h4>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<h4>The Typical Black Household Has <strong>$2,100</strong> in Liquid Assets. The Typical White Household has <strong>$65,000</strong>.</h4>
</div>
</div>
<br />
</section>
<section id="race-in-district">
<div class="row">
<div class="col-lg-5 col-md-5" style="padding-left: 10vw; ">
<script src="//my.visme.co/visme-embed.js"></script><div class="visme_d" data-url="g788p6j8-population-share-by-race" data-w="800" data-h="550" data-domain="my"></div><p style="width:142px !important;border-radius:3px !important;padding:3px !important;font-size:12px !important;font-family:Arial, sans-serif !important;color:#314152 !important;white-space:nowrap !important"></p>
</div>
<div class="col-lg-5 col-md-5" style="padding-left:10vw; ">
<h2>Race in the District</h2>
<p>DC has historically had a higher proportion of Black people than the US population at large, both due to the legacy of slavery that first brought Black people to the District of Columbia and the long history of racist landownership and zoning policies. Knowledge of the racial demographics of DC is important in understanding the impact of systematic racism and generational poverty that exist in the city.</p>
</div>
</div>
</section>
<br/>
<br/>
<div class="row" id="wealth-race">
<div class="col-md-12">
<h3>Racial Breakdown of Wealth and Debt in DC </h3>
</div>
<br/>
<br/>
<div class="col-lg-4 col-md-4">
<script src="//my.visme.co/visme-embed.js"></script><div class="visme_d" data-url="pv66ej7o-comparison-of-white-and-non-white-household-median-net-worth" data-w="800" data-h="800" data-domain="my"></div><p style="width:142px !important;border-radius:3px !important;padding:3px !important;font-size:12px !important;font-family:Arial, sans-serif !important;color:#314152 !important;white-space:nowrap !important"></p>
</div>
<div class="col-lg-4 col-md-4 ">
<script src="//my.visme.co/visme-embed.js"></script><div class="visme_d" data-url="vdkk4q9d-percentage-of-households-with-various-dept-types" data-w="800" data-h="800" data-domain="my"></div><p style="width:142px !important;border-radius:3px !important;padding:3px !important;font-size:12px !important;font-family:Arial, sans-serif !important;color:#314152 !important;white-space:nowrap !important"></p>
</div>
<div class="col-lg-4 col-md-4 ">
<script src="//my.visme.co/visme-embed.js"></script><div class="visme_d" data-url="6xyy18y7-comparison-of-median-nonhousing-debt-for-white-and-non-white-households" data-w="800" data-h="800" data-domain="my"></div><p style="width:142px !important;border-radius:3px !important;padding:3px !important;font-size:12px !important;font-family:Arial, sans-serif !important;color:#314152 !important;white-space:nowrap !important"></p></div>
</div>
<br/>
<br/>
<div class="row" id="race-neighborhood" style="padding-bottom: 2.5vh; padding-top: 10vh;">
<br />
<div class="col-lg-6 col-md-6 col-sm-8" style="padding-left: 10vw; padding-right: 2.5vw; ">
<h3>Race by Neighborhood</h3>
<p>DC has a very clear divide in the racial breakdown of every neighborhood. Black people have been pushed out of the city center due to the gentrification of low income areas. Because the racial wealth gap in DC is so high, this means that Black residents are being displaced at a rate much higher than the majority of cities in the US. The racial divide in neighborhoods is clear, and the disparity in resources available in low income areas contribute to generational poverty. </p>
</div>
<div class="col-lg-6 col-md-6 col-sm-4" style="padding-left: 2.5vw; padding-right: 10vw; ">
<style>.embed-container {position: relative; padding-bottom: 80%; height: 0; max-width: 100%;} .embed-container iframe, .embed-container object, .embed-container iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%;} small{position: absolute; z-index: 40; bottom: 0; margin-bottom: -15px;}</style><div class="embed-container"><iframe width="500" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" title="Predominantly black areas of DC" src="//learngis1.maps.arcgis.com/apps/Embed/index.html?webmap=9f9041a44b264f42aa1fcfa26384b9ad&extent=-77.3136,38.8385,-76.7156,39.0585&home=true&zoom=true&previewImage=false&scale=true&legend=true&disable_scroll=true&theme=light"></iframe></div>
</div>
</div>
<br />
<br />
<div class="row" id="income-neighborhood" style="padding-bottom: 10vh; padding-top: 2.5vh;">
<div class="col-lg-6 col-md-6 col-sm-4" style="padding-left: 10vw; padding-right: 2.5vw; ">
<style>.embed-container {position: relative; padding-bottom: 80%; height: 0; max-width: 100%;} .embed-container iframe, .embed-container object, .embed-container iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%;} small{position: absolute; z-index: 40; bottom: 0; margin-bottom: -15px;}</style><div class="embed-container"><iframe width="500" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" title="income map" src="//learngis1.maps.arcgis.com/apps/Embed/index.html?webmap=c2774c85a7a84fc18bbac44c30b4d66c&extent=-77.3136,38.7288,-76.7156,39.0585&home=true&zoom=true&previewImage=false&scale=true&legend=true&disable_scroll=true&theme=light"></iframe></div>
</div>
<div class="col-lg-6 col-md-6 col-sm-8" style="padding-left: 2.5vw; padding-right: 10vw; ">
<h3>Income by Neighborhood</h3>
<p>This map, combined with the knowledge of income inequality and racial breakdown of neighborhoods, shows just how clear the racial wealth divide is across DC. 38% of DC residents are living in areas that are actively being gentrified, with Black residents at the highest risk of being displaced. As neighborhoods gentrify, Black residents are forced to move across the Anacostia River, to an area of DC that lacks essential resources. </p>
</div>
</div>
<section id="deserts">
<br />
<br />
<div class="row" style="padding-top: 5vh;">
<div class="col-12">
<h3 style="text-align: center;">Lack of Resources in Predominently Black Areas</h3>
</div>
</div>
<br /><br />
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4" style="padding-left: 5vw; padding-right: 2vw; ">
<h4 style="text-align: center; color: white;">Grocery Store Locations</h4>
<br />
<style>.embed-container {position: relative; padding-bottom: 80%; height: 0; max-width: 100%;} .embed-container iframe, .embed-container object, .embed-container iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%;} small{position: absolute; z-index: 40; bottom: 0; margin-bottom: -15px;}</style><div class="embed-container"><iframe width="500" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" title="Grocery Store Locations" src="//learngis1.maps.arcgis.com/apps/Embed/index.html?webmap=52212986de5948ce95aaf12d6d269690&extent=-77.1705,38.82,-76.8715,38.9848&home=true&zoom=true&previewImage=false&scale=true&disable_scroll=true&theme=light"></iframe></div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4" style="padding-left: 2vw; padding-right: 2vw; ">
<br /><br />
<p style="text-align: center;">Anacostia, a predominently Black, low income area, suffers from a lack of resources that compound the racial wealth gap. Anacostia is a food desert, meaning that grocery stores are not accessible by foot or public transportation and the majority of the population do not have a vehicle. The same area is also a healthcare desert, with very little access to hospitals and essential care.
The lack of health services is compounded by a lack of access to public transportation through most of Anacostia, which has caused the effects of Covid to be much more devastating to the community.
</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-4" style="padding-left: 2vw; padding-right: 5vw; ">
<h4 style="text-align: center; color: white;">Hospital Locations</h4>
<br />
<style>.embed-container {position: relative; padding-bottom: 80%; height: 0; max-width: 100%;} .embed-container iframe, .embed-container object, .embed-container iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%;} small{position: absolute; z-index: 40; bottom: 0; margin-bottom: -15px;}</style><div class="embed-container"><iframe width="500" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" title="DC Hospitals" src="//learngis1.maps.arcgis.com/apps/Embed/index.html?webmap=6388cc6c476e4f4caa09bca68dadc73e&extent=-77.1815,38.8354,-76.8824,39.0002&home=true&zoom=true&previewImage=false&scale=true&disable_scroll=true&theme=light"></iframe></div>
</div>
</div>
<br />
<br />
</section>
<section id="call-action">
<div class="row" style="padding-top: 10vh;">
<div class="col-12">
<h3 style="text-align: center;">A Call to Action</h3>
</div>
</div>
<br /><br />
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4" style="padding-left: 5vw; padding-right: 2vw; text-align: center;">
<h4 style="text-align: center; ">Learn More</h4>
<a href="http://www.urban.org/sites/default/files/publication/85341/2000986-2-the-color-of-wealth-in-the-nations-capital.pdf">Color of Wealth Report</a><br>
<a href="https://www.theatlantic.com/business/archive/2016/11/racial-wealth-gap-dc/508631/">Wealth Gap</a><br>
<a href="https://www.dcpolicycenter.org/publications/food-access-dc-deeply-connected-poverty-transportation/">Food Deserts</a><br>
<a href="https://www.washingtonpost.com/local/in-the-district-gentrification-means-widespread-displacement-report-says/2019/04/26/950a0c00-6775-11e9-8985-4cf30147bdca_story.html">Gentrification in DC</a><br>
<a href="https://www.washingtonpost.com/local/the-districts-racial-and-income-divide-is-cutting-short-the-lives-of-black-residents/2019/05/14/bb5f991a-765c-11e9-bd25-c989555e7766_story.html">Health Discrepancy</a><br>
</div>
<div class="col-lg-4 col-md-4 col-sm-4" style="padding-left: 2vw; padding-right: 2vw; ">
<p style="text-align: center; ">
The racial and economic divide in DC is far more complicated than can be covered in the scope of this site. Learn more about each issue at the links on the left, and reach out to your representatives to encourage them to vote for a more equitable DC.
</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-4" style="padding-left: 2vw; padding-right: 5vw; text-align: center;">
<h4 style="text-align: center; ">Take Action</h4>
<a href="https://www.congressionalinstitute.org/contact-congress/">Call your Congressperson about DC Statehood</a><br>
<a href="https://dcoz.dc.gov/">Contact DC's Zoning Board</a><br>
<a href="https://mayor.dc.gov/">Call DC Mayor Bowser</a><br>
</div>
</div>
<br />
<br />
<br />
<br /><br />
<br />
</section>
<br />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="../../../Downloads/basic/js/jquery-3.3.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../../../Downloads/basic/js/popper.min.js"></script>
<script src="../../../Downloads/basic/js/bootstrap-4.3.1.js"></script>
</body>
</html>