25:["$","title",null,{"children":"L3 - D3 Data Binding | JSofia01 | Observable"}] 4b:T8af,const mapa = (() => { const W = 640, H = 720; const svg = d3.create("svg").attr("viewBox", `0 0 ${W} ${H}`) .style("max-width", "100%").style("background", "#f4f6f8"); const g = svg.append("g"); const projection = d3.geoMercator().fitSize([W, H], dptos); const path = d3.geoPath(projection); let currentSel = null; function update({rows, anio, sel, color, unidad}) { currentSel = sel; const val = new Map(rows.filter(d => d.anio === anio).map(d => [d.cod, d.valor])); const feats = sel ? mpios.features.filter(f => f.properties.cod_dpto === sel) : dptos.features; const [[x0, y0], [x1, y1]] = path.bounds({type: "FeatureCollection", features: feats}); const k = Math.max((x1 - x0) / W, (y1 - y0) / H) * 1.1; const vw = W * k, vh = H * k; svg.transition("zoom").duration(800) .attr("viewBox", `${(x0 + x1) / 2 - vw / 2} ${(y0 + y1) / 2 - vh / 2} ${vw} ${vh}`); g.selectAll("path.terr") .data(feats, d => d.properties.cod) .join( enter => enter.append("path").attr("class", "terr") .attr("d", path).attr("fill", "#ddd").attr("opacity", 0) .attr("stroke", "#fff").attr("stroke-width", 0.6) .attr("vector-effect", "non-scaling-stroke") .style("cursor", "pointer") .call(e => e.append("title")) .call(e => e.transition("op").duration(600).attr("opacity", 1)), update => update, exit => exit.transition("op").duration(400).attr("opacity", 0).remove() ) .on("click", (event, d) => { if (!currentSel) setSel(d.properties.cod_dpto); }) .on("mouseenter", function () { d3.select(this).raise().attr("stroke", "#111").attr("stroke-width", 1.6); }) .on("mouseleave", function () { d3.select(this).attr("stroke", "#fff").attr("stroke-width", 0.6); }) .call(s => s.select("title").text(d => { const v = val.get(d.properties.cod); return `${d.properties.nombre}: ${v == null ? "sin dato" : v.toFixed(1) + " " + unidad}`; })) .transition("fill").duration(750) .attr("fill", d => val.has(d.properties.cod) ? color(val.get(d.properties.cod)) : "#cfcfcf"); } return Object.assign(svg.node(), {update}); })();4c:T8ab,const lineas = (() => { const W = 520, H = 300, m = {t: 16, r: 16, b: 28, l: 44}; const svg = d3.create("svg").attr("viewBox", `0 0 ${W} ${H}`).style("max-width", "100%"); const x = d3.scaleLinear([2011, 2022], [m.l, W - m.r]); const y = d3.scaleLinear([0, 100], [H - m.b, m.t]); svg.append("g").attr("transform", `translate(0,${H - m.b})`) .call(d3.axisBottom(x).ticks(6).tickFormat(d3.format("d"))); const gy = svg.append("g").attr("transform", `translate(${m.l},0)`); const gl = svg.append("g"); const marker = svg.append("line").attr("y1", m.t).attr("y2", H - m.b) .attr("stroke", "#555").attr("stroke-dasharray", "2 3") .attr("x1", x(2022)).attr("x2", x(2022)); const line = d3.line().x(d => x(d.anio)).y(d => y(d.valor)); function update({rows, anio, sel}) { const base = rows.filter(d => d.nivel !== "mpio"); y.domain([d3.min(base, d => d.valor) * 0.95, d3.max(base, d => d.valor) * 1.05]).nice(); gy.transition("y").duration(750).call(d3.axisLeft(y).ticks(6)); const series = d3.groups(base, d => d.cod).map(([cod, v]) => ({cod, nivel: v[0].nivel, nombre: v[0].nombre, v: v.sort((a, b) => a.anio - b.anio)})); const rank = d => d.nivel === "pais" ? 2 : (sel && d.cod === sel + "000") ? 1 : 0; gl.selectAll("path.serie") .data(series, d => d.cod) .join( enter => enter.append("path").attr("class", "serie").attr("fill", "none") .attr("d", d => line(d.v)).attr("opacity", 0), update => update, exit => exit.transition().duration(300).attr("opacity", 0).remove() ) .sort((a, b) => rank(a) - rank(b)) .call(s => s.select("title").remove()) .call(s => s.append("title").text(d => d.nombre)) .transition("l").duration(750) .attr("d", d => line(d.v)) .attr("stroke", d => d.nivel === "pais" ? "#111" : rank(d) === 1 ? "#d62728" : "#9aa5b1") .attr("stroke-width", d => rank(d) ? 3 : 1) .attr("stroke-dasharray", d => d.nivel === "pais" ? "5 3" : null) .attr("opacity", d => rank(d) ? 1 : (sel ? 0.25 : 0.55)); marker.transition("m").duration(500).attr("x1", x(anio)).attr("x2", x(anio)); } return Object.assign(svg.node(), {update}); })();4d:T887,const ranking = (() => { const W = 520, H = 400, m = {t: 8, r: 46, b: 20, l: 120}; const svg = d3.create("svg").attr("viewBox", `0 0 ${W} ${H}`).style("max-width", "100%"); const x = d3.scaleLinear([0, 100], [m.l, W - m.r]); const y = d3.scaleBand().range([m.t, H - m.b]).padding(0.15); const gb = svg.append("g"), gn = svg.append("g"), gv = svg.append("g"); function update({rows, anio, sel, color}) { const lvl = sel ? "mpio" : "depto"; let r = rows.filter(d => d.anio === anio && d.nivel === lvl && (!sel || d.cod.slice(0, 2) === sel)) .sort((a, b) => b.valor - a.valor); if (r.length > 20) r = [...r.slice(0, 10), ...r.slice(-10)]; // top 10 + bottom 10 x.domain([0, d3.max(r, d => d.valor) * 1.05]); y.domain(r.map(d => d.cod)); gb.selectAll("rect").data(r, d => d.cod).join( enter => enter.append("rect").attr("x", m.l).attr("y", d => y(d.cod)) .attr("height", y.bandwidth()).attr("width", 0).attr("fill", d => color(d.valor)), update => update, exit => exit.transition("b").duration(400).attr("width", 0).remove() ).transition("b").duration(750) .attr("y", d => y(d.cod)).attr("height", y.bandwidth()) .attr("width", d => x(d.valor) - m.l).attr("fill", d => color(d.valor)); gn.selectAll("text").data(r, d => d.cod).join( enter => enter.append("text").attr("x", m.l - 6).attr("text-anchor", "end") .attr("font-size", 10).attr("dy", "0.35em").attr("y", d => y(d.cod) + y.bandwidth() / 2) .attr("opacity", 0).text(d => d.nombre.slice(0, 20)), update => update, exit => exit.remove() ).transition("t").duration(750).attr("y", d => y(d.cod) + y.bandwidth() / 2).attr("opacity", 1); gv.selectAll("text").data(r, d => d.cod).join( enter => enter.append("text").attr("font-size", 10).attr("dy", "0.35em") .attr("x", m.l + 4).attr("y", d => y(d.cod) + y.bandwidth() / 2), update => update, exit => exit.remove() ).text(d => d.valor.toFixed(1)) .transition("v").duration(750) .attr("x", d => x(d.valor) + 4).attr("y", d => y(d.cod) + y.bandwidth() / 2); } return Object.assign(svg.node(), {update}); })();4e:[{"id":"d06709ab34bf1a61a5f83550cbfaa35cab14d4aa760050ef1427af0d95c95986d17777be2b4013fb406dc662f4c63628609a33c0c689c3f5b155594842d8622c","href":"https://static.observableusercontent.com/files/d06709ab34bf1a61a5f83550cbfaa35cab14d4aa760050ef1427af0d95c95986d17777be2b4013fb406dc662f4c63628609a33c0c689c3f5b155594842d8622c","name":"dptos.json","type":"application/json","lastModified":1792867477538,"size":119942},{"id":"bf030985a622804ca9b577d0a9f6d1420def2307d607921be334a11e3b72e40a85fa5e52e6c2e591f86a4381bbf5c83becd1a22ab21454e3a5368991f11ba11e","href":"https://static.observableusercontent.com/files/bf030985a622804ca9b577d0a9f6d1420def2307d607921be334a11e3b72e40a85fa5e52e6c2e591f86a4381bbf5c83becd1a22ab21454e3a5368991f11ba11e","name":"educacion.csv","type":"text/csv","lastModified":1792867476643,"size":4106497},{"id":"2beacf10404b645d08cc9d80cdb09fa38a744c022521bf6fc3fb39f6c5e82d0d316fba502a4988d69b262a9581f4dc2ec15a6e46c965bbced705aecc1da424be","href":"https://static.observableusercontent.com/files/2beacf10404b645d08cc9d80cdb09fa38a744c022521bf6fc3fb39f6c5e82d0d316fba502a4988d69b262a9581f4dc2ec15a6e46c965bbced705aecc1da424be","name":"mpios.json","type":"application/json","lastModified":1792867478461,"size":879517}] 47:{"id":"35abf768a74dc65f","slug":"l3-d3-data-binding","title":"L3 - D3 Data Binding","thumbnail":"5475191fcc88f315c2aed63f9d16000b57ceaf6061a9cd40eb47912483c7824f","access_level":"public","create_time":"$D2026-10-24T18:45:21.551Z","update_time":"$D2026-10-24T19:25:34.667Z","view_time":null,"first_public_time":"$D2026-10-24T19:24:39.159Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"9ce9bda5584404fd","login":"jsofia01","name":"JSofia01","avatar_url":"https://avatars-next.observableusercontent.com/2043c7a3639082a1ae964bd978ee7a5b8efe67c92ebef19a502148d783733ac1","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":81,"publish_version":81,"role":null,"authored":false,"authors":[{"type":"individual","id":"b13c6b2adbe84f07","login":"jsofia01","name":"JSofia01","avatar_url":"https://avatars-next.observableusercontent.com/2043c7a3639082a1ae964bd978ee7a5b8efe67c92ebef19a502148d783733ac1","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"9ce9bda5584404fd","login":"jsofia01","name":"JSofia01","avatar_url":"https://avatars-next.observableusercontent.com/2043c7a3639082a1ae964bd978ee7a5b8efe67c92ebef19a502148d783733ac1","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":"L3 - D3 Data Binding","cells":[{"id":1,"value":"# L3 - D3 Data Binding","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"const data = (await FileAttachment(\"educacion.csv\").csv())\n .map(d => ({...d, anio: +d.anio, valor: +d.valor, atipico: +d.atipico}));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"const dptos = await FileAttachment(\"dptos.json\").json();","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"const mpios = await FileAttachment(\"mpios.json\").json();","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"const sel = Mutable(null);\nconst setSel = v => { sel.value = v; };","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"const indicadorInput = Inputs.select(\n Array.from(new Set(data.map(d => d.indicador))),\n {label: \"Indicador\", value: \"Cobertura neta secundaria\"}\n);\nconst indicador = Generators.input(indicadorInput);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"const anioInput = Inputs.range([2011, 2022], {step: 1, value: 2022, label: \"Año\"});\nconst anio = Generators.input(anioInput);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"const volverBtn = html``;\nvolverBtn.onclick = () => setSel(null);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"const titulo = html`

`;\nconst leyenda = html`

`;","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"const color = (() => {\n const rows = data.filter(d => d.indicador === indicador && d.nivel !== \"pais\");\n const unidad = rows[0].unidad;\n const vals = rows.map(d => d.valor).sort(d3.ascending);\n const dom = unidad === \"%\" ? [0, 100] : [d3.quantile(vals, 0.02), d3.quantile(vals, 0.98)];\n return d3.scaleSequential(dom, d3.interpolateYlGnBu).clamp(true);\n})();","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$4b","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"$4c","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$4d","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"{\n const rows = data.filter(d => d.indicador === indicador);\n const s = {rows, anio, sel, color, unidad: rows[0].unidad};\n mapa.update(s);\n lineas.update(s);\n ranking.update(s);\n\n const nombreSel = sel ? dptos.features.find(f => f.properties.cod_dpto === sel).properties.nombre : null;\n titulo.textContent = `${indicador} · ${anio} · ` + (sel ? `Municipios de ${nombreSel}` : \"Departamentos (clic en uno para ver sus municipios)\");\n volverBtn.disabled = !sel;\n volverBtn.style.opacity = sel ? 1 : 0.4;\n leyenda.replaceChildren(Plot.legend({color: {type: \"linear\", scheme: \"YlGnBu\", domain: color.domain(), label: indicador}}));\n}","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"html`

\n ${indicadorInput}${anioInput}${volverBtn}\n

\n ${titulo}\n ${leyenda}\n

${mapa}

\n ━ depto. seleccionado ╍ Colombia ━ otros departamentos\n ${lineas}\n Territorios con mayores y menores valores (10 y 10)\n ${ranking}\n

`","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4e","stdlib":"2"}} 24:null