45:["$","title",null,{"children":"L3 Data Blinding | Luis Guerrero Peñaranda | Observable"}] 4d:T5c3e,// ===================================================================== // Cobertura neta en primaria y secundaria por municipio, 2005-2024 // Observable Notebooks 2.0 · TODO EN UNA SOLA CELDA (D3) // // Pega este bloque completo en UNA celda JavaScript. // Cambia solo los nombres de archivo de la sección CARGA si los tuyos son otros // (Observable exige que el nombre vaya escrito literal dentro de FileAttachment). // ===================================================================== { // ============================ CONFIGURACIÓN ============================ const UMBRALES = [40, 55, 70, 85, 100]; // cortes de color (%), fijos para todos los años const VELOCIDAD = 900; // milisegundos por año en la animación const ANCHO = Math.min(width, 1300); // ================================ CARGA ================================ const [libro, mpiosGeo, dptosGeo] = await Promise.all([ FileAttachment("CoberturaPrimariaSecundaria_2005_2022.xlsx").xlsx(), FileAttachment("MGN_ANM_MPIOS.geojson").json(), FileAttachment("MGN_ANM_DPTOS.geojson").json() ]); const filas = libro.sheet(libro.sheetNames[0], {headers: true}); // =============================== DATOS ================================= const aNumero = v => { if (v == null || v === "") return null; if (typeof v === "number") return Number.isFinite(v) ? v : null; const s = String(v).trim(); const n = s.includes(",") ? +s.replace(/\./g, "").replace(",", ".") : +s; return Number.isFinite(n) ? n : null; }; const datos = filas.map(d => { const cod = String(d["Código Entidad"]).padStart(5, "0"); return { anio: +d["Año"], cod, dpto: cod.slice(0, 2), departamento: d["Departamento"], entidad: d["Entidad"], primaria: aNumero(d["Cobertura neta en educación primaria"]), secundaria: aNumero(d["Cobertura neta en educación secundaria"]) }; }); const porCodigo = d3.index(datos, d => d.cod, d => d.anio); const anios = Array.from(new Set(datos.map(d => d.anio))).sort(d3.ascending); const nombresDpto = new Map(datos.filter(d => d.cod !== "01001").map(d => [d.dpto, d.departamento])); const umbrales = UMBRALES; const color = d3.scaleThreshold(umbrales, d3.schemeBlues[umbrales.length + 1]); const pct = v => (v == null || !Number.isFinite(v)) ? "sin dato" : v.toFixed(1).replace(".", ",") + " %"; const codSeleccion = (dpto, mpio) => { if (mpio) return mpio; if (dpto) return porCodigo.has(dpto + "000") ? dpto + "000" : Array.from(porCodigo.keys()).find(c => c.startsWith(dpto) && c !== "01001"); // Bogotá → 11001 return "01001"; }; // ============================ FUNCIONES ================================ function reproductor(valores, {delay = 900, loop = true} = {}) { let i = 0, timer = null; const boton = htl.html``; const rango = htl.html``; const etiqueta = htl.html`Año ${valores[0]}`; const form = htl.html``; const fijar = j => { i = j; rango.value = i; etiqueta.value = `Año ${valores[i]}`; form.value = valores[i]; form.dispatchEvent(new Event("input", {bubbles: true})); }; const parar = () => { clearInterval(timer); timer = null; boton.textContent = "▶ Play"; }; const iniciar = () => { boton.textContent = "⏸ Pausa"; timer = setInterval(() => { if (!form.isConnected) return parar(); if (i >= valores.length - 1) { if (loop) fijar(0); else parar(); } else fijar(i + 1); }, delay); }; boton.onclick = () => (timer ? parar() : iniciar()); rango.oninput = event => { event.stopPropagation(); fijar(+rango.value); }; form.onsubmit = event => event.preventDefault(); form.value = valores[0]; return form; } function crearMapas({mpiosGeo, dptosGeo, porCodigo, nombresDpto, color, umbrales, width}) { const niveles = [ {key: "primaria", titulo: "Primaria", sub: "Cobertura neta · edad 6 a 10 años"}, {key: "secundaria", titulo: "Secundaria", sub: "Cobertura neta · edad 11 a 14 años"} ]; const gap = 16; const w = Math.floor((width - gap) / 2); // siempre dos columnas const h = Math.round(w * 1.2); const fmt = v => v == null ? "sin dato" : v.toFixed(1).replace(".", ",") + " %"; const pad = (v, n) => String(v).padStart(n, "0"); const capitalizar = s => String(s).toLowerCase().replace(/(^|[\s(.-])\p{L}/gu, c => c.toUpperCase()); const valor = (cod, anio, key) => porCodigo.get(cod)?.get(anio)?.[key] ?? null; const nombreDatos = cod => porCodigo.get(cod)?.values().next().value?.entidad ?? null; const projection = d3.geoMercator().fitExtent([[10, 64], [w - 10, h - 10]], mpiosGeo); const path = d3.geoPath(projection); const feats = mpiosGeo.features.map(f => { const cod = pad(f.properties.MPIO_CDPMP, 5); return {f, cod, dpto: pad(f.properties.DPTO_CCDGO, 2), nombre: nombreDatos(cod) ?? capitalizar(f.properties.MPIO_CNMBR), d: path(f)}; }); const featPorCod = new Map(feats.map(d => [d.cod, d.f])); const dptoFeat = new Map(dptosGeo.features.map(f => [pad(f.properties.DPTO_CCDGO, 2), f])); const refDpto = (dpto, anio, key) => valor(dpto + "000", anio, key) ?? (dpto === "11" ? valor("11001", anio, key) : null); let anioActual = null; // ---------- contenedor y tooltip ---------- const cont = d3.create("div") .style("position", "relative") .style("display", "grid") .style("grid-template-columns", "repeat(2, minmax(0, 1fr))") .style("gap", `${gap}px`) .style("font-family", "system-ui, sans-serif"); const tip = cont.append("div") .style("position", "absolute") .style("pointer-events", "none") .style("background", "rgba(255,255,255,0.97)") .style("border", "1px solid #ccc") .style("border-radius", "6px") .style("box-shadow", "0 2px 8px rgba(0,0,0,0.15)") .style("padding", "8px 10px") .style("font-size", "12px") .style("line-height", "1.45") .style("max-width", "250px") .style("z-index", 10) .style("display", "none"); const htmlTip = (d, keyMapa) => { const fila = porCodigo.get(d.cod)?.get(anioActual); const dep = nombresDpto.get(d.dpto) ?? ""; let cuerpo; if (fila) { const linea = (k, etq) => { const v = fila[k]; const txt = `${etq}: ${fmt(v)}${v > 100 ? " ⚠" : ""}`; return k === keyMapa ? `${txt}` : txt; }; cuerpo = `${linea("primaria", "Primaria")}
${linea("secundaria", "Secundaria")}`; if (fila.primaria > 100 || fila.secundaria > 100) cuerpo += `

⚠ Supera 100 %: revisar denominador o estudiantes de otros municipios

`; } else { cuerpo = `Sin dato municipal (área no municipalizada o sin reporte).` + `
Ref. departamental: primaria ${fmt(refDpto(d.dpto, anioActual, "primaria"))}, ` + `secundaria ${fmt(refDpto(d.dpto, anioActual, "secundaria"))}`; } return `

${d.nombre}

` + `

${dep} · ${anioActual}

${cuerpo}`; }; // ---------- zoom compartido por los dos mapas ---------- const svgs = [], grupos = [], mapas = []; const zoom = d3.zoom() .extent([[0, 0], [w, h]]) .scaleExtent([1, 60]) .translateExtent([[0, 0], [w, h]]) .on("zoom", function (event) { grupos.forEach(g => g.attr("transform", event.transform)); // si el usuario hace zoom con el mouse en un mapa, el otro lo sigue if (event.sourceEvent) svgs.forEach(s => { if (s.node() !== this) s.node().__zoom = event.transform; }); }); for (const nivel of niveles) { const pid = "sin-dato-" + Math.random().toString(36).slice(2, 9); const svg = cont.append("svg") .attr("width", w).attr("height", h) .attr("viewBox", [0, 0, w, h]) .style("width", "100%").style("height", "auto").style("box-sizing", "border-box") .style("background", "#fff") .style("border", "1px solid #e3e3e3") .style("cursor", "grab"); // trama para "sin dato" (no se confunde con la escala de luminosidad) const pat = svg.append("defs").append("pattern") .attr("id", pid).attr("patternUnits", "userSpaceOnUse") .attr("width", 4).attr("height", 4).attr("patternTransform", "rotate(45)"); pat.append("rect").attr("width", 4).attr("height", 4).attr("fill", "#fff"); pat.append("line").attr("x1", 0).attr("y1", 0).attr("x2", 0).attr("y2", 4) .attr("stroke", "#b0b0b0").attr("stroke-width", 1.2); const relleno = v => v == null ? `url(#${pid})` : color(v); const g = svg.append("g"); const capa = g.append("g").selectAll("path") .data(feats) .join("path") .attr("d", d => d.d) .attr("fill", `url(#${pid})`) .attr("stroke", "#fff") .attr("stroke-width", 0.3) .attr("vector-effect", "non-scaling-stroke") .on("pointerenter", function (event, d) { d3.select(this).attr("stroke", "#222").attr("stroke-width", 1.2).raise(); tip.style("display", null).html(htmlTip(d, nivel.key)); }) .on("pointermove", event => { const [x, y] = d3.pointer(event, cont.node()); const ancho = cont.node().clientWidth || width; tip.style("left", `${Math.min(x + 14, ancho - 260)}px`).style("top", `${y + 14}px`); }) .on("pointerleave", function () { d3.select(this).attr("stroke", "#fff").attr("stroke-width", 0.3); tip.style("display", "none"); }); g.append("g") .attr("fill", "none").attr("stroke", "#4d5d6c").attr("pointer-events", "none") .selectAll("path").data(dptosGeo.features).join("path") .attr("d", path) .attr("stroke-width", 0.7) .attr("vector-effect", "non-scaling-stroke"); const realce = g.append("path") .attr("fill", "none").attr("stroke", "#111").attr("stroke-width", 2.2) .attr("vector-effect", "non-scaling-stroke").attr("pointer-events", "none"); // ---------- textos fijos (no se mueven con el zoom) ---------- svg.append("text").attr("x", 12).attr("y", 24) .attr("font-size", 18).attr("font-weight", 700).attr("fill", "#1b2a3a").text(nivel.titulo); svg.append("text").attr("x", 12).attr("y", 42) .attr("font-size", 12).attr("fill", "#555").text(nivel.sub); const mediana = svg.append("text").attr("x", 12).attr("y", 58) .attr("font-size", 12).attr("fill", "#555"); const anioTxt = svg.append("text").attr("x", w - 12).attr("y", 40) .attr("text-anchor", "end").attr("font-size", 34).attr("font-weight", 700) .attr("fill", "#9fb3c8").attr("font-variant-numeric", "tabular-nums"); // ---------- leyenda (abajo a la izquierda, sobre el Pacífico) ---------- const etiquetas = [`< ${umbrales[0]}`, ...d3.pairs(umbrales).map(([a, b]) => `${a} – ${b}`), `≥ ${umbrales[umbrales.length - 1]}`]; const ley = svg.append("g") .attr("transform", `translate(12, ${h - 18 - (etiquetas.length + 1) * 15 - 16})`) .attr("font-size", 11).attr("fill", "#333"); ley.append("text").attr("y", 0).attr("font-weight", 600).text("Cobertura neta (%)"); etiquetas.forEach((t, i) => { const r = ley.append("g").attr("transform", `translate(0, ${8 + i * 15})`); r.append("rect").attr("width", 16).attr("height", 11) .attr("fill", color.range()[i]).attr("stroke", "#bbb").attr("stroke-width", 0.5); r.append("text").attr("x", 22).attr("y", 9.5).text(t); }); const rs = ley.append("g").attr("transform", `translate(0, ${8 + etiquetas.length * 15})`); rs.append("rect").attr("width", 16).attr("height", 11) .attr("fill", `url(#${pid})`).attr("stroke", "#bbb").attr("stroke-width", 0.5); rs.append("text").attr("x", 22).attr("y", 9.5).text("Sin dato"); svg.call(zoom); svgs.push(svg); grupos.push(g); mapas.push({nivel, capa, realce, mediana, anioTxt, relleno}); } // ---------- API usada por las otras celdas ---------- function update(anio, duracion = 450) { const primeraVez = anioActual == null; anioActual = anio; for (const m of mapas) { const vals = []; m.capa.each(function (d) { const v = valor(d.cod, anio, m.nivel.key); if (v != null) vals.push(v); const nuevo = m.relleno(v); const sel = d3.select(this); const previo = sel.attr("fill") || ""; // transición suave solo entre colores (no desde/hacia la trama) if (primeraVez || v == null || previo.startsWith("url")) sel.interrupt().attr("fill", nuevo); else sel.transition().duration(duracion).attr("fill", nuevo); }); m.anioTxt.text(anio); m.mediana.text(vals.length ? `Mediana municipal: ${fmt(d3.median(vals))} · ${vals.length} municipios` : "Sin datos para este año"); } return anio; } function focus(dpto, mpio) { const objetivo = mpio ? featPorCod.get(mpio) : dpto ? dptoFeat.get(dpto) : null; for (const m of mapas) { m.realce.attr("d", objetivo ? path(objetivo) : null); m.capa.attr("opacity", d => dpto == null || d.dpto === dpto ? 1 : 0.22); } let t = d3.zoomIdentity; if (objetivo) { const [[x0, y0], [x1, y1]] = path.bounds(objetivo); const k = Math.min(60, 0.85 / Math.max((x1 - x0) / w, (y1 - y0) / h)); t = d3.zoomIdentity.translate(w / 2, h / 2).scale(k).translate(-(x0 + x1) / 2, -(y0 + y1) / 2); } svgs.forEach(s => s.transition().duration(1000).call(zoom.transform, t)); return objetivo ? (mpio ?? dpto) : "país"; } const node = cont.node(); node.update = update; node.focus = focus; return node; } function grafEvolucion(serie, anio, {width = 640, height = 230} = {}) { const m = {top: 18, right: 96, bottom: 28, left: 42}; const series = [ {key: "primaria", nombre: "Primaria", color: "#2c7fb8"}, {key: "secundaria", nombre: "Secundaria", color: "#e8710a"} ]; const vals = serie.flatMap(d => [d.primaria, d.secundaria]).filter(v => v != null); const x = d3.scaleLinear(d3.extent(serie, d => d.anio), [m.left, width - m.right]); const y = d3.scaleLinear([Math.min(40, d3.min(vals) ?? 40), Math.max(100, d3.max(vals) ?? 100)], [height - m.bottom, m.top]).nice(); const svg = d3.create("svg").attr("width", width).attr("height", height) .attr("viewBox", [0, 0, width, height]).style("max-width", "100%").style("height", "auto") .style("font-family", "system-ui, sans-serif"); svg.append("g").attr("transform", `translate(0,${height - m.bottom})`) .call(d3.axisBottom(x).ticks(Math.min(serie.length, width / 60)).tickFormat(d3.format("d"))) .call(g => g.select(".domain").attr("stroke", "#bbb")); svg.append("g").attr("transform", `translate(${m.left},0)`) .call(d3.axisLeft(y).ticks(5).tickFormat(d => d + " %")) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").clone().attr("x2", width - m.left - m.right).attr("stroke", "#eee")); // referencia del 100 % svg.append("line").attr("x1", m.left).attr("x2", width - m.right) .attr("y1", y(100)).attr("y2", y(100)).attr("stroke", "#999").attr("stroke-dasharray", "3 3"); // marcador del año actual svg.append("line").attr("x1", x(anio)).attr("x2", x(anio)) .attr("y1", m.top).attr("y2", height - m.bottom).attr("stroke", "#333").attr("stroke-width", 1) .attr("opacity", 0.5); for (const s of series) { const linea = d3.line().defined(d => d[s.key] != null).x(d => x(d.anio)).y(d => y(d[s.key])); svg.append("path").datum(serie).attr("fill", "none").attr("stroke", s.color) .attr("stroke-width", 2).attr("d", linea); const ultimo = serie.filter(d => d[s.key] != null).at(-1); if (ultimo) svg.append("text").attr("x", x(ultimo.anio) + 6).attr("y", y(ultimo[s.key])) .attr("dy", "0.35em").attr("font-size", 12).attr("fill", s.color).attr("font-weight", 600).text(s.nombre); const actual = serie.find(d => d.anio === anio); if (actual?.[s.key] != null) svg.append("circle").attr("cx", x(anio)).attr("cy", y(actual[s.key])) .attr("r", 4).attr("fill", s.color).attr("stroke", "#fff").attr("stroke-width", 1.5); } return svg.node(); } function multiples({mpiosGeo, porCodigo, anios, key, color, width}) { const cols = width >= 700 ? 5 : 3; const s = Math.floor(width / cols); const ch = Math.round(s * 1.18); const alto = Math.ceil(anios.length / cols) * ch; const dpr = window.devicePixelRatio || 1; const canvas = document.createElement("canvas"); canvas.width = width * dpr; canvas.height = alto * dpr; canvas.style.width = `${width}px`; canvas.style.maxWidth = "100%"; const ctx = canvas.getContext("2d"); ctx.scale(dpr, dpr); const proj = d3.geoMercator().fitExtent([[6, 6], [s - 6, ch - 22]], mpiosGeo); const ruta = d3.geoPath(proj); const formas = mpiosGeo.features.map(f => ({ cod: String(f.properties.MPIO_CDPMP).padStart(5, "0"), p: new Path2D(ruta(f)) })); anios.forEach((a, i) => { ctx.save(); ctx.translate((i % cols) * s, Math.floor(i / cols) * ch); const vals = []; for (const fo of formas) { const v = porCodigo.get(fo.cod)?.get(a)?.[key]; if (v != null) vals.push(v); ctx.fillStyle = v == null ? "#e4e4e4" : color(v); ctx.fill(fo.p); } ctx.fillStyle = "#555"; ctx.font = "600 12px system-ui, sans-serif"; ctx.textAlign = "left"; ctx.fillText(a, 8, ch - 7); ctx.font = "11px system-ui, sans-serif"; ctx.textAlign = "right"; if (vals.length) ctx.fillText(`med. ${d3.median(vals).toFixed(1).replace(".", ",")} %`, s - 8, ch - 7); ctx.strokeStyle = "#e3e3e3"; ctx.strokeRect(0.5, 0.5, s - 1, ch - 1); ctx.restore(); }); return canvas; } // ============================ COMPONENTES ============================== const estado = {anio: anios[0], dpto: null, mpio: null, nivelMultiples: "secundaria"}; const mapas = crearMapas({mpiosGeo, dptosGeo, porCodigo, nombresDpto, color, umbrales, width: ANCHO}); const rep = reproductor(anios, {delay: VELOCIDAD, loop: true}); const selDpto = Inputs.select( new Map([["Todo el país", null], ...d3.sort(Array.from(nombresDpto, ([cod, nombre]) => [nombre, cod]), d => d[0])]), {label: "Departamento"} ); const cajaMpio = htl.html`

`; const cajaFicha = htl.html`

`; const cajaMultiples = htl.html`

`; const selNivel = Inputs.radio(new Map([["Primaria", "primaria"], ["Secundaria", "secundaria"]]), {label: "Nivel", value: "secundaria"}); function crearSelectorMunicipio() { const lista = estado.dpto == null ? [] : d3.sort( mpiosGeo.features .filter(f => String(f.properties.DPTO_CCDGO).padStart(2, "0") === estado.dpto) .map(f => { const cod = String(f.properties.MPIO_CDPMP).padStart(5, "0"); const fila = porCodigo.get(cod)?.values().next().value; return [fila?.entidad ?? f.properties.MPIO_CNMBR, cod]; }), d => d[0]); const sel = Inputs.select(new Map([["Todos los municipios", null], ...lista]), {label: "Municipio", disabled: estado.dpto == null}); sel.addEventListener("input", () => { estado.mpio = sel.value; mapas.focus(estado.dpto, estado.mpio); pintarFicha(); }); cajaMpio.replaceChildren(sel); } function pintarFicha() { const {anio, dpto, mpio} = estado; const cod = codSeleccion(dpto, mpio); const fila = porCodigo.get(cod)?.get(anio); const serie = anios.map(a => ({ anio: a, primaria: porCodigo.get(cod)?.get(a)?.primaria ?? null, secundaria: porCodigo.get(cod)?.get(a)?.secundaria ?? null })); const nombre = mpio ? `${porCodigo.get(cod)?.values().next().value?.entidad ?? "Municipio"}, ${nombresDpto.get(dpto)}` : dpto ? `${nombresDpto.get(dpto)} (total departamental)` : "Colombia (total nacional)"; const brecha = fila?.primaria != null && fila?.secundaria != null ? `${pct(fila.primaria - fila.secundaria).replace(" %", "")} p.p.` : "sin dato"; const alerta = [fila?.primaria, fila?.secundaria].some(v => v > 100) ? htl.html`

⚠ Un valor supera el 100 %: posible error en la proyección de población o estudiantes de otros municipios.

` : ""; const sinSerie = serie.every(d => d.primaria == null && d.secundaria == null); cajaFicha.replaceChildren(htl.html`

${nombre} · ${anio}

Primaria
${pct(fila?.primaria)}

Secundaria
${pct(fila?.secundaria)}

Caída primaria → secundaria
${brecha}

${alerta} ${sinSerie ? htl.html`

No hay datos para esta entidad (área no municipalizada o sin reporte).

` : grafEvolucion(serie, anio, {width: Math.min(ANCHO, 900)})}

`); } function pintarMultiples() { cajaMultiples.replaceChildren( multiples({mpiosGeo, porCodigo, anios, key: estado.nivelMultiples, color, width: ANCHO})); } // ============================== EVENTOS ================================ rep.addEventListener("input", () => { estado.anio = rep.value; mapas.update(estado.anio); pintarFicha(); }); selDpto.addEventListener("input", () => { estado.dpto = selDpto.value; estado.mpio = null; crearSelectorMunicipio(); mapas.focus(estado.dpto, null); pintarFicha(); }); selNivel.addEventListener("input", () => { estado.nivelMultiples = selNivel.value; pintarMultiples(); }); // ============================ ESTADO INICIAL =========================== crearSelectorMunicipio(); mapas.update(estado.anio); mapas.focus(null, null); pintarFicha(); pintarMultiples(); display(htl.html`

${rep}${selDpto}${cajaMpio}

${mapas} ${cajaFicha}

Evolución año a año

${selNivel} ${cajaMultiples}

`); }4e:T6d9f,// ===================================================================== // Cobertura neta: 12 años pintados como capas (veladuras) // Observable Notebooks 2.0 · TODO EN UNA SOLA CELDA (D3) // // Cada año es una capa semitransparente con la misma escala de color. // La capa k se pinta con opacidad 1/k: al superponerlas, el color final // de cada municipio es el promedio de sus años (la "pintura" acumulada). // ===================================================================== { // ============================ CONFIGURACIÓN ============================ const N_ANIOS = 12; // últimos N años con datos const VELOCIDAD = 1100; // milisegundos por capa const DOMINIO = [20, 100]; // rango de la escala de color (%); > 100 se pinta como 100 const ANCHO = Math.min(width, 1300); // ================================ CARGA ================================ const [libro, mpiosGeo, dptosGeo] = await Promise.all([ FileAttachment("CoberturaPrimariaSecundaria_2005_2022.xlsx").xlsx(), FileAttachment("MGN_ANM_MPIOS.geojson").json(), FileAttachment("MGN_ANM_DPTOS.geojson").json() ]); const filas = libro.sheet(libro.sheetNames[0], {headers: true}); // =============================== DATOS ================================= const aNumero = v => { if (v == null || v === "") return null; if (typeof v === "number") return Number.isFinite(v) ? v : null; const s = String(v).trim(); const n = s.includes(",") ? +s.replace(/\./g, "").replace(",", ".") : +s; return Number.isFinite(n) ? n : null; }; const datos = filas.map(d => { const cod = String(d["Código Entidad"]).padStart(5, "0"); return { anio: +d["Año"], cod, dpto: cod.slice(0, 2), departamento: d["Departamento"], entidad: d["Entidad"], primaria: aNumero(d["Cobertura neta en educación primaria"]), secundaria: aNumero(d["Cobertura neta en educación secundaria"]) }; }); const porCodigo = d3.index(datos, d => d.cod, d => d.anio); const anios = Array.from(new Set(datos.map(d => d.anio))).sort(d3.ascending).slice(-N_ANIOS); const nombresDpto = new Map(datos.filter(d => d.cod !== "01001").map(d => [d.dpto, d.departamento])); const color = d3.scaleSequential(t => d3.interpolateBlues(0.12 + 0.88 * t)).domain(DOMINIO).clamp(true); const pct = v => (v == null || !Number.isFinite(v)) ? "sin dato" : v.toFixed(1).replace(".", ",") + " %"; const pad = (v, n) => String(v).padStart(n, "0"); const valor = (cod, anio, key) => porCodigo.get(cod)?.get(anio)?.[key] ?? null; const nombreDe = cod => porCodigo.get(cod)?.values().next().value?.entidad ?? null; const codSeleccion = (dpto, mpio) => { if (mpio) return mpio; if (dpto) return porCodigo.has(dpto + "000") ? dpto + "000" : Array.from(porCodigo.keys()).find(c => c.startsWith(dpto) && c !== "01001"); // Bogotá → 11001 return "01001"; }; // promedio de los primeros n años de la ventana const promedio = (cod, key, n) => { const vals = anios.slice(0, n).map(a => valor(cod, a, key)).filter(v => v != null); return vals.length ? {prom: d3.mean(vals), nAnios: vals.length, max: d3.max(vals)} : null; }; // ============================ FUNCIONES ================================ function reproductorCapas(total, {delay = 1000, etiqueta = n => `${n}`} = {}) { let n = total, timer = null; const boton = htl.html``; const rango = htl.html``; const texto = htl.html`${etiqueta(total)}`; const form = htl.html``; const fijar = j => { n = j; rango.value = n; texto.value = etiqueta(n); form.value = n; form.dispatchEvent(new Event("input", {bubbles: true})); }; const parar = () => { clearInterval(timer); timer = null; boton.textContent = "▶ Pintar"; }; const iniciar = () => { boton.textContent = "⏸ Pausa"; if (n >= total) fijar(1); // empieza un lienzo nuevo timer = setInterval(() => { if (!form.isConnected) return parar(); if (n >= total) return parar(); fijar(n + 1); }, delay); }; boton.onclick = () => (timer ? parar() : iniciar()); rango.oninput = event => { event.stopPropagation(); parar(); fijar(+rango.value); }; form.onsubmit = event => event.preventDefault(); form.value = n; return form; } function crearCapas({width}) { const niveles = [ {key: "primaria", titulo: "Primaria", sub: "Cobertura neta · edad 6 a 10 años"}, {key: "secundaria", titulo: "Secundaria", sub: "Cobertura neta · edad 11 a 14 años"} ]; const gap = 16; const w = Math.floor((width - gap) / 2); const h = Math.round(w * 1.2); const capitalizar = s => String(s).toLowerCase().replace(/(^|[\s(.-])\p{L}/gu, c => c.toUpperCase()); const projection = d3.geoMercator().fitExtent([[10, 64], [w - 10, h - 10]], mpiosGeo); const path = d3.geoPath(projection); const feats = mpiosGeo.features.map(f => { const cod = pad(f.properties.MPIO_CDPMP, 5); return {f, cod, dpto: pad(f.properties.DPTO_CCDGO, 2), nombre: nombreDe(cod) ?? capitalizar(f.properties.MPIO_CNMBR), d: path(f)}; }); const featPorCod = new Map(feats.map(d => [d.cod, d.f])); const dptoFeat = new Map(dptosGeo.features.map(f => [pad(f.properties.DPTO_CCDGO, 2), f])); const malla = path(mpiosGeo); // opacidad 1/k por municipio: k = cuántas capas con dato lleva ese municipio const capasPorNivel = {}; for (const {key} of niveles) { const cuenta = new Map(); capasPorNivel[key] = anios.map(a => feats.flatMap(d => { const v = valor(d.cod, a, key); if (v == null) return []; const k = (cuenta.get(d.cod) ?? 0) + 1; cuenta.set(d.cod, k); return [{d: d.d, v, op: 1 / k}]; })); } const medianaAnual = Object.fromEntries(niveles.map(({key}) => [key, anios.map(a => d3.median(feats, d => valor(d.cod, a, key)))])); let nActual = 0; // ---------- contenedor y tooltip ---------- const cont = d3.create("div") .style("position", "relative") .style("display", "grid") .style("grid-template-columns", "repeat(2, minmax(0, 1fr))") .style("gap", `${gap}px`) .style("font-family", "system-ui, sans-serif"); const tip = cont.append("div") .style("position", "absolute").style("pointer-events", "none") .style("background", "rgba(255,255,255,0.97)").style("border", "1px solid #ccc") .style("border-radius", "6px").style("box-shadow", "0 2px 8px rgba(0,0,0,0.15)") .style("padding", "8px 10px").style("font-size", "12px").style("line-height", "1.45") .style("max-width", "270px").style("z-index", 10).style("display", "none"); const franja = (cod, key) => { const celdas = anios.map((a, i) => { const v = valor(cod, a, key); const pintada = i < nActual; const fondo = !pintada ? "#fff" : v == null ? "#e6e6e6" : color(v); return ``; }).join(""); return `

${celdas}

${anios[0]}${anios.at(-1)}

`; }; const htmlTip = (d, keyMapa) => { const dep = nombresDpto.get(d.dpto) ?? ""; const rango = nActual > 1 ? `${anios[0]}–${anios[nActual - 1]}` : `${anios[0]}`; const linea = (k, etq) => { const p = promedio(d.cod, k, nActual); const txt = p ? `${etq}: ${pct(p.prom)} (${p.nAnios} años)${p.prom > 100 ? " ⚠" : ""}` : `${etq}: sin dato`; return k === keyMapa ? `${txt}` : txt; }; return `

${d.nombre}

${dep} · promedio ${rango}

${linea("primaria", "Primaria")}
${linea("secundaria", "Secundaria")}

Capas de ${keyMapa === "primaria" ? "primaria" : "secundaria"}, año por año:

${franja(d.cod, keyMapa)}`; }; // ---------- zoom compartido ---------- const svgs = [], grupos = [], mapas = []; const zoom = d3.zoom() .extent([[0, 0], [w, h]]) .scaleExtent([1, 60]) .translateExtent([[0, 0], [w, h]]) .on("zoom", function (event) { grupos.forEach(g => g.attr("transform", event.transform)); if (event.sourceEvent) svgs.forEach(s => { if (s.node() !== this) s.node().__zoom = event.transform; }); }); for (const nivel of niveles) { const pid = "sin-dato-" + Math.random().toString(36).slice(2, 9); const gid = "grad-" + Math.random().toString(36).slice(2, 9); const svg = cont.append("svg") .attr("width", w).attr("height", h).attr("viewBox", [0, 0, w, h]) .style("width", "100%").style("height", "auto").style("box-sizing", "border-box") .style("background", "#fbfaf7") // lienzo .style("border", "1px solid #e3e3e3").style("cursor", "grab"); const defs = svg.append("defs"); const pat = defs.append("pattern").attr("id", pid).attr("patternUnits", "userSpaceOnUse") .attr("width", 4).attr("height", 4).attr("patternTransform", "rotate(45)"); pat.append("rect").attr("width", 4).attr("height", 4).attr("fill", "#fff"); pat.append("line").attr("x1", 0).attr("y1", 0).attr("x2", 0).attr("y2", 4) .attr("stroke", "#b0b0b0").attr("stroke-width", 1.2); const grad = defs.append("linearGradient").attr("id", gid); d3.range(0, 1.0001, 0.1).forEach(t => grad.append("stop") .attr("offset", `${t * 100}%`).attr("stop-color", color(DOMINIO[0] + t * (DOMINIO[1] - DOMINIO[0])))); const g = svg.append("g"); // lienzo base: blanco donde habrá pintura, trama donde no hay ningún dato g.append("g").attr("pointer-events", "none").selectAll("path").data(feats).join("path") .attr("d", d => d.d) .attr("fill", d => anios.some(a => valor(d.cod, a, nivel.key) != null) ? "#fff" : `url(#${pid})`); // una capa por año const capas = capasPorNivel[nivel.key].map(items => { const cg = g.append("g").attr("pointer-events", "none").attr("display", "none").attr("opacity", 0); cg.selectAll("path").data(items).join("path") .attr("d", d => d.d).attr("fill", d => color(d.v)).attr("fill-opacity", d => d.op); return cg; }); g.append("path").attr("d", malla).attr("fill", "none").attr("stroke", "#fff") .attr("stroke-width", 0.35).attr("stroke-opacity", 0.9) .attr("vector-effect", "non-scaling-stroke").attr("pointer-events", "none"); const velo = g.append("g").attr("pointer-events", "none").selectAll("path") .data(dptosGeo.features).join("path") .attr("d", path).attr("fill", "#fbfaf7").attr("opacity", 0); g.append("g").selectAll("path").data(feats).join("path") .attr("d", d => d.d).attr("fill", "transparent") .on("pointerenter", function (event, d) { d3.select(this).attr("stroke", "#222").attr("stroke-width", 1.2).attr("vector-effect", "non-scaling-stroke"); tip.style("display", null).html(htmlTip(d, nivel.key)); }) .on("pointermove", event => { const [x, y] = d3.pointer(event, cont.node()); const ancho = cont.node().clientWidth || width; tip.style("left", `${Math.min(x + 14, ancho - 280)}px`).style("top", `${y + 14}px`); }) .on("pointerleave", function () { d3.select(this).attr("stroke", null); tip.style("display", "none"); }); g.append("g").attr("fill", "none").attr("stroke", "#4d5d6c").attr("pointer-events", "none") .selectAll("path").data(dptosGeo.features).join("path") .attr("d", path).attr("stroke-width", 0.7).attr("vector-effect", "non-scaling-stroke"); const realce = g.append("path").attr("fill", "none").attr("stroke", "#111").attr("stroke-width", 2.2) .attr("vector-effect", "non-scaling-stroke").attr("pointer-events", "none"); // ---------- textos ---------- svg.append("text").attr("x", 12).attr("y", 24).attr("font-size", 18).attr("font-weight", 700) .attr("fill", "#1b2a3a").text(nivel.titulo); svg.append("text").attr("x", 12).attr("y", 42).attr("font-size", 12).attr("fill", "#555").text(nivel.sub); const resumen = svg.append("text").attr("x", 12).attr("y", 58).attr("font-size", 12).attr("fill", "#555"); const anioTxt = svg.append("text").attr("x", w - 12).attr("y", 40).attr("text-anchor", "end") .attr("font-size", 34).attr("font-weight", 700).attr("fill", "#9fb3c8") .attr("font-variant-numeric", "tabular-nums"); const capaTxt = svg.append("text").attr("x", w - 12).attr("y", 58).attr("text-anchor", "end") .attr("font-size", 12).attr("fill", "#555"); // ---------- pila de cuadros: una tarjeta por año pintado ---------- const pila = svg.append("g").attr("transform", `translate(${w - 64}, ${118})`); const tarjetas = pila.selectAll("rect").data(anios).join("rect") .attr("x", (d, i) => i * 2.6).attr("y", (d, i) => -i * 2.6) .attr("width", 34).attr("height", 24).attr("rx", 1.5) .attr("fill", (d, i) => color(medianaAnual[nivel.key][i] ?? DOMINIO[0])) .attr("stroke", "#fff").attr("stroke-width", 0.8) .attr("opacity", 0); pila.append("text").attr("x", 17).attr("y", 38).attr("text-anchor", "middle") .attr("font-size", 10).attr("fill", "#777").text("capas"); // ---------- leyenda continua ---------- const lx = 12, ly = h - 58, lw = Math.min(170, w * 0.4); const ley = svg.append("g").attr("transform", `translate(${lx},${ly})`).attr("font-size", 11).attr("fill", "#333"); ley.append("text").attr("y", 0).attr("font-weight", 600).text("Cobertura promedio (%)"); ley.append("rect").attr("y", 8).attr("width", lw).attr("height", 10).attr("fill", `url(#${gid})`) .attr("stroke", "#bbb").attr("stroke-width", 0.5); const xl = d3.scaleLinear(DOMINIO, [0, lw]); xl.ticks(4).forEach(t => { ley.append("line").attr("x1", xl(t)).attr("x2", xl(t)).attr("y1", 18).attr("y2", 22).attr("stroke", "#666"); ley.append("text").attr("x", xl(t)).attr("y", 33).attr("text-anchor", "middle") .text(t === DOMINIO[1] ? `≥${t}` : t); }); ley.append("rect").attr("x", lw + 14).attr("y", 8).attr("width", 14).attr("height", 10) .attr("fill", `url(#${pid})`).attr("stroke", "#bbb").attr("stroke-width", 0.5); ley.append("text").attr("x", lw + 32).attr("y", 17).text("Sin dato"); svg.call(zoom); svgs.push(svg); grupos.push(g); mapas.push({nivel, svg, capas, velo, realce, resumen, anioTxt, capaTxt, tarjetas}); } // ---------- API ---------- function pintar(n) { const anterior = nActual; nActual = n; for (const m of mapas) { const k = d3.zoomTransform(m.svg.node()).k; m.capas.forEach((cg, i) => { cg.interrupt(); if (i < n) { cg.attr("display", null); if (i === n - 1 && n === anterior + 1) { // la capa nueva "se pega" encima: entra desplazada y transparente const dx = 16 / k; cg.attr("opacity", 0).attr("transform", `translate(${dx},${-dx})`) .transition().duration(Math.min(800, VELOCIDAD * 0.75)).ease(d3.easeCubicOut) .attr("opacity", 1) .attrTween("transform", () => t => `translate(${dx * (1 - t)},${-dx * (1 - t)})`); } else cg.attr("opacity", 1).attr("transform", null); } else cg.attr("opacity", 0).attr("display", "none"); }); m.tarjetas.interrupt().attr("opacity", (d, i) => i < n ? 1 : 0); const proms = feats.map(d => promedio(d.cod, m.nivel.key, n)?.prom).filter(v => v != null); m.anioTxt.text(anios[n - 1]); m.capaTxt.text(`capa ${n} de ${anios.length} · ${anios[0]}–${anios[n - 1]}`); m.resumen.text(`Mediana del promedio municipal: ${pct(d3.median(proms))}`); } return n; } function focus(dpto, mpio) { const objetivo = mpio ? featPorCod.get(mpio) : dpto ? dptoFeat.get(dpto) : null; for (const m of mapas) { m.realce.attr("d", objetivo ? path(objetivo) : null); m.velo.attr("opacity", f => dpto != null && pad(f.properties.DPTO_CCDGO, 2) !== dpto ? 0.75 : 0); } let t = d3.zoomIdentity; if (objetivo) { const [[x0, y0], [x1, y1]] = path.bounds(objetivo); const k = Math.min(60, 0.85 / Math.max((x1 - x0) / w, (y1 - y0) / h)); t = d3.zoomIdentity.translate(w / 2, h / 2).scale(k).translate(-(x0 + x1) / 2, -(y0 + y1) / 2); } svgs.forEach(s => s.transition().duration(1000).call(zoom.transform, t)); } const node = cont.node(); node.pintar = pintar; node.focus = focus; node.municipios = feats; return node; } // ranking de municipios por promedio acumulado function grafRanking({key, titulo, n, dpto, mpio, orden, excluir, width}) { let filas = capas.municipios .filter(d => dpto == null || d.dpto === dpto) .map(d => ({...d, ...promedio(d.cod, key, n)})) .filter(d => d.prom != null && d.nAnios >= Math.ceil(n * 0.75)); const excluidos = filas.filter(d => d.prom > 100).length; if (excluir) filas = filas.filter(d => d.prom <= 100); filas = d3.sort(filas, d => orden === "mayor" ? -d.prom : d.prom); filas.forEach((d, i) => (d.puesto = i + 1)); const top = filas.slice(0, 10); const sel = mpio ? filas.find(d => d.cod === mpio) : null; const fila = 22, m = {top: 30, right: 54, left: Math.min(170, width * 0.42)}; const alto = m.top + top.length * fila + 8; const x = d3.scaleLinear([0, Math.max(100, d3.max(top, d => d.prom) ?? 100)], [m.left, width - m.right]); const svg = d3.create("svg").attr("width", width).attr("height", alto).attr("viewBox", [0, 0, width, alto]) .style("width", "100%").style("height", "auto").style("font-family", "system-ui, sans-serif"); svg.append("text").attr("x", 0).attr("y", 16).attr("font-size", 13).attr("font-weight", 600) .text(`${titulo}: ${orden === "mayor" ? "mayor" : "menor"} cobertura promedio ${anios[0]}–${anios[n - 1]}`); if (!top.length) svg.append("text").attr("y", 50).attr("fill", "#777").attr("font-size", 12).text("Sin municipios con datos suficientes."); const gfila = svg.append("g").selectAll("g").data(top).join("g") .attr("transform", (d, i) => `translate(0, ${m.top + i * fila})`); gfila.append("text").attr("x", m.left - 8).attr("y", fila / 2).attr("dy", "0.35em").attr("text-anchor", "end") .attr("font-size", 11).attr("font-weight", d => d.cod === mpio ? 700 : 400) .text(d => { const etq = `${d.puesto}. ${d.nombre}${dpto == null ? ` (${nombresDpto.get(d.dpto) ?? ""})` : ""}`; return etq.length > 34 ? etq.slice(0, 33) + "…" : etq; }); gfila.append("rect").attr("x", m.left).attr("y", 3).attr("height", fila - 6) .attr("width", d => Math.max(0, x(d.prom) - m.left)).attr("fill", d => color(d.prom)) .attr("stroke", d => d.cod === mpio ? "#111" : "none"); gfila.append("text").attr("x", d => x(d.prom) + 5).attr("y", fila / 2).attr("dy", "0.35em") .attr("font-size", 11).attr("fill", "#333").text(d => pct(d.prom) + (d.prom > 100 ? " ⚠" : "")); svg.append("line").attr("x1", x(100)).attr("x2", x(100)).attr("y1", m.top - 4).attr("y2", alto - 6) .attr("stroke", "#999").attr("stroke-dasharray", "3 3"); const notas = []; if (sel && sel.puesto > 10) notas.push(`Tu selección, ${sel.nombre}, está en el puesto ${sel.puesto} de ${filas.length} (${pct(sel.prom)}).`); if (excluir && excluidos) notas.push(`Se excluyeron ${excluidos} municipios con promedio > 100 % (posible error de denominador).`); notas.push(`Se incluyen municipios con dato en al menos ${Math.ceil(n * 0.75)} de ${n} años.`); return htl.html`

${svg.node()}

${notas.map(t => htl.html`

${t}

`)}

`; } function grafEvolucion(serie, anio, {width = 640, height = 230} = {}) { const m = {top: 18, right: 96, bottom: 28, left: 42}; const series = [ {key: "primaria", nombre: "Primaria", color: "#2c7fb8"}, {key: "secundaria", nombre: "Secundaria", color: "#e8710a"} ]; const vals = serie.flatMap(d => [d.primaria, d.secundaria]).filter(v => v != null); const x = d3.scaleLinear(d3.extent(serie, d => d.anio), [m.left, width - m.right]); const y = d3.scaleLinear([Math.min(40, d3.min(vals) ?? 40), Math.max(100, d3.max(vals) ?? 100)], [height - m.bottom, m.top]).nice(); const svg = d3.create("svg").attr("width", width).attr("height", height) .attr("viewBox", [0, 0, width, height]).style("max-width", "100%").style("height", "auto") .style("font-family", "system-ui, sans-serif"); svg.append("g").attr("transform", `translate(0,${height - m.bottom})`) .call(d3.axisBottom(x).ticks(Math.min(serie.length, width / 60)).tickFormat(d3.format("d"))) .call(g => g.select(".domain").attr("stroke", "#bbb")); svg.append("g").attr("transform", `translate(${m.left},0)`) .call(d3.axisLeft(y).ticks(5).tickFormat(d => d + " %")) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").clone().attr("x2", width - m.left - m.right).attr("stroke", "#eee")); // referencia del 100 % svg.append("line").attr("x1", m.left).attr("x2", width - m.right) .attr("y1", y(100)).attr("y2", y(100)).attr("stroke", "#999").attr("stroke-dasharray", "3 3"); // marcador del año actual svg.append("line").attr("x1", x(anio)).attr("x2", x(anio)) .attr("y1", m.top).attr("y2", height - m.bottom).attr("stroke", "#333").attr("stroke-width", 1) .attr("opacity", 0.5); for (const s of series) { const linea = d3.line().defined(d => d[s.key] != null).x(d => x(d.anio)).y(d => y(d[s.key])); svg.append("path").datum(serie).attr("fill", "none").attr("stroke", s.color) .attr("stroke-width", 2).attr("d", linea); const ultimo = serie.filter(d => d[s.key] != null).at(-1); if (ultimo) svg.append("text").attr("x", x(ultimo.anio) + 6).attr("y", y(ultimo[s.key])) .attr("dy", "0.35em").attr("font-size", 12).attr("fill", s.color).attr("font-weight", 600).text(s.nombre); const actual = serie.find(d => d.anio === anio); if (actual?.[s.key] != null) svg.append("circle").attr("cx", x(anio)).attr("cy", y(actual[s.key])) .attr("r", 4).attr("fill", s.color).attr("stroke", "#fff").attr("stroke-width", 1.5); } return svg.node(); } // ============================ COMPONENTES ============================== const estado = {n: anios.length, dpto: null, mpio: null, orden: "mayor", excluir: true}; const capas = crearCapas({width: ANCHO}); const rep = reproductorCapas(anios.length, { delay: VELOCIDAD, etiqueta: n => `${anios[0]} → ${anios[n - 1]} · ${n} ${n === 1 ? "capa" : "capas"}` }); const selDpto = Inputs.select( new Map([["Todo el país", null], ...d3.sort(Array.from(nombresDpto, ([cod, nombre]) => [nombre, cod]), d => d[0])]), {label: "Departamento"}); const selOrden = Inputs.radio(new Map([["Mayor cobertura", "mayor"], ["Menor cobertura", "menor"]]), {label: "Ranking", value: "mayor"}); const chkExcluir = Inputs.toggle({label: "Excluir promedios > 100 %", value: true}); const cajaMpio = htl.html`

`; const cajaRanking = htl.html`

`; const cajaFicha = htl.html`

`; function crearSelectorMunicipio() { const lista = estado.dpto == null ? [] : d3.sort( capas.municipios.filter(d => d.dpto === estado.dpto).map(d => [d.nombre, d.cod]), d => d[0]); const sel = Inputs.select(new Map([["Todos los municipios", null], ...lista]), {label: "Municipio", disabled: estado.dpto == null}); sel.addEventListener("input", () => { estado.mpio = sel.value; capas.focus(estado.dpto, estado.mpio); pintarPaneles(); }); cajaMpio.replaceChildren(sel); } function pintarPaneles() { const {n, dpto, mpio, orden, excluir} = estado; const anchoCol = Math.floor((ANCHO - 16) / 2); cajaRanking.replaceChildren( grafRanking({key: "primaria", titulo: "Primaria", n, dpto, mpio, orden, excluir, width: anchoCol}), grafRanking({key: "secundaria", titulo: "Secundaria", n, dpto, mpio, orden, excluir, width: anchoCol})); const cod = codSeleccion(dpto, mpio); const pP = promedio(cod, "primaria", n), pS = promedio(cod, "secundaria", n); const serie = anios.slice(0, n).map(a => ({anio: a, primaria: valor(cod, a, "primaria"), secundaria: valor(cod, a, "secundaria")})); const nombre = mpio ? `${nombreDe(cod) ?? "Municipio"}, ${nombresDpto.get(dpto)}` : dpto ? `${nombresDpto.get(dpto)} (total departamental)` : "Colombia (total nacional)"; const caida = pP && pS ? `${pct(pP.prom - pS.prom).replace(" %", "")} p.p.` : "sin dato"; cajaFicha.replaceChildren(htl.html`

${nombre} · promedio ${anios[0]}–${anios[n - 1]}

Primaria
${pct(pP?.prom)}

Secundaria
${pct(pS?.prom)}

Caída primaria → secundaria
${caida}

${serie.some(d => d.primaria != null || d.secundaria != null) ? grafEvolucion(serie, anios[n - 1], {width: Math.min(ANCHO, 900)}) : htl.html`

No hay datos para esta entidad.

`); } // ============================== EVENTOS ================================ rep.addEventListener("input", () => { estado.n = rep.value; capas.pintar(estado.n); pintarPaneles(); }); selDpto.addEventListener("input", () => { estado.dpto = selDpto.value; estado.mpio = null; crearSelectorMunicipio(); capas.focus(estado.dpto, null); pintarPaneles(); }); selOrden.addEventListener("input", () => { estado.orden = selOrden.value; pintarPaneles(); }); chkExcluir.addEventListener("input", () => { estado.excluir = chkExcluir.value; pintarPaneles(); }); // ============================ ESTADO INICIAL =========================== crearSelectorMunicipio(); capas.pintar(estado.n); capas.focus(null, null); pintarPaneles(); display(htl.html`

${rep}${selDpto}${cajaMpio}

${capas}

${selOrden}${chkExcluir}

${cajaRanking} ${cajaFicha}

`); }4f:T6e77,// ===================================================================== // Cobertura neta: 12 años pintados como capas (veladuras) // Observable Notebooks 2.0 · TODO EN UNA SOLA CELDA (D3) // // Cada año es una capa semitransparente con la misma escala de color. // La capa k se pinta con opacidad 1/k: al superponerlas, el color final // de cada municipio es el promedio de sus años (la "pintura" acumulada). // ===================================================================== { // ============================ CONFIGURACIÓN ============================ const N_ANIOS = 12; // últimos N años con datos const VELOCIDAD = 1100; // milisegundos por capa const DOMINIO = [40, 100]; // rango de la escala (%): < 40 se pinta como 40 y > 100 como 100 // Paleta suave: de azul casi blanco a azul medio (sin azul marino). Cambia o agrega tonos aquí. const COLORES = ["#f4f8fc", "#d3e4f2", "#a9cbe5", "#78abd3", "#4a87bd", "#2b66a0"]; const ANCHO = Math.min(width, 1300); // ================================ CARGA ================================ const [libro, mpiosGeo, dptosGeo] = await Promise.all([ FileAttachment("CoberturaPrimariaSecundaria_2005_2022.xlsx").xlsx(), FileAttachment("MGN_ANM_MPIOS.geojson").json(), FileAttachment("MGN_ANM_DPTOS.geojson").json() ]); const filas = libro.sheet(libro.sheetNames[0], {headers: true}); // =============================== DATOS ================================= const aNumero = v => { if (v == null || v === "") return null; if (typeof v === "number") return Number.isFinite(v) ? v : null; const s = String(v).trim(); const n = s.includes(",") ? +s.replace(/\./g, "").replace(",", ".") : +s; return Number.isFinite(n) ? n : null; }; const datos = filas.map(d => { const cod = String(d["Código Entidad"]).padStart(5, "0"); return { anio: +d["Año"], cod, dpto: cod.slice(0, 2), departamento: d["Departamento"], entidad: d["Entidad"], primaria: aNumero(d["Cobertura neta en educación primaria"]), secundaria: aNumero(d["Cobertura neta en educación secundaria"]) }; }); const porCodigo = d3.index(datos, d => d.cod, d => d.anio); const anios = Array.from(new Set(datos.map(d => d.anio))).sort(d3.ascending).slice(-N_ANIOS); const nombresDpto = new Map(datos.filter(d => d.cod !== "01001").map(d => [d.dpto, d.departamento])); // interpolación en Lab: pasos de color perceptualmente parejos (degradado suave) const color = d3.scaleSequential(d3.piecewise(d3.interpolateLab, COLORES)).domain(DOMINIO).clamp(true); const pct = v => (v == null || !Number.isFinite(v)) ? "sin dato" : v.toFixed(1).replace(".", ",") + " %"; const pad = (v, n) => String(v).padStart(n, "0"); const valor = (cod, anio, key) => porCodigo.get(cod)?.get(anio)?.[key] ?? null; const nombreDe = cod => porCodigo.get(cod)?.values().next().value?.entidad ?? null; const codSeleccion = (dpto, mpio) => { if (mpio) return mpio; if (dpto) return porCodigo.has(dpto + "000") ? dpto + "000" : Array.from(porCodigo.keys()).find(c => c.startsWith(dpto) && c !== "01001"); // Bogotá → 11001 return "01001"; }; // promedio de los primeros n años de la ventana const promedio = (cod, key, n) => { const vals = anios.slice(0, n).map(a => valor(cod, a, key)).filter(v => v != null); return vals.length ? {prom: d3.mean(vals), nAnios: vals.length, max: d3.max(vals)} : null; }; // ============================ FUNCIONES ================================ function reproductorCapas(total, {delay = 1000, etiqueta = n => `${n}`} = {}) { let n = total, timer = null; const boton = htl.html``; const rango = htl.html``; const texto = htl.html`${etiqueta(total)}`; const form = htl.html``; const fijar = j => { n = j; rango.value = n; texto.value = etiqueta(n); form.value = n; form.dispatchEvent(new Event("input", {bubbles: true})); }; const parar = () => { clearInterval(timer); timer = null; boton.textContent = "▶ Pintar"; }; const iniciar = () => { boton.textContent = "⏸ Pausa"; if (n >= total) fijar(1); // empieza un lienzo nuevo timer = setInterval(() => { if (!form.isConnected) return parar(); if (n >= total) return parar(); fijar(n + 1); }, delay); }; boton.onclick = () => (timer ? parar() : iniciar()); rango.oninput = event => { event.stopPropagation(); parar(); fijar(+rango.value); }; form.onsubmit = event => event.preventDefault(); form.value = n; return form; } function crearCapas({width}) { const niveles = [ {key: "primaria", titulo: "Primaria", sub: "Cobertura neta · edad 6 a 10 años"}, {key: "secundaria", titulo: "Secundaria", sub: "Cobertura neta · edad 11 a 14 años"} ]; const gap = 16; const w = Math.floor((width - gap) / 2); const h = Math.round(w * 1.2); const capitalizar = s => String(s).toLowerCase().replace(/(^|[\s(.-])\p{L}/gu, c => c.toUpperCase()); const projection = d3.geoMercator().fitExtent([[10, 64], [w - 10, h - 10]], mpiosGeo); const path = d3.geoPath(projection); const feats = mpiosGeo.features.map(f => { const cod = pad(f.properties.MPIO_CDPMP, 5); return {f, cod, dpto: pad(f.properties.DPTO_CCDGO, 2), nombre: nombreDe(cod) ?? capitalizar(f.properties.MPIO_CNMBR), d: path(f)}; }); const featPorCod = new Map(feats.map(d => [d.cod, d.f])); const dptoFeat = new Map(dptosGeo.features.map(f => [pad(f.properties.DPTO_CCDGO, 2), f])); // opacidad 1/k por municipio: k = cuántas capas con dato lleva ese municipio const capasPorNivel = {}; for (const {key} of niveles) { const cuenta = new Map(); capasPorNivel[key] = anios.map(a => feats.flatMap(d => { const v = valor(d.cod, a, key); if (v == null) return []; const k = (cuenta.get(d.cod) ?? 0) + 1; cuenta.set(d.cod, k); return [{d: d.d, v, op: 1 / k}]; })); } const medianaAnual = Object.fromEntries(niveles.map(({key}) => [key, anios.map(a => d3.median(feats, d => valor(d.cod, a, key)))])); let nActual = 0; // ---------- contenedor y tooltip ---------- const cont = d3.create("div") .style("position", "relative") .style("display", "grid") .style("grid-template-columns", "repeat(2, minmax(0, 1fr))") .style("gap", `${gap}px`) .style("font-family", "system-ui, sans-serif"); const tip = cont.append("div") .style("position", "absolute").style("pointer-events", "none") .style("background", "rgba(255,255,255,0.97)").style("border", "1px solid #ccc") .style("border-radius", "6px").style("box-shadow", "0 2px 8px rgba(0,0,0,0.15)") .style("padding", "8px 10px").style("font-size", "12px").style("line-height", "1.45") .style("max-width", "270px").style("z-index", 10).style("display", "none"); const franja = (cod, key) => { const celdas = anios.map((a, i) => { const v = valor(cod, a, key); const pintada = i < nActual; const fondo = !pintada ? "#fff" : v == null ? "#e6e6e6" : color(v); return ``; }).join(""); return `

${celdas}

${anios[0]}${anios.at(-1)}

${d.nombre}

${dep} · promedio ${rango}

${linea("primaria", "Primaria")}
${linea("secundaria", "Secundaria")}

Capas de ${keyMapa === "primaria" ? "primaria" : "secundaria"}, año por año:

${franja(d.cod, keyMapa)}`; }; // ---------- zoom compartido ---------- const svgs = [], grupos = [], mapas = []; const zoom = d3.zoom() .extent([[0, 0], [w, h]]) .scaleExtent([1, 60]) .translateExtent([[0, 0], [w, h]]) .on("zoom", function (event) { grupos.forEach(g => g.attr("transform", event.transform)); if (event.sourceEvent) svgs.forEach(s => { if (s.node() !== this) s.node().__zoom = event.transform; }); }); for (const nivel of niveles) { const pid = "sin-dato-" + Math.random().toString(36).slice(2, 9); const gid = "grad-" + Math.random().toString(36).slice(2, 9); const svg = cont.append("svg") .attr("width", w).attr("height", h).attr("viewBox", [0, 0, w, h]) .style("width", "100%").style("height", "auto").style("box-sizing", "border-box") .style("background", "#fbfaf7") // lienzo .style("border", "1px solid #e3e3e3").style("cursor", "grab"); const defs = svg.append("defs"); const pat = defs.append("pattern").attr("id", pid).attr("patternUnits", "userSpaceOnUse") .attr("width", 4).attr("height", 4).attr("patternTransform", "rotate(45)"); pat.append("rect").attr("width", 4).attr("height", 4).attr("fill", "#fff"); pat.append("line").attr("x1", 0).attr("y1", 0).attr("x2", 0).attr("y2", 4) .attr("stroke", "#b0b0b0").attr("stroke-width", 1.2); const grad = defs.append("linearGradient").attr("id", gid); d3.range(0, 1.0001, 0.1).forEach(t => grad.append("stop") .attr("offset", `${t * 100}%`).attr("stop-color", color(DOMINIO[0] + t * (DOMINIO[1] - DOMINIO[0])))); const g = svg.append("g"); // lienzo base: blanco donde habrá pintura, trama donde no hay ningún dato g.append("g").attr("pointer-events", "none").attr("shape-rendering", "crispEdges") .selectAll("path").data(feats).join("path") .attr("d", d => d.d) .attr("fill", d => anios.some(a => valor(d.cod, a, nivel.key) != null) ? "#fff" : `url(#${pid})`); // una capa por año const capas = capasPorNivel[nivel.key].map(items => { const cg = g.append("g").attr("pointer-events", "none").attr("display", "none").attr("opacity", 0) .attr("shape-rendering", "crispEdges"); // sin rendijas entre municipios vecinos cg.selectAll("path").data(items).join("path") .attr("d", d => d.d).attr("fill", d => color(d.v)).attr("fill-opacity", d => d.op); return cg; }); const velo = g.append("g").attr("pointer-events", "none").selectAll("path") .data(dptosGeo.features).join("path") .attr("d", path).attr("fill", "#fbfaf7").attr("opacity", 0); g.append("g").selectAll("path").data(feats).join("path") .attr("d", d => d.d).attr("fill", "transparent") .on("pointerenter", function (event, d) { d3.select(this).attr("stroke", "#222").attr("stroke-width", 1.2).attr("vector-effect", "non-scaling-stroke"); tip.style("display", null).html(htmlTip(d, nivel.key)); }) .on("pointermove", event => { const [x, y] = d3.pointer(event, cont.node()); const ancho = cont.node().clientWidth || width; tip.style("left", `${Math.min(x + 14, ancho - 280)}px`).style("top", `${y + 14}px`); }) .on("pointerleave", function () { d3.select(this).attr("stroke", null); tip.style("display", "none"); }); g.append("g").attr("fill", "none").attr("stroke", "#4d5d6c").attr("pointer-events", "none") .selectAll("path").data(dptosGeo.features).join("path") .attr("d", path).attr("stroke-width", 0.9).attr("stroke-opacity", 0.85) .attr("vector-effect", "non-scaling-stroke"); const realce = g.append("path").attr("fill", "none").attr("stroke", "#111").attr("stroke-width", 2.2) .attr("vector-effect", "non-scaling-stroke").attr("pointer-events", "none"); // ---------- textos ---------- svg.append("text").attr("x", 12).attr("y", 24).attr("font-size", 18).attr("font-weight", 700) .attr("fill", "#1b2a3a").text(nivel.titulo); svg.append("text").attr("x", 12).attr("y", 42).attr("font-size", 12).attr("fill", "#555").text(nivel.sub); const resumen = svg.append("text").attr("x", 12).attr("y", 58).attr("font-size", 12).attr("fill", "#555"); const anioTxt = svg.append("text").attr("x", w - 12).attr("y", 40).attr("text-anchor", "end") .attr("font-size", 34).attr("font-weight", 700).attr("fill", "#9fb3c8") .attr("font-variant-numeric", "tabular-nums"); const capaTxt = svg.append("text").attr("x", w - 12).attr("y", 58).attr("text-anchor", "end") .attr("font-size", 12).attr("fill", "#555"); // ---------- pila de cuadros: una tarjeta por año pintado ---------- const pila = svg.append("g").attr("transform", `translate(${w - 64}, ${118})`); const tarjetas = pila.selectAll("rect").data(anios).join("rect") .attr("x", (d, i) => i * 2.6).attr("y", (d, i) => -i * 2.6) .attr("width", 34).attr("height", 24).attr("rx", 1.5) .attr("fill", (d, i) => color(medianaAnual[nivel.key][i] ?? DOMINIO[0])) .attr("stroke", "#fff").attr("stroke-width", 0.8) .attr("opacity", 0); pila.append("text").attr("x", 17).attr("y", 38).attr("text-anchor", "middle") .attr("font-size", 10).attr("fill", "#777").text("capas"); // ---------- leyenda continua ---------- const lx = 12, ly = h - 58, lw = Math.min(170, w * 0.4); const ley = svg.append("g").attr("transform", `translate(${lx},${ly})`).attr("font-size", 11).attr("fill", "#333"); ley.append("text").attr("y", 0).attr("font-weight", 600).text("Cobertura promedio (%)"); ley.append("rect").attr("y", 8).attr("width", lw).attr("height", 10).attr("fill", `url(#${gid})`) .attr("stroke", "#bbb").attr("stroke-width", 0.5); const xl = d3.scaleLinear(DOMINIO, [0, lw]); xl.ticks(4).forEach(t => { ley.append("line").attr("x1", xl(t)).attr("x2", xl(t)).attr("y1", 18).attr("y2", 22).attr("stroke", "#666"); ley.append("text").attr("x", xl(t)).attr("y", 33).attr("text-anchor", "middle") .text(t === DOMINIO[1] ? `≥${t}` : t === DOMINIO[0] ? `≤${t}` : t); }); ley.append("rect").attr("x", lw + 14).attr("y", 8).attr("width", 14).attr("height", 10) .attr("fill", `url(#${pid})`).attr("stroke", "#bbb").attr("stroke-width", 0.5); ley.append("text").attr("x", lw + 32).attr("y", 17).text("Sin dato"); svg.call(zoom); svgs.push(svg); grupos.push(g); mapas.push({nivel, svg, capas, velo, realce, resumen, anioTxt, capaTxt, tarjetas}); } // ---------- API ---------- function pintar(n) { const anterior = nActual; nActual = n; for (const m of mapas) { const k = d3.zoomTransform(m.svg.node()).k; m.capas.forEach((cg, i) => { cg.interrupt(); if (i < n) { cg.attr("display", null); if (i === n - 1 && n === anterior + 1) { // la capa nueva "se pega" encima: entra desplazada y transparente const dx = 16 / k; cg.attr("opacity", 0).attr("transform", `translate(${dx},${-dx})`) .transition().duration(Math.min(800, VELOCIDAD * 0.75)).ease(d3.easeCubicOut) .attr("opacity", 1) .attrTween("transform", () => t => `translate(${dx * (1 - t)},${-dx * (1 - t)})`); } else cg.attr("opacity", 1).attr("transform", null); } else cg.attr("opacity", 0).attr("display", "none"); }); m.tarjetas.interrupt().attr("opacity", (d, i) => i < n ? 1 : 0); const proms = feats.map(d => promedio(d.cod, m.nivel.key, n)?.prom).filter(v => v != null); m.anioTxt.text(anios[n - 1]); m.capaTxt.text(`capa ${n} de ${anios.length} · ${anios[0]}–${anios[n - 1]}`); m.resumen.text(`Mediana del promedio municipal: ${pct(d3.median(proms))}`); } return n; } function focus(dpto, mpio) { const objetivo = mpio ? featPorCod.get(mpio) : dpto ? dptoFeat.get(dpto) : null; for (const m of mapas) { m.realce.attr("d", objetivo ? path(objetivo) : null); m.velo.attr("opacity", f => dpto != null && pad(f.properties.DPTO_CCDGO, 2) !== dpto ? 0.75 : 0); } let t = d3.zoomIdentity; if (objetivo) { const [[x0, y0], [x1, y1]] = path.bounds(objetivo); const k = Math.min(60, 0.85 / Math.max((x1 - x0) / w, (y1 - y0) / h)); t = d3.zoomIdentity.translate(w / 2, h / 2).scale(k).translate(-(x0 + x1) / 2, -(y0 + y1) / 2); } svgs.forEach(s => s.transition().duration(1000).call(zoom.transform, t)); } const node = cont.node(); node.pintar = pintar; node.focus = focus; node.municipios = feats; return node; } // ranking de municipios por promedio acumulado function grafRanking({key, titulo, n, dpto, mpio, orden, excluir, width}) { let filas = capas.municipios .filter(d => dpto == null || d.dpto === dpto) .map(d => ({...d, ...promedio(d.cod, key, n)})) .filter(d => d.prom != null && d.nAnios >= Math.ceil(n * 0.75)); const excluidos = filas.filter(d => d.prom > 100).length; if (excluir) filas = filas.filter(d => d.prom <= 100); filas = d3.sort(filas, d => orden === "mayor" ? -d.prom : d.prom); filas.forEach((d, i) => (d.puesto = i + 1)); const top = filas.slice(0, 10); const sel = mpio ? filas.find(d => d.cod === mpio) : null; const fila = 22, m = {top: 30, right: 54, left: Math.min(170, width * 0.42)}; const alto = m.top + top.length * fila + 8; const x = d3.scaleLinear([0, Math.max(100, d3.max(top, d => d.prom) ?? 100)], [m.left, width - m.right]); const svg = d3.create("svg").attr("width", width).attr("height", alto).attr("viewBox", [0, 0, width, alto]) .style("width", "100%").style("height", "auto").style("font-family", "system-ui, sans-serif"); svg.append("text").attr("x", 0).attr("y", 16).attr("font-size", 13).attr("font-weight", 600) .text(`${titulo}: ${orden === "mayor" ? "mayor" : "menor"} cobertura promedio ${anios[0]}–${anios[n - 1]}`); if (!top.length) svg.append("text").attr("y", 50).attr("fill", "#777").attr("font-size", 12).text("Sin municipios con datos suficientes."); const gfila = svg.append("g").selectAll("g").data(top).join("g") .attr("transform", (d, i) => `translate(0, ${m.top + i * fila})`); gfila.append("text").attr("x", m.left - 8).attr("y", fila / 2).attr("dy", "0.35em").attr("text-anchor", "end") .attr("font-size", 11).attr("font-weight", d => d.cod === mpio ? 700 : 400) .text(d => { const etq = `${d.puesto}. ${d.nombre}${dpto == null ? ` (${nombresDpto.get(d.dpto) ?? ""})` : ""}`; return etq.length > 34 ? etq.slice(0, 33) + "…" : etq; }); gfila.append("rect").attr("x", m.left).attr("y", 3).attr("height", fila - 6) .attr("width", d => Math.max(0, x(d.prom) - m.left)).attr("fill", d => color(d.prom)) .attr("stroke", d => d.cod === mpio ? "#111" : "none"); gfila.append("text").attr("x", d => x(d.prom) + 5).attr("y", fila / 2).attr("dy", "0.35em") .attr("font-size", 11).attr("fill", "#333").text(d => pct(d.prom) + (d.prom > 100 ? " ⚠" : "")); svg.append("line").attr("x1", x(100)).attr("x2", x(100)).attr("y1", m.top - 4).attr("y2", alto - 6) .attr("stroke", "#999").attr("stroke-dasharray", "3 3"); const notas = []; if (sel && sel.puesto > 10) notas.push(`Tu selección, ${sel.nombre}, está en el puesto ${sel.puesto} de ${filas.length} (${pct(sel.prom)}).`); if (excluir && excluidos) notas.push(`Se excluyeron ${excluidos} municipios con promedio > 100 % (posible error de denominador).`); notas.push(`Se incluyen municipios con dato en al menos ${Math.ceil(n * 0.75)} de ${n} años.`); return htl.html`

${svg.node()}

${notas.map(t => htl.html`

${t}

`)}

`; const cajaRanking = htl.html`

`; const cajaFicha = htl.html`

${nombre} · promedio ${anios[0]}–${anios[n - 1]}

Primaria
${pct(pP?.prom)}

Secundaria
${pct(pS?.prom)}

Caída primaria → secundaria
${caida}

${serie.some(d => d.primaria != null || d.secundaria != null) ? grafEvolucion(serie, anios[n - 1], {width: Math.min(ANCHO, 900)}) : htl.html`

No hay datos para esta entidad.

${rep}${selDpto}${cajaMpio}

${capas}

${selOrden}${chkExcluir}

${cajaRanking} ${cajaFicha}

`); }50:[{"id":"8ab20610305c8e17457a5285060fa9ba0abfee48adacbcd882cd22705e90641392f0f5e585e54e8b21648d15628d6e881265bdd6f758c89d787c7d9e3a93a20c","href":"https://static.observableusercontent.com/files/8ab20610305c8e17457a5285060fa9ba0abfee48adacbcd882cd22705e90641392f0f5e585e54e8b21648d15628d6e881265bdd6f758c89d787c7d9e3a93a20c","name":"MGN_ANM_DPTOS.geojson","type":"application/octet-stream","lastModified":1792539183684,"size":1582353},{"id":"ddf4fafed242f16ff18ab2fefa84a43894905f59d58766be6e28521c96ee1a563a30d3e65a80a73a77a84a26ac1d89232061bcf78d3f4aca55428ed8b01bf659","href":"https://static.observableusercontent.com/files/ddf4fafed242f16ff18ab2fefa84a43894905f59d58766be6e28521c96ee1a563a30d3e65a80a73a77a84a26ac1d89232061bcf78d3f4aca55428ed8b01bf659","name":"MGN_ANM_MPIOS.geojson","type":"application/octet-stream","lastModified":1792539183685,"size":5759175},{"id":"ac7cc7ef9f7106e55f7fb140e2cf2a1fce4d21ec45f0591b148c25b376ba8da68f1af0f9f0e3c90d5c5c86a6170c0d0a8a52e6f26d685617847cac09afde6f76","href":"https://static.observableusercontent.com/files/ac7cc7ef9f7106e55f7fb140e2cf2a1fce4d21ec45f0591b148c25b376ba8da68f1af0f9f0e3c90d5c5c86a6170c0d0a8a52e6f26d685617847cac09afde6f76","name":"CoberturaPrimariaSecundaria_2005_2022.xlsx","type":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","lastModified":1792539539865,"size":871295}] 49:{"id":"a0c1d103b172f777","slug":"l3-data-blinding","title":"L3 Data Blinding","thumbnail":"3c57c6e3b1c5c42d3e8187a7b89d4a39a0025e87d64f36201aee459d846b40b2","access_level":"public","create_time":"$D2026-10-20T23:09:16.035Z","update_time":"$D2026-10-21T00:35:38.906Z","view_time":null,"first_public_time":"$D2026-10-22T17:42:15.810Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"e7d334f8e6291f05","login":"luis-guerrero-penaranda","name":"Luis Guerrero Peñaranda","avatar_url":"https://avatars-next.observableusercontent.com/bedaed79e78c9fac0a036bcbacd513cd2fb2a3212226382be3747048041514d2","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":144,"publish_version":144,"role":null,"authored":false,"authors":[{"type":"individual","id":"170c53564345cd4e","login":"luis-guerrero-penaranda","name":"Luis Guerrero Peñaranda","avatar_url":"https://avatars-next.observableusercontent.com/bedaed79e78c9fac0a036bcbacd513cd2fb2a3212226382be3747048041514d2","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"e7d334f8e6291f05","login":"luis-guerrero-penaranda","name":"Luis Guerrero Peñaranda","avatar_url":"https://avatars-next.observableusercontent.com/bedaed79e78c9fac0a036bcbacd513cd2fb2a3212226382be3747048041514d2","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"L3 Data Blinding","cells":[{"id":1,"value":"# L3 Data Blinding\n----------------------------------------------\n\n| Variables necesarias para el análisis | Razón |\n|---|---|\n| Código Departamento | Unión (*join*) con los GeoJSON. |\n| Departamento | Etiquetado e identificación. |\n| Código Entidad | Unión (*join*) con los GeoJSON. |\n| Entidad | Etiquetado e identificación; útil para visualizar los datos a nivel de municipio. |\n| Indicador | Selección de los indicadores necesarios para la construcción de un indicador base general. |\n| Dato Numérico | Necesario para consultar el valor de cada indicador y realizar operaciones posteriores. |\n| Año | Necesario para realizar análisis históricos y operaciones. |\n\n--------------------------------------------------\n### WHAT","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"#### Upload information","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"$4d","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"# Cobertura por capas","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"$4e","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"$4f","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W50","stdlib":"2"}} 44:null