2c:null 2d:["$","title",null,{"children":"Time Data Visualization and Geo | Gianella Lira | Observable"}] 32: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 33: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. 34: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. 35: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. 36:Tf31, prepared = { // Estandarización de nombres entre AidData y el mapa. const aliases = { "united states of america": "united states", "usa": "united states", "uk": "united kingdom", "russian federation": "russia", "viet nam": "vietnam", "lao pdr": "laos", "lao people's democratic republic": "laos", "dem. rep. congo": "democratic republic of the congo", "congo, dem. rep.": "democratic republic of the congo", "congo (kinshasa)": "democratic republic of the congo", "dr congo": "democratic republic of the congo", "democratic republic of congo": "democratic republic of the congo", "congo, rep.": "republic of the congo", "congo (brazzaville)": "republic of the congo", "republic of congo": "republic of the congo", "cote d'ivoire": "ivory coast", "côte d'ivoire": "ivory coast", "ivory coast": "ivory coast", "korea": "south korea", "korea, rep.": "south korea", "republic of korea": "south korea", "korea, dem. people's rep.": "north korea", "dpr korea": "north korea", "syrian arab republic": "syria", "iran, islamic rep.": "iran", "iran (islamic republic of)": "iran", "egypt, arab rep.": "egypt", "yemen, rep.": "yemen", "tanzania, united republic of": "tanzania", "united republic of tanzania": "tanzania", "slovak republic": "slovakia", "kyrgyz republic": "kyrgyzstan", "myanmar (burma)": "myanmar", "burma": "myanmar", "turkiye": "turkey", "czech republic": "czechia", "the gambia": "gambia", "the bahamas": "bahamas", "eswatini": "swaziland", "macedonia": "north macedonia", "palestine": "west bank and gaza", "west bank": "west bank and gaza", "kosovo": "kosovo" }; const normalize = value => { const name = String(value ?? "") .trim().toLowerCase() .normalize("NFD") .replace(/[\u0300-\u036f]/g, "") .replace(/\s+/g, " "); return aliases[name] ?? name; }; const rows = aiddata .map(d => ({ year: +d.yearInt, donor: normalize(d.donor), recipient: normalize(d.recipient), amount: +d.amount })) .filter(d => Number.isInteger(d.year) && Number.isFinite(d.amount) && d.amount > 0 && d.donor && d.recipient ); const years = [...new Set(rows.map(d => d.year))] .sort((a, b) => a - b); // Map> const byCountry = new Map(); function add(country, year, field, amount) { if (!byCountry.has(country)) { byCountry.set(country, new Map()); } const yearly = byCountry.get(country); if (!yearly.has(year)) { yearly.set(year, { year, donated: 0, received: 0 }); } yearly.get(year)[field] += amount; } for (const d of rows) { add(d.donor, d.year, "donated", d.amount); add(d.recipient, d.year, "received", d.amount); } const countries = [...byCountry.keys()].sort(); // Series completas: incluyen años sin transacciones. const series = new Map( countries.map(country => [ country, years.map(year => byCountry.get(country).get(year) ?? { year, donated: 0, received: 0 } ) ]) ); // Umbrales globales fijos para clasificar los dos montos. const totals = countries.map(country => { const values = series.get(country); return { country, donated: d3.sum(values, d => d.donated), received: d3.sum(values, d => d.received) }; }); const positive = totals.flatMap(d => [d.donated, d.received].filter(v => v > 0) ).sort(d3.ascending); const thresholds = [ d3.quantile(positive, 1 / 3), d3.quantile(positive, 2 / 3) ]; return { years, countries, series, totals, thresholds, normalize, rowCount: rows.length }; } 37:T4a79,viz1 = { const topojson = await require("topojson-client@3"); // La capa base 110m ya funcionaba correctamente en tu mapa. // Incorporamos únicamente Mónaco y Liechtenstein desde 10m. const [world110, world10] = await Promise.all([ d3.json("https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json"), d3.json("https://cdn.jsdelivr.net/npm/world-atlas@2/countries-10m.json") ]); const baseFeatures = topojson.feature( world110, world110.objects.countries ).features; const detailedFeatures = topojson.feature( world10, world10.objects.countries ).features; const smallCountryNames = new Set(["monaco", "liechtenstein"]); const additionalFeatures = detailedFeatures.filter(f => smallCountryNames.has( prepared.normalize(f.properties?.name ?? "") ) ); const features = [...baseFeatures, ...additionalFeatures]; const W = Math.min(width, 1000); const mapH = Math.round(W * 0.51); const margin = 15; const years = prepared.years; const minYear = d3.min(years); const maxYear = d3.max(years); let startYear = minYear; let endYear = maxYear; let currentRegion = "Mundo"; const root = document.createElement("div"); root.style.cssText = ` position:relative; width:100%; max-width:1000px; font-family:Inter,system-ui,sans-serif; color:#253449; background:#fff; `; const style = document.createElement("style"); style.textContent = ` .aid-title {font-size:23px;font-weight:750;margin:0 0 5px} .aid-sub {font-size:12px;color:#64748b;margin:0 0 20px} .aid-label {font-size:12px;font-weight:650;margin-bottom:9px} .aid-role-label {font-size:11px;color:#64748b} .aid-range {width:100%;accent-color:#536d99;cursor:pointer} .aid-tooltip { position:absolute; z-index:20; width:365px; max-width:calc(100% - 20px); padding:15px; background:white; border:1px solid #dce3eb; border-radius:12px; box-shadow:0 8px 30px #16263b25; pointer-events:none; display:none; } `; root.appendChild(style); function element(tag, parent, className, content) { const el = document.createElement(tag); if (className) el.className = className; if (content !== undefined) el.textContent = content; parent.appendChild(el); return el; } element("h2", root, "aid-title", "Flujos internacionales de ayuda financiera"); element("p", root, "aid-sub", "Donaciones y recepciones por país · Explora los cambios a lo largo del tiempo"); // ====================================================== // 1. BARRA SUPERIOR: DISTRIBUCIÓN DE ROLES // ====================================================== const roleColors = { donor: "#377eb8", recipient: "#e58b66" }; // Indicadores neutros, sin color propio const indicators = element("div", root); indicators.style.cssText = ` display:flex;gap:32px;flex-wrap:wrap;margin-bottom:16px; `; const kpi = {}; for (const [key, label] of [ ["donor", "Solo donantes"], ["recipient", "Solo receptores"], ["both", "Donan y reciben"], ]) { const item = element("div", indicators); kpi[key] = element("div", item); kpi[key].style.cssText = "font-size:26px;font-weight:750;line-height:1;color:#253449"; const caption = element("div", item, "aid-role-label", label); caption.style.marginTop = "4px"; } // ====================================================== // 2. COLORES BIVARIADOS // ====================================================== // Filas: donación baja -> alta. // Columnas: recepción baja -> alta. const colors = [ ["#ece0f0", "#ace4e4", "#5ac8c8"], ["#dfb0d6", "#a5add3", "#5698b9"], ["#be64ac", "#8c62aa", "#3b4994"] ]; const thresholds = prepared.thresholds; function category(value) { if (value <= thresholds[0]) return 0; if (value <= thresholds[1]) return 1; return 2; } function countryColor(d) { if (!d || (d.donated === 0 && d.received === 0)) { return `url(#${hatchId})`; } return colors[category(d.donated)][category(d.received)]; } // ====================================================== // 3. MAPA COROPLÉTICO // ====================================================== const mapHolder = element("div", root); mapHolder.style.position = "relative"; const svg = d3.select(mapHolder) .append("svg") .attr("viewBox", `0 0 ${W} ${mapH}`) .attr("width", "100%") .style("display", "block") .style("background", "#f8fbfd") .style("border-radius", "10px"); const projection = d3.geoNaturalEarth1() .fitExtent( [[margin, margin], [W - margin, mapH - margin]], {type:"Sphere"} ); const path = d3.geoPath(projection); // Patrón blanco con líneas cruzadas para países sin flujo. const hatchId = `aid-hatch-${Math.random().toString(36).slice(2)}`; const defs = svg.append("defs"); const hatch = defs.append("pattern") .attr("id", hatchId) .attr("patternUnits", "userSpaceOnUse") .attr("width", 8).attr("height", 8); hatch.append("rect") .attr("width", 8).attr("height", 8).attr("fill", "#fff"); hatch.append("path") .attr("d", "M-1,1 l2,-2 M0,8 l8,-8 M7,9 l2,-2") .attr("stroke", "#cfd6df") .attr("stroke-width", 0.6); const mapClip = `aid-clip-${Math.random().toString(36).slice(2)}`; defs.append("clipPath").attr("id", mapClip).append("rect") .attr("width", W).attr("height", mapH); svg.append("path") .datum({type:"Sphere"}) .attr("d", path) .attr("fill", "#f6fafc") .attr("stroke", "#c8d6e1") .attr("stroke-width", 0.8); // Zoom geográfico mediante transformación del mismo mapa. const mapViewport = svg.append("g") .attr("clip-path", `url(#${mapClip})`); const mapLayer = mapViewport.append("g"); const graticule = d3.geoGraticule10(); mapLayer.append("path") .datum(graticule) .attr("d", path) .attr("fill", "none") .attr("stroke", "#dbe5ed") .attr("stroke-width", 0.45); function geoName(feature) { return prepared.normalize( feature.properties?.name ?? "" ); } const countriesLayer = mapLayer.append("g"); const countryPaths = countriesLayer .selectAll("path") .data(features) .join("path") .attr("d", path) .attr("fill", `url(#${hatchId})`) .attr("stroke", "#ffffff") .attr("stroke-width", 0.55) .style("cursor", "pointer"); // Puntos identificables para países diminutos (visibles en Europa). const smallFeatures = features.filter(f => smallCountryNames.has(geoName(f))); const markers = mapLayer.append("g").selectAll("circle") .data(smallFeatures).join("circle") .attr("cx", d => projection(d3.geoCentroid(d))?.[0]) .attr("cy", d => projection(d3.geoCentroid(d))?.[1]) .attr("r", 0) .attr("fill", "#fff") .attr("stroke", "#192b48") .attr("stroke-width", 0.8) .style("cursor", "pointer"); const regions = { "Mundo": {center:[0,0], zoom:1}, "América": {center:[-80,5], zoom:1.75}, "Europa": {center:[15,51], zoom:4.3}, "Asia": {center:[95,32], zoom:1.9}, "África": {center:[19,2], zoom:2.25}, "Oceanía": {center:[144,-22], zoom:2.8} }; function updateRegion() { const {center, zoom} = regions[currentRegion]; const pt = currentRegion === "Mundo" ? [W/2,mapH/2] : projection(center); const tx = W/2 - zoom*pt[0]; const ty = mapH/2 - zoom*pt[1]; mapLayer.transition().duration(550) .attr("transform", `translate(${tx},${ty}) scale(${zoom})`); markers .style("display", currentRegion === "Europa" ? null : "none") .attr("r", 5.5/zoom) .attr("stroke-width", 1.4/zoom); countryPaths.attr("stroke-width", Math.min(0.55, 1/zoom)); } // ====================================================== // 4. TOOLTIP + DIVERGING AREA CHART // ====================================================== const tooltip = element("div", mapHolder, "aid-tooltip"); const tooltipName = element("div", tooltip); tooltipName.style.cssText = ` font-size:16px;font-weight:750;margin-bottom:3px; `; const tooltipInfo = element("div", tooltip); tooltipInfo.style.cssText = ` font-size:11px;color:#64748b;margin-bottom:9px; `; const chartSvg = d3.select(tooltip) .append("svg") .attr("viewBox", "0 0 335 205") .attr("width", "100%"); const fmt = d3.format(".3s"); // Dibuja la serie COMPLETA, independientemente del slider. function drawTimeline(country) { const series = prepared.series.get(country); if (!series) return; const totalD = d3.sum(series, d => d.donated); const totalR = d3.sum(series, d => d.received); tooltipName.textContent = country .replace(/\b\w/g, s => s.toUpperCase()); tooltipInfo.textContent = `Donado: US$ ${fmt(totalD)} · Recibido: US$ ${fmt(totalR)}`; chartSvg.selectAll("*").remove(); const cw = 335, ch = 205; const m = {top:14,right:14,bottom:29,left:49}; const x = d3.scaleLinear() .domain([minYear, maxYear]) .range([m.left, cw - m.right]); const peak = d3.max(series, d => Math.max(d.donated, d.received)) || 1; const y = d3.scaleLinear() .domain([-peak, peak]) .range([ch - m.bottom, m.top]); const chart = chartSvg.append("g"); // Recepción: área negativa (debajo de cero). const receivedArea = d3.area() .defined(d => Number.isFinite(d.received)) .x(d => x(d.year)) .y0(y(0)) .y1(d => y(-d.received)) .curve(d3.curveLinear); // Donación: área positiva (encima de cero). const donatedArea = d3.area() .defined(d => Number.isFinite(d.donated)) .x(d => x(d.year)) .y0(y(0)) .y1(d => y(d.donated)) .curve(d3.curveLinear); chart.append("path") .datum(series) .attr("d", donatedArea) .attr("fill", roleColors.donor) .attr("fill-opacity", 0.64); chart.append("path") .datum(series) .attr("d", receivedArea) .attr("fill", roleColors.recipient) .attr("fill-opacity", 0.64); chart.append("line") .attr("x1", m.left) .attr("x2", cw - m.right) .attr("y1", y(0)) .attr("y2", y(0)) .attr("stroke", "#334155") .attr("stroke-width", 1); const xAxis = d3.axisBottom(x) .ticks(5) .tickFormat(d3.format("d")) .tickSizeOuter(0); const yAxis = d3.axisLeft(y) .ticks(5) .tickFormat(d => fmt(Math.abs(d))) .tickSizeOuter(0); chart.append("g") .attr("transform", `translate(0,${ch-m.bottom})`) .call(xAxis); chart.append("g") .attr("transform", `translate(${m.left},0)`) .call(yAxis); chart.selectAll(".domain").attr("stroke", "#cbd5e1"); chart.selectAll(".tick line").attr("stroke", "#e2e8f0"); chart.selectAll(".tick text") .attr("fill", "#64748b") .attr("font-size", 10); // Pequeña leyenda dentro del gráfico. const legend = chartSvg.append("g") .attr("transform", `translate(${m.left},3)`); [ ["Donaciones", roleColors.donor, 0], ["Recepciones", roleColors.recipient, 110] ].forEach(([label,color,offset]) => { legend.append("rect") .attr("x", offset).attr("y", 0) .attr("width", 9).attr("height", 9) .attr("fill", color); legend.append("text") .attr("x", offset + 13) .attr("y", 8) .attr("font-size", 10) .attr("fill", "#475569") .text(label); }); } function positionTooltip(event) { const rect = mapHolder.getBoundingClientRect(); const boxWidth = Math.min(365, rect.width - 20); let left = event.clientX - rect.left + 14; let top = event.clientY - rect.top - 55; left = Math.max(10, Math.min( left, rect.width - boxWidth - 10 )); // Mantener dentro del área aproximada del mapa. top = Math.max(10, Math.min( top, rect.height - 255 )); tooltip.style.left = `${left}px`; tooltip.style.top = `${top}px`; } for (const nodes of [countryPaths, markers]) { nodes.on("mouseenter", function(event, feature) { const country = geoName(feature); if (!prepared.series.has(country)) return; d3.select(this) .raise() .attr("stroke", "#26364c") .attr("stroke-width", 1.6); drawTimeline(country); tooltip.style.display = "block"; positionTooltip(event); }) .on("mousemove", function(event, feature) { if (prepared.series.has(geoName(feature))) { positionTooltip(event); } }) .on("mouseleave", function() { d3.select(this) .attr("stroke", this.tagName.toLowerCase() === "circle" ? "#192b48" : "#fff") .attr("stroke-width", this.tagName.toLowerCase() === "circle" ? 1.4 / regions[currentRegion].zoom : 0.55); tooltip.style.display = "none"; }); } // ====================================================== // 5. LEYENDA BIVARIADA // ====================================================== const legendHolder = element("div", root); legendHolder.style.cssText = ` display:flex;justify-content:center; margin:16px 0 24px; `; const legendSvg = d3.select(legendHolder) .append("svg") .attr("width", 250) .attr("height", 155); const cell = 29; const lx = 85, ly = 12; for (let donor = 0; donor < 3; donor++) { for (let recipient = 0; recipient < 3; recipient++) { legendSvg.append("rect") .attr("x", lx + recipient * cell) .attr("y", ly + (2 - donor) * cell) .attr("width", cell - 1) .attr("height", cell - 1) .attr("fill", colors[donor][recipient]); } } legendSvg.append("text") .attr("x", 128).attr("y", 114) .attr("font-size", 11) .attr("text-anchor", "middle") .text("Monto recibido →"); legendSvg.append("text") .attr("transform", "translate(61,58) rotate(-90)") .attr("font-size", 11) .attr("text-anchor", "middle") .text("Monto donado →"); legendSvg.append("text") .attr("x", 84).attr("y", 131) .attr("font-size", 9) .attr("fill", "#64748b") .text("Bajo"); legendSvg.append("text") .attr("x", 166).attr("y", 131) .attr("font-size", 9) .attr("fill", "#64748b") .text("Alto"); const noData = element("div", legendHolder); noData.style.cssText = ` display:flex;align-items:center;gap:6px; align-self:center;margin-left:12px;font-size:10px; color:#64748b; `; const noDataSwatch = element("span", noData); noDataSwatch.style.cssText = ` display:inline-block;width:12px;height:12px; background-color:#ffffff; background-image:repeating-linear-gradient(45deg,transparent 0px,transparent 4px,#cfd6df 4px,#cfd6df 5px); border:1px solid #cfd6df; `; element("span", noData, null, "Sin flujos registrados"); // ====================================================== // 6. FILTROS DE REGIÓN Y DÉCADA // ====================================================== const controls = element("div", root); controls.style.cssText = ` padding:15px 18px;background:#f7f9fc; border:1px solid #e2e8f0;border-radius:10px;margin-bottom:12px; `; element("div", controls, "aid-label", "Exploración por región y década"); const regionRow = element("div", controls); regionRow.style.cssText = "display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px"; element("span", regionRow, "aid-role-label", "Continente:"); const regionSelect = element("select", regionRow); regionSelect.style.cssText = "padding:7px 12px;border:1px solid #cbd5e1;border-radius:8px;background:white;color:#253449"; Object.keys(regions).forEach(r => { const opt = element("option", regionSelect, null, r); opt.value = r; }); regionSelect.value = currentRegion; regionSelect.addEventListener("change", () => { currentRegion = regionSelect.value; updateRegion(); }); const selectedYears = element("div", controls); selectedYears.style.cssText = "font-size:17px;font-weight:700;margin:0 0 10px;color:#354e76"; const decadeRow = element("div", controls); decadeRow.style.cssText = "display:flex;gap:7px;flex-wrap:wrap"; const decades = [ {label:"Todo", start:minYear, end:maxYear}, {label:"1970s", start:1970, end:1979}, {label:"1980s", start:1980, end:1989}, {label:"1990s", start:1990, end:1999}, {label:"2000s", start:2000, end:2009}, {label:"2010s", start:2010, end:2019} ].map(d => ({...d, start:Math.max(minYear,d.start), end:Math.min(maxYear,d.end)})) .filter(d => d.start <= d.end); const decadeButtons = []; function renderDecadeButtons(active) { decadeButtons.forEach(({button,period}) => { const chosen = active === period.label; button.style.background = chosen ? "#354e76" : "white"; button.style.color = chosen ? "white" : "#354e76"; button.style.borderColor = chosen ? "#354e76" : "#cbd5e1"; }); } for (const period of decades) { const button = element("button", decadeRow, null, period.label); button.type = "button"; button.style.cssText = "padding:7px 11px;border:1px solid;border-radius:7px;cursor:pointer;font:inherit;font-size:12px"; decadeButtons.push({button,period}); button.addEventListener("click", () => { startYear = period.start; endYear = period.end; renderDecadeButtons(period.label); update(); }); } renderDecadeButtons("Todo"); element("div", controls, "aid-role-label", "1970s y 2010s abarcan solo los años disponibles (1973–1979 y 2010–2013).") .style.marginTop = "10px"; // ====================================================== // 7. ACTUALIZACIÓN COORDINADA // ====================================================== function update() { selectedYears.textContent = `${startYear} — ${endYear}`; // Agregación de todos los países en el intervalo. const aggregated = new Map(); for (const country of prepared.countries) { const values = prepared.series.get(country) .filter(d => d.year >= startYear && d.year <= endYear ); aggregated.set(country, { donated: d3.sum(values, d => d.donated), received: d3.sum(values, d => d.received) }); } // Actualizar mapa. countryPaths .transition() .duration(220) .attr("fill", feature => countryColor(aggregated.get(geoName(feature))) ); // Categorías mutuamente excluyentes. let onlyDonors = 0, onlyRecipients = 0, both = 0, none = 0; for (const d of aggregated.values()) { if (d.donated > 0 && d.received > 0) both++; else if (d.donated > 0) onlyDonors++; else if (d.received > 0) onlyRecipients++; } kpi.donor.textContent = onlyDonors; kpi.recipient.textContent = onlyRecipients; kpi.both.textContent = both; } // Mostrar inicialmente el período completo. update(); updateRegion(); return root; }38:[{"id":"5b100b1cfcd41107f887cf33e48a17952b18ed54ce515f6235923a73974408ff9481b5f561cf6a8946d0563c8bc7fdac66f1ddf953fa03d087487ec31ce67d4a","href":"https://static.observableusercontent.com/files/5b100b1cfcd41107f887cf33e48a17952b18ed54ce515f6235923a73974408ff9481b5f561cf6a8946d0563c8bc7fdac66f1ddf953fa03d087487ec31ce67d4a","name":"image.png","type":"image/png","lastModified":1791746753845,"size":160622}] 30:{"id":"54282e587da2141f","slug":"time-data-visualization-and-geo","title":"Time Data Visualization and Geo","thumbnail":"87c4d5d2f536585782a7d8308a0c25badff863287ed4e0f33dfa11fdf1b6c326","access_level":"public","create_time":"$D2026-10-11T18:11:22.228Z","update_time":"$D2026-10-11T20:38:57.122Z","view_time":null,"first_public_time":"$D2026-10-11T20:41:27.188Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"0f885b4fa1260d1a","login":"gianella-lira","name":"Gianella Lira ","avatar_url":"https://avatars-next.observableusercontent.com/0c0647d4c025669bc8eca30f38f053b08eb219951cc763b6f362c6756fc0e971","tier":"starter_2024","bio":""},"version":143,"publish_version":143,"role":null,"authored":false,"authors":[{"type":"individual","id":"cabb9e4a9f0a6298","login":"gianella-lira-naupari","name":"Gianella Lira ","avatar_url":"https://avatars-next.observableusercontent.com/0c0647d4c025669bc8eca30f38f053b08eb219951cc763b6f362c6756fc0e971","tier":null,"bio":""}],"members":[{"type":"team","id":"0f885b4fa1260d1a","login":"gianella-lira","name":"Gianella Lira ","avatar_url":"https://avatars-next.observableusercontent.com/0c0647d4c025669bc8eca30f38f053b08eb219951cc763b6f362c6756fc0e971","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":"$32","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":42,"value":"stats = {\n // Sets con los valores únicos\n const donors = new Set(aiddata.map(d => d.donor));\n const recipients = new Set(aiddata.map(d => d.recipient));\n\n // Intersección (países que son tanto donantes como receptores)\n const intersection = new Set([...donors].filter(country => recipients.has(country)));\n\n return {\n uniqueDonorsCount: donors.size,\n uniqueRecipientsCount: recipients.size,\n intersectionCount: intersection.size,\n donors: Array.from(donors),\n recipients: Array.from(recipients),\n intersection: Array.from(intersection)\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":22,"value":"//your code","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":29,"value":"$35","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"},{"id":49,"value":"# Visualización 1","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"{\n const topojson = await require(\"topojson-client@3\");\n\n const world = await d3.json(\n\"https://cdn.jsdelivr.net/npm/world-atlas@2/countries-10m.json\" );\n\n const features = topojson.feature(\n world,\n world.objects.countries\n ).features;\n\n const mapCountries = new Set(\n features.map(d =>\n prepared.normalize(d.properties?.name)\n )\n );\n\n const matched = prepared.countries.filter(\n country => mapCountries.has(country)\n );\n\n const unmatched = prepared.countries.filter(\n country => !mapCountries.has(country)\n );\n\n return {\n totalAidData: prepared.countries.length,\n paisesReconocidos: matched.length,\n paisesNoReconocidos: unmatched.length,\n nombresNoReconocidos: unmatched\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1"}} 31:"$30:body"