34:["$","title",null,{"children":"Lab 3 — D3 Data Binding: Educación en Colombia (TerriData, 2011–2022) | Luis Fernando Ruiz | Observable"}] 3c:T491,const INDICADORES = [ { id: "saber_mat", nombre: "Saber 11 — Matemáticas", unidad: "puntos", mejorAlto: true }, { id: "saber_lec", nombre: "Saber 11 — Lectura crítica", unidad: "puntos", mejorAlto: true }, { id: "cob_neta_pri", nombre: "Cobertura neta — Primaria", unidad: "%", mejorAlto: true }, { id: "cob_neta_sec", nombre: "Cobertura neta — Secundaria", unidad: "%", mejorAlto: true }, { id: "cob_bruta_pri", nombre: "Cobertura bruta — Primaria", unidad: "%", mejorAlto: true }, { id: "cob_bruta_sec", nombre: "Cobertura bruta — Secundaria", unidad: "%", mejorAlto: true }, { id: "desercion", nombre: "Tasa de deserción intra-anual (oficial)", unidad: "%", mejorAlto: false }, { id: "repitencia", nombre: "Tasa de repitencia (oficial)", unidad: "%", mejorAlto: false } ]; const ANIOS = d3.range(2011, 2023); const DURACION = 750; const fmt = d3.format(".1f"); const estado = { indicador: "saber_mat", anio: 2022, modo: "valor", dptoActivo: null, seleccion: [] }; const vistas = []; const actualizarTodo = () => vistas.forEach(v => v());3d:T4a4,const porClave = new Map(); const clave = (cod, anio) => `${cod}|${anio}`; for (const d of [...datDptos, ...datMpios, ...datNal]) { const cod = String(d.codigo).padStart(String(d.codigo).length > 3 ? 5 : 2, "0"); d.codigo = cod; porClave.set(clave(cod, d.anio), d); } const series = d3.group([...datDptos, ...datMpios, ...datNal], d => d.codigo); const valor = (cod, anio, ind) => porClave.get(clave(cod, anio))?.[ind] ?? null; const delta = (cod, ind) => { const a = valor(cod, 2011, ind), b = valor(cod, 2022, ind); return (a == null || b == null) ? null : b - a; }; const nombreDe = cod => series.get(cod)?.[0]?.nombre ?? cod; const dominios = new Map(); for (const ind of INDICADORES) { for (const [nivel, datosNivel] of [["dpto", datDptos], ["mpio", datMpios]]) { const v = datosNivel.map(d => d[ind.id]).filter(x => x != null); dominios.set(`${ind.id}|${nivel}`, [d3.quantile(v, .05), d3.quantile(v, .95)]); const dv = []; for (const cod of new Set(datosNivel.map(d => d.codigo))) { const x = delta(String(cod), ind.id); if (x != null) dv.push(Math.abs(x)); } dominios.set(`${ind.id}|${nivel}|delta`, d3.quantile(dv, .95) ?? 1); } }3e:T448,const indicadorActual = () => INDICADORES.find(i => i.id === estado.indicador); function escalaColor(nivel) { const ind = indicadorActual(); if (estado.modo === "valor") { const interp = ind.mejorAlto ? d3.interpolateYlGnBu : d3.interpolateYlOrRd; return d3.scaleQuantize(dominios.get(`${ind.id}|${nivel}`), d3.quantize(interp, 7)); } const m = dominios.get(`${ind.id}|${nivel}|delta`); const interp = ind.mejorAlto ? d3.interpolateRdBu : t => d3.interpolateRdBu(1 - t); return d3.scaleDiverging([-m, 0, m], interp); } const medida = cod => estado.modo === "valor" ? valor(cod, estado.anio, estado.indicador) : delta(cod, estado.indicador); function ranking() { const ind = indicadorActual(); const filas = geoDptos.features.map(f => ({ codigo: f.properties.DPTO_CCDGO, nombre: nombreDe(f.properties.DPTO_CCDGO), v: medida(f.properties.DPTO_CCDGO) })).filter(d => d.v != null); filas.sort((a, b) => estado.modo === "delta" ? (ind.mejorAlto ? d3.descending(a.v, b.v) : d3.ascending(a.v, b.v)) : d3.descending(a.v, b.v)); return filas; }3f:Tc80,const cont = d3.create("div").attr("class", "lab3"); cont.html(`

Indicador

Año: 2022

Modo del mapa y ranking

Clic: departamento (zoom a municipios + línea) · Shift + clic: comparar hasta 5 · Cursor: detalles

`); const tooltip = cont.select(".tooltip"); function mostrarTooltip(ev, html) { tooltip.style("opacity", 1).html(html) .style("left", (ev.clientX + 14) + "px").style("top", (ev.clientY + 10) + "px"); } const ocultarTooltip = () => tooltip.style("opacity", 0); function htmlTooltip(cod) { const v = valor(cod, estado.anio, estado.indicador); const dl = delta(cod, estado.indicador); const rk = ranking().findIndex(d => d.codigo === cod) + 1; return `${nombreDe(cod)}
${indicadorActual().nombre} (${estado.anio}): ${v == null ? "sin dato" : fmt(v) + " " + indicadorActual().unidad}
` + `Δ 2011–2022: ${dl == null ? "sin dato" : (dl > 0 ? "+" : "") + fmt(dl)}` + (cod.length === 2 && rk > 0 ? `
Ranking departamental: ${rk} / 33` : ""); }40:T5af,function resaltar(cod, encendido) { cont.selectAll("path.dpto") .attr("stroke", f => encendido && f.properties.DPTO_CCDGO === cod ? "var(--resalte)" : "#fff") .attr("stroke-width", f => encendido && f.properties.DPTO_CCDGO === cod ? 2 : .7) .filter(f => encendido && f.properties.DPTO_CCDGO === cod).raise(); cont.selectAll(".barras g.fila rect") .attr("stroke", d => (encendido && d.codigo === cod) || estado.dptoActivo === d.codigo || estado.seleccion.some(s => s.codigo === d.codigo) ? "var(--resalte)" : "none"); cont.selectAll(".lineas g.serie path.trazo") .attr("stroke-width", d => encendido && d.codigo === cod ? 3.5 : (d.codigo === "01001" ? 2.5 : 1.8)); } function clicEntidad(ev, cod) { const ent = { codigo: cod, nombre: nombreDe(cod) }; if (ev.shiftKey) { const i = estado.seleccion.findIndex(d => d.codigo === cod); if (i >= 0) estado.seleccion.splice(i, 1); else if (estado.seleccion.length < 5) estado.seleccion.push(ent); } else if (cod.length === 2) { estado.dptoActivo = estado.dptoActivo === cod ? null : cod; if (estado.dptoActivo && !estado.seleccion.some(d => d.codigo === cod)) { estado.seleccion = [...estado.seleccion, ent].slice(-5); } } else { if (!estado.seleccion.some(d => d.codigo === cod)) estado.seleccion = [...estado.seleccion, ent].slice(-5); } actualizarTodo(); }41:T1551,const anchoMapa = 560, altoMapa = 640; const svgMapa = cont.select(".mapa").append("svg") .attr("viewBox", [0, 0, anchoMapa, altoMapa]).attr("width", "100%"); const proy = d3.geoMercator().fitSize([anchoMapa, altoMapa - 40], geoDptos); const ruta = d3.geoPath(proy); const gMapa = svgMapa.append("g"); const gDptos = gMapa.append("g"); const gMpios = gMapa.append("g"); svgMapa.append("g").attr("class", "leyenda").attr("transform", `translate(16, ${altoMapa - 34})`); const botonVolver = svgMapa.append("text").attr("class", "boton-volver") .attr("x", 16).attr("y", 24).text("⟵ Volver al país").style("display", "none") .on("click", () => { estado.dptoActivo = null; actualizarTodo(); }); const mpiosPorDpto = d3.group(geoMpios.features, f => f.properties.DPTO_CCDGO); function colorDe(cod, esc) { const v = medida(cod); return v == null ? "var(--gris-sin-dato)" : esc(v); } function dibujarLeyenda(g, esc) { g.selectAll("*").remove(); const ancho = 220, alto = 10; if (estado.modo === "valor") { const clases = esc.range(); const [d0, d1] = esc.domain(); g.selectAll("rect").data(clases).join("rect") .attr("x", (c, i) => i * ancho / clases.length).attr("width", ancho / clases.length) .attr("height", alto).attr("fill", c => c); g.selectAll("text.lim").data([d0, d1]).join("text").attr("class", "lim") .attr("x", (d, i) => i * ancho).attr("y", alto + 11) .attr("text-anchor", (d, i) => i ? "end" : "start").text(d => fmt(d)); g.append("text").attr("x", 0).attr("y", -5) .text(`${indicadorActual().unidad} (escala acotada p5–p95 · gris = sin dato)`); } else { const [d0, , d1] = esc.domain(); const x = d3.scaleLinear([d0, d1], [0, ancho]); g.selectAll("rect").data(d3.range(0, 1.0001, 1 / 36)).join("rect") .attr("x", t => t * ancho).attr("width", ancho / 36 + .5).attr("height", alto) .attr("fill", t => esc(d0 + t * (d1 - d0))); g.selectAll("text.lim").data([d0, 0, d1]).join("text").attr("class", "lim") .attr("x", v => x(v)).attr("y", alto + 11) .attr("text-anchor", (v, i) => i === 0 ? "start" : i === 2 ? "end" : "middle") .text(v => (v > 0 ? "+" : "") + fmt(v)); g.append("text").attr("x", 0).attr("y", -5) .text(`Cambio 2011–2022 (${indicadorActual().unidad}) · azul = mejora · gris = sin dato`); } } function actualizarMapa() { const esc = escalaColor("dpto"); const escM = escalaColor("mpio"); gDptos.selectAll("path.dpto") .data(geoDptos.features, f => f.properties.DPTO_CCDGO) .join( enter => enter.append("path").attr("class", "dpto") .attr("d", ruta) .attr("stroke", "#fff").attr("stroke-width", .7) .attr("fill", f => colorDe(f.properties.DPTO_CCDGO, esc)) .attr("opacity", 0) .call(e => e.transition().duration(DURACION).attr("opacity", 1)), update => update.call(u => u.transition().duration(DURACION) .attr("fill", f => colorDe(f.properties.DPTO_CCDGO, esc)) .attr("opacity", f => estado.dptoActivo && f.properties.DPTO_CCDGO !== estado.dptoActivo ? .25 : 1)), exit => exit.remove() ) .on("click", (ev, f) => clicEntidad(ev, f.properties.DPTO_CCDGO)) .on("mousemove", (ev, f) => { mostrarTooltip(ev, htmlTooltip(f.properties.DPTO_CCDGO)); resaltar(f.properties.DPTO_CCDGO, true); }) .on("mouseout", (ev, f) => { ocultarTooltip(); resaltar(f.properties.DPTO_CCDGO, false); }) .style("cursor", "pointer"); const feats = estado.dptoActivo ? (mpiosPorDpto.get(estado.dptoActivo) ?? []) : []; gMpios.selectAll("path.mpio") .data(feats, f => f.properties.MPIO_CDPMP) .join( enter => enter.append("path").attr("class", "mpio") .attr("d", ruta) .attr("stroke", "#fff").attr("stroke-width", .35) .attr("fill", f => colorDe(f.properties.MPIO_CDPMP, escM)) .attr("opacity", 0) .call(e => e.transition().duration(DURACION).attr("opacity", 1)), update => update.call(u => u.transition().duration(DURACION) .attr("fill", f => colorDe(f.properties.MPIO_CDPMP, escM))), exit => exit.call(x => x.transition().duration(DURACION / 2) .attr("opacity", 0).remove()) ) .on("click", (ev, f) => { ev.stopPropagation(); clicEntidad(ev, f.properties.MPIO_CDPMP); }) .on("mousemove", (ev, f) => mostrarTooltip(ev, htmlTooltip(f.properties.MPIO_CDPMP))) .on("mouseout", ocultarTooltip) .style("cursor", "pointer"); let transf = d3.zoomIdentity; if (estado.dptoActivo) { const f = geoDptos.features.find(f => f.properties.DPTO_CCDGO === estado.dptoActivo); const [[x0, y0], [x1, y1]] = ruta.bounds(f); const k = Math.min(8, .85 / Math.max((x1 - x0) / anchoMapa, (y1 - y0) / altoMapa)); transf = d3.zoomIdentity.translate(anchoMapa / 2, altoMapa / 2).scale(k) .translate(-(x0 + x1) / 2, -(y0 + y1) / 2); } gMapa.transition().duration(DURACION).attr("transform", transf); botonVolver.style("display", estado.dptoActivo ? null : "none"); svgMapa.select(".leyenda").call(dibujarLeyenda, esc); cont.select(".titulo-mapa").text( (estado.modo === "valor" ? `${indicadorActual().nombre} · ${estado.anio}` : `${indicadorActual().nombre} · Δ 2011–2022`) + (estado.dptoActivo ? ` · ${nombreDe(estado.dptoActivo)} (municipios)` : " · Departamentos")); } vistas[0] = actualizarMapa;42:T1077,const mL = { arriba: 14, der: 110, abajo: 26, izq: 44 }; const anchoL = 620, altoL = 300; const svgL = cont.select(".lineas").append("svg") .attr("viewBox", [0, 0, anchoL, altoL]).attr("width", "100%"); const xL = d3.scaleLinear(d3.extent(ANIOS), [mL.izq, anchoL - mL.der]); const yL = d3.scaleLinear([0, 1], [altoL - mL.abajo, mL.arriba]); const ejeXL = svgL.append("g").attr("class", "eje").attr("transform", `translate(0,${altoL - mL.abajo})`); const ejeYL = svgL.append("g").attr("class", "eje").attr("transform", `translate(${mL.izq},0)`); const gLineas = svgL.append("g"); const gAnioRegla = svgL.append("line").attr("stroke", "#999").attr("stroke-dasharray", "3 3"); const colorEnt = d3.scaleOrdinal(d3.schemeTableau10); const entidadesV2 = () => [{ codigo: "01001", nombre: "Colombia" }, ...estado.seleccion]; function actualizarLineas() { const datosV2 = entidadesV2().map(e => ({ ...e, puntos: ANIOS.map(a => ({ anio: a, v: valor(e.codigo, a, estado.indicador) })) .filter(p => p.v != null) })); const todos = datosV2.flatMap(d => d.puntos.map(p => p.v)); const minV = d3.min(todos) ?? 0; yL.domain([minV > 20 ? minV * .95 : 0, (d3.max(todos) ?? 1) * 1.05]).nice(); ejeXL.transition().duration(DURACION).call(d3.axisBottom(xL).ticks(12).tickFormat(d3.format("d"))); ejeYL.transition().duration(DURACION).call(d3.axisLeft(yL).ticks(6)); const linea = d3.line().x(p => xL(p.anio)).y(p => yL(p.v)); gLineas.selectAll("g.serie") .data(datosV2, d => d.codigo) .join( enter => { const g = enter.append("g").attr("class", "serie"); g.append("path").attr("class", "trazo") .attr("fill", "none") .attr("stroke", d => d.codigo === "01001" ? "#222" : colorEnt(d.codigo)) .attr("stroke-width", d => d.codigo === "01001" ? 2.5 : 1.8) .attr("stroke-dasharray", d => d.codigo === "01001" ? "6 3" : null) .attr("d", d => linea(d.puntos)) .attr("opacity", 0) .call(p => p.transition().duration(DURACION).attr("opacity", 1)); g.append("text").attr("class", "rotulo") .attr("font-size", 11).attr("font-weight", 600) .attr("fill", d => d.codigo === "01001" ? "#222" : colorEnt(d.codigo)) .attr("x", d => xL(d.puntos.at(-1)?.anio ?? 2022) + 6) .attr("y", d => yL(d.puntos.at(-1)?.v ?? 0) + 4) .text(d => d.nombre) .attr("opacity", 0) .call(t => t.transition().duration(DURACION).attr("opacity", 1)); return g; }, update => { update.select("path.trazo").transition().duration(DURACION) .attr("d", d => linea(d.puntos)).attr("opacity", 1); update.select("text.rotulo").transition().duration(DURACION) .attr("x", d => xL(d.puntos.at(-1)?.anio ?? 2022) + 6) .attr("y", d => yL(d.puntos.at(-1)?.v ?? 0) + 4); return update; }, exit => exit.call(g => g.transition().duration(DURACION / 2) .attr("opacity", 0).remove()) ) .on("mousemove", (ev, d) => mostrarTooltip(ev, htmlTooltip(d.codigo))) .on("mouseout", ocultarTooltip); gLineas.selectAll("circle.pt") .data(datosV2.map(d => ({ codigo: d.codigo, p: d.puntos.find(p => p.anio === estado.anio) })) .filter(d => d.p), d => d.codigo) .join( enter => enter.append("circle").attr("class", "pt").attr("r", 0) .attr("fill", d => d.codigo === "01001" ? "#222" : colorEnt(d.codigo)) .attr("cx", d => xL(d.p.anio)).attr("cy", d => yL(d.p.v)) .call(c => c.transition().duration(DURACION).attr("r", 4)), update => update.call(u => u.transition().duration(DURACION) .attr("cx", d => xL(d.p.anio)).attr("cy", d => yL(d.p.v)).attr("r", 4)), exit => exit.call(x => x.transition().duration(DURACION / 2).attr("r", 0).remove()) ); gAnioRegla.transition().duration(DURACION) .attr("x1", xL(estado.anio)).attr("x2", xL(estado.anio)) .attr("y1", mL.arriba).attr("y2", altoL - mL.abajo); cont.select(".titulo-lineas").text(`Evolución ${indicadorActual().nombre} (${indicadorActual().unidad}) · Colombia vs. entidades seleccionadas`); } vistas[1] = actualizarLineas;43:Td17,const mB = { arriba: 6, der: 46, abajo: 20, izq: 130 }; const anchoB = 620, altoB = 520; const svgB = cont.select(".barras").append("svg") .attr("viewBox", [0, 0, anchoB, altoB]).attr("width", "100%"); const gBarras = svgB.append("g"); const ejeXB = svgB.append("g").attr("class", "eje").attr("transform", `translate(0,${altoB - mB.abajo})`); function actualizarBarras() { const filas = ranking(); const y = d3.scaleBand(filas.map(d => d.codigo), [mB.arriba, altoB - mB.abajo]).padding(.18); const ext = estado.modo === "delta" ? d3.extent(filas, d => d.v) : [0, d3.max(filas, d => d.v) ?? 1]; const x = d3.scaleLinear([Math.min(0, ext[0]), Math.max(0, ext[1])], [mB.izq, anchoB - mB.der]).nice(); const esc = escalaColor("dpto"); const seleccionados = new Set([estado.dptoActivo, ...estado.seleccion.map(d => d.codigo)].filter(Boolean)); ejeXB.transition().duration(DURACION).call(d3.axisBottom(x).ticks(5)); gBarras.selectAll("g.fila") .data(filas, d => d.codigo) .join( enter => { const g = enter.append("g").attr("class", "fila") .attr("transform", d => `translate(0,${y(d.codigo)})`); g.append("rect") .attr("x", d => x(Math.min(0, d.v))).attr("height", y.bandwidth()) .attr("width", 0).attr("fill", d => esc(d.v)) .attr("stroke", d => seleccionados.has(d.codigo) ? "var(--resalte)" : "none") .attr("stroke-width", 1.75) .call(r => r.transition().duration(DURACION) .attr("width", d => Math.abs(x(d.v) - x(0))).attr("x", d => x(Math.min(0, d.v)))); g.append("text").attr("class", "etiqueta-barra") .attr("x", mB.izq - 6).attr("y", y.bandwidth() / 2 + 3.5).attr("text-anchor", "end") .text(d => d.nombre); g.append("text").attr("class", "etiqueta-barra valor") .attr("x", d => x(Math.max(0, d.v)) + 4).attr("y", y.bandwidth() / 2 + 3.5) .text(d => (estado.modo === "delta" && d.v > 0 ? "+" : "") + fmt(d.v)); return g; }, update => { update.transition().duration(DURACION) .attr("transform", d => `translate(0,${y(d.codigo)})`); update.select("rect").transition().duration(DURACION) .attr("width", d => Math.abs(x(d.v) - x(0))) .attr("x", d => x(Math.min(0, d.v))) .attr("height", y.bandwidth()) .attr("fill", d => esc(d.v)) .attr("stroke", d => seleccionados.has(d.codigo) ? "var(--resalte)" : "none"); update.select("text.valor").transition().duration(DURACION) .attr("x", d => x(Math.max(0, d.v)) + 4) .text(d => (estado.modo === "delta" && d.v > 0 ? "+" : "") + fmt(d.v)); return update; }, exit => exit.call(g => g.transition().duration(DURACION / 2) .attr("opacity", 0).remove()) ) .style("cursor", "pointer") .on("click", (ev, d) => clicEntidad(ev, d.codigo)) .on("mousemove", (ev, d) => { mostrarTooltip(ev, htmlTooltip(d.codigo)); resaltar(d.codigo, true); }) .on("mouseout", (ev, d) => { ocultarTooltip(); resaltar(d.codigo, false); }); cont.select(".titulo-barras").text(estado.modo === "valor" ? `Ranking departamental · ${indicadorActual().nombre} · ${estado.anio}` : `Ranking departamental por cambio 2011–2022 (mejora primero)`); } vistas[2] = actualizarBarras;44:[{"id":"d93de84d9fa706c162f76f72666d138bebf4f3863b034c5d88221cbc83507fe90c19b770b6b3a0380d92e097d0565613da4ba04358dcede755f7327cbe1b67c8","href":"https://static.observableusercontent.com/files/d93de84d9fa706c162f76f72666d138bebf4f3863b034c5d88221cbc83507fe90c19b770b6b3a0380d92e097d0565613da4ba04358dcede755f7327cbe1b67c8","name":"terridata_departamentos.csv","type":"text/csv","lastModified":1792868465693,"size":30453},{"id":"753a7677b45a956446d31f8c5adfd371acf027684f01a132fc4188a4c9f910726dcbcbd3d1d562c75f7151307bf0c1faf1a4b81f85d113f11cef851fefd8dbb8","href":"https://static.observableusercontent.com/files/753a7677b45a956446d31f8c5adfd371acf027684f01a132fc4188a4c9f910726dcbcbd3d1d562c75f7151307bf0c1faf1a4b81f85d113f11cef851fefd8dbb8","name":"terridata_municipios.csv","type":"text/csv","lastModified":1792868465723,"size":1058000},{"id":"927b1f57809dbd9682ef26cfdc8366237ef5af10828e50f1f372cfc8943fca3515b9bf76151d5804c68d6948b652eac57f6e07da2416202c618a07b5be79b3c4","href":"https://static.observableusercontent.com/files/927b1f57809dbd9682ef26cfdc8366237ef5af10828e50f1f372cfc8943fca3515b9bf76151d5804c68d6948b652eac57f6e07da2416202c618a07b5be79b3c4","name":"terridata_nacional.csv","type":"text/csv","lastModified":1792868465692,"size":1078},{"id":"8af5ba170ddbffa4db9f566450c3c4a4d0464ebbd8496e051977cc668982a9cd3dd73e68d399cd321522bf745010d5927adcd63386f001ef99c97ee3438818f9","href":"https://static.observableusercontent.com/files/8af5ba170ddbffa4db9f566450c3c4a4d0464ebbd8496e051977cc668982a9cd3dd73e68d399cd321522bf745010d5927adcd63386f001ef99c97ee3438818f9","name":"MGN_ANM_DPTOS.geojson","type":"application/geo+json","lastModified":1663668584000,"size":1582353},{"id":"04e5e8cd537032829298b8507727db2c34b93ee75cbb5d3a6d1a05ba8c707955a44d253449fde7a57f241e0fc4b3895121b9e0bb65ba573fc9957d12989fbb81","href":"https://static.observableusercontent.com/files/04e5e8cd537032829298b8507727db2c34b93ee75cbb5d3a6d1a05ba8c707955a44d253449fde7a57f241e0fc4b3895121b9e0bb65ba573fc9957d12989fbb81","name":"MGN_ANM_MPIOS.geojson","type":"application/geo+json","lastModified":1663668582000,"size":5759175}] 38:{"id":"b6e7610e6e0f5fc4","slug":"lab-3-d3-data-binding-educacion-en-colombia-terri-data-2011-2022","title":"Lab 3 — D3 Data Binding: Educación en Colombia (TerriData, 2011–2022)","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2026-10-24T21:37:34.434Z","update_time":"$D2026-10-24T22:27:48.672Z","view_time":null,"first_public_time":"$D2026-10-24T22:11:54.816Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"ec8413e05da3abe5","login":"luis-fernando-ruiz","name":"Luis Fernando Ruiz","avatar_url":"https://avatars-next.observableusercontent.com/b132f553703f3b8bb95791c62ee2e580ab1abca6c1125b3ee0c3666b12bbf8b9","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":47,"publish_version":47,"role":null,"authored":false,"authors":[{"type":"individual","id":"ce57477beb3b3edd","login":"luis-fernando-ruiz","name":"Luis Fernando Ruiz","avatar_url":"https://avatars-next.observableusercontent.com/b132f553703f3b8bb95791c62ee2e580ab1abca6c1125b3ee0c3666b12bbf8b9","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"ec8413e05da3abe5","login":"luis-fernando-ruiz","name":"Luis Fernando Ruiz","avatar_url":"https://avatars-next.observableusercontent.com/b132f553703f3b8bb95791c62ee2e580ab1abca6c1125b3ee0c3666b12bbf8b9","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":"Lab 3 — D3 Data Binding: Educación en Colombia (TerriData, 2011–2022)","cells":[{"id":1,"value":"# Lab 3 — D3 Data Binding: Educación en Colombia (TerriData, 2011–2022)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"Juan Camilo Arias Carrillo — 202210459 · Luis Fernando José Ruiz Ortega — 2022111513","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$3c","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"const [geoDptos, geoMpios, datDptos, datMpios, datNal] = await Promise.all([\n FileAttachment(\"MGN_ANM_DPTOS.geojson\").json(),\n FileAttachment(\"MGN_ANM_MPIOS.geojson\").json(),\n FileAttachment(\"terridata_departamentos.csv\").csv({ typed: true }),\n FileAttachment(\"terridata_municipios.csv\").csv({ typed: true }),\n FileAttachment(\"terridata_nacional.csv\").csv({ typed: true })\n]);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$3d","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$3e","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"$3f","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$40","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$41","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"$42","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"$43","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"cont.select(\".sel-indicador\")\n .on(\"change\", function () { estado.indicador = this.value; actualizarTodo(); })\n .selectAll(\"option\").data(INDICADORES).join(\"option\")\n .attr(\"value\", d => d.id).text(d => `${d.nombre} (${d.unidad})`);\n\ncont.select(\".sel-anio\").on(\"input\", function () {\n estado.anio = +this.value;\n cont.select(\".anio-valor\").text(estado.anio);\n actualizarTodo();\n});\n\ncont.select(\".sel-modo\").on(\"change\", function () { estado.modo = this.value; actualizarTodo(); });\n\nactualizarMapa();\nactualizarLineas();\nactualizarBarras();\n\ndisplay(cont.node());","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W44","stdlib":"2"}} 33:null