-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
341 lines (248 loc) · 13.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
<!DOCTYPE HTML>
<html>
<head>
<title>Syracuse Rising</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0">
<script src="//use.typekit.net/tmh8mxl.js"></script>
<script>try{Typekit.load();}catch(e){}</script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/d3/d3.min.js"></script>
<script src="bower_components/d3-tip/index.js"></script>
<script src="bower_components/topojson/topojson.js"></script>
<script src="bower_components/tabletop/src/tabletop.js"></script>
<script src="bower_components/handlebars/handlebars.min.js"></script>
<script src="bower_components/datatables/media/js/jquery.dataTables.min.js"></script>
<script src="vendor/js/dropcap.js"></script>
<script src="http://d3js.org/queue.v1.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.js"></script>
<script src="script.js?113014"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.css">
<link rel="stylesheet" href="bower_components/datatables/media/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="style.css?113014">
</head>
<body>
<!-- - - - - - - -->
<!-- Navigation -->
<!-- - - - - - - -->
<!--<div class="navigation">
<h3>Syracuse Rising</h3>
</div>-->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - - - -->
<!-- Photo: Header & Armory Square -->
<!-- - - - - - - - - - - - - - - - -->
<div class="hgroup parallax">
<div class="himage parallax-image"></div>
<div class="hgradient">
<h1 class="h1">Syracuse <span>Rising</span></h1>
<h2 class="h2">A visual tour of a city's downtown renaissance</h2>
<p class="byline">By <span>Chris Voll</span></p>
<div class="bracket top"></div>
<div class="bracket bottom"></div>
</div>
</div>
<div class="caption">
<span class="arrow"></span>
A snowy Armory Square on Nov. 14, 2014. Once filled with crumbling abandoned warehouses, the area has been transformed into a thriving downtown cultural center.
</div>
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- - - - - - - -->
<!-- Text: Intro -->
<!-- - - - - - - -->
<div class="text-block">
<p><span class="dropcap">O</span><span class="lede">ver the past</span> five years, the oft-repeated narrative of the struggling rust belt city center has eroded away. Stories of vacant buildings, rising crime, and gritty perseverance have been replaced by those of gentrification, investment, and prosperity. Syracuse, once a city afraid of change, has begun to embrace luxury apartments, coffee shops, and other symbols of progressive reinvention that have characterized the growth of other more liveable cities.</p>
<p>According to a Syracuse.com article on the trend, "Downtown's population has increased 47 percent in the last decade and 21 percent in the last three years alone." Since 2012, more than 900 new housing units downtown have been constructed or are currently being planned.</p>
<p>The Syracuse Downtown Committee in 2014 released a report outlining nearly $2.6 billion (actual numbers now are over to $3 billion) of capital that has recently been or soon will be invested in Syracuse-area construction projects. These new developments, centered around University Hill, Armory Square, the Inner Harbor, and Loguen Crossing, reflect greater demand for housing within the city.</p>
</div>
<!-- - - - - - - - - - - - - - - - - - - -->
<!-- Graphic: Syracuse Developments Map -->
<!-- - - - - - - - - - - - - - - - - - - -->
<h3 class="h3">New <span>Development Projects</span> in Syracuse</h3>
<div class="map-container">
<div id="map"></div>
<div class="map-details"></div>
</div>
<div class="caption">
<span class="arrow"></span>
New building projects within Syracuse since 2010, including those currently under construction and planned for the future. <a href="https://docs.google.com/spreadsheets/d/19JnF3xjfnGSLN0Gzoh-Gw2pNfbQVJYGq7XzZMYfMK-Q/edit?usp=sharing">See all data ›</a>
</div>
<!-- - - - - - - - - - - - - - - -->
<!-- Graphics & Text: Money Flow -->
<!-- - - - - - - - - - - - - - - -->
<div class="text-block">
<h3 class="h3">Where is the <span>$3.06 billion</span> going?</h3>
<p>Despite the enormous housing boom in downtown Syracuse, only a small share of investments are going to dedicated residential properties. Instead, more focus has been placed on mixed-use development.</p>
<div id="money"></div>
<p>The Lakefront neighborhood is home to both the Destiny USA regional shopping center and the Inner Harbor mixed-use development, which combine to over $1 billion in investment from private developers. University Hill and Downtown are characterized by many smaller building projects on the SU, ESF and Upstate campuses.</p>
<p>University Hill has seen the greatest interest in developers, characterized by many large construction projects by Syracuse University, SUNY ESF, and Upstate Medical University. The neighborhood is also home to Loguen Crossing, a $350 million planned development on land owned by Upstate.</p>
<p>The Lakefront neighborhood is composed of two major investments totalling nearly $1 billion, the Destiny USA shopping center and the mixed-use Inner Harbor project.</p>
<div id="neighborhoods"></div>
</div>
<!-- - - - - - - - - - - - - -->
<!-- Photo: University Hill -->
<!-- - - - - - - - - - - - - -->
<div class="parallax">
<div class="parallax-image" style="background-image: url(./assets/schine.jpg);"></div>
<div class="cutline"><strong>University Hill</strong> is home to Syracuse University, SUNY ESF, Upstate Medical University, Crouse Hospital, and the future Loguen Crossing development. SU has spent over $450 million on new construction since 2005.</div>
</div>
<!-- - - - - - - - - - - - -->
<!-- Graphic: Average Cost -->
<!-- - - - - - - - - - - - -->
<div class="text-block">
<h3 class="h3">Which projects have the <span>highest average cost?</span></h3>
<div id="average"></div>
</div>
<!-- - - - - - - - - - - - - -->
<!-- Graphic: US Poverty Map -->
<!-- - - - - - - - - - - - - -->
<div class="text-block">
<h3 class="h3">How does Syracuse <span>compare?</span></h3>
<p>While capital investments are difficult to compare amongst different regions, the economic stability of Syracuse can be viewed through the proxy of its poverty levels. Compared to most of the Northeast and Midwest, Onondaga's poverty level of 9.6% is is about average, if not slightly high.</p>
</div>
<div id="national"></div>
<div class="text-block">
<p><em>Source: U.S. Census Bureau, 2012 5-year estimates, American Community Survey</em></p>
</div>
<!-- - - - - - - - - - - - - - -->
<!-- Photo: Brennan Buildings -->
<!-- - - - - - - - - - - - - - -->
<div class="parallax">
<div class="parallax-image" style="background-image: url(./assets/brennan.jpg);"></div>
<div class="cutline"><strong>The Brennan Buildings</strong> are among many vacant buildings downtown that city officials hope to see revitalized in the coming years.</div>
</div>
<!-- - - - - - - - - - - -->
<!-- Table: All Projects -->
<!-- - - - - - - - - - - -->
<div class="text-block">
<h3 class="h3">All <span><span class="project-count"></span> Projects</span></h3>
<table class="datatable" cellpadding="0" cellspacing="0" border="0"></table>
</div>
<!-- - - - - - - - - - - - - - - -->
<!-- Photo: Connective Corridor -->
<!-- - - - - - - - - - - - - - - -->
<div class="parallax" style="margin-bottom: 0">
<div class="parallax-image" style="background-image: url(./assets/connective_corridor.jpg);"></div>
<div class="cutline"><strong>The Connective Corridor</strong> aims to bridge the gap between Syracuse University and Downtown Syracuse, opening up opportunities for development along a new bus route and bicycle track.</div>
</div>
<!-- - - - - - - -->
<!-- Text: About -->
<!-- - - - - - - -->
<div class="text-block">
<h3 class="h3"><span>About</span> this Project</h3>
<p>Chris Voll is a student at the S.I. Newhouse School of Public Communications in Syracuse, NY. This is a data visualization project for NEW 300. As a living document, it will continue to be updated as new development projects throughout the city are announced, and at this stage is only a draft.</p>
<p>The <a href="https://docs.google.com/spreadsheets/d/19JnF3xjfnGSLN0Gzoh-Gw2pNfbQVJYGq7XzZMYfMK-Q/edit?usp=sharing">full data set is available on Google Drive</a>. Much of the data, including projects, costs, and approximate locations, is from the <a href="http://issuu.com/downtownsyracuse/docs/downtown_syracuse_development_overv">Syracuse Downtown Committee</a>.</p>
<p>Please note that the building locations are approximate, based on the best available public information found from the Syracuse Downtown Committee, on Google Maps, on Syracuse.com, or on the respective websites for the buildings, developers, and tenants. To report inaccuracies, please email <a href="mailto:chris+syr@chrisvoll.com">chris+syr@chrisvoll.com</a>.</p>
<p>Last updated on December 9, 2014.</p>
</div>
<!-- - - - - - - - - -->
<!-- Photo: Downtown -->
<!-- - - - - - - - - -->
<div class="parallax" style="margin-bottom: 0">
<div class="parallax-image" style="background-image: url(./assets/downtown.jpg);"></div>
<div class="cutline"><strong>Downtown Syracuse</strong>, viewed from University Hill in 2012 sitting beyond the I-81 viaduct that divides the two neighborhoods.</div>
</div>
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- - - - - - -->
<!-- Templates -->
<!-- - - - - - -->
<div class="templates">
<script id="details-template" type="text/x-handlebars-template">
{{#if photo }}
<div class="details-header with-photo" style="background-image: url(https://dl.dropboxusercontent.com/u/21879/syracuse/{{ photo }});">
{{else}}
<div class="details-header without-photo">
{{/if}}
<div class="details-header-inner">
{{#if details}}
<h2><a href="{{ details }}">{{ name }}</a></h2>
{{else}}
<h2>{{ name }}</h2>
{{/if}}
<div class="details-meta">
<span class="point-type" style="background-color: {{ typeData.marker-color }};">
{{ typeData.label }}
</span>
{{#if cost}}
${{ formattedCost }}
{{/if}}
</div>
</div>
</div>
{{#if description}}
<div class="details-description">
{{ description }}
</div>
{{/if}}
<table class="details-table">
<tbody>
{{#if status}}
<tr>
<th>Status</th>
<td class="status status-{{ status }}">{{ statusLabel }}</td>
</tr>
{{/if}}
{{#if neighborhood}}
<tr>
<th>Neighborhood</th>
<td>{{ neighborhood }}</td>
</tr>
{{/if}}
{{#if developer}}
<tr>
<th>Developer</th>
<td>{{ developer }}</td>
</tr>
{{/if}}
{{#if tenants}}
<tr>
<th>Tenants</th>
<td>{{ tenants }}</td>
</tr>
{{/if}}
{{#if year}}
<tr>
<th>Completion</th>
<td>{{ year }}</td>
</tr>
{{/if}}
{{#if originyear}}
<tr>
<th>Originally Built</th>
<td>{{ originyear }}</td>
</tr>
{{/if}}
{{#if sqft}}
<tr>
<th>Square Feet</th>
<td>{{ sqft }}</td>
</tr>
{{/if}}
{{#if units}}
<tr>
<th>Housing Units</th>
<td>{{ units }}</td>
</tr>
{{/if}}
{{#if stories}}
<tr>
<th>Floors</th>
<td>{{ stories }}</td>
</tr>
{{/if}}
</tbody>
</table>
</script>
</div>
<!-- - - - - - - - - - -->
<!-- Google Analytics -->
<!-- - - - - - - - - - -->
<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','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-56882933-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>