-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
330 lines (283 loc) · 13.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
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
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" href="assets/intro/icon2.png" type="image/png">
<title>Internet Companies</title>
<!-- Bootstrap CSS -->
<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">
<!-- My custom CSS -->
<link rel="stylesheet" href="css/style.css">
<!-- Icon tab-->
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
<!-- Font link -->
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
</head>
<body onload="myFunction()">
<div id="loader"></div>
<div id="myDiv" style="display:none;" class="animate-bottom">
<!-- The fixed navbar -->
<nav class="navbar nav sticky-top pl-0 pr-0">
<h4 class="navbar">What if Internet Companies were countries?</h4> <!-- Title of the visualization-->
<h4 class="navbar text-right d-none d-md-block">Group 7</h4> <!-- Team number-->
</nav>
<main>
<!-- Title of the visualization and group members-->
<section class="container pb-md-5 pt-md-5 pb-5">
<div class="row">
<div class="col-12 col-md-5 offset-md-1 pb-3">
<h2 class="title_infographic">What if <u style="font-style: italic">Internet<br>Companies</u></span> were countries?</h2>
</div>
<!-- Member of the team-->
<div id="right" class="col-12 col-md-5 text-md-right pt-3">
<p class="title_group">Group 7 <br>
<span class="text-nowrap"> Bettini Matteo, Cremonesi Teresa, </span>
<span class="text-nowrap"><br> Enache Alexandru, Lombardi Giovanni, </span>
<span class="text-nowrap"><br>Pagano Valentina, Ren Pengyuan </span>
</p>
<!-- <div class="row"> -->
<!-- Group 7 -->
<!-- </div> -->
<!-- <div class="row"> -->
<!-- Bettini Matteo, Cremonesi Teresa, -->
<!-- </div> -->
<!-- <div class="row"> -->
<!-- Enache Alexandru, Lombardi Giovanni, -->
<!-- </div> -->
<!-- <div class="row"> -->
<!-- Pagano Valentina, Ren Pengyuan -->
<!-- </div> -->
</div>
</div>
</section>
<!-- Full visualization -->
<section class="container-fluid pt-md-3 pb-md-5 pt-3 pb-5">
<div class="row">
<div class="col-12 pr-0 pl-0">
<img src="img/uno.jpg" class="img-fluid infographic" alt="Responsive image">
</div>
</div>
</section>
<!-- Brief introduction of the visualization -->
<section class="container pb-md-5 pb-5">
<div class="row">
<div class="col-12 col-md-8 offset-md-2">
<p class="text_section mb-0">
In the past few years internet companies have increased, grew and developed incredible economic values and powers. <u style="text-decoration: underline">This project approaches the topic by comparing corporations with the concept of country,</u> with the intent of reaching more easily the common sense of notion of institution by the reader. Therefore companies are presented as real nations, translating some characteristics, such as: <u style="text-decoration: underline">Gross Domestic Products (GDP) into Market Capitalization, population in employees, flags as model of business category.</u> Another comparison is made with a country from the real world (Denmark), highlighting the real but theorical connection with companies.
</p>
</div>
</div>
</section>
<!-- *****FIRST SECTION***** -->
<section class="container pt-md-3 pt-3">
<!-- Title of the section-->
<div class="row pb-md-5 pb-5">
<div class="col-12 col-md-10 offset-md-2 text-left">
<h2 class="title_section mb-0">A country as an <span class="title_section_hover">economic power</span></h2>
<p class="mb-0">MARKETCAP AS THE GDPs </p>
</div>
</div>
<!-- Text of the section -->
<div class="row pb-md-5 pb-5">
<div class="col-12 col-md-8 offset-md-2">
<p class="text_section mb-0">
The infographic creates a visual hierarchy since the economical power of the internet companies is demonstrated by the size of their area: <u style="text-decoration: underline">the most valuable and richest companies are also the biggest.</u> To quantify the power more deeply, <u style="text-decoration: underline">the companies are compared to a real country of the world </u>(Denmark). This country was chosen as the basis of comparison because it is a well-known highly developed European nation, with a GDP theoretically acquirable by the companies. The economic size of Denmark is shown inside of the company to visualize how small it is, compared to the biggest one.
</p>
</div>
</div>
</section>
<section class="container-fluid">
<!-- The part of the visualization analyzed -->
<div class="row">
<div class="col-12 p-0">
<img src="img/due.png" class="img-fluid" alt="Responsive image">
</div>
</div>
</section>
<section>
<div class="container">
<!-- Caption for the image analyzed -->
<div class="row pt-md-3 pt-3 pb-md-5 pb-5">
<div class="description_text col-12 col-md-8 offset-md-2 text-md-left">
<em>Each square accounts for one billion USD of market cap, the dark gray part and the highlighted pink aera represent the Market Capitalization of the company and the GDP of Denmark respectively. </em>
</div>
</div>
</div>
</section>
<!-- *****SECOND SECTION***** -->
<section class="container pt-md-3 pt-3 pb-md-5 pb-5">
<!-- Title of the section-->
<div class="row pb-md-5 pb-5">
<div class="col-12 col-md-10 offset-md-2 text-left">
<h2 class="title_section mb-0">A country as a <span class="title_section_hover"> community of individuals </span></h2>
<p class="mb-0">EMPLOYEES AS POPULATION</p>
</div>
</div>
<!-- Text of the section -->
<div class="row pb-md-5 pb-5">
<div class="col-12 col-md-8 offset-md-2">
<p class="text_section mb-0">
As a population of a country generates an amount of wealth, in the same way the concept is presented by employees producing value within the companies. The differentiation of market capitalization value generated by small or big amount of employee is highlighted, showing which companies have the biggest “human presence” or the lowest ones. For example <u style="text-decoration: underline">some corporations are primarily machine-based, so they don’t need a massive amount of employees.</u>
</p>
</div>
</div>
<!-- The part of the visualization analyzed -->
<div class="row">
<div class="col-12">
<img src="img/tre.png" class="img-fluid" alt="Responsive image">
</div>
</div>
<!-- Caption for the image analyzed -->
<div class="row pt-3 pt-md-3">
<div class="description_text col-12 col-md-8 offset-md-2 text-md-left">
<em>As the diagram shows, JD.com has a relatively small company value but each billion of it was generated by a massive amount of employees, on the contrary, Facebook only need 37 employees to make the value of 1 billion out of its 530 billion market capitalization. </em>
</div>
</div>
</section>
<!-- *****THIRD SECTION***** -->
<section class="container pt-md-3 pb-md-5 pt-3 pb-5">
<!-- Title of the section-->
<div class="row pb-md-5 pb-5">
<div class="col-12 col-md-10 offset-md-2 text-left">
<h2 class="title_section mb-0">Flags as <span class="title_section_hover"> translation of business category</span></h2>
<p class="mb-0">BUSINESS CATEGORIES AS IDENTITIES </p>
</div>
</div>
<!-- Text of the section -->
<div class="row pb-md-5 pb-5">
<div class="col-12 col-md-8 offset-md-2">
<p class="text_section mb-0">
<u style="text-decoration: underline">Standard national flags of cartographic maps are interpreted into new ones representing a system of classification.</u> Through the different layouts is possible to understand directly which is the main business of each company and how they appear to their clients/users. Moreover, the colors of the flags were extracted from the identities of the companies they are referring to.
</p>
</div>
</div>
<!-- The part of the visualization analyzed -->
<div class="row pb-md-3 pb-3">
<div class="col-12">
<img src="img/quattro.png" class="img-fluid" alt="Responsive image">
</div>
</div>
<!-- Caption for the image analyzed -->
<div class="row">
<div class="description_text col-12 col-md-8 offset-md-2 text-md-left">
<em>The internet companies have been categorized into three different clusters: retail, advertising, and services. Also, there are two more sub-categories under advertising and three for services. As the four Chinese internet giants that shows in the diagram above. </em>
</div>
</div>
</section>
<!-- *****FOURTH SECTION***** -->
<section class="container pt-md-3 pb-md-5 pt-3 pb-5">
<!-- Title of the section-->
<div class="row pb-md-5 pb-5">
<div class="col-12 col-md-10 offset-md-2 text-left">
<h2 class="title_section mb-0">Timezone as <span class="title_section_hover" >employees zone</span></h2>
<p class="mb-0">HOW INTERNET COMPANIES MAKE MONEY</p>
</div>
</div>
<!-- Text of the section -->
<div class="row pb-md-5 pb-5">
<div class="col-12 col-md-8 offset-md-2">
<p class="text_section mb-0">
Referring to the cartographic time zones, different ranges of company amount of employees are displayed along the Y axis. <u style="text-decoration: underline"> The tendency is that the majority of the internet companies stay under the 60.000 employee range.</u> On the other hand, the e-commerce and advertising giants from US and China are from a very disproportionate range, going from 100.000 up to 650.000 employees (Amazon).
</p>
</div>
</div>
<!-- The part of the visualization analyzed -->
<div class="row pb-md-3 pb-3">
<div class="col-12">
<img src="img/cinque.png" class="img-fluid" alt="Responsive image">
</div>
</div>
<!-- Caption for the image analyzed -->
<div class="row">
<div class="description_text col-12 col-md-8 offset-md-2 text-md-left">
<em>Time zones are adapted for the various amounts of employees like in the real cartographic standard of adapting the lines to the country’s shapes. Also, the different intensities of the color recalls standard of the physical map legendas. </em>
</div>
</div>
</section>
<!-- Section for the datasets used-->
<section class="container pt-md-3 pb-md-5 pt-3 pb-5">
<!-- Title of the section -->
<div class="row pb-md-5 pb-5">
<div class="col-12 col-md-10 offset-md-2 text-md-left">
<h2 class="mb-0">Datasets</h2>
</div>
</div>
<!-- Datasets for the download -->
<div class="row">
<div class="col-12 col-md-3 offset-md-2 mb-3 mb-md-0">
Data Source
</div>
<div class="col-12 col-md-3 mb-3 mb-md-0">
<a class="linkdata" href="https://finance.yahoo.com">Yahoo finance</a> , <a class="linkdata" href="https://ycharts.com">Ycharts</a>
</div>
<div class="col-12 col-md-3 mb-3 mb-md-0">
<a class="download" href="Dataset/Top_30_Internet_Companies.xlsx" download >Download</a>
</div>
</div>
</section>
</main>
<!-- Footer - with the information related with the project-->
<footer class="mt-md-5 mt-5 bg-dark pb-md-5 pb-5">
<div class="container">
<div class="row">
<!-- Link to DensityDesignLab-->
<div class="col-md-2 col-6 pt-3 pb-3">
<a href="http://www.densitydesign.org/"><img src="img/logo_density.png" width="58%"></a>
</div>
<!-- Link to Polimi Design-->
<div class="col-md-2 col-6 pt-3">
<a href="http://www.dipartimentodesign.polimi.it/">
<img src="img/logo_poli.png" width="90%"></a>
</div>
<div class="col-md-2 col-12 pt-5 offset-md-2 text-white" >
<h4 class="final_title">Project by</h4>
<ul class="mb-0 pl-0" style="padding-left:0px">
<li>Bettini Matteo</li>
<li>Cremonesi Teresa</li>
<li>Enache Alexandru</li>
<li>Lombardi Giovanni</li>
<li>Pagano Valentina</li>
<li>Ren Pengyuan</li>
</ul>
</div>
<div class="col-md-2 col-6 pt-5 text-white">
<h4 class="final_title">Faculty</h4>
<ul class="mb-0 pl-0" style="padding-left:0px">
<li>Michele Mauri</li>
<li>Angeles Briones</li>
<li>Gabriele Colombo</li>
<li>Simone Vantini</li>
<li>Salvatore Zingale</li>
</ul>
</div>
<div class="col-md-2 col-6 pt-5 text-white">
<h4 class="final_title">Teaching Assistants</h4>
<ul class="mb-0 pl-0" style="padding-left:0px">
<li>Andrea Benedetti</li>
<li>Lea Mara Fabiano</li>
<li>Alessandra Facchin</li>
<li>Beatrice Gobbo</li>
<li>Tommaso Elli</li>
<li>Jacopo Di Iorio</li>
<li>Anna Riboldi</li>
</ul>
</div>
</div>
</div>
</footer>
</div>
<script>
var myVar;
function myFunction() {
myVar = setTimeout(showPage, 3000);
}
function showPage() {
document.getElementById("loader").style.display = "none";
document.getElementById("myDiv").style.display = "block";
}
</script>
</body>
</html>