34:["$","title",null,{"children":"Mini-Project 2: Temporal Data Visualization (Due Nov. 12th) | Likhith Vardhan Goruputi | 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:T572, const aidVizData = (() => { const records = aid.map(d => ({ year: +d.year, donor: String(d.donor ?? "").trim(), recipient: String(d.recipient ?? "").trim(), amount: +d.commitment_amount_usd_constant })).filter(d => Number.isInteger(d.year) && Number.isFinite(d.amount) && d.amount > 0 && d.donor && d.recipient ); const map = new Map(); function add(country, year, field, amount) { const key = JSON.stringify([country, year]); if (!map.has(key)) { map.set(key, {country, year, donated: 0, received: 0}); } map.get(key)[field] += amount; } records.forEach(d => { add(d.donor, d.year, "donated", d.amount); add(d.recipient, d.year, "received", d.amount); }); const grouped = d3.group([...map.values()], d => d.country); for (const rows of grouped.values()) { rows.sort((a, b) => a.year - b.year); } const countries = [...grouped.keys()].sort(d3.ascending); const money = v => { const a = Math.abs(v); const s = a >= 1e12 ? (a / 1e12).toFixed(2) + "T" : a >= 1e9 ? (a / 1e9).toFixed(1) + "B" : a >= 1e6 ? (a / 1e6).toFixed(1) + "M" : d3.format(",.0f")(a); return `${v < 0 ? "−" : ""}$${s}`; }; const initial = [ "United States", "Japan", "India", "Germany" ].find(c => grouped.has(c)) || countries[0]; return {grouped, countries, money, initial}; })(); 40:T1c1f, const aidFigure1 = (() => { const {grouped, countries, money, initial} = aidVizData; const blue = "#2563A6", orange = "#E8794A"; const W = 960, H = 380; const m = {top: 44, right: 38, bottom: 48, left: 88}; const root = d3.create("div") .style("font-family", "Inter,system-ui,sans-serif") .style("max-width", "980px") .style("padding", "24px") .style("background", "#FAFBFD") .style("border", "1px solid #E4EAF1") .style("border-radius", "16px") .style("color", "#1D3044"); root.append("div") .style("font-size", "11px") .style("letter-spacing", "2px") .style("font-weight", "750") .style("color", "#64748B") .text("FIGURE 01 / AID FLOWS"); root.append("h2") .style("font-size", "23px") .style("margin", "8px 0") .text("Giving and receiving through time"); root.append("p") .style("font-size", "13px") .style("color", "#64748B") .text("Annual aid commitments · Constant USD"); const controls = root.append("div") .style("display", "flex") .style("gap", "14px") .style("align-items", "center") .style("flex-wrap", "wrap") .style("margin", "20px 0"); controls.append("strong") .style("font-size", "13px") .text("Explore country"); const select = controls.append("select") .style("padding", "9px 13px") .style("border", "1px solid #CBD5E1") .style("border-radius", "8px") .style("background", "white"); select.selectAll("option") .data(countries) .join("option") .attr("value", d => d) .text(d => d); select.property("value", initial); const legend = root.append("div") .style("display", "flex") .style("gap", "24px") .style("font-size", "12px") .style("margin-bottom", "12px"); [["Donated", blue], ["Received", orange]].forEach(([t, c]) => { const item = legend.append("span"); item.append("span") .style("display", "inline-block") .style("width", "11px") .style("height", "11px") .style("border-radius", "50%") .style("background", c) .style("margin-right", "7px"); item.append("span").text(t); }); const chart = root.append("div"); const note = root.append("div") .style("font-size", "12px") .style("line-height", "1.8") .style("color", "#475569") .style("margin-top", "12px"); function draw(country) { chart.selectAll("*").remove(); const rows = grouped.get(country); const byYear = new Map(rows.map(d => [d.year, d])); const min = rows[0].year, max = rows[rows.length - 1].year; const data = d3.range(min, max + 1).map(year => { const d = byYear.get(year); return { year, donated: d ? d.donated : null, received: d ? d.received : null }; }); const svg = chart.append("svg") .attr("viewBox", `0 0 ${W} ${H}`) .style("width", "100%"); const defs = svg.append("defs"); [["blueGrad", blue], ["orangeGrad", orange]].forEach(([id, c]) => { const g = defs.append("linearGradient") .attr("id", id) .attr("x1", "0").attr("y1", "0") .attr("x2", "0").attr("y2", "1"); g.append("stop").attr("offset", "0%") .attr("stop-color", c).attr("stop-opacity", 0.28); g.append("stop").attr("offset", "100%") .attr("stop-color", c).attr("stop-opacity", 0.015); }); const x = d3.scaleLinear() .domain([min, Math.max(min + 1, max)]) .range([m.left, W - m.right]); const ymax = d3.max(rows, d => Math.max(d.donated, d.received)) || 1; const y = d3.scaleLinear() .domain([0, ymax * 1.16]) .range([H - m.bottom, m.top]); svg.append("g") .attr("transform", `translate(${m.left},0)`) .call(d3.axisLeft(y).ticks(5) .tickSize(-(W - m.left - m.right)) .tickFormat("")) .call(g => g.select(".domain").remove()) .call(g => g.selectAll("line") .attr("stroke", "#E3EAF2") .attr("stroke-dasharray", "3,5")); svg.append("g") .attr("transform", `translate(${m.left},0)`) .call(d3.axisLeft(y).ticks(5).tickFormat(money)) .call(g => g.select(".domain").remove()); svg.append("g") .attr("transform", `translate(0,${H - m.bottom})`) .call(d3.axisBottom(x).ticks(10).tickFormat(d3.format("d"))) .call(g => g.select(".domain").attr("stroke", "#CBD5E1")); const fields = [ {key: "donated", color: blue, grad: "blueGrad"}, {key: "received", color: orange, grad: "orangeGrad"} ]; fields.forEach(s => { const area = d3.area() .defined(d => d[s.key] !== null) .x(d => x(d.year)) .y0(y(0)) .y1(d => y(d[s.key])); const line = d3.line() .defined(d => d[s.key] !== null) .x(d => x(d.year)) .y(d => y(d[s.key])); svg.append("path") .datum(data) .attr("d", area) .attr("fill", `url(#${s.grad})`); svg.append("path") .datum(data) .attr("d", line) .attr("fill", "none") .attr("stroke", s.color) .attr("stroke-width", 3) .attr("stroke-linejoin", "round"); const peak = d3.greatest(rows, d => d[s.key]); if (peak && peak[s.key] > 0) { svg.append("circle") .attr("cx", x(peak.year)) .attr("cy", y(peak[s.key])) .attr("r", 5) .attr("fill", "white") .attr("stroke", s.color) .attr("stroke-width", 2.5) .append("title") .text(`${s.key} peak: ${peak.year}, ${money(peak[s.key])}`); } }); const guide = svg.append("line") .attr("y1", m.top) .attr("y2", H - m.bottom) .attr("stroke", "#64748B") .attr("stroke-dasharray", "4,4") .style("display", "none"); const tip = svg.append("text") .attr("x", m.left + 8) .attr("y", 22) .attr("font-size", 12) .attr("font-weight", 650) .attr("fill", "#334155"); svg.append("rect") .attr("x", m.left) .attr("y", m.top) .attr("width", W - m.left - m.right) .attr("height", H - m.top - m.bottom) .attr("fill", "transparent") .on("mousemove", event => { const [px] = d3.pointer(event); const year = Math.max(min, Math.min(max, Math.round(x.invert(px)))); const d = byYear.get(year); guide.attr("x1", x(year)).attr("x2", x(year)) .style("display", null); tip.text(d ? `${year} · Donated ${money(d.donated)} · Received ${money(d.received)}` : `${year} · No recorded commitments`); }) .on("mouseleave", () => { guide.style("display", "none"); tip.text(""); }); const donorPeak = d3.greatest(rows, d => d.donated); const recipientPeak = d3.greatest(rows, d => d.received); note.text( `Highest donated year: ${donorPeak.year} (${money(donorPeak.donated)}). ` + `Highest received year: ${recipientPeak.year} (${money(recipientPeak.received)}). ` + `Gaps indicate years without recorded commitments.` ); } select.on("change", event => draw(event.target.value)); draw(initial); return root.node(); })(); 41:T174d, const aidFigure2 = (() => { const {grouped, countries, money, initial} = aidVizData; const blue = "#2563A6", orange = "#E8794A"; const W = 960, H = 340; const L = 90, R = 32; const root = d3.create("div") .style("font-family", "Inter,system-ui,sans-serif") .style("max-width", "980px") .style("padding", "24px") .style("background", "#FFFFFF") .style("border", "1px solid #E4EAF1") .style("border-radius", "16px"); root.append("div") .style("font-size", "11px") .style("font-weight", "750") .style("letter-spacing", "2px") .style("color", "#64748B") .text("FIGURE 02 / CHANGING ROLES"); root.append("h2") .style("font-size", "23px") .style("color", "#1D3044") .style("margin", "8px 0") .text("When countries switch sides"); root.append("p") .style("font-size", "13px") .style("color", "#64748B") .text("Annual net balance = donated minus received"); const select = root.append("select") .style("margin", "16px 0") .style("padding", "9px 13px") .style("border", "1px solid #CBD5E1") .style("border-radius", "8px"); select.selectAll("option") .data(countries) .join("option") .attr("value", d => d) .text(d => d); select.property("value", initial); const legend = root.append("div") .style("display", "flex") .style("gap", "20px") .style("flex-wrap", "wrap") .style("font-size", "12px") .style("margin", "10px 0"); [ ["Net donor", blue], ["Net recipient", orange], ["Balanced", "#8B5CF6"], ["No data", "#E2E8F0"] ].forEach(([label, color]) => { const item = legend.append("span"); item.append("span") .style("display", "inline-block") .style("width", "11px") .style("height", "11px") .style("background", color) .style("border-radius", "2px") .style("margin-right", "6px"); item.append("span").text(label); }); const chart = root.append("div"); const insight = root.append("div") .style("margin-top", "14px") .style("font-size", "13px") .style("color", "#475569") .style("line-height", "1.7"); function draw(country) { chart.selectAll("*").remove(); const rows = grouped.get(country); const byYear = new Map(rows.map(d => [d.year, d])); const first = rows[0].year; const last = rows[rows.length - 1].year; const series = d3.range(first, last + 1).map(year => { const d = byYear.get(year); return { year, net: d ? d.donated - d.received : null }; }); const svg = chart.append("svg") .attr("viewBox", `0 0 ${W} ${H}`) .style("width", "100%"); const x = d3.scaleLinear() .domain([first - 0.5, last + 0.5]) .range([L, W - R]); const maximum = d3.max(rows, d => Math.abs(d.donated - d.received)) || 1; const y = d3.scaleLinear() .domain([-maximum * 1.12, maximum * 1.12]) .range([H - 48, 22]); svg.append("g") .attr("transform", `translate(${L},0)`) .call(d3.axisLeft(y).ticks(5).tickFormat(money)) .call(g => g.select(".domain").remove()); svg.append("g") .attr("transform", `translate(0,${H - 48})`) .call(d3.axisBottom(x).ticks(10).tickFormat(d3.format("d"))); svg.append("line") .attr("x1", L).attr("x2", W - R) .attr("y1", y(0)).attr("y2", y(0)) .attr("stroke", "#475569") .attr("stroke-width", 1.5); const bw = Math.min(22, (W - L - R) / series.length * 0.72); // Missing years: light gray full-height stripes. svg.selectAll(".missing") .data(series.filter(d => d.net === null)) .join("rect") .attr("x", d => x(d.year) - bw / 2) .attr("y", 22) .attr("width", bw) .attr("height", H - 70) .attr("fill", "#E2E8F0") .attr("opacity", 0.8) .append("title") .text(d => `${d.year}: No recorded data`); svg.selectAll(".bar") .data(series.filter(d => d.net !== null && d.net !== 0)) .join("rect") .attr("x", d => x(d.year) - bw / 2) .attr("width", bw) .attr("y", d => y(Math.max(0, d.net))) .attr("height", d => Math.abs(y(d.net) - y(0))) .attr("fill", d => d.net > 0 ? blue : orange) .attr("rx", 2) .append("title") .text(d => `${d.year}: ${money(d.net)}`); // True zero: purple diamond, distinct from missing years. const zeros = series.filter(d => d.net === 0); svg.selectAll(".zero") .data(zeros) .join("path") .attr("d", d3.symbol().type(d3.symbolDiamond).size(62)) .attr("transform", d => `translate(${x(d.year)},${y(0)})`) .attr("fill", "#8B5CF6") .append("title") .text(d => `${d.year}: Balanced net commitments`); // Mark consecutive-year sign reversals. const switches = []; for (let i = 1; i < series.length; i++) { const a = series[i - 1].net; const b = series[i].net; if (a === null || b === null || a === 0 || b === 0) continue; if (Math.sign(a) !== Math.sign(b)) switches.push(series[i]); } svg.selectAll(".switch") .data(switches) .join("circle") .attr("cx", d => x(d.year)) .attr("cy", d => y(d.net)) .attr("r", 5) .attr("fill", "#FFFFFF") .attr("stroke", "#182C44") .attr("stroke-width", 2) .append("title") .text(d => `Role reversal in ${d.year}`); const total = d3.sum(rows, d => d.donated - d.received); insight.text( `${country} is an overall ${total > 0 ? "net donor" : total < 0 ? "net recipient" : "balanced country"} ` + `(${money(total)} across recorded years). ` + `${switches.length} consecutive-year role reversal(s) detected` + (switches.length ? `: ${switches.map(d => d.year).join(", ")}.` : ".") + ` Outlined circles mark reversals.` ); } select.on("change", event => draw(event.target.value)); draw(initial); return root.node(); })(); 42:T10f2, const aidFigure3 = (() => { const {grouped, money} = aidVizData; const blue = "#2563A6", orange = "#E8794A"; const ink = "#1D3044"; const summary = [...grouped].map(([country, rows]) => { const gave = d3.sum(rows, d => d.donated); const got = d3.sum(rows, d => d.received); return { country, gave, got, net: gave - got, volume: gave + got, balanceRatio: (gave + got) > 0 ? Math.abs(gave - got) / (gave + got) : 1 }; }); const donors = summary.filter(d => d.net > 0) .sort((a, b) => b.net - a.net).slice(0, 7); const recipients = summary.filter(d => d.net < 0) .sort((a, b) => a.net - b.net).slice(0, 7); // Balanced by relative difference, among substantial aid participants. const volumeThreshold = d3.quantile( summary.map(d => d.volume).sort(d3.ascending), 0.75 ) || 0; const balanced = summary .filter(d => d.volume >= volumeThreshold) .sort((a, b) => a.balanceRatio - b.balanceRatio) .slice(0, 7); const root = d3.create("div") .style("font-family", "Inter,system-ui,sans-serif") .style("max-width", "980px") .style("padding", "24px") .style("border", "1px solid #E4EAF1") .style("border-radius", "16px") .style("background", "#FAFBFD"); root.append("div") .style("font-size", "11px") .style("letter-spacing", "2px") .style("font-weight", "750") .style("color", "#64748B") .text("FIGURE 03 / GLOBAL COMPARISON"); root.append("h2") .style("font-size", "23px") .style("color", ink) .style("margin", "8px 0") .text("Who gives, who receives, who balances?"); root.append("p") .style("font-size", "13px") .style("color", "#64748B") .text("All recorded years combined · Net commitments"); function section(title, subtitle, data, color, value, max) { const panel = root.append("div") .style("margin", "24px 0"); panel.append("h3") .style("font-size", "15px") .style("color", ink) .style("margin", "0 0 4px") .text(title); panel.append("p") .style("font-size", "11px") .style("color", "#64748B") .style("margin", "0 0 12px") .text(subtitle); const W = 880, rowH = 36, left = 185; const svg = panel.append("svg") .attr("viewBox", `0 0 ${W} ${data.length * rowH + 8}`) .style("width", "100%"); const scale = d3.scaleLinear() .domain([0, max || 1]) .range([0, 540]); const rows = svg.selectAll("g.item") .data(data) .join("g") .attr("transform", (d, i) => `translate(0,${i * rowH})`); rows.append("text") .attr("x", left - 12) .attr("y", 22) .attr("text-anchor", "end") .attr("font-size", 12) .attr("fill", ink) .text(d => d.country.length > 26 ? d.country.slice(0, 25) + "…" : d.country); rows.append("rect") .attr("x", left) .attr("y", 7) .attr("width", 540) .attr("height", 22) .attr("rx", 5) .attr("fill", "#E9EEF4"); rows.append("rect") .attr("x", left) .attr("y", 7) .attr("width", d => scale(value(d))) .attr("height", 22) .attr("rx", 5) .attr("fill", color); rows.append("text") .attr("x", 742) .attr("y", 22) .attr("font-size", 12) .attr("font-weight", 650) .attr("fill", ink) .text(d => money(value(d))); } section( "Largest net donors", "Countries giving substantially more than they receive", donors, blue, d => d.net, d3.max(donors, d => d.net) ); section( "Largest net recipients", "Countries receiving substantially more than they give", recipients, orange, d => -d.net, d3.max(recipients, d => -d.net) ); section( "Relatively balanced countries", "Smallest donated–received difference among the top 25% by total aid volume", balanced, "#8B5CF6", d => d.volume, d3.max(balanced, d => d.volume) ); root.append("p") .style("font-size", "11px") .style("color", "#64748B") .style("line-height", "1.7") .text( "The balanced group is ranked by relative difference, not by the " + "purple bar length. Purple bars represent total aid volume. " + "Missing country records are not treated as balanced." ); return root.node(); })(); 43:T1d02, md` ### Written Analysis (Viz #1) The visualization examines how countries' roles in international aid changed between 1973 and 2013. Three complementary figures show annual donated and received commitments, changes in net aid balance, and the overall distribution of donor and recipient roles. **Figure 1A — Donated versus received commitments over time** The dataset shows a strong imbalance between major donor and recipient countries. The United States ($116.2B donated) and Japan ($114.2B) are the largest cumulative donors, followed by Germany ($47.2B), the United Kingdom ($23.7B), and France ($15.5B). Their donated amounts substantially exceed their received commitments. India is the largest cumulative recipient, receiving approximately $134.0B. Other major recipients include Thailand ($49.0B), Brazil ($36.6B), Colombia ($25.5B), South Korea ($25.3B), and Poland ($24.5B). The annual timelines reveal that commitments are not distributed uniformly over time. Some countries have extended periods of relatively limited activity interrupted by large funding peaks. These peaks are especially important because a single large commitment can substantially change a country's total for that year. The country selector makes it possible to inspect these differences for every country. The highlighted peak values identify the years of maximum donated and received commitments, while the hover interaction provides exact values for individual years. **Figure 1B — Changes between net-donor and net-recipient roles** The second figure examines annual net commitments, calculated as the amount donated minus the amount received. Positive balances indicate net-donor years, while negative balances indicate net-recipient years. A transition across the zero baseline between consecutive recorded years represents a change in the country's annual role. The United States, Japan, and Germany have strongly positive cumulative balances, whereas India, Thailand, and Brazil have strongly negative balances. However, these cumulative classifications do not imply that every annual balance has the same sign. South Korea illustrates the importance of distinguishing participation from overall role. It donated approximately $1.3B but received $25.3B across the recorded period. Although it participated as a donor, it was still a substantial net recipient overall. Similarly, countries such as Canada and Italy participated significantly on both sides, making it useful to examine their annual balances rather than relying only on cumulative classifications. The chart marks consecutive-year sign reversals with outlined circles. This helps distinguish actual changes in net balance from years when both donated and received commitments simply increased together. **Figure 1C — Major donors, recipients, and relatively balanced countries** The third figure compares countries across all recorded years. The largest net donors include the United States, Japan, Germany, the United Kingdom, and France. Their contributions substantially outweigh the amounts they receive. The largest net recipients include India, Thailand, Brazil, Colombia, and South Korea. These countries receive far more than they donate. A smaller group has more comparable amounts flowing in both directions. Australia donated approximately $2.45B and received $2.57B, while Austria donated approximately $0.78B and received $0.77B. These are examples of countries with nearly balanced cumulative flows. Canada ($7.5B donated versus $4.1B received) and Italy ($3.8B versus $2.4B) demonstrate a different pattern: both are net donors but receive substantial amounts themselves. The balanced-country ranking emphasizes proportional similarity among countries with relatively high aid activity. Therefore, the countries displayed in this section should be interpreted as the most balanced within that comparison group, rather than necessarily having exactly equal donated and received amounts. **Overall finding** International aid commitments show a clear division between countries that primarily finance aid and countries that primarily receive it. However, this division is not absolute. Some countries participate on both sides, and annual funding patterns can differ from their long-term roles. The three figures demonstrate why cumulative totals alone are insufficient: they identify major participants but can hide annual fluctuations, unusually large commitments, and temporary role changes. ### Design Rationale (Viz #1) I used three separate but complementary figures because the assignment asks about different aspects of international aid: annual amounts, changes in roles, and comparisons between countries. **Figure 1A — Dual-line and area chart** Two consistent colors distinguish donated and received commitments. Both series share the same time and value axes, making annual comparisons straightforward. The lightly filled areas emphasize funding magnitude without obscuring the lines. A country selector allows detailed exploration without placing all countries in one overcrowded chart. Peak markers and hover values support the identification of sudden increases and decreases. A limitation is that very large commitments can compress smaller variations. Additionally, the vertical scale changes with the selected country, so line heights should not be compared directly between different country selections. **Figure 1B — Diverging net-balance chart** A zero-centered diverging bar chart directly represents whether a country donated more than it received in a particular year. Blue indicates positive net commitments and orange indicates negative net commitments. Outlined markers highlight consecutive-year role reversals. Missing years are represented separately from recorded zero balances, avoiding the misleading assumption that missing observations represent balanced activity. The main limitation is that net values conceal the absolute donated and received amounts. Two countries with identical net balances may have very different overall levels of aid participation. **Figure 1C — Cross-country rankings** Horizontal bars provide a clear comparison of cumulative net donors, net recipients, and relatively balanced participants. Separating the categories makes the overall structure of aid easier to understand than a single ranking containing positive and negative values. For relatively balanced countries, selection is based on proportional differences, while bar lengths show total aid volume. This distinction helps avoid treating countries with very small amounts of aid as the most meaningful balanced participants. The limitation is that cumulative rankings cannot show when a country's donor-recipient role changed. **Comparison of the three figures** Figure 1A is most effective for identifying annual funding patterns and unusually large commitments. Figure 1B is best for detecting changes in donor-recipient roles. Figure 1C gives the clearest overview of cumulative differences between countries. Together, they answer the assignment more effectively than a single chart because they preserve both temporal detail and cross-country comparisons. *Data note:* All amounts refer to recorded positive commitments in constant US dollars, not verified disbursements. Years with no recorded commitments should not automatically be interpreted as zero aid activity. ` 44:T403f, const viz2Pulse = (() => { // ===================================== // CLEAN LIGHT THEME // ===================================== const bg = "#F6F8FB"; const panel = "#FFFFFF"; const WHITE = "#FFFFFF"; const ink = "#23364D"; const muted = "#66788E"; const grid = "#E2E8F0"; const border = "#DCE5EE"; const accent = "#487D9B"; const palette = [ "#5AA6B8", // Muted teal "#D39470", // Soft terracotta "#9588BA", // Dusty purple "#6DAE96", // Sage green "#C17F96", // Muted rose "#789BC4", // Slate blue "#C0A15F", // Warm gold "#AC91B6", // Lavender "#76ADA9", // Sea green "#BB927B" // Warm taupe ]; function money(v) { if (v >= 1e12) return `$${(v / 1e12).toFixed(2)}T`; if (v >= 1e9) return `$${(v / 1e9).toFixed(1)}B`; if (v >= 1e6) return `$${(v / 1e6).toFixed(1)}M`; if (v >= 1e3) return `$${(v / 1e3).toFixed(1)}K`; return d3.format("$,.0f")(v); } // ===================================== // PREPARE DATA // ===================================== const records = aid.map(d => ({ year: Number(d.year), purpose: String( d.coalesced_purpose_name ?? "" ).trim(), amount: Number( d.commitment_amount_usd_constant ) })).filter(d => Number.isInteger(d.year) && Number.isFinite(d.amount) && d.amount > 0 && d.purpose && !/^(unspecified|sectors not specified)$/i.test(d.purpose) ); if (!records.length) { return d3.create("div") .text("No matching aid records found.") .node(); } const ranked = d3.rollups( records, v => d3.sum(v, d => d.amount), d => d.purpose ) .sort((a, b) => b[1] - a[1]) .slice(0, 10); const names = ranked.map(d => d[0]); const topSet = new Set(names); const topRecords = records.filter(d => topSet.has(d.purpose) ); const yearMap = d3.rollup( topRecords, v => d3.sum(v, d => d.amount), d => d.year, d => d.purpose ); const minYear = d3.min(records, d => d.year); const maxYear = d3.max(records, d => d.year); const years = d3.range( minYear, maxYear + 1 ); const yearTotals = new Map( years.map(year => [ year, yearMap.has(year) ? d3.sum(yearMap.get(year).values()) : null ]) ); const data = ranked.map(([name, total], index) => { const annual = years.map(year => { const denominator = yearTotals.get(year); const amount = yearMap.get(year)?.get(name) ?? 0; return { year, amount: denominator === null ? null : amount, share: denominator > 0 ? amount / denominator : null }; }); return { name, total, index, color: palette[index], annual, peak: d3.greatest( annual.filter(d => d.amount !== null), d => d.amount ) }; }); const totalTop10 = d3.sum( data, d => d.total ); // ===================================== // MAIN CONTAINER // ===================================== const root = d3.create("div") .style("font-family", "Inter,system-ui,sans-serif") .style("max-width", "1040px") .style("background", bg) .style("color", ink) .style("padding", "28px") .style("border", `1px solid ${border}`) .style("border-radius", "16px"); root.append("div") .style("font-size", "11px") .style("font-weight", "750") .style("letter-spacing", "1.7px") .style("color", accent) .text("VISUALIZATION 02 / AID PURPOSE ANALYSIS"); root.append("h2") .style("font-size", "26px") .style("font-weight", "800") .style("margin", "9px 0 6px") .text("Where the money went"); root.append("p") .style("font-size", "13px") .style("color", muted) .style("margin", "0 0 24px") .text( "The ten most-funded aid purposes and " + "how their importance changed over time." ); // ===================================== // SUMMARY METRICS // ===================================== const stats = root.append("div") .style("display", "flex") .style("flex-wrap", "wrap") .style("gap", "35px") .style("background", panel) .style("border", `1px solid ${border}`) .style("border-radius", "10px") .style("padding", "18px"); [ ["TOP-10 TOTAL", money(totalTop10)], ["LEADING PURPOSE", data[0].name], ["TIME PERIOD", `${minYear}–${maxYear}`] ].forEach(([label, value]) => { const box = stats.append("div") .style("flex", "1 1 170px"); box.append("div") .style("font-size", "10px") .style("font-weight", "750") .style("letter-spacing", "1px") .style("color", muted) .text(label); box.append("div") .style("font-size", "17px") .style("font-weight", "750") .style("margin-top", "6px") .text(value); }); // ===================================== // TEN PURPOSE TIMELINES // ===================================== root.append("h3") .style("font-size", "17px") .style("margin", "26px 0 6px") .text("01 / Ten purposes, ten funding histories"); root.append("p") .style("font-size", "12px") .style("color", muted) .style("line-height", "1.7") .text( "Purposes are ranked by total commitments. " + "Each timeline shows its annual share of top-10 aid. " + "Click a row to explore it in detail." ); const W = 1000; const rowH = 72; const chartLeft = 405; const chartRight = 795; const valueX = 843; const listSvg = root.append("svg") .attr( "viewBox", `0 0 ${W} ${rowH * 10 + 48}` ) .style("width", "100%") .style("height", "auto") .style("display", "block"); listSvg.append("text") .attr("x", chartLeft) .attr("y", 19) .attr("fill", muted) .attr("font-size", 11) .attr("font-weight", 650) .text("HISTORICAL SHARE OF TOP-10 AID"); listSvg.append("text") .attr("x", valueX) .attr("y", 19) .attr("fill", muted) .attr("font-size", 11) .attr("font-weight", 650) .text("TOTAL COMMITTED"); const x = d3.scaleLinear() .domain([ minYear, Math.max(minYear + 1, maxYear) ]) .range([chartLeft, chartRight]); let selected = data[0]; const rows = listSvg .selectAll("g.purposeRow") .data(data) .join("g") .attr("class", "purposeRow") .attr("transform", (d, i) => `translate(0,${35 + i * rowH})` ) .style("cursor", "pointer"); rows.append("rect") .attr("class", "background") .attr("width", 995) .attr("height", rowH - 6) .attr("rx", 8) .attr("fill", panel) .attr("stroke", border) .attr("stroke-width", 1); // Colored rank number rows.append("text") .attr("x", 16) .attr("y", 29) .attr("fill", d => d.color) .attr("font-size", 15) .attr("font-weight", 800) .text((d, i) => String(i + 1).padStart(2, "0") ); // Purpose name rows.append("text") .attr("x", 52) .attr("y", 26) .attr("fill", ink) .attr("font-size", 12) .attr("font-weight", 650) .text(d => d.name.length > 43 ? d.name.slice(0, 42) + "…" : d.name ) .append("title") .text(d => d.name); // Overall share rows.append("text") .attr("x", 52) .attr("y", 46) .attr("fill", muted) .attr("font-size", 10) .text(d => `${(100 * d.total / totalTop10).toFixed(1)}% ` + "of top-10 commitments" ); // Total amount rows.append("text") .attr("x", valueX) .attr("y", 36) .attr("fill", ink) .attr("font-size", 16) .attr("font-weight", 750) .text(d => money(d.total)); // ===================================== // SPARKLINES // ===================================== rows.each(function(d) { const g = d3.select(this); const ymax = d3.max( d.annual, a => a.share ) || 0.01; const y = d3.scaleLinear() .domain([0, ymax * 1.1]) .range([55, 10]); const area = d3.area() .defined(a => a.share !== null) .x(a => x(a.year)) .y0(55) .y1(a => y(a.share)); const line = d3.line() .defined(a => a.share !== null) .x(a => x(a.year)) .y(a => y(a.share)); g.append("line") .attr("x1", chartLeft) .attr("x2", chartRight) .attr("y1", 55) .attr("y2", 55) .attr("stroke", "#D8E2EC"); g.append("path") .datum(d.annual) .attr("d", area) .attr("fill", d.color) .attr("opacity", 0.18); g.append("path") .datum(d.annual) .attr("d", line) .attr("fill", "none") .attr("stroke", d.color) .attr("stroke-width", 2.6) .attr("stroke-linejoin", "round"); // Label peak share for each row g.append("text") .attr("x", chartRight + 8) .attr("y", 15) .attr("fill", muted) .attr("font-size", 9) .text(`${(ymax * 100).toFixed(1)}%`); }); // ===================================== // SHARED YEAR LABELS // ===================================== const axisY = 35 + 10 * rowH + 13; const tickYears = years.filter( (year, i) => i % 10 === 0 || year === maxYear ); listSvg.selectAll(".yearLabel") .data(tickYears) .join("text") .attr("class", "yearLabel") .attr("x", d => x(d)) .attr("y", axisY) .attr("text-anchor", "middle") .attr("fill", muted) .attr("font-size", 11) .text(d => d); // ===================================== // INTERACTIVE DETAIL PANEL // ===================================== const focus = root.append("div") .style("margin-top", "26px") .style("background", panel) .style("border", `1px solid ${border}`) .style("border-radius", "12px") .style("padding", "22px"); focus.append("div") .style("font-size", "11px") .style("font-weight", "750") .style("letter-spacing", "1.2px") .style("color", accent) .text("02 / DETAILED PURPOSE EXPLORER"); const focusTitle = focus.append("h3") .style("font-size", "19px") .style("margin", "10px 0 8px") .style("color", ink); const focusDescription = focus.append("p") .style("font-size", "12px") .style("color", muted) .style("line-height", "1.7"); const controls = focus.append("div") .style("display", "flex") .style("align-items", "center") .style("gap", "14px") .style("flex-wrap", "wrap") .style("margin", "16px 0"); controls.append("strong") .style("font-size", "12px") .text("Display"); const modeSelect = controls.append("select") .style("padding", "9px 12px") .style("border-radius", "7px") .style("border", `1px solid ${border}`) .style("background", "#F9FBFD") .style("color", ink); modeSelect.selectAll("option") .data([ { key: "share", label: "Share of top-10 funding (%)" }, { key: "amount", label: "Annual commitments ($)" } ]) .join("option") .attr("value", d => d.key) .text(d => d.label); let mode = "share"; const focusChart = focus.append("div"); const hoverInfo = focus.append("div") .style("font-size", "13px") .style("color", "#456174") .style("margin-top", "10px") .style("min-height", "28px"); // ===================================== // DRAW DETAILED CHART // ===================================== function render() { focusChart.selectAll("*").remove(); // Highlight selected timeline rows.select("rect.background") .attr("fill", d => d === selected ? "#F0F6FA" : WHITE ) .attr("stroke", d => d === selected ? selected.color : border ) .attr("stroke-width", d => d === selected ? 2 : 1 ); focusTitle.text( `${selected.name} — Historical funding` ); const peak = selected.peak; focusDescription.text( `Rank #${selected.index + 1} overall. ` + `Total commitments: ${money(selected.total)}. ` + `Peak funding: ${money(peak.amount)} ` + `in ${peak.year}.` ); const fw = 960; const fh = 330; const lm = 85; const rm = 25; const tm = 30; const bm = 48; const svg = focusChart.append("svg") .attr("viewBox", `0 0 ${fw} ${fh}`) .style("width", "100%") .style("height", "auto"); const fx = d3.scaleLinear() .domain([ minYear, Math.max(minYear + 1, maxYear) ]) .range([lm, fw - rm]); const values = selected.annual.filter( d => d[mode] !== null ); const ymax = d3.max( values, d => d[mode] ) || 1; const fy = d3.scaleLinear() .domain([0, ymax * 1.15]) .range([fh - bm, tm]); const fmt = mode === "share" ? d => `${(d * 100).toFixed(0)}%` : money; // Gridlines svg.append("g") .attr("transform", `translate(${lm},0)`) .call( d3.axisLeft(fy) .ticks(5) .tickSize(-(fw - lm - rm)) .tickFormat("") ) .call(g => g.select(".domain").remove()) .call(g => g.selectAll("line") .attr("stroke", grid) .attr("stroke-dasharray", "3,5") ); // Y-axis svg.append("g") .attr("transform", `translate(${lm},0)`) .call( d3.axisLeft(fy) .ticks(5) .tickFormat(fmt) ) .call(g => g.select(".domain").remove()) .call(g => g.selectAll("text") .attr("fill", muted) ); // X-axis svg.append("g") .attr( "transform", `translate(0,${fh - bm})` ) .call( d3.axisBottom(fx) .ticks(9) .tickFormat(d3.format("d")) ) .call(g => g.selectAll("text") .attr("fill", muted) ); // Area and line const area = d3.area() .defined(d => d[mode] !== null) .x(d => fx(d.year)) .y0(fy(0)) .y1(d => fy(d[mode])); const line = d3.line() .defined(d => d[mode] !== null) .x(d => fx(d.year)) .y(d => fy(d[mode])); svg.append("path") .datum(selected.annual) .attr("d", area) .attr("fill", selected.color) .attr("opacity", 0.16); svg.append("path") .datum(selected.annual) .attr("d", line) .attr("fill", "none") .attr("stroke", selected.color) .attr("stroke-width", 3) .attr("stroke-linejoin", "round"); // Individual year points svg.selectAll("circle.point") .data(values) .join("circle") .attr("class", "point") .attr("cx", d => fx(d.year)) .attr("cy", d => fy(d[mode])) .attr("r", 4) .attr("fill", selected.color) .attr("stroke", WHITE) .attr("stroke-width", 1.3) .style("cursor", "crosshair") .on("mouseenter", function(event, d) { d3.select(this).attr("r", 7); hoverInfo.text( `${d.year} · ${money(d.amount)} committed · ` + `${(d.share * 100).toFixed(2)}% ` + "of annual top-10 commitments" ); }) .on("mouseleave", function() { d3.select(this).attr("r", 4); }); hoverInfo.text( "Hover over a point to inspect its year, " + "commitment amount, and funding share." ); } // ===================================== // INTERACTION // ===================================== rows.on("click", (event, d) => { selected = d; render(); }); modeSelect.on("change", event => { mode = event.target.value; render(); }); render(); // ===================================== // DATA NOTE // ===================================== root.append("p") .style("font-size", "11px") .style("color", muted) .style("line-height", "1.7") .style("margin-top", "20px") .text( "Method: The ten purposes are ranked by cumulative " + "positive aid commitments in constant USD. " + "'UNSPECIFIED' and 'Sectors not specified' are excluded. " + "Small timelines show annual share among the selected " + "top-ten purposes, with separately fitted vertical scales. " + "The detailed chart displays exact percentages or amounts. " + "Years without recorded top-ten commitments appear " + "as gaps rather than zero values." ); return root.node(); })(); viz2Pulse 45:T29fc, md` ### Written Analysis (Viz #2) This visualization examines the ten Coalesced Purposes receiving the largest cumulative international aid commitments between 1973 and 2013. It investigates both the overall distribution of funding and how the relative importance of different purposes changes over time. The results reveal two important patterns: commitments are concentrated in a limited number of major purposes, and the leading funding priorities change substantially across different historical periods. **Top ten purposes by total commitments** The ten largest purposes, ranked by cumulative commitments, are: 1. Air transport — $39.81B 2. Rail transport — $20.50B 3. Industrial development — $19.74B 4. Power generation/non-renewable sources — $15.13B 5. Rescheduling and refinancing — $14.80B 6. Import support (capital goods) — $9.96B 7. Social/welfare services — $9.21B 8. Telecommunications — $8.63B 9. Power generation/renewable sources — $8.62B 10. Mineral/Metal prospection and exploration — $8.22B Air transport is the largest purpose, receiving approximately $39.81B, almost twice the commitments to Rail transport ($20.50B). Industrial development follows closely behind Rail transport at $19.74B. The ranking shows that transportation, infrastructure, industrial development, and power generation account for several of the highest-funded categories. However, cumulative totals alone cannot explain when different purposes became prominent. A purpose may rank highly because of a few exceptionally large commitments rather than consistently high funding throughout the entire period. **How funding priorities changed over time** The annual percentage shares reveal several distinct shifts in the relative importance of different aid purposes. **1975 — Import support and industrial development** In 1975, Import support (capital goods) accounted for 48.90% of annual commitments among the selected top ten purposes ($0.28B). Industrial development followed at 24.44% ($0.14B), while Rail transport represented 10.40%. Together, Import support and Industrial development accounted for approximately 73.34% of the selected top-ten commitments in that year. This indicates that economic capacity and industrial development were particularly important among the leading purposes in 1975. **1989 — Rescheduling and refinancing** By 1989, the funding distribution had changed significantly. Rescheduling and refinancing became the largest purpose, accounting for 54.15% of annual top-ten commitments ($2.61B). Power generation from renewable sources followed at 18.91% ($0.91B), while Mineral/Metal prospection and exploration accounted for 8.96%. The dominance of refinancing demonstrates a substantial difference from the earlier emphasis on import support and industrial development. **2002 — Dominance of air transport** In 2002, Air transport accounted for 73.25% of annual commitments among the top ten purposes, totaling $3.41B. The next two purposes were Telecommunications at 7.18% ($0.33B) and Rail transport at 6.83% ($0.32B). Air transport therefore received more than ten times the commitments of either of these individual categories. This represents a particularly concentrated year in which one transportation purpose dominated the annual funding distribution. **2007 — Social and welfare services** The leading purpose changed again by 2007. Social/welfare services accounted for 68.40% of the selected top-ten commitments ($0.40B), while Rail transport represented 28.00% ($0.16B). Together, these two purposes accounted for approximately 96.40% of the commitments among the selected top ten. This indicates a different composition of funding from the air-transport-dominated pattern observed in 2002. **2010–2011 — Rail transport and renewable energy** In 2010, Rail transport became the dominant purpose, accounting for 84.12% of the annual top-ten commitments ($2.77B). Social/welfare services followed at 7.91%, and renewable power generation accounted for 5.42%. However, the pattern changed sharply in 2011. Power generation from renewable sources became the largest purpose, accounting for 63.87% of annual top-ten commitments ($1.04B). Rail transport fell to 26.92%, followed by Social/welfare services at 7.89%. This shows a notable change in relative funding priorities between two consecutive years. **Absolute funding versus relative importance** The distinction between dollar commitments and percentage shares is important for interpreting the timeline. For example, Social/welfare services accounted for 68.40% of top-ten commitments in 2007 but represented only $0.40B in absolute funding. By contrast, Air transport accounted for 73.25% in 2002, representing $3.41B. Although the percentages were relatively close, the absolute commitment amounts were substantially different. Similarly, Rail transport received $2.77B in 2010, compared with $1.04B for renewable power generation in 2011, even though both dominated their respective years. This demonstrates why percentage shares should not be interpreted as direct measures of funding magnitude. **Overall finding** The results show that international aid priorities did not remain constant throughout the recorded period. In the selected years, the leading purposes changed from Import support and Industrial development in 1975, to Rescheduling and refinancing in 1989, Air transport in 2002, Social/welfare services in 2007, Rail transport in 2010, and Renewable power generation in 2011. These changes reveal substantial variation in the composition of commitments over time. The cumulative ranking identifies which purposes received the most funding overall, while the annual percentage timelines explain when different categories became particularly prominent. Together, they demonstrate that a purpose's long-term funding importance and its dominance in an individual year are not necessarily the same. ### Design Rationale (Viz #2) I designed a single interactive visualization called "Where the money went," combining ranked small-multiple timelines with a detailed funding explorer. The visualization addresses two related questions: which ten purposes received the largest cumulative commitments, and how their relative importance changed over time. **Ranked small-multiple timelines** The ten purposes are arranged in descending order of their cumulative funding totals. Each row includes the purpose name, ranking position, total amount committed, percentage of the combined top-ten total, and an individual annual timeline. This makes the overall ranking immediately visible while also providing a historical view of each purpose. I chose small multiples instead of displaying ten overlapping lines in one chart because overlapping series would make individual trends difficult to distinguish. All timelines share the same horizontal time axis, allowing readers to identify which years contain large peaks for different purposes. The vertical scales are individually fitted to make variation within each purpose visible. **Color encoding and visual hierarchy** Each purpose is represented by a distinct color from a restrained categorical palette. The same color appears in the ranking number, historical timeline, and detailed chart when that purpose is selected. This consistent encoding helps readers connect the overview with the detailed view. The light background, subtle gridlines, and neutral text colors keep the focus on funding patterns rather than decorative elements. **Interactive detailed funding explorer** Clicking any purpose updates the detailed chart displayed below the rankings. The detailed chart provides two modes: - Annual commitments in constant US dollars. - Annual percentage share among the selected top ten purposes. This interaction allows users to examine a purpose's financial magnitude and its relative importance separately. Hovering over individual years displays the exact year, commitment amount, and percentage share. The detailed panel also displays the selected purpose's cumulative total, overall rank, and peak funding year. These features provide quantitative details that cannot be read precisely from the smaller timelines alone. **Why both absolute amounts and percentage shares matter** Absolute dollar values are necessary for understanding the magnitude of funding. Percentage shares are more appropriate for identifying which purposes dominated the distribution in particular years. For example, the percentage view makes it immediately clear that Rail transport accounted for 84.12% of selected top-ten commitments in 2010. The dollar view shows that this represented approximately $2.77B in commitments. Providing both views avoids confusing relative dominance with absolute funding magnitude. **Strengths and limitations** The ranked small multiples are effective for identifying the ten largest purposes and scanning their historical patterns. The detailed explorer supports closer analysis of individual purposes without overcrowding the overview. A limitation is that each small timeline uses its own vertical scale. Therefore, similarly tall peaks in different rows do not necessarily indicate equal funding shares. Maximum-share labels and the detailed chart help clarify this distinction. Another limitation is that the percentage shares are calculated using only the selected top-ten purposes, rather than all aid categories. Therefore, a purpose representing 84% of top-ten commitments in one year should not be interpreted as receiving 84% of all international aid commitments that year. Additionally, large individual commitments can create sharp annual spikes, so a high share in one year does not necessarily represent a sustained long-term priority. **Comparison of the two linked views** The small-multiple overview is best for identifying the top purposes and comparing their broad temporal patterns. The detailed funding explorer is best for investigating individual years, exact funding amounts, peak values, and annual percentage shares. Together, these components provide both an overall ranking and a detailed examination of changes in funding priorities. This combination is more effective than a single crowded chart because it balances clarity, historical context, quantitative precision, and interactive exploration. *Data note:* The analysis uses positive aid commitments in constant US dollars, not verified disbursements. Purposes labeled "UNSPECIFIED" or "Sectors not specified" are excluded. Annual percentages are calculated relative to the combined commitments among the ten highest-funded purposes across the full dataset. ` 46:T4edd, const viz3Geo = (() => { // ====================================== // COLORS AND FORMATTING // ====================================== const BG = "#F7FAFD"; const WHITE = "#FFFFFF"; const INK = "#18324A"; const MUTED = "#64788D"; const BORDER = "#DCE5EE"; const ACCENT = "#087F8C"; const NODATA = "#E4E9EE"; const BLUES = [ "#DCEBF6", "#A9CEE8", "#6FA9D2", "#347CAB", "#164D78" ]; function money(v) { const a = Math.abs(v); if (a >= 1e12) return "$" + (v / 1e12).toFixed(2) + "T"; if (a >= 1e9) return "$" + (v / 1e9).toFixed(1) + "B"; if (a >= 1e6) return "$" + (v / 1e6).toFixed(1) + "M"; if (a >= 1e3) return "$" + (v / 1e3).toFixed(1) + "K"; return d3.format("$,.0f")(v); } // ====================================== // PREPARE AID DATA // ====================================== const records = aid.map(d => ({ year: Number(d.year), country: String(d.recipient ?? "").trim(), amount: Number(d.commitment_amount_usd_constant) })).filter(d => Number.isInteger(d.year) && Number.isFinite(d.amount) && d.amount > 0 && d.country ); const root = d3.create("div") .style("font-family", "Inter,system-ui,sans-serif") .style("max-width", "1050px") .style("background", BG) .style("color", INK) .style("padding", "25px") .style("border", `1px solid ${BORDER}`) .style("border-radius", "16px"); if (!records.length) { root.text("No valid recipient records found."); return root.node(); } if (!world || world.type !== "FeatureCollection") { root.text("Load countries-50m.json into the world variable."); return root.node(); } const first = d3.min(records, d => d.year); const last = d3.max(records, d => d.year); const base = Math.floor(first / 5) * 5; const periods = d3.range(base, last + 1, 5).map(start => ({ start, end: Math.min(start + 4, last), label: `${Math.max(start, first)}–${Math.min(start + 4, last)}` })); const byPeriod = d3.rollup( records, v => d3.sum(v, d => d.amount), d => base + Math.floor((d.year - base) / 5) * 5, d => d.country ); const overall = d3.rollup( records, v => d3.sum(v, d => d.amount), d => d.country ); // ====================================== // MATCH MAP COUNTRIES TO AID COUNTRIES // ====================================== function norm(s) { return String(s ?? "") .toLowerCase() .normalize("NFD") .replace(/[\u0300-\u036f]/g, "") .replace(/[^a-z0-9]/g, ""); } const lookup = new Map( [...overall.keys()].map(name => [norm(name), name]) ); const aliases = [ ["unitedstates", "unitedstatesofamerica", "usa"], ["russia", "russianfederation"], ["southkorea", "republicofkorea", "korearepublicof"], ["northkorea", "democraticpeoplesrepublicofkorea"], ["ivorycoast", "cotedivoire"], ["czechrepublic", "czechia"], ["turkey", "turkiye"], ["burma", "myanmar"], ["swaziland", "eswatini"], ["syria", "syrianarabrepublic"], ["iran", "iranislamicrepublicof"], ["tanzania", "unitedrepublicoftanzania"], ["vietnam", "viet nam"], ["laos", "laopeoplesdemocraticrepublic"], ["moldova", "republicofmoldova"], ["bolivia", "boliviaplurinationalstateof"], ["venezuela", "venezuelabolivarianrepublicof"], ["drcongo", "democraticrepublicofthecongo", "congodemrep"], ["congo", "republicofthecongo", "congorep"], ["palestine", "palestinianterritories"], ["egypt", "egyptarabrep"], ["yemen", "yemenrep"], ["slovakia", "slovakrepublic"], ["kyrgyzstan", "kyrgyzrepublic"] ].map(group => group.map(norm)); function matchName(feature) { const p = feature.properties || {}; const candidates = [ p.ADMIN, p.NAME, p.NAME_LONG, p.NAME_EN, p.NAME_SORT, p.SOVEREIGNT, p.GEOUNIT, p.FORMAL_EN, p.BRK_NAME ]; for (const raw of candidates) { const key = norm(raw); if (!key) continue; // Exact normalized match if (lookup.has(key)) return lookup.get(key); // Known alternate names for (const group of aliases) { if (group.includes(key)) { const found = group.find(k => lookup.has(k)); if (found) return lookup.get(found); } } } return null; } const features = world.features.map(f => ({ ...f, aidName: matchName(f) })); // ====================================== // FIXED COLOR THRESHOLDS // ====================================== const positiveValues = periods.flatMap(p => [...(byPeriod.get(p.start)?.values() || [])] .filter(v => v > 0) ).sort(d3.ascending); const cuts = [0.2, 0.4, 0.6, 0.8] .map(q => d3.quantile(positiveValues, q) ?? 0); function mapColor(v) { if (!(v > 0)) return NODATA; for (let i = 0; i < cuts.length; i++) { if (v <= cuts[i]) return BLUES[i]; } return BLUES[4]; } // ====================================== // HEADER // ====================================== root.append("div") .style("font-size", "11px") .style("letter-spacing", "1.7px") .style("font-weight", "750") .style("color", ACCENT) .text("VISUALIZATION 03 / GEOGRAPHIC AID FLOWS"); root.append("h2") .style("font-size", "25px") .style("margin", "8px 0 5px") .text("Where in the world does aid go?"); root.append("p") .style("font-size", "13px") .style("color", MUTED) .style("margin", "0 0 20px") .text("Explore how the geography of aid commitments changed over time."); // ====================================== // YEAR SLIDER // ====================================== const controls = root.append("div") .style("display", "flex") .style("align-items", "center") .style("gap", "16px") .style("flex-wrap", "wrap") .style("background", WHITE) .style("border", `1px solid ${BORDER}`) .style("border-radius", "10px") .style("padding", "15px"); controls.append("strong") .style("font-size", "12px") .text("Select period"); const slider = controls.append("input") .attr("type", "range") .attr("min", 0) .attr("max", periods.length - 1) .attr("step", 1) .property("value", periods.length - 1) .style("flex", "1 1 230px") .style("accent-color", ACCENT); const periodLabel = controls.append("strong") .style("color", ACCENT) .style("font-size", "19px"); // ====================================== // SUMMARY METRICS // ====================================== const stats = root.append("div") .style("display", "flex") .style("gap", "35px") .style("flex-wrap", "wrap") .style("margin", "22px 0"); const metricNodes = []; [ "TOTAL COMMITMENTS", "RECIPIENTS RECORDED", "LARGEST RECIPIENT" ].forEach(label => { const box = stats.append("div"); box.append("div") .style("font-size", "10px") .style("letter-spacing", "1px") .style("font-weight", "750") .style("color", MUTED) .text(label); metricNodes.push( box.append("div") .style("font-size", "19px") .style("font-weight", "800") .style("margin-top", "5px") ); }); // ====================================== // MAP + RANKING LAYOUT // ====================================== const layout = root.append("div") .style("display", "flex") .style("gap", "18px") .style("flex-wrap", "wrap"); const mapPanel = layout.append("div") .style("flex", "2 1 540px") .style("min-width", "280px") .style("background", WHITE) .style("border", `1px solid ${BORDER}`) .style("border-radius", "12px") .style("padding", "14px"); const rankPanel = layout.append("div") .style("flex", "1 1 235px") .style("background", WHITE) .style("border", `1px solid ${BORDER}`) .style("border-radius", "12px") .style("padding", "17px"); const W = 850; const H = 445; const svg = mapPanel.append("svg") .attr("viewBox", `0 0 ${W} ${H}`) .style("width", "100%") .style("height", "auto") .style("display", "block"); const projection = d3.geoNaturalEarth1() .fitExtent([[15, 20], [W - 15, H - 20]], world); const path = d3.geoPath(projection); const countryPaths = svg.selectAll("path.country") .data(features) .join("path") .attr("class", "country") .attr("d", path) .attr("fill", NODATA) .attr("stroke", WHITE) .attr("stroke-width", 0.65) .style("cursor", "pointer") .style("pointer-events", "all"); const hoverText = mapPanel.append("div") .style("min-height", "38px") .style("padding", "10px 3px") .style("font-size", "12px") .style("color", MUTED); // ====================================== // COLOR LEGEND // ====================================== mapPanel.append("strong") .style("display", "block") .style("font-size", "12px") .style("margin", "8px 0 10px") .text("Aid received · Constant USD"); const legend = mapPanel.append("div") .style("display", "flex") .style("gap", "10px 14px") .style("flex-wrap", "wrap"); const ranges = [ `≤ ${money(cuts[0])}`, `${money(cuts[0])}–${money(cuts[1])}`, `${money(cuts[1])}–${money(cuts[2])}`, `${money(cuts[2])}–${money(cuts[3])}`, `> ${money(cuts[3])}` ]; BLUES.forEach((color, i) => { const item = legend.append("div") .style("display", "flex") .style("align-items", "center") .style("gap", "6px"); item.append("span") .style("display", "inline-block") .style("width", "16px") .style("height", "16px") .style("background", color) .style("border", "1px solid #C9D6E2") .style("border-radius", "3px"); item.append("span") .style("font-size", "10px") .style("color", MUTED) .text(ranges[i]); }); const missing = legend.append("div") .style("display", "flex") .style("align-items", "center") .style("gap", "6px"); missing.append("span") .style("width", "16px") .style("height", "16px") .style("background", NODATA) .style("border", "1px solid #CBD5E1"); missing.append("span") .style("font-size", "10px") .style("color", MUTED) .text("No matched data"); // ====================================== // TOP RECIPIENTS PANEL // ====================================== const rankingTitle = rankPanel.append("h3") .style("font-size", "15px") .style("margin", "0 0 6px"); rankPanel.append("p") .style("font-size", "11px") .style("color", MUTED) .text("Click a recipient to see its history."); const ranking = rankPanel.append("div") .style("margin-top", "12px"); // ====================================== // HISTORY PANEL // ====================================== const historyPanel = root.append("div") .style("background", WHITE) .style("border", `1px solid ${BORDER}`) .style("border-radius", "12px") .style("padding", "20px") .style("margin-top", "18px"); const historyTitle = historyPanel.append("h3") .style("font-size", "17px") .style("margin", "0 0 6px"); const historySub = historyPanel.append("p") .style("font-size", "12px") .style("color", MUTED); const historySvg = historyPanel.append("svg") .attr("viewBox", "0 0 920 245") .style("width", "100%"); let activePeriod = periods.length - 1; let selected = null; // ====================================== // COUNTRY HISTORY CHART // ====================================== function drawHistory() { historySvg.selectAll("*").remove(); if (!selected) { historyTitle.text("Explore a country's aid history"); historySub.text( "Click a country directly on the map or " + "in the ranking to view its history." ); return; } historyTitle.text(`${selected} — Aid received over time`); historySub.text( `Total across all recorded years: ` + `${money(overall.get(selected) || 0)}` ); const values = periods.map(p => ({ start: p.start, label: p.label, amount: byPeriod.get(p.start)?.get(selected) ?? null })); const x = d3.scaleBand() .domain(periods.map(p => p.start)) .range([85, 895]) .padding(0.25); const ymax = d3.max( values, d => d.amount ) || 1; const y = d3.scaleLinear() .domain([0, ymax * 1.15]) .range([185, 25]); // Horizontal grid historySvg.append("g") .attr("transform", "translate(85,0)") .call( d3.axisLeft(y) .ticks(4) .tickSize(-810) .tickFormat("") ) .call(g => g.select(".domain").remove()) .call(g => g.selectAll("line") .attr("stroke", "#E7EDF3")); // Y-axis historySvg.append("g") .attr("transform", "translate(85,0)") .call(d3.axisLeft(y).ticks(4).tickFormat(money)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll("text").attr("fill", MUTED)); // X-axis historySvg.append("g") .attr("transform", "translate(0,185)") .call( d3.axisBottom(x) .tickFormat(d => String(Math.max(d, first))) ) .call(g => g.select(".domain") .attr("stroke", "#CBD5E1")) .call(g => g.selectAll("text").attr("fill", MUTED)); // Bars historySvg.selectAll("rect.historyBar") .data(values.filter(d => d.amount !== null)) .join("rect") .attr("class", "historyBar") .attr("x", d => x(d.start)) .attr("y", d => y(d.amount)) .attr("width", x.bandwidth()) .attr("height", d => 185 - y(d.amount)) .attr("rx", 3) .attr("fill", d => d.start === periods[activePeriod].start ? ACCENT : "#659FC9" ) .append("title") .text(d => `${d.label}: ${money(d.amount)}`); // Missing data is not a zero bar. historySvg.selectAll("line.noData") .data(values.filter(d => d.amount === null)) .join("line") .attr("class", "noData") .attr("x1", d => x(d.start)) .attr("x2", d => x(d.start) + x.bandwidth()) .attr("y1", 180) .attr("y2", 180) .attr("stroke", "#A9B5C1") .attr("stroke-width", 3) .attr("stroke-dasharray", "3,3") .append("title") .text(d => `${d.label}: No recorded positive commitments`); } // ====================================== // SHARED COUNTRY SELECTION // This is the important interaction fix. // ====================================== function selectCountry(name) { if (!name) return; selected = name; update(); drawHistory(); } // ====================================== // REFRESH MAP, RANKINGS AND HISTORY // ====================================== function update() { const p = periods[activePeriod]; const amounts = byPeriod.get(p.start) || new Map(); periodLabel.text(p.label); const ranked = [...amounts.entries()] .filter(d => d[1] > 0) .sort((a, b) => b[1] - a[1]); metricNodes[0].text( money(d3.sum(ranked, d => d[1])) ); metricNodes[1].text( ranked.length.toLocaleString() ); metricNodes[2].text( ranked[0]?.[0] ?? "No data" ); // Recolor map and highlight selected country countryPaths .attr("fill", f => { const v = f.aidName ? amounts.get(f.aidName) : null; return mapColor(v); }) .attr("stroke", f => selected && f.aidName === selected ? ACCENT : WHITE ) .attr("stroke-width", f => selected && f.aidName === selected ? 2.5 : 0.65 ); rankingTitle.text(`Top recipients · ${p.label}`); ranking.selectAll("*").remove(); ranked.slice(0, 10).forEach(([name, amount], i) => { const row = ranking.append("div") .style("padding", "10px 0") .style("border-bottom", `1px solid ${BORDER}`) .style("cursor", "pointer") .style("background", selected === name ? "#EFF8F9" : "transparent" ) .on("click", () => selectCountry(name)); const line = row.append("div") .style("display", "flex") .style("align-items", "center") .style("gap", "8px"); line.append("span") .style("font-size", "11px") .style("font-weight", "800") .style("color", ACCENT) .text(String(i + 1).padStart(2, "0")); line.append("span") .style("font-size", "12px") .style("font-weight", "650") .style("flex", "1") .text(name); row.append("div") .style("font-size", "12px") .style("font-weight", "750") .style("margin", "5px 0") .text(money(amount)); const track = row.append("div") .style("height", "6px") .style("background", "#E8EEF4") .style("border-radius", "4px"); track.append("div") .style("height", "6px") .style("border-radius", "4px") .style("background", "#347CAB") .style("width", `${100 * amount / ranked[0][1]}%` ); }); drawHistory(); } // ====================================== // MAP CLICK AND HOVER // ====================================== countryPaths .on("mouseenter", function(event, feature) { d3.select(this) .attr("stroke", ACCENT) .attr("stroke-width", 2); const name = feature.aidName; const displayName = name || feature.properties?.ADMIN || feature.properties?.NAME || "Unknown country"; const p = periods[activePeriod]; const amount = name ? byPeriod.get(p.start)?.get(name) : null; hoverText.text( `${displayName} · ${p.label} · ` + (amount > 0 ? money(amount) : "No matched positive commitments") ); }) .on("mouseleave", function(event, feature) { d3.select(this) .attr("stroke", selected && feature.aidName === selected ? ACCENT : WHITE ) .attr("stroke-width", selected && feature.aidName === selected ? 2.5 : 0.65 ); hoverText.text( "Click a country on the map to view its history." ); }) .on("click", function(event, feature) { event.stopPropagation(); const name = feature.aidName; if (name) { selectCountry(name); const amount = byPeriod .get(periods[activePeriod].start) ?.get(name); hoverText.text( `${name} selected · ` + (amount > 0 ? money(amount) : "No recorded commitments this period") ); } else { const displayName = feature.properties?.ADMIN || feature.properties?.NAME || "Unknown country"; hoverText.text( `${displayName} has no matching recipient name ` + "in the aid dataset." ); } }); // ====================================== // SLIDER INTERACTION // ====================================== slider.on("input", event => { activePeriod = Number(event.target.value); update(); }); // ====================================== // METHODOLOGY // ====================================== root.append("p") .style("font-size", "11px") .style("color", MUTED) .style("line-height", "1.7") .style("margin-top", "18px") .text( "Source: AidData country-level commitments. " + "Positive commitments in constant USD are aggregated " + "into five-year periods. Five fixed blue categories " + "show funding levels using quantile thresholds. " + "Gray indicates no matched positive records, " + "not necessarily zero aid. Country-name differences " + "between the spreadsheet and map may leave some " + "records unmatched." ); // Initial render update(); return root.node(); })(); viz3Geo 47:T220e, md` ### Written Analysis (Viz #3) The geographic distribution of international aid commitments changed considerably between 1973 and 2013. The visualization combines an interactive world map, a ranking of major recipient countries, and a historical chart for individual countries. Together, these views reveal that aid was geographically concentrated, but the countries and regions receiving the largest commitments were not always the same. **1973–1984 — Concentration in South and East Asia** During the earlier years, aid commitments were strongly concentrated in Asian countries, particularly India, South Korea, and Thailand. India was already a major recipient and remained important throughout much of the dataset. South Korea and Thailand also received substantial commitments during the earlier periods. The map highlights this geographic concentration through darker shades over major recipient countries. This suggests that the early distribution of recorded commitments was not geographically uniform. A relatively small group of Asian recipients accounted for a substantial amount of the funding. **1985–1999 — Greater geographic distribution** During the late 1980s and 1990s, commitments became more geographically distributed. Asian countries continued to receive important amounts, but recipients in Europe and Latin America became increasingly visible. Poland emerged as a major recipient during the early 1990s, while Brazil became an important recipient during the later 1990s. These changes indicate that the geographic concentration of aid expanded beyond the countries that dominated the earlier periods. The appearance of major recipients across different continents also shows why examining individual countries through a single cumulative ranking would conceal important historical differences. **2000–2013 — Continued importance of South Asia and changing recipients elsewhere** During the later years, India remained one of the most important aid recipients. At the same time, countries such as Brazil and Colombia illustrate the importance of Latin America in the cumulative distribution of commitments. The geographic pattern therefore differs from the earlier period, when South Korea and Thailand were among the most prominent Asian recipients. Rather than demonstrating a complete transfer of aid from one region to another, the visualization suggests a combination of persistent major recipients and changing secondary concentrations. South Asia remains a recurring center of recorded commitments, while the importance of other recipient countries varies across periods. **Top recipient countries** Across all recorded years, India is the largest cumulative recipient, with approximately $134.0B in commitments. Other major recipients include Thailand ($49.0B), Brazil ($36.6B), Colombia ($25.5B), South Korea ($25.3B), and Poland ($24.5B). These totals show that the largest cumulative recipients are distributed across several parts of the world. However, cumulative totals can conceal when the commitments occurred. The ranking beside the map addresses this problem by updating the ten leading recipient countries for each selected five-year period. A country that ranks highly overall may not necessarily be among the leading recipients during every historical period. **Country-level history** The historical chart adds a more detailed perspective by displaying received commitments for the selected country across successive periods. India provides an important example. Its recorded commitments were approximately $11.2B in 2000–2004, increased to a peak of about $21.6B in 2005–2009, and decreased again during the final recorded period. This demonstrates that even a consistently important recipient can experience substantial changes in the magnitude of its commitments. Selecting other countries reveals different patterns, including periods of concentrated funding and intervals with little or no matched recorded activity. **Overall finding** International aid commitments did not remain geographically fixed throughout the dataset. South Asia, particularly India, remained a persistent center of received commitments. However, other important recipient concentrations changed over time, with East Asian countries prominent during earlier periods, European recipients becoming important around the 1990s, and Latin American countries receiving substantial commitments during later periods. The geographic changes are best understood as a combination of continuity and redistribution, rather than a simple movement from one region to another. ### Design Rationale (Viz #3) I designed one linked geographic visualization containing a choropleth map, a top-recipient ranking, and an individual country-history chart. The goal was to make geographic shifts visible while preserving the ability to inspect exact amounts and historical patterns. **Interactive choropleth map** Countries are shaded according to the amount of aid commitments received during the selected time period. Geographic position is the primary visual encoding, making it possible to identify concentrations in different parts of the world. Five discrete blue shades represent increasing commitment amounts. Darker colors indicate higher levels of recorded commitments. A fixed color scale is maintained across periods so that changes in color represent changes in commitment magnitude rather than changes in the legend. Light gray represents countries without matched positive commitment records, avoiding the misleading assumption that missing information always means zero aid. **Five-year time aggregation** Commitments are aggregated into approximately five-year intervals rather than displayed as individual annual maps. This reduces the impact of isolated annual fluctuations and makes broad geographic changes easier to compare. The time slider provides a chronological view of the data without requiring many separate maps on the screen. The final interval is shorter because the recorded dataset ends in 2013. **Top-recipient ranking** A ranking alongside the map displays the ten countries receiving the most commitments during the selected period. This provides precise comparisons that are difficult to make through color alone. The horizontal bars also help distinguish countries that fall into the same choropleth color category but have different amounts of received commitments. Because the ranking updates with the selected period, users can identify how the leading recipients change over time. **Individual country-history chart** Selecting a country on the map or in the ranking displays its funding history below. The historical bars show how the country's received commitments change across periods. The selected interval is highlighted, connecting the historical view with the current map selection. This interaction is valuable because the map alone cannot show the complete history of one country. **Strengths and limitations** The choropleth map is effective for identifying where commitments are geographically concentrated. The ranking supports precise country comparisons, while the historical chart reveals whether funding is persistent or concentrated in particular periods. One limitation of choropleth maps is that large countries occupy more visual space than small countries, regardless of their funding amount. A second limitation is that aggregating several years together can conceal short-lived annual peaks or valleys. Finally, differences between AidData country names and geographic boundary names can affect country matching. Countries without matched records are displayed separately. The visualization also measures commitments rather than underlying need, so a darker country should not automatically be interpreted as having greater development needs than a lighter country. **Comparison** The map is best for understanding the geographic distribution of funding and how that distribution changes over time. The recipient ranking is best for identifying the largest recipients within a selected period. The country-history chart is best for understanding the temporal behavior of individual recipients. Together, the three linked components answer the geographic question more effectively than a standalone map because they combine spatial patterns, exact rankings, and historical context. *Data note:* Amounts represent positive aid commitments in constant US dollars. Five-year intervals are used for historical comparison. Geographic patterns indicate the distribution of recorded commitments, not direct measures of development need or actual disbursements. ` 48:T9dd, const verifyFindings = (() => { const rows = aid.map(d => ({ year: Number(d.year), donor: String(d.donor ?? "").trim(), recipient: String(d.recipient ?? "").trim(), purpose: String(d.coalesced_purpose_name ?? "").trim(), amount: Number(d.commitment_amount_usd_constant) })).filter(d => Number.isInteger(d.year) && Number.isFinite(d.amount) && d.amount > 0 ); const money = n => `$${(n / 1e9).toFixed(2)}B`; // 1. Cumulative country amounts const countries = [ "United States", "Japan", "Germany", "India", "Thailand", "Brazil", "Colombia", "South Korea", "Poland", "Australia", "Austria" ]; const countryTotals = countries.map(country => ({ country, donated: money(d3.sum(rows.filter(d => d.donor === country), d => d.amount)), received: money(d3.sum(rows.filter(d => d.recipient === country), d => d.amount)) })); // 2. India five-year commitments const periods = [ [2000, 2004], [2005, 2009], [2010, 2013] ]; const indiaPeriods = periods.map(([start, end]) => ({ period: `${start}–${end}`, received: money(d3.sum(rows.filter(d => d.recipient === "India" && d.year >= start && d.year <= end ), d => d.amount)) })); // 3. Top ten purposes const purposeRows = rows.filter(d => d.purpose && !/^(unspecified|sectors not specified)$/i.test(d.purpose) ); const topPurposes = d3.rollups( purposeRows, v => d3.sum(v, d => d.amount), d => d.purpose ).sort((a, b) => b[1] - a[1]).slice(0, 10); // 4. Annual share of top-ten purposes const topNames = new Set(topPurposes.map(d => d[0])); const annual = d3.rollup( purposeRows.filter(d => topNames.has(d.purpose)), v => d3.sum(v, d => d.amount), d => d.year, d => d.purpose ); const purposeYears = [1975, 1989, 2002, 2007, 2010, 2011]; const purposeShares = purposeYears.flatMap(year => { const values = annual.get(year); if (!values) return []; const total = d3.sum(values.values()); return [...values] .sort((a, b) => b[1] - a[1]) .slice(0, 3) .map(([purpose, amount]) => ({ year, purpose, share: `${(100 * amount / total).toFixed(2)}%`, amount: money(amount) })); }); return { countryTotals, indiaPeriods, topPurposes: topPurposes.map(([purpose, amount]) => ({ purpose, total: money(amount) })), purposeShares }; })(); console.log(verifyFindings); verifyFindings 49:[{"id":"2e3de925287a2371cd636d0167f81286b13a6d47d54888fae2bf2a9542a07b22e637f800c6e7c0fd806d717ffa353f2b6d54f287055673655ede4f6aa978ef5f","href":"https://static.observableusercontent.com/files/2e3de925287a2371cd636d0167f81286b13a6d47d54888fae2bf2a9542a07b22e637f800c6e7c0fd806d717ffa353f2b6d54f287055673655ede4f6aa978ef5f","name":"aiddata-countries-only (1).xlsx","type":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","lastModified":1794438005952,"size":5398668},{"id":"55260abbc777c0a3b8fed19f3929dd822fef9d5118b53b76b2176d20782910e599eac919999ea8ee85a60b783fd37082574f6591fd46c0d70ddf9b00df71ce27","href":"https://static.observableusercontent.com/files/55260abbc777c0a3b8fed19f3929dd822fef9d5118b53b76b2176d20782910e599eac919999ea8ee85a60b783fd37082574f6591fd46c0d70ddf9b00df71ce27","name":"countries-50m.json","type":"application/json","lastModified":1794438084628,"size":4177662}] 38:{"id":"6cb14a4a4cabfe3c","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-11T21:32:17.554Z","update_time":"$D2026-11-13T04:44:26.958Z","view_time":null,"first_public_time":"$D2026-11-13T02:23:07.254Z","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":"9b92ccd45cd57ffd","login":"lvg8030","name":"Likhith Vardhan Goruputi","avatar_url":"https://avatars-next.observableusercontent.com/a9aafac070d69856474f201099c301c86b59fa236e9c5ef5755ba84a6620444b","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":368,"publish_version":368,"role":null,"authored":false,"authors":[{"type":"individual","id":"9e6c38c3a6da23b8","login":"lvg8030","name":"Likhith Vardhan Goruputi","avatar_url":"https://avatars-next.observableusercontent.com/a9aafac070d69856474f201099c301c86b59fa236e9c5ef5755ba84a6620444b","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"9b92ccd45cd57ffd","login":"lvg8030","name":"Likhith Vardhan Goruputi","avatar_url":"https://avatars-next.observableusercontent.com/a9aafac070d69856474f201099c301c86b59fa236e9c5ef5755ba84a6620444b","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":"\nconst aid = (await FileAttachment(\"aiddata-countries-only (1).xlsx\").xlsx())\n .sheet(\"aiddata-countries-only\", {headers: true});\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"$3f","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"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":"display(aidFigure1);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"$41","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"display(aidFigure2);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"$42","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"display(aidFigure3);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"$43","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"$44","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"display(viz2Pulse)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"$45","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"const world = await FileAttachment(\"countries-50m.json\").json();","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"$46","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"display(viz3Geo)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"$47","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"md`\n### AI Use Disclosure\n\nPer the course AI policy, I used generative AI tools,\nincluding ChatGPT (OpenAI), to assist with developing\nand debugging the D3 visualizations.\n\nAI assistance included generating and revising portions\nof the JavaScript code, data aggregation, country-name\nmatching, chart interactions, color selection, and\nvisualization layouts.\n\nI also used AI assistance to draft and revise portions\nof the written analysis and design rationale.\n`","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"$48","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"display(verifyFindings)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"\ndisplay(Inputs.table(verifyFindings.countryTotals));\ndisplay(Inputs.table(verifyFindings.indiaPeriods));\ndisplay(Inputs.table(verifyFindings.topPurposes));\ndisplay(Inputs.table(verifyFindings.purposeShares));\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"2"}} 33:null