3e:null 3f:["$","title",null,{"children":"Educación en Colombia, 2011–2022 | Lucas Mejia | Observable"}] 45:T5d5,const INDICADORES = [ { k: "saber_mat", corto: "Saber 11 · Matemáticas", nombre: "Puntaje promedio Pruebas Saber 11 – Matemáticas", grupo: "Calidad", unidad: "pts", pol: 1 }, { k: "saber_lec", corto: "Saber 11 · Lectura crítica", nombre: "Puntaje promedio Pruebas Saber 11 – Lectura crítica", grupo: "Calidad", unidad: "pts", pol: 1 }, { k: "cn_pri", corto: "Cobertura neta primaria", nombre: "Cobertura neta en educación primaria", grupo: "Cobertura (acceso)", unidad: "%", pol: 1 }, { k: "cn_sec", corto: "Cobertura neta secundaria", nombre: "Cobertura neta en educación secundaria", grupo: "Cobertura (acceso)", unidad: "%", pol: 1 }, { k: "cn_med", corto: "Cobertura neta media", nombre: "Cobertura neta en educación media", grupo: "Cobertura (acceso)", unidad: "%", pol: 1 }, { k: "cb_pri", corto: "Cobertura bruta primaria", nombre: "Cobertura bruta en educación primaria", grupo: "Cobertura (acceso)", unidad: "%", pol: 1 }, { k: "cb_sec", corto: "Cobertura bruta secundaria", nombre: "Cobertura bruta en educación secundaria", grupo: "Cobertura (acceso)", unidad: "%", pol: 1 }, { k: "desercion", corto: "Deserción intra-anual (oficial)", nombre: "Tasa de deserción intra-anual del sector oficial (transición a once)", grupo: "Permanencia y rezago", unidad: "%", pol: -1 }, { k: "repitencia", corto: "Repitencia (oficial)", nombre: "Tasa de repitencia del sector oficial (transición a once)", grupo: "Permanencia y rezago", unidad: "%", pol: -1 } ]46:Taf0,function prepararDatos(filas, entidades, dptos, mpios) { const claves = INDICADORES.map(d => d.k); const ent = new Map(entidades.map(e => [e.cod, { ...e, pob: +e.pob2018 || 0 }])); const val = new Map(); // cod -> Map(anio -> fila) for (const f of filas) { const r = { cod: f.cod, anio: +f.anio }; for (const k of claves) r[k] = f[k] === "" || f[k] == null ? null : +f[k]; if (!val.has(r.cod)) val.set(r.cod, new Map()); val.get(r.cod).set(r.anio, r); } const valor = (cod, anio, k) => val.get(cod)?.get(anio)?.[k] ?? null; const codDpto = d => (d === "11" ? "11001" : d + "000"); // Bogotá D.C. = 11001 const todas = [...ent.values()]; const departamentos = todas.filter(e => e.nivel === "D" || e.nivel === "DM"); const municipios = todas.filter(e => e.nivel === "M" || e.nivel === "DM"); const muniPorDpto = d3.group(municipios, d => d.dpto); const regionDe = dpto => ent.get(codDpto(dpto))?.region ?? ""; // Dominios FIJOS para todo 2011–2022: un cambio de color/longitud entre años // es un cambio real del dato, no un reescalado. const cache = new Map(); function valoresDe(lista, k) { const vs = []; for (const e of lista) for (const a of ANIOS) { const v = valor(e.cod, a, k); if (v != null) vs.push(v); } return vs.sort(d3.ascending); } function dominio(k, nivel, lista = null, id = "") { const key = `${k}|${nivel}|${id}`; if (cache.has(key)) return cache.get(key); const vs = valoresDe(lista ?? (nivel === "D" ? departamentos : municipios), k); // Departamentos: extremos reales. Municipios: percentiles 2–98 (los // valores atípicos —p. ej. coberturas brutas > 300 %— saturan la escala). const dom = nivel === "D" ? [vs[0], vs[vs.length - 1]] : [d3.quantileSorted(vs, 0.02), d3.quantileSorted(vs, 0.98)]; cache.set(key, dom); return dom; } function maximo(k, lista, id) { const key = `max|${k}|${id}`; if (!cache.has(key)) cache.set(key, d3.max(valoresDe(lista, k))); return cache.get(key); } // Atributo derivado: promedio regional ponderado por población (Censo 2018) function promedioRegion(region, anio, k) { let s = 0, w = 0; for (const e of departamentos) { if (e.region !== region) continue; const v = valor(e.cod, anio, k); if (v != null && e.pob > 0) { s += v * e.pob; w += e.pob; } } return w ? s / w : null; } function rango(cod, anio, k, lista) { const orden = lista.map(e => valor(e.cod, anio, k)).filter(v => v != null).sort(d3.descending); const v = valor(cod, anio, k); return v == null ? null : { pos: orden.indexOf(v) + 1, n: orden.length }; } return { ent, val, valor, codDpto, regionDe, departamentos, municipios, muniPorDpto, dominio, maximo, promedioRegion, rango, dptos, mpios }; }47:T46e,function htmlEntidad(datos, cod, estado, k = estado.ind) { const e = datos.ent.get(cod); if (!e) return ""; const v = datos.valor(cod, estado.anio, k); const v0 = datos.valor(cod, ANIOS[0], k); const lista = e.nivel === "M" || (estado.dpto && e.nivel === "DM") ? datos.muniPorDpto.get(e.dpto) : datos.departamentos; const r = datos.rango(cod, estado.anio, k, lista); const delta = v != null && v0 != null ? v - v0 : null; const lugar = e.nivel === "M" ? `${e.dpto_nombre} · ` : ""; return `

${e.nombre}

${lugar}Región ${e.region}

${IND[k].corto} ${estado.anio}${fmtValor(k, v)}

${delta != null ? `

Cambio desde ${ANIOS[0]}${delta >= 0 ? "+" : "−"}${fmtValor(k, Math.abs(delta))}

` : ""} ${r ? `

${lista === datos.departamentos ? "Posición nacional" : `Posición en ${e.dpto_nombre}`}${r.pos} de ${r.n}

` : ""}

Clic: ${e.nivel === "D" ? "ver municipios" : "comparar en la serie"}

`; }48:T1c25,// VISTA 1 · Mapa coroplético con desglose (drill-down) departamento → municipios function crearMapa(datos, ctx) { const W = 520, H = 640; const svg = d3.create("svg").attr("viewBox", [0, 0, W, H]).attr("class", "l3-svg"); const continental = { type: "FeatureCollection", features: datos.dptos.features.filter(f => f.id !== "88") }; const proj = d3.geoMercator().fitExtent([[10, 10], [W - 10, H - 78]], continental); const fInsular = datos.dptos.features.find(f => f.id === "88"); const projIns = d3.geoMercator().fitExtent([[24, 34], [72, 104]], fInsular); const pathC = d3.geoPath(proj), pathI = d3.geoPath(projIns); const pathDe = f => (f.properties.dpto === "88" ? pathI : pathC); const camino = f => pathDe(f)(f); const fDpto = new Map(datos.dptos.features.map(f => [f.id, f])); const idClip = "l3-clip-" + Math.random().toString(36).slice(2, 8); svg.append("clipPath").attr("id", idClip).append("rect").attr("width", W).attr("height", H - 66); svg.style("overflow", "hidden"); const gZoom = svg.append("g").attr("class", "m-zoom").attr("clip-path", `url(#${idClip})`).append("g"); gZoom.append("rect").attr("x", 14).attr("y", 24).attr("width", 68).attr("height", 90).attr("rx", 3) .attr("class", "m-inset").attr("vector-effect", "non-scaling-stroke"); gZoom.append("text").attr("x", 14).attr("y", 18).attr("class", "m-inset-t").text("San Andrés y Prov."); const gM = gZoom.append("g"); const gD = gZoom.append("g"); // Leyenda (rampa continua + eje) const idGrad = "l3-grad-" + Math.random().toString(36).slice(2, 8); const grad = svg.append("defs").append("linearGradient").attr("id", idGrad); const gLey = svg.append("g").attr("transform", `translate(${W - 262},${H - 44})`); const tituloLey = gLey.append("text").attr("class", "lg-t").attr("y", -8); gLey.append("rect").attr("width", 240).attr("height", 10).attr("rx", 2).attr("fill", `url(#${idGrad})`); const ejeLey = gLey.append("g").attr("class", "eje").attr("transform", "translate(0,10)"); const notaLey = gLey.append("text").attr("class", "lg-n").attr("y", 38); const gSd = svg.append("g").attr("transform", `translate(14,${H - 44})`); gSd.append("rect").attr("width", 12).attr("height", 10).attr("rx", 2).attr("fill", SIN_DATO); gSd.append("text").attr("x", 17).attr("y", 9).attr("class", "lg-n").text("Sin dato"); function eventos(sel, tipo) { sel.on("mousemove", function (ev, f) { const est = ctx.estado(); const cod = tipo === "D" ? datos.codDpto(f.id) : f.id; const html = datos.ent.has(cod) ? htmlEntidad(datos, cod, est) : `

${f.properties.nombre}

Área no municipalizada · sin datos en TerriData

`; ctx.tooltip.mostrar(ev, html); d3.select(this).classed("hover", true).raise(); }) .on("mouseleave", function () { ctx.tooltip.ocultar(); d3.select(this).classed("hover", false); }) .on("click", (ev, f) => { ctx.tooltip.ocultar(); if (tipo === "D") ctx.alDepartamento(f.id); else if (datos.ent.has(f.id)) ctx.alMunicipio(f.id, f.properties.dpto); }); } function update(est) { const { ind, anio, nivel, dpto, regiones, sel } = est; const t = svg.transition().duration(800).ease(d3.easeCubicInOut); const colD = escalaColor(ind, datos.dominio(ind, "D")); const colM = escalaColor(ind, datos.dominio(ind, "M")); const verMunis = dpto != null || nivel === "M"; const enSel = new Set(sel); const activoD = id => regiones.has(datos.regionDe(id)); const colorDpto = id => { const v = datos.valor(datos.codDpto(id), anio, ind); return v == null ? SIN_DATO : colD(v); }; const colorMuni = f => { const v = datos.valor(f.id, anio, ind); return v == null ? SIN_DATO : colM(v); }; // ---- Municipios: ENTER (heredan el color del departamento y "se revelan"), // UPDATE (transición de color), EXIT (desvanecen y se eliminan) const munis = dpto ? datos.mpios.features.filter(f => f.properties.dpto === dpto) : nivel === "M" ? datos.mpios.features : []; gM.selectAll("path.mun") .data(munis, f => f.id) .join( enter => enter.append("path").attr("class", "mun").attr("d", camino) .attr("vector-effect", "non-scaling-stroke") .attr("fill", f => colorDpto(f.properties.dpto)).attr("opacity", 0) .call(eventos, "M") .call(e => e.transition(t).attr("opacity", 1).attr("fill", colorMuni)), update => update.call(u => u.transition(t).attr("opacity", 1).attr("fill", colorMuni)), exit => exit.call(x => x.transition(t).attr("opacity", 0).remove()) ) .classed("sel", f => enSel.has(f.id)) .attr("fill-opacity", f => (activoD(f.properties.dpto) ? 1 : 0.18)); gM.selectAll("path.mun.sel").raise(); // ---- Departamentos: siempre 33 marcas de área; el UPDATE cambia color, // opacidad y borde según el modo (nivel / desglose / filtro de región) gD.selectAll("path.dep") .data(datos.dptos.features, f => f.id) .join( enter => enter.append("path").attr("class", "dep").attr("d", camino) .attr("vector-effect", "non-scaling-stroke").attr("fill", SIN_DATO) .call(eventos, "D"), update => update, exit => exit.remove() ) .classed("borde", verMunis) .classed("foco", f => f.id === dpto) .classed("sel", f => !dpto && enSel.has(datos.codDpto(f.id))) .style("pointer-events", f => (verMunis && (dpto == null || f.id === dpto) ? "none" : "all")) .transition(t) .attr("fill", f => (dpto && f.id !== dpto ? ctx.css("--l3-contexto", "#ecebe6") : colorDpto(f.id))) .attr("fill-opacity", f => { if (dpto) return f.id === dpto ? 0 : 1; if (nivel === "M") return 0; return activoD(f.id) ? 1 : 0.18; }); gD.selectAll("path.dep.foco, path.dep.sel").raise(); // ---- Zoom semántico al departamento elegido (transición del grupo) let tr = "translate(0,0) scale(1)"; if (dpto && fDpto.has(dpto)) { const f = fDpto.get(dpto); const [[x0, y0], [x1, y1]] = pathDe(f).bounds(f); const k = Math.min(12, 0.86 / Math.max((x1 - x0) / W, (y1 - y0) / (H - 80))); tr = `translate(${W / 2 - k * (x0 + x1) / 2},${(H - 80) / 2 - k * (y0 + y1) / 2}) scale(${k})`; } gZoom.transition(t).attr("transform", tr); gZoom.selectAll(".m-inset, .m-inset-t").transition(t).attr("opacity", dpto && dpto !== "88" ? 0 : 1); // ---- Leyenda const escala = verMunis ? colM : colD; const [a, b] = escala.domain(); grad.selectAll("stop").data(d3.range(0, 1.0001, 0.1)).join("stop") .attr("offset", d => `${d * 100}%`).attr("stop-color", d => escala(a + d * (b - a))); ejeLey.transition(t).call(d3.axisBottom(d3.scaleLinear([a, b], [0, 240])).ticks(5).tickSize(4).tickFormat(fmtES.format(",.0f"))); tituloLey.text(`${IND[ind].corto} (${IND[ind].unidad}) · ${IND[ind].pol > 0 ? "↑ mejor" : "↓ mejor"}`); notaLey.text(verMunis ? "Escala fija 2011–2022 · p2–p98 municipal" : "Escala fija 2011–2022 · mín.–máx. dptal."); } return { node: svg.node(), update }; }49:T1463,// VISTA 2 · Ranking (barras horizontales ordenadas) con re-ordenamiento animado function crearRanking(datos, ctx) { const W = 560, H = 640, m = { t: 30, r: 58, b: 12, l: 150 }; const svg = d3.create("svg").attr("viewBox", [0, 0, W, H]).attr("class", "l3-svg"); const gEje = svg.append("g").attr("class", "eje grid").attr("transform", `translate(0,${m.t})`); const gBar = svg.append("g"); const gRef = svg.append("g").attr("class", "ref"); const gNom = svg.append("g"), gVal = svg.append("g"); gRef.append("line").attr("y1", m.t).attr("y2", H - m.b); const refTxt = gRef.append("text").attr("y", m.t - 18).attr("text-anchor", "middle"); const nota = svg.append("text").attr("class", "lg-n").attr("x", W - m.r).attr("y", H - 1).attr("text-anchor", "end"); function update(est) { const { ind, anio, dpto, regiones, sel } = est; const lista = dpto ? datos.muniPorDpto.get(dpto) ?? [] : datos.departamentos; const enSel = new Set(sel); const items = lista.filter(e => regiones.has(e.region)) .map(e => ({ e, cod: e.cod, v: datos.valor(e.cod, anio, ind) })) .filter(d => d.v != null) .sort((a, b) => d3.descending(a.v, b.v) || d3.ascending(a.e.nombre, b.e.nombre)); const sinDato = lista.filter(e => regiones.has(e.region)).length - items.length; const refCod = dpto ? datos.codDpto(dpto) : "01001"; const refV = datos.valor(refCod, anio, ind); const xMax = Math.max(datos.maximo(ind, lista, dpto ?? "D"), datos.maximo(ind, [datos.ent.get(refCod)], refCod) ?? 0); const x = d3.scaleLinear([0, xMax], [m.l, W - m.r]).nice(); const alto = Math.min(H - m.b - m.t - 4, Math.max(items.length, 1) * 19); // tope de 19 px por barra const y = d3.scaleBand(items.map(d => d.cod), [m.t + 4, m.t + 4 + alto]).paddingInner(items.length > 40 ? 0.12 : 0.22); const bw = y.bandwidth(); const conEtiqueta = bw >= 8.5; const fs = Math.min(12, Math.max(8, bw * 0.8)); const t = svg.transition().duration(800).ease(d3.easeCubicInOut); const retraso = (d, i) => Math.min(i * 10, 350); gEje.transition(t).call(d3.axisTop(x).ticks(5).tickSize(-(alto + 4)).tickFormat(fmtES.format(",.0f"))) .call(g => g.select(".domain").remove()); gBar.selectAll("rect") .data(items, d => d.cod) .join( enter => enter.append("rect").attr("x", x(0)).attr("y", d => y(d.cod)).attr("height", bw) .attr("width", 0).attr("rx", Math.min(3, bw / 2)).attr("fill", d => COLOR_REGION(d.e.region)) .call(e => e.transition(t).delay(retraso).attr("width", d => x(d.v) - x(0))), update => update.call(u => u.transition(t).delay(retraso) .attr("x", x(0)).attr("y", d => y(d.cod)).attr("height", bw).attr("rx", Math.min(3, bw / 2)) .attr("width", d => x(d.v) - x(0)).attr("fill", d => COLOR_REGION(d.e.region))), exit => exit.call(x0 => x0.transition(t).attr("width", 0).attr("opacity", 0).remove()) ) .classed("sel", d => enSel.has(d.cod)) .on("mousemove", (ev, d) => ctx.tooltip.mostrar(ev, htmlEntidad(datos, d.cod, ctx.estado()))) .on("mouseleave", () => ctx.tooltip.ocultar()) .on("click", (ev, d) => { ctx.tooltip.ocultar(); ctx.alAlternar(d.cod); }); gNom.selectAll("text") .data(conEtiqueta ? items : [], d => d.cod) .join( enter => enter.append("text").attr("x", m.l - 6).attr("y", d => y(d.cod) + bw / 2).attr("opacity", 0) .call(e => e.transition(t).delay(retraso).attr("opacity", 1)), update => update.call(u => u.transition(t).delay(retraso).attr("y", d => y(d.cod) + bw / 2).attr("opacity", 1)), exit => exit.call(x0 => x0.transition(t).attr("opacity", 0).remove()) ) .attr("class", d => "nom" + (enSel.has(d.cod) ? " sel" : "")) .attr("text-anchor", "end").attr("dy", "0.35em").style("font-size", `${fs}px`) .text(d => d.e.nombre.length > 22 ? d.e.nombre.slice(0, 21) + "…" : d.e.nombre); gVal.selectAll("text") .data(conEtiqueta ? items : [], d => d.cod) .join( enter => enter.append("text").attr("x", x(0) + 4).attr("y", d => y(d.cod) + bw / 2).attr("opacity", 0), update => update, exit => exit.call(x0 => x0.transition(t).attr("opacity", 0).remove()) ) .attr("class", "val").attr("dy", "0.35em").style("font-size", `${fs}px`) .transition(t).delay(retraso) .attr("opacity", 1).attr("x", d => x(d.v) + 4).attr("y", d => y(d.cod) + bw / 2) .textTween(function (d) { // contador numérico: interpola el valor anterior → nuevo const i = d3.interpolateNumber(this.__v ?? d.v, d.v); this.__v = d.v; return u => fmtES.format(",.1f")(i(u)); }); gRef.select("line").transition(t).attr("y2", m.t + 4 + alto); gRef.transition(t).attr("opacity", refV == null ? 0 : 1) .attr("transform", `translate(${refV == null ? x(0) : x(refV)},0)`); refTxt.text(`${datos.ent.get(refCod)?.nombre ?? ""} ${fmtValor(ind, refV, false)}`); nota.text(`${items.length} ${dpto ? "municipios" : "departamentos"}${sinDato > 0 ? ` · ${sinDato} sin dato` : ""}${conEtiqueta ? "" : " · pase el cursor para ver nombres"}`); } return { node: svg.node(), update }; }4a:T194d,// VISTA 3 · Serie temporal 2011–2022: Colombia, regiones y entidades elegidas function crearSerie(datos, ctx) { const W = 720, H = 360, m = { t: 22, r: 150, b: 30, l: 48 }; const svg = d3.create("svg").attr("viewBox", [0, 0, W, H]).attr("class", "l3-svg"); const x = d3.scaleLinear([ANIOS[0], ANIOS[ANIOS.length - 1]], [m.l, W - m.r]); const gX = svg.append("g").attr("class", "eje").attr("transform", `translate(0,${H - m.b})`) .call(d3.axisBottom(x).ticks(ANIOS.length).tickFormat(d3.format("d")).tickSizeOuter(0)); const gY = svg.append("g").attr("class", "eje grid").attr("transform", `translate(${m.l},0)`); const regla = svg.append("g").attr("class", "regla"); regla.append("line").attr("y1", m.t - 6).attr("y2", H - m.b); const reglaTxt = regla.append("text").attr("y", m.t - 10).attr("text-anchor", "middle"); const gLin = svg.append("g").attr("fill", "none"); const gPto = svg.append("g"), gEt = svg.append("g"); const cruz = svg.append("line").attr("class", "cruz").attr("y1", m.t).attr("y2", H - m.b).attr("opacity", 0); let y = d3.scaleLinear(); let seriesActuales = []; svg.append("rect").attr("x", m.l).attr("y", m.t).attr("width", W - m.l - m.r).attr("height", H - m.t - m.b) .attr("fill", "transparent") .on("mousemove", function (ev) { const [mx] = d3.pointer(ev, this); const a = Math.round(x.invert(mx)); const est = ctx.estado(); cruz.attr("x1", x(a)).attr("x2", x(a)).attr("opacity", 1); const filas = seriesActuales.map(s => ({ s, v: s.pts.find(p => p.anio === a)?.v })) .filter(d => d.v != null).sort((p, q) => q.v - p.v) .map(d => `

${d.s.nombre}${fmtValor(est.ind, d.v)}

`).join(""); ctx.tooltip.mostrar(ev, `

${IND[est.ind].corto} · ${a}

${filas}

Clic: fijar el año ${a}

`); }) .on("mouseleave", () => { cruz.attr("opacity", 0); ctx.tooltip.ocultar(); }) .on("click", function (ev) { const [mx] = d3.pointer(ev, this); ctx.alAnio(Math.round(x.invert(mx))); }); function update(est) { const { ind, anio, regiones, sel } = est; const pts = f => ANIOS.map(a => ({ anio: a, v: f(a) })); const series = [{ id: "01001", tipo: "nac", nombre: "Colombia", color: "var(--l3-tinta)", pts: pts(a => datos.valor("01001", a, ind)) }]; for (const r of REGIONES) if (regiones.has(r)) series.push({ id: "R:" + r, tipo: "reg", nombre: `Región ${r}`, color: COLOR_REGION(r), pts: pts(a => datos.promedioRegion(r, a, ind)) }); for (const cod of sel) { const e = datos.ent.get(cod); if (e) series.push({ id: cod, tipo: "ent", nombre: e.nivel === "M" ? `${e.nombre} (${e.dpto_nombre.slice(0, 4)}.)` : e.nombre, color: COLOR_REGION(e.region), pts: pts(a => datos.valor(cod, a, ind)) }); } seriesActuales = series; const hayEnt = sel.length > 0; const vals = series.flatMap(s => s.pts.map(p => p.v)).filter(v => v != null); const [lo, hi] = d3.extent(vals); const pad = (hi - lo) * 0.08 || 1; y = d3.scaleLinear([lo - pad, hi + pad], [H - m.b, m.t]).nice(); const t = svg.transition().duration(800).ease(d3.easeCubicInOut); const linea = d3.line().defined(p => p.v != null).x(p => x(p.anio)).y(p => y(p.v)).curve(d3.curveMonotoneX); const ancho = s => (s.tipo === "reg" ? 1.6 : 2.4); const opac = s => (s.tipo === "reg" ? (hayEnt ? 0.3 : 0.95) : 1); gY.transition(t).call(d3.axisLeft(y).ticks(6).tickSize(-(W - m.l - m.r)).tickFormat(fmtES.format(",.0f"))) .call(g => g.select(".domain").remove()); // Líneas: ENTER se "dibuja" (stroke-dashoffset), UPDATE se transforma, EXIT se desvanece gLin.selectAll("path") .data(series, s => s.id) .join( enter => enter.append("path").attr("d", s => linea(s.pts)).style("stroke", s => s.color) .attr("stroke-width", ancho).attr("stroke-opacity", opac).attr("class", s => "ln " + s.tipo) .each(function () { const L = this.getTotalLength(); d3.select(this).attr("stroke-dasharray", `${L} ${L}`).attr("stroke-dashoffset", L) .transition(t).attr("stroke-dashoffset", 0) .on("end", function () { d3.select(this).attr("stroke-dasharray", null); }); }), update => update.attr("stroke-dasharray", null).call(u => u.transition(t) .attr("d", s => linea(s.pts)).attr("stroke-opacity", opac).attr("stroke-width", ancho)), exit => exit.call(x0 => x0.transition(t).attr("stroke-opacity", 0).remove()) ); gLin.selectAll("path.nac").raise(); // Puntos del año seleccionado const puntos = series.map(s => ({ s, p: s.pts.find(p => p.anio === anio) })).filter(d => d.p && d.p.v != null); gPto.selectAll("circle") .data(puntos, d => d.s.id) .join( enter => enter.append("circle").attr("r", 0).attr("cx", d => x(d.p.anio)).attr("cy", d => y(d.p.v)), update => update, exit => exit.call(x0 => x0.transition(t).attr("r", 0).remove()) ) .style("fill", d => d.s.color).attr("class", "pto") .transition(t).attr("r", d => (d.s.tipo === "reg" ? (hayEnt ? 0 : 3.5) : 4.5)) .attr("cx", d => x(d.p.anio)).attr("cy", d => y(d.p.v)); // Etiquetas directas al final de cada línea (con separación anti-colisión) const fin = series.map(s => { const p = [...s.pts].reverse().find(p => p.v != null); return p ? { s, y: y(p.v), y0: y(p.v) } : null; }).filter(Boolean); separar(fin, 12, m.t, H - m.b); gEt.selectAll("g") .data(fin, d => d.s.id) .join( enter => enter.append("g").attr("opacity", 0).attr("transform", d => `translate(${W - m.r + 6},${d.y})`) .call(g => { g.append("line").attr("x1", 0).attr("x2", 10); g.append("text").attr("x", 14).attr("dy", "0.35em"); }), update => update, exit => exit.call(x0 => x0.transition(t).attr("opacity", 0).remove()) ) .call(g => g.select("line").style("stroke", d => d.s.color).attr("stroke-width", 2.4)) .call(g => g.select("text").attr("class", d => "et " + d.s.tipo).text(d => d.s.nombre)) .transition(t).attr("opacity", d => (d.s.tipo === "reg" && hayEnt ? 0.55 : 1)) .attr("transform", d => `translate(${W - m.r + 6},${d.y})`); regla.transition(t).attr("transform", `translate(${x(anio)},0)`); reglaTxt.text(anio); } return { node: svg.node(), update }; }4b:T14af,// VISTA 4 · Dispersión cobertura (x) vs. calidad (y) con tamaño = población function crearDispersion(datos, ctx) { const W = 470, H = 360, m = { t: 22, r: 18, b: 42, l: 48 }; const svg = d3.create("svg").attr("viewBox", [0, 0, W, H]).attr("class", "l3-svg"); const gX = svg.append("g").attr("class", "eje grid").attr("transform", `translate(0,${H - m.b})`); const gY = svg.append("g").attr("class", "eje grid").attr("transform", `translate(${m.l},0)`); const tX = svg.append("text").attr("class", "eje-t").attr("x", W - m.r).attr("y", H - 6).attr("text-anchor", "end"); const tY = svg.append("text").attr("class", "eje-t").attr("x", m.l).attr("y", 12); const gRef = svg.append("g").attr("class", "ref"); const refH = gRef.append("line"), refV = gRef.append("line"); const refT = gRef.append("text").attr("dy", "-0.4em").attr("dx", "0.3em"); const gP = svg.append("g"), gEt = svg.append("g"); const rTxt = svg.append("text").attr("class", "lg-n halo").attr("x", W - m.r - 4).attr("y", H - m.b - 6).attr("text-anchor", "end"); function update(est) { const { anio, dpto, regiones, sel, xInd, yInd } = est; const lista = dpto ? datos.muniPorDpto.get(dpto) ?? [] : datos.departamentos; const id = dpto ?? "D"; const enSel = new Set(sel); const pts = lista.filter(e => regiones.has(e.region)) .map(e => ({ e, cod: e.cod, x: datos.valor(e.cod, anio, xInd), y: datos.valor(e.cod, anio, yInd) })) .filter(d => d.x != null && d.y != null); // Ejes fijos 2011–2022 dentro del alcance (para que el movimiento sea real) const domX = dpto ? datos.dominio(xInd, "M", lista, id) : datos.dominio(xInd, "D"); const domY = dpto ? datos.dominio(yInd, "M", lista, id) : datos.dominio(yInd, "D"); const padX = (domX[1] - domX[0]) * 0.05 || 1, padY = (domY[1] - domY[0]) * 0.05 || 1; const x = d3.scaleLinear([domX[0] - padX, domX[1] + padX], [m.l, W - m.r]).nice().clamp(true); const y = d3.scaleLinear([domY[0] - padY, domY[1] + padY], [H - m.b, m.t]).nice().clamp(true); const r = d3.scaleSqrt([0, d3.max(lista, e => e.pob) || 1], [0, dpto ? 13 : 17]); const area = d => Math.PI * Math.max(3, r(d.e.pob)) ** 2; const sim = (d, s = 1) => d3.symbol(FORMA_REGION(d.e.region), area(d) * s)(); const t = svg.transition().duration(800).ease(d3.easeCubicInOut); gX.transition(t).call(d3.axisBottom(x).ticks(6).tickSize(-(H - m.t - m.b)).tickFormat(fmtES.format(",.0f"))).call(g => g.select(".domain").remove()); gY.transition(t).call(d3.axisLeft(y).ticks(6).tickSize(-(W - m.l - m.r)).tickFormat(fmtES.format(",.0f"))).call(g => g.select(".domain").remove()); tX.text(`${IND[xInd].corto} (${IND[xInd].unidad}) →`); tY.text(`↑ ${IND[yInd].corto} (${IND[yInd].unidad})`); // Referencia: Colombia const cx = datos.valor("01001", anio, xInd), cy = datos.valor("01001", anio, yInd); gRef.transition(t).attr("opacity", cx == null || cy == null || dpto ? 0 : 1); if (cx != null && cy != null) { refH.transition(t).attr("x1", m.l).attr("x2", W - m.r).attr("y1", y(cy)).attr("y2", y(cy)); refV.transition(t).attr("x1", x(cx)).attr("x2", x(cx)).attr("y1", m.t).attr("y2", H - m.b); refT.transition(t).attr("x", x(cx)).attr("y", m.t + 10).text("Colombia"); } // Marcas: ENTER crecen desde tamaño 0, UPDATE se desplazan, EXIT se encogen gP.selectAll("path") .data(pts, d => d.cod) .join( enter => enter.append("path").attr("transform", d => `translate(${x(d.x)},${y(d.y)})`) .attr("d", d => sim(d, 0.0001)).attr("fill", d => COLOR_REGION(d.e.region)) .call(e => e.transition(t).attr("d", d => sim(d))), update => update.call(u => u.transition(t).attr("transform", d => `translate(${x(d.x)},${y(d.y)})`).attr("d", d => sim(d))), exit => exit.call(x0 => x0.transition(t).attr("d", d => sim(d, 0.0001)).remove()) ) .attr("class", d => "pt" + (enSel.has(d.cod) ? " sel" : "")) .on("mousemove", (ev, d) => ctx.tooltip.mostrar(ev, htmlEntidad(datos, d.cod, ctx.estado(), xInd) + `

${IND[yInd].corto}${fmtValor(yInd, d.y)}

`)) .on("mouseleave", () => ctx.tooltip.ocultar()) .on("click", (ev, d) => { ctx.tooltip.ocultar(); ctx.alAlternar(d.cod); }); gP.selectAll("path.sel").raise(); gEt.selectAll("text") .data(pts.filter(d => enSel.has(d.cod)), d => d.cod) .join(enter => enter.append("text").attr("class", "et ent").attr("opacity", 0) .attr("x", d => x(d.x) + 8).attr("y", d => y(d.y) - 8), update => update, exit => exit.remove()) .text(d => d.e.nombre) .transition(t).attr("opacity", 1).attr("x", d => x(d.x) + 8).attr("y", d => y(d.y) - 8); // Atributo derivado: correlación de Pearson de los puntos visibles const n = pts.length; if (n > 2) { const mx = d3.mean(pts, d => d.x), my = d3.mean(pts, d => d.y); const sxy = d3.sum(pts, d => (d.x - mx) * (d.y - my)); const sxx = d3.sum(pts, d => (d.x - mx) ** 2), syy = d3.sum(pts, d => (d.y - my) ** 2); const rho = sxy / Math.sqrt(sxx * syy); rTxt.text(`r de Pearson = ${fmtES.format(".2f")(rho)} · n = ${n}`); } else rTxt.text(`n = ${n}`); } return { node: svg.node(), update }; }4c:T1ad3,const ESTILO_TABLERO = ` .l3{--l3-fondo:#fcfcfb;--l3-plano:#f4f3ef;--l3-tinta:#0b0b0b;--l3-tinta2:#52514e;--l3-tenue:#898781;--l3-grid:#e7e6e0;--l3-eje:#c3c2b7;--l3-borde:rgba(11,11,11,.10);--l3-contexto:#ecebe6;--l3-acento:#2a78d6; position:relative;container-type:inline-size;font:13px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--l3-tinta);background:var(--l3-plano);padding:16px;border-radius:12px;max-width:1240px;margin:0 auto;box-sizing:border-box} @media (prefers-color-scheme:dark){:root:where(:not([data-theme="light"])) .l3{--l3-fondo:#1a1a19;--l3-plano:#0f0f0e;--l3-tinta:#f0efec;--l3-tinta2:#c3c2b7;--l3-tenue:#9a988f;--l3-grid:#2c2c2a;--l3-eje:#4a4a46;--l3-borde:rgba(255,255,255,.10);--l3-contexto:#2a2a28}} :root[data-theme="dark"] .l3{--l3-fondo:#1a1a19;--l3-plano:#0f0f0e;--l3-tinta:#f0efec;--l3-tinta2:#c3c2b7;--l3-tenue:#9a988f;--l3-grid:#2c2c2a;--l3-eje:#4a4a46;--l3-borde:rgba(255,255,255,.10);--l3-contexto:#2a2a28} .l3 *{box-sizing:border-box} .l3 h2{font-size:20px;margin:0 0 2px;font-weight:650;letter-spacing:-.01em} .l3 h3{font-size:13px;margin:0;font-weight:600} .l3 .sub{margin:0;color:var(--l3-tinta2);max-width:820px} .l3 .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:12px 0} .l3 .kpi{background:var(--l3-fondo);border:1px solid var(--l3-borde);border-radius:10px;padding:10px 12px} .l3 .kpi .k-l{font-size:11px;color:var(--l3-tinta2);text-transform:uppercase;letter-spacing:.04em} .l3 .kpi .k-v{font-size:22px;font-weight:650;margin-top:2px} .l3 .kpi .k-s{font-size:12px;color:var(--l3-tinta2)} .l3 .ctrl{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;background:var(--l3-fondo);border:1px solid var(--l3-borde);border-radius:10px;padding:10px 12px;position:sticky;top:0;z-index:5} .l3 .ctrl label{display:flex;gap:6px;align-items:center;color:var(--l3-tinta2);font-size:12px} .l3 select,.l3 button{font:inherit;color:var(--l3-tinta);background:var(--l3-fondo);border:1px solid var(--l3-eje);border-radius:7px;padding:4px 8px;cursor:pointer} .l3 button:hover{border-color:var(--l3-tinta2)} .l3 button[aria-pressed="true"]{background:var(--l3-tinta);color:var(--l3-fondo);border-color:var(--l3-tinta)} .l3 .seg{display:inline-flex}.l3 .seg button{border-radius:0}.l3 .seg button:first-child{border-radius:7px 0 0 7px}.l3 .seg button:last-child{border-radius:0 7px 7px 0;margin-left:-1px} .l3 .anio{display:flex;align-items:center;gap:8px} .l3 .anio input{width:170px;accent-color:var(--l3-tinta)} .l3 .anio output{font-weight:650;font-variant-numeric:tabular-nums;min-width:34px} .l3 .chips{display:flex;flex-wrap:wrap;gap:6px} .l3 .chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 10px 3px 8px;font-size:12px} .l3 .chip i{width:10px;height:10px;border-radius:50%;display:inline-block} .l3 .chip[aria-pressed="false"]{opacity:.45} .l3 .chip[aria-pressed="true"]{background:var(--l3-fondo);color:var(--l3-tinta);border-color:var(--l3-tinta2)} .l3 .rejilla{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:12px;margin-top:12px} .l3 .fila2{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:12px;margin-top:12px} @container (max-width:860px){.rejilla,.fila2{grid-template-columns:1fr!important}} .l3 section{background:var(--l3-fondo);border:1px solid var(--l3-borde);border-radius:10px;padding:10px 12px;min-width:0} .l3 .p-head{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px;min-height:28px} .l3 .p-sub{color:var(--l3-tinta2);font-size:12px;margin:0 0 4px} .l3 .l3-svg{width:100%;height:auto;display:block;overflow:visible} .l3 .l3-svg text{fill:var(--l3-tinta2);font-size:11px} .l3 .eje text{fill:var(--l3-tenue);font-size:10.5px;font-variant-numeric:tabular-nums} .l3 .eje line{stroke:var(--l3-eje)} .l3 .eje .domain{stroke:var(--l3-eje)} .l3 .eje.grid .tick line{stroke:var(--l3-grid)} .l3 .eje-t{fill:var(--l3-tinta2)!important;font-weight:600} .l3 .lg-t{fill:var(--l3-tinta)!important;font-weight:600;font-size:11px!important} .l3 .lg-n{fill:var(--l3-tenue)!important;font-size:10.5px!important} .l3 path.dep{stroke:var(--l3-fondo);stroke-width:.7;cursor:pointer} .l3 path.dep.borde{stroke:var(--l3-tinta2);stroke-width:.8} .l3 path.dep.foco{stroke:var(--l3-tinta);stroke-width:1.6} .l3 path.dep.hover,.l3 path.mun.hover{stroke:var(--l3-tinta);stroke-width:1.8} .l3 path.dep.sel,.l3 path.mun.sel{stroke:var(--l3-tinta);stroke-width:2.2} .l3 path.mun{stroke:var(--l3-fondo);stroke-width:.35;cursor:pointer} .l3 .m-inset{fill:none;stroke:var(--l3-eje)} .l3 .m-inset-t{font-size:9.5px!important;fill:var(--l3-tenue)!important} .l3 rect.sel{stroke:var(--l3-tinta);stroke-width:2} .l3 rect{cursor:pointer} .l3 text.nom.sel{font-weight:700;fill:var(--l3-tinta)} .l3 text.val{fill:var(--l3-tinta2);font-variant-numeric:tabular-nums} .l3 text.val,.l3 text.nom,.l3 .halo,.l3 .ref text,.l3 .et{paint-order:stroke;stroke:var(--l3-fondo);stroke-width:3px;stroke-linejoin:round} .l3 .ref line{stroke:var(--l3-tinta);stroke-width:1.2;stroke-dasharray:3 3} .l3 .ref text{fill:var(--l3-tinta)!important;font-weight:600;font-size:10.5px!important} .l3 .regla line{stroke:var(--l3-tenue);stroke-width:1} .l3 .regla text{fill:var(--l3-tinta)!important;font-weight:650} .l3 .cruz{stroke:var(--l3-eje);stroke-width:1;pointer-events:none} .l3 .ln.nac{stroke-dasharray:none} .l3 circle.pto{stroke:var(--l3-fondo);stroke-width:2;pointer-events:none} .l3 .et{fill:var(--l3-tinta2)!important;font-size:11px} .l3 .et.nac,.l3 .et.ent{fill:var(--l3-tinta)!important;font-weight:650} .l3 path.pt{fill-opacity:.82;stroke:var(--l3-fondo);stroke-width:1.2;cursor:pointer} .l3 path.pt.sel{stroke:var(--l3-tinta);stroke-width:2.2;fill-opacity:1} .l3 .leyenda{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:11.5px;color:var(--l3-tinta2);margin-top:4px} .l3 .leyenda span{display:inline-flex;align-items:center;gap:5px} .l3 .leyenda svg{overflow:visible} .l3 .l3-tip{position:absolute;left:0;top:0;pointer-events:none;opacity:0;transition:opacity .12s;background:var(--l3-fondo);color:var(--l3-tinta);border:1px solid var(--l3-borde);box-shadow:0 6px 24px rgba(0,0,0,.14);border-radius:8px;padding:8px 10px;min-width:190px;max-width:280px;z-index:20;font-size:12px} .l3 .l3-tip .t-nom{font-weight:650;font-size:13px} .l3 .l3-tip .t-sub{color:var(--l3-tinta2);font-size:11.5px;margin-bottom:4px} .l3 .l3-tip .t-fila{display:flex;justify-content:space-between;gap:12px;font-variant-numeric:tabular-nums} .l3 .l3-tip .t-fila span{color:var(--l3-tinta2);display:inline-flex;align-items:center;gap:6px} .l3 .l3-tip .t-fila i{width:10px;height:3px;border-radius:2px;display:inline-block} .l3 .l3-tip .t-hint{color:var(--l3-tenue);font-size:11px;margin-top:4px} .l3 footer{color:var(--l3-tenue);font-size:11.5px;margin-top:12px} .l3 .oculto{visibility:hidden} `4d:T24f4,// CONTROLADOR · estado único + render coordinado de las cuatro vistas function crearTablero(datos, { invalidation } = {}) { const raiz = document.createElement("div"); raiz.className = "l3"; const grupos = d3.groups(INDICADORES, d => d.grupo); const COBERTURAS = INDICADORES.filter(d => d.grupo.startsWith("Cobertura")); const CALIDAD = INDICADORES.filter(d => d.grupo === "Calidad" || d.grupo.startsWith("Permanencia")); const opciones = (lista, sel) => lista.map(d => ``).join(""); raiz.innerHTML = `

Educación en Colombia, 2011–2022: calidad, cobertura y permanencia

TerriData (DNP) · Dimensión Educación. Explore la evolución de la calidad (Saber 11) y la cobertura en primaria y secundaria por región, departamento y municipio.

Indicador

${ANIOS[ANIOS.length - 1]}

${REGIONES.map(r => ``).join("")}

De mayor a menor · color = región · línea punteada = referencia. Clic en una barra para compararla.

Promedios regionales ponderados por población (Censo 2018). Pase el cursor para ver valores; clic para fijar el año.

Cobertura vs. calidad

X Y

Tamaño = población 2018 · forma y color = región.

${REGIONES.map(r => `${r}`).join("")}

`; const estado = { ind: "saber_mat", anio: ANIOS[ANIOS.length - 1], nivel: "D", dpto: null, regiones: new Set(REGIONES), sel: [], xInd: "cn_sec", yInd: "saber_mat" }; const $ = s => raiz.querySelector(s); const tooltip = crearTooltip(raiz); const MAX_SEL = 6; const alternar = cod => { const i = estado.sel.indexOf(cod); if (i >= 0) estado.sel.splice(i, 1); else { estado.sel.push(cod); if (estado.sel.length > MAX_SEL) estado.sel.shift(); } }; const ctx = { tooltip, estado: () => estado, alDepartamento: d => { estado.dpto = estado.dpto === d ? null : d; render(); }, alMunicipio: (cod, d) => { if (estado.dpto !== d) estado.dpto = d; alternar(cod); render(); }, alAlternar: cod => { alternar(cod); render(); }, css: (nombre, defecto) => getComputedStyle(raiz).getPropertyValue(nombre).trim() || defecto, alAnio: a => { estado.anio = Math.max(ANIOS[0], Math.min(ANIOS[ANIOS.length - 1], a)); render(); } }; const vistas = [crearMapa(datos, ctx), crearRanking(datos, ctx), crearSerie(datos, ctx), crearDispersion(datos, ctx)]; $(".v-mapa").append(vistas[0].node); $(".v-rank").append(vistas[1].node); $(".v-serie").append(vistas[2].node); $(".v-disp").append(vistas[3].node); function kpis() { const { ind, anio } = estado; const k = IND[ind]; const v = datos.valor("01001", anio, ind), v0 = datos.valor("01001", ANIOS[0], ind); const d = v != null && v0 != null ? v - v0 : null; const mejora = d != null && d * k.pol > 0; const orden = datos.departamentos.map(e => ({ e, v: datos.valor(e.cod, anio, ind) })).filter(x => x.v != null).sort((a, b) => b.v - a.v); const reg = REGIONES.map(r => ({ r, v: datos.promedioRegion(r, anio, ind) })).filter(x => x.v != null).sort((a, b) => b.v - a.v); const alto = orden[0], bajo = orden[orden.length - 1]; $(".kpis").innerHTML = `

Colombia · ${anio}

${fmtValor(ind, v)}

${k.corto}

Cambio ${ANIOS[0]}–${anio}

${d == null ? "s/d" : (d >= 0 ? "+" : "−") + fmtValor(ind, Math.abs(d))}

${d == null || Math.abs(d) < 0.05 ? "sin cambio" : mejora ? "▲ mejora" : "▼ empeora"} (${k.pol > 0 ? "más es mejor" : "menos es mejor"})

Departamentos · ${anio}

${alto ? alto.e.nombre : "—"} ${fmtValor(ind, alto?.v)}

mínimo: ${bajo ? `${bajo.e.nombre} ${fmtValor(ind, bajo.v)}` : "—"}

Regiones · ${anio}

${reg[0]?.r ?? "—"} ${fmtValor(ind, reg[0]?.v)}

mínimo: ${reg.length ? `${reg[reg.length - 1].r} ${fmtValor(ind, reg[reg.length - 1].v)}` : "—"}

`; } function render() { const nomD = estado.dpto ? datos.ent.get(datos.codDpto(estado.dpto))?.nombre : null; $(".t-mapa").textContent = `${IND[estado.ind].corto} · ${estado.anio}${nomD ? ` · ${nomD}` : estado.nivel === "M" ? " · municipios" : ""}`; $(".t-rank").textContent = `Ranking ${nomD ? `de municipios de ${nomD}` : "departamental"} · ${estado.anio}`; $(".t-serie").textContent = `Evolución ${ANIOS[0]}–${ANIOS[ANIOS.length - 1]} · ${IND[estado.ind].corto}`; $(".c-volver").classList.toggle("oculto", !estado.dpto); $(".s-mapa").textContent = estado.dpto ? "Clic en un municipio para compararlo · Esc o «Volver» para salir." : estado.nivel === "M" ? "Clic en un municipio para abrir su departamento y compararlo." : "Clic en un departamento para ver sus municipios."; $(".c-ind").value = estado.ind; $(".c-x").value = estado.xInd; $(".c-y").value = estado.yInd; $(".c-anio").value = estado.anio; $(".anio output").textContent = estado.anio; raiz.querySelectorAll(".c-nivel button").forEach(b => b.setAttribute("aria-pressed", b.dataset.v === estado.nivel)); raiz.querySelectorAll(".c-reg .chip").forEach(b => b.setAttribute("aria-pressed", estado.regiones.has(b.dataset.r))); kpis(); for (const v of vistas) v.update(estado); } // ---- Controles $(".c-ind").addEventListener("change", e => { estado.ind = e.target.value; render(); }); $(".c-anio").addEventListener("input", e => { estado.anio = +e.target.value; render(); }); $(".c-x").addEventListener("change", e => { estado.xInd = e.target.value; render(); }); $(".c-y").addEventListener("change", e => { estado.yInd = e.target.value; render(); }); raiz.querySelectorAll(".c-nivel button").forEach(b => b.addEventListener("click", () => { estado.nivel = b.dataset.v; render(); })); raiz.querySelectorAll(".c-reg .chip").forEach(b => b.addEventListener("click", () => { const r = b.dataset.r; if (estado.regiones.has(r) && estado.regiones.size === 1) REGIONES.forEach(x => estado.regiones.add(x)); else if (estado.regiones.has(r)) estado.regiones.delete(r); else estado.regiones.add(r); render(); })); $(".c-limpiar").addEventListener("click", () => { estado.sel = []; render(); }); $(".c-volver").addEventListener("click", () => { estado.dpto = null; render(); }); raiz.addEventListener("keydown", e => { if (e.key === "Escape" && estado.dpto) { estado.dpto = null; render(); } }); let reloj = null; const play = $(".c-play"); const parar = () => { clearInterval(reloj); reloj = null; play.textContent = "▶ Reproducir"; }; play.addEventListener("click", () => { if (reloj) return parar(); if (estado.anio >= ANIOS[ANIOS.length - 1]) { estado.anio = ANIOS[0]; render(); } play.textContent = "❚❚ Pausa"; reloj = setInterval(() => { if (estado.anio >= ANIOS[ANIOS.length - 1]) return parar(); estado.anio += 1; render(); }, 1500); }); if (invalidation) invalidation.then(parar); render(); raiz.estado = estado; raiz.render = render; // útil para depurar desde la consola return raiz; }4e:[{"id":"01cc0e88f07a1ecf66b72b9db90a0e92e55f034d33dc633c8489c930cd3e20a32980aefafc78be52b67f4d6c7fec39ac3c465d379d9d782237b32f26d28099e5","href":"https://static.observableusercontent.com/files/01cc0e88f07a1ecf66b72b9db90a0e92e55f034d33dc633c8489c930cd3e20a32980aefafc78be52b67f4d6c7fec39ac3c465d379d9d782237b32f26d28099e5","name":"dptos.json","type":"application/json","lastModified":1792014782921,"size":264383},{"id":"a5bba2c1e2234bf035d205a7b2cb8576310f9afd1f209958cb37a7f3e40cd56b8068dced0fa7edaa89ca8ee9ac835716af4013654dc2fd65f57ab6841029f637","href":"https://static.observableusercontent.com/files/a5bba2c1e2234bf035d205a7b2cb8576310f9afd1f209958cb37a7f3e40cd56b8068dced0fa7edaa89ca8ee9ac835716af4013654dc2fd65f57ab6841029f637","name":"edu_l3.csv","type":"text/csv","lastModified":1792014782937,"size":874533},{"id":"2bd2064b85aefa8827ccfee0cc7cc63e0af856ad77b4c25023d4500e67b38b4a64d161ca3012654cff5a1bbea959ced35931488347569ecb88b09e66699e96ae","href":"https://static.observableusercontent.com/files/2bd2064b85aefa8827ccfee0cc7cc63e0af856ad77b4c25023d4500e67b38b4a64d161ca3012654cff5a1bbea959ced35931488347569ecb88b09e66699e96ae","name":"entidades.csv","type":"text/csv","lastModified":1792014782943,"size":50147},{"id":"e52c7aaa156cd02d4d83cd3963d0afe89b46f82b685361bbe63d3da43dec2596cf550407f1cb7d12225c013abd1645a160de5a543da0179b476d5fb9c1dc135d","href":"https://static.observableusercontent.com/files/e52c7aaa156cd02d4d83cd3963d0afe89b46f82b685361bbe63d3da43dec2596cf550407f1cb7d12225c013abd1645a160de5a543da0179b476d5fb9c1dc135d","name":"mpios.json","type":"application/json","lastModified":1792014782913,"size":1758009}] 43:{"id":"c326c4c07dc283f0","slug":"educacion-en-colombia-2011-2022","title":"Educación en Colombia, 2011–2022","thumbnail":"dd63a57546c556cce7ed65e8fff7ab8a3445a740b2c9a7f113e284c083b7da90","access_level":"public","create_time":"$D2026-10-14T19:13:36.639Z","update_time":"$D2026-10-14T21:53:30.106Z","view_time":null,"first_public_time":"$D2026-10-14T21:54:23.476Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"451dab33d788a642","login":"lucas-mejia","name":"Lucas Mejia","avatar_url":"https://avatars-next.observableusercontent.com/fb7b294617a5acaa6d28e44f4287f20edd920579c4eb16afaeb6b797ac12d896","tier":"starter_2024","bio":""},"version":63,"publish_version":63,"role":null,"authored":false,"authors":[{"type":"individual","id":"8c87847422c3e538","login":"lucas-mejia","name":"Lucas Mejia","avatar_url":"https://avatars-next.observableusercontent.com/fb7b294617a5acaa6d28e44f4287f20edd920579c4eb16afaeb6b797ac12d896","tier":null,"bio":""}],"members":[{"type":"team","id":"451dab33d788a642","login":"lucas-mejia","name":"Lucas Mejia","avatar_url":"https://avatars-next.observableusercontent.com/fb7b294617a5acaa6d28e44f4287f20edd920579c4eb16afaeb6b797ac12d896","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":"Educación en Colombia, 2011–2022","cells":[{"id":1,"value":"# Educación en Colombia, 2011–2022\n## ISIS 4822 · Laboratorio 3 — D3 Data Binding\nCalidad (Saber 11), cobertura y permanencia por región, departamento y municipio. Fuente: DNP – TerriData, Dimensión 4.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"crearTablero(datos, { invalidation })","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"const datos = prepararDatos(\n await FileAttachment(\"edu_l3.csv\").csv(),\n await FileAttachment(\"entidades.csv\").csv(),\n await FileAttachment(\"dptos.json\").json(),\n await FileAttachment(\"mpios.json\").json()\n)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"## Apéndice: configuración, escalas y vistas\nLas celdas siguientes definen las codificaciones (WHAT/HOW) y las cuatro vistas. Cada vista expone un método `update(estado)` que hace el *data join*.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$45","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"const IND = Object.fromEntries(INDICADORES.map(d => [d.k, d]))","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"// 12 años: 2011–2022 (\"últimos 12 años\" del enunciado, hasta el último año con Saber 11)\nconst ANIOS = d3.range(2011, 2023)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"const REGIONES = [\"Andina\", \"Caribe\", \"Pacífica\", \"Orinoquía\", \"Amazonía\", \"Insular\"]","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"// Matiz = identidad de región (canal categórico). Paleta validada para\n// daltonismo (ΔE adyacente ≥ 9); en la dispersión se refuerza con la forma.\nconst COLOR_REGION = d3.scaleOrdinal(REGIONES, [\"#2a78d6\", \"#eb6834\", \"#1baf7a\", \"#6250d6\", \"#008300\", \"#e87ba4\"])","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"const FORMA_REGION = d3.scaleOrdinal(REGIONES, [d3.symbolCircle, d3.symbolSquare, d3.symbolTriangle, d3.symbolDiamond, d3.symbolWye, d3.symbolStar])","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"const SIN_DATO = \"#d6d5d0\"","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"const fmtES = d3.formatLocale({ decimal: \",\", thousands: \".\", grouping: [3], currency: [\"$\", \"\"] })","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"function fmtValor(k, v, conUnidad = true) {\n if (v == null || Number.isNaN(v)) return \"s/d\";\n const s = fmtES.format(\",.1f\")(v);\n if (!conUnidad) return s;\n return IND[k].unidad === \"pts\" ? `${s} pts` : `${s} %`;\n}","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"// Luminancia = magnitud (canal ordenado). Un solo matiz claro→oscuro:\n// azul para indicadores donde \"más es mejor\", naranja donde \"más es peor\".\nfunction escalaColor(k, dominio) {\n const azul = [\"#eef4fc\", \"#b7d3f6\", \"#6da7ec\", \"#2a78d6\", \"#1c5cab\", \"#0d366b\"];\n const naranja = [\"#fdf1ea\", \"#f8c9b1\", \"#f19a72\", \"#eb6834\", \"#b8461b\", \"#6e2508\"];\n return d3.scaleSequential(dominio, d3.interpolateRgbBasis(IND[k].pol > 0 ? azul : naranja)).clamp(true);\n}","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"$46","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"function crearTooltip(raiz) {\n const tip = raiz.querySelector(\".l3-tip\");\n return {\n mostrar(evento, html) {\n tip.innerHTML = html;\n tip.style.opacity = 1;\n const caja = raiz.getBoundingClientRect();\n const ancho = tip.offsetWidth, alto = tip.offsetHeight;\n let x = evento.clientX - caja.left + 14, y = evento.clientY - caja.top + 14;\n if (x + ancho > caja.width - 4) x = evento.clientX - caja.left - ancho - 14;\n if (y + alto > caja.height - 4) y = evento.clientY - caja.top - alto - 14;\n tip.style.transform = `translate(${x}px, ${y}px)`;\n },\n ocultar() { tip.style.opacity = 0; }\n };\n}","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"$47","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"// Separa etiquetas verticalmente (evita colisiones al final de las líneas)\nfunction separar(items, minGap, y0, y1) {\n const s = [...items].sort((a, b) => a.y - b.y);\n for (let i = 1; i < s.length; i++) if (s[i].y - s[i - 1].y < minGap) s[i].y = s[i - 1].y + minGap;\n const exceso = s.length ? s[s.length - 1].y - y1 : 0;\n if (exceso > 0) {\n s[s.length - 1].y -= exceso;\n for (let i = s.length - 2; i >= 0; i--) if (s[i + 1].y - s[i].y < minGap) s[i].y = s[i + 1].y - minGap;\n }\n for (const d of s) d.y = Math.max(y0, d.y);\n return s;\n}","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"$48","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"$49","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"$4a","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"$4b","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"$4c","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"$4d","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4e","stdlib":"2"}} 44:"$43:body"