// --- C) Animation engine (REPLACEMENT for your previous animation cell) --- // Cycles over YEARS at the current month. Keeps a constant radial scale when 'scale_fixed' is ON. { // Normalise selected years const yearsList = years.map((y) => typeof y === "object" && y.value ? y.value : y ); if (!yearsList.length) html`

No years selected for animation.

`; // Init global play state if (!window.__windroseAnim) window.__windroseAnim = { idx: 0, timer: null }; // Helper: build trace + layout for a given year (respecting fixed scale and normalisation) function frameForYear(y) { const dataY = windroseDataSingleYear( String(y), mes, municipio, geo, parseNumberPT ); // Data for this year // r-values: raw counts or % of total per frame const total = dataY.conteo.reduce((a, b) => a + b, 0) || 1; // Avoid /0 const rVals = normalise_pct ? dataY.conteo.map((c) => (100 * c) / total) // Percentages : dataY.conteo; // Raw counts // Radial axis range: fixed or auto-per-frame const radialRange = scale_fixed ? [0, Math.max(1, fixedRadialMax || (normalise_pct ? 100 : 1))] // Fixed cap : [ 0, Math.max(1, (normalise_pct ? 100 : Math.max(0, ...dataY.conteo)) || 1) ]; // Auto // Radial tick suffix: % when normalised const tickSuffix = normalise_pct ? "%" : ""; // Build trace const trace = { type: "barpolar", r: rVals, theta: dataY.sectores, width: Array(dataY.sectores.length).fill(360 / dataY.sectores.length), marker: { color: dataY.promedio_pm, colorscale: "YlOrRd", reversescale: true, cmin: 0, cmax: 15, colorbar: { title: "PM2.5 (μg/m³)", titleside: "right", thickness: 16, outlinewidth: 1, x: 1.05 }, line: { color: "black", width: 1 }, opacity: 0.85 }, text: dataY.sectores.map((s, i2) => { const cases = dataY.conteo[i2] || 0; const pm = dataY.promedio_pm[i2] != null ? dataY.promedio_pm[i2].toFixed(1) : "-"; const ws = dataY.promedio_ws[i2] != null ? dataY.promedio_ws[i2].toFixed(2) : "-"; const wd = dataY.promedio_wd[i2] != null ? dataY.promedio_wd[i2].toFixed(0) : "-"; return `Sector: ${dataY.etiquetas[i2]}
Cases: ${cases}
PM2.5 avg: ${pm} μg/m³
Wind Speed avg: ${ws} m/s
Wind Direction avg: ${wd}°`; }), hoverinfo: "text" }; // Layout with constant radial scale if requested const layout = { title: { text: `Windrose by PM2.5 — ${municipio} (Year: ${y}, Month: ${String( mes ).padStart(2, "0")})`, font: { size: 16, family: "Roboto, Arial, sans-serif", color: "#222" } }, polar: { angularaxis: { direction: "clockwise", rotation: 90, tickmode: "array", tickvals: [0, 45, 90, 135, 180, 225, 270, 315], ticktext: [ "North (0°)", "45°", "East (90°)", "135°", "South (180°)", "225°", "West (270°)", "315°" ], tickfont: { size: 14, color: "#222" } }, radialaxis: { range: radialRange, // <-- fixed or auto radial scale ticksuffix: tickSuffix, // "%" when normalised tickformat: "~s", showline: false, linewidth: 2, gridcolor: "#ddd", gridwidth: 1 }, bgcolor: "#f8f8f8" }, autosize: true, height: 500, margin: { t: 70, l: 50, r: 80, b: 50 }, paper_bgcolor: "#fff", plot_bgcolor: "#fff" }; return { trace, layout }; } // Ensure target DIV exists (created earlier as animDiv) if (!document.getElementById("windrose_pm_anim")) { const d = html`

`; d; // Render placeholder if missing } // Render current frame (used on load and when stopping) function render(i) { const y = yearsList[i % yearsList.length]; const { trace, layout } = frameForYear(y); Plotly.react("windrose_pm_anim", [trace], layout, { responsive: true, displayModeBar: true, toImageButtonOptions: { format: "svg", filename: `windrose_${municipio}`, height: 500, width: 600, scale: 2 } }); } // Hook up buttons you already created (play_anim, pause_anim, stop_anim) if (play_anim) { clearInterval(window.__windroseAnim.timer); window.__windroseAnim.timer = setInterval(() => { render(window.__windroseAnim.idx); window.__windroseAnim.idx = (window.__windroseAnim.idx + 1) % yearsList.length; }, anim_speed); } if (pause_anim) { clearInterval(window.__windroseAnim.timer); window.__windroseAnim.timer = null; } if (stop_anim) { clearInterval(window.__windroseAnim.timer); window.__windroseAnim.timer = null; window.__windroseAnim.idx = 0; if (yearsList.length) render(0); } // Auto re-render on data/selection changes when not playing if (!window.__windroseAnim.timer && yearsList.length) { render(window.__windroseAnim.idx % yearsList.length); } html`

Status: ${window.__windroseAnim.timer ? "Playing" : "Paused/Stopped"} · Frame: ${ yearsList.length ? (window.__windroseAnim.idx % yearsList.length) + 1 : 0 }/${yearsList.length} · Month: ${String(mes).padStart(2, "0")} · Fixed scale: ${scale_fixed ? "Yes" : "No"} · Normalised: ${normalise_pct ? "Yes" : "No"}

`; }