forked from citrusvanilla/manhattanpopulationexplorer
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
360 lines (286 loc) · 14.5 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
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
<!DOCTYPE html>
<html lang='en'>
<head>
<!-- META -->
<meta charset='utf-8' />
<meta name='viewport' content='initial-scale=1, maximum-scale=1, user-scalable=no' />
<meta name="format-detection" content="telephone=no">
<!-- TITLE -->
<title>Manhattan Population Explorer</title>
<!-- STYLE SHEETS -->
<link href='https://fonts.googleapis.com/css?family=Montserrat:300,400,600' rel='stylesheet'>
<link rel='stylesheet' href='stylesheets/style.css' type='text/css' />
<link rel='stylesheet' href='stylesheets/d3.slider.css' type='text/css' />
<!-- D3 -->
<script src='scripts/d3.min.js'></script>
<script src='scripts/d3.slider.js'></script>
<!-- MapBox -->
<script src='https://api.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.css' rel='stylesheet' />
</head>
<body>
<!-- HEADER -->
<div id='header'>
<!-- HEADER/ABOUT-LINK -->
<div id='about-link'>
<span class='desktop'>About</span>
</div>
<!-- HEADER/LEGEND-MOBILE -->
<div id='legend-mobile'></div>
<!-- HEADER/MODES -->
<div id='modes'>
<div class='mode-selected' id='mode-story'>
<span class='desktop'>Story</span>
<span class='mobile'>Story</span>
</div>
<div class='mode' id='mode-viz'>
<span class='desktop'>Visualization</span>
<span class='mobile'>Viz</span>
</div>
<div class='mode' id='mode-stats'>
<span class='desktop'>Statistics</span>
<span class='mobile'>Stats</span>
</div>
</div>
<!-- HEADER/TITLE -->
<div id='title'>
<span class='desktop'>Manhattan Population Explorer</span>
</div>
</div>
<!-- ABOUT -->
<div class='about' id='about'>
<!-- ABOUT/CLOSE -->
<div id = 'about-close'></div>
<!-- ABOUT/CONTENT -->
<div id='about-content'>
<!-- ABOUT/CONTENT/HEADER -->
<div id = 'about-header'>Manhattan: A Tale of Two Population Extremes</div>
<!-- ABOUT/CONENT/TEXT -->
<div id = 'about-text'>
<p>
Measuring just 13 miles long by 2 miles wide, New York City's most-famous borough has a well-earned reputation for shoebox-sized apartments, shoulder-to-shoulder subway commutes, and cubicle-farm high-rises. Though the US Census provides a cozy estimate of 1.6 million people calling Manhattan 'home', the island's true population swells considerably, like clock-work, every Monday through Friday. Obtaining upper bounds on the workday population of Manhattan is no easy task, and the NYU Wagner School has <a href='https://wagner.nyu.edu/files/rudincenter/dynamic_pop_manhattan.pdf'>ballparked a peak estimate</a> of about 4 million people, representing an influx of roughly the population of Houston every workday. To put this in perspective, if Manhattan were a state, it would sit just above Oregon at <em>27th</em> on a list of U.S. states ranked by population every afternoon.
</p>
<p>
Though the upper and lower bound for Manhattan's dynamic population provides an interesting point of conversation, the question of how Manhattan's population is distributed hour-by-hour, neighborhood-by-neighborhood is of importance to urban planners, public safety managers, and armchair geographers alike. By no means does Manhattan's population spread out evenly across the length of island- one can imagine the Empire State Building being filled to the brim with inter-state workers by late morning, while at the same time much of the working-age population of Inwood has migrated away from its sleepy uptown hamlet.
Finding appropriate sources for estimating the dynamic population was part of a research project undertaken by Justin Fung while studying at Columbia University under the direction of former NYC Transportation Commissioner Lucius J. Riccio, and ultimately, a transit-based solution was found right under their feet. Considering the 'vehicle-of-choice' for most Manhattanites is one of the MTA's 6,500 stainless-steel subway cars, and that the nearly 150 stations serving Manhattan provide reasonably-uniform coverage across the island, it stood to reason that subway entrance and exit data would be a pretty good proxy for population distribution across the city.
</p>
<p>
Using the Metropolitan Transportation Authority's freely-available <a href='http://web.mta.info/developers/turnstile.html'>turnstile database</a> and <a href='https://spatialityblog.com/2010/07/08/mta-gis-data-update/'>Steven Romalewski's MTA subway data in GIS format</a>, estimates for the net flows of people in and out of Manhattan neighborhoods were made on an hour-by-hour basis both historically and for future dates. A time-series analysis of this data confirms that usage patterns are heavily dependent on time, day, and location. The visualization contained herein is the realization of a model of these flows for a hypothetical week in late Spring. As you click around Manhattan, you may uncover both obvious and not-so-obvious patterns, and perhaps even find a good time to take a stress-free bike ride around the block.
</p>
<!-- ABOUT/CONENT/TEXT/CREDITS -->
<div id='about-credits'>
<p>
<br/>Design, Development, Data & Modelling - <a href='https://www.linkedin.com/in/citrusvanilla' target='_blank'>Justin Fung</a>
<br/>Design, Layout inspiration - <a href='https://landscan.ornl.gov/' target='_blank'>Oak Ridge National Laboratory</a>, <a href='https://urbica.co' target='_blank'>Urbica Design</a>
<br/>Map engine - <a href='https://www.mapbox.com/mapbox-gl-js/' target='_blank'>Mapbox GL JS</a>
<br/>Graphing engine - <a href='https://d3js.org' target='_blank'>D3.js</a>
<br/>Github - <a href='https://github.com/citrusvanilla/manhattanpopulationexplorer' target='_blank'>@citrusvanilla</a>
</p>
</div>
</div>
</div>
</div>
<!-- SIDE BAR -->
<div id='sidebar'>
<!-- LEGEND -->
<div id='legend'>
<!-- LEGEND/CONTENT -->
<div id='legend-content'>
<div class='line'>Estimated Population (Census Block):</div>
<div class='line'>
<div class = 'av' id='pop_0'>◼︎</div>
<div class='caption'>0 - 100</div>
</div>
<div class='line'>
<div class = 'av' id='pop_100'>◼︎</div>
<div class='caption'>100 - 200</div>
</div>
<div class='line'>
<div class = 'av' id='pop_200'>◼︎</div>
<div class='caption'>200 - 400</div>
</div>
<div class='line'>
<div class = 'av' id='pop_400'>◼︎</div>
<div class='caption'>400 - 800</div>
</div>
<div class='line'>
<div class = 'av' id='pop_800'>◼︎</div>
<div class='caption'>800 - 1600</div>
</div>
<div class='line'>
<div class = 'av' id='pop_1600'>◼︎</div>
<div class='caption'>1600 - 3200</div>
</div>
<div class='line'>
<div class = 'av' id='pop_3200'>◼︎</div>
<div class='caption'>3200 - 6400</div>
</div>
<div class='line'>
<div class = 'av' id='pop_6400'>◼︎</div>
<div class='caption'>6400 - 12800</div>
</div>
<div class='line'>
<div class = 'av' id='pop_12800'>◼︎</div>
<div class='caption'>more than 12800</div>
</div>
</div>
</div>
<!-- NEIGHBORHOOD FILTER -->
<div id='cbs' class='desktop'>
<!-- NEIGHBORHOOD/CONTENT -->
<div id='cbs-content'>
<div class='line'>Visible Districts:</div>
<div class='line'>
<input type='checkbox' id='cb1' class='cbn' checked>
<span> Lower Manhattan</span>
</div>
<div class='line'>
<input type='checkbox' id='cb2' class='cbn' checked>
<span> West Village</span>
</div>
<div class='line'>
<input type='checkbox' id='cb3' class='cbn' checked>
<span> East Village</span>
</div>
<div class='line'>
<input type='checkbox' id='cb4' class='cbn' checked>
<span> Midtown West</span>
</div>
<div class='line'>
<input type='checkbox' id='cb5' class='cbn' checked>
<span> Midtown</span>
</div>
<div class='line'>
<input type='checkbox' id='cb6' class='cbn' checked>
<span> Midtown East</span>
</div>
<div class='line'>
<input type='checkbox' id='cb7' class='cbn' checked>
<span> Upper West Side</span>
</div>
<div class='line'>
<input type='checkbox' id='cb8' class='cbn' checked>
<span> Upper East Side</span>
</div>
<div class='line'>
<input type='checkbox' id='cb9' class='cbn' checked>
<span> West Harlem</span>
</div>
<div class='line'>
<input type='checkbox' id='cb10' class='cbn' checked>
<span> Central Harlem</span>
</div>
<div class='line'>
<input type='checkbox' id='cb11' class='cbn' checked>
<span> East Harlem</span>
</div>
<div class='line'>
<input type='checkbox' id='cb12' class='cbn' checked>
<span> North Manhattan</span>
</div>
</div>
</div>
<!-- STATSLEGEND -->
<div id='statslegend'>
<!-- STATSLEGEND CONTENT -->
<div id='statslegend-content'>
<div class='line'>Difference from Overnight Population<br>(Census Tract):</div>
<div class='line'>
<div class = 'av' id='diff_n4000'>◼︎</div>
<div class='caption'>less than -4000</div>
</div>
<div class='line'>
<div class = 'av' id='diff_n2000'>◼︎</div>
<div class='caption'>-4000 to -2000</div>
</div>
<div class='line'>
<div class = 'av' id='diff_n1000'>◼︎</div>
<div class='caption'>-2000 to -1000</div>
</div>
<div class='line'>
<div class = 'av' id='diff_n500'>◼︎</div>
<div class='caption'>-1000 to -500</div>
</div>
<div class='line'>
<div class = 'av' id='diff_500'>◼︎</div>
<div class='caption'>-500 to +500</div>
</div>
<div class='line'>
<div class = 'av' id='diff_2000'>◼︎</div>
<div class='caption'>+500 to +2000</div>
</div>
<div class='line'>
<div class = 'av' id='diff_4000'>◼︎</div>
<div class='caption'>+2000 to +4000</div>
</div>
<div class='line'>
<div class = 'av' id='diff_12000'>◼︎</div>
<div class='caption'>+4000 to +12000</div>
</div>
<div class='line'>
<div class = 'av' id='diff_32000'>◼︎</div>
<div class='caption'>more than +12000</div>
</div>
</div>
</div>
</div>
<!-- STATS-INFO -->
<div id='info' class='desktop'>
<!-- INFO/HEADER -->
<div id='info-header'></div>
<!-- INFO/CONTENT -->
<div id='info-content'>
<!-- NTA-POPULATION-GRAPH-->
<div id='info-popgraph'></div>
<!-- NTA-TYPE-METRIC -->
<div id='info-ntatype' class='param'>
<div id='info-ntatype-value' class='param-value'></div>
<div id='info-ntatype-caption' class='param-caption'>Import/Export Type:</div>
</div>
<!-- NTA-MINPOP-METRIC -->
<div id='info-ntaflux' class='param'>
<div id='info-ntaflux-value' class='param-value'></div>
<div id='info-ntaflux-caption' class='param-caption'>Daytime Change:</div>
</div>
<!-- NTA-CURRENTPOP-METRIC -->
<div id='info-ntapopcurr' class='param'>
<div id='info-ntapopcurr-value' class='param-value'></div>
<div id='info-ntapopcurr-caption' class='param-caption'>Estimated Population:</div>
</div>
</div>
</div>
<!-- STORY MODE -->
<div id = 'storymode'>
<!-- STORY MODE/HEADER -->
<div id = 'storymode-header'>The Story of Manhattan's Dynamic Population</div>
<!-- STORY MODE/CONTENT -->
<div id = 'storymode-content'>
<p>
The visualization you see here is a model of the dynamic population of Manhattan, block-by-block and hour-by-hour for a typical week in late Spring. The model is currently fixed to your local time. The population estimates are the result of a combination of US Census data and a geographic dispersion of calculated net inflows and outflows from subway stations, normalized to match population daytime and nighttime estimates provided by a study from NYU Wagner. You may exit the ‘Story’ mode at any time by selecting the ‘Visualization’ or ‘Statistics’ tabs in the header above. For more information, click ‘About’. To continue, click the arrows below.
</p>
</div>
<!-- STORY MODE/CONTROLS -->
<div class = 'noselect' id = 'storymode-controls'>
<!-- STORY MODE/CONTROLS/PAGE -->
<i class='arrow left' id = 'story-back'></i>
<span id = 'storymode-controls-numbers'>1 of 15</span>
<i class='arrow right' id = 'story-forward'></i>
</div>
</div>
<!-- CONTROLS -->
<div id = 'controls'>
<div id='slider-area-t'>
<div id='slider-t'></div>
</div>
<div id='slider-area-b'>
<div id='slider-b'></div>
</div>
</div>
<!-- MB Map -->
<div id='map'></div>
<!-- JS-MANPOP -->
<script src='scripts/manpop.js'></script>
<script src='scripts/manpop_graphs.js'></script>
<script src='scripts/manpop_story.js'></script>
</body>
</html>