Skip to content

Commit a14599d

Browse files
gjrichtergjrichter
committed
work in progress
1 parent f7fddb1 commit a14599d

7 files changed

Lines changed: 1050 additions & 68 deletions

‎.DS_Store‎

8 KB
Binary file not shown.

‎Stage/referendum-arrows-2026-grid.html‎

Lines changed: 59 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -54,46 +54,26 @@
5454
#app-loading p { color: #555; font-size: 0.88rem; margin: 0; }
5555
@keyframes spin { to { transform: rotate(360deg); } }
5656

57-
#legend {
58-
position: absolute;
59-
bottom: 30px; left: 14px;
60-
z-index: 1000;
61-
background: rgba(20,20,20,0.88);
62-
border-radius: 10px;
63-
padding: 11px 14px;
64-
color: #e8e8e8;
65-
font-size: 0.72rem;
66-
box-shadow: 0 2px 14px rgba(0,0,0,0.35);
67-
border: 1px solid rgba(255,255,255,0.08);
68-
display: none;
69-
min-width: 205px;
70-
line-height: 1.7;
71-
}
72-
#legend b { display: block; font-size: 0.8rem; margin-bottom: 6px; color: #fff; }
73-
.leg-row { display: flex; align-items: center; gap: 8px; }
74-
.leg-bar { height: 6px; border-radius: 3px; flex: 1; }
75-
.leg-sep { border: none; border-top: 1px solid rgba(255,255,255,0.1); margin: 6px 0; }
76-
7757
#stats {
7858
position: absolute;
79-
bottom: 30px; right: 14px;
59+
bottom: 30px; left: 14px;
8060
z-index: 1000;
81-
background: rgba(20,20,20,0.88);
61+
background: rgba(255,255,255,0.93);
8262
border-radius: 10px;
8363
padding: 10px 14px;
8464
font-size: 0.75rem;
85-
box-shadow: 0 2px 14px rgba(0,0,0,0.35);
86-
border: 1px solid rgba(255,255,255,0.08);
65+
box-shadow: 0 2px 14px rgba(0,0,0,0.15);
66+
border: 1px solid rgba(0,0,0,0.08);
8767
line-height: 1.9;
8868
min-width: 185px;
8969
display: none;
9070
}
91-
#stats b { display: block; font-size: 0.8rem; color: #fff; margin-bottom: 4px; }
92-
.stat-row { display: flex; justify-content: space-between; gap: 12px; color: #bbb; }
93-
.si-val { color: #5ac8c8; font-weight: 700; }
94-
.no-val { color: #e07070; font-weight: 700; }
95-
.neu-val { color: #ccc; font-weight: 700; }
96-
.stat-sep { border: none; border-top: 1px solid rgba(255,255,255,0.08); margin: 5px 0; }
71+
#stats b { display: block; font-size: 0.8rem; color: #111; margin-bottom: 4px; }
72+
.stat-row { display: flex; justify-content: space-between; gap: 12px; color: #555; }
73+
.si-val { color: #007a7a; font-weight: 700; }
74+
.no-val { color: #b03030; font-weight: 700; }
75+
.neu-val { color: #444; font-weight: 700; }
76+
.stat-sep { border: none; border-top: 1px solid rgba(0,0,0,0.08); margin: 5px 0; }
9777
</style>
9878
</head>
9979
<body>
@@ -106,20 +86,18 @@
10686

10787
<div id="map" style="max-width: 1024px; margin:auto"></div>
10888

109-
<div id="legend">
110-
<b>📖 Legenda</b>
111-
<div class="leg-row">
112-
<div class="leg-bar" style="background:linear-gradient(to right,#8b1a1a,#f0a8a8)"></div>
113-
<span>← No vince (freccia sinistra)</span>
114-
</div>
115-
<div class="leg-row">
116-
<div class="leg-bar" style="background:linear-gradient(to right,#a0d8d8,#005858)"></div>
117-
<span>Sì vince (freccia destra) →</span>
118-
</div>
119-
<hr class="leg-sep">
120-
<span style="color:rgba(200,200,200,0.5);font-size:0.65rem">Dimensione freccia ∝ √(voti in più)</span>
89+
<div id="stats">
90+
<b>Risultato nazionale</b>
91+
<div class="stat-row"><span>Comuni Sì</span><span class="si-val" id="s-nsi">–</span></div>
92+
<div class="stat-row"><span>Voti in più (Sì)</span><span class="si-val" id="s-msi">–</span></div>
93+
<hr class="stat-sep">
94+
<div class="stat-row"><span>Comuni No</span><span class="no-val" id="s-nno">–</span></div>
95+
<div class="stat-row"><span>Voti in più (No)</span><span class="no-val" id="s-mno">–</span></div>
96+
<hr class="stat-sep">
97+
<div class="stat-row"><span>Margine finale</span><span id="s-fin">–</span></div>
12198
</div>
12299

100+
123101
<script>
124102
const TOPO_URL = "https://raw.githubusercontent.com/gjrichter/geo/main/italy/boundaries/italy_istat_municipalities_4326_500m.topojson";
125103
const DATA_URL = "https://raw.githubusercontent.com/ondata/referendum-download/main/data/20260322/scrutini_flat.csv";
@@ -200,6 +178,30 @@
200178
'</table>'
201179
].join("");
202180

181+
function buildStats() {
182+
var nSi = 0, nNo = 0, sumMSi = 0, sumMNo = 0;
183+
DATA.forEach(function(r) {
184+
var m = Math.abs(r.voti_si - r.voti_no);
185+
if (r.winner === "si") { nSi++; sumMSi += m; }
186+
else { nNo++; sumMNo += m; }
187+
});
188+
var finale = sumMSi - sumMNo; // = Σvoti_si - Σvoti_no
189+
var fmt = function(n) { return n.toLocaleString("it-IT"); };
190+
var finStr = (finale >= 0 ? "Sì +" : "No +") + fmt(Math.abs(finale));
191+
var finColor = finale >= 0 ? "#5ac8c8" : "#e07070";
192+
193+
document.getElementById("s-nsi").textContent = fmt(nSi);
194+
document.getElementById("s-msi").textContent = fmt(sumMSi);
195+
document.getElementById("s-nno").textContent = fmt(nNo);
196+
document.getElementById("s-mno").textContent = fmt(sumMNo);
197+
var fin = document.getElementById("s-fin");
198+
fin.textContent = finStr;
199+
fin.style.color = finColor;
200+
fin.style.fontWeight = "700";
201+
202+
document.getElementById("stats").style.display = "block";
203+
}
204+
203205
function buildMap() {
204206
var myMap = ixmaps.Map("map", {
205207
mapType: "VT_TONER_LITE",
@@ -211,6 +213,7 @@
211213
.options({
212214
objectscaling: "dynamic",
213215
normalSizeScale: "10000000",
216+
dynamicScalePow: "2.5",
214217
basemapopacity: 0,
215218
flushChartDraw: 1000000,
216219
flushPaintShape: 1000000
@@ -276,7 +279,8 @@
276279
fillopacity: 1,
277280
sizepow: 2,
278281
normalsizevalue: 100000,
279-
rotation: 35,
282+
rotation: 15,
283+
scale: 0.6,
280284
rangescale: 1,
281285
shadow: "false",
282286
units: "",
@@ -288,16 +292,13 @@
288292
valuesupper: "1:1000000",
289293
valuedecimals: "0",
290294
minvaluesize: "8",
291-
gridwidth: "20px",
295+
aggregationscale: [
296+
"1:1","1px",
297+
"1:1500000","desc_prov",
298+
],
292299
titlefield: "desc_com",
293-
showdata: "true",
294-
datafields: ["desc_com","desc_prov","voti_si_f","voti_no_f","margin_f"]
295-
})
296-
.meta({
297-
name: "chart_si",
298-
tooltip: "<h2 style='margin:0 0 0.5em 0'>{{desc_com}}</h2>{{theme.item.chart}}<br>voti in più Sì: {{raw.margin_f}}"
300+
showdata: "true"
299301
})
300-
.title("Voti in più — Sì vince")
301302
.define();
302303

303304
// ── Layer 5: frecce No (← sinistra, rotation 325) ────────────────────
@@ -314,7 +315,8 @@
314315
fillopacity: 1,
315316
sizepow: 2,
316317
normalsizevalue: 100000,
317-
rotation: 325,
318+
rotation: 345,
319+
scale: 0.6,
318320
rangescale: 1,
319321
shadow: "false",
320322
units: "",
@@ -326,7 +328,10 @@
326328
valuesupper: "1:1000000",
327329
valuedecimals: "0",
328330
minvaluesize: "8",
329-
gridwidth: "20px",
331+
aggregationscale: [
332+
"1:1","1px",
333+
"1:1500000","desc_prov",
334+
],
330335
titlefield: "desc_com",
331336
showdata: "true",
332337
datafields: ["desc_com","desc_prov","voti_si_f","voti_no_f","margin_f"]
@@ -356,6 +361,7 @@
356361
try {
357362
await loadData();
358363
document.getElementById("app-loading").style.display = "none";
364+
buildStats();
359365
buildMap();
360366
} catch(err) {
361367
document.getElementById("app-loading").innerHTML =

0 commit comments

Comments
 (0)