36:["$","title",null,{"children":"Calidad y cobertura de la educación básica en Colombia | JohanaRativaM | Observable"}] 3e:Td79a,// ===================================================================== // Calidad y cobertura de la educación básica en Colombia // Observable · TODO EN UNA SOLA CELDA (D3) // // Adjuntos requeridos (FileAttachment): // df_enriquecido_filtrado.xlsx · MGN_ANM_MPIOS.geojson · MGN_ANM_DPTOS.geojson // // Todo está conectado: año (▶ récord), departamento, municipio, clic en el // grid, clic en el mapa, clic en la leyenda bivariada, clic en una línea y // recuadros (brush) sobre los ejes de coordenadas paralelas. // ===================================================================== { // ============================ CONFIGURACIÓN ============================ const ANCHO = Math.min(width, 1500); const VELOCIDAD = 1300; // ms por año en el récord const ANIO_INICIAL = 2022; // último año con calidad (2023-2024 solo traen cobertura) // El "juego de columnas": qué columna usa cada nivel geográfico const COLUMNAS = { pais: {lect: "Indicador_cal_pais_Lect_critica", mat: "Indicador_cal_pais_Matematicas", prim: "Indicador_cob_pais_net_primaria", sec: "Indicador_cob_pais_dep_secundaria", cal: "Indicador_cal_agg_pais", cob: "Indicador_cob_agg_pais"}, dep: {lect: "Indicador_cal_dep_Lect_critica", mat: "Indicador_cal_dep_Matematicas", prim: "Indicador_cob_dep_net_primaria", sec: "Indicador_cob_dep_secundaria", cal: "Indicador_cal_dep_pais", cob: "Indicador_cob_dep_pais"}, // municipal: cal y cob = promedio de las dos columnas (misma regla que Inicador_bivariado_municipal) mun: {lect: "Indicador_cal_mun_Lect_critica", mat: "Indicador_cal_mun_Matematicas", prim: "Indicador_cob_mun_net_primaria", sec: "Indicador_cob_mun_net_secundaria", cal: null, cob: null} }; const IND = [ {key: "lect", nombre: "Lectura crítica", corto: "Lectura crítica", tipo: "cal", color: "#1f4e79", simbolo: d3.symbolCircle, dash: null}, {key: "mat", nombre: "Matemáticas", corto: "Matemáticas", tipo: "cal", color: "#d9732f", simbolo: d3.symbolSquare, dash: null}, {key: "prim", nombre: "Cobertura neta primaria", corto: "Cob. primaria", tipo: "cob", color: "#2a9d8f", simbolo: d3.symbolTriangle, dash: "7 4"}, {key: "sec", nombre: "Cobertura neta secundaria", corto: "Cob. secundaria", tipo: "cob", color: "#8e5ea2", simbolo: d3.symbolDiamond, dash: "7 4"} ]; const PALETA_CAL = ["#e6edf6", "#c3d4ea", "#94b3d7", "#5f8bbf", "#2f5f98"]; const ETQ_CAL = ["Baja", "Media baja", "Media", "Media alta", "Alta"]; // Bivariada 3×3 · BIV[cobertura][calidad] (0 = bajo, 2 = alto) const BIV = [ ["#e8e8e8", "#dfb0d6", "#be64ac"], ["#ace4e4", "#a5add3", "#8c62aa"], ["#5ac8c8", "#5698b9", "#3b4994"] ]; const NIV = ["baja", "media", "alta"]; // Grid map: posición geográfica [código DANE, columna, fila, sigla] // Grid map: rombo con "colas" (La Guajira al NE, Putumayo/Amazonas al sur) // [código DANE, columna, fila, sigla] const TILES = [ ["88", 0, 0, "SAI"], ["44", 6, 0, "GUA"], ["08", 3, 1, "ATL"], ["47", 4, 1, "MAG"], ["20", 5, 1, "CES"], ["23", 2, 2, "COR"], ["70", 3, 2, "SUC"], ["13", 4, 2, "BOL"], ["54", 5, 2, "NSA"], ["81", 6, 2, "ARA"], ["27", 1, 3, "CHO"], ["05", 2, 3, "ANT"], ["68", 3, 3, "SAN"], ["15", 4, 3, "BOY"], ["85", 5, 3, "CAS"], ["99", 6, 3, "VIC"], ["76", 0, 4, "VAL"], ["66", 1, 4, "RIS"], ["17", 2, 4, "CAL"], ["25", 3, 4, "CUN"], ["11", 4, 4, "BOG"], ["50", 5, 4, "MET"], ["94", 6, 4, "GNA"], ["19", 1, 5, "CAU"], ["63", 2, 5, "QUI"], ["73", 3, 5, "TOL"], ["41", 4, 5, "HUI"], ["95", 5, 5, "GUV"], ["97", 6, 5, "VAU"], ["52", 1, 6, "NAR"], ["86", 2, 6, "PUT"], ["18", 3, 6, "CAQ"], ["91", 4, 7, "AMA"] ]; const COLS = d3.max(TILES, d => d[1]) + 1, FILAS = d3.max(TILES, d => d[2]) + 1; // ================================ CARGA ================================ const [libro, mpiosGeo, dptosGeo] = await Promise.all([ FileAttachment("df_enriquecido_filtrado.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 positivo = v => { const n = aNumero(v); return n != null && n > 0 ? n : null; }; // 0 = sin dato const pad = (v, n) => String(v ?? "").trim().padStart(n, "0"); const media2 = (a, b) => a != null && b != null ? (a + b) / 2 : null; const KEYS = ["lect", "mat", "prim", "sec", "cal", "cob"]; const leer = (d, nivel) => { const c = COLUMNAS[nivel]; const r = {lect: positivo(d[c.lect]), mat: positivo(d[c.mat]), prim: positivo(d[c.prim]), sec: positivo(d[c.sec])}; r.cal = c.cal ? positivo(d[c.cal]) : media2(r.lect, r.mat); r.cob = c.cob ? positivo(d[c.cob]) : media2(r.prim, r.sec); return r; }; const PAIS = new Map(), DEP = new Map(), MUN = new Map(); const nombreDep = new Map(), nombreMun = new Map(); const vistos = new Set(); for (const d of filas) { const anio = +d["Año"]; if (!anio) continue; const cod = pad(d["Código Entidad"], 5), dp = pad(d["Código Departamento"], 2); const clave = cod + "|" + anio; if (vistos.has(clave)) continue; // formato largo: 4 filas (indicadores) por municipio-año vistos.add(clave); if (!PAIS.has(anio) || PAIS.get(anio).cal == null) PAIS.set(anio, leer(d, "pais")); if (dp === "01") continue; // fila "Colombia" if (!nombreDep.has(dp)) nombreDep.set(dp, d["Departamento"]); if (!DEP.has(dp)) DEP.set(dp, new Map()); if (!DEP.get(dp).has(anio)) DEP.get(dp).set(anio, leer(d, "dep")); if (cod.endsWith("000")) continue; // fila agregada del departamento nombreMun.set(cod, d["Entidad"]); if (!MUN.has(cod)) MUN.set(cod, new Map()); MUN.get(cod).set(anio, leer(d, "mun")); } const anios = Array.from(PAIS.keys()).sort(d3.ascending); const depsOrdenados = d3.sort(Array.from(nombreDep), d => d[1]); const getRec = (nivel, cod, anio) => nivel === "pais" ? PAIS.get(anio) : nivel === "dep" ? DEP.get(cod)?.get(anio) : MUN.get(cod)?.get(anio); const serie = (nivel, cod) => anios.map(a => ({anio: a, ...(getRec(nivel, cod, a) ?? {})})); const serieMedia = (nivel, codes) => anios.map(a => { const rs = Array.from(codes, c => getRec(nivel, c, a)).filter(Boolean); const o = {anio: a}; for (const k of KEYS) o[k] = d3.mean(rs, r => r[k]) ?? null; return o; }); // ---------- estadísticos (memoizados) ---------- const memo = new Map(); const cache = (k, f) => { if (!memo.has(k)) memo.set(k, f()); return memo.get(k); }; const todosDep = Array.from(DEP.values()).flatMap(m => Array.from(m.values())); const umbralesCal = key => cache("uc" + key, () => { const v = todosDep.map(r => r[key]).filter(x => x != null).sort(d3.ascending); return [0.2, 0.4, 0.6, 0.8].map(p => d3.quantileSorted(v, p)); }); // percentiles 5–95 (con clamp) para que las diferencias de área sean visibles const extCob = key => cache("ec" + key, () => { const v = todosDep.map(r => r[key]).filter(x => x != null).sort(d3.ascending); return [d3.quantileSorted(v, 0.05), d3.quantileSorted(v, 0.95)]; }); const terciles = (anio, key) => cache(`t${anio}${key}`, () => { const v = Array.from(MUN.values(), m => m.get(anio)?.[key]).filter(x => x != null).sort(d3.ascending); return v.length ? [d3.quantileSorted(v, 1 / 3), d3.quantileSorted(v, 2 / 3)] : null; }); const tercil = (v, t) => v == null || !t ? null : v <= t[0] ? 0 : v <= t[1] ? 1 : 2; // ================================ ESTADO =============================== const estado = { anio: anios.includes(ANIO_INICIAL) ? ANIO_INICIAL : anios.at(-1), dpto: null, mpio: null, calidad: "cal", cobertura: "cob", // columnas activas para grid y mapa modoPC: "pais", // pais | dep | mun rangos: new Map(), // recuadros del brush por eje caja: null, // recuadro libre (en cualquier parte del gráfico) [[x0,y0],[x1,y1]] claseBiv: null // [cob, cal] al hacer clic en la leyenda bivariada }; const claseMun = (cod, anio) => { const r = MUN.get(cod)?.get(anio); if (!r) return null; const a = tercil(r[estado.calidad], terciles(anio, estado.calidad)); const b = tercil(r[estado.cobertura], terciles(anio, estado.cobertura)); return a == null || b == null ? null : {cal: a, cob: b}; }; function entidadesPC() { const a = estado.anio; if (estado.modoPC === "pais") return [{cod: "pais", nombre: "Colombia", nivel: "pais", v: PAIS.get(a)}]; if (estado.modoPC === "dep") return Array.from(DEP.keys(), cod => ({cod, nombre: nombreDep.get(cod), nivel: "dep", v: DEP.get(cod).get(a)})); return Array.from(MUN.keys()).filter(c => !estado.dpto || c.startsWith(estado.dpto)) .map(cod => ({cod, nombre: nombreMun.get(cod), nivel: "mun", v: MUN.get(cod).get(a)})); } // conjunto activo = lo seleccionado por recuadro (brush) o por la leyenda bivariada function conjuntoActivo() { if (estado.claseBiv) { const [cb, cc] = estado.claseBiv; const codes = new Set(Array.from(MUN.keys()).filter(c => (!estado.dpto || c.startsWith(estado.dpto)) && (k => k && k.cob === cb && k.cal === cc)(claseMun(c, estado.anio)))); return {nivel: "mun", codes, etiqueta: `${codes.size} municipios con calidad ${NIV[cc]} y cobertura ${NIV[cb]}`}; } if ((estado.rangos.size || estado.caja) && estado.modoPC !== "pais") { const ok = e => Array.from(estado.rangos).every(([k, [lo, hi]]) => e.v?.[k] != null && e.v[k] >= lo && e.v[k] <= hi) && (!estado.caja || pc.cruzaCaja(e.v, estado.caja)); const codes = new Set(entidadesPC().filter(ok).map(e => e.cod)); return {nivel: estado.modoPC, codes, etiqueta: `${codes.size} ${estado.modoPC === "dep" ? "departamentos" : "municipios"} dentro de la selección por recuadro`}; } return null; } // ============================== FORMATO ================================ const fmt = v => v == null || !Number.isFinite(v) ? "s/d" : v.toFixed(1).replace(".", ","); const uid = p => p + "-" + Math.random().toString(36).slice(2, 9); const capitalizar = s => String(s).toLowerCase().replace(/(^|[\s(.-])\p{L}/gu, c => c.toUpperCase()); const simboloSVG = (ind, size = 52) => d3.symbol().type(ind.simbolo).size(size)(); const corta = (t, n = 16) => { t = String(t ?? ""); return t.length > n ? t.slice(0, n - 1) + "…" : t; }; // tabla del tooltip: columna "Valor" = lo que se señala · columna gris = referencia (un nivel arriba) const filaTip = (r, ref, etqRef) => (ref ? ` Valor ${corta(etqRef)}` : "") + IND.map(i => ` ${i.corto}${fmt(r?.[i.key])}${i.tipo === "cob" && r?.[i.key] != null ? " %" : ""} ${ref ? `${fmt(ref?.[i.key])}` : ""}`).join("") + ""; const htmlDep = cod => { const r = getRec("dep", cod, estado.anio), p = PAIS.get(estado.anio); return `

${nombreDep.get(cod)}

${estado.anio} · columnas Indicador_*_dep_*

${filaTip(r, p, "Colombia")}

Calidad agregada: ${fmt(r?.cal)} · Cobertura agregada: ${fmt(r?.cob)} %

`; }; const htmlMun = (cod, nombre) => { const r = getRec("mun", cod, estado.anio), dp = cod.slice(0, 2), k = claseMun(cod, estado.anio); const p = PAIS.get(estado.anio); return `

${nombre}

${nombreDep.get(dp) ?? ""} · ${estado.anio}

${filaTip(r, getRec("dep", dp, estado.anio), nombreDep.get(dp))}

${k ? ` Calidad ${NIV[k.cal]} · Cobertura ${NIV[k.cob]}` : "Sin clasificación (falta calidad o cobertura)"}

Colombia (agg_pais): calidad ${fmt(p?.cal)} · cobertura ${fmt(p?.cob)} %

`; }; // ======================= DIMENSIONES Y CONTENEDOR ====================== const ANGOSTO = ANCHO < 850, GAP = 12; // El panel de filtros ocupa una fila completa; debajo, los cuatro gráficos // se distribuyen en una cuadrícula 2×2 en pantallas amplias. const cw = Math.floor(ANGOSTO ? ANCHO - 60 : (ANCHO - 28 - GAP) / 2 - 30); const raiz = document.createElement("div"); raiz.className = "edu-dash"; raiz.style.width = ANCHO + "px"; raiz.innerHTML = `

Calidad y cobertura de la educación básica en Colombia

Evolución ${anios[0]} – ${anios.at(-1)} · Vista general, exploración territorial y comparación de indicadores

2.Grid map departamental

3.Mapa municipal bivariado

4.Comparación de indicadores

`; const $ = s => raiz.querySelector(s); // ------------------------------ tooltip ------------------------------ const tip = $(".tip"); const moverTip = event => { const [x, y] = d3.pointer(event, raiz); tip.style.left = Math.max(4, Math.min(x + 14, raiz.clientWidth - 290)) + "px"; tip.style.top = (y + 14) + "px"; }; const mostrarTip = (event, html) => { tip.innerHTML = html; tip.style.display = "block"; moverTip(event); }; const ocultarTip = () => { tip.style.display = "none"; }; // ============================ ACCIONES ================================= function seleccionar(dpto, mpio = null) { if (mpio) dpto = mpio.slice(0, 2); const cambioDpto = dpto !== estado.dpto; estado.dpto = dpto ?? null; estado.mpio = mpio ?? null; let modo = estado.modoPC; if (estado.mpio) modo = "mun"; else if (estado.dpto && modo === "pais") modo = "dep"; else if (!estado.dpto) modo = "pais"; if (modo !== estado.modoPC || (modo === "mun" && cambioDpto)) { estado.modoPC = modo; pc.reconstruir(); } if (cambioDpto) mapa.focus(estado.dpto); actualizarTodo(); } function cambiarModoPC(modo) { estado.modoPC = modo; pc.reconstruir(); actualizarTodo(); } // ============================== FILTROS ================================ function segmentado(opciones, valor, onChange) { const div = document.createElement("div"); div.className = "seg"; for (const [etq, v] of opciones) { const b = document.createElement("button"); b.type = "button"; b.textContent = etq; b.dataset.v = v; b.onclick = () => onChange(v); div.append(b); } div.fijar = v => div.querySelectorAll("button").forEach(x => x.classList.toggle("on", x.dataset.v === v)); div.fijar(valor); return div; } const side = $(".side"); const lbl = t => Object.assign(document.createElement("div"), {className: "lbl", textContent: t}); side.append(Object.assign(document.createElement("div"), {className: "h2", textContent: "Filtros"})); const segCob = segmentado([["Agregado", "cob"], ["Primaria", "prim"], ["Secundaria", "sec"]], estado.cobertura, v => { estado.cobertura = v; estado.claseBiv = null; actualizarTodo(); }); const segCal = segmentado([["Promedio", "cal"], ["Lectura", "lect"], ["Matemát.", "mat"]], estado.calidad, v => { estado.calidad = v; estado.claseBiv = null; actualizarTodo(); }); // año + récord let timer = null; const filaAnio = document.createElement("div"); filaAnio.style.cssText = "display:flex;align-items:center;gap:8px"; const btnPlay = Object.assign(document.createElement("button"), {className: "play", type: "button", textContent: "▶", title: "Reproducir récord año a año"}); const rango = Object.assign(document.createElement("input"), {type: "range", min: anios[0], max: anios.at(-1), step: 1, value: estado.anio}); const salida = Object.assign(document.createElement("span"), {className: "anio", textContent: estado.anio}); filaAnio.append(btnPlay, rango, salida); const extremos = document.createElement("div"); extremos.style.cssText = "display:flex;justify-content:space-between;font-size:11px;color:#7a8899;padding:0 40px 0 46px"; extremos.innerHTML = `${anios[0]}${anios.at(-1)}`; const fijarAnio = a => { estado.anio = a; actualizarTodo(); }; const parar = () => { clearInterval(timer); timer = null; btnPlay.textContent = "▶"; }; btnPlay.onclick = () => { if (timer) return parar(); btnPlay.textContent = "⏸"; if (estado.anio >= anios.at(-1)) fijarAnio(anios[0]); timer = setInterval(() => { if (!raiz.isConnected) return parar(); const i = anios.indexOf(estado.anio); if (i >= anios.length - 1) return parar(); fijarAnio(anios[i + 1]); }, VELOCIDAD); }; rango.oninput = e => { e.stopPropagation(); parar(); fijarAnio(+rango.value); }; const selDpto = document.createElement("select"); selDpto.innerHTML = `` + depsOrdenados.map(([c, n]) => ``).join(""); selDpto.oninput = e => { e.stopPropagation(); seleccionar(selDpto.value || null); }; const selMpio = document.createElement("select"); selMpio.oninput = e => { e.stopPropagation(); seleccionar(estado.dpto, selMpio.value || null); }; let dptoEnSelector; const btnLimpiar = Object.assign(document.createElement("button"), {className: "btn", type: "button", textContent: "Limpiar filtros"}); btnLimpiar.onclick = () => { parar(); Object.assign(estado, {dpto: null, mpio: null, calidad: "cal", cobertura: "cob", claseBiv: null, modoPC: "pais"}); pc.reconstruir(); mapa.focus(null); actualizarTodo(); }; const ayuda = Object.assign(document.createElement("div"), {className: "ayuda"}); ayuda.innerHTML = `Cómo filtrar
• Clic en un cuadro del grid → zoom al departamento y sus municipios.
• Clic en un municipio del mapa o en una línea de las coordenadas paralelas.
• Clic en una celda de la leyenda bivariada → filtra esa combinación.
• Coordenadas paralelas: arrastra sobre un eje (rango de ese indicador) o en cualquier espacio vacío (recuadro libre: selecciona las líneas que lo cruzan). Se combinan con "Y".
• Clic en la línea de tiempo (panel 1) para cambiar de año.`; const grupo = (...hijos) => { const d = document.createElement("div"); d.append(...hijos); return d; }; const cajaFiltros = grupo( grupo(lbl("Nivel educativo (cobertura)"), segCob), grupo(lbl("Calidad (Saber 11)"), segCal), grupo(lbl("Año"), filaAnio, extremos), grupo(lbl("Departamento"), selDpto), grupo(lbl("Municipio"), selMpio), grupo(btnLimpiar)); cajaFiltros.style.cssText = "display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:0 14px;align-items:end;min-width:0"; side.append(cajaFiltros, ayuda); function syncFiltros() { segCob.fijar(estado.cobertura); segCal.fijar(estado.calidad); rango.value = estado.anio; salida.textContent = estado.anio; selDpto.value = estado.dpto ?? ""; if (dptoEnSelector !== estado.dpto) { dptoEnSelector = estado.dpto; const lista = estado.dpto ? d3.sort(Array.from(MUN.keys()).filter(c => c.startsWith(estado.dpto)), c => nombreMun.get(c)) : []; selMpio.innerHTML = `` + lista.map(c => ``).join(""); selMpio.disabled = !estado.dpto; } selMpio.value = estado.mpio ?? ""; } // ======================= 1 · LÍNEA DE TIEMPO =========================== function dibujarLinea() { const W = cw, H = 220, m = {top: 14, right: 16, bottom: 26, left: 38}; const nivel = estado.mpio ? "mun" : estado.dpto ? "dep" : "pais"; const cod = estado.mpio ?? estado.dpto ?? "pais"; const nombre = nivel === "mun" ? `${nombreMun.get(cod)} (${nombreDep.get(estado.dpto)})` : nivel === "dep" ? nombreDep.get(cod) : "Colombia"; let principal = serie(nivel, cod), etqP = nombre; let ref = nivel === "mun" ? serie("dep", estado.dpto) : nivel === "dep" ? serie("pais") : null; let etqR = nivel === "mun" ? nombreDep.get(estado.dpto) : nivel === "dep" ? "Colombia" : null; let columnas = `Indicador_cal_${nivel}_* · Indicador_cob_${nivel}_*`; const conj = conjuntoActivo(); if (conj && conj.codes.size) { ref = principal; etqR = nombre; principal = serieMedia(conj.nivel, conj.codes); etqP = `promedio de ${conj.etiqueta}`; columnas = `Indicador_*_${conj.nivel}_* (promedio simple del conjunto)`; } $(".t1").textContent = "Evolución · " + (etqP.length > 60 ? etqP.slice(0, 58) + "…" : etqP); $(".s1").textContent = `Columnas: ${columnas}${ref ? ` · líneas tenues: ${etqR}` : ""}`; const vals = [...principal, ...(ref ?? [])].flatMap(d => IND.map(i => d[i.key])).filter(v => v != null); const x = d3.scaleLinear(d3.extent(anios), [m.left, W - m.right]); const y = d3.scaleLinear([Math.max(0, (d3.min(vals) ?? 0) - 5), (d3.max(vals) ?? 100) + 4], [H - m.bottom, m.top]).nice(); const svg = d3.create("svg").attr("width", W).attr("height", H).attr("viewBox", [0, 0, W, H]) .style("max-width", "100%").style("height", "auto").style("display", "block"); svg.append("g").attr("transform", `translate(0,${H - m.bottom})`) .call(d3.axisBottom(x).ticks(anios.length).tickFormat(d3.format("d")).tickSizeOuter(0)) .call(g => g.selectAll("text").attr("font-size", 10).attr("font-weight", d => d === estado.anio ? 700 : 400)) .call(g => g.select(".domain").attr("stroke", "#b9c3cf")); svg.append("g").attr("transform", `translate(${m.left},0)`) .call(d3.axisLeft(y).ticks(6)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").clone().attr("x2", W - m.left - m.right).attr("stroke", "#edf0f4")); svg.append("text").attr("transform", `translate(11,${(H - m.bottom + m.top) / 2}) rotate(-90)`).attr("text-anchor", "middle") .attr("font-size", 10.5).attr("fill", "#5b6b7f").text("Puntaje Saber 11 / % cobertura neta"); // año seleccionado svg.append("rect").attr("x", x(estado.anio) - 9).attr("width", 18).attr("y", m.top).attr("height", H - m.bottom - m.top) .attr("fill", "#3d5f8f").attr("opacity", 0.08); const enfasis = i => (i.tipo === "cal" && estado.calidad === i.key) || (i.tipo === "cob" && estado.cobertura === i.key); for (const i of IND) { const linea = d3.line().defined(d => d[i.key] != null).x(d => x(d.anio)).y(d => y(d[i.key])); if (ref) svg.append("path").datum(ref).attr("fill", "none").attr("stroke", i.color).attr("stroke-opacity", 0.32) .attr("stroke-width", 1.3).attr("stroke-dasharray", i.dash).attr("d", linea); svg.append("path").datum(principal).attr("fill", "none").attr("stroke", i.color) .attr("stroke-width", enfasis(i) ? 3.4 : 2.2).attr("stroke-dasharray", i.dash).attr("d", linea); svg.append("g").selectAll("path").data(principal.filter(d => d[i.key] != null)).join("path") .attr("transform", d => `translate(${x(d.anio)},${y(d[i.key])})`) .attr("d", d => simboloSVG(i, d.anio === estado.anio ? 95 : 34)) .attr("fill", d => d.anio === estado.anio ? i.color : "#fff").attr("stroke", i.color).attr("stroke-width", 1.4); } // interacción: hover = valores del año, clic = fijar año const guia = svg.append("line").attr("y1", m.top).attr("y2", H - m.bottom).attr("stroke", "#888").attr("stroke-dasharray", "2 2").attr("opacity", 0); svg.append("rect").attr("x", m.left).attr("y", m.top).attr("width", W - m.left - m.right).attr("height", H - m.top - m.bottom) .attr("fill", "transparent").style("cursor", "pointer") .on("pointermove", event => { const a = Math.round(x.invert(d3.pointer(event)[0])); guia.attr("x1", x(a)).attr("x2", x(a)).attr("opacity", 1); const p = principal.find(d => d.anio === a), r = ref?.find(d => d.anio === a); mostrarTip(event, `

${a}

${etqP}

${filaTip(p, r, etqR)}

clic para fijar el año

`); }) .on("pointerleave", () => { guia.attr("opacity", 0); ocultarTip(); }) .on("click", event => { parar(); fijarAnio(Math.round(x.invert(d3.pointer(event)[0]))); }); const ley = document.createElement("div"); ley.className = "leyenda"; ley.innerHTML = IND.map(i => `${i.nombre}`).join(""); $(".c1").replaceChildren(svg.node(), ley); } // ======================= 2 · GRID MAP DEPARTAMENTAL ==================== const grid = (() => { const H = 270, legW = 158; const s = Math.floor(Math.min((cw - legW - 8) / COLS, (H - 8) / FILAS)); const gx = Math.max(2, (cw - legW - COLS * s) / 2), gy = (H - FILAS * s) / 2; const svg = d3.create("svg").attr("width", cw).attr("height", H).attr("viewBox", [0, 0, cw, H]) .style("max-width", "100%").style("height", "auto").style("display", "block"); const pid = uid("rayado"); const pat = svg.append("defs").append("pattern").attr("id", pid).attr("patternUnits", "userSpaceOnUse") .attr("width", 5).attr("height", 5).attr("patternTransform", "rotate(45)"); pat.append("rect").attr("width", 5).attr("height", 5).attr("fill", "#f4f4f4"); pat.append("line").attr("y2", 5).attr("stroke", "#c4c4c4").attr("stroke-width", 1.4); const tiles = svg.append("g").selectAll("g").data(TILES.map(([cod, c, r, ab]) => ({cod, c, r, ab}))).join("g") .attr("transform", d => `translate(${gx + d.c * s},${gy + d.r * s})`).style("cursor", "pointer") .on("click", (e, d) => seleccionar(estado.dpto === d.cod && !estado.mpio ? null : d.cod)) .on("pointerenter", (e, d) => mostrarTip(e, htmlDep(d.cod) + `

clic para hacer zoom en el mapa

`)) .on("pointermove", moverTip).on("pointerleave", ocultarTip); const cuadro = tiles.append("rect").attr("x", 1).attr("y", 1).attr("width", s - 2).attr("height", s - 2).attr("rx", 3); const circulo = tiles.append("circle").attr("cx", s / 2).attr("cy", s / 2 + 4) .attr("fill", "#fff").attr("fill-opacity", 0.88).attr("stroke", "#1d3557").attr("stroke-width", 1); const sigla = tiles.append("text").attr("x", 4).attr("y", 11).attr("font-size", 9).attr("font-weight", 650).text(d => d.ab); const marco = tiles.append("rect").attr("x", 1).attr("y", 1).attr("width", s - 2).attr("height", s - 2).attr("rx", 3) .attr("fill", "none").attr("pointer-events", "none"); const ley = svg.append("g").attr("transform", `translate(${cw - legW + 8},6)`).attr("font-size", 11).attr("fill", "#33475b"); function update() { const a = estado.anio, kc = estado.calidad, kb = estado.cobertura; const thr = umbralesCal(kc), color = d3.scaleThreshold(thr, PALETA_CAL); const [c0, c1] = extCob(kb); const radio = d3.scaleSqrt([c0, c1], [s * 0.12, s * 0.42]).clamp(true); const conj = conjuntoActivo(); const depsConj = conj ? new Set(conj.nivel === "dep" ? conj.codes : Array.from(conj.codes, c => c.slice(0, 2))) : null; const rec = d => getRec("dep", d.cod, a); const clase = d => rec(d)?.[kc] == null ? -1 : thr.filter(t => rec(d)[kc] >= t).length; const t = svg.transition().duration(450); cuadro.transition(t).attr("fill", d => clase(d) < 0 ? `url(#${pid})` : color(rec(d)[kc])); circulo.transition(t).attr("r", d => rec(d)?.[kb] == null ? 0 : radio(rec(d)[kb])); sigla.attr("fill", d => clase(d) >= 3 ? "#fff" : "#33475b"); tiles.attr("opacity", d => (depsConj && !depsConj.has(d.cod)) ? 0.2 : (estado.dpto && estado.dpto !== d.cod) ? 0.42 : 1); marco.attr("stroke", d => d.cod === estado.dpto ? "#0b2545" : "none").attr("stroke-width", 3); tiles.filter(d => d.cod === estado.dpto).raise(); $(".s2").textContent = `${a} · Color = calidad (${COLUMNAS.dep[kc]}) · Área = cobertura (${COLUMNAS.dep[kb]})`; ley.selectAll("*").remove(); ley.append("text").attr("y", 10).attr("font-weight", 700).text("Color: calidad"); const etq = i => i === 0 ? `< ${fmt(thr[0])}` : i === 4 ? `≥ ${fmt(thr[3])}` : `${fmt(thr[i - 1])}–${fmt(thr[i])}`; d3.range(4, -1, -1).forEach((i, j) => { const gy2 = 18 + j * 19; ley.append("rect").attr("y", gy2).attr("width", 16).attr("height", 15).attr("fill", PALETA_CAL[i]).attr("stroke", "#ccd"); ley.append("text").attr("x", 22).attr("y", gy2 + 11).text(ETQ_CAL[i]); ley.append("text").attr("x", 88).attr("y", gy2 + 11).attr("font-size", 9.5).attr("fill", "#7a8899").text(etq(i)); }); ley.append("rect").attr("y", 115).attr("width", 16).attr("height", 15).attr("fill", `url(#${pid})`).attr("stroke", "#ccd"); ley.append("text").attr("x", 22).attr("y", 126).text("Sin dato"); ley.append("text").attr("y", 158).attr("font-weight", 700).text("Área del círculo:"); ley.append("text").attr("y", 172).attr("font-weight", 700).text("cobertura (%)"); const ref = [c1, (c0 + c1) / 2, c0]; let yy = 182; ref.forEach((v, i) => { const rr = radio(v); ley.append("circle").attr("cx", 20).attr("cy", yy + rr).attr("r", rr).attr("fill", "#eef2f7").attr("stroke", "#1d3557"); ley.append("text").attr("x", 46).attr("y", yy + rr + 4).text(`${["≥", "", "≤"][i]} ${fmt(v)} %`); yy += 2 * rr + 8; }); ley.append("text").attr("y", yy + 12).attr("font-size", 9.5).attr("fill", "#7a8899").text("Escalas fijas 2012–2024 (p5–p95):"); ley.append("text").attr("y", yy + 24).attr("font-size", 9.5).attr("fill", "#7a8899").text("el ▶ muestra la evolución"); } return {node: svg.node(), update}; })(); // ======================= 3 · MAPA MUNICIPAL BIVARIADO ================== const mapa = (() => { const H = 300, legW = Math.min(170, Math.floor(cw * 0.34)), mw = cw - legW; const svg = d3.create("svg").attr("width", cw).attr("height", H).attr("viewBox", [0, 0, cw, H]) .style("max-width", "100%").style("height", "auto").style("display", "block"); const pid = uid("rayado"); 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", "#fafafa"); pat.append("line").attr("y2", 4).attr("stroke", "#c8c8c8").attr("stroke-width", 1); const clip = uid("clip"); svg.select("defs").append("clipPath").attr("id", clip).append("rect").attr("width", mw).attr("height", H); svg.append("rect").attr("width", mw).attr("height", H).attr("fill", "#f7f9fc").attr("rx", 6) .on("click", () => { if (estado.mpio) seleccionar(estado.dpto); else if (estado.dpto) seleccionar(null); }); const vista = svg.append("g").attr("clip-path", `url(#${clip})`); const g = vista.append("g"); const projection = d3.geoMercator().fitExtent([[8, 8], [mw - 8, H - 8]], dptosGeo); const path = d3.geoPath(projection); const feats = mpiosGeo.features.map(f => { const cod = pad(f.properties.MPIO_CDPMP, 5); return {cod, dp: pad(f.properties.DPTO_CCDGO, 2), f, d: path(f), nombre: nombreMun.get(cod) ?? capitalizar(f.properties.MPIO_CNMBR)}; }); const featPorCod = new Map(feats.map(d => [d.cod, d])); const dptoFeat = new Map(dptosGeo.features.map(f => [pad(f.properties.DPTO_CCDGO, 2), f])); const mpios = g.append("g").selectAll("path").data(feats).join("path") .attr("d", d => d.d).attr("stroke", "#fff").attr("stroke-width", 0.35).attr("vector-effect", "non-scaling-stroke") .style("cursor", "pointer") .on("pointerenter", function (e, d) { d3.select(this).attr("stroke", "#111").attr("stroke-width", 1.4).raise(); mostrarTip(e, htmlMun(d.cod, d.nombre)); }) .on("pointermove", moverTip) .on("pointerleave", function () { d3.select(this).attr("stroke", "#fff").attr("stroke-width", 0.35); ocultarTip(); }) .on("click", (e, d) => { e.stopPropagation(); estado.mpio === d.cod ? seleccionar(d.dp) : seleccionar(d.dp, d.cod); }); const velo = g.append("g").attr("pointer-events", "none").selectAll("path").data(dptosGeo.features).join("path") .attr("d", path).attr("fill", "#f7f9fc").attr("opacity", 0); g.append("g").attr("pointer-events", "none").selectAll("path").data(dptosGeo.features).join("path") .attr("d", path).attr("fill", "none").attr("stroke", "#4d5d6c").attr("stroke-width", 0.7).attr("stroke-opacity", 0.8) .attr("vector-effect", "non-scaling-stroke"); const realceDep = g.append("path").attr("fill", "none").attr("stroke", "#0b2545").attr("stroke-width", 2) .attr("vector-effect", "non-scaling-stroke").attr("pointer-events", "none"); const realce = g.append("path").attr("fill", "none").attr("stroke", "#111").attr("stroke-width", 3) .attr("vector-effect", "non-scaling-stroke").attr("pointer-events", "none"); const zoom = d3.zoom().scaleExtent([1, 60]).extent([[0, 0], [mw, H]]).translateExtent([[0, 0], [mw, H]]) .on("zoom", e => g.attr("transform", e.transform)); svg.call(zoom).on("dblclick.zoom", null); function focus(dpto) { let t = d3.zoomIdentity; const f = dpto ? dptoFeat.get(dpto) : null; if (f) { const [[x0, y0], [x1, y1]] = path.bounds(f); const k = Math.min(60, 0.88 / Math.max((x1 - x0) / mw, (y1 - y0) / H)); t = d3.zoomIdentity.translate(mw / 2, H / 2).scale(k).translate(-(x0 + x1) / 2, -(y0 + y1) / 2); } svg.transition().duration(900).call(zoom.transform, t); } // ---------- leyenda bivariada (clic = filtro) ---------- const L = svg.append("g").attr("transform", `translate(${mw + 12},8)`).attr("font-size", 10.5).attr("fill", "#33475b"); const cel = Math.min(28, Math.floor((legW - 40) / 3)), lx = 24; L.append("text").attr("y", 10).attr("font-weight", 700).attr("font-size", 11.5).text("Calidad × cobertura"); const celdas = L.append("g").attr("transform", `translate(${lx},24)`).selectAll("rect") .data(d3.cross([0, 1, 2], [0, 1, 2])).join("rect") // [cob, cal] .attr("x", ([cb, cc]) => cc * cel).attr("y", ([cb]) => (2 - cb) * cel) .attr("width", cel - 1).attr("height", cel - 1).attr("fill", ([cb, cc]) => BIV[cb][cc]).style("cursor", "pointer") .on("click", (e, [cb, cc]) => { const igual = estado.claseBiv && estado.claseBiv[0] === cb && estado.claseBiv[1] === cc; estado.claseBiv = igual ? null : [cb, cc]; if (!igual && estado.modoPC !== "mun") estado.modoPC = "mun"; pc.reconstruir(); // la leyenda reemplaza a los recuadros (y limpia su dibujo) actualizarTodo(); }) .on("pointerenter", (e, [cb, cc]) => mostrarTip(e, `

Calidad ${NIV[cc]} · Cobertura ${NIV[cb]}

clic para filtrar todo el tablero

`)) .on("pointermove", moverTip).on("pointerleave", ocultarTip); L.append("text").attr("x", lx + cel * 1.5).attr("y", 24 + 3 * cel + 13).attr("text-anchor", "middle").attr("font-weight", 600).text("Calidad →"); L.append("text").attr("transform", `translate(${lx - 8},${24 + 1.5 * cel}) rotate(-90)`).attr("text-anchor", "middle").attr("font-weight", 600).text("Cobertura →"); const yk = 24 + 3 * cel + 30; const claves = [[2, 0, "Hay cobertura, baja calidad"], [2, 2, "Cobertura y calidad altas"], [0, 2, "Calidad alta, poca cobertura"], [0, 0, "Rezago en ambas"]]; claves.forEach(([cb, cc, t], i) => { L.append("rect").attr("y", yk + i * 16).attr("width", 11).attr("height", 11).attr("fill", BIV[cb][cc]); L.append("text").attr("x", 16).attr("y", yk + i * 16 + 9.5).attr("font-size", 9.8).text(t); }); L.append("rect").attr("y", yk + 66).attr("width", 11).attr("height", 11).attr("fill", `url(#${pid})`).attr("stroke", "#ccc"); L.append("text").attr("x", 16).attr("y", yk + 75.5).attr("font-size", 9.8).text("Sin dato"); const notas = L.append("g").attr("transform", `translate(0,${yk + 98})`).attr("font-size", 9.5).attr("fill", "#5b6b7f"); function update() { const a = estado.anio, conj = conjuntoActivo(); const activo = d => !conj ? true : conj.nivel === "mun" ? conj.codes.has(d.cod) : conj.nivel === "dep" ? conj.codes.has(d.dp) : true; mpios.transition().duration(350) .attr("fill", d => { const k = claseMun(d.cod, a); return k ? BIV[k.cob][k.cal] : `url(#${pid})`; }) .attr("fill-opacity", d => activo(d) ? 1 : 0.1); velo.attr("opacity", f => estado.dpto && pad(f.properties.DPTO_CCDGO, 2) !== estado.dpto ? 0.75 : 0); realceDep.attr("d", estado.dpto && dptoFeat.has(estado.dpto) ? path(dptoFeat.get(estado.dpto)) : null); realce.attr("d", estado.mpio && featPorCod.has(estado.mpio) ? featPorCod.get(estado.mpio).d : null); celdas.attr("stroke", ([cb, cc]) => estado.claseBiv && estado.claseBiv[0] === cb && estado.claseBiv[1] === cc ? "#111" : "none") .attr("stroke-width", 2.5) .attr("opacity", ([cb, cc]) => !estado.claseBiv || (estado.claseBiv[0] === cb && estado.claseBiv[1] === cc) ? 1 : 0.45); const tc = terciles(a, estado.calidad), tb = terciles(a, estado.cobertura), p = PAIS.get(a); const nomCal = {cal: "(Lect.+Mat.)/2", lect: "Lectura crítica", mat: "Matemáticas"}[estado.calidad]; const nomCob = {cob: "(Prim.+Sec.)/2", prim: "Cob. primaria", sec: "Cob. secundaria"}[estado.cobertura]; $(".s3").textContent = `${a} · Calidad ${nomCal} × Cobertura ${nomCob} · terciles municipales del año` + (estado.calidad === "cal" && estado.cobertura === "cob" ? " (= Inicador_bivariado_municipal)" : ""); notas.selectAll("*").remove(); const lineas = [ `Cortes ${a} (terciles):`, `calidad ${tc ? fmt(tc[0]) + " / " + fmt(tc[1]) : "sin dato"}`, `cobertura ${tb ? fmt(tb[0]) + " / " + fmt(tb[1]) : "sin dato"}`, "", "Colombia (Indicador_*_agg_pais):", `calidad ${fmt(p?.cal)} · cobertura ${fmt(p?.cob)} %` ]; if (!tc) lineas.push("", `⚠ ${a} no trae calidad`, "(Saber 11): mapa sin clasificar"); lineas.forEach((t, i) => notas.append("text").attr("y", i * 13).attr("font-weight", i === 0 || i === 4 ? 650 : 400).text(t)); } return {node: svg.node(), update, focus}; })(); // ======================= 4 · COORDENADAS PARALELAS ===================== const pc = (() => { const H = 260, m = {top: 40, right: 26, bottom: 18, left: 26}; const svg = d3.create("svg").attr("width", cw).attr("height", H).attr("viewBox", [0, 0, cw, H]) .style("max-width", "100%").style("height", "auto").style("display", "block"); const x = d3.scalePoint(IND.map(d => d.key), [m.left + 30, cw - m.right - 30]); const y = {}; const gCaja = svg.append("g"); // recuadro libre: debajo de las líneas para no bloquear hover/clic const gBase = svg.append("g").attr("fill", "none"); const gConj = svg.append("g").attr("fill", "none"); const gRef = svg.append("g").attr("fill", "none"); const gSel = svg.append("g"); const gEjes = svg.append("g"); const linea = d3.line().defined(p => p[1] != null); const puntos = v => IND.map(i => [x(i.key), v?.[i.key] == null ? null : y[i.key](v[i.key])]); // ¿el segmento p→q toca el rectángulo [[x0,y0],[x1,y1]]? (recorte Liang–Barsky) const segCruza = ([px, py], [qx, qy], [[x0, y0], [x1, y1]]) => { let t0 = 0, t1 = 1; const dx = qx - px, dy = qy - py; for (const [pp, qq] of [[-dx, px - x0], [dx, x1 - px], [-dy, py - y0], [dy, y1 - py]]) { if (pp === 0) { if (qq < 0) return false; continue; } const r = qq / pp; if (pp < 0) { if (r > t1) return false; if (r > t0) t0 = r; } else { if (r < t0) return false; if (r < t1) t1 = r; } } return true; }; const cruzaCaja = (v, caja) => { const pts = puntos(v); for (let j = 0; j < pts.length - 1; j++) if (pts[j][1] != null && pts[j + 1][1] != null && segCruza(pts[j], pts[j + 1], caja)) return true; return false; }; function reconstruir() { estado.rangos = new Map(); estado.caja = null; gCaja.selectAll("*").remove(); const brushLibre = d3.brush().extent([[m.left, m.top - 4], [cw - m.right, H - m.bottom + 4]]) .on("start brush end", event => { if (!event.sourceEvent) return; estado.caja = event.selection ?? null; estado.claseBiv = null; if (event.type === "end") actualizarTodo(); else actualizar(); }); gCaja.call(brushLibre) .call(g => g.select(".selection").attr("fill", "#e07b39").attr("fill-opacity", 0.1).attr("stroke", "#e07b39").attr("stroke-dasharray", "4 3")); const pool = estado.modoPC === "mun" ? Array.from(MUN).filter(([c]) => !estado.dpto || c.startsWith(estado.dpto)).flatMap(([, mm]) => Array.from(mm.values())) : [...todosDep, ...PAIS.values()]; for (const i of IND) { const v = pool.map(r => r?.[i.key]).filter(z => z != null).sort(d3.ascending); const lo = d3.quantileSorted(v, 0.005) ?? 0, hi = d3.quantileSorted(v, 0.995) ?? 100; y[i.key] = d3.scaleLinear([lo, hi === lo ? lo + 1 : hi], [H - m.bottom, m.top]).nice().clamp(true); } gEjes.selectAll("*").remove(); const ejes = gEjes.selectAll("g").data(IND).join("g").attr("transform", d => `translate(${x(d.key)},0)`); ejes.each(function (d) { d3.select(this).call(d3.axisLeft(y[d.key]).ticks(5).tickSizeOuter(0)) .call(g => g.selectAll("text").attr("font-size", 9.5).attr("fill", "#5b6b7f")) .call(g => g.selectAll("line,path").attr("stroke", "#9aa8b8")); }); ejes.append("path").attr("transform", `translate(0,${m.top - 25})`).attr("d", d => simboloSVG(d, 46)).attr("fill", d => d.color); ejes.append("text").attr("class", "titulo-eje").attr("y", m.top - 9).attr("text-anchor", "middle").attr("font-size", 11.5) .attr("fill", d => d.color).text(d => d.corto); const brush = d3.brushY().extent([[-12, m.top], [12, H - m.bottom]]) .on("start brush end", function (event, d) { if (!event.sourceEvent) return; if (event.selection) estado.rangos.set(d.key, event.selection.map(y[d.key].invert).sort(d3.ascending)); else estado.rangos.delete(d.key); estado.claseBiv = null; if (event.type === "end") actualizarTodo(); else actualizar(); }); ejes.append("g").attr("class", "brush").call(brush) .call(g => g.select(".selection").attr("fill", "#3d5f8f").attr("fill-opacity", 0.16).attr("stroke", "#3d5f8f")); } function eventos(sel) { sel.attr("pointer-events", "visibleStroke").style("cursor", "pointer") .on("pointerenter", function (e, d) { d3.select(this).attr("data-sw", d3.select(this).attr("stroke-width")).attr("stroke", "#e07b39").attr("stroke-width", 2.6).attr("stroke-opacity", 1).raise(); const ref = d.nivel === "mun" ? getRec("dep", d.cod.slice(0, 2), estado.anio) : d.nivel === "dep" ? PAIS.get(estado.anio) : null; mostrarTip(e, `

${d.nombre}

${estado.anio}${d.nivel === "mun" ? " · " + nombreDep.get(d.cod.slice(0, 2)) : ""}

${filaTip(d.v, ref, d.nivel === "mun" ? nombreDep.get(d.cod.slice(0, 2)) : "Colombia")}

clic para seleccionar

`); }) .on("pointermove", moverTip) .on("pointerleave", function () { ocultarTip(); actualizar(); }) .on("click", (e, d) => { if (d.nivel === "dep") seleccionar(estado.dpto === d.cod ? null : d.cod); else if (d.nivel === "mun") seleccionar(d.cod.slice(0, 2), estado.mpio === d.cod ? null : d.cod); }); } function actualizar() { const ents = entidadesPC(), conj = conjuntoActivo(); const selCod = estado.modoPC === "pais" ? "pais" : estado.modoPC === "dep" ? estado.dpto : estado.mpio; const enConj = e => conj && conj.nivel === e.nivel && conj.codes.has(e.cod); const muchos = ents.length > 150; gBase.selectAll("path").data(ents.filter(e => !enConj(e) && e.cod !== selCod), d => d.cod).join("path") .attr("d", d => linea(puntos(d.v))).attr("stroke", "#a9b8ca") .attr("stroke-opacity", conj ? 0.13 : muchos ? 0.3 : 0.65).attr("stroke-width", muchos ? 0.8 : 1.2).call(eventos); gConj.selectAll("path").data(ents.filter(e => enConj(e) && e.cod !== selCod), d => d.cod).join("path") .attr("d", d => linea(puntos(d.v))).attr("stroke", "#3d6fa8") .attr("stroke-opacity", conj && conj.codes.size > 150 ? 0.45 : 0.8).attr("stroke-width", 1.3).call(eventos); // referencia: un nivel arriba (país para departamentos, departamento o país para municipios) let ref = null, etqRef = ""; if (estado.modoPC === "dep") { ref = PAIS.get(estado.anio); etqRef = "Colombia"; } if (estado.modoPC === "mun") { ref = estado.dpto ? getRec("dep", estado.dpto, estado.anio) : PAIS.get(estado.anio); etqRef = estado.dpto ? nombreDep.get(estado.dpto) : "Colombia"; } gRef.selectAll("*").remove(); if (ref) { gRef.append("path").attr("d", linea(puntos(ref))).attr("stroke", "#e07b39").attr("stroke-width", 1.8).attr("stroke-dasharray", "6 4"); const ult = puntos(ref).filter(p => p[1] != null).at(-1); if (ult) gRef.append("text").attr("x", ult[0] + 6).attr("y", ult[1] - 6).attr("font-size", 10).attr("fill", "#c0612a").attr("font-weight", 600).text(etqRef); } gSel.selectAll("*").remove(); const sel = ents.find(e => e.cod === selCod); if (sel) { const pts = puntos(sel.v); gSel.append("path").attr("d", linea(pts)).attr("fill", "none").attr("stroke", "#0b2545").attr("stroke-width", 3); IND.forEach((i, j) => { if (pts[j][1] == null) return; gSel.append("circle").attr("cx", pts[j][0]).attr("cy", pts[j][1]).attr("r", 4.5).attr("fill", "#0b2545").attr("stroke", "#fff").attr("stroke-width", 1.5); gSel.append("text").attr("x", pts[j][0] + 8).attr("y", pts[j][1] - 7).attr("font-size", 11).attr("font-weight", 700).attr("fill", "#0b2545") .attr("stroke", "#fff").attr("stroke-width", 3).attr("paint-order", "stroke").text(fmt(sel.v?.[i.key])); }); } gEjes.raise(); gEjes.selectAll(".titulo-eje").attr("font-weight", d => (d.key === estado.calidad || d.key === estado.cobertura) ? 800 : 600) .attr("text-decoration", d => (d.key === estado.calidad || d.key === estado.cobertura) ? "underline" : null); const nivelTxt = {pais: "País · Indicador_*_pais_* (una sola línea)", dep: "Departamentos · Indicador_*_dep_*", mun: `Municipios${estado.dpto ? " de " + nombreDep.get(estado.dpto) : " (todo el país)"} · Indicador_*_mun_*`}[estado.modoPC]; $(".s4").textContent = `${estado.anio} · ${nivelTxt}${estado.modoPC !== "pais" ? " · arrastra sobre un eje o dibuja un recuadro en cualquier parte" : ""}`; } return {node: svg.node(), reconstruir, actualizar, cruzaCaja}; })(); // controles del panel 4 const segPC = segmentado([["País", "pais"], ["Departamentos", "dep"], ["Municipios", "mun"]], estado.modoPC, v => cambiarModoPC(v)); const btnRecuadros = Object.assign(document.createElement("button"), {type: "button", textContent: "Quitar recuadros", title: "Borra los recuadros del brush"}); btnRecuadros.style.cssText = "border:1px solid #c6d1df;border-radius:6px;background:#fff;padding:6px 8px;font-size:12px;cursor:pointer"; btnRecuadros.onclick = () => { estado.claseBiv = null; pc.reconstruir(); actualizarTodo(); }; const ctl = $(".ctlpc"); ctl.style.cssText = "display:flex;gap:8px;align-items:center"; ctl.append(segPC, btnRecuadros); // caja "Seleccionado" function actualizarCaja() { const conj = conjuntoActivo(); const caja = $(".caja"); caja.innerHTML = `Seleccionado: Año${estado.anio} Departamento${estado.dpto ? nombreDep.get(estado.dpto) : "Todos"}${estado.dpto ? '✕' : ""} Municipio${estado.mpio ? nombreMun.get(estado.mpio) : "Todos"}${estado.mpio ? '✕' : ""} ${conj ? `Filtro activo${conj.etiqueta}✕` : ""}`; caja.querySelectorAll(".x").forEach(el => el.onclick = () => { const q = el.dataset.q; if (q === "dpto") seleccionar(null); if (q === "mpio") seleccionar(estado.dpto); if (q === "conj") { estado.claseBiv = null; pc.reconstruir(); actualizarTodo(); } }); } // ============================ ORQUESTACIÓN ============================= function actualizarTodo() { syncFiltros(); segPC.fijar(estado.modoPC); dibujarLinea(); grid.update(); mapa.update(); pc.actualizar(); actualizarCaja(); } $(".c2").append(grid.node); $(".c3").append(mapa.node); $(".c4").append(pc.node); pc.reconstruir(); actualizarTodo(); display(raiz); }3f:Td79a,// ===================================================================== // Calidad y cobertura de la educación básica en Colombia // Observable · TODO EN UNA SOLA CELDA (D3) // // Adjuntos requeridos (FileAttachment): // df_enriquecido_filtrado.xlsx · MGN_ANM_MPIOS.geojson · MGN_ANM_DPTOS.geojson // // Todo está conectado: año (▶ récord), departamento, municipio, clic en el // grid, clic en el mapa, clic en la leyenda bivariada, clic en una línea y // recuadros (brush) sobre los ejes de coordenadas paralelas. // ===================================================================== { // ============================ CONFIGURACIÓN ============================ const ANCHO = Math.min(width, 1500); const VELOCIDAD = 1300; // ms por año en el récord const ANIO_INICIAL = 2022; // último año con calidad (2023-2024 solo traen cobertura) // El "juego de columnas": qué columna usa cada nivel geográfico const COLUMNAS = { pais: {lect: "Indicador_cal_pais_Lect_critica", mat: "Indicador_cal_pais_Matematicas", prim: "Indicador_cob_pais_net_primaria", sec: "Indicador_cob_pais_dep_secundaria", cal: "Indicador_cal_agg_pais", cob: "Indicador_cob_agg_pais"}, dep: {lect: "Indicador_cal_dep_Lect_critica", mat: "Indicador_cal_dep_Matematicas", prim: "Indicador_cob_dep_net_primaria", sec: "Indicador_cob_dep_secundaria", cal: "Indicador_cal_dep_pais", cob: "Indicador_cob_dep_pais"}, // municipal: cal y cob = promedio de las dos columnas (misma regla que Inicador_bivariado_municipal) mun: {lect: "Indicador_cal_mun_Lect_critica", mat: "Indicador_cal_mun_Matematicas", prim: "Indicador_cob_mun_net_primaria", sec: "Indicador_cob_mun_net_secundaria", cal: null, cob: null} }; const IND = [ {key: "lect", nombre: "Lectura crítica", corto: "Lectura crítica", tipo: "cal", color: "#1f4e79", simbolo: d3.symbolCircle, dash: null}, {key: "mat", nombre: "Matemáticas", corto: "Matemáticas", tipo: "cal", color: "#d9732f", simbolo: d3.symbolSquare, dash: null}, {key: "prim", nombre: "Cobertura neta primaria", corto: "Cob. primaria", tipo: "cob", color: "#2a9d8f", simbolo: d3.symbolTriangle, dash: "7 4"}, {key: "sec", nombre: "Cobertura neta secundaria", corto: "Cob. secundaria", tipo: "cob", color: "#8e5ea2", simbolo: d3.symbolDiamond, dash: "7 4"} ]; const PALETA_CAL = ["#e6edf6", "#c3d4ea", "#94b3d7", "#5f8bbf", "#2f5f98"]; const ETQ_CAL = ["Baja", "Media baja", "Media", "Media alta", "Alta"]; // Bivariada 3×3 · BIV[cobertura][calidad] (0 = bajo, 2 = alto) const BIV = [ ["#e8e8e8", "#dfb0d6", "#be64ac"], ["#ace4e4", "#a5add3", "#8c62aa"], ["#5ac8c8", "#5698b9", "#3b4994"] ]; const NIV = ["baja", "media", "alta"]; // Grid map: posición geográfica [código DANE, columna, fila, sigla] // Grid map: rombo con "colas" (La Guajira al NE, Putumayo/Amazonas al sur) // [código DANE, columna, fila, sigla] const TILES = [ ["88", 0, 0, "SAI"], ["44", 6, 0, "GUA"], ["08", 3, 1, "ATL"], ["47", 4, 1, "MAG"], ["20", 5, 1, "CES"], ["23", 2, 2, "COR"], ["70", 3, 2, "SUC"], ["13", 4, 2, "BOL"], ["54", 5, 2, "NSA"], ["81", 6, 2, "ARA"], ["27", 1, 3, "CHO"], ["05", 2, 3, "ANT"], ["68", 3, 3, "SAN"], ["15", 4, 3, "BOY"], ["85", 5, 3, "CAS"], ["99", 6, 3, "VIC"], ["76", 0, 4, "VAL"], ["66", 1, 4, "RIS"], ["17", 2, 4, "CAL"], ["25", 3, 4, "CUN"], ["11", 4, 4, "BOG"], ["50", 5, 4, "MET"], ["94", 6, 4, "GNA"], ["19", 1, 5, "CAU"], ["63", 2, 5, "QUI"], ["73", 3, 5, "TOL"], ["41", 4, 5, "HUI"], ["95", 5, 5, "GUV"], ["97", 6, 5, "VAU"], ["52", 1, 6, "NAR"], ["86", 2, 6, "PUT"], ["18", 3, 6, "CAQ"], ["91", 4, 7, "AMA"] ]; const COLS = d3.max(TILES, d => d[1]) + 1, FILAS = d3.max(TILES, d => d[2]) + 1; // ================================ CARGA ================================ const [libro, mpiosGeo, dptosGeo] = await Promise.all([ FileAttachment("df_enriquecido_filtrado.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 positivo = v => { const n = aNumero(v); return n != null && n > 0 ? n : null; }; // 0 = sin dato const pad = (v, n) => String(v ?? "").trim().padStart(n, "0"); const media2 = (a, b) => a != null && b != null ? (a + b) / 2 : null; const KEYS = ["lect", "mat", "prim", "sec", "cal", "cob"]; const leer = (d, nivel) => { const c = COLUMNAS[nivel]; const r = {lect: positivo(d[c.lect]), mat: positivo(d[c.mat]), prim: positivo(d[c.prim]), sec: positivo(d[c.sec])}; r.cal = c.cal ? positivo(d[c.cal]) : media2(r.lect, r.mat); r.cob = c.cob ? positivo(d[c.cob]) : media2(r.prim, r.sec); return r; }; const PAIS = new Map(), DEP = new Map(), MUN = new Map(); const nombreDep = new Map(), nombreMun = new Map(); const vistos = new Set(); for (const d of filas) { const anio = +d["Año"]; if (!anio) continue; const cod = pad(d["Código Entidad"], 5), dp = pad(d["Código Departamento"], 2); const clave = cod + "|" + anio; if (vistos.has(clave)) continue; // formato largo: 4 filas (indicadores) por municipio-año vistos.add(clave); if (!PAIS.has(anio) || PAIS.get(anio).cal == null) PAIS.set(anio, leer(d, "pais")); if (dp === "01") continue; // fila "Colombia" if (!nombreDep.has(dp)) nombreDep.set(dp, d["Departamento"]); if (!DEP.has(dp)) DEP.set(dp, new Map()); if (!DEP.get(dp).has(anio)) DEP.get(dp).set(anio, leer(d, "dep")); if (cod.endsWith("000")) continue; // fila agregada del departamento nombreMun.set(cod, d["Entidad"]); if (!MUN.has(cod)) MUN.set(cod, new Map()); MUN.get(cod).set(anio, leer(d, "mun")); } const anios = Array.from(PAIS.keys()).sort(d3.ascending); const depsOrdenados = d3.sort(Array.from(nombreDep), d => d[1]); const getRec = (nivel, cod, anio) => nivel === "pais" ? PAIS.get(anio) : nivel === "dep" ? DEP.get(cod)?.get(anio) : MUN.get(cod)?.get(anio); const serie = (nivel, cod) => anios.map(a => ({anio: a, ...(getRec(nivel, cod, a) ?? {})})); const serieMedia = (nivel, codes) => anios.map(a => { const rs = Array.from(codes, c => getRec(nivel, c, a)).filter(Boolean); const o = {anio: a}; for (const k of KEYS) o[k] = d3.mean(rs, r => r[k]) ?? null; return o; }); // ---------- estadísticos (memoizados) ---------- const memo = new Map(); const cache = (k, f) => { if (!memo.has(k)) memo.set(k, f()); return memo.get(k); }; const todosDep = Array.from(DEP.values()).flatMap(m => Array.from(m.values())); const umbralesCal = key => cache("uc" + key, () => { const v = todosDep.map(r => r[key]).filter(x => x != null).sort(d3.ascending); return [0.2, 0.4, 0.6, 0.8].map(p => d3.quantileSorted(v, p)); }); // percentiles 5–95 (con clamp) para que las diferencias de área sean visibles const extCob = key => cache("ec" + key, () => { const v = todosDep.map(r => r[key]).filter(x => x != null).sort(d3.ascending); return [d3.quantileSorted(v, 0.05), d3.quantileSorted(v, 0.95)]; }); const terciles = (anio, key) => cache(`t${anio}${key}`, () => { const v = Array.from(MUN.values(), m => m.get(anio)?.[key]).filter(x => x != null).sort(d3.ascending); return v.length ? [d3.quantileSorted(v, 1 / 3), d3.quantileSorted(v, 2 / 3)] : null; }); const tercil = (v, t) => v == null || !t ? null : v <= t[0] ? 0 : v <= t[1] ? 1 : 2; // ================================ ESTADO =============================== const estado = { anio: anios.includes(ANIO_INICIAL) ? ANIO_INICIAL : anios.at(-1), dpto: null, mpio: null, calidad: "cal", cobertura: "cob", // columnas activas para grid y mapa modoPC: "pais", // pais | dep | mun rangos: new Map(), // recuadros del brush por eje caja: null, // recuadro libre (en cualquier parte del gráfico) [[x0,y0],[x1,y1]] claseBiv: null // [cob, cal] al hacer clic en la leyenda bivariada }; const claseMun = (cod, anio) => { const r = MUN.get(cod)?.get(anio); if (!r) return null; const a = tercil(r[estado.calidad], terciles(anio, estado.calidad)); const b = tercil(r[estado.cobertura], terciles(anio, estado.cobertura)); return a == null || b == null ? null : {cal: a, cob: b}; }; function entidadesPC() { const a = estado.anio; if (estado.modoPC === "pais") return [{cod: "pais", nombre: "Colombia", nivel: "pais", v: PAIS.get(a)}]; if (estado.modoPC === "dep") return Array.from(DEP.keys(), cod => ({cod, nombre: nombreDep.get(cod), nivel: "dep", v: DEP.get(cod).get(a)})); return Array.from(MUN.keys()).filter(c => !estado.dpto || c.startsWith(estado.dpto)) .map(cod => ({cod, nombre: nombreMun.get(cod), nivel: "mun", v: MUN.get(cod).get(a)})); } // conjunto activo = lo seleccionado por recuadro (brush) o por la leyenda bivariada function conjuntoActivo() { if (estado.claseBiv) { const [cb, cc] = estado.claseBiv; const codes = new Set(Array.from(MUN.keys()).filter(c => (!estado.dpto || c.startsWith(estado.dpto)) && (k => k && k.cob === cb && k.cal === cc)(claseMun(c, estado.anio)))); return {nivel: "mun", codes, etiqueta: `${codes.size} municipios con calidad ${NIV[cc]} y cobertura ${NIV[cb]}`}; } if ((estado.rangos.size || estado.caja) && estado.modoPC !== "pais") { const ok = e => Array.from(estado.rangos).every(([k, [lo, hi]]) => e.v?.[k] != null && e.v[k] >= lo && e.v[k] <= hi) && (!estado.caja || pc.cruzaCaja(e.v, estado.caja)); const codes = new Set(entidadesPC().filter(ok).map(e => e.cod)); return {nivel: estado.modoPC, codes, etiqueta: `${codes.size} ${estado.modoPC === "dep" ? "departamentos" : "municipios"} dentro de la selección por recuadro`}; } return null; } // ============================== FORMATO ================================ const fmt = v => v == null || !Number.isFinite(v) ? "s/d" : v.toFixed(1).replace(".", ","); const uid = p => p + "-" + Math.random().toString(36).slice(2, 9); const capitalizar = s => String(s).toLowerCase().replace(/(^|[\s(.-])\p{L}/gu, c => c.toUpperCase()); const simboloSVG = (ind, size = 52) => d3.symbol().type(ind.simbolo).size(size)(); const corta = (t, n = 16) => { t = String(t ?? ""); return t.length > n ? t.slice(0, n - 1) + "…" : t; }; // tabla del tooltip: columna "Valor" = lo que se señala · columna gris = referencia (un nivel arriba) const filaTip = (r, ref, etqRef) => (ref ? ` Valor ${corta(etqRef)}` : "") + IND.map(i => ` ${i.corto}${fmt(r?.[i.key])}${i.tipo === "cob" && r?.[i.key] != null ? " %" : ""} ${ref ? `${fmt(ref?.[i.key])}` : ""}`).join("") + ""; const htmlDep = cod => { const r = getRec("dep", cod, estado.anio), p = PAIS.get(estado.anio); return `