44:["$","title",null,{"children":"Laboratorio 3 | Julián Contreras | Observable"}] 4c:T5d5,function prepararDatos(filas) { const claves = Object.keys(IND); const rows = filas.map(d => { const o = {nivel: d.nivel, region: d.region, cod_dpto: d.cod_dpto, departamento: d.departamento, cod_entidad: d.cod_entidad, entidad: d.entidad, anio: +d.anio}; for (const k of claves) o[k] = d[k] === "" || d[k] == null ? null : +d[k]; return o; }); const nac = rows.filter(d => d.nivel === "Nacional"); const dep = rows.filter(d => d.nivel === "Departamento"); const mun = rows.filter(d => d.nivel === "Municipio"); const p = (arr, k) => { const v = arr.map(d => d[k]).filter(v => v != null).sort(d3.ascending); return [d3.quantileSorted(v, 0.02), d3.quantileSorted(v, 0.98)]; }; const dominio = {}; for (const k of claves) { dominio[k] = {dep: d3.extent([...dep, ...nac], d => d[k]), mun: p(mun, k)}; } const infoMun = new Map(mun.map(d => [d.cod_entidad, {cod: d.cod_entidad, nombre: d.entidad, cod_dpto: d.cod_dpto, departamento: d.departamento}])); return { anios: d3.range(2011, 2023), nac: d3.index(nac, d => d.anio), dep: d3.index(dep, d => d.anio, d => d.cod_dpto), mun: d3.index(mun, d => d.anio, d => d.cod_entidad), infoDep: new Map(dep.map(d => [d.cod_dpto, {cod: d.cod_dpto, nombre: d.departamento, region: d.region}])), infoMun, munPorDep: d3.group([...infoMun.keys()], c => infoMun.get(c).cod_dpto), regiones: [...new Set(dep.map(d => d.region))].sort(d3.ascending), dominio }; }4d:T25b5,function crearMapa(D, topo, {onSeleccion = () => {}, eventos = d3.dispatch("hover")} = {}) { const W = 520, H = 600; const dptosGeo = topojson.feature(topo, topo.objects.dptos).features; const mpiosGeo = topojson.feature(topo, topo.objects.mpios).features; const cod = f => f.properties.DPTO_CCDGO; const continente = {type: "FeatureCollection", features: dptosGeo.filter(f => cod(f) !== "88")}; const proj = d3.geoMercator().fitExtent([[10, 10], [W - 10, H - 10]], continente); const path = d3.geoPath(proj); const sanAndres = dptosGeo.find(f => cod(f) === "88"); const pathIn = d3.geoPath(d3.geoMercator().fitExtent([[16, 36], [76, 116]], sanAndres)); const uid = "sd" + Math.random().toString(36).slice(2, 8); const raiz = d3.create("div").attr("class", "viz viz-mapa"); const cab = raiz.append("div").attr("class", "cabecera"); const textos = cab.append("div"); const titulo = textos.append("div").attr("class", "titulo"); const migas = textos.append("div").attr("class", "sub"); const volver = cab.append("button").attr("class", "volver").attr("type", "button") .text("← Volver a Colombia").on("click", () => onSeleccion({depSel: null, munSel: null})); const svg = raiz.append("svg").attr("viewBox", [0, 0, W, H]).attr("role", "img") .attr("aria-label", "Mapa coroplético de Colombia por departamento y municipio"); const defs = svg.append("defs"); const pat = defs.append("pattern").attr("id", uid).attr("width", 6).attr("height", 6) .attr("patternUnits", "userSpaceOnUse").attr("patternTransform", "rotate(45)"); pat.append("rect").attr("width", 6).attr("height", 6).attr("class", "sd-fondo"); pat.append("line").attr("y2", 6).attr("class", "sd-linea"); const SIN_DATO = `url(#${uid})`; const g = svg.append("g"); const gD = g.append("g"); const gM = g.append("g"); const gIn = svg.append("g").attr("class", "inset"); gIn.append("rect").attr("class", "marco").attr("x", 8).attr("y", 28).attr("width", 76).attr("height", 96).attr("rx", 4); gIn.append("text").attr("class", "etq").attr("x", 8).attr("y", 20).text("San Andrés y Providencia"); const pIn = gIn.append("path").datum(sanAndres).attr("class", "dpto").attr("d", pathIn); const gLey = svg.append("g").attr("transform", `translate(16,${H - 84})`); const tip = tooltipEn(raiz); // Leyenda: rampa continua + eje + "sin dato" const LW = 200; const grad = defs.append("linearGradient").attr("id", uid + "g"); const leyFondo = gLey.append("rect").attr("class", "placa").attr("x", -8).attr("y", -36).attr("width", 220).attr("height", 90).attr("rx", 6).attr("opacity", 0); const leyTitulo = gLey.append("text").attr("class", "etq fuerte").attr("y", -22); const leyNota = gLey.append("text").attr("class", "etq").attr("y", -8); gLey.append("rect").attr("width", LW).attr("height", 10).attr("rx", 2).attr("fill", `url(#${uid}g)`); const leyEje = gLey.append("g").attr("class", "eje").attr("transform", "translate(0,10)"); const leySd = gLey.append("g").attr("transform", "translate(0,36)"); leySd.append("rect").attr("width", 14).attr("height", 10).attr("rx", 2).attr("fill", SIN_DATO); leySd.append("text").attr("class", "etq").attr("x", 18).attr("y", 9).text("Sin dato"); const xLey = d3.scaleLinear().range([0, LW]); let actual = null; const valorDep = c => D.dep.get(actual.anio)?.get(c)?.[actual.indTerr] ?? null; const valorMun = c => D.mun.get(actual.anio)?.get(c)?.[actual.indTerr] ?? null; function zoomA(features) { const [[x0, y0], [x1, y1]] = path.bounds({type: "FeatureCollection", features}); const k = Math.min(16, 0.88 / Math.max((x1 - x0) / W, (y1 - y0) / H)); return `translate(${W / 2 - k * (x0 + x1) / 2},${H / 2 - k * (y0 + y1) / 2}) scale(${k})`; } function tipDep(event, c) { const filas = Array.from(D.dep.get(actual.anio)?.values() ?? []).filter(d => d[actual.indTerr] != null) .sort((a, b) => d3.descending(a[actual.indTerr], b[actual.indTerr])); const i = filas.findIndex(d => d.cod_dpto === c); const info = D.infoDep.get(c); tip.mostrar(event, `${info?.nombre ?? c}
${info?.region ?? ""}
${IND[actual.indTerr].nombre} ${actual.anio}: ${fmtV(valorDep(c), actual.indTerr)}${i >= 0 ? `
Puesto ${i + 1} de ${filas.length}` : ""}`); } function update(e0) { const e = actual = estadoEfectivo(e0, D); const k = e.indTerr, nivelMun = e.depSel != null; const pal = paleta(raiz.node()); const dom = D.dominio[k][nivelMun ? "mun" : "dep"]; const color = d3.scaleSequential(d3.interpolateRgbBasis(pal.seq)).domain(dom).clamp(true); const fillDep = f => { const v = valorDep(cod(f)); return v == null ? SIN_DATO : color(v); }; const fillMun = f => { const v = valorMun(f.properties.MPIO_CDPMP); return v == null ? SIN_DATO : color(v); }; const t = svg.transition().duration(750).ease(d3.easeCubicInOut); // Departamentos: enter (solo la primera vez) + update de color y opacidad gD.selectAll("path.dpto").data(dptosGeo, cod).join( enter => enter.append("path").attr("class", "dpto").attr("d", path).attr("fill", fillDep) .on("pointerenter", (ev, f) => { eventos.call("hover", null, {tipo: "dep", cod: cod(f)}); tipDep(ev, cod(f)); }) .on("pointermove", (ev, f) => tipDep(ev, cod(f))) .on("pointerleave", () => { eventos.call("hover", null, null); tip.ocultar(); }) .on("click", (ev, f) => onSeleccion({depSel: cod(f), munSel: null})), update => update, exit => exit.remove() ).classed("seleccionado", f => cod(f) === e.depSel) .transition(t) .attr("fill", fillDep) .attr("opacity", f => nivelMun ? (cod(f) === e.depSel ? 1 : 0.25) : (e.enRegion(cod(f)) ? 1 : 0.18)); pIn.on("click", () => onSeleccion({depSel: "88", munSel: null})) .on("pointerenter", ev => { eventos.call("hover", null, {tipo: "dep", cod: "88"}); tipDep(ev, "88"); }) .on("pointerleave", () => { eventos.call("hover", null, null); tip.ocultar(); }) .transition(t).attr("fill", fillDep(sanAndres)) .attr("opacity", e.enRegion("88") ? 1 : 0.18); gIn.attr("pointer-events", !nivelMun && (e.region === "Todas" || e.enRegion("88")) ? null : "none") .transition(t).attr("opacity", !nivelMun && (e.region === "Todas" || e.enRegion("88")) ? 1 : 0); // Municipios del departamento seleccionado: enter / update / exit const feats = nivelMun ? mpiosGeo.filter(f => cod(f) === e.depSel) : []; gM.selectAll("path.mpio").data(feats, f => f.properties.MPIO_CDPMP).join( enter => enter.append("path").attr("class", "mpio").attr("d", path) .attr("fill", fillMun).attr("opacity", 0) .on("pointerenter", (ev, f) => eventos.call("hover", null, {tipo: "mun", cod: f.properties.MPIO_CDPMP})) .on("pointermove", (ev, f) => { const c = f.properties.MPIO_CDPMP; tip.mostrar(ev, `${D.infoMun.get(c)?.nombre ?? f.properties.MPIO_CNMBR}
${D.infoDep.get(cod(f))?.nombre}
${IND[actual.indTerr].nombre} ${actual.anio}: ${fmtV(valorMun(c), actual.indTerr)}`); }) .on("pointerleave", () => { eventos.call("hover", null, null); tip.ocultar(); }) .on("click", (ev, f) => { const c = f.properties.MPIO_CDPMP; onSeleccion({munSel: actual.munSel === c ? null : c}); }) .call(s => s.transition(t).delay(400).duration(500).attr("opacity", 1)), update => update.call(s => s.transition(t).attr("fill", fillMun).attr("opacity", 1)), exit => exit.call(s => s.transition(t).duration(350).attr("opacity", 0).remove()) ).classed("seleccionado", f => f.properties.MPIO_CDPMP === e.munSel); gM.selectAll("path.seleccionado").raise(); // Zoom: departamento > región > país const objetivo = nivelMun ? dptosGeo.filter(f => cod(f) === e.depSel) : e.region !== "Todas" ? dptosGeo.filter(f => e.enRegion(cod(f)) && cod(f) !== "88") : null; g.transition(t).attr("transform", objetivo && objetivo.length ? zoomA(objetivo) : "translate(0,0) scale(1)"); // Leyenda: la rampa y el eje se actualizan con el dominio del nivel grad.selectAll("stop").data(pal.seq).join("stop") .attr("offset", (d, i) => i / (pal.seq.length - 1)).attr("stop-color", d => d); xLey.domain(dom); leyEje.transition(t).call(d3.axisBottom(xLey).ticks(4).tickSize(4).tickFormat(d => fmt(d).replace(/,0$/, ""))); leyTitulo.text(`${IND[k].nombre} (${IND[k].unidad})`); leyNota.text(nivelMun ? "Municipios · percentiles 2–98, 2011–2022" : "Departamentos · mín–máx 2011–2022"); leyFondo.transition(t).attr("opacity", objetivo && objetivo.length ? 0.92 : 0); // Textos titulo.text(`${IND[k].nombre} · ${e.anio}`); const nMun = nivelMun ? feats.length : 0; migas.text(nivelMun ? `Colombia › ${D.infoDep.get(e.depSel)?.nombre} · ${nMun} municipio${nMun === 1 ? "" : "s"}. Clic en un municipio para compararlo.` : e.region !== "Todas" ? `Colombia › Región ${e.region}. Clic en un departamento para ver sus municipios.` : "Colombia · 33 departamentos. Clic en un departamento para ver sus municipios."); volver.attr("hidden", nivelMun ? null : ""); } function resaltar(h) { gD.selectAll("path.dpto").classed("hover", f => h?.tipo === "dep" && cod(f) === h.cod); pIn.classed("hover", h?.tipo === "dep" && h.cod === "88"); gM.selectAll("path.mpio").classed("hover", f => h?.tipo === "mun" && f.properties.MPIO_CDPMP === h.cod); gD.selectAll("path.hover").raise(); gM.selectAll("path.hover").raise(); } eventos.on("hover.mapa", resaltar); return {node: raiz.node(), update}; }4e:T1451,function crearBarras(D, {onSeleccion = () => {}, eventos = d3.dispatch("hover")} = {}) { const W = 560, FILA = 17, BH = 11, M = {top: 30, right: 64, bottom: 26, left: 150}; const H = M.top + 33 * FILA + M.bottom; const raiz = d3.create("div").attr("class", "viz viz-barras"); const titulo = raiz.append("div").attr("class", "titulo"); const sub = raiz.append("div").attr("class", "sub"); const svg = raiz.append("svg").attr("viewBox", [0, 0, W, H]).attr("role", "img") .attr("aria-label", "Ranking de departamentos para el indicador y año seleccionados"); const x = d3.scaleLinear().range([M.left, W - M.right]); const gGrid = svg.append("g").attr("class", "grid").attr("transform", `translate(0,${M.top - 8})`); const gEje = svg.append("g").attr("class", "eje").attr("transform", `translate(0,${M.top - 8})`); const gBarras = svg.append("g"); const gRef = svg.append("g").attr("class", "ref"); const refLinea = gRef.append("line").attr("y1", M.top - 8).attr("y2", H - M.bottom + 4); const refTexto = gRef.append("text").attr("y", H - 6).attr("text-anchor", "middle"); const tip = tooltipEn(raiz); let actual = null; function update(e0) { const e = actual = estadoEfectivo(e0, D); const k = e.indTerr; const filas = Array.from(D.dep.get(e.anio)?.values() ?? []) .filter(d => d[k] != null && e.enRegion(d.cod_dpto)) .sort((a, b) => d3.descending(a[k], b[k]) || d3.ascending(a.departamento, b.departamento)); const nacional = D.nac.get(e.anio)?.[k] ?? null; x.domain([0, D.dominio[k].dep[1]]).nice(); const t = svg.transition().duration(750).ease(d3.easeCubicInOut); const y = i => M.top + i * FILA; gEje.transition(t).call(d3.axisTop(x).ticks(5).tickSizeOuter(0).tickFormat(d => fmt(d).replace(/,0$/, ""))); gGrid.transition(t).call(d3.axisTop(x).ticks(5).tickSize(-(H - M.top - M.bottom + 8)).tickFormat("")); gBarras.selectAll("g.barra").data(filas, d => d.cod_dpto).join( enter => enter.append("g").attr("class", "barra") .attr("transform", (d, i) => `translate(0,${y(i)})`).attr("opacity", 0) .call(g => { g.append("text").attr("class", "etq").attr("x", M.left - 8).attr("y", BH / 2).attr("dy", "0.35em") .attr("text-anchor", "end").text(d => d.departamento); g.append("path").attr("class", "marca").attr("d", barPath(x(0), 0, BH)); g.append("text").attr("class", "val").attr("x", x(0) + 6).attr("y", BH / 2).attr("dy", "0.35em"); g.append("rect").attr("class", "hitbox").attr("x", 0).attr("y", (BH - FILA) / 2).attr("width", W).attr("height", FILA) .on("pointerenter", (ev, d) => eventos.call("hover", null, {tipo: "dep", cod: d.cod_dpto})) .on("pointermove", (ev, d) => { const fila = D.dep.get(actual.anio)?.get(d.cod_dpto); const pos = gBarras.selectAll("g.barra").data().findIndex(r => r.cod_dpto === d.cod_dpto); tip.mostrar(ev, `${d.departamento}
${D.infoDep.get(d.cod_dpto)?.region}
${IND[actual.indTerr].nombre} ${actual.anio}: ${fmtV(fila?.[actual.indTerr], actual.indTerr)}
Puesto ${pos + 1} de ${gBarras.selectAll("g.barra").size()}`); }) .on("pointerleave", () => { eventos.call("hover", null, null); tip.ocultar(); }) .on("click", (ev, d) => onSeleccion({depSel: actual.depSel === d.cod_dpto ? null : d.cod_dpto, munSel: null})); }) .call(g => g.transition(t).attr("opacity", 1)), update => update, exit => exit.call(g => { g.select("path.marca").transition(t).attr("d", barPath(x(0), 0, BH)); g.transition(t).attr("opacity", 0).remove(); }) ).call(g => { // update (incluye las barras que acaban de entrar): reordenar, crecer y rotular g.transition(t).delay((d, i) => i * 12).attr("transform", (d, i) => `translate(0,${y(i)})`); g.select("path.marca").transition(t).delay((d, i) => i * 12) .attr("d", d => barPath(x(0), x(d[k]) - x(0), BH)) .style("opacity", d => e.depSel == null || d.cod_dpto === e.depSel ? 1 : 0.3); g.select("text.val").transition(t).delay((d, i) => i * 12) .attr("x", d => x(d[k]) + 6) .tween("text", function(d) { const i = d3.interpolateNumber(this.__v ?? d[k], d[k]); this.__v = d[k]; return u => { this.textContent = fmt(i(u)); }; }); g.select("text.etq").classed("fuerte", d => d.cod_dpto === e.depSel); }); gRef.attr("display", nacional == null ? "none" : null); if (nacional != null) { refLinea.transition(t).attr("x1", x(nacional)).attr("x2", x(nacional)); refTexto.transition(t).attr("x", x(nacional)).text(`Colombia ${fmt(nacional)}`); } titulo.text(`Ranking de departamentos · ${e.anio}`); sub.text(`${IND[k].nombre} (${IND[k].unidad}), de mayor a menor${e.region !== "Todas" ? ` · Región ${e.region}` : ""}. La línea vertical es el valor nacional.`); } function resaltar(h) { gBarras.selectAll("g.barra").classed("hover", d => h?.tipo === "dep" && d.cod_dpto === h.cod); } eventos.on("hover.barras", resaltar); return {node: raiz.node(), update}; }4f:T2788,function crearLineas(D, {onSeleccion = () => {}, eventos = d3.dispatch("hover")} = {}) { const W = 1080, H = 340, M = {top: 24, right: 170, bottom: 30, left: 48}; const raiz = d3.create("div").attr("class", "viz viz-lineas"); const titulo = raiz.append("div").attr("class", "titulo"); const sub = raiz.append("div").attr("class", "sub"); const ley = raiz.append("div").attr("class", "leyenda"); const svg = raiz.append("svg").attr("viewBox", [0, 0, W, H]).attr("role", "img") .attr("aria-label", "Evolución 2011-2022 del indicador seleccionado"); const uid = "cl" + Math.random().toString(36).slice(2, 8); svg.append("clipPath").attr("id", uid).append("rect") .attr("x", M.left).attr("y", M.top - 4).attr("width", W - M.left - M.right + 8).attr("height", H - M.top - M.bottom + 8); const x = d3.scaleLinear().domain([2011, 2022]).range([M.left, W - M.right]); const y = d3.scaleLinear().range([H - M.bottom, M.top]); svg.append("g").attr("class", "eje").attr("transform", `translate(0,${H - M.bottom})`) .call(d3.axisBottom(x).ticks(12).tickFormat(d3.format("d")).tickSizeOuter(0)); const gY = svg.append("g").attr("class", "eje grid-y").attr("transform", `translate(${M.left},0)`); const gAnot = svg.append("g").attr("class", "anot"); const regla = svg.append("g").attr("class", "regla"); regla.append("line").attr("y1", M.top - 6).attr("y2", H - M.bottom); const reglaTxt = regla.append("text").attr("y", M.top - 10).attr("text-anchor", "middle"); const gCtx = svg.append("g").attr("clip-path", `url(#${uid})`); const gHit = svg.append("g"); const gDest = svg.append("g").attr("clip-path", `url(#${uid})`); const gPts = svg.append("g"); const gEtq = svg.append("g"); const cruz = svg.append("line").attr("class", "cruz").attr("y1", M.top).attr("y2", H - M.bottom).attr("opacity", 0); const tip = tooltipEn(raiz); const linea = d3.line().defined(p => p.v != null).x(p => x(p.anio)).y(p => y(p.v)); let actual = null, destacadas = []; const puntos = (idx, c, k) => D.anios.map(a => ({anio: a, v: (c == null ? idx.get(a) : idx.get(a)?.get(c))?.[k] ?? null})); const ultimo = s => [...s.pts].reverse().find(p => p.v != null); // Capa de cruce (crosshair) para leer las series destacadas en cualquier año svg.append("rect").attr("class", "capa").attr("x", M.left).attr("y", M.top) .attr("width", W - M.left - M.right).attr("height", H - M.top - M.bottom).lower() .on("pointermove", ev => { const a = Math.round(x.invert(d3.pointer(ev)[0])); cruz.attr("x1", x(a)).attr("x2", x(a)).attr("opacity", 1); tip.mostrar(ev, `${a}
` + destacadas.map(s => `${s.nombre}: ${fmtV(s.pts.find(p => p.anio === a)?.v, actual.indEvol)}`).join("
")); }) .on("pointerleave", () => { cruz.attr("opacity", 0); tip.ocultar(); }); function update(e0) { const e = actual = estadoEfectivo(e0, D); const k = e.indEvol, nivelMun = e.depSel != null; const t = svg.transition().duration(750).ease(d3.easeCubicInOut); // Series de contexto: departamentos de la región, o municipios del departamento seleccionado const ctx = nivelMun ? (D.munPorDep.get(e.depSel) ?? []).map(c => ({id: "m" + c, cod: c, tipo: "mun", nombre: D.infoMun.get(c).nombre, pts: puntos(D.mun, c, k)})) : [...D.infoDep.keys()].filter(e.enRegion).map(c => ({id: "d" + c, cod: c, tipo: "dep", nombre: D.infoDep.get(c).nombre, pts: puntos(D.dep, c, k)})); // Series destacadas: Colombia, departamento y municipio seleccionados destacadas = [{id: "nac", clase: "l-nacional", nombre: "Colombia", pts: puntos(D.nac, null, k)}]; if (e.depSel) destacadas.push({id: "d" + e.depSel, clase: "l-dpto", nombre: D.infoDep.get(e.depSel).nombre, pts: puntos(D.dep, e.depSel, k)}); if (e.munSel) destacadas.push({id: "m" + e.munSel, clase: "l-mpio", nombre: D.infoMun.get(e.munSel).nombre, pts: puntos(D.mun, e.munSel, k)}); // Dominio Y estable por nivel (percentiles 2-98 en municipios) + las series destacadas const ext = d3.extent(destacadas.flatMap(s => s.pts.map(p => p.v))); y.domain(d3.extent([...D.dominio[k][nivelMun ? "mun" : "dep"], ...ext])).nice(); gY.transition(t).call(d3.axisLeft(y).ticks(6).tickSize(-(W - M.left - M.right)).tickFormat(d => fmt(d).replace(/,0$/, ""))) .call(g => g.select(".domain").remove()); // Contexto: enter (aparece), update (morph al cambiar indicador), exit (se desvanece) gCtx.selectAll("path").data(ctx, d => d.id).join( enter => enter.append("path").attr("class", "l-contexto").attr("d", d => linea(d.pts)).attr("opacity", 0) .call(s => s.transition(t).attr("opacity", 1)), update => update.call(s => s.transition(t).attr("d", d => linea(d.pts)).attr("opacity", 1)), exit => exit.call(s => s.transition(t).duration(400).attr("opacity", 0).remove()) ); gHit.selectAll("path").data(ctx, d => d.id).join("path").attr("class", "hit").attr("d", d => linea(d.pts)) .on("pointerenter", (ev, d) => eventos.call("hover", null, {tipo: d.tipo, cod: d.cod})) .on("pointermove", (ev, d) => { const a = Math.round(x.invert(d3.pointer(ev, svg.node())[0])); tip.mostrar(ev, `${d.nombre}
${a}: ${fmtV(d.pts.find(p => p.anio === a)?.v, actual.indEvol)}
Clic para seleccionar`); }) .on("pointerleave", () => { eventos.call("hover", null, null); tip.ocultar(); }) .on("click", (ev, d) => onSeleccion(d.tipo === "dep" ? {depSel: d.cod, munSel: null} : {munSel: d.cod})); // Destacadas: la línea nueva se "dibuja" (stroke-dashoffset); las que salen se desvanecen gDest.selectAll("path").data(destacadas, d => d.id).join( enter => enter.append("path").attr("class", d => d.clase).attr("d", d => linea(d.pts)) .each(function() { const L = this.getTotalLength(); d3.select(this).attr("stroke-dasharray", `${L} ${L}`).attr("stroke-dashoffset", L); }) .call(s => s.transition(t).duration(1000).attr("stroke-dashoffset", 0) .on("end", function() { d3.select(this).attr("stroke-dasharray", null); })), update => update.call(s => s.transition(t).attr("d", d => linea(d.pts))), exit => exit.call(s => s.transition(t).duration(400).attr("opacity", 0).remove()) ); // Marcadores del año seleccionado (se mueven con el deslizador de año) const enAnio = destacadas.map(s => ({...s, p: s.pts.find(p => p.anio === e.anio)})).filter(s => s.p?.v != null); gPts.selectAll("circle").data(enAnio, d => d.id).join( enter => enter.append("circle").attr("class", d => "pt " + d.clase).attr("r", 4.5) .attr("cx", d => x(d.p.anio)).attr("cy", d => y(d.p.v)).attr("opacity", 0) .call(s => s.transition(t).attr("opacity", 1)), update => update.call(s => s.transition(t).attr("cx", d => x(d.p.anio)).attr("cy", d => y(d.p.v))), exit => exit.call(s => s.transition(t).attr("opacity", 0).remove()) ); // Etiquetas al final de cada línea destacada, sin solaparse (con línea guía) const finales = destacadas.map(s => ({...s, u: ultimo(s)})).filter(s => s.u) .map(s => ({...s, y0: y(s.u.v), yl: y(s.u.v)})).sort((a, b) => a.y0 - b.y0); for (let i = 1; i < finales.length; i++) finales[i].yl = Math.max(finales[i].yl, finales[i - 1].yl + 14); gEtq.selectAll("g").data(finales, d => d.id).join( enter => enter.append("g").attr("opacity", 0).call(g => { g.append("line").attr("class", "guia"); g.append("text").attr("class", "etq-fin").attr("dy", "0.35em"); }).call(g => g.transition(t).attr("opacity", 1)), update => update, exit => exit.call(g => g.transition(t).attr("opacity", 0).remove()) ).call(g => { g.select("line").transition(t).attr("x1", d => x(d.u.anio) + 5).attr("x2", W - M.right + 12) .attr("y1", d => d.y0).attr("y2", d => d.yl); g.select("text").transition(t).attr("x", W - M.right + 16).attr("y", d => d.yl) .text(d => `${d.nombre} ${fmt(d.u.v)}`); }); // Anotaciones de contexto (enter/exit según el indicador) gAnot.selectAll("g").data(ANOTACIONES[k] ?? [], d => d.texto).join( enter => enter.append("g").attr("opacity", 0).call(g => { g.append("line").attr("y1", M.top).attr("y2", H - M.bottom); g.append("text").attr("y", M.top + 10); }).call(g => g.transition(t).attr("opacity", 1)), update => update, exit => exit.call(g => g.transition(t).attr("opacity", 0).remove()) ).call(g => { g.select("line").attr("x1", d => x(d.anio)).attr("x2", d => x(d.anio)); g.select("text").attr("x", d => x(d.anio)).text(d => d.texto) .attr("text-anchor", d => x(d.anio) > (M.left + W - M.right) * 0.6 ? "end" : "start") .attr("dx", d => x(d.anio) > (M.left + W - M.right) * 0.6 ? -4 : 4); }); regla.transition(t).attr("transform", `translate(${x(e.anio)},0)`); reglaTxt.text(e.anio); // Leyenda (HTML) también con join const items = [...destacadas.map(s => ({clase: s.clase, texto: s.nombre})), {clase: "l-contexto", texto: nivelMun ? `Municipios de ${D.infoDep.get(e.depSel).nombre}` : e.region === "Todas" ? "Otros departamentos" : `Departamentos de la región ${e.region}`}]; ley.selectAll("span.item").data(items, d => d.clase).join(enter => enter.append("span").attr("class", "item") .call(s => { s.append("span").attr("class", d => "sw " + d.clase); s.append("span").attr("class", "txt"); })) .order().call(s => s.select(".txt").text(d => d.texto)); titulo.text(`Evolución 2011–2022 · ${IND[k].nombre}`); sub.text(`${IND[k].grupo} · ${IND[k].unidad === "%" ? "porcentaje" : "puntaje promedio"}. Pase el cursor para leer valores; clic en una línea gris para seleccionarla.`); } function resaltar(h) { gCtx.selectAll("path").classed("hover", d => h != null && d.tipo === h.tipo && d.cod === h.cod); gCtx.selectAll("path.hover").raise(); } eventos.on("hover.lineas", resaltar); return {node: raiz.node(), update}; }50:T5fd,// Deslizador de años con botón de reproducción function Reproductor(valores, {valor = valores[valores.length - 1], retardo = 1300, etiqueta = "Año"} = {}) { const form = html``; let reloj = null; const fijar = i => { form.i.valueAsNumber = i; form.value = valores[i]; form.o.value = valores[i]; form.dispatchEvent(new Event("input", {bubbles: true})); }; const pausar = () => { clearInterval(reloj); reloj = null; form.b.textContent = "▶ Animar"; }; form.i.oninput = ev => { ev.stopPropagation(); pausar(); fijar(form.i.valueAsNumber); }; form.b.onclick = () => { if (reloj) return pausar(); if (form.i.valueAsNumber >= valores.length - 1) fijar(0); form.b.textContent = "❚❚ Pausar"; reloj = setInterval(() => { if (!form.isConnected || form.i.valueAsNumber >= valores.length - 1) return pausar(); fijar(form.i.valueAsNumber + 1); }, retardo); }; form.onsubmit = ev => ev.preventDefault(); const i0 = Math.max(0, valores.indexOf(valor)); form.i.valueAsNumber = i0; form.value = valores[i0]; form.o.value = valores[i0]; return form; }51:T13a4,CSS_VIZ = ` .viz { position: relative; font: 12px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--viz-ink, #0b0b0b); } .viz svg { display: block; width: 100%; height: auto; overflow: visible; } .viz .cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .viz .titulo { font-size: 14px; font-weight: 600; } .viz .sub { color: var(--viz-ink2, #52514e); margin: 2px 0 8px; } .viz .muted { color: var(--viz-muted, #898781); } .viz .eje text { fill: var(--viz-muted, #898781); font-size: 11px; font-variant-numeric: tabular-nums; } .viz .eje path, .viz .eje line { stroke: var(--viz-axis, #c3c2b7); } .viz .grid line, .viz .grid-y line { stroke: var(--viz-grid, #e1e0d9); } .viz .grid path { display: none; } .viz .etq { fill: var(--viz-ink2, #52514e); font-size: 11px; } .viz .fuerte { font-weight: 700; fill: var(--viz-ink, #0b0b0b); } .viz .val { fill: var(--viz-ink2, #52514e); font-size: 11px; font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--viz-surface, #fcfcfb); stroke-width: 3px; stroke-linejoin: round; } .viz-mapa svg { overflow: hidden; } .viz .marca { fill: var(--viz-serie1, #2a78d6); } .viz .barra.hover .marca { fill: var(--viz-serie1-hover, #184f95); } .viz .barra.hover .etq { fill: var(--viz-ink, #0b0b0b); } .viz .hitbox { fill: transparent; cursor: pointer; } .viz .ref line { stroke: var(--viz-ink, #0b0b0b); stroke-width: 1.5; } .viz .ref text { fill: var(--viz-ink, #0b0b0b); font-size: 11px; font-weight: 600; } .viz .dpto { stroke: var(--viz-surface, #fcfcfb); stroke-width: 0.8; vector-effect: non-scaling-stroke; cursor: pointer; } .viz .mpio { stroke: var(--viz-surface, #fcfcfb); stroke-width: 0.4; vector-effect: non-scaling-stroke; cursor: pointer; } .viz .dpto.hover, .viz .mpio.hover { stroke: var(--viz-ink, #0b0b0b); stroke-width: 1.5; } .viz .mpio.seleccionado { stroke: var(--viz-serie2, #eb6834); stroke-width: 2.5; } .viz .inset .marco { fill: none; stroke: var(--viz-axis, #c3c2b7); } .viz .sd-fondo { fill: var(--viz-sin-dato, #e4e3dd); } .viz .sd-linea { stroke: var(--viz-muted, #898781); stroke-width: 1; } .viz .l-contexto { fill: none; stroke: var(--viz-contexto, #d6d5ce); stroke-width: 1; } .viz .l-contexto.hover { stroke: var(--viz-ink2, #52514e); stroke-width: 1.5; } .viz .l-nacional, .viz .l-dpto, .viz .l-mpio { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; } .viz .l-nacional { stroke: var(--viz-ink, #0b0b0b); } .viz .l-dpto { stroke: var(--viz-serie1, #2a78d6); } .viz .l-mpio { stroke: var(--viz-serie2, #eb6834); } .viz circle.pt { stroke: var(--viz-surface, #fcfcfb); stroke-width: 2; } .viz circle.l-nacional { fill: var(--viz-ink, #0b0b0b); } .viz circle.l-dpto { fill: var(--viz-serie1, #2a78d6); } .viz circle.l-mpio { fill: var(--viz-serie2, #eb6834); } .viz .hit { fill: none; stroke: transparent; stroke-width: 9; cursor: pointer; pointer-events: stroke; } .viz .capa { fill: transparent; } .viz .cruz { stroke: var(--viz-axis, #c3c2b7); pointer-events: none; } .viz .regla line { stroke: var(--viz-serie1, #2a78d6); stroke-width: 1; opacity: 0.6; } .viz .regla text { fill: var(--viz-serie1-texto, #1c5cab); font-size: 11px; font-weight: 700; } .viz .anot line { stroke: var(--viz-muted, #898781); stroke-width: 1; } .viz .anot text { fill: var(--viz-muted, #898781); font-size: 11px; paint-order: stroke; stroke: var(--viz-surface, #fcfcfb); stroke-width: 3px; } .viz .placa { fill: var(--viz-surface, #fcfcfb); } .viz .guia { stroke: var(--viz-axis, #c3c2b7); } .viz .etq-fin { fill: var(--viz-ink, #0b0b0b); font-size: 12px; font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--viz-surface, #fcfcfb); stroke-width: 3px; } .viz .leyenda { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 6px; color: var(--viz-ink2, #52514e); } .viz .leyenda .item { display: inline-flex; align-items: center; gap: 6px; } .viz .sw { display: inline-block; width: 16px; height: 0; border-top: 2.5px solid; vertical-align: middle; margin-right: 4px; } .viz .sw.l-nacional { border-color: var(--viz-ink, #0b0b0b); } .viz .sw.l-dpto { border-color: var(--viz-serie1, #2a78d6); } .viz .sw.l-mpio { border-color: var(--viz-serie2, #eb6834); } .viz .sw.l-contexto { border-top-width: 1px; border-color: var(--viz-contexto-sw, #b5b4ac); } .viz .tooltip { position: absolute; z-index: 5; pointer-events: none; opacity: 0; transition: opacity .12s; background: var(--viz-surface, #fcfcfb); color: var(--viz-ink, #0b0b0b); border: 1px solid var(--viz-border, rgba(11,11,11,.12)); border-radius: 6px; padding: 6px 8px; box-shadow: 0 2px 10px rgba(0,0,0,.12); white-space: nowrap; font-size: 12px; } .viz button.volver { font: inherit; font-size: 12px; padding: 4px 10px; border-radius: 6px; cursor: pointer; border: 1px solid var(--viz-axis, #c3c2b7); background: var(--viz-surface, #fcfcfb); color: var(--viz-ink, #0b0b0b); } .viz button.volver:hover { border-color: var(--viz-ink2, #52514e); } .viz [hidden] { display: none !important; } `52:[{"id":"f1de70fe6d9ddb8a262f32c55c812f91abfb3cc9d17a9dc49c94bb0bf98850cfe4aeffbe5aeec0ee010851cc8587657a442c9794621c799d866855ca2efe5feb","href":"https://static.observableusercontent.com/files/f1de70fe6d9ddb8a262f32c55c812f91abfb3cc9d17a9dc49c94bb0bf98850cfe4aeffbe5aeec0ee010851cc8587657a442c9794621c799d866855ca2efe5feb","name":"colombia_mgn.topo.json","type":"application/json","lastModified":1792639751848,"size":602408},{"id":"8468473762d1e74695b091eadfe476751b93b45f656e4bf2cd3e6233c03d46883ba22a024402f0949be9e227d27355c4c7734489ef931336fbcb6c0c6b79ab59","href":"https://static.observableusercontent.com/files/8468473762d1e74695b091eadfe476751b93b45f656e4bf2cd3e6233c03d46883ba22a024402f0949be9e227d27355c4c7734489ef931336fbcb6c0c6b79ab59","name":"educacion_2011_2022.csv","type":"text/csv","lastModified":1792639751868,"size":1447141}] 48:{"id":"71daa7e6d5d3d556","slug":"laboratorio-3","title":"Laboratorio 3","thumbnail":"7c5160c900d9f49dcd02dc06c8a4cf24ba4a8e2b429374a799fe432086117f31","access_level":"public","create_time":"$D2026-10-22T03:18:42.010Z","update_time":"$D2026-10-22T05:58:49.294Z","view_time":null,"first_public_time":"$D2026-10-22T06:00:56.924Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"97d57f78404a482d","login":"julian-contreras","name":"Julián Contreras ","avatar_url":"https://avatars-next.observableusercontent.com/a4ccb364cab56be0ea49722109e3b91a445aea6c9644e23307bf526cd2ed5ae8","tier":"starter_2024","bio":"","following":false},"version":172,"publish_version":172,"role":null,"authored":false,"authors":[{"type":"individual","id":"be0b66e27ddcbd12","login":"julian-contreras","name":"Julián Contreras ","avatar_url":"https://avatars-next.observableusercontent.com/a4ccb364cab56be0ea49722109e3b91a445aea6c9644e23307bf526cd2ed5ae8","tier":null,"bio":"","following":false}],"members":[{"type":"team","id":"97d57f78404a482d","login":"julian-contreras","name":"Julián Contreras ","avatar_url":"https://avatars-next.observableusercontent.com/a4ccb364cab56be0ea49722109e3b91a445aea6c9644e23307bf526cd2ed5ae8","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","cells":[{"id":1,"value":"# Laboratorio 3","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"Datos: TerriData (DNP), dimensión Educación. 8 indicadores de primaria y secundaria para Colombia, 33 departamentos y 1.102 municipios entre 2011 y 2022. Límites territoriales: Marco Geoestadístico Nacional (DANE, 2018).\n\n**Tarea principal.** Verificar cómo evolucionó la calidad de la educación entre 2011 y 2022 e identificar las regiones con mayor cobertura.\n\n**Archivos adjuntos**\n\n- `educacion_2011_2022.csv`: generado desde TerriData_Dim4 con pandas (filtro de 8 indicadores y 2011–2022, limpieza de números y una fila por entidad y año). Contiene cobertura neta y bruta, Saber 11, deserción y repitencia, con nivel territorial y región.\n- `colombia_mgn.topo.json`: los GeoJSON de departamentos y municipios del MGN, unidos y simplificados con mapshaper. Contiene los límites de cada territorio con su código DIVIPOLA, que lo une con el CSV.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"### **1.** Carga de datos","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"// Librería para convertir el TopoJSON del MGN en GeoJSON\ntopojson = import(\"https://cdn.jsdelivr.net/npm/topojson-client@3.1.0/+esm\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"// Datos transformados con preprocesamiento.py: una fila por entidad-año (2011-2022)\nD = prepararDatos(await FileAttachment(\"educacion_2011_2022.csv\").csv())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"// MGN 2018 (DANE) simplificado con mapshaper: objetos \"dptos\" y \"mpios\"\ntopo = FileAttachment(\"colombia_mgn.topo.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"IND = ({\n cn_prim: {nombre: \"Cobertura neta en primaria\", grupo: \"Acceso\", unidad: \"%\"},\n cn_sec: {nombre: \"Cobertura neta en secundaria\", grupo: \"Acceso\", unidad: \"%\"},\n cb_prim: {nombre: \"Cobertura bruta en primaria\", grupo: \"Acceso\", unidad: \"%\"},\n cb_sec: {nombre: \"Cobertura bruta en secundaria\", grupo: \"Acceso\", unidad: \"%\"},\n s11_mat: {nombre: \"Saber 11 · Matemáticas\", grupo: \"Calidad\", unidad: \"pts\"},\n s11_lec: {nombre: \"Saber 11 · Lectura crítica\", grupo: \"Calidad\", unidad: \"pts\"},\n desercion: {nombre: \"Deserción intra-anual (sector oficial)\", grupo: \"Permanencia y rezago\", unidad: \"%\"},\n repitencia: {nombre: \"Repitencia (sector oficial)\", grupo: \"Permanencia y rezago\", unidad: \"%\"}\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"// Contexto que explica quiebres de las series (se dibujan con enter/exit según el indicador)\nANOTACIONES = ({\n s11_mat: [{anio: 2014, texto: \"2014 · nueva estructura de Saber 11\"}],\n s11_lec: [{anio: 2014, texto: \"2014 · nueva estructura de Saber 11\"}],\n desercion: [{anio: 2020, texto: \"2020 · pandemia COVID-19\"}],\n repitencia: [{anio: 2020, texto: \"2020 · pandemia COVID-19\"}]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"Se cargan el CSV transformado (una fila por entidad territorial y año, con los 8 indicadores, el nivel y la región) y el TopoJSON con los límites de departamentos y municipios. `IND` describe cada indicador y `ANOTACIONES` marca los quiebres conocidos de las series: 2014 en Saber 11 y 2020 en deserción y repitencia.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"### **2.** Controles de filtrado","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"// Atributo que codifican la Vista A (mapa) y la Vista B (ranking)\nviewof indTerr = Inputs.select(\n new Map(Object.entries(IND).map(([k, v]) => [`${v.grupo} · ${v.nombre}`, k])),\n {label: \"Indicador del mapa y ranking\", value: \"cn_sec\"}\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"// Año activo; el botón recorre 2011-2022 (cambio en el tiempo)\nviewof anio = Reproductor(D.anios, {valor: 2022, retardo: 1300})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"// Filtro por región DNP (atributo derivado)\nviewof region = Inputs.select([\"Todas\", ...D.regiones], {label: \"Región (DNP)\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"// Atributo que codifica la Vista C (evolución)\nviewof indEvol = Inputs.select(\n new Map(Object.entries(IND).map(([k, v]) => [`${v.grupo} · ${v.nombre}`, k])),\n {label: \"Indicador de evolución\", value: \"s11_mat\"}\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"El indicador y el año gobiernan el mapa y el ranking; la región filtra las tres vistas; el indicador de evolución gobierna las líneas. El botón Animar recorre los años de 2011 a 2022.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"### **3.** Tablero","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"tablero = html`

${mapa.node}${barras.node}

\n ${lineas.node}\n

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"// Única celda que depende de los controles: llama update() en las tres vistas.\n// Las vistas se crean una sola vez, por eso sus marcas pueden hacer transiciones.\nactualizar = {\n const estado = {indTerr, anio, region, indEvol, ...seleccion};\n mapa.update(estado);\n barras.update(estado);\n lineas.update(estado);\n return estado;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"El tablero ubica el mapa y el ranking arriba y la evolución abajo. `actualizar` es la única celda que depende de los controles: llama `update()` en cada vista. Como las vistas no se vuelven a crear, sus marcas pueden hacer transiciones.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"### **4.** Selección y coordinación entre vistas","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"// Departamento y municipio seleccionados con clic (estado compartido por las tres vistas)\nviewof seleccion = Inputs.input({depSel: null, munSel: null})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"// Las vistas llaman esta función al hacer clic; actualiza viewof seleccion\nseleccionar = function(cambios) {\n viewof seleccion.value = {...viewof seleccion.value, ...cambios};\n viewof seleccion.dispatchEvent(new Event(\"input\"));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"// Resaltado coordinado al pasar el cursor (no vuelve a ejecutar celdas)\neventos = d3.dispatch(\"hover\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"`viewof seleccion` guarda el departamento y el municipio elegidos con clic, y `seleccionar` lo actualiza desde cualquier vista. `eventos` reparte el resaltado del cursor entre las tres vistas sin volver a ejecutar celdas.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"### **5.** Creación de las vistas","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"// Vista A: mapa coroplético con drill-down departamento -> municipio\nmapa = crearMapa(D, topo, {onSeleccion: seleccionar, eventos})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"// Vista B: ranking de departamentos (barras horizontales ordenadas)\nbarras = crearBarras(D, {onSeleccion: seleccionar, eventos})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"// Vista C: evolución 2011-2022 (líneas con foco y contexto)\nlineas = crearLineas(D, {onSeleccion: seleccionar, eventos})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"Cada vista se crea una sola vez y devuelve `{node, update}`: `node` es lo que se muestra en el tablero y `update` aplica el join (enter, update, exit) con el estado actual.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"### **6.** Preparación de datos","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"$4c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"// Normaliza el estado: una selección que queda fuera de la región filtrada se descarta\nfunction estadoEfectivo(e, D) {\n const enRegion = cod => e.region === \"Todas\" || D.infoDep.get(cod)?.region === e.region;\n const depSel = e.depSel && enRegion(e.depSel) ? e.depSel : null;\n const munSel = depSel && e.munSel && D.infoMun.get(e.munSel)?.cod_dpto === depSel ? e.munSel : null;\n return {...e, depSel, munSel, enRegion};\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"`prepararDatos` convierte los textos a números, separa los niveles (nacional, departamental y municipal), indexa por año y código y calcula dominios de color fijos para 2011–2022. `estadoEfectivo` descarta una selección que queda fuera de la región filtrada.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"### **7.** Vista A: mapa coroplético","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"$4d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"Marca: área (polígonos). Canales: posición espacial, luminancia para el valor y opacidad para foco y contexto. Los municipios se unen por `MPIO_CDPMP`: entran (enter) al seleccionar un departamento y salen (exit) al volver; el mapa hace zoom animado al departamento o a la región.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"### **8.** Vista B: ranking de departamentos","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"$4e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"Marca: barras. Canales: longitud para el valor y posición vertical para el puesto. Las barras se unen por `cod_dpto`: se reordenan al cambiar el año (update), salen si quedan fuera de la región o sin dato (exit) y vuelven al quitar el filtro (enter).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"### **9.** Vista C: evolución 2011–2022","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"$4f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"Marcas: líneas y puntos. Canales: posición X para el año, posición Y para el valor, matiz para las series destacadas y gris para el contexto. Al bajar a un departamento, las líneas de contexto pasan de departamentos a municipios, y la línea seleccionada entra dibujándose.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"### **10.** Utilidades","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"fmt = d3.formatLocale({decimal: \",\", thousands: \".\", grouping: [3], currency: [\"$\", \"\"]}).format(\",.1f\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"function fmtV(v, k) {\n return v == null ? \"sin dato\" : `${fmt(v)} ${IND[k].unidad}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"// Rampa secuencial azul (claro → oscuro); el prototipo la invierte en modo oscuro vía CSS\nSEQ = [\"#cde2fb\", \"#9ec5f4\", \"#6da7ec\", \"#3987e5\", \"#256abf\", \"#184f95\", \"#0d366b\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"function paleta(nodo) {\n const cs = nodo && nodo.isConnected ? getComputedStyle(nodo) : null;\n const v = (n, f) => (cs && cs.getPropertyValue(`--viz-${n}`).trim()) || f;\n return {sinDato: v(\"sin-dato\", \"#e4e3dd\"), seq: SEQ.map((c, i) => v(`seq-${i + 1}`, c))};\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"// Barra horizontal: base cuadrada en x0 y extremo de datos redondeado (4px)\nfunction barPath(x0, w, h, r = 4) {\n const rr = Math.max(0, Math.min(r, w / 2, h / 2));\n return `M${x0},0H${x0 + w - rr}A${rr},${rr} 0 0 1 ${x0 + w},${rr}V${h - rr}A${rr},${rr} 0 0 1 ${x0 + w - rr},${h}H${x0}Z`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"function tooltipEn(raiz) {\n const tip = raiz.append(\"div\").attr(\"class\", \"tooltip\");\n return {\n mostrar(event, html) {\n const [px, py] = d3.pointer(event, raiz.node());\n const w = raiz.node().clientWidth;\n tip.html(html).style(\"opacity\", 1)\n .style(\"left\", `${Math.min(px + 14, w - 220)}px`).style(\"top\", `${py + 14}px`);\n },\n ocultar() { tip.style(\"opacity\", 0); }\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"$50","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"Formato de números en español, rampa de color, barra con extremo redondeado, tooltip y el reproductor de años.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"### **11.** Estilos","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"$51","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"estilos = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"Estilos CSS compartidos por las tres vistas.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W52","stdlib":"2"}} 24:null