21:null 22:["$","title",null,{"children":"Time Data Visualization and Geo | Diva Stewart Maquera Bobadilla | Observable"}] 27: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 28: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. 29: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. 2a: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. 2b:T6ca7,{ // ============================================================ // VISUALIZACIÓN 1 — AID FLOWS // Diverging bars + temporal slider + ranking + popup // ============================================================ const data = aiddata; // ---------- CONFIGURACIÓN ---------- const TOP_N = 15; const width = 1000; const margin = { top: 105, right: 150, bottom: 85, left: 155 }; const rowHeight = 34; const chartHeight = TOP_N * rowHeight; const height = margin.top + chartHeight + margin.bottom; // Colores const donatedColor = "#E67E22"; const receivedColor = "#2E86C1"; const positiveColor = "#198754"; const negativeColor = "#C0392B"; const neutralColor = "#666"; // ---------- AÑOS DISPONIBLES ---------- const years = Array.from( new Set( data .map(d => +d.yearInt) .filter(Number.isFinite) ) ).sort((a, b) => a - b); // Necesitamos año anterior para calcular Δ. // Por eso empezamos desde el segundo año. let selectedYearIndex = Math.max(1, years.length - 1); let selectedYear = years[selectedYearIndex]; // Criterio inicial let sortMode = "balance"; // ---------- AGREGACIÓN ---------- // Map: // 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; } } // Todos los países que aparecen como donor o recipient const countries = Array.from( new Set([ ...data.map(d => d.donor), ...data.map(d => d.recipient) ].filter(Boolean)) ); // ---------- FORMATOS ---------- const money = d3.format("$.3s"); 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)}`; } // ---------- DATOS PARA UN AÑO ---------- function calculateYearData(year) { const currentMap = yearly.get(year) || new Map(); // El año anterior DISPONIBLE en el dataset 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 }; const balance = current.received - current.donated; const previousBalance = previous.received - previous.donated; return { country, donated: current.donated, received: current.received, donatedChange: current.donated - previous.donated, receivedChange: current.received - previous.received, balance, balanceChange: balance - previousBalance, previousYear }; }); } function changeValue(d) { if (sortMode === "donated") { return d.donatedChange; } if (sortMode === "received") { return d.receivedChange; } return d.balanceChange; } function changeLabel() { if (sortMode === "donated") return "Δ Donado"; if (sortMode === "received") return "Δ Recibido"; return "Δ Balance"; } // ---------- CONTENEDOR PRINCIPAL ---------- const container = d3 .create("div") .style("font-family", "system-ui, -apple-system, 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 por cambio:"); const modes = [ { key: "donated", label: "Δ Donado" }, { key: "received", label: "Δ Recibido" }, { key: "balance", label: "Δ Balance" } ]; 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 ---------- 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 izquierda/derecha 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("class", "center-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 deltaGroup = 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", "fixed") .style("inset", "0") .style("background", "rgba(0,0,0,0.38)") .style("display", "none") .style("align-items", "center") .style("justify-content", "center") .style("z-index", "9999"); const modal = overlay .append("div") .style("background", "white") .style("width", "min(850px, 90vw)") .style("max-height", "90vh") .style("overflow", "auto") .style("border-radius", "12px") .style("box-shadow", "0 10px 40px rgba(0,0,0,.25)") .style("padding", "22px") .style("position", "relative"); const closeButton = modal .append("button") .text("×") .style("position", "absolute") .style("right", "14px") .style("top", "10px") .style("border", "none") .style("background", "none") .style("font-size", "28px") .style("cursor", "pointer") .style("color", "#555"); closeButton.on("click", () => { overlay.style("display", "none"); }); overlay.on("click", event => { if (event.target === overlay.node()) { overlay.style("display", "none"); } }); const modalTitle = modal .append("h2") .style("margin", "0 0 4px 0"); const modalSubtitle = modal .append("div") .style("font-size", "13px") .style("color", "#666") .style("margin-bottom", "15px"); const modalChart = modal .append("div"); const modalStats = modal .append("div") .style("margin-top", "12px") .style("padding", "12px") .style("background", "#f6f6f6") .style("border-radius", "8px") .style("font-size", "13px"); // ---------- SERIE HISTÓRICA 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 }; }); } function openPopup(country) { overlay.style("display", "flex"); 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 = 390; const pm = { top: 30, right: 35, bottom: 50, left: 80 }; const popupSvg = modalChart .append("svg") .attr( "viewBox", [0, 0, popupWidth, popupHeight] ) .style("width", "100%") .style("height", "auto"); const x = d3 .scaleLinear() .domain(d3.extent(years)) .range([ pm.left, popupWidth - pm.right ]); const maxValue = d3.max(history, d => Math.max(d.donated, d.received) ) || 1; const y = d3 .scaleLinear() .domain([0, maxValue]) .nice() .range([ popupHeight - pm.bottom, pm.top ]); // Grid popupSvg .append("g") .attr("transform", `translate(${pm.left},0)`) .call( d3 .axisLeft(y) .ticks(5) .tickSize( -(popupWidth - pm.left - pm.right) ) .tickFormat("") ) .call(g => g .select(".domain") .remove() ) .call(g => g .selectAll("line") .attr("stroke", "#eee") ); // Eje X popupSvg .append("g") .attr( "transform", `translate(0,${popupHeight - pm.bottom})` ) .call( d3 .axisBottom(x) .ticks(Math.min(10, years.length)) .tickFormat(d3.format("d")) ); // Eje Y popupSvg .append("g") .attr( "transform", `translate(${pm.left},0)` ) .call( d3 .axisLeft(y) .ticks(5) .tickFormat(d => formatMoney(d)) ); const donatedLine = d3 .line() .x(d => x(d.year)) .y(d => y(d.donated)); const receivedLine = d3 .line() .x(d => x(d.year)) .y(d => y(d.received)); // Línea donado popupSvg .append("path") .datum(history) .attr("fill", "none") .attr("stroke", donatedColor) .attr("stroke-width", 2.5) .attr("d", donatedLine); // Línea recibido popupSvg .append("path") .datum(history) .attr("fill", "none") .attr("stroke", receivedColor) .attr("stroke-width", 2.5) .attr("d", receivedLine); // 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", "#555") .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); // Leyenda const legend = popupSvg .append("g") .attr( "transform", `translate(${pm.left + 10},${pm.top + 10})` ); legend .append("line") .attr("x1", 0) .attr("x2", 22) .attr("y1", 0) .attr("y2", 0) .attr("stroke", donatedColor) .attr("stroke-width", 3); legend .append("text") .attr("x", 29) .attr("y", 4) .attr("font-size", 12) .text("Donado"); legend .append("line") .attr("x1", 90) .attr("x2", 112) .attr("y1", 0) .attr("y2", 0) .attr("stroke", receivedColor) .attr("stroke-width", 3); legend .append("text") .attr("x", 119) .attr("y", 4) .attr("font-size", 12) .text("Recibido"); // Hover / tooltip interno const focusLine = popupSvg .append("line") .attr("y1", pm.top) .attr( "y2", popupHeight - pm.bottom ) .attr("stroke", "#999") .attr("stroke-width", 1) .style("display", "none"); const focusDonated = popupSvg .append("circle") .attr("r", 5) .attr("fill", donatedColor) .style("display", "none"); const focusReceived = popupSvg .append("circle") .attr("r", 5) .attr("fill", receivedColor) .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("display", "none"); 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)); popupTooltip .style("display", "block") .style( "left", `${Math.min(mx + 90, popupWidth - 150)}px` ) .style("top", "90px") .html( `${closest.year}
Donado: ${formatMoney(closest.donated)}
Recibido: ${formatMoney(closest.received)}` ); }) .on("mouseleave", () => { focusLine.style("display", "none"); focusDonated.style("display", "none"); focusReceived.style("display", "none"); popupTooltip.style("display", "none"); }); // Estadísticas del año seleccionado 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 dDonated = selected.donated - previous.donated; const dReceived = selected.received - previous.received; const currentBalance = selected.received - selected.donated; const previousBalance = previous.received - previous.donated; const dBalance = currentBalance - previousBalance; modalStats.html(` ${selectedYear} vs. ${previousYear ?? "—"}

Donado: ${formatMoney(selected.donated)} (${dDonated >= 0 ? "↑" : "↓"} ${formatMoney(dDonated)})
Recibido: ${formatMoney(selected.received)} (${dReceived >= 0 ? "↑" : "↓"} ${formatMoney(dReceived)})
Balance (recibido − donado): ${formatMoney(currentBalance)}
Δ Balance: ${dBalance >= 0 ? "↑" : "↓"} ${formatMoney(dBalance)} `); } // ============================================================ // ACTUALIZACIÓN DEL GRÁFICO PRINCIPAL // ============================================================ function updateChart() { const allYearData = calculateYearData(selectedYear); // TOP N según MAGNITUD ABSOLUTA del cambio seleccionado. const top = allYearData .filter( d => d.donated !== 0 || d.received !== 0 || changeValue(d) !== 0 ) .sort( (a, b) => Math.abs(changeValue(b)) - Math.abs(changeValue(a)) ) .slice(0, TOP_N); // Los dejamos ordenados por el mismo criterio. const displayData = top.sort( (a, b) => Math.abs(changeValue(b)) - Math.abs(changeValue(a)) ); const previousYear = years[selectedYearIndex - 1]; subtitle.text( `Top ${TOP_N} países por magnitud de ${changeLabel()} · ${selectedYear} vs ${previousYear}` ); yearDisplay.text(selectedYear); // Escala X simétrica 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)}
Δ vs ${d.previousYear}: ${formatMoney(d.donatedChange)} `); }) .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}
Recibido ${selectedYear}: ${formatMoney(d.received)}
Δ vs ${d.previousYear}: ${formatMoney(d.receivedChange)} `); }) .on("mouseleave", () => tooltip.style("display", "none") ); // NOMBRES DE PAÍSES 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) ); // Δ A LA DERECHA deltaGroup .selectAll("text.delta") .data(displayData, d => d.country) .join("text") .attr("class", "delta") .attr("x", width - margin.right + 15) .attr( "y", d => y(d.country) + y.bandwidth() / 2 ) .attr("dy", "0.35em") .attr("font-size", 11) .attr("font-weight", 600) .attr("fill", d => { const v = changeValue(d); if (v > 0) return positiveColor; if (v < 0) return negativeColor; return neutralColor; }) .text(d => { const v = changeValue(d); const arrow = v > 0 ? "↑" : v < 0 ? "↓" : "•"; return `${arrow} ${formatMoney(v)}`; }); // ETIQUETA DELTA deltaGroup .selectAll("text.delta-header") .data([null]) .join("text") .attr("class", "delta-header") .attr("x", width - margin.right + 15) .attr("y", margin.top - 20) .attr("font-size", 10) .attr("font-weight", 700) .attr("fill", "#666") .text(`${changeLabel()} vs ${previousYear}`); // EJES DE MONTO 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(); }2c:[] 25:{"id":"0d170753522b84ec","slug":"time-data-visualization-and-geo","title":"Time Data Visualization and Geo","thumbnail":"87c4d5d2f536585782a7d8308a0c25badff863287ed4e0f33dfa11fdf1b6c326","access_level":"public","create_time":"$D2026-10-13T14:44:13.524Z","update_time":"$D2026-10-13T15:02:28.740Z","view_time":null,"first_public_time":"$D2026-10-13T14:44:31.240Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"dc8caf73f7724338","login":"diva-stewart-maquera-bobadilla","name":"Diva Stewart Maquera Bobadilla","avatar_url":"https://avatars-next.observableusercontent.com/95d367ff25ceb52fbfc48bb25be90d8fd932e8ab2247558e8e961449a41a3bfc","tier":"starter_2024","bio":""},"version":58,"publish_version":58,"role":null,"authored":false,"authors":[{"type":"individual","id":"a021d05de06b74d4","login":"diva-stewart-maquera-bobadilla","name":"Diva Stewart Maquera Bobadilla","avatar_url":"https://avatars-next.observableusercontent.com/95d367ff25ceb52fbfc48bb25be90d8fd932e8ab2247558e8e961449a41a3bfc","tier":null,"bio":""}],"members":[{"type":"team","id":"dc8caf73f7724338","login":"diva-stewart-maquera-bobadilla","name":"Diva Stewart Maquera Bobadilla","avatar_url":"https://avatars-next.observableusercontent.com/95d367ff25ceb52fbfc48bb25be90d8fd932e8ab2247558e8e961449a41a3bfc","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"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":"$27","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":"$28","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":"$29","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":29,"value":"$2a","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":"$2b","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":"$W2c","stdlib":"1"}} 26:"$25:body"