34:["$","title",null,{"children":"Mini-Project 2: Temporal Data Visualization (Due Nov. 12th) | Mitran Ramesh kumar | Observable"}] 3c:Ta99,

[NOTE]

Please make sure to Read ALL instructions carefully for each part of this assignment!

1. Please **fork this notebook** for this mini-project. Ensure that the notebook is made either _public_ or _unlisted_ in the settings. 2. Complete each question to the best of your ability, clearly marking which visualization and/or written answer corresponds to which question asked. 3. Your coded solutions **must use D3**. Other visualization libraries (.e.g Vega-Lite) or other code languages (e.g. Python) are not allowed. - You are allowed to use functions and modules created by other creators. For example, you can use Mike Bostock's Color Legend notebook to create your legends. 4. You are free to modify any datasets mentioned in this project, or introduce new datasets if it helps you with any explanations or visualizations. For datasets originating from this dataset, you are free to modify them in any way as long as 1) the preprocessing is performed here in JavaScript, or 2) you preprocessed the dataset elsewhere (e.g. a Python notebook or Google Colab notebook via Python). - If you modified the dataset elsewhere, **please make sure to explicitly mention in your write-up where and how to access the code; preprocessing the dataset without a way for us to verify will lead to penalties on your score**. - If you are introducing a new dataset from elsewhere, **please make sure to explicitly mention how to access the dataset**. 5. Please adhere to our AI policy for the class, which is provided on our course syllabus: > _... you can use generative AI tools to do the assignments in this class. If you use an AI to guide you in completing an assignment, you must **disclose which parts were generated by the AI**. Remember that you are responsible for any errors or inaccuracies in AI-generated content, and you must be able to explain all submitted work._ 6. Submit the URL of this notebook on Brightspace by the listed due date. ### Submission Details This assignment is due **Nov. 12th @ 11:59pm**. This submission expects a URL to your notebook that is either public or unlisted. Please be aware that we will grade notebooks based on the version of the notebook we receive at the submission deadline. This means that if you decide to modify your notebooks after the deadline, your changes may not be considered while grading. This policy also applies to late submissions as well.3d:Tb68,Your goal is to create **3 independent visualizations of the same datasets**, each one with the intent of answering the questions stated below. For each numbered question, you should be able to 1) create a data visualization that answers **all** of the questions specified, 2) provide a written analysis that extrapolates from your visualization and answers **all** of the questions specified, and 3) provide a written description of your thought process and why you think your solution is *appropriate* and *effective*. These are the 3 visualizations you should create: - **Visualization #1 [25pts]:** 1. How does the amount donated vs. amount received change over time for each country? 2. Are there countries that mostly send or mostly receive and countries that have a similar amount of donations they receive and send? 3. Are there countries that change their role over time? That is, they used to mostly send donations and turn into mostly receiving donations and vice-versa? 4. Are there countries in which you can find a sudden increase ("peak") or a sudden decrease ("valley")? - **Visualization #2 [25pts]:** Focus on the top 10 "Coalesced Purposes" of donations (in terms of amount of disbursement across all countries and all time). What are the top 10 purposes of disbursements (in terms of total amount of disbursement) and how does their relative amount compare over time? E.g., are there purposes that tend to be prominent for a period of time and others that become more prominent during other periods? - **[Hint]**: looking at the graph one should be able to observe: “Ah! During these years donations were mostly about X but then there were way more donations about Y”. - **[Note]**: if the purpose is “UNSPECIFIED” it should be removed. - **Visualization #3 [25pts]:** Focusing exclusively on countries that receive donations, how do donations shift geographically over time? Do donations tend to be always in the same regions of the world over the years or they have been shifting over time? Can you build a visualization that shows the "history of donations" so that one can get a sense of which regions of the world have had more need for donations over the years? - **[Note 1]**: for this visualization you can, if you wish, use interaction (but you don’t have to). - **[Note 2]**: For this exercise you may want to review the lecture on geographical visualization in which we explain how you can visualize geographical data over time. - **[Note 3]**: if you want, you can aggregate data over a few years (say, group together data at 5 year intervals).

[NOTE]

It is okay to submit more than one solution for a given visualization problem if you think there are some competing solutions that work well. When you do that, make sure to compare the solutions by commenting on their advantages and disadvantages.

3e:T450,Your answers to each question are graded on the following qualities, with each question totaling up to **25 points**: - **[10pts]**: Does the visualization answer the questions posed in the exercise? - **[10pts]**: Does the written answer & discussion the questions posed in the exercise? - **[5pts]**: Is the visual representation clear? Does it have good aesthetics? If needed, you can review this notebook on clarity for reference. The questions above are a very useful tool for you to verify whether you are producing a good solution or not. As you go about solving this exercise you can use the questions above as an evaluation tool in two main ways: 1. Verify that you can indeed answer the questions with your visualization. If you can’t fully answer the questions, it means your solution has some problems. 2. Compare multiple solutions to the same problem and ask yourself: “which one makes it easier for me to answer these questions?”, where easier may mean, more accurately, with less effort or faster.3f:T582,## My solutions **Student:** Mitran Ramesh Kumar **SOEID:** MR8237 **Data and preprocessing.** I use the two files linked in the assignment. The course CSV contains 98,540 commitment records involving 47 countries from 1973 to 2013. Amounts are recorded commitments in constant USD, which is the monetary field available for the assignment’s questions about disbursement. I keep the amounts as recorded, including one negative adjustment. Years without recorded activity for a country contribute zero within this extract. All preprocessing is done in JavaScript below. **Design references.** The [Week 9 lab](https://ctsilva.github.io/2026-InfoVis-CSE/labs/week9-lab.html) informs the aggregation and geographic lookup with `d3.rollup` and keyed joins. The [Week 11 lab](https://ctsilva.github.io/2026-InfoVis-CSE/labs/week11-lab.html) informs the annual line chart and the repeated map panels. Mike Bostock’s [D3 Color Legend](https://observablehq.com/@d3/color-legend) is the reference for labeling a continuous color ramp. The donor-share scale, SVG ramp, and separate hatch swatch are specific to this notebook. **AI use disclosure.** I used ChatGPT to help understand the questions, generate sample JavaScript arrow functions, brainstorm interactive charts with dropdown options and their corresponding code, explore implementation choices, and improve the grammar and clarity of my explanations.40:T906,import * as d3 from "npm:d3@7"; // Load the CSV export of the aid sheet. const raw = await FileAttachment("aiddata.csv").csv(); const world = await FileAttachment("countries-50m.json").json(); // Convert years and amounts for adding them up. const aid = raw.map((d, i) => { const year = Number(d.year); const amount = Number(d.commitment_amount_usd_constant); return { year, donor: d.donor.trim(), recipient: d.recipient.trim(), amount, code: d.coalesced_purpose_code.trim(), purpose: d.coalesced_purpose_name.trim() }; }); const [firstYear, lastYear] = d3.extent(aid, d => d.year); const years = d3.range(firstYear, lastYear + 1); const periodStart = year => firstYear + 5 * Math.floor((year - firstYear) / 5); const periods = d3.range(firstYear, lastYear + 1, 5); const periodLabel = start => start === lastYear ? String(start) : start + "–" + Math.min(start + 4, lastYear); const money = n => "$" + d3.format(".3~s")(n).replace("G", "B"); const percent = d3.format(".1%"); const axisMoney = n => n === 0 ? "$0" : money(n); const compactAxis = g => g.call(g => g.select(".domain").attr("stroke", "#a8b4be")); function chart(width, height, label) { return d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("role", "img") .attr("aria-label", label) .style("max-width", "100%") .style("height", "auto") .style("font", "12px system-ui, sans-serif"); } function selector(label, options, initial, onChange) { const field = d3.create("label").text(label + " "); const input = field.append("select").on("change", function () { onChange(this.value); }); input.selectAll("option").data(options).join("option") .attr("value", d => d.value).text(d => d.label); input.property("value", initial); return field.node(); } function chartGrid(parent) { return parent.append("div").style("display", "grid") .style("grid-template-columns", "repeat(auto-fit, minmax(min(100%, 330px), 1fr))") .style("gap", "16px").style("max-width", "940px"); } function scrollChart(parent, svg, minWidth, label) { svg.style("min-width", minWidth + "px"); parent.append("div").attr("role", "region").attr("aria-label", label) .attr("tabindex", 0).style("overflow-x", "auto").node().append(svg.node()); }41:T1185,{ const box = d3.create("div"); const width = 940, left = 145, heatLeft = 292, top = 45, rowHeight = 15; const legendHeight = 60; const height = top + countrySeries.length * rowHeight + legendHeight; const overview = chart(width, height, "Full-period and annual donor shares by country"); const shareX = d3.scaleLinear([0, 1], [left + 12, heatLeft - 31]); const x = d3.scaleBand(years, [heatLeft, width - 20]).paddingInner(0.07); const y = d3.scaleBand(countrySeries.map(d => d.name), [top, height - legendHeight]).paddingInner(0.09); const rowCenter = d => y(d.name) + y.bandwidth() / 2; const ticks = [firstYear, 1980, 1990, 2000, lastYear]; const balance = d3.scaleLinear([0, 0.5, 1], [receivedColor, "#fff1df", sentColor]).clamp(true); // Give undefined shares a texture distinct from every value on the color scale. const defs = overview.append("defs"); const zeroPattern = defs.append("pattern") .attr("id", "mp2-zero-activity").attr("patternUnits", "userSpaceOnUse") .attr("width", 5).attr("height", 5); zeroPattern.append("rect").attr("width", 5).attr("height", 5).attr("fill", "#e3e7eb"); zeroPattern.append("path").attr("d", "M-1,1 L1,-1 M0,5 L5,0 M4,6 L6,4") .attr("stroke", "#677683").attr("stroke-width", 1); const zeroFill = "url(#mp2-zero-activity)"; overview.append("text").attr("x", left + 12).attr("y", 15).attr("font-weight", 650) .text("1973–2013 · % sent"); overview.append("text").attr("x", heatLeft).attr("y", 15).attr("font-weight", 650) .text("Annual · % sent"); overview.append("g").attr("transform", "translate(0," + top + ")") .call(d3.axisTop(shareX).tickValues([0, 0.5, 1]).tickFormat(d3.format(".0%")).tickSize(3)) .call(compactAxis); overview.append("line").attr("x1", shareX(0.5)).attr("x2", shareX(0.5)) .attr("y1", top).attr("y2", height - legendHeight) .attr("stroke", "#677683").attr("stroke-dasharray", "3 3"); overview.append("g").selectAll("circle").data(countrySeries).join("circle") .attr("cx", d => shareX(d.share)).attr("cy", rowCenter).attr("r", 3.8) .attr("fill", "#263746") .append("title").text(d => d.name + " · " + percent(d.share) + " sent\n" + money(d.outgoing) + " sent · " + money(d.incoming) + " received"); overview.append("g").attr("transform", "translate(0," + top + ")") .call(d3.axisTop(x).tickValues(ticks).tickFormat(d3.format("d"))).call(compactAxis); overview.append("g").attr("transform", "translate(" + left + ",0)") .call(d3.axisLeft(y).tickSize(0).tickPadding(6)).call(compactAxis); overview.append("g").selectAll("rect").data(countrySeries.flatMap(d => d.annual)) .join("rect").attr("x", d => x(d.year)).attr("y", d => y(d.name)) .attr("width", x.bandwidth()).attr("height", y.bandwidth()) .attr("fill", d => d.sent + d.received > 0 ? balance(d.sent / (d.sent + d.received)) : zeroFill) .append("title").text(d => d.name + " · " + d.year + "\nSent " + money(d.sent) + " · Received " + money(d.received) + (d.sent + d.received > 0 ? "\nDonor share " + percent(d.sent / (d.sent + d.received)) : "\nZero recorded activity")); // Bostock's Color Legend is the design reference for the continuous key. const ramp = defs.append("linearGradient").attr("id", "mp2-donor-share"); ramp.selectAll("stop").data([0, 0.5, 1]).join("stop") .attr("offset", d => d).attr("stop-color", d => balance(d)); const legendY = height - 34, rampWidth = 340; overview.append("text").attr("x", left).attr("y", legendY - 6).text("Share of recorded aid sent"); overview.append("rect").attr("x", left).attr("y", legendY) .attr("width", rampWidth).attr("height", 12).attr("fill", "url(#mp2-donor-share)") .attr("stroke", "#a8b4be"); const legend = [ [0, "0% · only receives", "start"], [0.5, "50% · equal amounts", "middle"], [1, "100% · only sends", "end"] ]; overview.append("g").selectAll("text").data(legend).join("text") .attr("x", d => left + d[0] * rampWidth).attr("y", legendY + 28) .attr("text-anchor", d => d[2]).text(d => d[1]); const hatchX = left + rampWidth + 45; overview.append("rect").attr("x", hatchX).attr("y", legendY) .attr("width", 16).attr("height", 12).attr("fill", zeroFill).attr("stroke", "#a8b4be"); overview.append("text").attr("x", hatchX + 23).attr("y", legendY + 10).text("Zero recorded activity"); scrollChart(box, overview, 760, "Country donor shares by year and full period"); display(box.node()); }42:T12c4,{ const ticks = [firstYear, 1980, 1990, 2000, lastYear]; const detail = d3.create("div"); const controls = detail.append("div").style("display", "flex").style("flex-wrap", "wrap").style("gap", "12px"); const key = detail.append("p").style("display", "flex").style("flex-wrap", "wrap").style("gap", "16px"); const lines = [ {field: "sent", label: "Sent", color: sentColor, dash: null}, {field: "received", label: "Received", color: receivedColor, dash: "5 3"} ]; for (const line of lines) { const item = key.append("span"); item.append("span").attr("aria-hidden", "true").style("display", "inline-block") .style("width", "20px").style("margin-right", "6px").style("vertical-align", "middle") .style("border-top", "2px " + (line.dash ? "dashed " : "solid ") + line.color); item.append("span").text(line.label); } key.append("span").text("Constant USD · shared scale"); const panels = chartGrid(detail); const byCountry = new Map(countrySeries.map(d => [d.name, d])); // Use the same maximum so the two country charts are comparable. const commonUpper = d3.max(countrySeries, country => d3.max(country.annual, d => Math.max(d.sent, d.received))); const options = countryNames.map(name => ({value: name, label: name})); const country = selector("Country", options, "Japan", selectCountries).querySelector("select"); const compare = selector("Compare with", [{value: "", label: "One country"}, ...options], "India", selectCountries).querySelector("select"); const axis = selector("Dollar axis", [ {value: "common", label: "Same scale for all countries"}, {value: "local", label: "Fit countries shown"} ], "common", selectCountries).querySelector("select"); controls.node().append(country.parentNode, compare.parentNode, axis.parentNode); function selectCountries() { const primary = country.value; if (compare.value === primary) compare.value = ""; const secondary = compare.value; d3.select(compare).selectAll("option").property("disabled", d => d.value === primary); const selection = [primary, secondary].filter(Boolean); const series = selection.map(name => byCountry.get(name)); const upper = axis.value === "common" ? commonUpper : d3.max(series, country => d3.max(country.annual, d => Math.max(d.sent, d.received))); panels.selectAll("*").remove(); series.forEach(d => drawCountry(d, upper)); } function drawCountry(series, upper) { const panel = panels.append("div").style("min-width", "0"); panel.append("p").style("font-weight", "bold").style("margin", "0 0 4px").text(series.name); panel.append("p").style("margin", "0").text("1973–2013 totals · " + money(series.outgoing) + " sent · " + money(series.incoming) + " received · " + percent(series.share) + " sent"); const w = 390, h = 225, m = {left: 55, right: 16, top: 12, bottom: 28}; const svg = chart(w, h, series.name + " annual aid sent and received").style("width", "100%").style("max-width", "520px"); const sx = d3.scaleLinear([firstYear, lastYear], [m.left, w - m.right]); const sy = d3.scaleLinear([0, upper || 1], [h - m.bottom, m.top]).nice(); svg.append("g").attr("transform", "translate(" + m.left + ",0)") .call(d3.axisLeft(sy).ticks(5).tickSize(-(w - m.right - m.left)).tickFormat(axisMoney)) .call(g => g.selectAll(".tick line").attr("stroke", "#e2e8ed")).call(compactAxis); svg.append("g").attr("transform", "translate(0," + (h - m.bottom) + ")") .call(d3.axisBottom(sx).tickValues(ticks).tickFormat(d3.format("d"))).call(compactAxis); const peaks = []; for (const {field, label, color, dash} of lines) { svg.append("path").datum(series.annual).attr("fill", "none") .attr("stroke", color).attr("stroke-width", 2.2).attr("stroke-dasharray", dash) .attr("d", d3.line().x(d => sx(d.year)).y(d => sy(d[field]))); svg.append("g").selectAll("circle").data(series.annual.filter(d => d[field] > 0)) .join("circle").attr("cx", d => sx(d.year)).attr("cy", d => sy(d[field])) .attr("r", 2.4).attr("fill", color).append("title") .text(d => d.year + " · " + label + " " + money(d[field])); const peak = d3.greatest(series.annual, d => d[field]); if (peak[field] > 0) { svg.append("circle").attr("cx", sx(peak.year)).attr("cy", sy(peak[field])) .attr("r", 5).attr("fill", "none").attr("stroke", color) .attr("stroke-width", 1.5).attr("pointer-events", "none"); peaks.push(label + " peak " + money(peak[field]) + " in " + peak.year); } } panel.node().append(svg.node()); panel.append("p").style("margin", "0").style("font-size", "0.9em").text(peaks.join(" · ")); } selectCountries(); display(detail.node()); }43:Ta62,**Analysis.** Japan’s outgoing commitments peaked at $10.78B in 1997. They were below $5B in the years immediately before and after. India’s receipts dipped to $1.14B in 2000 and rebounded to $2.20B in 2001. ### Visualization #1 · Combined analysis #### 1.1 · Annual amounts sent and received Japan sent $0.94B in 1973 and $2.64B in 2013, with much larger outgoing commitments in parts of the late 1990s. Its highest incoming year was 1987, at about $0.53B. India had zero outgoing commitments recorded across the period. Its annual receipts fluctuated, from about $2.3B in 1973 to $5.39B in 2007 and $4.55B in 2013. #### 1.2 · Mostly sending, mostly receiving, and balanced countries The United States ($116.18B sent, $0.10B received) and Japan ($114.18B sent, $2.08B received) mostly sent aid. India and Thailand were primarily recipients, with $133.98B and $49.04B received. Austria ($0.78B sent, $0.77B received) and Australia ($2.45B sent, $2.57B received) were close to balanced overall. Their heatmap rows show that the balance still varied from year to year. #### 1.3 · Reversals in both directions Korea moved from primarily receiving to primarily sending. It received $7.76B in 1998–2002 and sent almost nothing. In 2003–2007 it sent $638M and received $261M, then sent $264M with zero receipts recorded in 2008–2012. Kuwait moved from primarily sending to primarily receiving. It went from $266M sent and about $0.5M received in 1983–1987 to $94M sent and $7.45B received in 1988–1992. Saudi Arabia also moved from sending to receiving: its recorded donations end in 1987, and its receipts peaked at $2.72B in 1999. #### 1.4 · Sudden peaks and valleys Japan's annual outgoing commitments rose from $3.91B in 1996 to a peak of $10.78B in 1997, then fell to $4.49B in 1998 and rebounded to $8.63B in 1999. India's receipts reached a local valley of $1.14B in 2000, compared with $1.93B in 1999 and $2.20B in 2001. The sharpest single-year spike in the data is Poland's receipts in 1992, which rose from $326M in 1991 to $9.14B and fell to $367M in 1993. ### Visualization #1 · Design rationale The heatmap aligns all countries on one timeline, making it easy to scan for reversals. Its 50% midpoint and separate hatch distinguish balance from zero recorded activity. The dot column makes long-run shares comparable by position. The heatmap encodes shares, so the line charts give the dollar amounts behind those patterns. The fixed dollar scale supports comparisons across selections. Fitting the scale to the countries shown brings smaller changes into view and keeps both panels on a shared scale for that selection.44:T6f2,// Leave out unspecified purposes before ranking them. const specifiedAid = aid.filter(d => d.code && d.code !== "99810" && d.purpose && d.purpose.toLowerCase() !== "unspecified"); // Rank purpose codes by total dollars across all years. const topPurposes = d3.rollups(specifiedAid, rows => ({ total: d3.sum(rows, d => d.amount), label: d3.greatest(d3.rollups(rows, v => v.length, d => d.purpose), d => d[1])[0] }), d => d.code) .sort((a, b) => d3.descending(a[1].total, b[1].total)) .slice(0, 10).map(([code, d]) => ({code, ...d})); function purposeSeries(grouped) { const amounts = d3.rollup(specifiedAid, rows => d3.sum(rows, d => d.amount), d => grouped ? periodStart(d.year) : d.year, d => d.code); return (grouped ? periods : years).map(start => { const values = new Map(topPurposes.map(p => [p.code, amounts.get(start)?.get(p.code) ?? 0])); const yearCount = grouped ? Math.min(5, lastYear - start + 1) : 1; return {start, values, yearCount, total: d3.sum(values.values())}; }); } const purposePeriods = purposeSeries(true); const purposeYears = purposeSeries(false); const purposeCodes = topPurposes.map(d => d.code); const purposeColor = d3.scaleOrdinal(purposeCodes, d3.schemeTableau10); function purposeValues({grouped, showShare}) { const rows = grouped ? purposePeriods : purposeYears; // Use the top-ten total for shares and the year count for annual averages. const value = (row, code) => row.values.get(code) / (showShare ? (row.total || 1) : row.yearCount); const upper = showShare ? 1 : d3.max(rows, row => d3.max(purposeCodes, code => value(row, code))); const axisLabel = showShare ? "Share of top-ten commitment dollars" : "Average commitments per year (constant USD)"; return {rows, value, upper, axisLabel}; }45:T1894,{ const box = d3.create("div"); const controls = box.append("div").style("display", "flex").style("flex-wrap", "wrap").style("gap", "16px"); const panel = box.append("div"); const codes = purposeCodes; const lookup = new Map(topPurposes.map(d => [d.code, d])); const color = purposeColor; const viewControl = selector("View", [ {value: "compare", label: "Compare purposes"}, {value: "stack", label: "Stacked composition"} ], "compare", render); const groupControl = selector("Group years", [ {value: "period", label: "Five-year periods"}, {value: "year", label: "Individual years"} ], "period", render); const valueControl = selector("Show", [ {value: "share", label: "Share of top ten"}, {value: "amount", label: "Dollars per year"} ], "share", render); const purposeControl = selector("Highlight purpose", [ {value: "all", label: "All purposes"}, ...topPurposes.map(d => ({value: d.code, label: d.label})) ], "all", render); purposeControl.querySelector("select").style.maxWidth = "min(45vw, 320px)"; controls.node().append(viewControl, groupControl, valueControl, purposeControl); function comparisonChart(rows, value, upper, showShare, grouped, highlighted, axisLabel) { const comparison = d3.create("div"); comparison.append("p").text(axisLabel + (grouped ? " · Ticks mark period starts" : " · One bar per year")); const grid = chartGrid(comparison); const width = 370, height = 126, left = 52, right = 354, plotBottom = 100; const bins = rows.map(d => d.start); const ticks = grouped ? bins.filter((_, i) => i % 2 === 0) : bins.filter(year => year === firstYear || (year % 10 === 0 && lastYear - year >= 5) || year === lastYear); const x = d3.scaleBand(bins, [left, right]).padding(0.15); const y = d3.scaleLinear([0, upper], [plotBottom, 12]); if (!showShare) y.nice(3); const format = showShare ? d3.format(".0%") : axisMoney; const formatValue = showShare ? percent : money; topPurposes.forEach(({code, label}, i) => { const tile = grid.append("div").style("min-width", "0"); if (highlighted === code) tile.style("outline", "2px solid #263746").style("outline-offset", "3px"); tile.append("p").style("font-weight", "650").style("margin", "0 0 4px").style("font-size", "14px") .text((i + 1) + ". " + label); const svg = chart(width, height, label + " · " + axisLabel).style("width", "100%"); svg.append("g").attr("transform", "translate(" + left + ",0)") .call(d3.axisLeft(y).ticks(3).tickFormat(format).tickSize(-(right - left))) .call(g => g.selectAll(".tick line").attr("stroke", "#e2e8ed")).call(compactAxis) .attr("font-size", 12); svg.append("g").attr("transform", "translate(0," + plotBottom + ")") .call(d3.axisBottom(x).tickValues(ticks).tickFormat(String)).call(compactAxis) .attr("font-size", 12); svg.append("g").selectAll("rect").data(rows).join("rect") .attr("x", row => x(row.start)).attr("width", x.bandwidth()) .attr("y", row => y(value(row, code))).attr("height", row => plotBottom - y(value(row, code))) .attr("fill", "#21668e").append("title") .text(row => (grouped ? periodLabel(row.start) : row.start) + " · " + label + " · " + formatValue(value(row, code))); tile.node().append(svg.node()); }); return comparison.node(); } function render() { const grouped = groupControl.querySelector("select").value === "period"; const showShare = valueControl.querySelector("select").value === "share"; const stacked = viewControl.querySelector("select").value === "stack"; const highlighted = purposeControl.querySelector("select").value; const {rows, value, upper, axisLabel} = purposeValues({grouped, showShare}); const label = grouped ? periodLabel : String; const bins = rows.map(d => d.start); const axisFormat = showShare ? d3.format(".0%") : axisMoney; if (stacked) { const w = 850, h = 310, m = {left: 65, right: 24, top: 15, bottom: 37}; const svg = chart(w, h, axisLabel + " for the ten leading purposes"); const x = d3.scaleBand(bins, [m.left, w - m.right]).padding(grouped ? 0.19 : 0.08); const y = d3.scaleLinear([0, showShare ? 1 : d3.max(rows, d => d.total / d.yearCount)], [h - m.bottom, m.top]); if (!showShare) y.nice(); const ticks = grouped ? bins : bins.filter(year => year === firstYear || year % 10 === 0 || year === lastYear); const layers = d3.stack().keys(codes).value(value)(rows); svg.append("g").selectAll("g").data(layers).join("g") .attr("fill", d => color(d.key)) .attr("opacity", d => highlighted === "all" || highlighted === d.key ? 1 : 0.22) .each(function (layer) { const code = layer.key; d3.select(this).selectAll("rect").data(layer.filter(d => d[1] > d[0])).join("rect") .attr("x", d => x(d.data.start)).attr("y", d => y(d[1])) .attr("width", x.bandwidth()).attr("height", d => y(d[0]) - y(d[1])) .attr("stroke", d => y(d[0]) - y(d[1]) > 2 ? "#fff" : null).attr("stroke-width", 0.65) .append("title").text(d => { const amount = d.data.values.get(code); return label(d.data.start) + " · " + lookup.get(code).label + "\n" + money(amount) + " total · " + money(amount / d.data.yearCount) + "/year · " + percent(amount / d.data.total) + " of the top ten"; }); }); svg.append("g").attr("transform", "translate(0," + (h - m.bottom) + ")") .call(d3.axisBottom(x).tickValues(ticks).tickFormat(label)).call(compactAxis).attr("font-size", 13); svg.append("g").attr("transform", "translate(" + m.left + ",0)") .call(d3.axisLeft(y).ticks(5).tickFormat(axisFormat)).call(compactAxis).attr("font-size", 13); panel.selectAll("*").remove(); panel.append("p").text(axisLabel + (grouped ? " · 2013 covers one year" : " · One bar per year")); scrollChart(panel, svg, 670, "Stacked aid purposes over time"); } else { panel.node().replaceChildren(comparisonChart(rows, value, upper, showShare, grouped, highlighted, axisLabel)); } } render(); display(box.node()); }46:T574,{ const ranking = d3.create("div").style("overflow-x", "auto"); const table = ranking.append("table").style("border-collapse", "collapse"); table.append("caption").style("text-align", "left").style("font-weight", "bold") .text("1973–2013 totals and color key"); table.append("thead").append("tr").selectAll("th") .data(["Rank", "Purpose", "Total", "Highest share in grouped view"]) .join("th").attr("scope", "col").style("text-align", "left").style("padding", "5px 10px").text(d => d); const tr = table.append("tbody").selectAll("tr").data(topPurposes).join("tr"); tr.append("td").style("padding", "4px 10px").text((d, i) => i + 1); tr.append("td").style("padding", "4px 10px").each(function (d) { d3.select(this).append("span").attr("aria-hidden", "true").style("display", "inline-block") .style("width", "0.8em").style("height", "0.8em").style("margin-right", "0.5em") .style("background", purposeColor(d.code)); d3.select(this).append("span").text(d.label); }); tr.append("td").style("padding", "4px 10px").style("text-align", "right").text(d => money(d.total)); tr.append("td").style("padding", "4px 10px").text(d => { const share = row => row.values.get(d.code) / (row.total || 1); const peak = d3.greatest(purposePeriods, share); return periodLabel(peak.start) + " · " + percent(share(peak)); }); display(ranking.node()); }47:Tcda,{ const purposeDetail = d3.create("div").attr("aria-live", "polite"); const detailControls = d3.create("div").style("display", "flex").style("flex-wrap", "wrap").style("gap", "16px"); const detailPurpose = selector("Purpose", topPurposes.map(d => ({value: d.code, label: d.label})), "21050", renderDetail); const detailYears = selector("Group years", [ {value: "period", label: "Five-year periods"}, {value: "year", label: "Individual years"} ], "year", renderDetail); const detailUnits = selector("Show", [ {value: "share", label: "Share of top ten"}, {value: "amount", label: "Dollars per year"} ], "share", renderDetail); detailControls.node().append(detailPurpose, detailYears, detailUnits); const detailOutput = d3.create("div"); detailOutput.node().append(detailControls.node(), purposeDetail.node()); function renderDetail() { const highlighted = detailPurpose.querySelector("select").value; const grouped = detailYears.querySelector("select").value === "period"; const showShare = detailUnits.querySelector("select").value === "share"; const {rows, value, upper, axisLabel} = purposeValues({grouped, showShare}); const label = grouped ? periodLabel : String; const bins = rows.map(d => d.start); const axisFormat = showShare ? d3.format(".0%") : axisMoney; const valueFormat = showShare ? percent : money; purposeDetail.selectAll("*").remove(); const name = topPurposes.find(d => d.code === highlighted).label; const peak = d3.greatest(rows, row => value(row, highlighted)); purposeDetail.append("p").style("font-weight", "bold").text(name + " · " + axisLabel); purposeDetail.append("p").text("Peak " + valueFormat(value(peak, highlighted)) + " in " + label(peak.start) + "."); const w = 400, h = 190, left = 54, right = 381, bottom = h - 30; const detail = chart(w, h, name + " on a common zero-based scale").style("width", "100%").style("max-width", "620px"); const x = d3.scaleBand(bins, [left, right]).padding(grouped ? 0.19 : 0.08); const ticks = grouped ? bins.filter((_, i) => i % 2 === 0) : bins.filter(year => year === firstYear || (year % 10 === 0 && lastYear - year >= 5) || year === lastYear); const detailY = d3.scaleLinear([0, upper], [bottom, 12]); if (!showShare) detailY.nice(3); detail.append("g").attr("transform", "translate(" + left + ",0)") .call(d3.axisLeft(detailY).ticks(3).tickFormat(axisFormat).tickSize(-(right - left))) .call(g => g.selectAll(".tick line").attr("stroke", "#e2e8ed")).call(compactAxis).attr("font-size", 12); detail.append("g").attr("transform", "translate(0," + bottom + ")") .call(d3.axisBottom(x).tickValues(ticks).tickFormat(String)).call(compactAxis).attr("font-size", 12); detail.append("g").selectAll("rect").data(rows).join("rect") .attr("x", row => x(row.start)).attr("width", x.bandwidth()) .attr("y", row => detailY(value(row, highlighted))) .attr("height", row => bottom - detailY(value(row, highlighted))) .attr("fill", purposeColor(highlighted)) .append("title").text(row => label(row.start) + " · " + valueFormat(value(row, highlighted))); purposeDetail.node().append(detail.node()); } renderDetail(); display(detailOutput.node()); }48:T9c0,**Analysis.** Air transport's share jumped from 18.8% in 1998 to 71.3% in 1999. It stayed above half in 2000 (52.5%) and 2001 (54.7%), returned to 71.3% in 2002, then fell to 0.1% in 2003. This was a sustained four-year period of prominence, not a one-year spike. ### Visualization #2 · Combined analysis #### 2.1 · Top ten purposes by total dollars Air transport led with $39.81B, followed by rail transport ($20.78B) and industrial development ($19.75B). The remaining purposes, in order, were rescheduling and refinancing, non-renewable power generation, import support for capital goods, social and welfare services, food aid and food security, large water and sanitation systems, and telecommunications. The ranking table gives the total for each. #### 2.2 · How the leading purposes changed | Period | Leading purpose | Share of the top ten | |---|---|---:| | 1973–1977 | Food aid and food security | 32.3% | | 1978–1982 | Air transport | 39.4% | | 1983–1987 | Industrial development | 23.1% | | 1988–1992 | Rescheduling and refinancing | 37.0% | | 1993–1997 | Air transport | 35.3% | | 1998–2002 | Air transport | 57.8% | | 2003–2007 | Social and welfare services | 35.4% | | 2008–2012 | Rail transport | 70.6% | | 2013 | Rail transport | 82.0% | Air transport's share rose by about 22.5 percentage points between 1993–1997 and 1998–2002, when it accounted for $15.49B. Social and welfare services then led in 2003–2007 ($3.88B), with large water and sanitation systems second at 26.2%. Rail took over in 2008–2012 ($8.50B) and remained first in 2013. The peak-share column also shows when individual purposes were strongest. Telecommunications peaked at 8.7% in 1978–1982, import support at 21.5% in 1988–1992, and non-renewable power generation at 19.1% in 1993–1997. The yearly view shows why both units matter. Air transport had the larger dollar amount in 1999 ($5.90B, 71.3%), while rail took a larger share in 2013 ($2.25B, 82.0%). ### Visualization #2 · Design rationale The directly labeled panels make it easy to follow one purpose because their bars share a baseline and scale. They wrap to one column on narrow screens. The stack puts the full mix for each period in one column, which makes changes in composition easy to spot. Middle layers start at different heights, so the separate panels support more precise comparisons of those purposes. The grouped view summarizes longer shifts, and the yearly view reveals individual spikes.49:T1422,const geography = world.features.filter(f => f.properties.ADMIN !== "Antarctica"); // Match country names in the CSV to the map. const countryAliases = { "United States": "United States of America", "Korea": "South Korea", "Czech Republic": "Czechia", "Slovak Republic": "Slovakia" }; const featuresByName = new Map(geography.map(f => [f.properties.ADMIN, f])); const asianSubregions = { "Southern Asia": "South Asia", "Eastern Asia": "East Asia", "South-Eastern Asia": "Southeast Asia", "Western Asia": "Western Asia" }; function recipientRegion(feature) { const {CONTINENT, SUBREGION} = feature.properties; if (CONTINENT === "Asia") return asianSubregions[SUBREGION]; if (CONTINENT === "North America" || CONTINENT === "Oceania") return "North America and Oceania"; return CONTINENT; } const regions = [ "South Asia", "East Asia", "Southeast Asia", "Western Asia", "South America", "Europe", "Africa", "North America and Oceania" ]; const recipientAmounts = d3.rollup(aid, v => d3.sum(v, d => d.amount), d => periodStart(d.year), d => d.recipient); const recipientPeriods = periods.map(start => { // The last period has fewer than five years. const yearCount = Math.min(5, lastYear - start + 1); const countries = [...(recipientAmounts.get(start) ?? new Map())].map(([name, total]) => { const feature = featuresByName.get(countryAliases[name] ?? name); if (!feature) throw new Error("Missing course geography for " + name); const region = recipientRegion(feature); if (!regions.includes(region)) throw new Error("Missing region for " + name); return {name, total, annualAverage: total / yearCount, region, feature}; }); const byRegion = d3.rollup(countries, v => d3.sum(v, d => d.total), d => d.region); return {start, yearCount, countries, byRegion, total: d3.sum(countries, d => d.total)}; }); const mapWidth = 940, mapHeight = 460, mapBottom = mapHeight - 62; const projection = d3.geoNaturalEarth1().fitExtent([[12, 6], [mapWidth - 12, mapBottom - 1]], {type: "FeatureCollection", features: geography}); const mapPath = d3.geoPath(projection); const regionColor = d3.scaleOrdinal(regions, d3.schemeTableau10); const largestAnnualReceipt = d3.max(recipientPeriods, d => d3.max(d.countries, c => c.annualAverage)); // Use a square root so circle area is proportional to dollars. const mapRadius = d3.scaleSqrt([0, largestAnnualReceipt], [0, 27]); function mapPoint(feature) { // Use the largest land piece for countries with several separate polygons. if (feature.geometry.type === "MultiPolygon") { const pieces = feature.geometry.coordinates.map(coordinates => ({type: "Polygon", coordinates})); return projection(d3.geoCentroid(d3.greatest(pieces, d3.geoArea))); } return projection(d3.geoCentroid(feature)); } const recipientPoints = new Map(); for (const {countries} of recipientPeriods) { for (const {name, feature} of countries) { if (!recipientPoints.has(name)) recipientPoints.set(name, mapPoint(feature)); } } function activeRecipients(period) { return period.countries.filter(d => d.total > 0).sort((a, b) => b.total - a.total); } function placeRecipientSymbols(countries, position, radius, {gap, step = gap}) { const placed = []; for (const country of countries) { const [anchorX, anchorY] = position(country.name); const r = radius(country); let x = anchorX, y = anchorY; // Try nearby positions in eight directions, starting with the closest ring. for (let attempt = 0; placed.some(d => Math.hypot(x - d.x, y - d.y) < r + d.r + gap); attempt += 1) { const distance = step * (Math.floor(attempt / 8) + 1); const angle = (attempt % 8) * Math.PI / 4; x = anchorX + distance * Math.cos(angle); y = anchorY + distance * Math.sin(angle); } placed.push({...country, anchorX, anchorY, x, y, r}); } return placed; } function drawRecipientLeaders(layer, positioned, strokeWidth = 0.9) { layer.selectAll("line").data(positioned.filter(d => d.x !== d.anchorX || d.y !== d.anchorY), d => d.name) .join("line").attr("x1", d => d.anchorX).attr("y1", d => d.anchorY) .attr("x2", d => d.x).attr("y2", d => d.y).attr("stroke", "#526474") .attr("stroke-width", strokeWidth).attr("pointer-events", "none").lower(); } function drawRecipientAmounts(layer, countries, start, position, radiusScale = 1) { // Place the largest circles first. Shift smaller ones only when they need space. const positioned = placeRecipientSymbols(countries, position, d => mapRadius(d.annualAverage) * radiusScale, {gap: 2 * radiusScale}); drawRecipientLeaders(layer, positioned, 0.9 * radiusScale); const dots = layer.selectAll("circle").data(positioned, d => d.name).join("circle").order() .attr("cx", d => d.x).attr("cy", d => d.y) .attr("r", d => d.r).attr("fill", d => regionColor(d.region)) .attr("fill-opacity", 0.8).attr("stroke", "#fff").attr("stroke-width", 0.8 * radiusScale); dots.selectAll("title").data(d => [d]).join("title") .text(d => d.name + " · " + money(d.annualAverage) + "/year\n" + money(d.total) + " in " + periodLabel(start)); return positioned; } 4a:T124e,{ const box = d3.create("div"); const controls = box.append("div").style("display", "flex").style("flex-wrap", "wrap").style("gap", "16px"); const caption = box.append("p").attr("aria-live", "polite"); const w = mapWidth, h = mapHeight; const map = chart(w, h, "Incoming commitments per year in the selected period"); map.append("defs").append("clipPath").attr("id", "mp2-focus-clip") .append("rect").attr("width", w).attr("height", mapBottom); const viewport = map.append("g").attr("clip-path", "url(#mp2-focus-clip)"); const base = viewport.append("g"); base.selectAll("path").data(geography).join("path") .attr("d", mapPath).attr("fill", "#edf1f3").attr("stroke", "#fff") .attr("stroke-width", 0.6).attr("vector-effect", "non-scaling-stroke"); const markers = viewport.append("g"); const focusLabel = viewport.append("text").attr("font-weight", 650) .attr("fill", "#263746").attr("stroke", "#fff").attr("stroke-width", 3) .attr("paint-order", "stroke").attr("pointer-events", "none"); const countriesByRegion = d3.rollup(recipientPeriods.flatMap(d => d.countries), countries => [...new Set(countries.map(d => d.name))], d => d.region); map.append("text").attr("x", 25).attr("y", h - 30).text("Annual average, constant USD"); [1e8, 1e9, 4e9].forEach((value, i) => { const x = 260 + i * 155; map.append("circle").attr("cx", x).attr("cy", h - 30).attr("r", mapRadius(value)) .attr("fill", "none").attr("stroke", "#526474"); map.append("text").attr("x", x + mapRadius(value) + 6).attr("y", h - 26).text(money(value)); }); box.node().append(map.node()); const amounts = box.append("details").style("margin", "8px 0 16px"); amounts.append("summary").text("Recipient amounts · ranked for this period and map focus"); const recipientTable = amounts.append("div").style("overflow-x", "auto") .append("table").style("border-collapse", "collapse"); recipientTable.append("thead").append("tr").selectAll("th") .data(["Recipient", "Region", "Per year", "Period total"]) .join("th").attr("scope", "col").style("text-align", "left") .style("padding", "4px 10px").text(d => d); const recipientRows = recipientTable.append("tbody"); const emptyMessage = amounts.append("p").text("No positive receipts recorded for this selection."); const menu = selector("Recipient period", periods.map(start => ({value: start, label: periodLabel(start)})), firstYear, selectPeriod); const focus = selector("Map focus", [ {value: "world", label: "World"}, ...regions.map(region => ({value: region, label: region})) ], "world", selectPeriod); controls.node().append(menu, focus); function focusTransform(region) { if (region === "world") return d3.zoomIdentity; // Fit the same recipient locations in every period and keep symbol sizes fixed. const points = countriesByRegion.get(region).map(name => recipientPoints.get(name)); const [left, right] = d3.extent(points, p => p[0]); const [top, bottom] = d3.extent(points, p => p[1]); const scale = Math.min(4, (w - 100) / Math.max(1, right - left), (mapBottom - 84) / Math.max(1, bottom - top)); return d3.zoomIdentity.translate(w / 2, mapBottom / 2).scale(scale) .translate(-(left + right) / 2, -(top + bottom) / 2); } function selectPeriod() { const start = Number(menu.querySelector("select").value); const region = focus.querySelector("select").value; const period = recipientPeriods.find(d => d.start === start); const active = activeRecipients(period).filter(d => region === "world" || d.region === region); const average = d3.sum(active, d => d.annualAverage); caption.text(periodLabel(start) + " · " + (region === "world" ? "World" : region) + " · " + money(average) + "/year · " + active.length + " recipients"); const transform = focusTransform(region); base.attr("transform", transform.toString()); const positioned = drawRecipientAmounts(markers, active, start, name => transform.apply(recipientPoints.get(name))); const leader = positioned[0]; focusLabel.text(""); if (region !== "world" && leader) { focusLabel.attr("x", leader.x).attr("y", leader.y - leader.r - 6) .attr("text-anchor", "middle").text(leader.name); } recipientTable.property("hidden", active.length === 0); emptyMessage.property("hidden", active.length > 0); recipientRows.selectAll("tr").data(active, d => d.name).join("tr") .selectAll("td").data(d => [d.name, d.region, money(d.annualAverage), money(d.total)]) .join("td").style("padding", "4px 10px").text(d => d); } selectPeriod(); display(box.node()); }4b:T842,{ const timelineBox = d3.create("div"); const h2 = 235, m = {left: 64, right: 24, top: 25, bottom: 35}; const timeline = chart(mapWidth, h2, "Regional shares of all incoming commitments by period"); const x = d3.scaleBand(periods, [m.left, mapWidth - m.right]).padding(0.19); const y = d3.scaleLinear([0, 1], [h2 - m.bottom, m.top]); // Divide each region’s amount by the total received that period. const layers = d3.stack().keys(regions) .value((d, region) => (d.byRegion.get(region) ?? 0) / d.total)(recipientPeriods); timeline.append("g").selectAll("g").data(layers).join("g") .attr("fill", d => regionColor(d.key)) .each(function (layer) { const region = layer.key; d3.select(this).selectAll("rect").data(layer.filter(d => d[1] > d[0])).join("rect") .attr("x", d => x(d.data.start)).attr("width", x.bandwidth()) .attr("y", d => y(d[1])).attr("height", d => y(d[0]) - y(d[1])) .attr("stroke", d => y(d[0]) - y(d[1]) > 2 ? "#fff" : null).attr("stroke-width", 0.65) .append("title").text(d => periodLabel(d.data.start) + " · " + region + " · " + percent(d[1] - d[0]) + "\n" + money(d.data.byRegion.get(region)) + " across the period"); }); timeline.append("g").attr("transform", "translate(0," + (h2 - m.bottom) + ")") .call(d3.axisBottom(x).tickFormat(periodLabel)).call(compactAxis); timeline.append("g").attr("transform", "translate(" + m.left + ",0)") .call(d3.axisLeft(y).ticks(4, "%")).call(compactAxis); scrollChart(timelineBox, timeline, 720, "Regional shares by period"); const key = timelineBox.append("div").style("display", "flex").style("flex-wrap", "wrap").style("gap", "14px"); regions.forEach(region => { const item = key.append("span"); item.append("span").attr("aria-hidden", "true").style("display", "inline-block") .style("width", "0.8em").style("height", "0.8em").style("margin-right", "0.4em") .style("background", regionColor(region)).style("box-shadow", "inset 0 0 0 1px #526474"); item.append("span").text(region); }); display(timelineBox.node()); }4c:Td5f,{ const comparison = d3.create("details").attr("open", true); comparison.append("summary").text("3c · Compare all nine recipient maps"); const controls = comparison.append("div").style("margin-top", "12px"); const width = 460, height = 202, scale = 0.475; const dotRadius = 3.4; const origin = 6; const smallPoint = name => recipientPoints.get(name).map(value => origin + value * scale); // Keep each country's displayed location fixed across periods. const allCountries = [...recipientPoints.keys()].sort(d3.ascending).map(name => ({name})); const placed = placeRecipientSymbols(allCountries, smallPoint, () => dotRadius, {gap: 1.8, step: 4.3}); const dotPositions = new Map(placed.map(d => [d.name, d])); const grid = chartGrid(comparison); const land = mapPath({type: "FeatureCollection", features: geography}); const sizeKey = chart(width, 30, "Amount key for all nine maps, annual average in constant USD") .style("width", "100%").style("display", "none"); sizeKey.append("text").attr("x", 5).attr("y", 19).text("Constant USD per year"); [1e9, 4e9].forEach((value, i) => { const x = 175 + i * 95; const r = mapRadius(value) * scale; sizeKey.append("circle").attr("cx", x).attr("cy", 15).attr("r", r) .attr("fill", "none").attr("stroke", "#526474"); sizeKey.append("text").attr("x", x + r + 6).attr("y", 19).text(money(value)); }); const panels = recipientPeriods.map((period, index) => { const label = periodLabel(period.start); const countries = activeRecipients(period); const tile = grid.append("div").style("min-width", "0"); tile.append("p").style("margin", "0").style("font-weight", "650").text(label); const map = chart(width, height, "Recipient locations · " + label).style("width", "100%"); map.append("path").attr("d", land).attr("fill", "#edf1f3") .attr("stroke", "#fff").attr("stroke-width", 0.8) .attr("transform", "translate(" + origin + "," + origin + ") scale(" + scale + ")"); const locations = map.append("g"); const dots = countries.map(d => ({...d, ...dotPositions.get(d.name)})); drawRecipientLeaders(locations, dots); locations.selectAll("circle").data(dots).join("circle") .attr("cx", d => d.x).attr("cy", d => d.y).attr("r", dotRadius) .attr("fill", d => regionColor(d.region)).attr("stroke", "#263746").attr("stroke-width", 0.75) .append("title").text(d => d.name + " · " + d.region + " · " + money(d.total) + " in " + label); const amounts = map.append("g").attr("display", "none"); drawRecipientAmounts(amounts, countries, period.start, smallPoint, scale); tile.node().append(map.node()); if (index === 0) tile.node().append(sizeKey.node()); return {map, locations, amounts, label}; }); controls.node().append(selector("Map symbols", [ {value: "location", label: "Recipient locations"}, {value: "amount", label: "Aid amount per year"} ], "location", mode => { const showLocations = mode === "location"; sizeKey.style("display", showLocations ? "none" : null); for (const {map, locations, amounts, label} of panels) { locations.attr("display", showLocations ? null : "none"); amounts.attr("display", showLocations ? "none" : null); map.attr("aria-label", (showLocations ? "Recipient locations" : "Annual average aid received") + " · " + label); } })); display(comparison.node()); }4d:T8f7,**Analysis.** India appears in all nine periods. The maps show 11 recipients in 1973–1977 and 26 in 1988–1992, including Poland and Kuwait. The 2013 count covers one year. The earlier counts each cover five years. ### Visualization #3 · Combined analysis #### 3.1 · Where the most aid went Across the full record, South Asia had the largest recorded total ($133.98B, 36.5%), followed by South America ($69.47B, 18.9%) and Southeast Asia ($49.04B, 13.4%). In 1973–1977, South Asia accounted for 58.8%, all recorded for India. East Asia and Southeast Asia together accounted for another 27.4%. #### 3.2 · How regional shares shifted - **1988–1992.** Europe rose to 29.5%, nearly matching South Asia at 30.0%. Poland received $15.16B. Western Asia rose to 13.2%, with Kuwait accounting for most of its total. - **1998–2002.** South America led at 22.5%. East Asia rebounded from 4.0% to 16.6%, with Korea receiving $7.76B. Southeast Asia accounted for 16.8%, all recorded for Thailand. - **2003–2007.** South Asia returned to the lead at 50.9% ($18.4B). Europe fell to 4.9%, and East Asia dropped to 0.8%. - **2008–2012.** South Asia accounted for 51.1%, South America for 28.7%, and Africa for 12.8%. Brazil and Colombia received $5.88B and $5.36B respectively. South Africa accounted for the full African share in this extract. - **2013.** South Asia led with 55.5% in this single year. #### 3.3 · What the history shows about need The maps show recurring commitments to India and other recipients alongside periods when aid was concentrated elsewhere, such as Poland and Kuwait in 1988–1992 and Brazil and Colombia in 2008–2012. These patterns show how funding was allocated. To assess relative need, I would also compare measures such as population, income, and unmet funding. ### Visualization #3 · Design rationale The amount maps use a common area scale to compare annual average dollars. Nearby circles are spaced apart, so their displayed centers can shift from their geographic locations. Leader lines show the original anchors, and the recipient table gives exact amounts. The equal-size view makes small recipients visible in every period. Use amount mode to compare magnitudes and the timeline to compare regional shares across all nine periods at once.4e:[{"id":"55260abbc777c0a3b8fed19f3929dd822fef9d5118b53b76b2176d20782910e599eac919999ea8ee85a60b783fd37082574f6591fd46c0d70ddf9b00df71ce27","href":"https://static.observableusercontent.com/files/55260abbc777c0a3b8fed19f3929dd822fef9d5118b53b76b2176d20782910e599eac919999ea8ee85a60b783fd37082574f6591fd46c0d70ddf9b00df71ce27","name":"countries-50m.json","type":"application/json","lastModified":1794526178260,"size":4177662},{"id":"09040dddbda03374a466600047ccbc70c46e6853884eb725db2141c566ca1b78fb7cc935096e8d5468c21e8df215e73fc49cdaaf7e2f1f89139793da25be02b2","href":"https://static.observableusercontent.com/files/09040dddbda03374a466600047ccbc70c46e6853884eb725db2141c566ca1b78fb7cc935096e8d5468c21e8df215e73fc49cdaaf7e2f1f89139793da25be02b2","name":"aiddata.csv","type":"text/csv","lastModified":1794526719075,"size":8760387}] 38:{"id":"999cd3ed0207a4a7","slug":"mini-project-2-temporal-data-visualization-due-nov-12th","title":"Mini-Project 2: Temporal Data Visualization (Due Nov. 12th)","thumbnail":"535487e70b84e6b1de0a613cd117fc773c1af07b09ab42dd979558cea83f61c8","access_level":"public","create_time":"$D2026-11-12T21:32:49.959Z","update_time":"$D2026-11-13T01:14:55.209Z","view_time":null,"first_public_time":"$D2026-11-13T00:00:40.694Z","has_unpublished_edits":null,"fork":{"id":"25807f4e14142959","slug":"2026-infovis-cse_project-2","title":"Mini-Project 2: Temporal Data Visualization (Due Nov. 12th)","owner":{"id":"3d6c0f5acd6a20a4","login":"rk2546","name":"rk2546"}},"stars":0,"starred":false,"owner":{"type":"team","id":"992958b3c9c14128","login":"mitranrameshkumar","name":"Mitran Ramesh kumar","avatar_url":null,"tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":414,"publish_version":414,"role":null,"authored":false,"authors":[{"type":"individual","id":"ed38ba31ccd0f13a","login":"mitranrameshkumar","name":"Mitran Ramesh kumar","avatar_url":null,"tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"992958b3c9c14128","login":"mitranrameshkumar","name":"Mitran Ramesh kumar","avatar_url":null,"tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Mini-Project 2: Temporal Data Visualization (Due Nov. 12th)","cells":[{"id":155,"value":"# Mini-Project 2: Temporal Data Visualization (Due Nov. 12th)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":162,"value":"import { css } from \"@rk2546/infovis-cse-backend\";","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"css","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"---\n## Submission Instructions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"$3c","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":179,"value":"---\n## About the Datasets","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":181,"value":"We have **2** datasets that you must use for this project:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"### Aid Data, Revisited\n\nThis spreadsheet is a simplified and reduced version of the AidData dataset. This dataset describes commitment information for over 1.5 million development finance activities funded between 1947 and 2013. The simplified dataset contains the following columns:\n\n- **`aiddata_id`**: unique ID of the commitment\n- **`aiddata_2_id`**: secondary unique ID\n- **`year`**: year of the commitment\n- **`donor`**: country providing the financial resource\n- **`recipient`**: country receiving the financial resource\n- **`commitment_amount_usd_constant`**: the total amount of financial resources provided\n- **`coalesced_purpose_code`**: categorization ID for the stated purpose of the commitment\n- **`coalesced_purpose_name`**: the purpose of the commitment","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":32,"value":"### Country GeoData\n\nWe also have the GeoJSON data for countries, derived from data from Natural Earth. This GeoJSON is actually a TopoJSON that covers country boundaries at 1:50,000,000 scale.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":182,"value":"---\n## Questions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"$3d","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":183,"value":"---\n## Grading Criteria","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"$3e","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":186,"value":"\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"## Students' Workspace\n\n_From this point onward, you are free to modify the notebook in any way you see fit._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"$3f","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"$40","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"## Visualization #1 · Who sends and receives aid over time?\n\n### Questions\n\n- **1.1** How did the amounts each country sent and received change over time?\n- **1.2** Which countries mostly sent, mostly received, or had similar amounts in both directions?\n- **1.3** Which countries changed their role over time, in either direction?\n- **1.4** Which countries had a sudden peak or valley in their annual amounts?\n\n### Understanding\n\nI sum outgoing and incoming commitments separately for each country and year. The dollar amounts show how large the changes were. I use donor share, sent ÷ (sent + received), to compare roles. The full-period share uses each country's totals over all 41 years. To identify a peak or valley, I compare a year with its neighbors.\n\n### Graphs","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"// Add up money sent and received by country and year.\nconst sent = d3.rollup(aid, v => d3.sum(v, d => d.amount), d => d.donor, d => d.year);\nconst received = d3.rollup(aid, v => d3.sum(v, d => d.amount), d => d.recipient, d => d.year);\nconst countryNames = [...new Set([...sent.keys(), ...received.keys()])].sort();\nconst countrySeries = countryNames.map(name => {\n const annual = years.map(year => ({\n year, name,\n sent: sent.get(name)?.get(year) ?? 0,\n received: received.get(name)?.get(year) ?? 0\n }));\n const outgoing = d3.sum(annual, d => d.sent);\n const incoming = d3.sum(annual, d => d.received);\n return {name, annual, outgoing, incoming, share: outgoing / (outgoing + incoming)};\n}).sort((a, b) => d3.descending(a.share, b.share)\n || d3.descending(a.outgoing + a.incoming, b.outgoing + b.incoming));\n\nconst sentColor = \"#21668e\", receivedColor = \"#a64717\";","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"#### 1a · Country roles and reversals\n\n**Question.** Which countries mostly sent aid, mostly received it, or were close to balanced? Which countries switched roles over time?\n\n**Interpretation.** A dot near 50% means the country sent and received similar amounts over the full period. The heatmap shows whether that balance held from year to year. Blue marks years when a country sent more, orange marks years when it received more, and solid cream marks an equal split for years with activity. Gray hatching marks zero recorded activity.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"$41","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"**Analysis.** Austria and Australia sit near 50%, reflecting similar totals sent and received. Korea shifted from mostly receiving in 1998–2002 to mostly sending in 2003–2007. Kuwait went from mostly sending in 1983–1987 to mostly receiving in 1988–1992.\n\n#### 1b · Annual amounts, peaks, and valleys\n\n**Question.** How did annual amounts sent and received change, and when did they rise or fall sharply?\n\n**Interpretation.** The solid line traces amounts sent, and the dashed line traces amounts received. Both countries use the same dollar scale. This makes it possible to compare their amounts in the same year and judge how sharply a line rose or fell from one year to the next.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"$42","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"$43","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"## Visualization #2 · How did the top ten purposes change over time?\n\n### Questions\n\n- **2.1** What were the top ten coalesced purposes by total commitment dollars across all countries and years?\n- **2.2** How did their shares and dollar amounts change, and which purpose led in different periods?\n\n### Understanding\n\nI rank purposes once by their total constant-dollar commitments and keep those same ten in each view. Grouping by code combines labels that share a code, such as \"Rescheduling and refinancing\" and \"RESCHEDULING AND REFINANCING\", so this top ten can differ from a ranking by purpose name. I exclude the general unspecified category (99810, “Sectors not specified”) and any exact “Unspecified” label. Records with an identified sector remain eligible. A period's share divides a purpose's dollars by that period's total for the ten selected purposes. Dollars per year divides by the number of years in the period, including one for 2013.\n\n### Graphs","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"$44","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"#### 2a · Purpose trends over time\n\n**Question.** Which purpose led in each period, and how did the mix change over time?\n\n**Interpretation.** The separate panels share a scale, which makes it easy to see which purpose led in a given period. The stacked bars show how the overall mix changed, with colors that match the ranking table. Shares measure each purpose’s prominence within the top ten. Dollars per year show how much was committed on average.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"$45","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"**Analysis.** Food aid and food security led in 1973–1977 with 32.3% of the top-ten total. Air transport led in 1998–2002 with 57.8%. By 2013, rail transport accounted for 82.0%.\n\n#### 2b · Full-period purpose ranking\n\n**Question.** Which ten purposes had the largest total commitments across all years?\n\n**Interpretation.** The table ranks purposes by their total commitments from 1973 to 2013. The last column shows when each purpose accounted for its largest share of the top-ten total. The swatches match the colors in the stacked view.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"$46","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"**Analysis.** The three highest totals were air transport ($39.81B), rail transport ($20.78B), and industrial development ($19.75B). Air transport reached its largest grouped share in 1998–2002, and rail reached its largest share in 2013.\n\n#### 2c · Selected purpose in detail\n\n**Question.** When was the selected purpose most prominent, and did it stay prominent in nearby years?\n\n**Interpretation.** A single tall bar between shorter ones points to a brief spike. Several high bars in a row show that the purpose stayed prominent. The example below uses **Air transport** with **Individual years** and **Share of top ten** selected.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"$47","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"$48","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"## Visualization #3 · Where did aid go over time?\n\n### Questions\n\n- **3.1** Where did aid go, and which regions received the most?\n- **3.2** Did the same regions dominate throughout, or did their shares shift?\n- **3.3** What does the history of recorded commitments tell us about where aid was directed and how much we can infer about need?\n\n### Understanding\n\nI group incoming commitments by recipient and time period. I use the course geography's Asia subregions to distinguish South, East, Southeast, and Western Asia, and combine North America and Oceania in this extract. The regional timeline divides each region's commitments by all recorded incoming commitments in that period. The maps show average dollars per year when displaying amounts, so 2013 can share a scale with the five-year groups.\n\n### Graphs","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"$49","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"#### 3a · Recipient amounts by period\n\n**Question.** Which countries received the most aid in the selected period?\n\n**Interpretation.** Circles mark countries with positive receipts in the current map view. Larger circles mean higher average commitments per year, and circle colors mark regions using the key under 3b. **Map focus** narrows the comparison to one region, and the **Recipient amounts** table gives the values behind the circles. Leader lines connect shifted circles to their country locations.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"$4a","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"**Analysis.** India received the most in 1973–1977. In 1988–1992, Poland averaged $3.03B per year and Kuwait averaged $1.49B per year. The two countries accounted for much of the aid directed to Europe and Western Asia in that period.\n\n#### 3b · Regional shares over time\n\n**Question.** Did the same regions dominate, or did their shares shift?\n\n**Interpretation.** Each bar represents 100% of incoming commitments in one period. The height of a region’s colored segment shows its share of that period’s total.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"$4b","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"**Analysis.** Europe’s share fell from 29.5% in 1988–1992 to 4.9% in 2003–2007. In the intervening 1998–2002 period, South America led at 22.5%. South Asia remained a major recipient across these periods.\n\n#### 3c · Recipient history across nine periods\n\n**Question.** Which countries appear repeatedly, and how do the locations of recipients change over time?\n\n**Interpretation.** In the location view, aa dot marks a country with positive recorded receipts in that period, colored by region as in the 3b key.Repeated dots show where aid continued, and clusters that appear or fade show where the distribution shifted. In **Aid amount per year**, the shared circle-area scale makes annual averages comparable across periods. Leader lines connect shifted symbols to their country locations.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"$4c","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"$4d","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4e","stdlib":"2"}} 33:null