41:null 42:["$","title",null,{"children":"Time Data Visualization and Geo | UTEC | Observable"}] 48: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 49: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. 4a: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. 4b: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. 4c:Tb34c,{ // ============================================================ // VISUALIZACIÓN 1 — AID FLOWS // // Modos: // 1. Donado -> Top 15 por monto donado // 2. Recibido -> Top 15 por monto recibido // 3. Δ Balance -> Top 15 por cambio de balance vs año anterior // 4. Cambio rol -> Donante <-> Receptor vs año anterior // // Click en país -> popup histórico con area chart divergente // ============================================================ const data = aiddata; // ============================================================ // CONFIGURACIÓN // ============================================================ const TOP_N = 15; const ROLE_THRESHOLD = 0.20; const width = 1000; const margin = { top: 105, right: 190, bottom: 85, left: 155 }; const rowHeight = 34; const chartHeight = TOP_N * rowHeight; const height = margin.top + chartHeight + margin.bottom; const donatedColor = "#E67E22"; const receivedColor = "#2E86C1"; const positiveColor = "#198754"; const negativeColor = "#C0392B"; const neutralColor = "#666"; // ============================================================ // AÑOS // ============================================================ const years = Array.from( new Set( data .map(d => +d.yearInt) .filter(Number.isFinite) ) ).sort((a, b) => a - b); let selectedYearIndex = Math.max(1, years.length - 1); let selectedYear = years[selectedYearIndex]; let sortMode = "donated"; // ============================================================ // AGREGACIÓN // year -> country -> { donated, received } // ============================================================ const yearly = new Map(); function getRecord(year, country) { if (!yearly.has(year)) { yearly.set(year, new Map()); } const yearMap = yearly.get(year); if (!yearMap.has(country)) { yearMap.set(country, { country, donated: 0, received: 0 }); } return yearMap.get(country); } for (const d of data) { const year = +d.yearInt; const amount = +d.amount || 0; if ( !Number.isFinite(year) || !Number.isFinite(amount) ) { continue; } if (d.donor) { getRecord(year, d.donor).donated += amount; } if (d.recipient) { getRecord(year, d.recipient).received += amount; } } // ============================================================ // PAÍSES // ============================================================ const countries = Array.from( new Set([ ...data.map(d => d.donor), ...data.map(d => d.recipient) ].filter(Boolean)) ); // ============================================================ // FORMATOS // ============================================================ function formatMoney(value) { if (!Number.isFinite(value)) return "$0"; if (value === 0) return "$0"; const sign = value < 0 ? "-" : ""; const abs = Math.abs(value); if (abs >= 1e9) { return `${sign}$${d3.format(".2~f")(abs / 1e9)}B`; } if (abs >= 1e6) { return `${sign}$${d3.format(".2~f")(abs / 1e6)}M`; } if (abs >= 1e3) { return `${sign}$${d3.format(".2~f")(abs / 1e3)}K`; } return `${sign}$${d3.format(",.0f")(abs)}`; } // ============================================================ // ROLE SCORE // // -1 = completamente donante // 0 = balanceado // +1 = completamente receptor // ============================================================ function roleScore(donated, received) { const total = donated + received; if (total === 0) { return 0; } return (received - donated) / total; } // ============================================================ // CLASIFICACIÓN DEL ROL // ============================================================ function classifyRole(score) { if (score < -ROLE_THRESHOLD) { return "Donante"; } if (score > ROLE_THRESHOLD) { return "Receptor"; } return "Balanceado"; } // ============================================================ // DATOS DE UN AÑO // ============================================================ function calculateYearData(year) { const currentMap = yearly.get(year) || new Map(); const currentIndex = years.indexOf(year); const previousYear = currentIndex > 0 ? years[currentIndex - 1] : null; const previousMap = previousYear !== null ? yearly.get(previousYear) || new Map() : new Map(); return countries.map(country => { const current = currentMap.get(country) || { donated: 0, received: 0 }; const previous = previousMap.get(country) || { donated: 0, received: 0 }; // -------------------------------------------------------- // BALANCE // -------------------------------------------------------- const balance = current.received - current.donated; const previousBalance = previous.received - previous.donated; const balanceChange = balance - previousBalance; // -------------------------------------------------------- // ROLE SCORE // -------------------------------------------------------- const currentRoleScore = roleScore( current.donated, current.received ); const previousRoleScore = roleScore( previous.donated, previous.received ); const currentRole = classifyRole(currentRoleScore); const previousRole = classifyRole(previousRoleScore); // -------------------------------------------------------- // CAMBIO DIRECTO DE ROL // // Solo consideramos: // Donante -> Receptor // Receptor -> Donante // // No contamos: // Donante -> Balanceado // Balanceado -> Receptor // etc. // -------------------------------------------------------- const directRoleChange = ( previousRole === "Donante" && currentRole === "Receptor" ) || ( previousRole === "Receptor" && currentRole === "Donante" ); // Intensidad de la transición: // // -0.8 -> +0.7 // fuerza = 1.5 // // -0.3 -> +0.25 // fuerza = 0.55 const roleChangeStrength = directRoleChange ? Math.abs( currentRoleScore - previousRoleScore ) : 0; return { country, donated: current.donated, received: current.received, previousDonated: previous.donated, previousReceived: previous.received, balance, previousBalance, balanceChange, currentRoleScore, previousRoleScore, currentRole, previousRole, directRoleChange, roleChangeStrength, previousYear }; }); } // ============================================================ // CONTENEDOR // ============================================================ const container = d3 .create("div") .style( "font-family", "system-ui, -apple-system, BlinkMacSystemFont, sans-serif" ) .style("max-width", `${width}px`) .style("margin", "0 auto") .style("position", "relative"); // ============================================================ // TÍTULO // ============================================================ container .append("h2") .style("margin-bottom", "4px") .style("font-size", "25px") .text("Aid flows by country"); const subtitle = container .append("div") .style("color", "#666") .style("font-size", "14px") .style("margin-bottom", "20px"); // ============================================================ // BOTONES // ============================================================ const controls = container .append("div") .style("display", "flex") .style("align-items", "center") .style("gap", "8px") .style("flex-wrap", "wrap") .style("margin-bottom", "12px"); controls .append("span") .style("font-size", "13px") .style("font-weight", "600") .style("margin-right", "5px") .text("Ordenar / explorar por:"); const modes = [ { key: "donated", label: "Donado" }, { key: "received", label: "Recibido" }, { key: "balance", label: "Δ Balance" }, { key: "role", label: "⇄ Cambio de rol" } ]; const buttons = controls .selectAll("button") .data(modes) .join("button") .text(d => d.label) .style("padding", "7px 14px") .style("border", "1px solid #bbb") .style("border-radius", "6px") .style("cursor", "pointer") .style("font-size", "13px") .on("click", (event, d) => { sortMode = d.key; updateButtons(); updateChart(); }); function updateButtons() { buttons .style( "background", d => d.key === sortMode ? "#333" : "#fff" ) .style( "color", d => d.key === sortMode ? "#fff" : "#333" ); } updateButtons(); // ============================================================ // SVG PRINCIPAL // ============================================================ const svg = container .append("svg") .attr( "viewBox", [0, 0, width, height] ) .style("width", "100%") .style("height", "auto"); const center = (margin.left + width - margin.right) / 2; const plotWidth = (width - margin.left - margin.right) / 2; // ============================================================ // TÍTULOS // ============================================================ svg .append("text") .attr( "x", center - plotWidth / 2 ) .attr("y", 27) .attr("text-anchor", "middle") .attr("font-weight", 700) .attr("font-size", 14) .attr("fill", donatedColor) .text("DONADO"); svg .append("text") .attr( "x", center + plotWidth / 2 ) .attr("y", 27) .attr("text-anchor", "middle") .attr("font-weight", 700) .attr("font-size", 14) .attr("fill", receivedColor) .text("RECIBIDO"); svg .append("text") .attr( "x", center - plotWidth / 2 ) .attr("y", 47) .attr("text-anchor", "middle") .attr("font-size", 11) .attr("fill", "#777") .text("←"); svg .append("text") .attr( "x", center + plotWidth / 2 ) .attr("y", 47) .attr("text-anchor", "middle") .attr("font-size", 11) .attr("fill", "#777") .text("→"); // Línea central svg .append("line") .attr("x1", center) .attr("x2", center) .attr("y1", margin.top - 12) .attr("y2", margin.top + chartHeight) .attr("stroke", "#555") .attr("stroke-width", 1); // ============================================================ // GRUPOS // ============================================================ const gridGroup = svg.append("g"); const barsGroup = svg.append("g"); const labelsGroup = svg.append("g"); const valueGroup = svg.append("g"); const axisGroup = svg.append("g"); // ============================================================ // TOOLTIP PRINCIPAL // ============================================================ const tooltip = container .append("div") .style("position", "absolute") .style("pointer-events", "none") .style( "background", "rgba(25,25,25,0.94)" ) .style("color", "white") .style("padding", "9px 12px") .style("border-radius", "6px") .style("font-size", "12px") .style("line-height", "1.5") .style("display", "none") .style("z-index", "20"); // ============================================================ // SLIDER // ============================================================ const sliderWrapper = container .append("div") .style( "margin", "14px 35px 0 35px" ); const yearDisplay = sliderWrapper .append("div") .style("text-align", "center") .style("font-size", "22px") .style("font-weight", "700") .style("margin-bottom", "4px"); const slider = sliderWrapper .append("input") .attr("type", "range") .attr("min", 1) .attr("max", years.length - 1) .attr("step", 1) .attr( "value", selectedYearIndex ) .style("width", "100%"); const sliderLabels = sliderWrapper .append("div") .style("display", "flex") .style( "justify-content", "space-between" ) .style("font-size", "12px") .style("color", "#666"); sliderLabels .append("span") .text(years[1]); sliderLabels .append("span") .text(years[years.length - 1]); slider.on("input", function () { selectedYearIndex = +this.value; selectedYear = years[selectedYearIndex]; updateChart(); }); // ============================================================ // POPUP // ============================================================ const overlay = container .append("div") .style("position", "absolute") .style("left", "50%") .style("top", "150px") .style( "transform", "translateX(-50%)" ) .style("width", "820px") .style("max-width", "90%") .style("display", "none") .style("z-index", "9999"); const modal = overlay .append("div") .style("background", "#ffffff") .style( "border", "1px solid #d0d0d0" ) .style("border-radius", "12px") .style( "box-shadow", "0 10px 35px rgba(0,0,0,0.25)" ) .style("padding", "24px") .style("position", "relative"); const closeButton = modal .append("button") .attr("type", "button") .text("×") .style("position", "absolute") .style("right", "14px") .style("top", "10px") .style("width", "34px") .style("height", "34px") .style("border", "none") .style("border-radius", "50%") .style("background", "#f2f2f2") .style("font-size", "24px") .style("line-height", "30px") .style("cursor", "pointer") .style("color", "#555") .style("z-index", "2"); closeButton.on("click", event => { event.stopPropagation(); overlay.style( "display", "none" ); }); const modalTitle = modal .append("h2") .style( "margin", "0 45px 4px 0" ) .style("font-size", "22px"); const modalSubtitle = modal .append("div") .style("font-size", "13px") .style("color", "#666") .style("margin-bottom", "15px"); const modalChart = modal .append("div") .style("position", "relative"); const modalStats = modal .append("div") .style("margin-top", "12px") .style("padding", "12px") .style("background", "#f6f6f6") .style("border-radius", "8px") .style("font-size", "13px"); // ============================================================ // HISTORIA DE UN PAÍS // ============================================================ function countryHistory(country) { return years.map(year => { const yearMap = yearly.get(year) || new Map(); const d = yearMap.get(country) || { donated: 0, received: 0 }; return { year, donated: d.donated, received: d.received }; }); } // ============================================================ // ABRIR POPUP // ============================================================ function openPopup(country) { overlay.style( "display", "block" ); modalTitle.text(country); modalSubtitle.text( "Evolución histórica de recursos donados y recibidos" ); modalChart .selectAll("*") .remove(); const history = countryHistory(country); const popupWidth = 780; const popupHeight = 430; const pm = { top: 35, right: 35, bottom: 45, left: 80 }; const popupSvg = modalChart .append("svg") .attr( "viewBox", [ 0, 0, popupWidth, popupHeight ] ) .style("width", "100%") .style("height", "auto"); // ========================================================== // ESCALA X // ========================================================== const x = d3 .scaleLinear() .domain( d3.extent(years) ) .range([ pm.left, popupWidth - pm.right ]); // ========================================================== // ESCALA Y DIVERGENTE // ========================================================== const maxValue = d3.max( history, d => Math.max( d.donated, d.received ) ) || 1; const y = d3 .scaleLinear() .domain([ -maxValue, maxValue ]) .nice() .range([ popupHeight - pm.bottom, pm.top ]); // ========================================================== // GRID // ========================================================== popupSvg .append("g") .attr( "transform", `translate(${pm.left},0)` ) .call( d3 .axisLeft(y) .ticks(8) .tickSize( -( popupWidth - pm.left - pm.right ) ) .tickFormat("") ) .call( g => g .select(".domain") .remove() ) .call( g => g .selectAll("line") .attr( "stroke", "#eeeeee" ) ); // ========================================================== // EJE X EN CERO // ========================================================== popupSvg .append("g") .attr( "transform", `translate(0,${y(0)})` ) .call( d3 .axisBottom(x) .ticks( Math.min( 10, years.length ) ) .tickFormat( d3.format("d") ) ) .call( g => g .select(".domain") .attr( "stroke", "#555" ) .attr( "stroke-width", 1.5 ) ); // ========================================================== // EJE Y // ========================================================== popupSvg .append("g") .attr( "transform", `translate(${pm.left},0)` ) .call( d3 .axisLeft(y) .ticks(8) .tickFormat( d => d === 0 ? "$0" : formatMoney( Math.abs(d) ) ) ); // ========================================================== // ETIQUETAS // ========================================================== popupSvg .append("text") .attr("x", pm.left + 10) .attr("y", pm.top + 15) .attr("font-size", 11) .attr("font-weight", 700) .attr("fill", donatedColor) .text("DONADO ↑"); popupSvg .append("text") .attr("x", pm.left + 10) .attr( "y", popupHeight - pm.bottom - 10 ) .attr("font-size", 11) .attr("font-weight", 700) .attr("fill", receivedColor) .text("RECIBIDO ↓"); // ========================================================== // AREA CHART // ========================================================== const donatedArea = d3 .area() .x( d => x(d.year) ) .y0( y(0) ) .y1( d => y(d.donated) ) .curve( d3.curveLinear ); const receivedArea = d3 .area() .x( d => x(d.year) ) .y0( y(0) ) .y1( d => y(-d.received) ) .curve( d3.curveLinear ); // Área donada popupSvg .append("path") .datum(history) .attr( "d", donatedArea ) .attr( "fill", donatedColor ) .attr( "fill-opacity", 0.72 ) .attr( "stroke", "none" ); // Área recibida popupSvg .append("path") .datum(history) .attr( "d", receivedArea ) .attr( "fill", receivedColor ) .attr( "fill-opacity", 0.72 ) .attr( "stroke", "none" ); // ========================================================== // CONTORNOS // ========================================================== const donatedLine = d3 .line() .x( d => x(d.year) ) .y( d => y(d.donated) ) .curve( d3.curveLinear ); const receivedLine = d3 .line() .x( d => x(d.year) ) .y( d => y(-d.received) ) .curve( d3.curveLinear ); popupSvg .append("path") .datum(history) .attr( "d", donatedLine ) .attr( "fill", "none" ) .attr( "stroke", donatedColor ) .attr( "stroke-width", 2 ); popupSvg .append("path") .datum(history) .attr( "d", receivedLine ) .attr( "fill", "none" ) .attr( "stroke", receivedColor ) .attr( "stroke-width", 2 ); // ========================================================== // AÑO SELECCIONADO // ========================================================== popupSvg .append("line") .attr( "x1", x(selectedYear) ) .attr( "x2", x(selectedYear) ) .attr( "y1", pm.top ) .attr( "y2", popupHeight - pm.bottom ) .attr( "stroke", "#333" ) .attr( "stroke-dasharray", "5,4" ) .attr( "stroke-width", 1.5 ); popupSvg .append("text") .attr( "x", x(selectedYear) ) .attr( "y", pm.top - 8 ) .attr( "text-anchor", "middle" ) .attr( "font-size", 11 ) .attr( "font-weight", 700 ) .text( selectedYear ); // ========================================================== // TOOLTIP DEL POPUP // ========================================================== const focusLine = popupSvg .append("line") .attr("y1", pm.top) .attr( "y2", popupHeight - pm.bottom ) .attr("stroke", "#777") .attr("stroke-width", 1) .style("display", "none"); const focusDonated = popupSvg .append("circle") .attr("r", 5) .attr("fill", donatedColor) .attr("stroke", "white") .attr("stroke-width", 1.5) .style("display", "none"); const focusReceived = popupSvg .append("circle") .attr("r", 5) .attr("fill", receivedColor) .attr("stroke", "white") .attr("stroke-width", 1.5) .style("display", "none"); const popupTooltip = modalChart .append("div") .style("position", "absolute") .style("pointer-events", "none") .style("background", "#222") .style("color", "#fff") .style("padding", "8px 10px") .style("border-radius", "5px") .style("font-size", "12px") .style("line-height", "1.5") .style("display", "none") .style("z-index", "10"); popupSvg .append("rect") .attr("x", pm.left) .attr("y", pm.top) .attr( "width", popupWidth - pm.left - pm.right ) .attr( "height", popupHeight - pm.top - pm.bottom ) .attr("fill", "transparent") .style("cursor", "crosshair") .on( "mousemove", function(event) { const [mx] = d3.pointer( event, this ); const hoveredYear = Math.round( x.invert(mx) ); const closest = history.reduce( (a, b) => Math.abs( b.year - hoveredYear ) < Math.abs( a.year - hoveredYear ) ? b : a ); const px = x(closest.year); focusLine .style("display", null) .attr("x1", px) .attr("x2", px); focusDonated .style("display", null) .attr("cx", px) .attr( "cy", y(closest.donated) ); focusReceived .style("display", null) .attr("cx", px) .attr( "cy", y(-closest.received) ); const hoveredScore = roleScore( closest.donated, closest.received ); const hoveredRole = classifyRole( hoveredScore ); popupTooltip .style("display", "block") .style( "left", `${Math.min( mx + 25, popupWidth - 190 )}px` ) .style( "top", `${Math.max( 25, y(0) - 85 )}px` ) .html(` ${closest.year}
Donado: ${formatMoney(closest.donated)}
Recibido: ${formatMoney(closest.received)}
Rol: ${hoveredRole} `); } ) .on( "mouseleave", () => { focusLine .style("display", "none"); focusDonated .style("display", "none"); focusReceived .style("display", "none"); popupTooltip .style("display", "none"); } ); // ========================================================== // ESTADÍSTICAS DEL POPUP // ========================================================== const selected = history.find( d => d.year === selectedYear ) || { donated: 0, received: 0 }; const idx = years.indexOf(selectedYear); const previousYear = idx > 0 ? years[idx - 1] : null; const previous = history.find( d => d.year === previousYear ) || { donated: 0, received: 0 }; const currentBalance = selected.received - selected.donated; const previousBalance = previous.received - previous.donated; const dBalance = currentBalance - previousBalance; const selectedRoleScore = roleScore( selected.donated, selected.received ); const previousRoleScore = roleScore( previous.donated, previous.received ); const selectedRole = classifyRole( selectedRoleScore ); const previousRole = classifyRole( previousRoleScore ); modalStats.html(` ${selectedYear} vs. ${previousYear ?? "—"}

Donado: ${formatMoney(selected.donated)}
Recibido: ${formatMoney(selected.received)}
Balance: ${formatMoney(currentBalance)}
Δ Balance: ${ dBalance > 0 ? "↑" : dBalance < 0 ? "↓" : "•" } ${formatMoney(dBalance)}

Rol: ${previousRole} → ${selectedRole}
Role Score: ${d3.format("+.2f")(selectedRoleScore)} `); } // ============================================================ // ACTUALIZAR GRÁFICO PRINCIPAL // ============================================================ function updateChart() { const allYearData = calculateYearData( selectedYear ); const previousYear = years[ selectedYearIndex - 1 ]; let displayData; // ========================================================== // DONADO // ========================================================== if (sortMode === "donated") { displayData = allYearData .filter( d => d.donated > 0 ) .sort( (a, b) => b.donated - a.donated ) .slice(0, TOP_N); subtitle.text( `Top ${TOP_N} países que más donaron · ${selectedYear}` ); // ========================================================== // RECIBIDO // ========================================================== } else if ( sortMode === "received" ) { displayData = allYearData .filter( d => d.received > 0 ) .sort( (a, b) => b.received - a.received ) .slice(0, TOP_N); subtitle.text( `Top ${TOP_N} países que más recibieron · ${selectedYear}` ); // ========================================================== // Δ BALANCE // ========================================================== } else if ( sortMode === "balance" ) { displayData = allYearData .filter( d => d.balanceChange !== 0 ) .sort( (a, b) => Math.abs( b.balanceChange ) - Math.abs( a.balanceChange ) ) .slice(0, TOP_N); subtitle.text( `Top ${TOP_N} países por magnitud de Δ Balance · ${selectedYear} vs ${previousYear}` ); // ========================================================== // CAMBIO DE ROL // ========================================================== } else { displayData = allYearData .filter( d => d.directRoleChange ) .sort( (a, b) => b.roleChangeStrength - a.roleChangeStrength ) .slice(0, TOP_N); subtitle.text( `Cambios directos de rol · ${previousYear} → ${selectedYear} · Donante ↔ Receptor` ); } yearDisplay.text( selectedYear ); // ========================================================== // ESCALA X // ========================================================== const maxAmount = d3.max( displayData, d => Math.max( d.donated, d.received ) ) || 1; const x = d3 .scaleLinear() .domain([ 0, maxAmount ]) .nice() .range([ 0, plotWidth - 18 ]); // ========================================================== // ESCALA Y // ========================================================== const y = d3 .scaleBand() .domain( displayData.map( d => d.country ) ) .range([ margin.top, margin.top + chartHeight ]) .padding(0.24); // ========================================================== // GRID // ========================================================== const ticks = x .ticks(4) .filter( d => d !== 0 ); gridGroup .selectAll( "line.left-grid" ) .data(ticks) .join("line") .attr( "class", "left-grid" ) .attr( "x1", d => center - x(d) ) .attr( "x2", d => center - x(d) ) .attr( "y1", margin.top - 8 ) .attr( "y2", margin.top + chartHeight ) .attr( "stroke", "#eee" ); gridGroup .selectAll( "line.right-grid" ) .data(ticks) .join("line") .attr( "class", "right-grid" ) .attr( "x1", d => center + x(d) ) .attr( "x2", d => center + x(d) ) .attr( "y1", margin.top - 8 ) .attr( "y2", margin.top + chartHeight ) .attr( "stroke", "#eee" ); // ========================================================== // BARRAS DONADO // ========================================================== barsGroup .selectAll( "rect.donated" ) .data( displayData, d => d.country ) .join( enter => enter .append("rect") .attr( "class", "donated" ) .attr("x", center) .attr("width", 0) .attr( "y", d => y(d.country) ) .attr( "height", y.bandwidth() ) .attr( "fill", donatedColor ) .style( "cursor", "pointer" ) .call( enter => enter .transition() .duration(450) .attr( "x", d => center - x(d.donated) ) .attr( "width", d => x(d.donated) ) ), update => update.call( update => update .transition() .duration(450) .attr( "x", d => center - x(d.donated) ) .attr( "width", d => x(d.donated) ) .attr( "y", d => y(d.country) ) .attr( "height", y.bandwidth() ) ), exit => exit .transition() .duration(250) .attr("width", 0) .remove() ) .on( "click", (event, d) => openPopup(d.country) ) .on( "mousemove", function(event, d) { tooltip .style( "display", "block" ) .style( "left", `${event.offsetX + 15}px` ) .style( "top", `${event.offsetY + 10}px` ) .html(` ${d.country}
Donado ${selectedYear}: ${formatMoney(d.donated)}
Recibido ${selectedYear}: ${formatMoney(d.received)}
Rol: ${d.currentRole} `); } ) .on( "mouseleave", () => tooltip.style( "display", "none" ) ); // ========================================================== // BARRAS RECIBIDO // ========================================================== barsGroup .selectAll( "rect.received" ) .data( displayData, d => d.country ) .join( enter => enter .append("rect") .attr( "class", "received" ) .attr("x", center) .attr("width", 0) .attr( "y", d => y(d.country) ) .attr( "height", y.bandwidth() ) .attr( "fill", receivedColor ) .style( "cursor", "pointer" ) .call( enter => enter .transition() .duration(450) .attr( "width", d => x(d.received) ) ), update => update.call( update => update .transition() .duration(450) .attr( "x", center ) .attr( "width", d => x(d.received) ) .attr( "y", d => y(d.country) ) .attr( "height", y.bandwidth() ) ), exit => exit .transition() .duration(250) .attr("width", 0) .remove() ) .on( "click", (event, d) => openPopup(d.country) ) .on( "mousemove", function(event, d) { tooltip .style( "display", "block" ) .style( "left", `${event.offsetX + 15}px` ) .style( "top", `${event.offsetY + 10}px` ) .html(` ${d.country}
Donado ${selectedYear}: ${formatMoney(d.donated)}
Recibido ${selectedYear}: ${formatMoney(d.received)}
Rol: ${d.currentRole} `); } ) .on( "mouseleave", () => tooltip.style( "display", "none" ) ); // ========================================================== // NOMBRES // ========================================================== labelsGroup .selectAll( "text.country" ) .data( displayData, d => d.country ) .join("text") .attr( "class", "country" ) .attr( "x", margin.left - 10 ) .attr( "y", d => y(d.country) + y.bandwidth() / 2 ) .attr( "dy", "0.35em" ) .attr( "text-anchor", "end" ) .attr( "font-size", 12 ) .attr( "font-weight", 600 ) .style( "cursor", "pointer" ) .text( d => d.country ) .on( "click", (event, d) => openPopup(d.country) ); // ========================================================== // VALORES / INFORMACIÓN DERECHA // ========================================================== valueGroup .selectAll( "text.value" ) .data( displayData, d => d.country ) .join("text") .attr( "class", "value" ) .attr( "x", width - margin.right + 15 ) .attr( "y", d => y(d.country) + y.bandwidth() / 2 ) .attr( "dy", "0.35em" ) .attr( "font-size", d => sortMode === "role" ? 10.5 : 11 ) .attr( "font-weight", 600 ) .attr( "fill", d => { if ( sortMode === "donated" ) { return donatedColor; } if ( sortMode === "received" ) { return receivedColor; } if ( sortMode === "role" ) { return "#333"; } if ( d.balanceChange > 0 ) { return positiveColor; } if ( d.balanceChange < 0 ) { return negativeColor; } return neutralColor; } ) .text( d => { // DONADO if ( sortMode === "donated" ) { return formatMoney( d.donated ); } // RECIBIDO if ( sortMode === "received" ) { return formatMoney( d.received ); } // CAMBIO DE ROL if ( sortMode === "role" ) { const arrow = d.previousRole === "Donante" ? "→" : "←"; return `${d.previousRole} ${arrow} ${d.currentRole}`; } // Δ BALANCE const v = d.balanceChange; const arrow = v > 0 ? "↑" : v < 0 ? "↓" : "•"; return `${arrow} ${formatMoney(v)}`; } ); // ========================================================== // HEADER DERECHA // ========================================================== valueGroup .selectAll( "text.value-header" ) .data([null]) .join("text") .attr( "class", "value-header" ) .attr( "x", width - margin.right + 15 ) .attr( "y", margin.top - 20 ) .attr( "font-size", 10 ) .attr( "font-weight", 700 ) .attr( "fill", "#666" ) .text( sortMode === "donated" ? `Donado ${selectedYear}` : sortMode === "received" ? `Recibido ${selectedYear}` : sortMode === "role" ? `Rol ${previousYear} → ${selectedYear}` : `Δ Balance vs ${previousYear}` ); // ========================================================== // EJES // ========================================================== axisGroup .selectAll("*") .remove(); const leftScale = d3 .scaleLinear() .domain([ maxAmount, 0 ]) .range([ center - x(maxAmount), center ]); const rightScale = d3 .scaleLinear() .domain([ 0, maxAmount ]) .range([ center, center + x(maxAmount) ]); axisGroup .append("g") .attr( "transform", `translate(0,${ margin.top + chartHeight + 8 })` ) .call( d3 .axisBottom(leftScale) .ticks(4) .tickFormat(formatMoney) ); axisGroup .append("g") .attr( "transform", `translate(0,${ margin.top + chartHeight + 8 })` ) .call( d3 .axisBottom(rightScale) .ticks(4) .tickFormat(formatMoney) ); } // ============================================================ // PRIMER RENDER // ============================================================ updateChart(); return container.node(); }4d:[] 46:{"id":"b8663977c794d40d","slug":"time-data-visualization-and-geo","title":"Time Data Visualization and Geo","thumbnail":"87c4d5d2f536585782a7d8308a0c25badff863287ed4e0f33dfa11fdf1b6c326","access_level":"public","create_time":"$D2026-10-19T20:23:28.171Z","update_time":"$D2026-10-19T21:57:34.346Z","view_time":null,"first_public_time":"$D2026-10-19T20:57:59.172Z","has_unpublished_edits":null,"fork":{"id":"3b7575eb1ceed531","slug":"time-data-visualization-and-geo/2","title":"Time Data Visualization and Geo","owner":{"id":"dc8caf73f7724338","login":"diva-stewart-maquera-bobadilla","name":"Diva Stewart Maquera Bobadilla"}},"stars":0,"starred":false,"owner":{"type":"team","id":"855d29f2d4dab8d4","login":"utec11","name":"UTEC","avatar_url":"https://avatars-next.observableusercontent.com/8a34dc7dca59c4b9533ca85ffbf62de8ab20bcde5da3d2d1c46a30cb0ce631d7","tier":"starter_2024","bio":"","following":false},"version":63,"publish_version":63,"role":null,"authored":false,"authors":[{"type":"individual","id":"6e56d699a798ba7b","login":"jimena-adela-gurbillon-santa-cruz","name":"Jimena Adela Gurbillon Santa Cruz","avatar_url":"https://avatars-next.observableusercontent.com/a8a2bbf57fe274afbf8a1454f247cd1700f93ffdf24f85e25424e8c56ed4a989","tier":null,"bio":"","following":false}],"members":[{"type":"team","id":"855d29f2d4dab8d4","login":"utec11","name":"UTEC","avatar_url":"https://avatars-next.observableusercontent.com/8a34dc7dca59c4b9533ca85ffbf62de8ab20bcde5da3d2d1c46a30cb0ce631d7","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":"$48","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":"$49","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":"$4a","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":29,"value":"$4b","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":42,"value":"# Visualizacion 1","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"$4c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","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":"$W4d","stdlib":"1"}} 47:"$46:body"