42:null 43:["$","title",null,{"children":"Time Data Visualization and Geo | Paolo Medrano Teran | Observable"}] 49:T7fa,## Datos Aquí cargamos una [versión simplificada y reducida](https://docs.google.com/spreadsheets/d/1YiuHdfZv_JZ-igOemKJMRaU8dkucfmHxOP6Od3FraW8/) del [conjunto de datos de AidData](https://www.aiddata.org/data/aiddata-core-research-release-level-1-3-1). Eres libre de cambiar este código como desees. Si no quieres preprocesar tus datos en Observable, puedes hacer el preprocesamiento utilizando cualquier lenguaje o herramienta que prefieras y luego [subir](/@observablehq/file-attachments) tus datos preprocesados a Observable. Si tomas este enfoque, entonces deberías eliminar la celda `aiddata` que aparece más abajo para no cargar datos innecesarios. El conjunto de datos contiene las siguientes columnas: - **yearDate**: año del compromiso como objeto Date - **yearInt**: año del compromiso como número entero - **donor**: país que proporciona el recurso financiero - **recipient**: país que recibe el recurso financiero - **amount**: el monto total de recursos financieros proporcionados - **purpose**: el propósito de la transacción ## Data Here we load a [simplified and reduced version](https://docs.google.com/spreadsheets/d/1YiuHdfZv_JZ-igOemKJMRaU8dkucfmHxOP6Od3FraW8/) of the [AidData dataset](https://www.aiddata.org/data/aiddata-core-research-release-level-1-3-1). You are free to modify this code as you wish. If you don’t want to preprocess your data in Observable, you can do the preprocessing using any language or tool you prefer and then [upload](/@observablehq/file-attachments) your preprocessed data to Observable. If you take this approach, you should delete the `aiddata` cell below to avoid loading unnecessary data. The dataset contains the following columns: - **yearDate**: year of the commitment as a Date object - **yearInt**: year of the commitment as an integer - **donor**: country providing the financial resource - **recipient**: country receiving the financial resource - **amount**: total amount of financial resources provided - **purpose**: purpose of the transaction 4a:Tf89,## Preguntas Tu objetivo es crear 2 visualizaciones independientes del mismo conjunto de datos, cada una con la intención de responder las preguntas indicadas a continuación. Para cada visualización numerada, deberías ser capaz de crear una visualización de datos que responda **todas** las preguntas especificadas. Estas son las 2 visualizaciones que debes crear: - **Visualización 1:** a) ¿Cómo cambia con el tiempo la cantidad donada frente a la cantidad recibida para cada país? b) ¿Existen países que principalmente envían o principalmente reciben, y países que tienen un balance similar entre lo que donan y reciben? c) ¿Existen países que cambian su rol con el tiempo? Es decir, que solían ser principalmente donantes y se convierten en principalmente receptores, o viceversa. d) ¿Existen países en los que se puede observar un aumento repentino ("pico") o una disminución repentina ("valle")? - **Visualización 2:** Enfócate en los 10 principales “Propósitos Consolidados” de las donaciones (en términos del monto total desembolsado considerando todos los países y todos los años). ¿Cuáles son los 10 principales propósitos de desembolsos y cómo se comparan entre sí sus montos relativos a lo largo del tiempo? Por ejemplo, ¿hay propósitos que tienden a ser prominentes durante ciertos períodos y otros que se vuelven más importantes en otros momentos? Pista: al observar el gráfico uno debería poder decir: “¡Ah! Durante estos años las donaciones eran mayormente sobre X, pero luego hubo muchas más donaciones sobre Y”. Nota: si el propósito es “UNSPECIFIED” (no especificado), debe ser eliminado. Para cada visualización agrega una descripción de tu proceso de pensamiento y por qué consideras que tu solución es *apropiada* y *efectiva*. Nota: está bien enviar más de una solución para un mismo problema de visualización si crees que hay varias alternativas que funcionan bien. En ese caso, asegúrate de comparar las soluciones comentando sus ventajas y desventajas. ## Questions Your goal is to create **two independent visualizations** from the same dataset, each designed to answer the questions listed below. For each numbered visualization, you should be able to create a data visualization that addresses **all** the specified questions. These are the two visualizations you must create: - **Visualization 1:** a) How does the amount donated versus the amount received change over time for each country? b) Are there countries that mainly send or mainly receive, and others that have a similar balance between what they donate and what they receive? c) Are there countries that change their role over time? For instance, countries that used to be mainly donors and later become mainly recipients, or vice versa. d) Are there countries where a sudden increase ("peak") or a sudden drop ("valley") can be observed? - **Visualization 2:** Focus on the top 10 “Consolidated Purposes” of donations (in terms of the total amount disbursed across all countries and all years). What are the top 10 purposes of disbursements, and how do their relative amounts compare over time? For example, are there purposes that tend to be prominent during certain periods and others that become more important later? *Hint:* when observing the chart, one should be able to say: “Ah! During these years, donations were mostly about X, but later there were many more donations about Y.” *Note:* if the purpose is “UNSPECIFIED,” it should be excluded. For each visualization, add a description of your thought process and why you consider your solution *appropriate* and *effective*. *Note:* It is acceptable to submit more than one solution for the same visualization problem if you believe there are multiple valid approaches. In that case, make sure to compare the solutions, commenting on their advantages and disadvantages. 4b:T310c,vista1 = { const AZUL = "#2166AC", ROJO = "#B2182B", TOTAL = "#4B5563"; const TINTA = "#1F2328", GRIS = "#6E7781", LINEA = "#EAEEF2"; const [a0, a1] = d3.extent(aiddata, d => d.yearInt); const rango = ([a, b]) => `${a}–${b}`; // Totales generales (sin autodonaciones) const totalAño = d3.rollup(aiddata.filter(d => d.donor !== d.recipient), v => d3.sum(v, d => d.amount), d => d.yearInt); const totalPeriodo = periodos.map(([a, b]) => d3.sum(d3.range(a, b + 1), y => totalAño.get(y) ?? 0)); // Países ordenados por volumen total (donado + recibido) const totalPais = d3.rollup(flujos, v => d3.sum(v, d => d.donado + d.recibido), d => nombre(d.pais)); const paises = d3.sort([...nombreDataset.keys()], g => -(totalPais.get(g) ?? 0)); // Estado inicial: vista general en la década con más ayuda let sel = {geo: null, periodo: d3.maxIndex(totalPeriodo)}; // ===== Encabezado, filtro y leyenda ===== const grad = d3.range(0, 1.01, 0.1).map(t => d3.interpolateRdBu(t)).join(","); const filtro = html``; filtro.onchange = () => { sel = {...sel, geo: filtro.value || null}; actualizar(); }; const cont = html`

Ayuda donada y recibida por país, ${a0}–${a1}

País ${filtro}

Donante Receptor Sin datos

`; // ===== Mapas en una fila ===== const n = periodos.length, W = 960, gap = 8; const mapW = (W - gap * (n - 1)) / n, mapH = Math.ceil(mapW / 2.05); const path = d3.geoPath(d3.geoEqualEarth().fitSize([mapW - 8, mapH - 8], mundo)); const svgM = d3.create("svg").attr("viewBox", [0, 0, W, mapH + 22]) .style("width", "100%").style("display", "block"); const fondos = [], etiquetas = []; periodos.forEach((p, i) => { const m = indicePeriodo[i]; const g = svgM.append("g").attr("transform", `translate(${i * (mapW + gap)},0)`); // Clic en el fondo de un mapa: cambia la década sin cambiar el país fondos.push(g.append("rect").attr("width", mapW).attr("height", mapH + 22).attr("rx", 6).attr("fill", "#F6F8FA") .style("cursor", "pointer").on("click", () => { sel = {...sel, periodo: i}; actualizar(); })); etiquetas.push(g.append("text").attr("x", 8).attr("y", 16).attr("font-size", 12).style("pointer-events", "none").text(rango(p))); g.append("g").attr("transform", "translate(4,22)") .selectAll("path").data(mundo.features).join("path") .attr("class", "pais").attr("d", path) .attr("fill", f => m.has(f.properties.name) ? colorRol(m.get(f.properties.name).indice) : "#D8DEE4") .attr("stroke", "white").attr("stroke-width", 0.3) .style("cursor", f => m.has(f.properties.name) && nombreDataset.has(f.properties.name) ? "pointer" : "default") .on("click", (e, f) => { if (!nombreDataset.has(f.properties.name)) { sel = {...sel, periodo: i}; actualizar(); return; } // Segundo clic en el mismo país y década: vuelve a la vista general const mismo = sel.geo === f.properties.name && sel.periodo === i; sel = {geo: mismo ? null : f.properties.name, periodo: i}; actualizar(); }) .append("title") .text(f => m.has(f.properties.name) ? `${f.properties.name}\nRecibido: ${fmt(m.get(f.properties.name).recibido)}\nDonado: ${fmt(m.get(f.properties.name).donado)}` : `${f.properties.name}: sin datos`); }); cont.append(svgM.node()); // ===== Detalle ===== const det = html`

`; cont.append(det); cont.append(html`

`); // Gráfico de líneas reutilizable (una o dos series) function grafico(datos, series, titulo) { const per = periodos[sel.periodo]; const marcas = series.flatMap(([s, , col]) => { const max = d3.max(datos, d => d[s]); if (!max) return []; const dif = d3.pairs(datos, (p, q) => ({año: q.año, valor: q[s], cambio: q[s] - p[s], col})); const sd = d3.deviation(dif, d => d.cambio) || Infinity; return d3.sort(dif.filter(d => Math.abs(d.cambio) > 2 * sd && Math.abs(d.cambio) > 0.2 * max), d => -Math.abs(d.cambio)) .slice(0, 2) .map(d => ({...d, tipo: d.cambio > 0 ? "pico" : "caída"})); }); const W2 = 720, H2 = 250, mg = {t: 28, r: 70, b: 22, l: 48}; const x = d3.scaleLinear([a0, a1], [mg.l, W2 - mg.r]); const y = d3.scaleLinear([0, d3.max(datos, d => d3.max(series, ([s]) => d[s])) || 1], [H2 - mg.b, mg.t]).nice(); const c = d3.create("svg").attr("viewBox", [0, 0, W2, H2]).style("width", "100%").style("display", "block") .style("font-family", "system-ui,-apple-system,'Segoe UI',sans-serif"); c.append("text").attr("x", mg.l).attr("y", 13).attr("font-size", 13).attr("font-weight", 650).attr("fill", TINTA).text(titulo); const lectura = c.append("text").attr("x", W2 - mg.r).attr("y", 13).attr("text-anchor", "end") .attr("font-size", 12).attr("fill", GRIS); c.append("rect").attr("x", x(per[0] - 0.5)).attr("width", x(per[1] + 0.5) - x(per[0] - 0.5)) .attr("y", mg.t).attr("height", H2 - mg.t - mg.b).attr("fill", "#F6F8FA"); c.append("g").attr("transform", `translate(${mg.l},0)`) .call(d3.axisLeft(y).ticks(4).tickFormat(fmt).tickSize(-(W2 - mg.l - mg.r))) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").attr("stroke", LINEA)) .call(g => g.selectAll("text").attr("font-size", 10).attr("fill", GRIS)); c.append("g").attr("transform", `translate(0,${H2 - mg.b})`) .call(d3.axisBottom(x).tickValues(d3.range(Math.ceil(a0 / 5) * 5, a1 + 1, 5)).tickFormat(d3.format("d")).tickSize(0).tickPadding(6)) .call(g => g.select(".domain").attr("stroke", "#AFB8C1")) .call(g => g.selectAll("text").attr("font-size", 10).attr("fill", GRIS)); series.forEach(([s, , col]) => c.append("path").datum(datos).attr("fill", "none").attr("stroke", col).attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("d", d3.line().x(d => x(d.año)).y(d => y(d[s])))); c.append("g").selectAll("circle").data(marcas).join("circle") .attr("cx", d => x(d.año)).attr("cy", d => y(d.valor)).attr("r", 3.5).attr("fill", d => d.col); // Etiquetas directas al final de cada línea const fin = datos.at(-1); const ys = series.map(([s]) => y(fin[s])); if (ys.length === 2 && Math.abs(ys[0] - ys[1]) < 14) { const m = (ys[0] + ys[1]) / 2, arriba = ys[0] <= ys[1]; ys[0] = m + (arriba ? -7 : 7); ys[1] = m + (arriba ? 7 : -7); } series.forEach(([, etiqueta, col], i) => c.append("text").attr("x", W2 - mg.r + 6).attr("y", ys[i]).attr("dy", "0.35em") .attr("font-size", 12).attr("font-weight", 600).attr("fill", col).text(etiqueta)); const guia = c.append("line").attr("y1", mg.t).attr("y2", H2 - mg.b).attr("stroke", "#AFB8C1").attr("opacity", 0); const puntos = series.map(([, , col]) => c.append("circle").attr("r", 3).attr("fill", col).attr("opacity", 0)); c.append("rect").attr("x", mg.l).attr("y", mg.t).attr("width", W2 - mg.l - mg.r).attr("height", H2 - mg.t - mg.b) .attr("fill", "transparent") .on("pointermove", e => { const año = Math.max(a0, Math.min(a1, Math.round(x.invert(d3.pointer(e)[0])))); const d = datos[año - a0]; const evento = marcas.filter(mk => mk.año === año).map(mk => mk.tipo).join(", "); guia.attr("x1", x(año)).attr("x2", x(año)).attr("opacity", 1); series.forEach(([s], i) => puntos[i].attr("cx", x(año)).attr("cy", y(d[s])).attr("opacity", 1)); lectura.text(`${año}: ${series.map(([s, et]) => `${et.toLowerCase()} ${fmt(d[s])}`).join(", ")}${evento ? ` (${evento})` : ""}`); }) .on("pointerleave", () => { guia.attr("opacity", 0); puntos.forEach(p => p.attr("opacity", 0)); lectura.text(""); }); return c.node(); } // ----- Vista de un país ----- function detallePais() { const pais = nombreDataset.get(sel.geo); const per = periodos[sel.periodo]; const info = indicePeriodo[sel.periodo].get(sel.geo); const sil = d3.create("svg").attr("viewBox", [0, 0, 200, 120]).style("width", "100%").style("display", "block"); const fz = mundo.features.find(f => f.properties.name === sel.geo); if (fz) { sil.append("path").datum(fz) .attr("d", d3.geoPath(d3.geoEqualEarth().fitExtent([[10, 6], [190, 114]], fz))) .attr("fill", info ? colorRol(info.indice) : "#D8DEE4"); } const panel = html`

${pais}

${rango(per)}

`; panel.append(sil.node(), info ? html`

Recibido${fmt(info.recibido)} Donado${fmt(info.donado)}

` : html`

Sin datos

`); const porAño = new Map(flujos.filter(d => d.pais === pais).map(d => [d.año, d])); const datos = d3.range(a0, a1 + 1).map(año => ({ año, donado: porAño.get(año)?.donado ?? 0, recibido: porAño.get(año)?.recibido ?? 0 })); return [panel, grafico(datos, [["recibido", "Recibido", AZUL], ["donado", "Donado", ROJO]], "Monto anual (USD)")]; } // ----- Vista general ----- function detalleGeneral() { const per = periodos[sel.periodo]; const m = indicePeriodo[sel.periodo]; const donante = d3.greatest(m, ([, v]) => v.donado); const receptor = d3.greatest(m, ([, v]) => v.recibido); const sil = d3.create("svg").attr("viewBox", [0, 0, 200, 110]).style("width", "100%").style("display", "block"); sil.append("path").datum(mundo) .attr("d", d3.geoPath(d3.geoEqualEarth().fitExtent([[4, 4], [196, 106]], mundo))) .attr("fill", "#C9D3DD"); const panel = html`

Todos los países

${rango(per)}

`; panel.append(sil.node(), html`

Total donado${fmt(totalPeriodo[sel.periodo])} Mayor donante${donante ? donante[0] : "-"} Mayor receptor${receptor ? receptor[0] : "-"}

`); const datos = d3.range(a0, a1 + 1).map(año => ({año, total: totalAño.get(año) ?? 0})); return [panel, grafico(datos, [["total", "Total", TOTAL]], "Ayuda total donada por año (USD)")]; } function actualizar() { filtro.value = sel.geo ?? ""; fondos.forEach((r, i) => r.attr("fill", i === sel.periodo ? "#EAEEF2" : "#F6F8FA")); etiquetas.forEach((t, i) => t.attr("font-weight", i === sel.periodo ? 650 : 400) .attr("fill", i === sel.periodo ? TINTA : GRIS)); svgM.selectAll("path.pais") .attr("stroke", f => f.properties.name === sel.geo ? TINTA : "white") .attr("stroke-width", f => f.properties.name === sel.geo ? 1 : 0.3) .filter(f => f.properties.name === sel.geo).raise(); det.replaceChildren(...(sel.geo ? detallePais() : detalleGeneral())); } actualizar(); return cont; }4c:T5ad2,vista2 = { const TINTA = "#1F2328", GRIS = "#57606A", BASE = "#2F5D8A"; const FUENTE = "system-ui,-apple-system,'Segoe UI',sans-serif"; const [a0, a1] = d3.extent(aiddata, d => d.yearInt); const años = d3.range(a0, a1 + 1); const color = d3.scaleOrdinal(top10, d3.schemeTableau10); const etiqueta = p => p === p.toUpperCase() ? p.charAt(0) + p.slice(1).toLowerCase() : p; const pct = d3.format(".0%"); const MS_POR_AÑO = 600; // velocidad de la animación let paisSel = null, propFijo = null, resaltado = null; // paisSel: nombre del país elegido en el globo let tiempo = a1, añoActual = a1, reloj = null, actual = null; let desde = a0, hasta = a1; // intervalo elegido en la vista de contexto const datosTop = sinUnspec.filter(d => top10.includes(d.purpose)); const recibido = d3.rollup(datosTop, v => d3.sum(v, d => d.amount), d => nombre(d.recipient)); const recibidoProp = d3.rollup(datosTop, v => d3.sum(v, d => d.amount), d => d.purpose, d => nombre(d.recipient)); // Datos de la vista: apilado, participación, dominante y años destacados function calcular(pais) { const filas = datosTop.filter(d => !pais || nombre(d.recipient) === pais); const m = d3.rollup(filas, v => d3.sum(v, d => d.amount), d => d.yearInt, d => d.purpose); const tabla = años.map(a => Object.fromEntries([["año", a], ...top10.map(p => [p, m.get(a)?.get(p) ?? 0])])); const series = d3.stack().keys(top10).offset(d3.stackOffsetWiggle).order(d3.stackOrderInsideOut)(tabla); const total = new Map(años.map(a => [a, d3.sum(top10, p => m.get(a)?.get(p) ?? 0)])); const participacion = new Map(años.map(a => [a, new Map(top10.map(p => [p, total.get(a) ? (m.get(a)?.get(p) ?? 0) / total.get(a) : 0]))])); const dominante = años.map(a => { const key = total.get(a) ? d3.greatest(top10, p => m.get(a)?.get(p) ?? 0) : null; return {año: a, key, share: key ? participacion.get(a).get(key) : 0, monto: key ? m.get(a).get(key) : 0}; }); // Años destacados: los 3 picos locales con mayor monto total const picos = d3.sort(años.filter(a => total.get(a) > 0 && total.get(a) >= (total.get(a - 1) ?? 0) && total.get(a) >= (total.get(a + 1) ?? 0)), a => -total.get(a)).slice(0, 3); const notas = new Map(picos.map((a, i) => [a, i === 0 ? "año récord" : "año pico"])); return {m, series, total, participacion, dominante, notas, vacio: filas.length === 0}; } // ===== Medidas ===== const angosto = width < 900; const anchoPanel = 300, separacion = 36; const W = angosto ? width : width - anchoPanel - separacion; const H = 420, Hc = 74; // alto del foco y del contexto const mg = {t: 12, r: 12, b: 34, l: 12}; const xc = d3.scaleLinear([a0, a1], [mg.l, W - mg.r]); // escala del contexto (todo el período) const x = d3.scaleLinear([a0, a1], [mg.l, W - mg.r]); // escala del foco (intervalo elegido) const y = d3.scaleLinear().range([H - mg.b, mg.t]); const yc = d3.scaleLinear().range([Hc - 22, 4]); const area = d3.area().curve(d3.curveBasis).x(d => x(d.data.año)).y0(d => y(d[0])).y1(d => y(d[1])); const areaC = d3.area().curve(d3.curveBasis).x(d => xc(d.data.año)).y0(d => yc(d[0])).y1(d => yc(d[1])); const anchoAño = () => x(1) - x(0); // ===== Título y controles ===== const cont = d3.create("div").style("font-family", FUENTE).style("color", TINTA).style("line-height", 1.4); cont.append("div").style("font-size", "22px").style("font-weight", 650) .text(`Propósitos de la ayuda internacional, ${a0}–${a1}`); cont.append("div").style("font-size", "15px").style("color", GRIS).style("margin-top", "4px") .text("Los 10 propósitos con mayor monto total. Elige un intervalo abajo y un país en el globo."); const estiloBoton = (s, fuerte) => s.style("font", `${fuerte ? 600 : 400} 14px ${FUENTE}`).style("padding", "6px 14px") .style("border", "1px solid #C9D1D9").style("border-radius", "8px").style("background", "white").style("cursor", "pointer"); const controles = cont.append("div").style("display", "flex").style("flex-wrap", "wrap").style("align-items", "center") .style("gap", "14px").style("margin", "18px 0 6px").style("font-size", "15px"); const boton = controles.append("button").call(estiloBoton, true) .text("▶ Reproducir").on("click", () => reloj ? pausar() : reproducir()); const textoRango = controles.append("span").style("font-weight", 650); const etiquetaAño = controles.append("span").style("color", GRIS).style("min-width", "70px"); controles.append("button").call(estiloBoton, false).text("Vista completa").on("click", () => moverPincel(a0, a1, true)); const respuesta = cont.append("div").style("font-size", "17px").style("min-height", "26px").style("margin", "6px 0 4px"); // ===== Cuerpo: gráficos | panel ===== const cuerpo = cont.append("div").style("display", "flex").style("flex-wrap", "wrap") .style("gap", `${separacion}px`).style("align-items", "flex-start"); const zonaGraficos = cuerpo.append("div").style("flex", "1 1 auto").style("min-width", "0"); const panel = cuerpo.append("div").style("width", `${angosto ? width : anchoPanel}px`); const zonaPais = panel.append("div"); // ===== Leyenda: barras de participación que se reordenan en vivo ===== const ALTO_ITEM = 40; const tituloLeyenda = panel.append("div").style("font-size", "15px").style("font-weight", 600).style("margin", "18px 0 8px"); const leyenda = panel.append("div").style("position", "relative").style("height", `${top10.length * ALTO_ITEM}px`); const items = leyenda.selectAll("div.item").data(top10).join("div").attr("class", "item") .style("position", "absolute").style("left", "-6px").style("right", "0").style("top", "0") .style("height", `${ALTO_ITEM - 6}px`).style("padding", "3px 6px").style("border-radius", "6px") .style("cursor", "pointer").style("font-size", "14px") .style("transition", "transform .5s ease, background .2s, opacity .2s") .style("transform", (p, i) => `translateY(${i * ALTO_ITEM}px)`) .on("mouseenter", (e, p) => { resaltado = p; aplicarResaltado(); }) .on("mouseleave", () => { resaltado = null; aplicarResaltado(); }) .on("click", (e, p) => { propFijo = propFijo === p ? null : p; aplicarResaltado(); }); items.attr("title", p => etiqueta(p)); const nombreItem = items.append("div").style("display", "flex").style("align-items", "center").style("gap", "8px"); nombreItem.append("span").style("flex", "none").style("width", "11px").style("height", "11px") .style("border-radius", "50%").style("background", p => color(p)); nombreItem.append("span").style("white-space", "nowrap").style("overflow", "hidden").style("text-overflow", "ellipsis") .text(p => etiqueta(p)); const filaBarra = items.append("div").style("display", "flex").style("align-items", "center") .style("gap", "8px").style("margin", "4px 0 0 19px"); const barras = filaBarra.append("div").style("flex", "1").style("height", "7px") .style("background", "#EEF1F4").style("border-radius", "4px").style("overflow", "hidden") .append("div").style("height", "100%").style("width", "0%") .style("border-radius", "4px").style("background", p => color(p)).style("transition", "width .45s ease"); const valores = filaBarra.append("span").style("width", "38px").style("text-align", "right") .style("font-size", "13px").style("color", GRIS).style("font-variant-numeric", "tabular-nums"); // ===== FOCO: streamgraph grande ===== const svg = zonaGraficos.append("svg").attr("width", W).attr("height", H) .style("display", "block").style("font-family", FUENTE); const marco = DOM.uid("marco"), recorte = DOM.uid("recorte"); svg.append("clipPath").attr("id", marco.id).append("rect") .attr("x", mg.l).attr("y", 0).attr("width", W - mg.l - mg.r).attr("height", H); const rectRecorte = svg.append("clipPath").attr("id", recorte.id).append("rect").attr("y", 0).attr("height", H); const gGrilla = svg.append("g").attr("clip-path", marco); const gEje = svg.append("g").attr("transform", `translate(0,${H - mg.b})`); const gZona = svg.append("g").attr("clip-path", marco); const gCapas = gZona.append("g").attr("clip-path", recorte); let capas = gCapas.selectAll("path"); const guia = gZona.append("line").attr("y1", mg.t).attr("y2", H - mg.b).attr("stroke", TINTA) .attr("stroke-width", 1.5).attr("stroke-opacity", 0.6).style("pointer-events", "none"); const gNotas = svg.append("g").style("pointer-events", "none"); const sinDatos = svg.append("text").attr("x", (mg.l + W - mg.r) / 2).attr("y", (H - mg.b) / 2) .attr("text-anchor", "middle").attr("font-size", 34).attr("font-weight", 700).attr("fill", "#AFB8C1") .attr("opacity", 0).style("pointer-events", "none").text("NO DATA"); function dibujarEje() { const [d0, d1] = x.domain(); const paso = d1 - d0 > 20 ? 5 : d1 - d0 > 8 ? 2 : 1; const ticks = d3.range(Math.ceil(d0 / paso) * paso, Math.floor(d1) + 1, paso); gGrilla.selectAll("line").data(ticks).join("line") .attr("x1", d => x(d)).attr("x2", d => x(d)).attr("y1", mg.t).attr("y2", H - mg.b).attr("stroke", "#EDF0F3"); gEje.call(d3.axisBottom(x).tickValues(ticks).tickFormat(d3.format("d")).tickSize(0).tickPadding(10)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll("text").attr("font-size", 13).attr("fill", GRIS)); } // ===== CONTEXTO: streamgraph completo en miniatura con selector de intervalo ===== zonaGraficos.append("div").style("font-size", "13px").style("color", GRIS).style("margin", "10px 0 2px") .text("Período completo: arrastra las manijas para elegir el intervalo"); const svgC = zonaGraficos.append("svg").attr("width", W).attr("height", Hc).style("display", "block"); const gCapasC = svgC.append("g"); svgC.append("g").attr("transform", `translate(0,${Hc - 20})`) .call(d3.axisBottom(xc).tickValues(d3.range(Math.ceil(a0 / 5) * 5, a1 + 1, 5)).tickFormat(d3.format("d")).tickSize(3)) .call(g => g.select(".domain").attr("stroke", "#D0D7DE")) .call(g => g.selectAll("text").attr("font-size", 11).attr("fill", GRIS)) .call(g => g.selectAll(".tick line").attr("stroke", "#AFB8C1")); const pincel = d3.brushX().extent([[mg.l, 2], [W - mg.r, Hc - 20]]) .on("brush end", ev => { if (!ev.sourceEvent) return; // movimientos hechos por código if (!ev.selection) { moverPincel(desde, hasta, false); return; } let [d, h] = ev.selection.map(xc.invert); if (ev.type === "brush") { // zoom en vivo mientras se arrastra if (h - d < 1) return; pausar(); x.domain([d, h]); desde = Math.max(a0, Math.ceil(d - 1e-6)); hasta = Math.min(a1, Math.floor(h + 1e-6)); if (hasta <= desde) hasta = Math.min(a1, desde + 1); textoRango.text(`${desde}–${hasta}`); redibujarFoco(0); mover(hasta, true); } else { // al soltar: ajusta a años enteros d = Math.round(d); h = Math.round(h); if (h <= d) h = Math.min(a1, d + 1); if (h <= d) d = h - 1; moverPincel(d, h, true); } }); const gPincel = svgC.append("g").call(pincel); gPincel.select(".selection").attr("fill", BASE).attr("fill-opacity", 0.15).attr("stroke", BASE).attr("stroke-width", 1.5); gPincel.selectAll(".handle").attr("fill", BASE).attr("fill-opacity", 0.8).attr("rx", 2); // Fija el intervalo, mueve las manijas y hace zoom en el foco function moverPincel(d, h, animar) { pausar(); desde = d; hasta = h; textoRango.text(`${desde}–${hasta}`); gPincel.call(pincel.move, [xc(desde), xc(hasta)]); x.domain([desde, hasta]); redibujarFoco(animar ? 600 : 0); mover(hasta, true); } function redibujarFoco(duracion) { dibujarEje(); const t = svg.transition("zoom").duration(duracion); capas.transition(t).attr("d", area); gNotas.selectAll("*").remove(); } // ===== Resaltado ===== function aplicarResaltado() { const activo = resaltado ?? propFijo; const dom = actual?.dominante[añoActual - a0]?.key; items.style("opacity", p => !activo || p === activo ? 1 : 0.4) .style("background", p => p === propFijo ? "#EEF1F4" : "transparent"); nombreItem.style("font-weight", p => p === dom ? 700 : (p === propFijo ? 600 : 400)); capas.transition("foco").duration(250) .attr("fill-opacity", s => activo ? (s.key === activo ? 0.92 : 0.15) : reloj ? (s.key === dom ? 0.95 : 0.45) : 0.88); } // ===== Anotación automática en los años destacados ===== function anotar(a) { const tipo = actual.notas.get(a); const dom = actual.dominante[a - a0]; if (!tipo || !dom.key) return; const serieTop = d3.max(actual.series, s => s[a - a0][1]); const px = x(a), py = Math.max(mg.t + 40, y(serieTop) - 12); const derecha = px > W * 0.65; const g = gNotas.append("g").attr("transform", `translate(${px},${py})`).attr("opacity", 0); g.append("line").attr("y1", 4).attr("y2", 16).attr("stroke", TINTA).attr("stroke-width", 1.2); const caja = g.append("g").attr("transform", `translate(${derecha ? -8 : 8},-30)`); const fondo = caja.append("rect").attr("rx", 6).attr("fill", "white").attr("stroke", "#D0D7DE"); const texto = caja.append("text").attr("font-size", 13).attr("text-anchor", derecha ? "end" : "start").attr("fill", TINTA); texto.append("tspan").attr("x", 0).attr("dy", "1em").attr("font-weight", 700).text(`${a}: ${tipo}`); texto.append("tspan").attr("x", 0).attr("dy", "1.3em").text(`predomina ${etiqueta(dom.key)}`); const bb = texto.node().getBBox(); fondo.attr("x", bb.x - 8).attr("y", bb.y - 5).attr("width", bb.width + 16).attr("height", bb.height + 10); g.transition().duration(300).attr("opacity", 1) .transition().delay(1800).duration(500).attr("opacity", 0).remove(); } // ===== Textos, barras y orden de la leyenda para el año actual ===== function actualizarAño() { const d = actual.dominante[añoActual - a0]; etiquetaAño.text(reloj ? `año ${añoActual}` : ""); tituloLeyenda.text(`Participación en ${añoActual}`); const part = actual.participacion.get(añoActual); barras.style("width", p => `${(part.get(p) * 100).toFixed(1)}%`); valores.text(p => pct(part.get(p))); const orden = d3.sort(top10, p => -part.get(p), p => top10.indexOf(p)); items.style("transform", p => `translateY(${orden.indexOf(p) * ALTO_ITEM}px)`); respuesta.text(""); respuesta.append("b").text(`${añoActual}: `); if (!d.key) respuesta.append("span").style("color", GRIS).text("sin ayuda en estos propósitos"); else { respuesta.append("span").text("predomina "); respuesta.append("span").style("display", "inline-block").style("width", "12px").style("height", "12px") .style("border-radius", "50%").style("margin", "0 6px 0 2px").style("background", color(d.key)); respuesta.append("b").text(etiqueta(d.key)); respuesta.append("span").style("color", GRIS).text(`, ${pct(d.share)} del año (${fmt(d.monto)})`); } aplicarResaltado(); } // ===== Animación ===== function mover(t, forzar) { tiempo = Math.max(desde, Math.min(hasta, t)); rectRecorte.attr("x", x(desde) - anchoAño() / 2).attr("width", x(tiempo) - x(desde) + anchoAño()); guia.attr("x1", x(tiempo)).attr("x2", x(tiempo)); const entero = Math.floor(tiempo + 1e-9); if (entero !== añoActual || forzar || !reloj) { const cambio = entero !== añoActual; añoActual = entero; actualizarAño(); if (reloj && cambio) anotar(entero); } } function reproducir() { const inicio = tiempo >= hasta ? desde : tiempo; gNotas.selectAll("*").remove(); boton.text("❚❚ Pausa"); reloj = d3.timer(transcurrido => { const t = inicio + transcurrido / MS_POR_AÑO; if (t >= hasta) { mover(hasta); pausar(); return; } mover(t); }); añoActual = Math.floor(inicio); actualizarAño(); anotar(añoActual); } function pausar() { if (reloj) reloj.stop(); reloj = null; boton.text("▶ Reproducir"); etiquetaAño.text(""); aplicarResaltado(); } invalidation.then(pausar); // ===== Cambio de país (transición suave en foco y contexto) ===== function actualizar(duracion) { pausar(); actual = calcular(paisSel); const dom = [d3.min(actual.series, s => d3.min(s, d => d[0])), d3.max(actual.series, s => d3.max(s, d => d[1]))]; if (dom[0] === dom[1]) { dom[0] -= 1; dom[1] += 1; } // país sin datos y.domain(dom); if (!actual.vacio) yc.domain(dom); sinDatos.transition().duration(300).attr("opacity", actual.vacio ? 1 : 0); capas = gCapas.selectAll("path").data(actual.series, s => s.key).join("path") .attr("fill", s => color(s.key)).attr("stroke", "white").attr("stroke-width", 0.6).style("cursor", "pointer") .on("click", (e, s) => { propFijo = propFijo === s.key ? null : s.key; aplicarResaltado(); }) .on("pointermove", (e, s) => { const a = Math.max(a0, Math.min(a1, Math.round(x.invert(d3.pointer(e)[0])))); const v = actual.m.get(a)?.get(s.key) ?? 0; resaltado = s.key; aplicarResaltado(); respuesta.text(""); respuesta.append("b").text(`${a}: `); respuesta.append("b").style("color", color(s.key)).text(etiqueta(s.key)); respuesta.append("span").style("color", GRIS).text(`, ${fmt(v)} (${pct(actual.participacion.get(a).get(s.key))} del año)`); }) .on("pointerleave", () => { resaltado = null; actualizarAño(); }); capas.transition("forma").duration(duracion).attr("d", area); // La miniatura muestra el país elegido; si no tiene datos, conserva la vista anterior if (!actual.vacio) gCapasC.selectAll("path").data(actual.series, s => s.key).join("path") .attr("fill", s => color(s.key)).attr("fill-opacity", 0.75) .transition().duration(duracion).attr("d", areaC); gNotas.selectAll("*").remove(); dibujarPais(); mover(tiempo, true); } // ===== Globo terráqueo para elegir el país ===== const G = angosto ? Math.min(width, 300) : anchoPanel; // tamaño del globo const vals = [...recibido.values()].filter(v => v > 0); const colorGlobo = d3.scaleSequentialLog([d3.min(vals), d3.max(vals)], t => d3.interpolateBlues(0.2 + 0.7 * t)); const proyeccion = d3.geoOrthographic().scale(G / 2 - 6).translate([G / 2, G / 2]).rotate([60, -10]).clipAngle(90); const rutaGlobo = d3.geoPath(proyeccion); const svgG = zonaPais.append("svg").attr("width", G).attr("height", G).style("display", "block").style("cursor", "grab"); svgG.append("path").datum({type: "Sphere"}).attr("class", "esfera").attr("fill", "#F4F7FA").attr("stroke", "#D0D7DE"); svgG.append("path").datum(d3.geoGraticule10()).attr("class", "reticula").attr("fill", "none").attr("stroke", "#E3E8EE"); const paisesGlobo = svgG.append("g").selectAll("path").data(mundo.features).join("path") .attr("fill", f => recibido.has(f.properties.name) ? colorGlobo(recibido.get(f.properties.name)) : "#E2E6EB") .attr("stroke", "white").attr("stroke-width", 0.4).style("cursor", "pointer") .on("click", (e, f) => elegirPais(f)) .on("pointerenter", function() { d3.select(this).attr("stroke", TINTA).attr("stroke-width", 1).raise(); }) .on("pointerleave", function(e, f) { if (f.properties.name !== paisSel) d3.select(this).attr("stroke", "white").attr("stroke-width", 0.4); }); paisesGlobo.append("title") .text(f => `${f.properties.name}: ${recibido.has(f.properties.name) ? fmt(recibido.get(f.properties.name)) : "NO DATA"}`); function dibujarGlobo() { svgG.selectAll("path.esfera, path.reticula").attr("d", rutaGlobo); paisesGlobo.attr("d", rutaGlobo); } // Arrastrar para girar svgG.call(d3.drag() .on("start", () => svgG.style("cursor", "grabbing")) .on("drag", ev => { const [l, p] = proyeccion.rotate(); proyeccion.rotate([l + ev.dx * 0.4, Math.max(-80, Math.min(80, p - ev.dy * 0.4))]); dibujarGlobo(); }) .on("end", () => svgG.style("cursor", "grab"))); // Girar suavemente hasta el país elegido function girarA(f) { const [lon, lat] = d3.geoCentroid(f); const r = d3.interpolate(proyeccion.rotate(), [-lon, -Math.max(-60, Math.min(60, lat))]); svgG.transition("giro").duration(900).tween("rotar", () => t => { proyeccion.rotate(r(t)); dibujarGlobo(); }); } zonaPais.append("div").style("font-size", "12px").style("color", GRIS).style("text-align", "center").style("margin", "4px 0 8px") .text("Arrastra para girar el globo, clic en un país para filtrar"); const infoPais = zonaPais.append("div"); function elegirPais(f) { const nombrePais = f.properties.name; paisSel = paisSel === nombrePais ? null : nombrePais; // segundo clic: vuelve a todos paisesGlobo.attr("stroke", g => g.properties.name === paisSel ? TINTA : "white") .attr("stroke-width", g => g.properties.name === paisSel ? 1.5 : 0.4); paisesGlobo.filter(g => g.properties.name === paisSel).raise(); if (paisSel) girarA(f); actualizar(700); } function dibujarPais() { infoPais.selectAll("*").remove(); if (!paisSel) { infoPais.append("div").style("font-size", "20px").style("font-weight", 650).text("Todos los países"); infoPais.append("div").style("font-size", "15px").style("color", GRIS).style("margin-top", "2px") .text(`${fmt(d3.sum(recibido.values()))} recibidos en total`); return; } const fila0 = infoPais.append("div").style("display", "flex").style("align-items", "center") .style("justify-content", "space-between").style("gap", "8px"); fila0.append("div").style("font-size", "20px").style("font-weight", 650).text(paisSel); fila0.append("button").call(estiloBoton, false).style("padding", "3px 10px").style("font-size", "13px") .text("Todos los países").on("click", () => { paisSel = null; paisesGlobo.attr("stroke", "white").attr("stroke-width", 0.4); actualizar(700); }); if (!recibido.has(paisSel)) { infoPais.append("div").style("font-size", "18px").style("font-weight", 700).style("color", "#8C959F") .style("margin-top", "4px").text("NO DATA"); return; } const principal = d3.greatest(top10, p => recibidoProp.get(p)?.get(paisSel) ?? 0); infoPais.append("div").style("font-size", "15px").style("color", GRIS).style("margin-top", "2px") .text(`${fmt(recibido.get(paisSel))} recibidos en total`); const fila = infoPais.append("div").style("font-size", "15px").style("color", GRIS).style("margin-top", "2px") .style("display", "flex").style("align-items", "center").style("gap", "8px"); fila.append("span").style("width", "12px").style("height", "12px").style("border-radius", "50%") .style("background", color(principal)); fila.append("span").text("Mayor propósito:"); fila.append("b").style("color", TINTA).text(etiqueta(principal)); } // ===== Inicio ===== dibujarGlobo(); dibujarEje(); actualizar(0); moverPincel(a0, a1, false); return cont.node(); }4d:T575,### Recuerda Las preguntas anteriores son una herramienta muy útil para que puedas verificar si estás produciendo una buena solución o no. A medida que trabajes en la resolución de este ejercicio, puedes usar las preguntas anteriores como una herramienta de evaluación de dos formas principales: 1. Verifica que realmente puedas responder las preguntas con tu visualización. Si no puedes responder completamente las preguntas, eso significa que tu solución tiene algunos problemas. 2. Compara múltiples soluciones para el mismo problema y pregúntate: “¿Cuál de ellas me facilita más responder estas preguntas?”, donde "facilita" puede significar: con mayor precisión, con menos esfuerzo o más rápidamente. ### Remember The previous questions are a very useful tool to help you verify whether you are producing a good solution or not. As you work on solving this exercise, you can use those questions as an evaluation tool in two main ways: 1. Check that you can actually answer the questions with your visualization. If you cannot fully answer the questions, it means your solution has some issues. 2. Compare multiple solutions for the same problem and ask yourself: “Which one makes it easier for me to answer these questions?” — where *“easier”* can mean: with greater accuracy, less effort, or more quickly. 4e:T458,## Instrucciones - Tus soluciones programadas deben utilizar D3. No se permite el uso de otras librerías de visualización. - Puedes procesar y transformar los datos de la manera que consideres relevante, y usar cualquier herramienta que prefieras para el procesamiento de datos. La transformación de los datos no tiene que hacerse necesariamente en JavaScript ni dentro de Observable. Está bien preprocesar los datos y luego cargarlos en Observable si así lo prefieres. - Puedes usar el notebook [Color Legend](/@d3/color-legend) de Mike Bostock para crear tus leyendas. ## Instructions - Your programmed solutions must use **D3**. The use of other visualization libraries is not allowed. - You may process and transform the data in any way you find relevant, and use any tool you prefer for data processing. The data transformation does not necessarily need to be done in JavaScript or within Observable. It is acceptable to preprocess the data and then load it into Observable if you prefer. - You may use Mike Bostock’s [Color Legend](/@d3/color-legend) notebook to create your legends. 4f:[] 47:{"id":"593eeaddffd643d7","slug":null,"title":"Time Data Visualization and Geo","thumbnail":"87c4d5d2f536585782a7d8308a0c25badff863287ed4e0f33dfa11fdf1b6c326","access_level":"public","create_time":"$D2026-10-13T15:09:36.266Z","update_time":"$D2026-10-20T16:15:21.268Z","view_time":null,"first_public_time":"$D2026-10-20T14:59:52.026Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"e6ea96dec060bb93","login":"paolo-medrano-teran","name":"Paolo Medrano Teran","avatar_url":"https://avatars-next.observableusercontent.com/eb0b5d0ba41bf5824a2433acb9e01319ce3f321b6f495552de86b76588f37137","tier":"starter_2024","bio":"","following":false},"version":203,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"7e2328f2ad99ffed","login":"paolo-medrano-teran","name":"Paolo Medrano Teran","avatar_url":"https://avatars-next.observableusercontent.com/eb0b5d0ba41bf5824a2433acb9e01319ce3f321b6f495552de86b76588f37137","tier":null,"bio":"","following":false}],"members":[{"type":"team","id":"e6ea96dec060bb93","login":"paolo-medrano-teran","name":"Paolo Medrano Teran","avatar_url":"https://avatars-next.observableusercontent.com/eb0b5d0ba41bf5824a2433acb9e01319ce3f321b6f495552de86b76588f37137","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":"Time Data Visualization and Geo","cells":[{"id":0,"value":"# Time Data Visualization and Geo","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"$49","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":41,"value":"Inputs.table(aiddata)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"aiddata = {\n const data = await d3.csv(googleSheetCsvUrl, row => ({\n yearDate: d3.timeParse('%Y')(row.year),\n yearInt: +row.year,\n donor: row.donor,\n recipient: row.recipient,\n amount: +row.commitment_amount_usd_constant,\n purpose: row.coalesced_purpose_name,\n }));\n \n data.columns = Object.keys(data[0]);\n \n return data;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"$4a","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":22,"value":"import {legend, swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"world = d3.json(\"https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"mundo = ({type: \"FeatureCollection\", features: world.features.filter(f => f.properties.name !== \"Antarctica\")})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"alias = new Map([\n [\"United States\", \"USA\"],\n [\"Korea\", \"South Korea\"],\n [\"Slovak Republic\", \"Slovakia\"],\n [\"United Kingdom\", \"England\"]\n])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"nombre = p => alias.get(p) ?? p","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"flujos = {\n const m = d3.rollup(\n aiddata.filter(d => d.donor !== d.recipient).flatMap(d => [\n {pais: d.donor, año: d.yearInt, don: d.amount, rec: 0},\n {pais: d.recipient, año: d.yearInt, don: 0, rec: d.amount}\n ]),\n v => ({donado: d3.sum(v, d => d.don), recibido: d3.sum(v, d => d.rec)}),\n d => d.pais, d => d.año\n );\n return [...m].flatMap(([pais, ma]) => [...ma].map(([año, v]) => ({pais, año, ...v})));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"Array.from(new Set(flujos.map(d => d.pais)))\n .map(nombre)\n .filter(n => !mundo.features.some(f => f.properties.name === n))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"periodos = {\n const [a, b] = d3.extent(aiddata, d => d.yearInt);\n const p = d3.range(a, b + 1, 10).map(s => [s, Math.min(s + 9, b)]);\n if (p.length > 1 && p.at(-1)[1] - p.at(-1)[0] < 4) p.at(-2)[1] = p.pop()[1];\n return p;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"colorRol = d3.scaleDiverging([-1, 0, 1], d3.interpolateRdBu)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"indicePeriodo = periodos.map(([a, b]) => d3.rollup(\n flujos.filter(d => d.año >= a && d.año <= b),\n v => {\n const don = d3.sum(v, d => d.donado), rec = d3.sum(v, d => d.recibido);\n return {indice: (rec - don) / (rec + don), donado: don, recibido: rec};\n },\n d => nombre(d.pais)\n))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"nombreDataset = new Map(flujos.map(d => [nombre(d.pais), d.pais]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"fmt = d => {\n if (d >= 1e9) return `$${(d / 1e9).toFixed(1)}B`;\n if (d >= 1e6) return `$${(d / 1e6).toFixed(0)}M`;\n if (d >= 1e3) return `$${(d / 1e3).toFixed(0)}K`;\n return `$${d3.format(\",.0f\")(d)}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"Justificación :\nUsé cuatro mapas coropléticos, uno por década, para comparar los períodos. El color representa un índice normalizado, (recibido − donado) / (recibido + donado), para que los países grandes no dominen la escala. La escala es divergente (rojo donante, blanco equilibrio, azul receptor). Al seleccionar un país, se resalta en los cuatro mapas y abajo aparece su silueta con los montos de la década y un gráfico de líneas año a año. Uso líneas porque son mejores que un mapa para leer tendencias y valores exactos, y marco los picos y caídas más bruscos. Así, los mapas responden b y c, y el detalle responde a y d.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":125,"value":"sinUnspec = aiddata.filter(d => d.purpose && !/unspecified|not specified/i.test(d.purpose))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"top10 = d3.sort(\n d3.rollups(sinUnspec, v => d3.sum(v, d => d.amount), d => d.purpose),\n d => -d[1]\n ).slice(0, 10).map(d => d[0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"colorProp = d3.scaleOrdinal(top10, d3.schemeTableau10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"recibidoPais = d3.rollup(aiddata, v => d3.sum(v, d => d.amount), d => nombre(d.recipient))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"Justificación 2:\nUsé un streamgraph porque la pregunta es de composición en el tiempo: el grosor de cada banda muestra cuánto pesó cada propósito en cada año y permite ver cuál dominó en cada período. La leyenda es vertical, ordenada de mayor a menor monto, y resalta el propósito al pasar el cursor, lo que facilita seguir una banda. Como el streamgraph no tiene eje de montos, el valor exacto aparece al pasar el cursor. No usé un mapa porque la pregunta es temporal; en su lugar, un filtro por país muestra sus propósitos y su silueta como contexto. Usé colores categóricos porque los propósitos no tienen orden, una grilla tenue cada 5 años y texto apropiado","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":26,"value":"$4d","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":29,"value":"$4e","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":31,"value":"## Considera lo siguiente para la calificación:\n\n- ¿La información extraída responde a las preguntas planteadas en el ejercicio (de manera eficiente)?\n- ¿La visualización responde a las preguntas planteadas en el ejercicio (de manera eficiente)?\n- ¿La representación visual es clara? ¿Tiene una buena estética?\n - Revisa el notebook sobre clarity como referencia.\n\n\n\n## Consider the following for grading:\n\n- Does the extracted information answer the questions posed in the exercise (efficiently)? \n- Does the visualization answer the questions posed in the exercise (efficiently)? \n- Is the visual representation clear? Does it have good aesthetics? \n - Review the notebook on *clarity* as a reference.\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"## Apéndice","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"d3 = require('d3@7')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"googleSheetCsvUrl = 'https://docs.google.com/spreadsheets/d/1YiuHdfZv_JZ-igOemKJMRaU8dkucfmHxOP6Od3FraW8/gviz/tq?tqx=out:csv'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4f","stdlib":"1"}} 48:"$47:body"