/
index.html
313 lines (290 loc) · 15.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
<!DOCTYPE HTML>
<!--
Prologue by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>I 30 chilometri di spostamenti del decreto di Natale</title>
<link rel='shortcut icon' type='image/x-icon' href='/images/favicon.ico' />
<link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
<link rel="manifest" href="/images/site.webmanifest">
<meta charset="utf-8" />
<link rel="stylesheet" href="assets/css/main.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
<meta property="og:title" content="I 30 chilometri di spostamenti del decreto di Natale" />
<meta property="og:description"
content="Per avere un quadro sul contesto numerico e geografico di questa parte del decreto" />
<meta property="og:url" content="https://ondata.github.io/30cappa" />
<meta property="og:type" content="article" />
<meta property="article:tag" content="dati" />
<meta property="article:tag" content="covid" />
<meta property="article:tag" content="covid-19" />
<meta property="og:image" content="https://i.imgur.com/CxiskOb.png" />
<meta property="og:site_name" content="30cappa" />
<!-- twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="I 30 chilometri di spostamenti del decreto di Natale">
<meta name="twitter:description"
content="Per avere un quadro sul contesto numerico e geografico di questa parte del decreto">
<meta name="twitter:image" content="https://i.imgur.com/CxiskOb.png">
<meta name="twitter:site" content="30cappa" />
<meta name="twitter:url" content="https://ondata.github.io/30cappa/">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
</head>
<body class="is-preload">
<!-- Header -->
<div id="header">
<div class="home">
<!-- Logo -->
<div id="logo">
<h1 id="title">Il decreto di Natale in chilometri</h1>
<p>un <strong><a href="https://medium.com/tantotanto/il-decreto-di-natale-in-chilometri-8af38744a7d5" target='_new'>progetto</a></strong> di <a href="https://twitter.com/aborruso">aborruso</a> <a href="https://twitter.com/napo">napo</a> <a href="https://twitter.com/totofiandaca">pigreco</a></p>
</div>
<!-- Nav -->
<nav id="nav">
<ul>
<li><a href="#home" id="home-link"><span class="icon solid fa-home">Intro</span></a></li>
<li><a href="#comuni" id="comuni-link"><span class="icon solid fa-th">Comuni</span></a></li>
<li><a href="#telegram" id="telegram-link"><span class="icon solid fa-comments">Telegram</span></a></li>
<li><a href="#faq" id="faq-link"><span class="icon solid fa-question">FAQ</span></a></li>
<li><a href="#embed" id="embed-link"><span class="icon solid fa-code">Embed</span></a></li>
</ul>
</nav>
</div>
</div>
<!-- Main -->
<div id="main">
<!-- Intro -->
<section id="home" class="one dark cover">
<div class="container">
<header>
<h2 class="alt">Il decreto <strong>“di Natale”</strong> in chilometri</h2>
<p style="text-align: left;">
Il <a href="https://www.gazzettaufficiale.it/eli/id/2020/12/18/20G00196/s">decreto legge numero 172 del 18 dicembre 2020</a> - detto in maniera un po’ fastidiosa "di Natale" - definisce delle misure urgenti per le festività natalizie e di inizio anno nuovo.</p>
<p>
In questo si legge:
</p>
<blockquote style="text-align: left;">
nei giorni <strong>28, 29, 30 dicembre 2020 e 4 gennaio 2021</strong> si applicano le misure di cui all’articolo 2 del <u>medesimo</u> decreto del Presidente del Consiglio dei ministri 3 dicembre 2020, ma sono altresì <strong>consentiti</strong> gli <strong>spostamenti</strong> dai <strong>comuni</strong> con <strong>popolazione non superiore a 5.000 abitanti</strong> e <strong>per una distanza non superiore a 30 chilometri dai relativi confini</strong>, con <strong>esclusione</strong> in ogni caso degli <strong>spostamenti verso i capoluoghi di provincia.</strong>
</blockquote>
</header>
<!--
Maggiori informazioni nella storia del <a href="https://medium.com/tantotanto/il-decreto-di-natale-in-chilometri-8af38744a7d5" target='_new'>progetto</a>-->
<footer>
<a href="#comuni" class="button scrolly">Vedi la tabella dei comuni</a>
</footer>
</div>
</section>
<!-- Comuni -->
<section id="comuni" class="two">
<div class="container">
<header>
<h2>Comuni</h2>
<h4>la mappa è disponibile per i comuni fino a 5000 abitanti</h4>
</header>
<table id="table_comuni" class="display" style="width:100%">
<thead>
<tr>
<th>MAPPA</th>
<th>COMUNE</th>
<th>ABITANTI</th>
<th>SUPERFICIE (km²)</th>
<th>PROV</th>
</tr>
</thead>
</table>
</div>
</section>
<!-- Telegram -->
<section id="telegram" class="three">
<div class="container" style="text-align: left;">
<header>
<h2>bot Telegram dedicato</h2>
</header>
<p>
<a href="https://twitter.com/lrssvt">Salvatore Larosa</a> ha creato un <a href="https://t.me/trentacappa_bot">bot Telegram</a> che — a partire dal nome di uno dei comuni con non più di 5000 abitanti — restituisce l’elenco dei comuni limitrofi in cui è possibile spostarsi e il link alle nostre mappe.
</p>
<a href="https://t.me/trentacappa_bot">Accedi</a> al bot telegram
</div>
</section>
<!-- FAQ -->
<section id="faq" class="two">
<div class="container" style="text-align: left;">
<header>
<h2>Risposte alle domande più frequenti</h2>
</header>
<small>
1. <a href="#faq1" class="scrollFaq">Come è nata questa idea?</a><br/>
2. <a href="#faq2" class="scrollFaq">Tutto questo ha valore legale?</a><br/>
3. <a href="#faq3" class="scrollFaq">Da dove vengono i dati?</a><br/>
4. <a href="#faq4" class="scrollFaq">Perché la distanza è in linea d'aria?</a><br/>
5. <a href="#faq5" class="scrollFaq">Se è un perimetro dal confine perché sono circonferenze?</a><br/>
6. <a href="#faq6" class="scrollFaq">Cosa sono le macchie "rosse" nelle mappe?</a><br/>
7. <a href="#faq7" class="scrollFaq">In alcuni casi le aree in rosso sono più di una</a><br/>
8. <a href="#faq8" class="scrollFaq">Perché le aree vanno anche oltre il confine regionale?</a><br/>
9. <a href="#faq9" class="scrollFaq">Posso farlo anche io?</a>
</small>
<hr/>
<h3 id="faq1">Come è nata questa idea?</h3>
<p>
quando abbiamo visto il decreto ci siamo subito interrogati come andasse interpretato e, dialogando assieme, abbiamo ragionato come creare le mappe.
<br/>
<a href="https://medium.com/tantotanto/il-decreto-di-natale-in-chilometri-8af38744a7d5">Qui</a> trovi tutta la storia e queste conclusioni:<br/><br/>
Per noi questo è stato un momento di confronto, di divertimento, di imparare l’uno dall’altro e di condividere questa storia con chi ci sta leggendo.
<br/>
Di certo non è nostra intenzione quello di invitare gli abitanti dei "piccoli Comuni" a muoversi liberamente: crediamo sia fondamentale il buon senso.
<br/>
Forse siamo un po’ troppo pignoli, ma pensiamo che quando le parole non sono sufficienti per spiegare i concetti, forse è opportuno fornire strumenti come le mappe per far capire cosa si vuole ottenere.
<br/>
<span style="font-size: x-small;">
<a href="#faq" class="scrollFaq">
<sup>torna elenco domande</sup>
</a>
</span>
</p>
<hr/>
<h3 id="faq2">Tutto questo ha valore legale?</h3>
<p>
ci siamo limitati ad una interpretazione del decreto legge.<br/>
Il consiglio è quello di guardare le <a href='http://www.governo.it/it/faq-natale'>FAQ</a> del Governo o di sentire le forze dell'ordine. <br/>
<span style="font-size: x-small;">
<a href="#faq" class="scrollFaq">
<sup>torna elenco domande</sup>
</a>
</span>
</p>
<hr/>
<h3 id="faq3">Da dove vengono i dati?</h3>
<p>
Tutti i dati provengono da fonti ISTAT.<br/>
Abbiamo usato<br/>
- <a href="https://www.istat.it/it/archivio/222527">Limiti Amministrativi</a><br/>
- <a href="http://demo.istat.it/">Informazioni Demografiche sulla popolazione</a><br/>
entrambi al primo gennaio 2020.<br/>
<span style="font-size: x-small;"><a href="#faq" class="scrollFaq"><sup>torna elenco domande</sup></a></span>
</p>
<hr/>
<h3 id="faq4">Perché la distanza è in linea d'aria?</h3>
<p>
Abbiamo riflettuto a lungo sulla frase del decreto legge <i>"sono consentiti gli spostamenti dai comuni con popolazione non superiore a 5.000 abitanti e per una distanza non superiore a 30 chilometri dai relativi confini"</i><br/>
e su questa slide presentata dal Giuseppe Conte<br/>
<img width="60%" src="https://raw.githubusercontent.com/aborruso/30cappa/main/risorse/2020-12-18_slide_Natale.png"/>
<br/>
Anche se a valere è il decreto legge, dichiarare <i>"distanza non superiore a 30 chilometri dai relativi confini"</i>, vuole proprio dire creare un perimetro a 30km dal confine comunale e quindi in distanza aerea
<br/>
<span style="font-size: x-small;"><a href="#faq" class="scrollFaq"><sup>torna elenco domande</sup></a></span>
</p>
<hr/>
<h3 id="faq5">Se è un perimetro dal confine perché sono circonferenze?</h3>
<p>
Questa è una questione puramente tecnica.<br/>La distanza per creare il perimetro dal confine è stata fatta usando l'algoritmo <a href="https://docs.qgis.org/3.16/en/docs/gentle_gis_introduction/vector_spatial_analysis_buffers.html">buffer</a> presente in ogni software GIS.<br/>
Il calcolo del perimetro, più aumenta, e più la geometria assume una forma regolare.<br/>
Questo piccola animazione fatta da Salvatore spiega la questione
<br/><br/>
<img width="60%" src="images/buffer.gif"/>
<br/><br/>
Nella mappa abbiamo inoltre aggiunto un righello (lo trovi sotto i bottoni per lo zoom) che permette di calcolare le distanze: provalo!
<br/>
<span style="font-size: x-small;"><a href="#faq" class="scrollFaq"><sup>torna elenco domande</sup></a></span>
</p>
<hr/>
<h3 id="faq6">Cosa sono le macchie "rosse" nelle mappe</h3>
<p>
al clic sull'area viene spiegato: in ogni caso si tratta dei confini del Comune selezionato: quindi i punti di partenza.
<br/>
<span style="font-size: x-small;"><a href="#faq" class="scrollFaq"><sup>torna elenco domande</sup></a></span>
</p>
<hr/>
<h3 id="faq7">In alcuni casi le aree in rosso sono più di una</h3>
<p>
Ci sono molti comuni italiani che hanno <a href='https://it.wikipedia.org/wiki/Enclave_ed_exclave'>enclave ed exclave</a>: queste fanno parte del confine comunale e quindi vanno prese in considerazioni.<br/>
Ci sono molti altri casi particolari, il consiglio è di leggere il nostro articolo pubblicato su <a href="https://medium.com/tantotanto/il-decreto-di-natale-in-chilometri-8af38744a7d5">Medium</a>.
<br/>
<span style="font-size: x-small;"><a href="#faq" class="scrollFaq"><sup>torna elenco domande</sup></a></span>
</p>
<hr/>
<h3 id="faq8">Perché le aree vanno anche oltre il confine regionale?</h3>
<p>
inizialmente avevamo calcolato tutto sottraendo anche i confini regionali (e quelli delle province autonome), poi abbiamo letto attentamente le <a href="http://www.governo.it/it/articolo/domande-frequenti-sulle-misure-adottate-dal-governo/15638">FAQ</a> del Governo ed abbiamo scosperto che, invece, che la regola permette di andare oltre confine.<br/>
Qui uno screenshot<br/><br/>
<img width="60%" src="images/faq.jpg"/>
<br/>
<span style="font-size: x-small;"><a href="#faq" class="scrollFaq"><sup>torna elenco domande</sup></a></span>
</p>
<hr/>
<h3 id="faq9">Posso farlo anche io?</h3>
<p>
Certo! È più complesso spiegarlo che farlo.<br/>
Tecnicamente si tratta di:<br/>
- estendere i dati della popolazione alla tabella dei confini comunali<br/>
- filtrare i comuni fino a 5000 abitanti<br/>
- creare un buffer a 30km dai confini<br/>
- sottrarre (clip) i poligoni dei comuni capoluogo di provincia<br/>
- e dei confini nazionali<br/>
<br/>
Abbiamo raccontato tutto sul nostro <a href="https://medium.com/tantotanto/il-decreto-di-natale-in-chilometri-8af38744a7d5">articolo</a> e rilasciato su <a href="https://github.com/ondata/30cappa">GitHub</a>
<br/>
<span style="font-size: x-small;"><a href="#faq" class="scrollFaq"><sup>torna elenco domande</sup></a></span>
</p>
</div>
</section>
<!-- embed -->
<section id="embed" class="three">
<div class="container" style="text-align: left;">
<header>
<h2>Inserire la mappa di un comune nel tuo sito</h2>
</header>
<p>Se vuoi inserire la mappa di un comune nel tuo sito, puoi usare il codice di <i>embedding</i> sottostante.<br>
Basta un copia e incolla e poi sostituire - due volte - il <strong>codice ISTAT</strong> del comune a <strong>6 caratteri</strong>, con quello di tuo interesse. In questo esempio il codice è "001002", ovvero quello del comune di Airasca.<br>
<a href="https://jsfiddle.net/aborruso/8audt7km/5/" target="_blank">Qui</a> puoi testare la cosa.
</p>
<p style="font-family: Courier;background-color: white;padding:10px">
<iframe height="400" src="https://ondata.github.io/30cappa/embed.html?id=001002"
style="width: 0; min-width: 100% !important; border: none;" frameborder="0"></iframe><br>
<a href="https://ondata.github.io/30cappa/mappa.html?id=001002" target="_blank">Schermo intero</a>
</p>
<hr/>
<br/>
<iframe height="400" src="https://ondata.github.io/30cappa/embed.html?id=001002"
style="width: 0; min-width: 100% !important; border: none;" frameborder="0">
</iframe>
<br>
<a href="https://ondata.github.io/30cappa/mappa.html?id=001002" target="_blank">Schermo intero</a>
</div>
</section>
</div>
<!-- Footer -->
<div id="footer">
<!-- Copyright -->
<ul class="copyright">
<li>da una idea di <a href="http://twitter.com/aborruso">aborruso</a> <a href="https://twitter.com/napo">napo</a> <a href="https://twitter.com/">pigreco</a></li>
</ul>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
<script src="assets/js/table.js"></script>
<!--
<script src="assets/js/matomo.js"></script>
<script>
$(document).ready(function(){
$( "a.scrollFaq" ).click(function( event ) {
event.preventDefault();
$("html, body").animate({ scrollTop: $($(this).attr("href")).offset().top }, 500);
});
});
</script>
<noscript><p><img src="//stats.labmod.org/matomo.php?idsite=8&rec=1" style="border:0;" alt="" /></p></noscript>
-->
</body>
</html>