viewof dashboard = { // ====== CONSTANTES INTERNAS ====== const VARIABLES = [ { key: 'trade_pct_gdp', label: 'Comercio % PIB', pillar: 1, fmt: v => v.toFixed(1) + '%' }, { key: 'exports_usd_k', label: 'Exportaciones', pillar: 1, fmt: v => '$' + d3.format(',.0f')(v/1e6) + 'B' }, { key: 'fdi_pct_gdp', label: 'IED Entrante', pillar: 1, fmt: v => v.toFixed(2) + '%' }, { key: 'wealth_pc', label: 'Riqueza / capita', pillar: 1, fmt: v => '$' + d3.format(',.0f')(v) }, { key: 'freedom_score', label: 'Libertad', pillar: 2, fmt: v => v.toFixed(0) + ' / 100' }, { key: 'corruption_ctrl', label: 'Ctrl. Corrupcion', pillar: 2, fmt: v => v.toFixed(1) }, { key: 'internet_pct', label: 'Internet', pillar: 3, fmt: v => v.toFixed(1) + '%' }, { key: 'hdi', label: 'IDH', pillar: 0, fmt: v => v.toFixed(3) } ]; const PILLAR_COLORS = { 0: '#1a1a18', 1: '#c9a96e', 2: '#6e9e8a', 3: '#7a8bbf' }; // ====== CARGA DEL TOPOJSON DEL MUNDO ====== const world = await d3.json("https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json"); const land = topojson.feature(world, world.objects.countries); // ====== ESTADO INTERNO ====== let activeVar = 'trade_pct_gdp'; // ====== ROOT CONTAINER ====== const root = htl.html`

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

        InfoVis ECD 2025 — World Bank Data360
      

Cartograma no contiguo: cada país conserva su forma real pero se escala según la variable seleccionada.

      Tamaño = variable seleccionada

      Color = IDH

      Silueta gris = forma original

`; // ====== CONTROLES (selector de variable) ====== const controls = document.createElement('div'); controls.style.cssText = ` padding: 0.8rem 1.5rem; background: #ffffff; border-bottom: 0.5px solid rgba(26,26,24,0.10); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; `; const label = document.createElement('span'); label.textContent = 'Tamaño por'; label.style.cssText = 'font-family:"DM Mono",monospace;font-size:11px;color:#9a9a90;text-transform:uppercase;letter-spacing:0.04em;margin-right:4px;'; controls.appendChild(label); const buttons = {}; let lastPillar = null; VARIABLES.forEach(v => { if (lastPillar !== null && v.pillar !== lastPillar) { const sep = document.createElement('div'); sep.style.cssText = 'width:1px;height:20px;background:rgba(26,26,24,0.18);margin:0 4px;'; controls.appendChild(sep); } lastPillar = v.pillar; const btn = document.createElement('button'); btn.dataset.key = v.key; btn.style.cssText = 'font-family:"DM Mono",monospace;font-size:11px;padding:5px 12px;border:0.5px solid rgba(26,26,24,0.18);border-radius:4px;background:transparent;color:#5a5a54;cursor:pointer;letter-spacing:0.03em;'; btn.innerHTML = `${v.label}`; btn.onclick = () => { activeVar = v.key; updateButtons(); renderChart(); root.value = { activeVar }; root.dispatchEvent(new CustomEvent('input')); }; buttons[v.key] = btn; controls.appendChild(btn); }); function updateButtons() { Object.entries(buttons).forEach(([key, btn]) => { const active = key === activeVar; btn.style.background = active ? '#1a1a18' : 'transparent'; btn.style.color = active ? '#f7f5f0' : '#5a5a54'; btn.style.borderColor = active ? '#1a1a18' : 'rgba(26,26,24,0.18)'; }); } // ====== CHART CONTAINER ====== const chartContainer = document.createElement('div'); chartContainer.style.cssText = 'padding:1rem;background:#f7f5f0;display:flex;justify-content:center;'; // ====== TOOLTIP ====== const tooltip = htl.html`

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

    Fuentes: World Bank Data360 (WDI, WITS, WGI), UNDP (IDH), Freedom House. Base geográfica: Natural Earth 110m.
  

`; // ====== ESCALAS ====== const hdiScale = d3.scaleSequential() .domain([0.38, 0.95]) .interpolator(d3.interpolateRgb("#d4e8f5", "#0c3a5e")); function scaleForVar(varKey) { const vals = Object.values(DATA) .map(d => d[varKey]) .filter(v => v != null && v > 0); if (!vals.length) return () => 0.3; const sorted = vals.slice().sort(d3.ascending); const lo = d3.quantile(sorted, 0.02); const hi = d3.quantile(sorted, 0.95); return d3.scaleSqrt().domain([lo, hi]).range([0.15, 1.0]).clamp(true); } // ====== RENDER DEL MAPA ====== function renderChart() { // Ancho disponible del contenedor (responsive) //const w = Math.min(1040, root.clientWidth || 1040); const w = root.clientWidth; if (!w || w < 50) return; // esperamos a tener ancho real // Natural Earth proyecta con aspect ratio ~0.49 (ancho:alto) // Calculamos el alto ajustado al bounding box real del mapa const projection = d3.geoNaturalEarth1().fitWidth(w, { type: "Sphere" }); const [[, y0], [, y1]] = d3.geoPath(projection).bounds({ type: "Sphere" }); const h = Math.ceil(y1 - y0); projection.translate([w / 2, h / 2]); const path = d3.geoPath(projection); const varDef = VARIABLES.find(v => v.key === activeVar); const sScale = scaleForVar(activeVar); const svg = d3.create("svg") .attr("viewBox", [0, 0, w, h]) .attr("width", "100%") .attr("height", "auto") .style("display", "block") .style("max-height", "540px"); // graticule svg.append("path") .datum(d3.geoGraticule()()) .attr("fill", "none") .attr("stroke", "#eae7e1") .attr("stroke-width", 0.3) .attr("d", path); // ghost layer svg.append("g").selectAll("path") .data(land.features) .join("path") .attr("d", path) .attr("fill", "#e8e5df") .attr("stroke", "#d0cdc6") .attr("stroke-width", 0.3); // countries escalados svg.append("g").selectAll("path") .data(land.features.filter(d => DATA[d.id])) .join("path") .attr("d", path) .attr("fill", d => { const c = DATA[d.id]; return c?.hdi != null ? hdiScale(c.hdi) : "#ccc"; }) .attr("stroke", "rgba(0,0,0,0.25)") .attr("stroke-width", 0.5) .attr("vector-effect", "non-scaling-stroke") .attr("transform", d => { const c = DATA[d.id]; const [cx, cy] = path.centroid(d); if (!c || c[activeVar] == null || c[activeVar] <= 0) { return `translate(${cx},${cy}) scale(0.08) translate(${-cx},${-cy})`; } const s = sScale(c[activeVar]); return `translate(${cx},${cy}) scale(${s}) translate(${-cx},${-cy})`; }) .style("cursor", "pointer") .on("mouseover", function(event, d) { const c = DATA[d.id]; if (!c) return; d3.select(this).attr("stroke", "#1a1a18").attr("stroke-width", 1.2); const val = c[activeVar]; const valStr = val != null ? varDef.fmt(val) : "sin dato"; const hdiStr = c.hdi != null ? c.hdi.toFixed(3) : "—"; tooltip.innerHTML = `

${c.name ?? d.properties?.name ?? d.id}

${d.id}

${varDef.label} ${valStr}

IDH ${hdiStr}

`; tooltip.style.opacity = "1"; }) .on("mousemove", function(event) { const rect = root.getBoundingClientRect(); const pad = 14, tw = 220; let xp = event.clientX - rect.left + pad; if (xp + tw > rect.width) xp = event.clientX - rect.left - tw - pad; tooltip.style.left = xp + "px"; tooltip.style.top = (event.clientY - rect.top - 10) + "px"; }) .on("mouseout", function() { d3.select(this).attr("stroke", "rgba(0,0,0,0.25)").attr("stroke-width", 0.5); tooltip.style.opacity = "0"; }); chartContainer.replaceChildren(svg.node()); } // ====== MONTAJE ====== root.appendChild(header); root.appendChild(controls); root.appendChild(chartContainer); root.appendChild(footer); root.appendChild(tooltip); updateButtons(); renderChart(); const ro = new ResizeObserver(() => renderChart()); ro.observe(chartContainer); invalidation.then(() => ro.disconnect()); ro.observe(chartContainer); if (document.body) ro.observe(document.body); invalidation.then(() => ro.disconnect()); return root; }