forked from fgarl/fgarl.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
690 lines (605 loc) · 48.7 KB
/
Copy pathindex.html
File metadata and controls
690 lines (605 loc) · 48.7 KB
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
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Ruido Vehicular Santiago 2023</title>
<style>
:root{
--brand-green:#2e7d32;
--btn-bg:#e8f5e9;
--btn-border:#5a995a;
--btn-bg-hover:#c8e6c9;
}
*{box-sizing:border-box}
body{
font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
text-align:center; background:#f0f0f0; margin:0; padding:20px; color:#1a1a1a;
}
h1{color:#333;margin-bottom:10px}
/* Layout principal */
.main{ display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:24px; margin-top:14px }
/* MAPA sin caja */
#map-container {
position: relative; /* ✅ necesario para posicionar íconos dentro */
flex: 3;
min-width: 600px;
max-width: 950px;
}
#map-container svg{
width:100%;
height:720px; /* mapa más alto */
display:block;
}
/* Sidebar */
#sidebar{ flex:1; min-width:320px; max-width:460px; display:flex; flex-direction:column; gap:12px }
#story{ background:#fff; padding:22px; border-radius:8px; box-shadow:0 2px 5px rgba(0,0,0,.1); height:420px; overflow:auto; text-align:left }
#story h2{ margin:0; color:var(--brand-green) }
#story h3{ border-bottom:2px solid #e8f5e9; padding-bottom:6px; margin-top:20px }
#hover-info{ background:#ffffff; padding:16px; border-radius:8px; box-shadow:0 2px 5px rgba(0,0,0,.08); text-align:left; min-height:140px }
#hover-info .titulo{ margin:0 0 10px; font-size:18px }
/* === Grid porcentajes === */
.valores-titles,
.valores{
display:grid; grid-template-columns: 1fr 1fr; gap:12px; align-items:stretch; margin:6px 0 6px;
}
/* Cajas de porcentaje */
.valor{
font-weight:700; font-size:20px; line-height:1;
padding:12px 10px; border-radius:8px; text-align:center;
background:#f7f7f7; border:1px solid #e4e4e4; min-height:48px;
display:flex; align-items:center; justify-content:center;
}
/* Leyenda */
.legend{ margin-top:10px; text-align:left; font-size:12px; color:#333 }
.legend-bar{
height:14px; border-radius:10px; border:1px solid #bbb; background:linear-gradient(90deg, #ffffff, #ddd);
position:relative; overflow:visible; margin-top:4px;
}
.legend-scale{ display:flex; justify-content:space-between; margin-top:6px; font-variant-numeric:tabular-nums }
/* Puntero de la leyenda (cian + animación) */
#legend-pointer{
position:absolute; top:50%; left:0%;
width:14px; height:14px; border-radius:50%;
background:hsl(191, 52%, 27%);
border:2px solid #fff;
transform:translate(-50%, -50%);
box-shadow:0 0 0 2px rgba(0,0,0,.15);
display:none; /* visible tras 1er hover */
transition: transform .2s ease;
}
@media (prefers-reduced-motion: reduce){ #legend-pointer{ transition:none } }
/* Slider: ahora en el lugar de los botones */
.dataset-switch-area{
margin-top:10px;
display:flex; flex-direction:column; align-items:center; gap:6px;
}
.theme-switch{ position:relative; width:72px; height:36px; display:inline-block; }
.theme-switch input{ display:none }
.slider{
position:absolute; inset:0; background:#2c3e50; border-radius:36px; transition:.3s;
display:flex; align-items:center; justify-content:space-around; font-size:18px; color:#fff;
}
.slider:before{
content:""; position:absolute; width:28px; height:28px; left:4px; bottom:4px;
background:#fdd835; border-radius:50%; transition:.3s; z-index:2;
}
input:checked + .slider{ background:#68bdee }
input:checked + .slider:before{ transform:translateX(36px); background:#cfd8dc }
.sun,.moon{ line-height:1; z-index:1; user-select:none }
.switch-labels{
display:flex; width:100%; justify-content:space-between; font-weight:600; font-size:12px; opacity:.85;
}
/* SVG */
svg path{ stroke:#333; stroke-width:.7; transition:fill .35s ease }
svg path:hover{ filter:brightness(1.03) saturate(1.05) }
/* Etiquetas con borde blanco */
svg text, .comuna-label{
font-family:Arial, sans-serif; font-size:12px; font-weight:bold; text-anchor:middle; pointer-events:none;
fill:#111; stroke:#fff; stroke-width:2px; paint-order:stroke fill;
}
/* =========================
Tema oscuro (se activa en NOCHE)
========================= */
body.dark-mode{ background:#1a1a1a; color:#e0e0e0 }
body.dark-mode h1{ color:#fff }
body.dark-mode #story{ background:#2c3e50; color:#e0e0e0; box-shadow:0 2px 5px rgba(255,255,255,.08) }
body.dark-mode #story h2{ color:#eaf2ff }
body.dark-mode #story h3{ border-bottom-color:#34495e }
body.dark-mode svg path{ stroke:#e0e0e0 }
/* Hover panel y cajas de porcentaje en dark */
body.dark-mode #hover-info{ background:#223247; color:#eaf2ff; box-shadow:0 2px 5px rgba(255,255,255,.06) }
body.dark-mode .valor{ background:#2f4157; border-color:#425a74; color:#eaf2ff }
body.dark-mode .legend{ color:#eaf2ff }
body.dark-mode #legend-title{ color:#cfe2ff }
body.dark-mode .legend-scale span{ color:#cfe2ff }
body.dark-mode .legend-bar{ border-color:#6e8aa7 }
body.dark-mode .legend, body.dark-mode .legend-scale span, body.dark-mode #legend-title{ text-shadow:0 1px 0 rgba(0,0,0,.35) }
body.dark-mode #legend-pointer{ border-color:#223247; box-shadow:0 0 0 2px rgba(255,255,255,.12) }
/* Titulitos de porcentajes: contraste en dark */
.valores-titles p{ margin:0 }
body.dark-mode .valores-titles p{ color:#eaf2ff; text-shadow:0 1px 0 rgba(0,0,0,.35); }
.switch-title{
text-align:center;
font-weight:700; /* mismo peso que "Superficie afectada" */
font-size:13px; /* ligeramente más grande que antes */
margin-bottom:6px;
color:#333; /* coincide con la leyenda */
}
/* Versión modo oscuro */
body.dark-mode .switch-title{
color:#eaf2ff;
text-shadow:0 1px 0 rgba(0,0,0,.35);
}
/* Enlaces en modo nocturno: celeste brillante */
body.dark-mode a{
color:#89cff0;
text-decoration:underline;
}
body.dark-mode a:hover{
color:#aee4ff;
}
/* --- Puntos de todas las comunas en la leyenda --- */
#legend-dots{
position:absolute;
inset:0;
pointer-events:none; /* no bloquea el hover del slider */
}
.legend-dot{
position:absolute;
top:50%;
left:0;
width:6px;
height:6px;
border-radius:50%;
background:#000000; /* gris discreto (se quedan así) */
transform:translate(-50%, -50%);
transition:width .25s ease, height .25s ease, background .25s ease, opacity .25s ease;
opacity:0.8;
z-index:1;
}
/* La comuna activa (la hovereada) resalta como el puntero grande */
.legend-dot.active{
width:14px;
height:14px;
background:hsl(191, 52%, 37%); /* cian */
border:2px solid #fff;
box-shadow:0 0 0 2px rgba(0,0,0,.2);
z-index:3;
}
/* Modo oscuro: un poco más claros para contraste */
body.dark-mode .legend-dot{ background:#000000; opacity:.75; }
body.dark-mode .legend-dot.active{
background:hsl(191, 68%, 70%);
border-color:#223247;
box-shadow:0 0 0 2px rgba(255,255,255,.15);
}
.alert-icon {
position: absolute;
width: 22px;
height: 22px;
background: rgb(24, 57, 123);
color: white;
font-weight: bold;
border-radius: 50%;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 5;
transform: translate(-50%, -50%);
box-shadow: 0 0 2px black;
}
.alert-box {
position: absolute;
background: #fff;
border: 2px solid #2e7d32;
padding: 16px 12px 12px;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
max-width: 240px;
display: none;
z-index: 10;
}
@media (prefers-color-scheme: dark) {
.alert-box {
background-color: #111;
color: #fff;
border-color: #4caf50;
}
}
#close-alert {
color: #d32f2f; /* Rojo oscuro como ejemplo */
}
</style>
</head>
<body>
<h1>Superficie Afectada por Ruido Vehicular por Comuna - Gran Santiago 2023</h1>
<div class="main">
<!-- MAPA (deja tu SVG aquí) -->
<div id="map-container">
<svg height="600" id="svg2" style="overflow:visible" version="1.0" viewbox="0 0 612 792" width="1000" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<defs id="defs7548"></defs>
<path d="m 2.8932879,545.28882 26.9306821,26.61678 -9.70698,6.26394 -6.890329,-6.88892 -10.0208833,10.33479 -5.3236384,-4.07085 -8.7680963,10.64586 6.8889155,5.63613 -5.3236384,5.01115 4.6972448,2.81806 -9.3944899,21.29455 -10.333373,1.56528 -11.58616,-12.52504 13.465341,-8.7681 -4.384755,-4.69724 5.636128,-4.07086 -7.202819,-8.76809 -7.515309,-1.25279 -14.718128,18.47508 -5.636129,-2.81807 25.052916,-25.3654 -14.718129,-19.10289 0,-4.07085 11.586161,-6.26252 6.888915,11.58616 7.202819,-3.75836 7.829213,6.57643 15.3445219,-14.40423 z" id="Padre_Hurtado" style="fill:#fdf9d2;fill-opacity:1;stroke:#000000;stroke-width:1.41398096;stroke-opacity:1"></path>
<path d="M 29.732061,571.71047 -7.0724502,536.0937 11.329099,520.65869 -7.6663222,507.00529 -1.1365579,485.63438 C 0.24772948,465.0553 -8.1470757,428.8291 3.0177183,423.89714 L 52.2893,410.83761 l -25.526599,-8.30997 44.52202,-29.087 -10.664245,-19.26549 -0.02121,-6.85357 46.302223,9.49771 -0.59387,7.71751 9.49064,-8.0102 0.29269,3.863 18.11734,5.9274 -3.6919,20.19165 -11.46456,0.27714 -0.27714,26.42731 c -2.17612,-0.50055 -4.35365,3.17439 -6.52977,10.09158 l -8.30996,21.37091 30.27474,0 9.49771,7.71751 -84.294474,125.25468 -29.680875,-5.93731 z" id="Maipú" style="fill:#fdf9d2;fill-opacity:1;stroke:#000000;stroke-width:1.41398096;stroke-opacity:1"></path>
<path d="m 134.2097,366.317 -3.6919,20.19165 -11.46456,0.27714 -0.27714,26.42731 c -2.17612,-0.50055 -4.35365,3.17439 -6.52976,10.09158 l -8.30997,21.37091 30.27475,0 9.49771,7.71751 -15.29786,22.79054 36.0452,16.01051 0.65892,-18.7607 34.50679,-92.91552 -0.62357,-6.82104 -46.98376,12.07257 L 134.2097,366.317 z" id="Cerrillos" style="fill:#fdf9d2;fill-opacity:1;stroke:#000000;stroke-width:1.41398096;stroke-opacity:1"></path>
<path d="m 117.29708,328.36717 0.99968,28.31921 -2.61021,-0.18665 0.37329,4.29002 18.09048,5.59512 17.71718,18.46377 47.74307,-12.30871 22.0072,0.3733 -0.55994,-12.30871 -11.56212,0.74517 c 2.48153,-7.16747 1.36732,-28.72078 2.05168,-43.08117 l -2.79826,-0.74517 0,-13.05529 -22.37908,1.11987 0,7.08688 -25.37248,1.53134 1.30511,19.02228 c -10.79009,4.50778 -13.51625,2.6894 -17.70729,2.0121 l -27.29831,-6.87336 z" id="Estación_Central" style="fill:#fdf9d2;fill-opacity:1;stroke:#000000;stroke-width:1.41398096;stroke-opacity:1"></path>
<path d="m 16.761614,129.26875 29.108212,27.69988 8.920807,10.32913 15.023548,11.26802 -44.601203,46.48038 -0.938883,24.88324 5.6333,0.93888 0.469442,2.81665 3.286091,5.16386 4.224976,5.16386 5.6333,4.22498 7.981923,1.87776 1.877767,-4.69441 3.287505,4.69441 7.981923,2.81807 12.67634,0.46944 6.102742,2.81665 12.206898,0.46944 4.224975,-0.46944 -0.469442,33.3346 3.669285,0.73951 -0.0962,14.82559 14.55834,3.35821 0.78901,28.22306 -2.41933,-0.10464 -9.72394,8.21382 0.62498,-7.76417 -47.308981,-9.93322 -1.408325,-9.85969 c -2.0531,-9.06079 -11.702106,-3.76967 -18.311054,-4.22497 1.501648,8.33118 -5.614918,11.12379 -11.737456,14.55411 -3.745635,-6.91013 -16.095346,-6.07729 -24.8832374,-8.45137 l -1.4083251,6.57218 c -10.2400504,0.94596 -18.3393335,-6.56935 -22.0665875,-3.28609 -2.611623,-2.16763 -1.292379,-7.47996 -8.920806,-5.6333 -5.296773,0.14847 -8.195434,1.93716 -2.81665,9.39025 -5.019633,10.29378 -10.657175,5.76622 -16.22119,2.99764 l -5.691274,-13.49221 4.32961,-10.2655 6.314839,-5.06064 c -3.983184,-0.95019 -6.672576,-3.66645 -4.48232,-13.0369 2.768575,-4.22073 7.929606,-6.79418 2.153493,-16.88859 l 7.827799,-5.67996 -1.273997,-8.05828 22.53603,-7.98192 -0.199372,-4.31547 6.9525448,2.72615 5.4537247,-6.86205 -2.3472085,-13.61522 5.1638587,0.46944 c 1.88625061,-29.05307 -9.2955107,-69.94681 -3.2860919,-90.1427 l 23.4749122,-1.87777 -1.876352,-25.8207 z" id="Pudahuel" style="fill:#fdf9d2;fill-opacity:1;stroke:#000000;stroke-width:1.41398096;stroke-opacity:1"></path>
<path d="m 99.664734,289.25645 -0.30542,20.3175 3.645246,0.83283 -0.11171,14.9175 41.18927,9.79606 c 8.73275,2.8619 14.33918,-0.34218 18.25732,-1.89191 l -1.32207,-19.03501 -0.79324,-22.15425 -26.27177,-2.67243 -0.7791,5.12144 -12.91389,-5.89913 -20.594636,0.6674 z" id="Lo_Prado" style="fill:#fbf2cb;fill-opacity:1;stroke:#000000;stroke-width:1.41398096;stroke-opacity:1"></path>
<path d="m 24.274095,249.9294 0.209269,-7.19575 18.117338,0.14988 0.598114,2.2454 6.589152,0.14989 10.182077,-5.09175 16.021819,-0.14847 42.375596,0 4.49222,1.79717 6.58774,-4.19245 4.04257,0 8.83455,6.73762 -9.2842,50.16097 -12.84177,-5.82418 -20.518283,0.66033 0.179576,-13.1571 -4.224975,0.46944 -12.206898,-0.46944 -6.102742,-2.81665 -12.67634,-0.46944 -7.981923,-2.81806 -3.287505,-4.69442 -1.877767,4.69442 -7.981923,-1.87777 -5.6333,-4.22498 -4.224976,-5.16385 -3.286091,-5.16386 -0.469442,-2.81665 -5.631886,-0.9403 z" id="Cerro_Navia" style="fill:#fdf9d2;fill-opacity:1;stroke:#000000;stroke-width:1.41398096;stroke-opacity:1"></path>
<path d="m 207.32807,377.15517 17.38349,0.62074 0,-5.58806 -3.72584,0 56.49844,1.24148 29.48998,-13.65906 -21.41898,-75.74413 -63.86952,-17.58568 0.54297,4.23628 c -5.79308,-0.13291 -15.60187,-8.52913 -16.14201,2.48295 l 1.55255,20.17751 -21.41898,1.24148 0.14846,11.00501 22.37908,-1.11987 0,13.05529 2.79827,0.74516 c -0.68295,14.36039 0.43126,35.91229 -2.05169,43.08118 l 11.56213,-0.74517 0.21634,12.3087 -13.5926,-0.0622" id="Santiago" style="fill:#fdf9d2;fill-opacity:1;stroke:#000000;stroke-width:1.41398096;stroke-opacity:1"></path>
<path d="m 75.716137,182.65784 -5.900542,-4.09065 -44.602617,46.47897 -0.729614,17.68749 18.117338,0.14988 0.598114,2.2454 6.589152,0.14989 10.182077,-5.09175 16.021819,-0.14847 42.375596,0 4.49222,1.79717 6.58774,-4.19245 4.04257,0 0.0184,-3.47981 4.86551,0.23614 9.37611,-5.22042 16.61427,0 13.29142,9.96856 9.01837,9.3747 11.74877,7.47713 23.25999,10.44366 0.11877,-3.0853 -13.17264,-14.12143 -2.61021,-26.58284 -2.61162,-5.45938 -16.02182,-28.95692 -6.40817,-16.49692 -2.25388,3.79796 -1.7802,0 -0.71124,-2.84918 -8.66346,4.27164 -5.45938,0.11877 -11.74877,15.30918 -4.50918,0.11877 -3.56041,-1.7802 -8.78223,6.17061 -7.23958,0 -0.23755,-1.7802 -4.50919,-0.23613 -0.37188,1.88483 -4.1373,-0.22482 -0.35491,-0.94878 -4.0355,-0.11878 -0.9502,1.42388 -4.0355,-0.23755 -1.30511,2.01775 -6.408158,-7.23958 -3.08672,-0.11877 -1.542654,-1.7802 -1.423879,1.89897 -9.612242,0 -4.154277,-4.39041 -0.118774,-4.27164 -4.268809,-0.11877 z" id="Renca" style="fill:#fdf9d2;fill-opacity:1;stroke:#000000;stroke-width:1.41398096;stroke-opacity:1"></path>
<path d="m 222.22861,270.67816 -0.54297,-4.23629 -23.25999,-10.44366 -11.74877,-7.47714 -9.01837,-9.37469 -13.29142,-9.96857 -16.61428,0 -9.3761,5.22042 -4.86551,-0.23613 -0.0184,3.4798 8.83455,6.73762 -8.37501,44.98581 26.27177,2.67242 0.79324,22.15426 25.35126,-1.52145 0,-7.08687 -0.14846,-11.00501 21.41898,-1.24148 -1.55255,-20.17751 c 0.54155,-11.01067 10.35034,-2.61445 16.14201,-2.48153 z" id="Quinta_Normal" style="fill:#fdf9d2;fill-opacity:1;stroke:#000000;stroke-width:1.41398096;stroke-opacity:1"></path>
<path d="m 285.55657,284.02755 -28.13963,-7.78821 2.54516,-29.16335 -5.78601,-0.2319 0.2319,-23.60924 -4.16701,0 -4.39748,-3.24084 0.46238,-7.63833 -2.77706,-3.00895 2.12945,-1.14674 -0.22906,-37.74056 -0.91485,-0.22907 0,-5.48907 1.14391,-0.22907 0.68578,-4.11751 33.02777,15.73337 50.96836,40.12312 -0.13998,7.84194 -13.12458,8.59135 -2.14783,5.48766 -11.69363,12.17013 -5.00973,0 -7.15899,5.25011 -1.43236,9.54579 -5.48907,10.50022 1.67132,0 -0.25876,8.38915 z" id="Recoleta" style="fill:#fdf9d2;fill-opacity:1;stroke:#000000;stroke-width:1.41398096;stroke-opacity:1"></path>
<path d="m 217.14252,211.43094 -13.73259,5.76197 2.61163,5.45938 2.61021,26.58285 13.17264,14.12142 -0.11877,3.08531 35.72988,9.79747 2.54517,-29.16335 -5.78601,-0.2319 0.23189,-23.60924 -4.167,0 -4.39748,-3.24084 0.46237,-7.63833 -2.77706,-3.00895 -15.73902,-0.46237 -10.64586,2.54658 z" id="Independencia" style="fill:#fdf9d2;fill-opacity:1;stroke:#000000;stroke-width:1.41398096;stroke-opacity:1"></path>
<path d="m 50.110355,153.40257 -4.239115,3.56748 8.920807,10.32913 20.92409,15.35866 4.271637,0.11877 0.118774,4.27164 4.154277,4.39041 9.612242,0 1.423879,-1.89897 1.542654,1.7802 3.08672,0.11877 6.40816,7.23958 1.30511,-2.01775 4.0355,0.23755 0.95019,-1.42388 4.03551,0.11878 0.3549,0.94878 4.13731,0.22482 0.37188,-1.88483 4.50919,0.23613 0.23754,1.7802 7.23959,0 8.78223,-6.17061 3.56041,1.7802 4.50918,-0.11877 11.74877,-15.30918 5.45938,-0.11877 8.66346,-4.27164 0.71124,2.84918 1.7802,0 2.25388,-3.79796 -11.67524,-29.71198 0,-3.62969 20.11247,-0.16402 -7.58318,-21.43171 0,-8.7384 2.63849,-1.81273 -0.16544,-4.78067 3.7923,-1.15381 c 7.94233,-22.191014 8.72567,-10.715144 15.16777,-18.134302 0.34218,-2.764333 -0.2432,-4.865509 -2.96794,-5.440999 l 0,-7.912638 0,-8.243509 -7.08971,0 -2.80251,-5.770456 c -0.25734,-2.482951 1.17644,-2.007853 2.63708,-1.483267 l 1.15381,4.121755 c -0.71972,-4.059539 4.0963,-10.299438 -10.05624,-9.06786 -3.24508,-2.840688 -2.64414,-7.878702 -11.37547,-7.58318 l -4.12176,2.473053 -5.77045,-0.494894 -7.41916,-6.26535 -12.03439,0.329458 -2.80251,15.167774 -36.76351,9.892211 30.82903,40.224934 -3.46143,0 0.16402,4.12175 -15.16777,0 0.16543,-6.594805 -9.72677,0 0.16544,12.694725 -2.1436,-0.32946 c -1.98806,-1.08877 0.27148,0.93888 -7.58318,-4.45121 l 0.329458,-5.77046 c -3.672109,-3.902587 -8.930704,-1.982401 -13.84853,-1.31924 2.859069,2.03471 6.07022,4.5106 7.253722,4.45121 l -9.397317,-0.16544 c -0.17392,1.5469 -1.49175,2.45609 -5.605021,1.81414 l -6.594807,17.96887 -7.089701,0 -0.494894,15.00234 -11.540912,12.19983 0,1.65011 0.0028,0 z" id="Quilicura" style="fill:#fdf9d2;fill-opacity:1;stroke:#000000;stroke-width:1.41398096;stroke-opacity:1"></path>
<path d="m 243.52882,209.34673 2.12945,-1.14674 -0.22906,-37.74056 -0.91485,-0.22907 0,-5.48907 1.14391,-0.22907 0.68578,-4.11751 -46.89044,-20.58615 -10.03643,-1.57376 -20.11247,0.16402 0,3.62686 11.67524,29.71198 6.40816,16.49692 16.02182,28.95692 13.73259,-5.76197 10.64727,-2.54658 15.73903,0.46378 z" id="Conchalí" style="fill:#fdf9d2;fill-opacity:1;stroke:#000000;stroke-width:1.41398096;stroke-opacity:1"></path>
<path d="m 164.60888,490.613 36.82572,16.01192 -12.80925,36.29265 -5.33778,-2.13511 0,18.68011 -9.60659,19.74624 47.49987,20.28214 20.81521,4.27023 -21.3497,86.99518 8.00596,9.60659 -1.06755,1.60204 2.66818,3.20266 -6.93841,2.13511 16.01192,30.42181 -1.06755,13.8768 -5.33637,0 -2.13511,-11.74169 -5.33636,0.53307 -1.06756,-4.8033 -35.22509,3.20408 -2.13511,-6.40533 -2.66818,0.53449 2.13511,10.14107 6.9384,4.27022 4.27022,0 1.06756,2.13511 6.9384,0.53307 -1.06755,2.13511 -22.41726,6.40534 -7.47147,-0.53449 -19.21318,-10.67414 5.87085,-13.87681 -6.40392,-33.62305 -4.80329,-1.06756 -5.87085,-17.07948 3.20267,-8.00454 -5.87085,-1.06756 -3.73574,2.66818 -9.07351,-1.60062 1.60062,-9.07352 6.93841,-19.21459 -3.20267,-4.80188 -4.80329,0 -1.60063,-6.40392 -1.06756,-4.27163 -4.80329,-3.20267 4.27022,-10.67414 -8.00596,-7.47148 2.13511,-10.14107 3.20267,-3.73715 -1.06755,-6.93699 8.00596,-8.00596 2.66818,-36.82572 11.20863,-19.21318 9.60658,5.87085 10.67273,-38.96649 z" id="San_Bernardo" style="fill:#fdf9d2;fill-opacity:1;stroke:#000000;stroke-width:1.41398096;stroke-opacity:1"></path>
<path d="m 201.43602,506.62492 32.80577,13.60533 24.53257,3.8432 -16.77547,79.68773 -20.81522,-4.27023 -47.49986,-20.28214 9.60659,-19.74624 0,-18.68011 5.33778,2.13511 12.80784,-36.29265 z" id="El_Bosque" style="fill:#fdf9d2;fill-opacity:1;stroke:#000000;stroke-width:1.41398096;stroke-opacity:1"></path>
<path d="m 258.77436,524.07204 -24.53257,-3.8432 -32.80577,-13.60533 24.52974,-62.06245 48.15736,13.5629 -15.34876,65.94808 z" id="La_Cisterna" style="fill:#fdf9d2;fill-opacity:1;stroke:#000000;stroke-width:1.41398096;stroke-opacity:1"></path>
<path d="m 165.11367,472.43345 -0.50338,18.17955 36.82573,16.01192 24.52974,-62.06245 -43.59869,-18.58678 -17.2534,46.45776 z" id="Lo_Espejo" style="fill:#fdf9d2;fill-opacity:1;stroke:#020101;stroke-width:1.41398096;stroke-opacity:1"></path>
<path d="m 224.71297,372.18785 28.99651,0.73386 -27.74514,71.64076 -43.59869,-18.58678 17.2534,-46.45776 -0.62357,-6.82104 8.68468,0.15129 -0.35209,4.30557 17.38349,0.62074 0,-5.58664 0.001,0 z" id="Pedro_Aguirre_Cerda" style="fill:#fdf9d2;fill-opacity:1;stroke:#000000;stroke-width:1.41398096;stroke-opacity:1"></path>
<path d="m 225.96434,444.56247 27.74514,-71.64076 23.7464,0.50762 9.60658,86.06195 -7.79103,0.10181 -53.30709,-15.03062 z" id="San_Miguel" style="fill:#fdf9d2;fill-opacity:1;stroke:#000000;stroke-width:1.41398096;stroke-opacity:1"></path>
<path d="m 287.06388,459.49128 -7.79104,0.10181 -5.15113,-1.46913 -15.34735,65.94808 -3.14187,14.92315 42.99634,5.16103 -11.56495,-84.66494 z" id="San_Ramón" style="fill:#fdf9d2;fill-opacity:1;stroke:#000000;stroke-width:1.41398096;stroke-opacity:1"></path>
<path d="m 287.06388,459.49128 11.54798,84.69605 6.70651,0.7989 25.74577,-6.49866 -4.74956,-19.74624 7.49834,0 -2.24965,-70.98892 -9.49912,0 -18.47649,10.66707 -16.52378,1.0718 z" id="La_Granja" style="fill:#fdf9d2;fill-opacity:1;stroke:#000000;stroke-width:1.41398096;stroke-opacity:1"></path>
<path d="m 287.06388,459.49128 -9.57831,-86.06195 29.48999,-13.65906 3.26771,9.05089 3.92097,18.38034 6.61743,16.66518 6.12678,34.31025 4.41162,4.41162 0.24462,5.16245 -9.49913,0 -18.47649,10.66707 -16.52519,1.07321 z" id="San_Joaquín" style="fill:#fdf9d2;fill-opacity:1;stroke:#000000;stroke-width:1.41398096;stroke-opacity:1"></path>
<path d="m 331.06555,538.48757 -25.74576,6.49866 -49.67316,-5.98114 -13.64633,64.75326 -11.49849,46.88054 45.83844,4.20659 -3.54627,25.11796 4.31406,0 -1.43802,11.69504 29.90994,0 3.35538,-16.87162 0,-30.96336 35.08652,-6.71075 -1.24572,-10.83251 -0.86253,-20.99479 -4.79339,-6.51704 -2.01351,-28.76037 -1.82121,0 -2.87603,-18.50053 4.50635,0 -3.85027,-13.01994 z" id="La_Pintana" style="fill:#fdf9d2;fill-opacity:1;stroke:#000000;stroke-width:1.41398096;stroke-opacity:1"></path>
<path d="m 325.49164,227.31419 -8.41602,5.3703 -2.14783,5.48766 -11.69363,12.17013 -5.00973,0 -7.15899,5.25011 -1.43236,9.54579 -5.48907,10.50022 1.67132,0 -0.25876,8.38915 9.03958,31.91779 22.41019,-7.11939 0.49631,2.72616 3.9648,0.24744 12.63816,-6.69096 19.57657,-1.73495 8.9208,6.19465 18.1838,-30.7654 -4.3084,-4.67038 -30.97467,-27.75362 -10.65576,-3.9648 5.20487,-14.86801 -14.56118,-0.23189 z" id="Providencia" style="fill:#fdf9d2;fill-opacity:1;stroke:#000000;stroke-width:1.41398096;stroke-opacity:1"></path>
<path d="m 294.59474,315.94393 22.41019,-7.11939 0.4963,2.72615 3.96481,0.24745 12.63816,-6.69096 19.57656,-1.73495 8.92081,6.19465 18.12724,-30.7654 15.21019,9.68294 5.26142,27.4482 -2.05875,17.15442 -7.09112,22.18677 -16.0105,9.83565 -35.91088,-0.22906 -29.96367,3.88845 -3.18146,-9.00848 -12.3893,-43.81644 z" id="Ñuñoa" style="fill:#fdf9d2;fill-opacity:1;stroke:#000000;stroke-width:1.41398096;stroke-opacity:1"></path>
<path d="m 380.72739,278.80431 15.2102,9.68294 5.26142,27.4482 -2.05876,17.15441 15.94688,6.75318 27.21914,0.92616 15.55379,-0.74093 14.07194,5.18507 3.33275,-12.96197 75.73423,4.62938 0.37047,-4.81461 -4.62796,-8.70305 -6.85215,-4.99984 -2.03614,-2.77706 -4.99983,-4.44414 0.37187,-9.25733 -21.66501,-19.07178 -15.18333,-3.33275 -12.03581,-5.74076 -25.36682,3.51798 -0.92615,-8.88828 -35.55173,4.62796 -46.10709,0.92615 4.33809,4.88107 z" id="La_Reina" style="fill:#fdf9d2;fill-opacity:1;stroke:#000000;stroke-width:1.41398096;stroke-opacity:1"></path>
<path d="m 326.90845,438.17835 -6.12678,-34.31025 -6.61743,-16.66518 -4.00298,-18.42983 29.96367,-3.88845 35.91087,0.22907 16.01051,-9.83566 -6.90588,42.56649 -15.14232,29.73885 0,12.58867 -43.08966,-1.99371 z" id="Macul" style="fill:#fdf9d2;fill-opacity:1;stroke:#000000;stroke-width:1.41398096;stroke-opacity:1"></path>
<path d="m 495.53841,667.46526 c -4.97156,1.15098 -9.08766,-0.97282 -13.36636,-3.10369 -6.95679,-6.44068 -11.24681,5.27981 -16.52096,7.94799 -6.94971,-1.73354 -14.23172,-6.02356 -21.82904,-3.8135 -5.54139,4.19386 -11.46738,10.12269 -19.27397,6.46896 -5.73228,-5.50039 -12.76401,3.2875 -12.35395,9.2234 -5.49756,0.78334 -12.88137,-1.23299 -16.849,5.28263 -6.64995,20.23972 -5.0267,13.46251 -13.55584,12.54484 -6.53118,1.14957 -7.74861,14.26 -16.45308,11.19024 -1.72364,-6.91578 -5.22749,-1.41398 -9.77626,-0.74799 -7.20141,-2.24682 -12.51232,5.58664 -20.06864,2.85341 -6.55097,2.97785 -13.1684,3.47415 -19.9244,0.14706 -7.28201,-2.1337 -17.44429,-1.22734 -19.93148,7.36401 l 9.03817,-13.86126 0.90494,-17.3043 3.35538,-16.87162 0,-30.96335 35.08653,-6.71076 -1.24572,-10.83251 -0.86253,-20.99479 -4.7934,-6.51703 -2.0135,-28.76038 18.45528,-6.52269 12.49817,5.49897 15.99779,-2.00078 -0.50055,-8.99858 48.9902,-9.49912 -18.99684,-28.49455 26.99573,0.50055 9.99826,9.49913 6.99779,-7.49976 2.50133,5.99952 7.49834,-0.99968 6.50007,-2.49992 2.99906,0.50055 0.50054,33.99493 -14.49754,-5.49897 -2.99906,24.49722 -4.00015,-0.50055 -0.50055,21.9973 7.49976,9.49913 1.99937,12.49817 13.49786,6.49866 6.50007,-8.49802 53.99145,-3.00047 -0.50055,8.49944 c -1.60628,0 -6.56511,0.8696 -4.99984,3.99874 0.97,1.93856 1.2231,3.60848 0.50055,6.50007 -0.62356,2.50133 -0.86818,5.92175 -3.4996,7.49975 -2.64556,1.58649 -3.5604,2.1747 -6.49866,0.99969 -1.81131,-0.72538 -4.167,-2.83079 -4.99983,0.50055 -0.84415,3.37375 0.99968,3.32144 0.99968,6.99779 0,3.9549 -2.26802,3.57313 -2.99905,6.50007 -0.56418,2.26095 -2.58476,4.49929 -5.49897,4.49929 -2.29348,0 -5.5216,-0.0891 -5.99953,-1.99937 -0.10604,-0.42703 -0.9106,-6.3813 -1.50023,-6.50007 -1.3857,-0.27573 -6.72631,-0.45389 -4.99842,3.00046 0.91343,1.82969 1.48326,4.03268 0,6.9978 -0.49914,0.99402 -0.99969,1.99371 -1.49882,2.99339 z" id="Puente_Alto" style="fill:#fdf9d2;fill-opacity:1;stroke:#000000;stroke-width:1.41398096;stroke-opacity:1"></path>
<path d="m 326.90845,438.17835 4.41162,4.41162 0.24462,5.16244 2.24964,70.98892 -7.49834,0 4.74956,19.74624 3.84886,13.01711 -4.50636,0 2.87604,18.50053 1.82121,0 18.45528,-6.5227 12.49817,5.49898 15.99779,-2.00079 -0.50055,-8.99857 48.9902,-9.49913 -18.99684,-28.49454 26.99573,0.50055 9.99826,9.49912 6.70651,-7.13919 7.81507,-6.67116 -4.38475,-12.39072 -10.65294,-8.10211 0.73951,-2.76292 11.4377,0 -0.76214,-14.86942 33.9313,3.04996 -0.57125,-13.9164 -19.25276,-1.52428 -0.38178,-20.77845 5.52726,-6.67257 -8.57721,0 -4.76512,4.76653 -6.48169,2.09693 -36.02682,-0.76355 -52.75563,-4.14579 -43.18015,-1.98664 z" id="La_Florida" style="fill:#fdf9d2;fill-opacity:1;stroke:#000000;stroke-width:1.41398096;stroke-opacity:1"></path>
<path d="m 550.99898,336.88075 -75.73423,-4.62938 -3.33275,12.96197 -14.07194,-5.18507 -15.55379,0.74093 -27.21914,-0.92616 -15.94688,-6.75318 -7.09111,22.18678 -6.90588,42.56648 -15.14233,29.73885 0.0905,12.58302 52.75563,4.14579 36.02682,0.76355 6.48169,-2.09693 4.76512,-4.76653 8.5772,0 2.88028,-4.78067 3.40628,0.37894 16.27634,-14.38301 15.51985,-0.37895 5.67714,-4.92065 9.46236,-0.37895 0,-4.92065 17.03281,7.94799 10.22026,1.13542 15.51844,-13.24759 12.49111,0 6.05608,-4.92065 5.67855,-0.75648 15.51844,6.81256 9.84131,-0.37895 13.24758,-7.1915 8.70447,0.37894 -0.37895,-7.1915 -2.6498,-6.43362 -12.86864,-1.51437 -4.16276,-3.40628 -6.43502,-0.37895 -9.08483,-11.35568 -3.40628,0 -3.78523,-3.40628 -19.68262,-0.75648 -9.08482,-6.43503 -0.75648,-5.2996 -8.32694,-9.08483 -14.60784,-6.4633 z" id="Peñalolén" style="fill:#fdf9d2;fill-opacity:1;stroke:#000000;stroke-width:1.41398096;stroke-opacity:1"></path>
<path d="m 643.20044,384.98297 -12.86864,-1.51438 -4.16276,-3.40628 -6.43502,-0.37894 -9.08483,-11.35569 -3.40628,0 -3.78523,-3.40628 -19.68262,-0.75648 -9.08482,-6.43502 -0.75648,-5.2996 -8.32694,-9.08483 -14.60925,-6.46755 0.37046,-4.81461 -4.62796,-8.70305 -6.85215,-4.99984 -2.03613,-2.77705 -4.99984,-4.44415 0.37188,-9.25733 -21.66502,-19.07178 -15.18333,-3.33275 -12.0358,-5.74076 -25.36682,3.51798 -0.92616,-8.88828 -35.55172,4.62796 -46.06185,1.03079 -30.93083,-27.64898 -10.65576,-3.96481 5.20486,-14.86801 121.36482,-51.91997 12.03439,-14.70681 28.07742,-13.37061 15.70933,-1.67132 10.36165,-6.6853 6.01649,0.33511 7.35412,-6.3516 16.04444,2.34014 11.69928,0 0,9.69283 -7.68923,5.34768 -3.34265,9.35914 0,3.67635 8.02293,10.02796 2.67384,5.68278 -0.66882,7.35412 4.01147,2.00503 2.00644,-0.3337 13.70289,8.69032 23.39855,4.68028 4.01147,6.01649 -0.66882,30.75267 2.00503,1.67133 0,6.6853 17.38207,12.03298 15.37563,2.00502 6.35019,25.06847 -1.67133,8.02152 6.68672,13.0369 1.67132,24.73477 -10.02795,8.35663 -3.34265,9.02544 4.68027,6.6853 -1.33621,18.38458 -3.00895,0 -5.73511,10.80989 z" id="Las_Condes" style="fill:#fdf9d2;fill-opacity:1;stroke:#000000;stroke-width:1.41398096;stroke-opacity:1"></path>
<path d="m 330.77993,202.34611 c -0.93606,4.5304 0.15695,9.36056 -0.43975,13.90509 l -0.13998,7.84194 -4.70856,3.22105 14.55835,0.2333 121.36481,-51.91996 12.0344,-14.70682 18.15551,-8.77658 -4.75239,-5.55977 -35.70585,2.49143 -10.79433,-7.47289 -13.5629,-13.00862 -8.85859,-4.70573 -10.51719,0 -1.66002,-1.93716 -3.87431,-0.55428 -2.49143,-3.87572 -4.98287,0.55428 -3.87431,3.0443 -4.36778,-8.60124 -8.60973,-4.66897 -3.04431,6.64288 -3.8743,2.2143 -11.07147,0.83 -8.02717,9.13432 -6.92003,7.19575 6.36574,5.2586 -1.10714,16.05434 -3.87431,3.59716 0.27714,9.6886 0.23755,0.35208 -5.93165,2.69505 -0.26866,5.39151 2.96512,4.58271 -0.26866,7.00911 -6.47037,5.39151 -5.76056,8.45843 z" id="Vitacura" style="fill:#fdf9d2;fill-opacity:1;stroke:#000000;stroke-width:1.41398096;stroke-opacity:1"></path>
<path d="m 390.52911,121.12139 3.87431,-3.0443 4.98287,-0.55429 2.49143,3.87573 3.87431,0.55428 1.66001,1.93715 10.51719,0 8.85859,4.70573 13.56291,13.00863 10.79433,7.47288 35.70585,-2.49143 4.75239,5.55977 9.92332,-4.59402 15.70933,-1.67133 10.36165,-6.6853 6.01649,0.33512 7.35411,-6.35161 16.04445,2.34014 11.69927,0 0.37754,0.26017 8.06252,-1.55113 1.85938,4.03126 7.44178,-1.24007 -0.31107,5.27133 2.48154,3.72159 17.36227,-15.19322 0,-3.10086 8.37218,-5.27132 0.30966,-9.30258 26.66486,-4.03126 5.89064,-4.34093 8.37218,-17.054021 -59.84109,-37.206082 -4.33951,-0.620737 -8.9915,7.751444 -11.16338,-12.402028 -38.44614,10.231567 -30.69612,-11.471628 -17.98442,-10.542642 -33.17624,3.410522 0,3.720184 -9.9219,8.370767 -5.58099,-4.340921 2.7912,-4.650584 -6.82104,-1.240061 -1.24006,4.340921 -6.82105,-1.859385 -5.58098,2.480123 -0.61932,4.960245 4.96165,7.751444 13.95176,10.852304 -4.65059,1.551138 0.9304,6.200306 -5.58098,3.410522 -4.65059,-11.161966 -3.72159,0.309662 -3.09945,3.100861 -9.92332,4.961659 -0.61932,8.991505 3.7216,4.650584 -13.02277,7.441782 4.03126,6.511385 -9.61224,8.37076 0.65043,9.53024 z" id="Lo_Barnechea" style="fill:#fdf9d2;fill-opacity:1;stroke:#000000;stroke-width:1.41398096;stroke-opacity:1"></path>
<path d="m 181.834,108.06469 0,8.7384 7.58318,21.43171 10.03643,1.57376 46.89044,20.58615 33.02777,15.73337 50.96836,40.12312 c 0.59529,-4.54453 -0.49772,-9.37611 0.43975,-13.90509 l 5.76056,-8.45702 6.47037,-5.39151 0.26866,-7.0091 0.53873,0.89929 -8.6267,-8.6267 -3.95349,0.7183 -5.75066,-4.6732 10.06471,0 0.35916,-5.39151 -12.94076,-1.43802 0.71972,-2.87604 8.6267,-8.98585 -9.70416,-1.07745 -1.07886,3.23519 -4.31265,0 -0.71971,1.79717 -3.95349,-0.71831 -1.43802,5.75066 -18.69142,-7.90839 2.51689,-19.40972 -5.39151,-6.82953 -6.47038,-0.35915 -7.54783,4.67321 -5.39151,11.86189 -5.75066,-0.71831 -2.87604,6.47038 -10.06471,-4.67321 3.23519,-7.90839 -6.47038,-0.35915 5.03236,-14.01821 -2.51689,-3.95349 -10.06471,0.35915 0,-5.39151 -11.86189,-2.87462 4.31264,-14.377362 -5.39151,-5.032359 1.07887,-2.874623 -8.6267,-4.314056 -1.07887,4.314056 -5.03236,0 -1.07886,-1.79717 -2.87604,0 1.07887,3.59434 -6.10981,6.109812 -5.75067,0 0.71831,3.59434 -4.31265,4.314052 -5.03235,0 -2.51548,5.75066 -6.34594,-0.27996 z" id="Huechuraba" style="fill:#fdf9d2;fill-opacity:1;stroke:#000000;stroke-width:1.41398096;stroke-opacity:1"></path>
</svg>
<div id="alert-icons"></div>
<div id="alert-box" class="alert-box">
<div id="alert-content">
</div>
</div>
<div id="svg-missing" style="padding:12px; color:#666">Pega tu <svg> del mapa aquí arriba.
</div>
</div>
<div id="sidebar">
<div id="story">
<h2>El Sonido Silencioso de la Desigualdad:</h2>
<h3>¿Qué Estamos Viendo?</h3>
<p>Este mapa visualiza la cantidad estimativa de personas potencialmente expuestas a niveles de ruido
INACEPTABLE en el Gran Santiago Urbano durante el horario diurno (>65 dB) y nocturno (>55 dB).</p>
<h3>La Paradoja del Ruido</h3>
<p>En comunas de gran capital, el ruido alto se concentra en autopistas y se puede apreciar que generalmente baja al anochecer, lo que no perjudica su calidad de vida.
En contraste, comunas de bajos recursos manejan los mismos porcentajes, con menos autovías e incrementos nocturnos, afectando el descanso de sus habitantes.
Es así como el ruido nos informa sobre la disparidad urbana que se vive en nuestra capital.</p>
<h3>Fuentes</h3>
<p>
Información proveniente del estudio
<a href="https://ruido.mma.gob.cl/mapas-de-ruido" target="_blank">
"Mapa de Ruido del Gran Santiago"</a> del Ministerio del Medio Ambiente.
Datos extraídos directamente de la
<a href="https://ruido.mma.gob.cl/wp-content/uploads/2024/04/Minuta_Mapa_de_Ruido_Gran_Santiago_DRLO_MMA_2024.pdf" target="_blank">
minuta técnica del informe
</a> que detalla el porcentaje de población expuesta al ruidos en Santiago.
</p>
</div>
<div id="hover-info" aria-live="polite">
<h3 class="titulo">Pasa el mouse por una comuna!</h3>
<div class="valores-titles">
<p>Porcentaje Día</p>
<p>Porcentaje Noche</p>
</div>
<!-- Porcentajes (siempre mostramos ambos) -->
<div class="valores">
<div id="valor-dia" class="valor">—</div>
<div id="valor-noche" class="valor">—</div>
</div>
<div class="legend">
<div style="display:flex; align-items:center; justify-content:space-between;">
<strong>Superficie afectada</strong>
<small id="legend-title">(Día)</small>
</div>
<div class="legend-bar" id="legend-bar">
<div id="legend-dots"></div>
<span id="legend-pointer" aria-hidden="true" title="Valor hovereado"></span>
</div>
<div class="legend-scale">
<span>0%</span>
<span id="legend-max">—</span>
</div>
<!-- 🔀 Slider único (en el lugar de los botones) -->
<div class="switch-title">Alternar Día / Noche</div>
<div class="dataset-switch-area" aria-label="Cambiar Día/Noche y tema">
<label class="theme-switch" for="themeCheckbox">
<input type="checkbox" id="themeCheckbox" />
<div class="slider round">
<div class="sun" title="Día">☀️</div>
<div class="moon" title="Noche">🌙</div>
</div>
</label>
</div>
</div>
</div><!-- /hover-info -->
</div><!-- /sidebar -->
</div><!-- /main -->
<!-- Sonidos -->
<audio id="audioBajo" src="ruido_bajo.mp3"></audio>
<audio id="audioMedio" src="ruido_medio.mp3"></audio>
<audio id="audioAlto" src="ruido_alto.mp3"></audio>
<script>
/* =========================
DATOS
========================= */
const datosComunas = [
{ id:"Cerrillos", nombre:"Cerrillos", porcentaje_diurno:21, porcentaje_nocturno:31 },
{ id:"Cerro_Navia", nombre:"Cerro Navia", porcentaje_diurno:9, porcentaje_nocturno:14 },
{ id:"Conchalí", nombre:"Conchalí", porcentaje_diurno:13, porcentaje_nocturno:18 },
{ id:"El_Bosque", nombre:"El Bosque", porcentaje_diurno:5, porcentaje_nocturno:7 },
{ id:"Estación_Central", nombre:"Estación Central", porcentaje_diurno:15, porcentaje_nocturno:20 },
{ id:"Huechuraba", nombre:"Huechuraba", porcentaje_diurno:13, porcentaje_nocturno:17 },
{ id:"Independencia", nombre:"Independencia", porcentaje_diurno:10, porcentaje_nocturno:13 },
{ id:"La_Cisterna", nombre:"La Cisterna", porcentaje_diurno:10, porcentaje_nocturno:15 },
{ id:"La_Florida", nombre:"La Florida", porcentaje_diurno:13, porcentaje_nocturno:15 },
{ id:"La_Granja", nombre:"La Granja", porcentaje_diurno:10, porcentaje_nocturno:17 },
{ id:"La_Pintana", nombre:"La Pintana", porcentaje_diurno:6, porcentaje_nocturno:9 },
{ id:"La_Reina", nombre:"La Reina", porcentaje_diurno:15, porcentaje_nocturno:10 },
{ id:"Las_Condes", nombre:"Las Condes", porcentaje_diurno:19, porcentaje_nocturno:16, labelCoords:{x:525,y:220} },
{ id:"Lo_Barnechea", nombre:"Lo Barnechea", porcentaje_diurno:20, porcentaje_nocturno:19 },
{ id:"Lo_Espejo", nombre:"Lo Espejo", porcentaje_diurno:20, porcentaje_nocturno:29 },
{ id:"Lo_Prado", nombre:"Lo Prado", porcentaje_diurno:8, porcentaje_nocturno:13 },
{ id:"Macul", nombre:"Macul", porcentaje_diurno:17, porcentaje_nocturno:20 },
{ id:"Maipú", nombre:"Maipú", porcentaje_diurno:12, porcentaje_nocturno:14 },
{ id:"Padre_Hurtado", nombre:"Padre Hurtado", porcentaje_diurno:2, porcentaje_nocturno:2 },
{ id:"Pedro_Aguirre_Cerda", nombre:"Pedro Aguirre Cerda", porcentaje_diurno:9, porcentaje_nocturno:15 },
{ id:"Peñalolén", nombre:"Peñalolén", porcentaje_diurno:9, porcentaje_nocturno:11 },
{ id:"Providencia", nombre:"Providencia", porcentaje_diurno:16, porcentaje_nocturno:14 },
{ id:"Pudahuel", nombre:"Pudahuel", porcentaje_diurno:10, porcentaje_nocturno:18, labelCoords:{x:50,y:300} },
{ id:"Puente_Alto", nombre:"Puente Alto", porcentaje_diurno:9, porcentaje_nocturno:10 },
{ id:"Quilicura", nombre:"Quilicura", porcentaje_diurno:9, porcentaje_nocturno:14, labelCoords:{x:120,y:150} },
{ id:"Quinta_Normal", nombre:"Quinta Normal", porcentaje_diurno:9, porcentaje_nocturno:13 },
{ id:"Recoleta", nombre:"Recoleta", porcentaje_diurno:8, porcentaje_nocturno:10 },
{ id:"Renca", nombre:"Renca", porcentaje_diurno:15, porcentaje_nocturno:26 },
{ id:"San_Bernardo", nombre:"San Bernardo", porcentaje_diurno:8, porcentaje_nocturno:13 },
{ id:"San_Joaquín", nombre:"San Joaquín", porcentaje_diurno:11, porcentaje_nocturno:15 },
{ id:"San_Miguel", nombre:"San Miguel", porcentaje_diurno:7, porcentaje_nocturno:10 },
{ id:"San_Ramón", nombre:"San Ramón", porcentaje_diurno:10, porcentaje_nocturno:15 },
{ id:"Santiago", nombre:"Santiago", porcentaje_diurno:15, porcentaje_nocturno:17 },
{ id:"Vitacura", nombre:"Vitacura", porcentaje_diurno:24, porcentaje_nocturno:28 },
{ id:"Ñuñoa", nombre:"Ñuñoa", porcentaje_diurno:16, porcentaje_nocturno:14 }
];
/* =========================
UTIL DE COLOR
========================= */
function getColorFromPercentage(porcentaje, maxPorcentaje){
if (porcentaje == null) return "#cccccc";
const ratio = Math.max(0, Math.min(1, porcentaje / maxPorcentaje));
const r = Math.round(232 - ratio * (232 - 56));
const g = Math.round(245 - ratio * (245 - 142));
const b = Math.round(233 - ratio * (233 - 60));
return `rgb(${r},${g},${b})`;
}
function maxOfKey(modeKey){ return Math.max(...datosComunas.map(d => d[modeKey])); }
/* =========================
ESTADO
========================= */
let modoActivo = 'diurno'; // 'diurno' | 'nocturno'
let ultimoHoverPct = null;
let ultimaComunaId = null;
/* =========================
MAPA + LEYENDA + LABELS
========================= */
function pintarMapa(modo){
const svg = document.querySelector("#map-container svg");
if(!svg){ console.warn("SVG no encontrado aún"); return; }
const key = modo === 'diurno' ? 'porcentaje_diurno' : 'porcentaje_nocturno';
const maxValor = maxOfKey(key);
datosComunas.forEach(c => {
const path = svg.querySelector(`#${CSS.escape(c.id)}`);
if(!path) return;
const pct = c[key];
path.style.fill = getColorFromPercentage(pct, maxValor); // la paleta del mapa no cambia por tema
});
actualizarLeyenda(modo, maxValor);
}
function actualizarLeyenda(modo, maxValor){
const bar = document.getElementById('legend-bar');
const title = document.getElementById('legend-title');
const maxLabel = document.getElementById('legend-max');
const pointer = document.getElementById('legend-pointer');
const dotsContainer = document.getElementById('legend-dots');
const key = (modo === 'diurno') ? 'porcentaje_diurno' : 'porcentaje_nocturno';
// Fondo de la barra (de blanco/gris suave al color del máximo)
const maxColor = getColorFromPercentage(maxValor, maxValor);
const isDark = document.body.classList.contains('dark-mode');
const startColor = isDark ? '#d7e3ef' : '#ffffff';
bar.style.background = `linear-gradient(90deg, ${startColor}, ${maxColor})`;
// Títulos y escala
title.textContent = (modo === 'diurno' ? 'Día' : 'Noche');
maxLabel.textContent = `${maxValor}%`;
// ---- Render de todos los puntos (uno por comuna) ----
dotsContainer.innerHTML = "";
datosComunas.forEach(c => {
const pct = c[key];
if (pct == null) return;
const ratio = Math.max(0, Math.min(1, pct / maxValor));
const dot = document.createElement('div');
dot.className = 'legend-dot';
dot.style.left = `${ratio * 100}%`;
if (ultimaComunaId === c.id) dot.classList.add('active');
dotsContainer.appendChild(dot);
});
// ---- Puntero grande (se mantiene como efecto adicional) ----
if (typeof ultimoHoverPct === 'number' && isFinite(ultimoHoverPct)) {
const ratio = Math.max(0, Math.min(1, ultimoHoverPct / maxValor));
pointer.style.left = `${ratio * 100}%`;
pointer.style.display = 'block';
} else {
pointer.style.display = 'none';
}
}
function dibujarNombresComunas(){
const svg = document.querySelector("#map-container svg");
if(!svg) return;
svg.querySelectorAll(".comuna-label").forEach(n => n.remove());
const lineHeight = 14;
datosComunas.forEach(c => {
const path = svg.querySelector(`#${CSS.escape(c.id)}`);
if(!path) return;
const {x,y,width,height} = path.getBBox();
const cx = c.labelCoords?.x ?? (x + width/2);
const cy = c.labelCoords?.y ?? (y + height/2);
const text = document.createElementNS("http://www.w3.org/2000/svg","text");
text.classList.add("comuna-label");
text.setAttribute("x", cx);
text.setAttribute("y", cy);
const palabras = c.nombre.split(" ");
palabras.forEach((p, i) => {
const tspan = document.createElementNS("http://www.w3.org/2000/svg","tspan");
tspan.setAttribute("x", cx);
tspan.setAttribute("dy", i === 0 ? "0" : `${lineHeight}px`);
tspan.textContent = p;
text.appendChild(tspan);
});
const totalH = (palabras.length - 1)*lineHeight;
text.setAttribute("transform", `translate(0, -${totalH/2})`);
svg.appendChild(text);
});
}
/* =========================
AUDIO: SOLO 1 VEZ AL ENTRAR
========================= */
function detenerSonidos(){
document.querySelectorAll('audio').forEach(a => { a.pause(); a.currentTime = 0; a.loop=false; });
}
function reproducirSonido(porcentaje){
detenerSonidos();
let el;
if (porcentaje < 10) el = document.getElementById('audioBajo');
else if (porcentaje < 20) el = document.getElementById('audioMedio');
else el = document.getElementById('audioAlto');
if (el) el.play();
}
/* =========================
BOOTSTRAP
========================= */
document.addEventListener('DOMContentLoaded', () => {
const themeCheckbox = document.getElementById('themeCheckbox');
// Slider único: izquierda = Día + claro; derecha = Noche + oscuro
function aplicarModoSegunSlider(){
const noche = themeCheckbox.checked;
modoActivo = noche ? 'nocturno' : 'diurno';
document.body.classList.toggle('dark-mode', noche);
// Recalcular leyenda / mapa
const key = noche ? 'porcentaje_nocturno' : 'porcentaje_diurno';
if (ultimaComunaId) {
const c = datosComunas.find(d => d.id === ultimaComunaId);
if (c) ultimoHoverPct = c[key];
}
pintarMapa(modoActivo);
}
themeCheckbox.addEventListener('change', aplicarModoSegunSlider);
const svg = document.querySelector("#map-container svg");
if(!svg){
// no se ha pegado el SVG aún
} else {
const missing = document.getElementById('svg-missing');
if(missing) missing.remove();
}
// Inicial: Día + claro
aplicarModoSegunSlider(); // (por defecto el checkbox viene sin check → día/claro)
dibujarNombresComunas();
// Porcentajes debajo
const valDia = document.getElementById('valor-dia');
const valNoche = document.getElementById('valor-noche');
let comunaActiva = null;
// Listeners por comuna
if (svg){
datosComunas.forEach(c => {
const path = svg.querySelector(`#${CSS.escape(c.id)}`);
if(!path) return;
path.addEventListener('mouseenter', () => {
if (comunaActiva !== c.id) {
comunaActiva = c.id;
ultimaComunaId = c.id;
document.querySelector('#hover-info .titulo').textContent = c.nombre;
valDia.textContent = `${c.porcentaje_diurno}%`;
valNoche.textContent = `${c.porcentaje_nocturno}%`;
const key = (modoActivo === 'diurno') ? 'porcentaje_diurno' : 'porcentaje_nocturno';
reproducirSonido(c[key]);
// Puntero fijo a último hover en el modo activo
ultimoHoverPct = c[key];
actualizarLeyenda(modoActivo, maxOfKey(key));
}
});
path.addEventListener('mouseleave', () => {
comunaActiva = null;
detenerSonidos();
const key = (modoActivo === 'diurno') ? 'porcentaje_diurno' : 'porcentaje_nocturno';
actualizarLeyenda(modoActivo, maxOfKey(key));
});
});
}
});
const alertInfo = {
"Vitacura": "Vitacura, con una de las tasas de motorización mas altas, presenta niveles de ruido concentrados cerca de autopistas y avenidas, pero con bajo efecto en zonas residenciales.",
"Cerrillos": "Cerrillos tiene niveles de ruido notables, ya que en esta comuna se ubican zonas industriales y vías principales, y es contigua al aeropuerto Arturo Merino Benítez.",
"Lo_Barnechea": "En Lo Barnechea, el ruido se concentra en los accesos desde autopistas, con baja presencia nocturna, ya que es una zona poco densa poblacionalmente.",
"Lo_Espejo": "Esta comuna tiene una densidad poblacional sumamente alta, combinado con la necesidad de sus habitantes del acceso al transporte público, lo que genera mucho tránsito vehicular.",
"Renca": "Renca, además de tener acceso a autopistas, es una de las comunas con más aumento de ruido nocturno al ser un importante distrito industrial."
};
const alertBox = document.getElementById("alert-box");
const alertContent = document.getElementById("alert-content");
const alertIconsContainer = document.getElementById("alert-icons");
const mapa = document.querySelector("#map-container svg");
const mapContainerRect = document.getElementById("map-container").getBoundingClientRect();
let closeTimer = null;
Object.keys(alertInfo).forEach(comunaId => {
const comunaPath = mapa.getElementById(comunaId);
if (!comunaPath) return;
const comunaRect = comunaPath.getBoundingClientRect();
let centerX = comunaRect.left + comunaRect.width / 2;
let centerY = comunaRect.top + comunaRect.height / 2 + 12;
// Ajustes específicos
if (comunaId === "Lo_Barnechea" || comunaId === "Lo_Espejo") {
centerY += 10;
}
const relativeX = centerX - mapContainerRect.left;
const relativeY = centerY - mapContainerRect.top;
const icon = document.createElement("div");
icon.className = "alert-icon";
icon.textContent = "!";
icon.dataset.comuna = comunaId;
icon.style.left = `${relativeX}px`;
icon.style.top = `${relativeY}px`;
alertIconsContainer.appendChild(icon);
// Mostrar la caja al pasar el mouse
icon.addEventListener("mouseenter", () => {
clearTimeout(closeTimer);
alertBox.style.left = `${icon.offsetLeft + 30}px`;
alertBox.style.top = `${icon.offsetTop - 10}px`;
alertContent.innerHTML = `<strong>${comunaId.replaceAll("_", " ")}</strong><p>${alertInfo[comunaId]}</p>`;
alertBox.style.display = "block";
});
// Ocultar si se sale del icono (con retardo)
icon.addEventListener("mouseleave", () => {
closeTimer = setTimeout(() => {
alertBox.style.display = "none";
}, 200);
});
});
// Mantener caja visible si el mouse entra en ella
alertBox.addEventListener("mouseenter", () => {
clearTimeout(closeTimer);
});
// Ocultar si el mouse sale de la caja también
alertBox.addEventListener("mouseleave", () => {
closeTimer = setTimeout(() => {
alertBox.style.display = "none";
}, 200);
});
</script>
</body>
</html>