-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
282 lines (247 loc) · 16.7 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
<!DOCTYPE HTML>
<!--
Ion by TEMPLATED
templated.co @templatedco
Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
-->
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Chivo:300,300i,400,700|Roboto:300,300i,400" rel="stylesheet">
<title>Skyscrapers</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<!--[if lte IE 8]><script src="js/html5shiv.js"></script><![endif]-->
<script src="js/jquery.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-layers.min.js"></script>
<script src="js/init.js"></script>
<noscript>
<link rel="stylesheet" href="css/skel.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style-xlarge.css" />
</noscript>
</head>
<body id="top">
<!-- Header -->
<header id="header" class="skel-layers-fixed">
<h1><a href="#">A Visualization of Skyscrapers</a></h1>
<nav id="nav">
<ul>
<li><a target=_blank href="https://github.com/cpang4/cs360-finalproject">Github Repo</a></li>
<li><a target=_blank href="https://github.com/cpang4/cs360-finalproject/blob/master/process-book.pdf">Process Book</a></li>
</ul>
</nav>
</header>
<!-- Banner -->
<section id="banner">
<div class="inner">
<h2>A VISUALIZATION OF <b>SKYSCRAPERS</b></h2>
<p>by Claire Pang & Vi Le</p>
</div>
</section>
<!-- Background -->
<br>
<div class="container">
<section>
<h2>Background</h2>
<p>When you are asked to think of skyscrapers, your immediate thought may be of a famous building. From the Empire State Building in NYC to the Space Needle in Seattle, they are all very grand. But, can they tell us anything about the communities they are located in?</p><br>
<p>With the amount of free land space shrinking in the United States, buildings have been building upwards rather than outwards. This is an increasing trend, if not problem, in metropolitan cities such as San Francisco and New York. Likely, skyscraper construction will continue in order to meet housing demands, which will play a role in reshaping the iconic skylines of major cities.</p><br>
<p>Skyscrapers are generally filled with offices. With an increase in the number of workers in the area, we also expect an increase in the number of residential buildings. Residents, in turn, need something to do besides go to work. This can be anything from movie theatres to museums to casinos. These major centers also attract non-locals into the city who then require hotels to stay in. We would like to examine the evolution of skyscraper construction in the United States through an interactive data visualization.</p><br>
</section>
</div>
<!-- Project objectives -->
<div class="container">
<section>
<h2>Project Objectives</h2>
<p><b><i>Note:</b></i> We are defining a skyscraper as any building with <b>height ≥ 130m</b>.
<br>The skyscrapers used for these visualizations are only <b> completed</b> ones.
<br>Because most skyscrapers are multipurpose, for simplicity, we used a <b> main </b> purpose (what most of the floors occupy).</p>
<br>
<p>-Which are the tallest buildings in the US? (and how tall are they, relative to other tall buildings in this dataset?)</p>
<p>-Where are the tallest buildings in the US? Does a certain city/state have the most tall buildings?</p>
<p>-What are the purposes of these skyscrapers (casinos, offices, hotels, residential, etc)?</p>
<p>-Is there a constant positive trend for the amount of skyscrapers constructed, or has construction halted?</p>
<p>-How do US skyscrapers compare to other skyscrapers in the world?</p><br>
</section>
</div>
<!-- The data -->
<div class="container">
<section>
<h2>Data</h2>
<p>We are using the <a target=_blank href="https://think.cs.vt.edu/corgis/csv/skyscrapers/skyscrapers.html">CORGIS Skyscrapers dataset.</a>
<br>There was a signifcant amount of data processing required for this project, which can be read about in our <a target=_blank href="https://github.com/cpang4/cs360-finalproject/blob/master/process-book.pdf">process book</a>.
<br>The processed datasets that we used are available in our <a target=_blank href="https://github.com/cpang4/cs360-finalproject/tree/master/data">github repo</a>.</p><br>
</section>
</div>
<!-- Before Line Chart -->
<div class="container">
<section>
<h2>Skyscraper construction over the years</h2>
<p> The line chart below shows the number of skyscrapers cumlatively existing in the US over the years.
<br>(All is the total of office, residential, hotel & other.)
<br><i>Hover</i> over a category name for brushing (other lines will be grayed out).
<br><i>Click</i> on a category name to remove it, and click again to bring it back.</p><br>
</section>
</div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://d3js.org/queue.v1.min.js"></script>
<link rel="stylesheet" href="code/style.css">
<div class="container">
<div id="viz1"><svg id="linechart" height="500" width="1000"></svg>
<script src="code/line.js"></script>
</div>
<!-- Analysis of line chart -->
<div class="container">
<section>
<p>Until the 1970's, it seems that there was not a burst in skyscraper construction.
<br> There was a minor slowdown in 1990's in skyscraper construction, but again a burst in the 2000's.
<br>Until the 1990's, most of the skyscraper construction was due to office. However, office construction has slowed down since the 1990's and instead been replaced by residential construction.
<br>Based on the growth we have seen in the 2000's, it is not unexpected that the growth of skyscrapers in the U.S. continues rapidly.</p><br>
</section>
</div>
<!-- Header for map -->
<div class="container">
<section><h2>Breakdown by city</h2>
<p> Use the slider below to see how many skyscrapers existed in a city during a given year.
<br><i>Hover</i> over a circle for city name + count.</p><br><br>
</section>
</div>
<div id="viz2">
<input type="range" min="1912" max="2016" step="1" value="1912" class="slider" id="slider">
<br><p>
<font face= "Chivo" style="position:relative; left:450px;">Year: </font>
<font face="Chivo"><span id="demo" style="position:relative; left:450px;"></span></font></p>
<script>
var slider = document.getElementById("slider");
var output = document.getElementById("demo");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
</script>
<svg id="map" height="550" width="1000"></svg>
<script src="code/map.js"></script></div>
<!-- Map analysis -->
<div class="container">
<p>It seems that every major city has at least one skyscraper. New York has a lead on all other cities in terms of skyscraper count. The closest competitor is Chicago, but in 2016 Chicago still has ~120 fewer skyscrapers.
<br>New York was ahead of the skyscraper construction game, with ~70 already in the 1940's. By then, most major cities only had 1-2 skyscrapers, or none at all. It was not until the 1990's that every major city had at least 1 skyscraper. Some states, by 2016, still do not have any skyscrapers. </p><br>
</section>
</div>
<!-- Header for scatter -->
<div class="container">
<section><h2>Year / Height Analysis</h2>
<p>Use the dropdown menu to see a scatter plot of the skyscrapers overall, by region, & any city that has more than 10 skyscrapers.
<br><i>Hover</i> over a dot for more details. If a skyscraper has more than one purpose, all are listed, but the <i>main purpose is italicized.</i></p><br>
</section>
</div>
<div id="viz6">
<div id="dropScatter"></div>
<svg id="scatter" width="1100" height="550"></svg>
<script src="code/scatterplot.js"></script>
</div>
<!-- Cluster analysis -->
<div class="container">
<p>From the the scatter plot, we find that there are dense cluster around the years <i>1920-1930's,</i> and the <i>2000's.</i>
<br>They remain relatively steady through the <i>1960's - present.</i>
<br>More telling, however, are the <i>lack of</i> clusters. Specifically, skyscraper construction was non-existent from <i>1930-1940, late 1970's, early 1990's</i> and <i> early 2010's.</i>
<br><i>Why do you think there are such gaps in skyscraper creation?</i>
<br>Based on our knowledge of US history, the gaps in skyscraper construction coincide with US military conflict. - specifically, the US's involvement in WWII, the Korean Way, the Vietnam, the Gulf War, and the War on Terror.<br>
Something interesting that is noticeable is that the east coast - by far - has the largest number of skyscrapers. It gets progressively lesser the more west you travel.</p><br>
</div>
<!-- Header for waffle -->
<div class="container">
<section><h2>Breakdown by category, by city</h2>
<p>See what skyscrapers are used for overall & in the 6 cities with the most skyscrapers.
<br>If a city contains at least 1 skyscraper in "other", <i>hover</i> over the grid for more information.</p><br>
</section>
</div>
<div id="viz3">
<nav id='filter'></nav>
<svg id="waffle" width="1000" height="250"></svg>
<script src="code/waffle.js"></script>
</div>
<!-- Waffle analysis -->
<div class="container">
<section><p>Based on "All", we can see that U.S. skyscrapers are mainly used for <i>office</i>, then <i> residential</i>, and then <i>hotel</i>.
<br>It is interesting to see the makeup of what skyscrapers are used as you compare city by city.
<br>When you look at San Francisco, a tech hub, it makes sense that 75% of skyscrapers are used as offices. This majority is also found in Houston, where 87% are used as offices.
<br>Whereas in Las Vegas, skyscrapers are primarily residential or hotels (located in the Las Vegas Strip). Las Vegas is the only city where hotels are over 10%! (However, it is important to note that in raw numbers, New York has more skyscraper hotels).
<br>In Miami, a whopping 81% is used as residential.
<br>In New York and Chicago, the percentages for residential and office are not equal, but are still the majority uses for skyscrapers.</p><br>
</section>
</div>
<!-- Header for bar -->
<div class="container">
<section><h2>Tallest in each city</h2>
<p>Use the dropdown menu to see the tallest skyscrapers overall & in any city that has more than 10 skyscrapers.
<br><i>Hover</i> over a bar for more details. If a skyscraper has more than one purpose, all are listed, but the <i>main purpose is italicized.</i></p><br>
</section>
</div>
<div id="viz4">
<div id="drop"></div>
<svg id="bar" width="1000" height="520"></svg>
<script src="code/bar.js"></script>
</div>
<!-- Bar analysis -->
<div class="container">
<p>The tallest skyscrapers in the U.S. is the <i>One World Trade Center</i> in New York City.
<br>Of the Top 10 Overall, the majority of skyscrapers are located in either New York City or Chicago.
<br>When comparing city to city, it seems that <i>New York City</i> is home to the tallest skyscrapers and Chicago in second place. Other cities contain skyscrapers, but their top 10 are significantly shorter than those in New York or Chicago.
<br>It seems that most of the top 10 overall and city-wise are used as office or residential buildings. The tallest usually also contain an observation deck.
</p><br>
</section>
</div>
</div> <!-- end container -->
<!-- World header -->
<div class="container">
<section>
<h2>How do U.S. skyscrapers compare globally?</h2>
<p>See how U.S. skyscrapers compare to other skyscrapers in the world. Images for these buildings are from <a target=_blank href="http://www.skyscrapercenter.com/">Skyscraper Center</a>.
<br><i>Hover</i> over the scaled images for more information.
<br><i>Click</i> the boxes next to "Top 1-10" or "Top 1-20" to see more skyscrapers.</p>
</section>
</div>
<div class = "container">
<div id="viz5">
<svg id="worldBar" width="1100" height="550"></svg>
<script src="code/world.js"></script>
</div></div>
<!-- World analysis -->
<div class="container">
<p>When it comes to seeing how tall U.S. skyscrapers are compared to other countries, only the One World Trade Center (New York City) makes the Top Ten at Rank #6. In the Top 10, Dubai wins with the Burj Khalifa, but China has the most skyscrapers in the top 10.
</p>
<p>Expanding to the Top 20, we see the U.S. has more skyscrapers with the <i>Willis Tower</i> (Chicago) at Rank #14, <i>432 Park Avenue</i> (New York City) at Rank #17, and <i>Trump Int. Hotel & Tower</i> (Chicago) at Rank #19. However, China still has the majority for number of skyscrapers in the top 20.<br><br>
</section>
</div>
<!-- Conclusion -->
<div class="container">
<section>
<h2>Conclusion</h2>
<p>We have found that there were periods in which skyscraper construction has slowed down (most likely due to military events) or bursted, and based on past trends, we do not expect skyscraper construction to slow down in the next few years. More research into building/construction laws, population sizes, real estate, and the economy will be needed to do any further analysis.<br>
<br>The most common purpose for these skyscrapers are office buildings, then residential, then hotel, and then other purposes. However, it is not uncommon for these skyscrapers to have more than one purpose.<br>
<br>From the bar chart, we can see that the tallest skyscraper in the US is the One World Trade Center in New York City.
It stands tall at 541.30m (1743.11ft). There is a noticeable difference between the first and second tallest building in the US. This Willis Tower in Chicago, Illinois is 88.16m (289.24ft) shorter than One World Center at 442.14m (1450.60ft). Overall, we find that most of the tallest skyscrapers in the US can be found in the New York City and Chicago, and these are the most populated in terms of skyscrapers, as well.<br>
<br>
How does the tallest skyscraper in the US compare to the rest of the world? That would be incomparable. The tallest skyscraper in the world can be found in Dubai, UAE. At 828m (2716.54ft), the Burj Khalifa is is 287m taller than than the One World Trade Center. One World Trade Center ranks 6th overall in the world. We also find that China has a majority for the number of skyscrapers in the top 10.
</p>
<br>
</section>
</div>
<!-- References -->
<div class="container">
<section>
<h2>References</h2>
<p>
<a target=_blank href="http://bl.ocks.org/d3noob/6eb506b129f585ce5c8a">Tooltip example</a> for line chart<br>
<a target=_blank href="http://bl.ocks.org/PBrockmann/230f567762de650953b5">Inspiration</a> for map with slider ("breakdown by city")<br>
<a target=_blank href="https://flowingdata.com/2018/01/23/the-demographics-of-others/">Inspiration</a> for icon array ("breakdown by category, by city")<br>
<a target=_blank href="http://www.skyscrapercenter.com/">Images</a> used in world viz ("how do US skyscrapers compare globally?")<br>
<a target=_blank href="https://templated.co/ion"> CSS Template</a> for this webpage
</p>
<br>
</section>
</div>
</body>
</html>