viewof dashboard = { const { REGION_COLORS, REGION_ES } = constants; const years = [...new Set(data.map(d => d.year))].sort((a, b) => a - b); // ====== ESTADO INTERNO ====== let currentYear = years.includes(2020) ? 2020 : years[years.length - 1]; let activeRegions = new Set(Object.keys(REGION_COLORS)); let playing = false; let playInterval = null; // ====== ROOT CONTAINER ====== const root = htl.html`

`; // ====== HEADER ====== const header = htl.html`

        InfoVis ECD 2025 — World Bank Data360
      

Conectividad digital y gobierno electrónico: cada burbuja es un país, animado en el tiempo.

      Eje X = Uso de internet (% pob.)

      Eje Y = Índice de E-Gobierno (0–1)

      Tamaño = IDH

      Color = Región

`; // ====== CONTROLES (slider + play + año display) ====== const yearLabel = htl.html`${currentYear}`; const slider = htl.html``; const playBtn = htl.html``; const controls = htl.html`

Año: ${yearLabel} ${slider} ${playBtn}

`; // ====== LEYENDA / FILTRO ====== const legendContainer = htl.html`

`; const legendItems = {}; for (const [region, color] of Object.entries(REGION_COLORS)) { const item = htl.html`

      
      ${REGION_ES[region] ?? region}
    

`; item.addEventListener("click", () => { if (activeRegions.has(region)) { activeRegions.delete(region); item.style.opacity = "0.25"; } else { activeRegions.add(region); item.style.opacity = "1"; } renderChart(); }); legendItems[region] = item; legendContainer.appendChild(item); } // ====== CONTENEDOR DEL CHART ====== const chartContainer = htl.html`

`; // ====== FOOTER ====== const footer = htl.html`

    Fuentes: World Bank Data360 — WDI, UNDP (IDH), UN (EGDI). c. 2000–2022.
  

`; // ====== LÓGICA DE RENDER ====== function renderChart() { const filtered = data.filter(d => d.year === currentYear && d.internet != null && d.egov != null && d.hdi != null && activeRegions.has(d.region) ); const chart = Plot.plot({ width: 900, height: 440, marginLeft: 55, marginBottom: 50, marginRight: 25, marginTop: 15, style: { fontFamily: "'DM Mono', monospace", fontSize: "10px", background: "transparent", color: "#5a5a54" }, x: { domain: [0, 100], label: "POBLACIÓN QUE USA INTERNET (%) →", tickFormat: d => d + "%", grid: true, nice: false }, y: { domain: [0, 1], label: "↑ ÍNDICE DE E-GOBIERNO (EGDI)", grid: true }, r: { domain: [0.3, 1.0], range: [2, 14], type: "sqrt" }, color: { domain: Object.keys(REGION_COLORS), range: Object.values(REGION_COLORS), legend: false }, marks: [ Plot.dot(filtered, { x: "internet", y: "egov", r: "hdi", fill: "region", stroke: "rgba(0,0,0,0.25)", strokeWidth: 0.5, fillOpacity: 0.55, tip: true, channels: { País: "name", ISO: "iso3", Región: d => REGION_ES[d.region] ?? d.region, "Internet (%)": d => d.internet.toFixed(1), "EGDI": d => d.egov.toFixed(3), "IDH": d => d.hdi.toFixed(3), "Comercio (% PIB)": d => d.trade_pct_gdp != null ? d.trade_pct_gdp.toFixed(1) : "—" } }), Plot.text([filtered.length], { x: 98, y: 0.02, text: d => `${d} países`, textAnchor: "end", fontSize: 10, fill: "#9a9a90" }) ] }); chartContainer.replaceChildren(chart); yearLabel.textContent = currentYear; // Actualiza el value reactivo de la view root.value = { year: currentYear, regions: [...activeRegions] }; root.dispatchEvent(new CustomEvent("input")); } // ====== EVENT WIRING ====== slider.addEventListener("input", () => { currentYear = +slider.value; renderChart(); }); playBtn.addEventListener("click", () => { if (playing) { clearInterval(playInterval); playBtn.innerHTML = "▶ Animar"; playing = false; } else { if (currentYear >= years[years.length - 1]) currentYear = years[0]; playing = true; playBtn.innerHTML = "❚❚ Pausar"; playInterval = setInterval(() => { const idx = years.indexOf(currentYear); if (idx >= years.length - 1) { clearInterval(playInterval); playBtn.innerHTML = "▶ Animar"; playing = false; return; } currentYear = years[idx + 1]; slider.value = currentYear; renderChart(); }, 600); } }); // ====== MONTAJE ====== root.appendChild(header); root.appendChild(controls); root.appendChild(legendContainer); root.appendChild(chartContainer); root.appendChild(footer); // Render inicial renderChart(); return root; }