-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·365 lines (333 loc) · 13.2 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
360
361
362
363
364
365
<!DOCTYPE html>
<html lang="en">
<head>
<title>MammaMia - Data Visualization</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- favicon -->
<link type="image/png" sizes="32x32" rel="icon" href="images/favicon.ico" />
<!-- JQuery -->
<script
src="https://code.jquery.com/jquery-3.6.1.js"
integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI="
crossorigin="anonymous"
></script>
<!-- Google Font CDN -->
<link
href="https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed&display=swap"
rel="stylesheet"
/>
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<!-- Fontawesome -->
<link
rel="stylesheet"
href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<!-- Custom CSS -->
<link rel="stylesheet" href="css/w3.css" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body class="w3-light-grey">
<!-- Header -->
<div class="header" id="includeHeader"></div>
<!-- Sidebar -->
<nav
class="w3-sidebar w3-collapse w3-white w3-animate-left"
id="mySidebarHome"
></nav>
<!-- Overlay effect when opening sidebar on small screens -->
<div
class="w3-overlay w3-hide-large w3-animate-opacity"
onclick="w3_close()"
style="cursor: pointer"
title="close side menu"
id="myOverlay"
></div>
<!-- !PAGE CONTENT! -->
<div class="w3-main" id="pageContent">
<div class="container" id="headersContainer">
<header class="w3-container" id="HomePageTitle">
<h1 class="h1-mainPage"><b>EcoBenefits Project</b></h1>
</header>
<br />
</div>
<div class="w3-row-padding w3-margin-bottom">
<h3><b>Group Name:</b> MammaMia!</h3>
<h3><b>Group Members (alphabetic order):</b></h3>
<div id="members">
<ul>
<li>Gallo Ivan</li>
<li>Ivan Diana</li>
<li>Kunst Emilia</li>
<li>Pastorino Edoardo</li>
<li>Sadeghi Garjan Mahyar</li>
</ul>
</div>
</div>
<h2>
<b>About Project and Data</b>
</h2>
<div id="description">
<p>
The website offers the possibility to view all the charts relative to
the different assignments of the Data Visualization course
@UniGe,academic year 2022/2023, made by the
<span><b>MammaMia!</b></span> group.
<br />
In the subpages relative to the different assignments is possible to
find different charts with various techniques of data visualization,
to show the data and present conclusions on them.
<br />
<br />
The data come from a
<a href="https://github.com/Jeko83/TrentoTreeMap"
>GitHub Repository</a
>
about trees abundance and position in the municipality of Trento,
mainly in form of json and geojson files.
</p>
</div>
<br />
<div id="containerImgTrentomap">
<img
src="./images/trentoTreeMap.png"
alt="Trento Tree Map"
class=".img-fluid"
id="trentoTreeMapImg"
/>
<p>
<i
>(image from the
<a href="https://jeko83.github.io/TrentoTreeMap/"
>online TrentoTreeMap</a
>)</i
>
</p>
</div>
<!-- <hr> -->
<h2>Assignment 1 - Comparing Categories</h2>
<div id="descriptionAssignment1">
<p>
In the first assignment we have to compare the tree species abundance
and distribution, also with regard to the various "circoscrizioni"
(neighborhood) in which the trees are placed.
<br />
Specifically we created five charts: <br />
The first one is a simple barchart that shows the sorted tree
abundance (top 20) and others info. <br />
The second one compares the neighborhood and the tree types (for the
top 5 tree type) with a stacked barchart. <br />
The third chart's purpose is the same of the previous one, but in this
case we used small multiple charts, dividing for each tree specie.
<br />
The fourth one is again a variant version of the second one, showing a
stacked bar chart using the percentage of the tree species
distribution. <br />
The fifth one shows the distribution of the tree species in percentage
divided by neighborhood, using some waffle charts. <br />
</p>
</div>
<div class="w3-row-padding w3-margin-bottom" id="containerBtnAssgn1">
<div class="w3-fourth">
<div class="w3-container w3-light-blue w3-padding-16">
<div class="w3-left">
<a href="assignment1.html" class="text-decoration-none">
<i class="fa fa-chart-line w3-xlarge"></i><b> Assignment 1</b>
</a>
</div>
</div>
</div>
</div>
<br />
<hr />
<h2>Assignment 2 - Distribution</h2>
<div id="descriptionAssignment2">
<p>
In the second assignment we have to consider the distribution, in
different kind of visualization, of four tree's "size measure", that
are the height (m), the crown width (m), the canopy cover (m
<sup>2</sup>) and the crown height (m).
<br />
It is possible to select the desired measure using the dropdown menu.
<br />
Also this time we created five charts: <br />
The first one is an histogram that shows the distribution of each of
the four size measure for all the tree species.<br />
Also the second one displays the same size measure distribution, but,
this time, using a box plot chart, in which we can easily see outliers
and where is the dense part o the data distribution.<br />
The third chart's purpose is to show the correlation between the
CO<sup>2</sup> production of the top 5 tree types (considering the
abundance) with their size measures.<br />
The fourth one is the small multiple version of the previous one,
showing the same correlation separately for each tree type, again in a
scatter plot.<br />
The fifth and last one shows the correlation between size measures and
CO<sup>2</sup> production, of the top 6 tree types, with the usage of
a bubble chart in which the dimensions of the bubbles refers to the
tres's canopy size.<br />
</p>
</div>
<div class="w3-row-padding w3-margin-bottom" id="containerBtnAssgn2">
<div class="w3-fourth">
<div class="w3-container w3-light-blue w3-padding-16">
<div class="w3-left">
<a href="assignment2.html" class="text-decoration-none">
<i class="fa fa-chart-line w3-xlarge"></i><b> Assignment 2</b>
</a>
</div>
</div>
</div>
</div>
<br />
<hr />
<h2>Assignment 3 - Maps</h2>
<div id="descriptionAssignment3">
<p>
The third assignment of the Data Visualization course wants to show,
in general, the spread of the trees inside the geographical map of
Trento's city, that is divided according to its circoscrizioni,
according to different measures.
<br />
We have displayed five maps of Trento, each one provides a different
knowledge: <br />
The first map represents the distribution of the tree abundance in
each circoscrizione. <br />The second one, instead shows the density
distribution of trees (considering the total sum of the trees' area
respect to the area of a circoscrizione), again inside each region of
the city. <br />
The third one is similar to the previous, the only difference is that
we consider as measure the oxygen production of trees. <br />
The fourth geographical rapresentation illustrates, using dots, where
all the trees are located in Trento. <br />
In the last map we can see, where the top 10 trees, in terms of
quantity, are situated.
</p>
</div>
<div class="w3-row-padding w3-margin-bottom" id="containerBtnAssgn3">
<div class="w3-fourth">
<div class="w3-container w3-light-blue w3-padding-16">
<div class="w3-left">
<a href="assignment3.html" class="text-decoration-none">
<i class="fa fa-chart-line w3-xlarge"></i><b> Assignment 3</b>
</a>
</div>
</div>
</div>
</div>
<br />
<hr />
<h2>Assignment 4 - Temporal Data</h2>
<div id="descriptionAssignment4">
<p>
The fourth assignment of Data Visualization concerns temporal data,
specifically for this task we have taken temporal data relative to the
daily temperature of the Salorno's city, starting from 1981 until
2021. <br />
The first chart represents the trend of montly temperature, subdivided
in the max montly temperature, min montly temperature and average
montly temperature of the selected year. For showing the max and min
temperature we have used a line chart, while the average is
represented with a scatterplot between the two lines. <br />
The second one is a radar chart that in this case shows three lines,
representing again the max, min and average montly temperature for the
selected year. <br />
The last one displays the temperature's montly distribution (max and
min temperature) of the selected year using a particualr chart called
ridgline.
</p>
</div>
<div class="w3-row-padding w3-margin-bottom" id="containerBtnAssgn4">
<div class="w3-fourth">
<div class="w3-container w3-light-blue w3-padding-16">
<div class="w3-left">
<a href="assignment4.html" class="text-decoration-none">
<i class="fa fa-chart-line w3-xlarge"></i><b> Assignment 4</b>
</a>
</div>
</div>
</div>
</div>
<br />
<hr />
<h2>Assignment 5 - Flux</h2>
<div id="descriptionAssignment5">
<p>
The aim of the Data Visualization's last assignment (the assignment
number 5) is to show correlation between different measures for
specific tree types. For doing that we have used a kind of flux chart
called alluvial (or sankey) diagram. The only diagram of this
assignment wants to correlate the carbon storage in kg, of the top ten
(in terms of abundance) tree species, with the carbon storage
measured, this time, in euros.
</p>
</div>
<div class="w3-row-padding w3-margin-bottom" id="containerBtnAssgn5">
<div class="w3-fourth">
<div class="w3-container w3-light-blue w3-padding-16">
<div class="w3-left">
<a href="assignment5.html" class="text-decoration-none">
<i class="fa fa-chart-line w3-xlarge"></i><b> Assignment 5</b>
</a>
</div>
</div>
</div>
</div>
<br />
<br />
<!-- Site footer -->
<footer id="includeFooter"></footer>
<!-- End page content -->
</div>
<script>
// Get the Sidebar
var mySidebar = document.getElementById("mySidebarHome");
// Get the DIV with overlay effect
var overlayBg = document.getElementById("myOverlay");
// Toggle between showing and hiding the sidebar, and add overlay effect
function w3_open() {
if (mySidebar.style.display === "block") {
mySidebar.style.display = "none";
overlayBg.style.display = "none";
} else {
mySidebar.style.display = "block";
overlayBg.style.display = "block";
}
}
// Close the sidebar with the close button
function w3_close() {
mySidebar.style.display = "none";
overlayBg.style.display = "none";
}
$(function () {
$("#includeHeader").load("./components/header.html");
});
$(function () {
$("#includeFooter").load("./components/footer.html");
});
$(function () {
$("#mySidebarHome").load("./components/sidebar.html");
});
</script>
<script
src="https://kit.fontawesome.com/22c153e680.js"
crossorigin="anonymous"
></script>
</body>
</html>