44:null 45:["$","title",null,{"children":"Laboratorio 3 · D3 Data Binding | Shaiel Jimenez | Observable"}] 4b:T705,function prepararDatos(filas) { // Funciona con d3.csv (strings) y con FileAttachment.csv({typed: true}) (números): // los códigos DIVIPOLA se re-rellenan con ceros a la izquierda. const pad = (v, n) => String(v).padStart(n, "0"); const claves = Object.keys(INDICADORES); const registros = filas.map(f => { const r = { cod: pad(f.cod, 5), nombre: f.nombre, cod_dpto: pad(f.cod_dpto, 2), dpto: f.dpto, nivel: f.nivel, anio: +f.anio }; for (const k of claves) r[k] = f[k] === "" || f[k] == null ? null : +f[k]; return r; }); const porCodAnio = new Map(registros.map(r => [r.cod + "|" + r.anio, r])); const entidades = new Map(); for (const r of registros) { if (!entidades.has(r.cod)) entidades.set(r.cod, { cod: r.cod, nombre: r.nombre, cod_dpto: r.cod_dpto, dpto: r.dpto, nivel: r.nivel }); } const lista = [...entidades.values()]; const departamentos = lista.filter(e => e.nivel === "departamento"); const municipiosDe = d3.group(lista.filter(e => e.nivel === "municipio"), e => e.cod_dpto); // Dominio de color fijo por indicador y nivel sobre TODOS los años (P2–P98): // así un mismo color significa lo mismo en 2011 que en 2022. const dominios = new Map(); for (const k of claves) { for (const nivel of ["departamento", "municipio"]) { const v = registros.filter(r => r.nivel === nivel && r[k] != null).map(r => r[k]).sort(d3.ascending); let lo = d3.quantileSorted(v, 0.02), hi = d3.quantileSorted(v, 0.98); if (INDICADORES[k].unidad === "%" && k.startsWith("cob")) hi = Math.min(hi, 100); dominios.set(k + "|" + nivel, [lo, hi]); } } const valor = (cod, ind, anio) => porCodAnio.get(cod + "|" + anio)?.[ind] ?? null; return { registros, entidades, departamentos, municipiosDe, dominios, valor }; } 4c:T2159,function crearMapa(D, geo, on) { const W = 560, H = 640; const uid = "l3-" + Math.random().toString(36).slice(2, 8); const svg = d3.create("svg").attr("viewBox", [0, 0, W, H]).attr("class", "l3-svg l3-mapa") .attr("role", "group").attr("aria-label", "Mapa coroplético de Colombia por departamento o municipio"); const defs = svg.append("defs"); const trama = defs.append("pattern").attr("id", uid + "-h").attr("width", 6).attr("height", 6) .attr("patternUnits", "userSpaceOnUse").attr("patternTransform", "rotate(45)"); trama.append("rect").attr("width", 6).attr("height", 6).attr("fill", "#f0efe9"); trama.append("line").attr("y2", 6).attr("stroke", "#a8a69e").attr("stroke-width", 1.2); const SIN_DATO = `url(#${uid}-h)`; const CONTEXTO = "#e6e5df"; const dptoDe = f => f.properties.DPTO_CCDGO; const featDpto = new Map(geo.deptos.features.map(f => [dptoDe(f), f])); const featMun = new Map(geo.mpios.features.map(f => [f.properties.MPIO_CDPMP, f])); // San Andrés va en un recuadro propio: incluirlo en el encuadre encogería el continente. const continental = { type: "FeatureCollection", features: geo.deptos.features.filter(f => dptoDe(f) !== "88") }; const pMain = d3.geoPath(d3.geoMercator().fitExtent([[14, 10], [W - 10, H - 10]], continental)); const pIsla = d3.geoPath(d3.geoMercator().fitExtent([[24, 34], [80, 100]], featDpto.get("88"))); const gen = f => (f.properties.DPTO_CCDGO === "88" ? pIsla : pMain); const ruta = f => gen(f)(f); svg.append("rect").attr("width", W).attr("height", H).attr("fill", "transparent") .on("click", () => estado?.foco && on.drill(null)); const gZoom = svg.append("g").attr("transform", "translate(0,0) scale(1)"); gZoom.append("rect").attr("class", "l3-inset").attr("x", 16).attr("y", 14).attr("width", 72).attr("height", 94).attr("rx", 4); gZoom.append("text").attr("class", "l3-inset-label").attr("x", 22).attr("y", 27).text("San Andrés"); const gDep = gZoom.append("g"); const gMun = gZoom.append("g"); const gSel = gZoom.append("g").attr("pointer-events", "none"); const hover = gZoom.append("path").attr("class", "l3-hover").attr("pointer-events", "none"); // Leyenda: rampa continua con marca de Colombia y muestra de "sin dato". const LW = 200; const grad = defs.append("linearGradient").attr("id", uid + "-g"); const gLey = svg.append("g").attr("class", "l3-leyenda").attr("transform", `translate(18, ${H - 50})`); gLey.append("rect").attr("class", "l3-ley-fondo").attr("x", -8).attr("y", -40).attr("width", LW + 90).attr("height", 76).attr("rx", 6); const leyTitulo = gLey.append("text").attr("class", "l3-ley-titulo").attr("y", -24); gLey.append("rect").attr("width", LW).attr("height", 10).attr("rx", 2).attr("fill", `url(#${uid}-g)`); const leyEje = gLey.append("g").attr("transform", "translate(0,10)"); const leyCol = gLey.append("g").attr("class", "l3-ley-col"); leyCol.append("path").attr("d", "M0,-2 L-5,-9 L5,-9 Z"); leyCol.append("text").attr("y", -12).attr("text-anchor", "middle").text("COL"); gLey.append("rect").attr("x", LW + 18).attr("width", 10).attr("height", 10).attr("fill", SIN_DATO).attr("stroke", "#c3c2b7"); gLey.append("text").attr("class", "l3-ley-sd").attr("x", LW + 33).attr("y", 9).text("sin dato"); const entrar = (ev, f, cod) => { hover.attr("d", ruta(f)); on.hover(cod, ev, "mapa"); }; const salir = () => { hover.attr("d", null); on.hover(null); }; const eventos = (sel, codDe, alClic) => sel .attr("role", "button").attr("aria-label", f => D.entidades.get(codDe(f))?.nombre ?? codDe(f)) .on("mouseenter focus", (ev, f) => entrar(ev, f, codDe(f))) .on("mousemove", ev => on.move(ev)) .on("mouseleave blur", salir) .on("click", (ev, f) => { ev.stopPropagation(); alClic(f); }) .on("keydown", (ev, f) => { if (ev.key === "Enter" || ev.key === " ") { ev.preventDefault(); alClic(f); } }); let estado = null; function update(e) { const prev = estado; estado = e; const cDep = escalaColor(D, e.indicador, "departamento"); const cMun = escalaColor(D, e.indicador, "municipio"); const llenar = (c, cod) => { const v = D.valor(cod, e.indicador, e.anio); return v == null ? SIN_DATO : c(v); }; const fillDep = f => (e.foco ? CONTEXTO : llenar(cDep, dptoDe(f) + "000")); // en drill-down son solo contexto const fillMun = f => llenar(cMun, f.properties.MPIO_CDPMP); // Departamentos: entran una vez; luego solo se actualizan (color y atenuación al hacer drill-down). gDep.selectAll("path").data(geo.deptos.features, dptoDe).join( enter => enter.append("path").attr("class", "l3-area").attr("d", ruta).attr("fill", fillDep).attr("opacity", 0) .call(eventos, f => dptoDe(f) + "000", f => on.drill(dptoDe(f))) .call(en => en.transition().duration(600).delay((f, i) => i * 12).attr("opacity", 1)), update => update.call(u => u.transition().duration(750) .attrTween("fill", tweenFill(fillDep)) .attr("opacity", f => (e.foco && dptoDe(f) !== e.foco ? 0.55 : 1))) ).attr("tabindex", e.foco ? -1 : 0); // Municipios: solo existen los del departamento en foco → enter al entrar, exit al salir. const mFeat = e.foco ? geo.mpios.features.filter(f => f.properties.DPTO_CCDGO === e.foco) : []; gMun.selectAll("path").data(mFeat, f => f.properties.MPIO_CDPMP).join( enter => enter.append("path").attr("class", "l3-area l3-mun").attr("d", ruta).attr("fill", fillMun).attr("opacity", 0).attr("tabindex", 0) .call(eventos, f => f.properties.MPIO_CDPMP, f => on.toggle(f.properties.MPIO_CDPMP)) .call(en => en.transition().delay((f, i) => 350 + Math.min(i * 5, 450)).duration(450).attr("opacity", 1)), update => update.call(u => u.transition().duration(750).attr("opacity", 1).attrTween("fill", tweenFill(fillMun))), exit => exit.call(x => x.transition().duration(350).attr("opacity", 0).remove()) ); // Zoom al departamento en foco (o vuelta a Colombia). if (!prev || prev.foco !== e.foco) { let t = d3.zoomIdentity; if (e.foco) { const f = featDpto.get(e.foco); const [[x0, y0], [x1, y1]] = gen(f).bounds(f); const k = Math.min(9, 0.88 / Math.max((x1 - x0) / W, (y1 - y0) / (H - 70))); t = d3.zoomIdentity.translate(W / 2, (H - 70) / 2).scale(k).translate(-(x0 + x1) / 2, -(y0 + y1) / 2); } gZoom.transition().duration(prev ? 900 : 0).ease(d3.easeCubicInOut).attr("transform", t.toString()); hover.attr("d", null); } // Contornos de la selección (color = slot de la entidad). const visibles = e.seleccion.map(s => { const dep = s.cod.endsWith("000"); const f = dep ? featDpto.get(s.cod.slice(0, 2)) : featMun.get(s.cod); const ver = f && (dep || e.foco === f.properties.DPTO_CCDGO); return ver ? { ...s, f } : null; }).filter(Boolean); gSel.selectAll("path").data(visibles, s => s.cod).join( enter => enter.append("path").attr("class", "l3-sel").attr("d", s => ruta(s.f)).attr("stroke", s => SERIES[s.slot]) .attr("stroke-width", 0).call(en => en.transition().duration(400).attr("stroke-width", 3)), update => update.attr("stroke", s => SERIES[s.slot]), exit => exit.call(x => x.transition().duration(300).attr("stroke-width", 0).remove()) ); // Leyenda const c = e.foco ? cMun : cDep; const meta = INDICADORES[e.indicador]; grad.selectAll("stop").data(d3.range(0, 1.0001, 0.1)).join("stop") .attr("offset", t => t).attr("stop-color", t => c(c.domain()[0] + t * (c.domain()[1] - c.domain()[0]))); const lx = d3.scaleLinear(c.domain(), [0, LW]); leyTitulo.text(`${meta.nombre} (${meta.unidad}) · ${e.foco ? "municipios" : "departamentos"}`); leyEje.transition().duration(600).call(d3.axisBottom(lx).ticks(4).tickSize(4).tickFormat(fmt.num)) .call(g => g.select(".domain").remove()); const vCol = D.valor("01001", e.indicador, e.anio); leyCol.transition().duration(600).attr("opacity", vCol == null ? 0 : 1) .attr("transform", `translate(${lx(Math.max(lx.domain()[0], Math.min(lx.domain()[1], vCol ?? 0)))},0)`); } function resaltar(cod) { gDep.selectAll("path").classed("l3-dim", false); if (!cod) return; const f = cod.endsWith("000") ? featDpto.get(cod.slice(0, 2)) : featMun.get(cod); if (f && (!f.properties.MPIO_CDPMP || estado?.foco === f.properties.DPTO_CCDGO)) hover.attr("d", ruta(f)); else hover.attr("d", null); } return { node: svg.node(), update, resaltar }; }4d:T18ac,function crearBarras(D, on) { const W = 440, H = 640, M = { t: 34, r: 58, b: 36, l: 152 }; const svg = d3.create("svg").attr("viewBox", [0, 0, W, H]).attr("class", "l3-svg l3-barras") .attr("role", "group").attr("aria-label", "Ranking de entidades territoriales para el año seleccionado"); const gEje = svg.append("g").attr("class", "l3-eje").attr("transform", `translate(0,${M.t})`); const gFilas = svg.append("g"); const gHueco = svg.append("g"); const gRef = svg.append("g").attr("pointer-events", "none"); const x = d3.scaleLinear().range([M.l, W - M.r]); const recortar = s => (s.length > 22 ? s.slice(0, 21) + "…" : s); let estado = null; function update(e) { estado = e; const meta = INDICADORES[e.indicador]; const ents = e.foco ? (D.municipiosDe.get(e.foco) ?? []) : D.departamentos; const items = ents.map(en => ({ ...en, v: D.valor(en.cod, e.indicador, e.anio) })); items.sort((a, b) => (a.v == null) - (b.v == null) || (meta.sentido > 0 ? b.v - a.v : a.v - b.v)); items.forEach((d, i) => { d.rank = i + 1; }); // Más de 34 filas (drill-down en dptos grandes): 13 mejores + 13 peores y un hueco rotulado. let filas, hueco = []; if (items.length > 34) { filas = [...items.slice(0, 13).map((d, i) => ({ ...d, pos: i })), ...items.slice(-13).map((d, i) => ({ ...d, pos: 14 + i }))]; hueco = [{ pos: 13, n: items.length - 26 }]; } else { filas = items.map((d, i) => ({ ...d, pos: i })); } const nSlots = Math.max(18, items.length > 34 ? 27 : items.length); const y = d3.scaleBand(d3.range(nSlots), [M.t + 6, H - M.b]).padding(0.2); const bh = Math.min(y.bandwidth(), 22); const xmax = d3.max(ents, en => d3.max(ANIOS, a => D.valor(en.cod, e.indicador, a))) ?? 1; x.domain([0, xmax]).nice(); const t = svg.transition().duration(750).ease(d3.easeCubicInOut); gEje.transition(t).call(d3.axisTop(x).ticks(4).tickSize(-(H - M.t - M.b)).tickFormat(fmt.num)) .call(g => g.select(".domain").remove()); const sel = new Map(e.seleccion.map(s => [s.cod, s.slot])); const colorDe = d => (sel.has(d.cod) ? SERIES[sel.get(d.cod)] : "#b9b7ad"); gFilas.selectAll("g.l3-fila").data(filas, d => d.cod).join( // ENTER: la fila aparece en su posición y la barra crece desde 0. enter => enter.append("g").attr("class", "l3-fila").attr("opacity", 0).attr("tabindex", 0).attr("role", "button") .attr("transform", d => `translate(0,${y(d.pos)})`) .call(g => { g.append("rect").attr("class", "l3-hit").attr("x", 0).attr("width", W).attr("y", -2); g.append("rect").attr("class", "l3-barra").attr("x", x(0)).attr("width", 0).attr("rx", 2); g.append("text").attr("class", "l3-nombre").attr("x", M.l - 8).attr("text-anchor", "end"); g.append("text").attr("class", "l3-valor").attr("x", x(0) + 6); }) .on("mouseenter focus", (ev, d) => on.hover(d.cod, ev)) .on("mousemove", ev => on.move(ev)) .on("mouseleave blur", () => on.hover(null)) .on("click", (ev, d) => on.toggle(d.cod)) .on("keydown", (ev, d) => { if (ev.key === "Enter" || ev.key === " ") { ev.preventDefault(); on.toggle(d.cod); } }) .call(g => g.transition(t).attr("opacity", 1)), // UPDATE: la fila se desliza a su nuevo puesto del ranking. update => update.call(g => g.transition(t).attr("opacity", 1).attr("transform", d => `translate(0,${y(d.pos)})`)), // EXIT: la barra se encoge a 0 y la fila se desvanece. exit => exit.call(g => g.transition().duration(350).attr("opacity", 0).remove()) .call(g => g.select(".l3-barra").transition().duration(350).attr("width", 0)) ).each(function (d) { const g = d3.select(this); g.select(".l3-hit").attr("height", y.step()); g.select(".l3-barra").attr("height", bh).attr("y", (y.bandwidth() - bh) / 2).attr("fill", colorDe(d)) .transition(t).attr("x", x(0)).attr("width", d.v == null ? 0 : Math.max(0, x(d.v) - x(0))); g.attr("aria-pressed", sel.has(d.cod)).attr("aria-label", `${d.rank}. ${d.nombre}: ${d.v == null ? "sin dato" : fmt.num(d.v) + " " + meta.unidad}`); g.select(".l3-nombre").attr("y", y.bandwidth() / 2).attr("dy", "0.35em") .classed("is-sel", sel.has(d.cod)).text(`${d.rank}. ${recortar(d.nombre)}`); g.select(".l3-valor").attr("y", y.bandwidth() / 2).attr("dy", "0.35em") .transition(t).attr("x", (d.v == null ? x(0) : x(d.v)) + 6) .textTween(function () { const de = this.__v ?? d.v ?? 0, a = d.v; this.__v = a; if (a == null) return () => "s/d"; const i = d3.interpolateNumber(de, a); return t => fmt.num(i(t)); }); }); gHueco.selectAll("text").data(hueco).join("text").attr("class", "l3-hueco") .attr("x", M.l - 8).attr("text-anchor", "end").attr("y", d => y(d.pos) + y.bandwidth() / 2).attr("dy", "0.35em") .text(d => `⋯ ${d.n} municipios más`); // Reglas de referencia: Colombia y, en drill-down, el departamento en foco. const refs = [{ id: "col", etiqueta: "Colombia", v: D.valor("01001", e.indicador, e.anio) }]; if (e.foco) refs.push({ id: "dep", etiqueta: D.entidades.get(e.foco + "000")?.nombre ?? "Depto.", v: D.valor(e.foco + "000", e.indicador, e.anio) }); const refsOk = refs.filter(r => r.v != null); gRef.selectAll("g").data(refsOk, r => r.id).join( enter => enter.append("g").attr("class", r => "l3-ref l3-ref-" + r.id).attr("opacity", 0) .attr("transform", r => `translate(${x(r.v)},0)`) .call(g => { g.append("line").attr("y1", M.t + 2).attr("y2", H - M.b + 4); g.append("text").attr("y", H - M.b + 16).attr("text-anchor", "middle"); }) .call(g => g.transition(t).attr("opacity", 1)), update => update.call(g => g.transition(t).attr("opacity", 1).attr("transform", r => `translate(${x(r.v)},0)`)), exit => exit.call(g => g.transition().duration(300).attr("opacity", 0).remove()) ).select("text").text((r, i) => `${r.etiqueta} ${fmt.num(r.v)}`).attr("dy", (r, i) => i * 12); } function resaltar(cod) { gFilas.selectAll("g.l3-fila").classed("l3-dim", d => cod != null && d.cod !== cod); } return { node: svg.node(), update, resaltar }; }4e:T1a94,function crearLineas(D, on) { const W = 1000, H = 330, M = { t: 22, r: 170, b: 30, l: 50 }; const svg = d3.create("svg").attr("viewBox", [0, 0, W, H]).attr("class", "l3-svg l3-lineas") .attr("role", "img").attr("aria-label", "Evolución anual 2011–2022 del indicador"); const x = d3.scaleLinear([2011, 2022], [M.l, W - M.r]); const y = d3.scaleLinear().range([H - M.b, M.t]); svg.append("g").attr("class", "l3-eje").attr("transform", `translate(0,${H - M.b})`) .call(d3.axisBottom(x).ticks(12).tickFormat(d3.format("d")).tickSizeOuter(0)); const gY = svg.append("g").attr("class", "l3-eje").attr("transform", `translate(${M.l},0)`); const banda = svg.append("path").attr("class", "l3-banda"); const gNota = svg.append("g").attr("class", "l3-nota"); const regla = svg.append("g").attr("class", "l3-regla"); regla.append("line").attr("y1", M.t - 6).attr("y2", H - M.b); const gSeries = svg.append("g").attr("fill", "none"); const gPuntos = svg.append("g"); const gEtq = svg.append("g"); const cruz = svg.append("line").attr("class", "l3-cruz").attr("y1", M.t).attr("y2", H - M.b).attr("opacity", 0); const linea = d3.line().defined(d => d.v != null).x(d => x(d.a)).y(d => y(d.v)).curve(d3.curveMonotoneX); const area = d3.area().defined(d => d.lo != null).x(d => x(d.a)).y0(d => y(d.lo)).y1(d => y(d.hi)).curve(d3.curveMonotoneX); const estilo = s => (s.tipo === "pais" ? "#0b0b0b" : s.tipo === "foco" ? "#6b6a65" : SERIES[s.slot]); let estado = null, series = []; svg.append("rect").attr("class", "l3-overlay").attr("x", M.l).attr("y", M.t).attr("width", W - M.l - M.r).attr("height", H - M.t - M.b) .on("mousemove", ev => { const a = Math.round(x.invert(d3.pointer(ev)[0])); cruz.attr("x1", x(a)).attr("x2", x(a)).attr("opacity", 1); on.serie(a, series, ev); }) .on("mouseleave", () => { cruz.attr("opacity", 0); on.hover(null); }); function update(e) { estado = e; const ents = e.foco ? (D.municipiosDe.get(e.foco) ?? []) : D.departamentos; const rango = ANIOS.map(a => { const v = ents.map(en => D.valor(en.cod, e.indicador, a)).filter(v => v != null).sort(d3.ascending); return v.length >= 3 ? { a, lo: d3.quantileSorted(v, 0.1), hi: d3.quantileSorted(v, 0.9) } : { a, lo: null, hi: null }; }); const vistos = new Set(); series = [ { cod: "01001", tipo: "pais" }, ...e.seleccion.map(s => ({ cod: s.cod, tipo: "sel", slot: s.slot })), ...(e.foco ? [{ cod: e.foco + "000", tipo: "foco" }] : []) ].filter(s => !vistos.has(s.cod) && vistos.add(s.cod)) .map(s => ({ ...s, nombre: D.entidades.get(s.cod)?.nombre ?? s.cod, valores: ANIOS.map(a => ({ a, v: D.valor(s.cod, e.indicador, a) })) })); const todos = [...rango.flatMap(r => [r.lo, r.hi]), ...series.flatMap(s => s.valores.map(d => d.v))].filter(v => v != null); const [lo, hi] = d3.extent(todos); const pad = (hi - lo) * 0.08 || 1; y.domain([Math.max(0, lo - pad), hi + pad]).nice(); const t = svg.transition().duration(750).ease(d3.easeCubicInOut); gY.transition(t).call(d3.axisLeft(y).ticks(5).tickSize(-(W - M.l - M.r)).tickFormat(fmt.num)) .call(g => g.select(".domain").remove()); banda.datum(rango).transition(t).attr("d", area); // Nota del cambio de escala ICFES (solo Saber 11). gNota.selectAll("g").data(e.indicador.startsWith("saber") ? [2014] : []).join( enter => enter.append("g").attr("opacity", 0).call(g => { g.append("line").attr("x1", d => x(d)).attr("x2", d => x(d)).attr("y1", M.t).attr("y2", H - M.b); g.append("text").attr("x", d => x(d) + 4).attr("y", M.t + 8).text("nueva escala ICFES"); }).call(g => g.transition(t).attr("opacity", 1)), update => update, exit => exit.call(g => g.transition().duration(300).attr("opacity", 0).remove()) ); // Líneas: ENTER se dibujan de izquierda a derecha, UPDATE reescalan, EXIT se desvanecen. gSeries.selectAll("path").data(series, s => s.cod).join( enter => enter.append("path").attr("class", s => "l3-serie l3-" + s.tipo).attr("stroke", estilo) .attr("d", s => linea(s.valores)) .each(function () { const len = this.getTotalLength(); d3.select(this).attr("stroke-dasharray", `${len} ${len}`).attr("stroke-dashoffset", len) .transition().duration(900).ease(d3.easeCubicOut).attr("stroke-dashoffset", 0) .on("end", function () { d3.select(this).attr("stroke-dasharray", null); }); }), update => update.attr("stroke", estilo).attr("stroke-dasharray", null) .call(u => u.transition(t).attr("d", s => linea(s.valores))), exit => exit.call(x => x.transition().duration(350).attr("opacity", 0).remove()) ); // Punto del año seleccionado sobre cada serie. const enAnio = series.map(s => ({ ...s, v: s.valores.find(d => d.a === e.anio)?.v })).filter(s => s.v != null); gPuntos.selectAll("circle").data(enAnio, s => s.cod).join( enter => enter.append("circle").attr("r", 0).attr("cx", s => x(e.anio)).attr("cy", s => y(s.v)) .call(c => c.transition(t).delay(300).attr("r", 4.5)), update => update.call(c => c.transition(t).attr("r", 4.5).attr("cx", x(e.anio)).attr("cy", s => y(s.v))), exit => exit.call(c => c.transition().duration(250).attr("r", 0).remove()) ).attr("fill", estilo).attr("stroke", "#fcfcfb").attr("stroke-width", 2); regla.transition(t).attr("transform", `translate(${x(e.anio)},0)`); regla.selectAll("text").data([e.anio]).join("text").attr("y", M.t - 9).attr("x", 4).attr("text-anchor", "start").text(d => d); // Etiquetas directas al final de cada línea, separadas para que no choquen. const etq = series.map(s => { const ult = [...s.valores].reverse().find(d => d.v != null); return ult ? { ...s, ult, ty: y(ult.v) } : null; }).filter(Boolean).sort((a, b) => a.ty - b.ty); for (let i = 1; i < etq.length; i++) etq[i].ty = Math.max(etq[i].ty, etq[i - 1].ty + 14); gEtq.selectAll("text").data(etq, s => s.cod).join( enter => enter.append("text").attr("opacity", 0).attr("x", W - M.r + 8).attr("y", s => s.ty) .call(g => g.transition(t).delay(400).attr("opacity", 1)), update => update.call(g => g.transition(t).attr("opacity", 1).attr("y", s => s.ty)), exit => exit.call(g => g.transition().duration(250).attr("opacity", 0).remove()) ).attr("class", s => "l3-etq l3-etq-" + s.tipo).attr("dy", "0.35em") .text(s => `${s.nombre.length > 18 ? s.nombre.slice(0, 17) + "…" : s.nombre} ${fmt.num(s.ult.v)}`); } function resaltar(cod) { gSeries.selectAll("path").classed("l3-dim", s => cod != null && series.some(z => z.cod === cod) && s.cod !== cod); } return { node: svg.node(), update, resaltar }; }4f:Tfdb,ESTILOS_L3 = ` .l3-tablero{ position:relative; font-family:'IBM Plex Sans',system-ui,sans-serif; color:#0b0b0b; } .l3-fila1{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:16px; } @media (max-width:820px){ .l3-fila1{ grid-template-columns:1fr; } } .l3-panel{ background:#fcfcfb; border:1px solid rgba(11,11,11,.10); border-radius:8px; padding:12px 14px 6px; min-width:0; } .l3-fila2{ margin-top:16px; } .l3-panel h4{ margin:0; font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:1.02rem; color:#0b0b0b; } .l3-panel .l3-sub{ margin:2px 0 4px; font-size:.74rem; color:#52514e; } .l3-svg{ display:block; width:100%; height:auto; font-family:'IBM Plex Mono',monospace; overflow:hidden; } .l3-ley-fondo{ fill:#fcfcfb; opacity:.9; } .l3-area{ stroke:#fcfcfb; stroke-width:.6; vector-effect:non-scaling-stroke; cursor:pointer; } .l3-mun{ stroke-width:.4; } .l3-hover{ fill:none; stroke:#0b0b0b; stroke-width:1.6; vector-effect:non-scaling-stroke; } .l3-sel{ fill:none; vector-effect:non-scaling-stroke; stroke-linejoin:round; } .l3-inset{ fill:none; stroke:#c3c2b7; stroke-dasharray:3 3; vector-effect:non-scaling-stroke; } .l3-inset-label{ font-size:9px; fill:#898781; } .l3-ley-titulo{ font-family:'IBM Plex Sans',sans-serif; font-size:11px; font-weight:600; fill:#52514e; } .l3-leyenda .tick text, .l3-ley-sd{ font-size:9.5px; fill:#52514e; } .l3-leyenda .tick line{ stroke:#898781; } .l3-ley-col path{ fill:#0b0b0b; } .l3-ley-col text{ font-size:9px; font-weight:600; fill:#0b0b0b; } .l3-eje text{ font-size:10px; fill:#52514e; } .l3-eje line{ stroke:#e1e0d9; } .l3-eje .domain{ stroke:#c3c2b7; } .l3-fila{ cursor:pointer; transition:opacity .15s; } .l3-hit{ fill:transparent; } .l3-fila:hover .l3-hit, .l3-fila:focus-visible .l3-hit{ fill:#f0efe9; } .l3-fila:focus, .l3-area:focus{ outline:none; } .l3-fila:focus-visible .l3-hit{ stroke:#0b0b0b; stroke-width:1.5; } .l3-nombre{ font-family:'IBM Plex Sans',sans-serif; font-size:11px; fill:#52514e; } .l3-nombre.is-sel{ font-weight:700; fill:#0b0b0b; } .l3-valor{ font-size:10px; fill:#52514e; font-variant-numeric:tabular-nums; paint-order:stroke; stroke:#fcfcfb; stroke-width:3px; } .l3-hueco{ font-size:10.5px; fill:#898781; font-style:italic; font-family:'IBM Plex Sans',sans-serif; } .l3-ref line{ stroke:#0b0b0b; stroke-dasharray:4 3; stroke-width:1; } .l3-ref-dep line{ stroke:#6b6a65; stroke-dasharray:1 3; stroke-width:1.5; } .l3-ref text{ font-size:9.5px; font-weight:600; fill:#0b0b0b; paint-order:stroke; stroke:#fcfcfb; stroke-width:3px; } .l3-dim{ opacity:.28; } .l3-banda{ fill:#e1e0d9; opacity:.75; } .l3-serie{ stroke-width:2; stroke-linejoin:round; stroke-linecap:round; transition:opacity .15s; } .l3-pais{ stroke-width:2.5; } .l3-foco{ stroke-dasharray:6 4; } .l3-regla line{ stroke:#898781; stroke-width:1; } .l3-regla text{ font-size:10px; font-weight:600; fill:#0b0b0b; } .l3-nota line{ stroke:#c94d78; stroke-dasharray:2 3; } .l3-nota text{ font-size:9.5px; fill:#c94d78; } .l3-cruz{ stroke:#0b0b0b; stroke-width:1; stroke-dasharray:2 2; pointer-events:none; } .l3-overlay{ fill:transparent; } .l3-etq{ font-family:'IBM Plex Sans',sans-serif; font-size:11px; fill:#52514e; } .l3-etq-pais{ font-weight:700; fill:#0b0b0b; } .l3-ley-lineas{ display:flex; flex-wrap:wrap; gap:6px 16px; font-size:.74rem; color:#52514e; margin:2px 0 4px; } .l3-ley-lineas span{ display:inline-flex; align-items:center; gap:6px; } .l3-ley-lineas i{ display:inline-block; width:18px; height:0; border-top:2.5px solid; } .l3-ley-lineas i.banda{ height:10px; border:none; background:#e1e0d9; } .l3-tip{ position:absolute; pointer-events:none; z-index:5; background:#0b0b0b; color:#f7f6f2; border-radius:6px; padding:8px 10px; font-size:.76rem; line-height:1.45; max-width:260px; box-shadow:0 8px 24px -10px rgba(0,0,0,.5); opacity:0; transition:opacity .12s; } .l3-tip b{ font-weight:600; } .l3-tip .m{ color:#c3c2b7; font-family:'IBM Plex Mono',monospace; font-size:.7rem; } .l3-tip .sw{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; } `50:T15e8,function crearTablero(D, geo, on = {}) { const raiz = d3.create("div").attr("class", "l3-tablero"); raiz.append("style").text(ESTILOS_L3); const fila1 = raiz.append("div").attr("class", "l3-fila1"); const pMapa = fila1.append("div").attr("class", "l3-panel"); const pBarras = fila1.append("div").attr("class", "l3-panel"); const pLineas = raiz.append("div").attr("class", "l3-panel l3-fila2"); const cabecera = p => ({ h: p.append("h4"), s: p.append("p").attr("class", "l3-sub") }); const cMapa = cabecera(pMapa), cBarras = cabecera(pBarras), cLineas = cabecera(pLineas); const leyLineas = pLineas.append("div").attr("class", "l3-ley-lineas"); const tip = raiz.append("div").attr("class", "l3-tip"); let estado = null; const mover = ev => { let px, py; if (ev.clientX == null) { // foco con teclado: no hay puntero, se ancla al elemento const caja = raiz.node().getBoundingClientRect(), r = ev.target.getBoundingClientRect(); px = Math.min(r.right, caja.left + caja.width / 2) - caja.left; py = r.top + r.height / 2 - caja.top; } else { [px, py] = d3.pointer(ev, raiz.node()); } const ancho = raiz.node().clientWidth; tip.style("left", Math.max(0, Math.min(px + 14, ancho - 270)) + "px").style("top", py + 14 + "px"); }; const fichaDe = (cod, origen) => { const en = D.entidades.get(cod); if (!en || !estado) return null; const meta = INDICADORES[estado.indicador]; const v = D.valor(cod, estado.indicador, estado.anio), v0 = D.valor(cod, estado.indicador, 2011); const pares = en.nivel === "municipio" ? (D.municipiosDe.get(en.cod_dpto) ?? []) : D.departamentos; const orden = pares.map(p => D.valor(p.cod, estado.indicador, estado.anio)).filter(z => z != null); const rank = v == null ? null : 1 + orden.filter(z => (meta.sentido > 0 ? z > v : z < v)).length; return `${en.nombre}${en.nivel === "municipio" ? ` ${en.dpto}` : ""}
` + `${meta.nombre} ${estado.anio}: ${v == null ? "sin dato" : fmt.num(v) + " " + meta.unidad}
` + (rank ? `puesto ${rank} de ${orden.length} ${en.nivel === "municipio" ? "municipios del depto." : "departamentos"}
` : "") + (v != null && v0 != null ? `cambio desde 2011: ${fmt.signo(v - v0)}
` : "") + `clic o Enter: ${origen === "mapa" && en.nivel === "departamento" ? "ver sus municipios" : "comparar en la serie"}`; }; const emitir = { hover(cod, ev, origen) { mapa.resaltar(cod); barras.resaltar(cod); lineas.resaltar(cod); const html = cod && fichaDe(cod, origen); if (!html) { tip.style("opacity", 0); return; } tip.html(html).style("opacity", 1); if (ev) mover(ev); }, move: mover, serie(a, series, ev) { const meta = INDICADORES[estado.indicador]; tip.html(`${a} · ${meta.nombre}
` + series.map(s => { const v = s.valores.find(d => d.a === a)?.v; const c = s.tipo === "pais" ? "#f7f6f2" : s.tipo === "foco" ? "#a8a69e" : SERIES[s.slot]; return `${s.nombre}: ${v == null ? "s/d" : fmt.num(v)}`; }).join("
")).style("opacity", 1); mover(ev); }, toggle: cod => on.toggle?.(cod), drill: dpto => on.drill?.(dpto) }; // Esc dentro del tablero = volver a Colombia. raiz.on("keydown", ev => { if (ev.key === "Escape" && estado?.foco) emitir.drill(null); }); const mapa = crearMapa(D, geo, emitir); const barras = crearBarras(D, emitir); const lineas = crearLineas(D, emitir); pMapa.append(() => mapa.node); pBarras.append(() => barras.node); pLineas.append(() => lineas.node); function update(e) { estado = e; const meta = INDICADORES[e.indicador]; const nomFoco = e.foco ? D.entidades.get(e.foco + "000")?.nombre : null; const peor = meta.sentido < 0; cMapa.h.text(`${meta.nombre} · ${e.anio}`); cMapa.s.text(e.foco ? `Municipios de ${nomFoco}. Clic en un municipio para compararlo; clic en el fondo (o Esc) para volver a Colombia.` : `Departamentos. Tono más oscuro = ${peor ? "más alto (peor)" : "más alto (mejor)"}. Clic para ver sus municipios.`); cBarras.h.text(`Ranking ${e.anio}${nomFoco ? " · " + nomFoco : ""}`); cBarras.s.text(`De mejor a peor (${peor ? "menor tasa primero" : "mayor valor primero"}). Clic en una fila para compararla.`); cLineas.h.text(`Evolución 2011–2022 · ${meta.nombre} (${meta.unidad})`); cLineas.s.text("Pasa el cursor para ver los valores de cada año. La línea vertical marca el año seleccionado."); // Si el depto. en foco también está seleccionado, su línea lleva el color de la // selección (ver crearLineas: la serie "sel" gana), y la leyenda dice lo mismo. const focoSel = e.foco && e.seleccion.some(s => s.cod === e.foco + "000"); const items = [ { t: "Colombia", c: "#0b0b0b" }, ...(nomFoco && !focoSel ? [{ t: nomFoco + " (foco)", c: "#6b6a65", dash: true }] : []), ...e.seleccion.map(s => ({ t: D.entidades.get(s.cod)?.nombre ?? s.cod, c: SERIES[s.slot] })), { t: `80 % central de ${e.foco ? "municipios" : "departamentos"} (P10–P90)`, banda: true } ]; leyLineas.selectAll("span").data(items).join("span") .html(d => d.banda ? `${d.t}` : `${d.t}`); mapa.update(e); barras.update(e); lineas.update(e); } return Object.assign(raiz.node(), { update }); }51:[{"id":"a32c4eaac389e97d53476ae77eaa090b3e54ca50a1c8422932b0f1f1f3c77c34bd73f9c1bf5cbcc66ee7085f682d7b5faa1a3676b20452dbc333770c3bfa9164","href":"https://static.observableusercontent.com/files/a32c4eaac389e97d53476ae77eaa090b3e54ca50a1c8422932b0f1f1f3c77c34bd73f9c1bf5cbcc66ee7085f682d7b5faa1a3676b20452dbc333770c3bfa9164","name":"mpios.geojson","type":"application/geo+json","lastModified":1792470544000,"size":403574},{"id":"9633ac86b69dec1149ea43d9cad868599f4f3e512462cc9b6307107cd69bc720f8af723b5b3b2bac44a5ee67962f2fa8d51673f0f54a33ddf948ef1dc51f7f7a","href":"https://static.observableusercontent.com/files/9633ac86b69dec1149ea43d9cad868599f4f3e512462cc9b6307107cd69bc720f8af723b5b3b2bac44a5ee67962f2fa8d51673f0f54a33ddf948ef1dc51f7f7a","name":"educacion_2011_2022.csv","type":"text/csv","lastModified":1792470544000,"size":1213020},{"id":"3314cb7bf57e22747f054a2be7cf52ac430f5d38c41cd90057711f6122e8d3cd0b7f6ba06abbbb8469ad399c4d013fd326cf18c3c77b46a7d6a4b0d22c6cb3d4","href":"https://static.observableusercontent.com/files/3314cb7bf57e22747f054a2be7cf52ac430f5d38c41cd90057711f6122e8d3cd0b7f6ba06abbbb8469ad399c4d013fd326cf18c3c77b46a7d6a4b0d22c6cb3d4","name":"deptos.geojson","type":"application/geo+json","lastModified":1792470544000,"size":103502}] 49:{"id":"e538c3adfe242db5","slug":"laboratorio-3-d3-data-binding","title":"Laboratorio 3 · D3 Data Binding","thumbnail":"97aa5fb6b14e9223cb055620ccc973bec6495961e51132b1c9a212a1799f79ef","access_level":"public","create_time":"$D2026-10-20T05:07:01.654Z","update_time":"$D2026-10-20T06:37:22.511Z","view_time":null,"first_public_time":"$D2026-10-20T05:49:30.519Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"802dede5ee151331","login":"shaiel-jimenez","name":"Shaiel Jimenez","avatar_url":"https://avatars-next.observableusercontent.com/dfc81e0014993f512c7c9050b35059428147feb864ead40d3d59487f1d149969","tier":"starter_2024","bio":"","following":false},"version":281,"publish_version":281,"role":null,"authored":false,"authors":[{"type":"individual","id":"f6e4ce0a27dfc122","login":"5haiel","name":"Shaiel Jimenez","avatar_url":"https://avatars-next.observableusercontent.com/dfc81e0014993f512c7c9050b35059428147feb864ead40d3d59487f1d149969","tier":null,"bio":"","following":false}],"members":[{"type":"team","id":"802dede5ee151331","login":"shaiel-jimenez","name":"Shaiel Jimenez","avatar_url":"https://avatars-next.observableusercontent.com/dfc81e0014993f512c7c9050b35059428147feb864ead40d3d59487f1d149969","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":"Laboratorio 3 · D3 Data Binding","cells":[{"id":3,"value":"# Laboratorio 3 · D3 Data Binding\n## Educación en Colombia 2011–2022 (TerriData · DNP)\nDaniel Diab · Shaiel Jimenez — ISIS 4822 Visual Analytics 2026-2\n\nTres vistas coordinadas construidas con \\`selection.join(enter, update, exit)\\`: **mapa coroplético** con drill-down a municipios, **ranking** del año y **serie de tiempo** 2011–2022. Clic en un departamento para ver sus municipios; clic en una fila o municipio para compararlo (máx. 3).\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"deptos = FileAttachment(\"deptos.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"filas = FileAttachment(\"educacion_2011_2022.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"mpios = FileAttachment(\"mpios.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"## Preprocesamiento\nHecho en pandas (\\`preprocess.py\\`): 8 de 34 indicadores; ventana 2011–2022; coma decimal → float; duplicados por corte (Mes) → el más reciente; ceros imposibles en Saber 11 y coberturas → nulo; nivel territorial desde el código DIVIPOLA (Bogotá 11001 duplicado como departamento 11); pivote largo → ancho (13.624 filas). Geometrías simplificadas con mapshaper y anillos reorientados para \\`d3.geoPath\\`.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"## Código de las vistas\nLas celdas siguientes son idénticas a \\`labs/lab-03/dashboard.js\\` del repositorio.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"INDICADORES = ({\n saber_mat: { nombre: \"Saber 11 · Matemáticas\", grupo: \"Calidad\", unidad: \"pts\", sentido: 1 },\n saber_lec: { nombre: \"Saber 11 · Lectura crítica\", grupo: \"Calidad\", unidad: \"pts\", sentido: 1 },\n cob_primaria: { nombre: \"Cobertura neta · primaria\", grupo: \"Cobertura\", unidad: \"%\", sentido: 1 },\n cob_secundaria: { nombre: \"Cobertura neta · secundaria\", grupo: \"Cobertura\", unidad: \"%\", sentido: 1 },\n cob_media: { nombre: \"Cobertura neta · media\", grupo: \"Cobertura\", unidad: \"%\", sentido: 1 },\n cob_total: { nombre: \"Cobertura neta · total\", grupo: \"Cobertura\", unidad: \"%\", sentido: 1 },\n desercion: { nombre: \"Deserción intra-anual (oficial)\", grupo: \"Permanencia\", unidad: \"%\", sentido: -1 },\n repitencia: { nombre: \"Repitencia (oficial)\", grupo: \"Permanencia\", unidad: \"%\", sentido: -1 }\n})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"ANIOS = d3.range(2011, 2023)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"SERIES = [\"#2a78d6\", \"#eb6834\", \"#1baf7a\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"fmt = (() => {\n const es = d3.formatLocale({ decimal: \",\", thousands: \".\", grouping: [3], currency: [\"$\", \"\"] });\n return { num: es.format(\",.1f\"), signo: es.format(\"+,.1f\"), ent: es.format(\",d\") };\n})()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"function escalaColor(D, ind, nivel) {\n // Secuencial de un solo tono: azul si \"más es mejor\", naranja si \"más es peor\".\n const rampa = INDICADORES[ind].sentido > 0\n ? [\"#e3eefc\", \"#9ec5f4\", \"#5598e7\", \"#256abf\", \"#0d366b\"]\n : [\"#fde9de\", \"#f7b796\", \"#eb6834\", \"#b4461a\", \"#6e2709\"];\n return d3.scaleSequential(D.dominios.get(ind + \"|\" + nivel), d3.interpolateRgbBasis(rampa)).clamp(true);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"function alternarSeleccion(sel, cod, soloAgregar = false) {\n if (sel.some(s => s.cod === cod)) return soloAgregar ? sel : sel.filter(s => s.cod !== cod);\n const base = sel.length >= SERIES.length ? sel.slice(1) : sel; // la más antigua sale\n const usados = new Set(base.map(s => s.slot));\n return [...base, { cod, slot: d3.range(SERIES.length).find(i => !usados.has(i)) }];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"tweenFill = valorDe => function (d) {\n const a = this.getAttribute(\"fill\"), b = valorDe(d);\n if (!a || a.startsWith(\"url\") || b.startsWith(\"url\")) return () => b;\n return d3.interpolateRgb(a, b);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"D = prepararDatos(filas)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"mutable seleccion = [{ cod: \"15000\", slot: 0 }, { cod: \"27000\", slot: 1 }]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"mutable foco = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"$50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"{\n tablero.update({ indicador, anio, foco, seleccion });\n return md`Estado: **${INDICADORES[indicador].nombre}** · ${anio} · ${foco ? \"municipios de \" + D.entidades.get(foco + \"000\").nombre : \"departamentos\"} · comparando ${seleccion.length ? seleccion.map(s => D.entidades.get(s.cod).nombre).join(\", \") : \"—\"}`;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"viewof anio = Scrubber(ANIOS, { initial: ANIOS.length - 1, delay: 1100, autoplay: false, loop: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"viewof indicador = Inputs.select(\n new Map(Object.entries(INDICADORES).map(([k, v]) => [`${v.grupo} — ${v.nombre}`, k])),\n { label: \"Indicador\", value: \"saber_mat\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"Inputs.button([\n [\"← Volver a Colombia\", () => { mutable foco = null; }],\n [\"Limpiar selección\", () => { mutable seleccion = []; }]\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"tablero = crearTablero(D, { deptos, mpios }, {\n drill: dpto => {\n mutable foco = dpto;\n if (dpto) mutable seleccion = alternarSeleccion(mutable seleccion, dpto + \"000\", true);\n },\n toggle: cod => { mutable seleccion = alternarSeleccion(mutable seleccion, cod); }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W51","stdlib":"2"}} 4a:"$49:body"