-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
471 lines (431 loc) · 25.8 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
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
<!DOCTYPE html>
<html lang="en">
<head>
<title>Scuole in Trentino</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS Reset -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reseter.css" />
<!-- Font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display">
<link href="https://fonts.googleapis.com/css2?family=Quicksand" rel="stylesheet">
<!-- Font awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://kit.fontawesome.com/aef6d5743a.js" crossorigin="anonymous"></script>
<!-- Additional Libraries -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin="" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<!-- Select with research -->
<!-- <link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" /> -->
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
<link rel="stylesheet" integrity="sha256-ze/OEYGcFbPRmvCnrSeKbRTtjG4vGLHXgOqsyLFTRjg=" crossorigin="anonymous" />
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/css/bootstrap-select.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.js"></script>
<!-- Particles -->
<link rel="stylesheet" href="website/particles.css">
<link rel="javascript" href="website/particles.js">
<!-- Style -->
<link rel="stylesheet" href="website/style.css">
<link rel="stylesheet" href="website/customized_style.css">
<link rel="stylesheet" href="website/select.css">
</head>
<body>
<script>
function update_pois_path() {
school = $("#poi-select").val();
$("#pois").attr("src", "viz/pois/" + school + ".html");
$("#pois-barplot").attr("src", "viz/barplot/" + school + ".html");
}
function update_route_isochrone(transport) {
if (transport == undefined) {
transport = $('#btn-group .active').val();
}
school = $(".choose-school").val();
if (school == null) {
school = 0;
}
$("#route-isochrone").attr("src", "viz/isochrones/route/" + transport + "/" + school + ".html");
}
function change_knn() {
k = $("#choose-knn").val();
$("#knn").attr("src", "viz/knn/" + k + ".png");
document.getElementById("fill-with-k").innerHTML = "k=" + k;
}
function update_trees() {
name = $('#metric-select').val();
$("#tree").attr("src", "viz/trees/" + name + ".html");
}
</script>
<!-- Navbar -->
<div class="top" id="navbar">
<a href="#home">Home</a>
<a href="#searchschool">Cerca
Scuola</a>
<a href="#students">Studenti</a>
<a href="#streets">Networking</a>
<a href="#openstreetmap">Nei dintorni</a>
<a href="#knn-section">KNN</a>
<a href="#community">Comunità di valle</a>
<a href="javascript:void(0);" class="icon" onclick="resize_navbar()">
<i class="fa fa-bars"></i>
</a>
</div>
<!-- Header -->
<header id="home">
<div class='panel'>
<h1>Scuole in Trentino</h1>
<h4>Progetto di Geospatial Analysis & Representation</h4>
</div>
<div id="particles-js"></div>
<script src="website/particles.min.js"></script>
<script src="website/particles.js"></script>
</header>
<section>
<!-- First Grid -->
<div id="searchschool" class="row-padding light-gray container">
<div class="content">
<div class="left">
<h1>Le scuole in Trentino</h1>
<h4>Quante scuole ci sono in Trentino?</h4>
<p class="text-grey">
La provincia di Trento, illustrata nella mappa di seguito, presenta <b>723 scuole</b>. Ognuna di
esse ha un suo marker sulla mappa, che viene aggregato ad altri al diminuire del livello di
zoom. Tante più scuole sono raggruppate, tanto più scuro è il cerchio che conteggia il numero di
scuole che contiene.
<br>
Cliccando sul singolo marker, è possibile visualizzare i dettagli della scuola, come nome,
istituto comprensivo, informazioni di contatto e indirizzo. Nel caso si volesse cercare una
scuola
specifica, è disponibile l'opzione di ricerca in base al nome della scuola (singola unità
didattica).
<br>
Infine, l'utente può selezionare lo stile che più preferisce dal controller in alto a destra
sulla mappa, rendendo la mappa chiara, scura, con dettagli sugli edifici e rimuovendo punti e
confini inseriti.
</p>
</div>
<iframe src="viz/schools_cluster.html"></iframe>
</div>
</div>
<div class="row-padding white container">
<div class="content">
<h1>Le scuole trentine in proporzioni</h1>
<h4>Scuole statali e paritarie</h4>
<p class="text-grey">
Dal grafico sottostante emerge come le scuole statali (<b>70%</b>) prevalgano sulle paritarie
(<b>30%</b>). Un'ulteriore classificazione fornita dal grafico è quella basata sul grado della
scuola: infanzia, primaria, secondaria (di primo e secondo grado), formazione professionale ed
educazione per adulti.
<br>
Le <b>scuole statali</b> sono circa equamente suddivise tra scuola dell'infanzia, secondaria di
primo e secondo grado (<b>56%</b> totale), mentre le scuole primarie costituiscono il <b>40%</b>
delle scuole statali. Formazione professionale ed educazione per adulti risultano essere una
minoranza del <b>4%</b> (totale).
<br>
D'altra parte, le scuole d'infanzia (<b>72%</b>) costituiscono la categoria preponderante tra le
<b>scuole paritarie</b>. Contrariamente alle scuole statali, le primarie e le secondarie di primo
grado
sono in minoranza (4% ciascuno) rispetto alle secondarie di secondo grado (<b>8%</b>). Inoltre,
oltre la
metà delle scuole dedicate alla formazione professionale è paritaria (26 su 44).
</p>
<iframe class="noshadow" src="viz/sunburst_schools.html"></iframe>
</div>
</div>
<!-- Second Grid -->
<div id="students" class="row-padding light-grey container">
<div class="content">
<div class="content">
<div class="left">
<h1>Studenti, Scuole e Popolazione</h1>
<h4>Quanti studenti ci sono in ogni comune?</h4>
<p class="text-grey">
Dopo aver considerato il numero e la distribuzione delle scuole sul territorio, è possibile
concentrarsi sugli <b>studenti</b> e sul rapporto con la <b>popolazione</b> locale.
<br>
<i>Nota bene: Il numero degli studenti considerato per ogni comune comprende le scuole
primarie, secondarie e di formazione professionale, con esclusione delle scuole
d'infanzia, di cui non è possibile ricavare i dati.</i>
</p>
<div>
<iframe src="viz/students_population.html"></iframe>
</div>
<p class="text-grey">
Alcuni comuni non detengono dati sul <b>numero di studenti</b> (per esempio Valdaone e
Imer), per tale motivo sono interamente in bianco. La maggioranza degli studenti si
concentra presso <b>Trento</b> (circa 20.000) e <b>Rovereto</b> (circa 10.000), i comuni più
popolati del Trentino. Essendovi pochi comuni con alta densità di popolazione, la mappa su
Studenti, Popolazione e Scuole mostrano alte concentrazioni sulle aree maggiormente popolate
(<b>Trento, Rovereto, Riva del Garda, Cles, Arco, Pergine Valsugana</b>).
</p>
<br>
<h4>Gli studenti in rapporto alla popolazione</h4>
<p class="text-grey">
La mappa su <b>Studenti/Popolazione</b> illustra il rapporto tra la popolazione compresa tra
i 5 e i 20 anni (estremi compresi) e la popolazione totale, assumendo che tutti gli studenti
(dalla primaria alla professionale) siano compresi all'interno di questa fascia d'età. I
comuni con il rapporto più alto di popolazione studentesca sono <b>Porte di Rendena, Dro,
Comano Terme</b> e </b>Novaledo</b> (19%), mentre quelli con il rapporto più basso sono
<b>Palù del Fersina</b>
(8%), <b>Cinte Tesino</b> (9%), <b>Valfloriana, Castello Tesino</b> e <b>Sagron Mis</b>
(10%).
<br>
Il rapporto tra il numero di studenti e popolazione studentesca illustra la proporzione di
studenti che frequentano una scuola all'interno del comune sulla popolazione compresa tra i
5 e i 20 anni d'età. Risulta particolarmente utile per mettere in evidenza quei comuni con
situazioni duali: da un lato comuni i cui studenti sono al di sotto della popolazione 5-20
residente (come <b>Peio</b>, <b>Vermiglio</b>, <b>Rabbi</b>, <b>Rumo</b>, <b>Ville di
Fiemme</b>,<b>Vallarsa</b>, <b>Trambileno</b>, <b>Terragnolo</b>); d'altra parte, vi
sono comuni ove il numero di studenti supera di gran lunga la popolazione giovanile
residente (come <b>Tione di Trento</b>, <b>Ossana</b> e
<b>Cles</b>).
Questa situazione potrebbe implicare che molti studenti debbano spostarsi da un comune
all'altro
per andare a scuola.
<br>
Infine, dopo aver esplorato il numero di scuole e di studenti per comune, <b>Media studenti
per
scuola</b> mira a fornire una visione complessiva della distribuzione di studenti per
scuola
all'interno di ogni comune. Come riportato precedentemente, i comuni più popolati hanno una
media di studenti più alta, raggiungendo circa i <b>200 studenti</b> per scuola (Trento,
Rovereto,
Mori,
Mezzocorona, Riva del Garda, Arco, Levico Terme), mentre i comuni rimanenti (in giallo e
arancione) hanno una media di studenti per scuola al di sotto di <b>100</b>.
</p>
</div>
</div>
</div>
</div>
<!-- Third Grid -->
<div id="streets" class="row-padding white container">
<div class="content">
<h1>Networking</h1>
<h4>Quante strade puoi raggiungere?</h4>
<p class="text-grey">
Questa sezione è dedicata agli spostamenti a piedi, in bici e in auto. Scegliendo una specifica
scuola e il mezzo di trasporto, verrà caricata una mappa che mostra quali strade possano essere
raggiunte
in <b>5</b>, <b>10</b> e <b>15</b>, la cui differenza in termini di tempo viene
espressa dall'intensità del colore della strada.
<br>
<i>Attenzione: alcuni percorsi in bici non sono disponibili su OpenStreetMap e sono pertanto identici ai percorsi pedonali. </i>
</p>
<br>
<select class="choose-school left" onchange="update_route_isochrone();" value=0
id="school-select"></select>
<div id="btn-group" class="btn-group btn-group-lg right" role="group">
<button type="button" class="btn btn-secondary" value="walk">
<i class="fas fa-walking" id="walk"></i>
</button>
<button type="button" class="btn btn-secondary" value="bike">
<i class="fas fa-bicycle" id="bike"></i>
</button>
<button type="button" class="btn btn-secondary" value="drive_service">
<i class="fas fa-car" id="drive_service"></i>
</button>
</div>
<iframe id="route-isochrone" src="viz/isochrones/route/walk/0.html"></iframe>
</div>
</div>
<!-- Fourth Grid -->
<div id="openstreetmap" class="row-padding light-grey w3-padding-64
container">
<div class="content">
<h1>Punti di interesse</h1>
<h4>Categorie di luoghi accessibili attorno alle scuole</h4>
<p class="text-grey">
Questa sezione è dedicata ai luoghi accessibili in un raggio aereo di <b>1km</b> dalla scuola
selezionata (raffigurata esattamente al centro del cerchio, in rosso). Lo scopo della mappa è
permettere all'utente di visualizzare il volume, la distribuzione e la classificazione di questi
luoghi di interesse nei dintorni dell'area scolastica.
<br>
Come evidenziato dalla mappa, le categorie di luoghi catturate sono:
<ul id="categories" class="text-grey">
<li><b>Trasporti</b>: stazioni del treno e fermate degli autobus locali e delle corriere (servizi forniti da Trenitalia e TrentinoTrasporti); </li>
<li><b>Utilità</b>: come copisterie e fonti di acqua potabile; </li>
<li><b>Ristorazione</b>: ristoranti, bar, supermercati, ogni luogo che fornisce cibo e bevande;</li>
<li><b>Salute</b>: cliniche mediche, ospedali, farmacie; </li>
<li><b>Aree verdi</b>: come parchi, tavoli e/o aree da picnic;</li>
<li><b>Cultura</b>: cinema, teatri, musei, biblioteche, qualsiasi luogo che possa aiutare gli studenti a studiare e/o arricchire il proprio bagaglio culturale;</li>
<li><b>Sport</b>: piscine, campi da gioco, palestre dove praticare qualsiasi tipo di sport.</li>
</ul>
</p>
<p class="text-grey">
Cliccando su uno qualsiasi di questi marker, si possono trovare informazioni aggiuntive, quali nome del luogo, orari di apertura, disponibilità connessione internet, contatti (qualora disponibili).
<br>
Le prime tre scelte nel menù a destra della mappa permettono di cambiarne lo stile (chiaro, scuro, classica cartina geografica), mentre il <b>Dintorni</b> (in fondo al menù) mette in evidenzia il raggio da un chilometro attorno alla scuola.
<br>
<i>Attenzione però: considerata la natura collinare/montagnosa del territorio trentino, nonostante la distanza aerea possa essere al di sotto di 1km, quella attuale (a prescindere dal mezzo di trasporto), potrebbe richiedere molti più tempo e strada di quanto si pensi. </i>
</p>
<br>
<select id="poi-select" class="choose-school" value=0 onchange="update_pois_path();">
</select>
<iframe id="pois" src="viz/pois/0.html"></iframe>
</div>
<div class="content">
<h4>Confronto con la media del comune e della provincia</h4>
<p class="text-grey">Il grafico a barre mette a confronto i punti di interesse (divisi per categoria in
base al colore) della <b>singola scuola scelta</b>, del suo <b>comune di appartenenza</b> e
dell'intera <b>provincia di Trento</b>. È possibile (de)selezionare una o più categorie di punti
dalla legenda sulla destra, con un click. Posando il cursore sulle barre, viene fornito il numero o
la media (nel caso del comune e della provincia) di punti di interesse nel luogo specificato
sull'asse orizzontale. </p>
<iframe id="pois-barplot" src="viz/barplot/0.html"></iframe>
</div>
</div>
<!-- Fifth Grid -->
<div id="knn-section" class="row-padding white container">
<div class="content">
<h1>Modelli di regressione spaziale</h1>
<h4>Connessioni tra le scuole più vicine</h4>
<p class="text-grey">
Il <b>K-nearest neighbour</b> è un algoritmo che permette di associare a un punto (in questo caso
una
scuola) <span>K</span> punti più vicini (<span>K</span> altre scuole). Lo slider permette di
cambiare il valore di <span>K</span> da <span>1</span> a
<span>20</span>, di modo da porre attenzione ai cambiamenti alla rete scolastica trentina quando si
valutano più o meno scuole vicine.
<br>
Scegliendo un <b><span>K</span> basso</b>, la mappa sarà corredata da pochi punti e qualche linea
sottile, indicando nel primo caso la vicinanza tra le scuole e nel secondo la loro lontananza e la
carenza di scuole nel territorio locale (come succede a <b>Valdaone</b> e <b>Luserna</b>). Più lunga la linea,
maggiore la
distanza che intercorre tra una scuola e l'altra.
<br>
Nel momento in cui <b><span>K</span></b> assume un valore <b>alto</b>, anche scuole molto lontane
cominciano a connettersi, nonostante la distanza, poiché non vi sono altri punti nel vicinato. In
questo modo si ottiene una rete di scuole che mette in evidenza le aree maggiormente interconnesse
(con più scuole), come <b>Rovereto</b> e <b>Trento</b>, e quelle senza, come il confine ovest della
<b>Comunità delle Giudicarie</b>, la <b>Valsugana</b> e la <b>Val di Fiemme</b>.
</p>
<div>
<div class="center">
<p id="fill-with-k"></p>
<input type="range" min="1" max="20" value="0" class="clicked" id="choose-knn"
oninput="change_knn()">
<img src="viz/knn/1.png" id="knn">
</div>
</div>
</div>
</div>
<!-- Sixth Grid -->
<div id="community" class="row-padding light-gray container more-padding">
<div class="content">
<div>
<h1>Comunità di valle</h1>
<h4>Quali sono le comunità di valle nel Trentino?</h4>
<p class="text-grey">
Il Trentino è suddiviso in 16 Comunità di valle, enti territoriali locali della provincia
autonoma di Trento che formano il livello istituzionale intermedio fra i comuni e la provincia.
La mappa fornisce una visione generale di queste comunità e dei comuni che le compongono.
<br>
<i>Attenzione a come ordini i layer nella mappa! Se le comunità vengono selezionate per ultime, potresti non riuscire a leggere i nomi dei comuni sottostanti. </i>
</p>
<iframe id="comunita-valle" src="viz/comunità.html"></iframe>
<h4>La scuola nelle comunità di valle</h4>
<p class="text-grey">
Ogni comunità viene associata ad un colore, mantenuto anche nel grafico sottostante. Ogni
casella, ogni colore, rappresentano una comunità diversa, con all'interno i suoi comuni. La
grandezza di ogni casella è proporzionata al valore della variabile selezionata.
<br>
A partire dal menù a tendina, è possibile selezionare la variabile di preferenza, tra il numero
di <b>Scuole</b>, di <b>Studenti</b> e di <b>Classi</b>, la <b>Popolazione totale</b> e la
<b>giovanile</b> (tra i 5 e i 20 anni).
</p>
<br>
<div>
<select id="metric-select" class="choose-metric" onchange="update_trees();"
value="Scuole totali">
<option value="Scuole totali" style="font-family: Quicksand;">Scuole</option>
<option value="Studenti" style="font-family: Quicksand;">Studenti</option>
<option value="Classi" style="font-family: Quicksand;">Classi</option>
<option value="Popolazione" style="font-family: Quicksand;">Popolazione</option>
<option value="Pop under 20" style="font-family: Quicksand;">Popolazione giovanile</option>
</select>
</div>
<iframe id="tree" src="viz/trees/Scuole totali.html"></iframe>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="container center w3-opacity light-grey">
<div class="w3-xlarge">
<a href="https://github.com/AuroraArctic/TrentinoSchools" target="_blank">
<i class="fa fa-github large"></i>
</a>
<a href="https://www.linkedin.com/in/aurora-maria-tumminello/" target="_blank">
<i class="fa fa-linkedin large"></i>
</a>
</div>
<p class="no-space">
<span>Aurora Maria Tumminello</span><br>
<span>Università degli Studi di Trento</span>
</p>
</footer>
<script>
// Working to load the list of schools
$(document).ready(function () {
$('.choose-school').select2({
height: 'resolve'
});
$('.choose-metric').select2({
minimumResultsForSearch: Infinity,
height: 'resolve'
});
// BUTTON GROUP HANDLING
$('#btn-group button').on('click', function () {
var thisBtn = $(this);
thisBtn.addClass('active').siblings().removeClass('active');
var btnText = thisBtn.text();
var btnValue = thisBtn.val();
update_route_isochrone(btnValue);
});
// Button group default value
$('#btn-group button[value="walk"]').click();
// When reloading the page, if k is not 1, show the correct number
document.getElementById("fill-with-k").innerHTML = "k=" + $("#choose-knn").val();
});
// SELECT DYNAMIC LOADING OF SCHOOLS
$.get("https://github.com/raw/AuroraArctic/TrentinoSchools/main/data/schools_list_for_select.json",
function (data, error) {
if (error) {
console.log(error);
}
var options = JSON.parse(data);
for (i in options) {
if (i == 0) {
$(".choose-school").append('<option value="' + i + '" selected>' + options[i] + '</option>');
} else {
$(".choose-school").append('<option value="' + i + '">' + options[i] + '</option>');
}
}
});
function resize_navbar() {
var x = document.getElementById("navbar");
if (x.className === "top") {
x.className += " responsive";
} else {
x.className = "top";
}
}
$('.choose-school').select2({
theme: "flat"
});
</script>
</body>
</html>