-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
292 lines (265 loc) · 20.6 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
<html>
<head>
<title>Chicago Transit Project</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="container mb-4">
<div class="jumbotron mt-4">
<h1>Chicago Communities Socioeconomic Profiles</h1>
<p>This data visualization shows each neighborhood in Chicago and a profile of their socioeconomic factors. These factors include:
<ul>
<li>Percent occupied housing units with more than one person per room</li>
<li>Percent of households living below the federal poverty level</li>
<li>Percent of persons over the age of 16 years that are unemployed</li>
<li>Percent of persons over the age of 25 years without a high school education</li>
<li>Percent of the population under 18 or over 64 years of age (i.e., dependency)</li>
<li>Community Area Per capita income is estimated as the sum of tract-level aggregate incomes divided by the total population</li>
<li>Score that incorporates each of the six selected socioeconomic indicators</li>
</ul>
Data is from the <a href="https://data.cityofchicago.org/Health-Human-Services/Census-Data-Selected-socioeconomic-indicators-in-C/kn9c-c2s2" target="blank">City of Chicago.</a>
</p>
</div>
<div id="community" class="mt-4"></div>
<button type="button" class="btn btn-outline-info mt-1" onClick="getData(78);">All of Chicago</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(1);">Rogers Park</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(2);">West Ridge</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(3);">Uptown</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(4);">Lincoln Square</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(5);">North Center</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(6);">Lake View</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(7);">Lincoln Park</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(8);">Near North Side</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(9);">Edison Park</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(10);">Norwood Park</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(11);">Jefferson Park</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(12);">Forest Glen</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(13);">North Park</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(14);">Albany Park</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(15);">Portage Park</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(16);">Irving Park</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(17);">Dunning</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(18);">Montclaire</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(19);">Belmont Cragin</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(20);">Hermosa</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(21);">Avondale</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(22);">Logan Square</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(23);">Humboldt park</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(24);">West Town</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(25);">Austin</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(26);">West Garfield Park</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(27);">East Garfield Park</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(28);">Near West Side</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(29);">North Lawndale</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(30);">South Lawndale</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(31);">Lower West Side</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(32);">Loop</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(33);">Near South Side</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(34);">Armour Square</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(35);">Douglas</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(36);">Oakland</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(37);">Fuller Park</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(38);">Grand Boulevard</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(39);">Kenwood</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(40);">Washington Park</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(41);">Hyde Park</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(42);">Woodlawn</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(43);">South Shore</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(44);">Chatham</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(45);">Avalon Park</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(46);">South Chicago</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(47);">Burnside</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(48);">Calumet Heights</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(49);">Roseland</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(50);">Pullman</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(51);">South Deering</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(52);">East Side</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(53);">West Pullman</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(54);">Riverdale</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(55);">Hegewisch</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(56);">Garfield Ridge</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(57);">Archer Heights</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(58);">Brighton Park</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(59);">McKinley Park</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(60);">Bridgeport</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(61);">New City</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(62);">West Elsdon</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(63);">Gage Park</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(64);">Clearing</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(65);">West Lawn</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(66);">Chicago Lawn</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(67);">West Englewood</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(68);">Englewood</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(69);">Greater Grand Crossing</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(70);">Asheburn</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(71);">Auburn Gresham</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(72);">Beverly</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(73);">Washington Height</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(74);">Mount Greenwood</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(75);">Morgan Park</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(76);">O'Hare</button>
<button type="button" class="btn btn-outline-primary mt-1" onClick="getData(77);">Edgewater</button>
<div class="mt-5">
<div class="jumbotron mt-4">
<h1>Hardship Index and Per Capita Income</h1>
<p>These two data visualizations show communities with a Hardship Index under 20 (top graph) and communities with a Hardship Index above 78 (bottom graph) alongside their per capita income. Data is from the <a href="https://data.cityofchicago.org/Health-Human-Services/Census-Data-Selected-socioeconomic-indicators-in-C/kn9c-c2s2"
target="blank">City of Chicago.</a>
</p>
</div>
<div class='tableauPlaceholder' id='viz1588616415246' style='position: relative'><noscript><a href='#'><img
alt=' '
src='https://public.tableau.com/static/images/hw/hw1_15886163602110/Dashboard1/1_rss.png'
style='border: none' /></a></noscript><object class='tableauViz' style='display:none;'>
<param name='host_url' value='https%3A%2F%2Fpublic.tableau.com%2F' />
<param name='embed_code_version' value='3' />
<param name='site_root' value='' />
<param name='name' value='hw1_15886163602110/Dashboard1' />
<param name='tabs' value='no' />
<param name='toolbar' value='yes' />
<param name='static_image'
value='https://public.tableau.com/static/images/hw/hw1_15886163602110/Dashboard1/1.png' />
<param name='animate_transition' value='yes' />
<param name='display_static_image' value='yes' />
<param name='display_spinner' value='yes' />
<param name='display_overlay' value='yes' />
<param name='display_count' value='yes' />
<param name='filter' value='publish=yes' /></object></div>
<script type='text/javascript'>
var divElement = document.getElementById('viz1588616415246');
var vizElement = divElement.getElementsByTagName('object')[0];
if (divElement.offsetWidth > 800) {
vizElement.style.width = '1000px';
vizElement.style.height = '827px';
} else if (divElement.offsetWidth > 500) {
vizElement.style.width = '1000px';
vizElement.style.height = '827px';
} else {
vizElement.style.width = '100%';
vizElement.style.height = '727px';
}
var scriptElement = document.createElement('script');
scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js';
vizElement.parentNode.insertBefore(scriptElement, vizElement);
</script>
</div>
<div class="mt-5">
<div class="jumbotron mt-4">
<h1>CTA 'L' Ridership by Station</h1>
<p>Combining data from the <a href="https://data.cityofchicago.org/Transportation/CTA-System-Information-List-of-L-Stops/8pix-ypme" target="_blank">CTA's List of 'L' Stops</a> and <a href="https://data.cityofchicago.org/Transportation/CTA-Ridership-L-Station-Entries-Monthly-Day-Type-A/t2rn-p8d7"
target="_blank">'L' Station Monthly Averages and Totals</a> datasets, we can see which stations (and therefore, which neighborhoods) have the highest and lowest 'L' train ridership.
</p>
<p>The top visualization shows stations with less than 1,500 weekday trips. The bottom visualization depicts stations with greater than 6,000 weekday trips. Express Purple Line stops were excluded for simplicity. Grey bars denote multiple line
colors per station.
</p>
<p>All data were obtained from the <a href="https://data.cityofchicago.org/Transportation/CTA-List-of-CTA-Datasets/pnau-cf66" target="blank">City of Chicago.</a>
</p>
</div>
<!-- < 1500 Weekday Trips on Average -->
<div class='tableauPlaceholder' id='viz1589472752287' style='position: relative'>
<noscript><a href='#'><img alt=' '
src='https://public.tableau.com/static/images/tr/transpo_2/AveWeeklyRides1_5k/1_rss.png'
style='border: none' /></a></noscript>
<object class='tableauViz' style='display:none;'>
<param name='host_url' value='https%3A%2F%2Fpublic.tableau.com%2F' />
<param name='embed_code_version' value='3' />
<param name='site_root' value='' />
<param name='name' value='transpo_2/AveWeeklyRides1_5k' />
<param name='tabs' value='no' />
<param name='toolbar' value='yes' />
<param name='static_image'
value='https://public.tableau.com/static/images/tr/transpo_2/AveWeeklyRides1_5k/1.png' />
<param name='animate_transition' value='yes' />
<param name='display_static_image' value='yes' />
<param name='display_spinner' value='yes' />
<param name='display_overlay' value='yes' />
<param name='display_count' value='yes' />
</object>
</div>
<script type='text/javascript'>
var divElement = document.getElementById('viz1589472752287');
var vizElement = divElement.getElementsByTagName('object')[0];
vizElement.style.width = '100%';
vizElement.style.height = (divElement.offsetWidth * 0.75) + 'px';
var scriptElement = document.createElement('script');
scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js';
vizElement.parentNode.insertBefore(scriptElement, vizElement);
</script>
<!-- > 6000 Weekday Trips on Average -->
<div class='tableauPlaceholder' id='viz1589472905625' style='position: relative'>
<noscript><a href='#'><img alt=' '
src='https://public.tableau.com/static/images/tr/transpo/AveWeeklyRides6k/1_rss.png'
style='border: none' /></a></noscript>
<object class='tableauViz' style='display:none;'>
<param name='host_url' value='https%3A%2F%2Fpublic.tableau.com%2F' />
<param name='embed_code_version' value='3' />
<param name='site_root' value='' />
<param name='name' value='transpo/AveWeeklyRides6k' />
<param name='tabs' value='no' />
<param name='toolbar' value='yes' />
<param name='static_image'
value='https://public.tableau.com/static/images/tr/transpo/AveWeeklyRides6k/1.png' />
<param name='animate_transition' value='yes' />
<param name='display_static_image' value='yes' />
<param name='display_spinner' value='yes' />
<param name='display_overlay' value='yes' />
<param name='display_count' value='yes' />
<param name='filter' value='publish=yes' />
</object>
</div>
<script type='text/javascript'>
var divElement = document.getElementById('viz1589472905625');
var vizElement = divElement.getElementsByTagName('object')[0];
vizElement.style.width = '100%';
vizElement.style.height = (divElement.offsetWidth * 0.75) + 'px';
var scriptElement = document.createElement('script');
scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js';
vizElement.parentNode.insertBefore(scriptElement, vizElement);
</script>
</div>
<div class="mt-5">
<div class="jumbotron mt-4">
<h1>Hardship Index and 'L' Lines</h1>
<p>This map uses City of Chicago
<a href="https://data.cityofchicago.org/Facilities-Geographic-Boundaries/Boundaries-Neighborhoods/bbvz-uum9" target="blank">neighborhood geospatial data</a> and <a href="https://data.cityofchicago.org/widgets/vmyy-m9qj">'L' station geospatial data</a> with the <a href="https://data.cityofchicago.org/Health-Human-Services/Census-Data-Selected-socioeconomic-indicators-in-C/kn9c-c2s2" target="blank">socioeconomic data</a> from above.
</p>
<p>The map is sectioned into different neighborhoods that are color-coded by Hardship Index (neighborhood name and hardhip index are shown on hover). The 'L' lines are overlayed to illustrate different communities' access to the transit lines.
</p>
</div>
<div class='tableauPlaceholder' id='viz1591285478456' style='position: relative'><noscript><a href='#'><img
alt=' '
src='https://public.tableau.com/static/images/ma/map_15912061763100/Dashboard1/1_rss.png'
style='border: none' /></a></noscript><object class='tableauViz' style='display:none;'>
<param name='host_url' value='https%3A%2F%2Fpublic.tableau.com%2F' />
<param name='embed_code_version' value='3' />
<param name='site_root' value='' />
<param name='name' value='map_15912061763100/Dashboard1' />
<param name='tabs' value='no' />
<param name='toolbar' value='yes' />
<param name='static_image'
value='https://public.tableau.com/static/images/ma/map_15912061763100/Dashboard1/1.png' />
<param name='animate_transition' value='yes' />
<param name='display_static_image' value='yes' />
<param name='display_spinner' value='yes' />
<param name='display_overlay' value='yes' />
<param name='display_count' value='yes' /></object></div>
<script type='text/javascript'>
var divElement = document.getElementById('viz1591285478456');
var vizElement = divElement.getElementsByTagName('object')[0];
if (divElement.offsetWidth > 800) {
vizElement.style.width = '1000px';
vizElement.style.height = '827px';
} else if (divElement.offsetWidth > 500) {
vizElement.style.width = '1000px';
vizElement.style.height = '827px';
} else {
vizElement.style.width = '100%';
vizElement.style.height = '727px';
}
var scriptElement = document.createElement('script');
scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js';
vizElement.parentNode.insertBefore(scriptElement, vizElement);
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.6.0/d3.min.js "></script>
<script type="text/javascript " src="hw1.js "></script>
</body>
</html>