34:["$","title",null,{"children":"Mini-Project 2: Temporal Data Visualization (Due Nov. 12th) | Harshith Kori Raj | 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:T1341,helpers = { function cleanAidRows(rows) { return rows.flatMap(row => { const year = Number(row.year); const donor = String(row.donor ?? "").trim(); const recipient = String(row.recipient ?? "").trim(); const rawAmount = row.commitment_amount_usd_constant; const amount = rawAmount === "" || rawAmount == null ? NaN : Number(rawAmount); const purpose = String(row.coalesced_purpose_name ?? "").trim(); if (!Number.isInteger(year) || !Number.isFinite(amount) || amount <= 0 || !donor || !recipient) return []; return [{year, donor, recipient, amount, purpose}]; }); } function buildCountrySeries(rows, country) { if (!rows.length) return []; const minYear = d3.min(rows, d => d.year); const maxYear = d3.max(rows, d => d.year); const byYear = new Map(); for (const row of rows) { if (row.donor !== country && row.recipient !== country) continue; const values = byYear.get(row.year) ?? {donated: 0, received: 0}; if (row.donor === country) values.donated += row.amount; if (row.recipient === country) values.received += row.amount; byYear.set(row.year, values); } return d3.range(minYear, maxYear + 1).map(year => { const values = byYear.get(year) ?? {donated: 0, received: 0}; return { year, donated: values.donated, received: values.received, total: values.donated + values.received, net: values.received - values.donated }; }); } function summarizeCountry(series) { const totalDonated = d3.sum(series, d => d.donated); const totalReceived = d3.sum(series, d => d.received); const totalActivity = totalDonated + totalReceived; const balance = totalActivity ? (totalReceived - totalDonated) / totalActivity : 0; const overallRole = balance > 0.1 ? "recipient-heavy" : balance < -0.1 ? "donor-heavy" : "balanced"; const switchYears = []; let previousRole = 0; for (const d of series) { const role = Math.sign(d.net); if (!role) continue; if (previousRole && role !== previousRole) switchYears.push(d.year); previousRole = role; } const changes = series.slice(1).map((d, i) => ({year: d.year, change: d.total - series[i].total})); const peak = changes.length ? changes.reduce((best, d) => d.change > best.change ? d : best) : null; const valley = changes.length ? changes.reduce((best, d) => d.change < best.change ? d : best) : null; return {totalDonated, totalReceived, totalActivity, balance, overallRole, switchYears, peak, valley}; } function buildPurposeShares(rows, limit = 10) { const totals = d3.rollup( rows.filter(d => d.purpose && d.purpose.toUpperCase() !== "UNSPECIFIED"), values => d3.sum(values, d => d.amount), d => d.purpose ); const purposes = [...totals] .sort((a, b) => d3.descending(a[1], b[1]) || d3.ascending(a[0], b[0])) .slice(0, 10) .slice(0, limit) .map(([purpose]) => purpose); if (!purposes.length) return {purposes: [], totals, yearly: []}; const selected = new Set(purposes); const annual = d3.rollup( rows.filter(d => selected.has(d.purpose)), values => d3.sum(values, d => d.amount), d => d.year, d => d.purpose ); const minYear = d3.min(rows, d => d.year); const maxYear = d3.max(rows, d => d.year); const yearly = d3.range(minYear, maxYear + 1).flatMap(year => { const values = annual.get(year) ?? new Map(); const total = d3.sum(purposes, purpose => values.get(purpose) ?? 0); if (!total) return []; const row = {year, _total: total}; for (const purpose of purposes) row[purpose] = (values.get(purpose) ?? 0) / total; return [row]; }); return {purposes, totals, yearly}; } function buildDecadeRecipients(rows) { if (!rows.length) return {decades: [], maxAmount: 0}; const minStart = Math.floor(d3.min(rows, d => d.year) / 10) * 10; const maxStart = Math.floor(d3.max(rows, d => d.year) / 10) * 10; const decadeMap = new Map(d3.range(minStart, maxStart + 1, 10).map(start => [start, new Map()])); for (const row of rows) { const start = Math.floor(row.year / 10) * 10; const byCountry = decadeMap.get(start); byCountry.set(row.recipient, (byCountry.get(row.recipient) ?? 0) + row.amount); } const decades = [...decadeMap].map(([start, byCountry]) => ({ start, end: start + 9, label: `${start}–${start + 9}`, total: d3.sum(byCountry.values()), byCountry })); return {decades, maxAmount: d3.max(decades, d => d3.max(d.byCountry.values())) ?? 0}; } const formatMoney = value => { const text = d3.format("$.3~s")(value); return text.replace("G", "B"); }; return {cleanAidRows, buildCountrySeries, summarizeCountry, buildPurposeShares, buildDecadeRecipients, formatMoney}; }40:T64b,countryOverviewTable = { const groups = [ ["Mostly sends", countryOverview.donorHeavy], ["Mostly receives", countryOverview.recipientHeavy], ["Balanced", countryOverview.balanced], ["Changes role", countryOverview.switchers], ["Largest changes", countryOverview.volatile] ]; const rows = groups.flatMap(([category, values]) => values.map(d => ({category, ...d}))); const formatChange = d => d ? `${d.year} (${helpers.formatMoney(d.change)})` : "n/a"; const columns = ["Category", "Country", "Donated", "Received", "Role", "Switch years", "Largest rise", "Largest fall"]; const table = d3.create("table") .attr("style", "border-collapse:collapse;width:100%;font:12px Arial,sans-serif;margin:10px 0 24px"); table.append("caption") .attr("style", "text-align:left;font-weight:600;font-size:14px;margin-bottom:7px") .text("Country comparison table"); table.append("thead").append("tr") .selectAll("th") .data(columns) .join("th") .attr("style", "text-align:left;border-bottom:2px solid #999;padding:5px") .text(d => d); table.append("tbody") .selectAll("tr") .data(rows) .join("tr") .selectAll("td") .data(d => [ d.category, d.country, helpers.formatMoney(d.totalDonated), helpers.formatMoney(d.totalReceived), d.overallRole, d.switchYears.length ? d.switchYears.join(", ") : "none", formatChange(d.peak), formatChange(d.valley) ]) .join("td") .attr("style", "border-bottom:1px solid #ddd;padding:5px;vertical-align:top") .text(d => d); return table.node(); }41:Te6d,viz1 = { const chartWidth = Math.max(620, Math.min(width, 920)); const chartHeight = 430; const margin = {top: 45, right: 30, bottom: 55, left: 85}; const x = d3.scaleLinear() .domain(d3.extent(countrySeries, d => d.year)) .range([margin.left, chartWidth - margin.right]); const y = d3.scaleLinear() .domain([0, d3.max(countrySeries, d => Math.max(d.donated, d.received)) || 1]) .nice() .range([chartHeight - margin.bottom, margin.top]); const colors = {donated: "#1f77b4", received: "#d95f02"}; const svg = d3.create("svg") .attr("viewBox", [0, 0, chartWidth, chartHeight]) .attr("style", "max-width:100%;height:auto;font:12px Arial,sans-serif"); svg.append("text") .attr("x", margin.left) .attr("y", 22) .attr("font-size", 17) .attr("font-weight", 600) .text(`${selectedCountry}: donated and received aid by year`); svg.append("g") .attr("transform", `translate(0,${chartHeight - margin.bottom})`) .call(d3.axisBottom(x).ticks(8).tickFormat(d3.format("d"))); svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(6).tickFormat(helpers.formatMoney)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").clone() .attr("x2", chartWidth - margin.left - margin.right) .attr("stroke", "#ddd")); svg.append("text") .attr("x", (margin.left + chartWidth - margin.right) / 2) .attr("y", chartHeight - 12) .attr("text-anchor", "middle") .text("Year"); svg.append("text") .attr("transform", "rotate(-90)") .attr("x", -(margin.top + chartHeight - margin.bottom) / 2) .attr("y", 18) .attr("text-anchor", "middle") .text("Commitment amount (constant USD)"); const line = key => d3.line() .x(d => x(d.year)) .y(d => y(d[key])) .curve(d3.curveMonotoneX); for (const key of ["donated", "received"]) { svg.append("path") .datum(countrySeries) .attr("fill", "none") .attr("stroke", colors[key]) .attr("stroke-width", 2.2) .attr("d", line(key)); svg.append("g") .selectAll("circle") .data(countrySeries.filter(d => d[key] > 0)) .join("circle") .attr("cx", d => x(d.year)) .attr("cy", d => y(d[key])) .attr("r", 3) .attr("fill", colors[key]) .append("title") .text(d => `${selectedCountry}\n${d.year}\n${key}: ${helpers.formatMoney(d[key])}`); } const legend = svg.append("g").attr("transform", `translate(${chartWidth - 210},24)`); [["donated", "Donated"], ["received", "Received"]].forEach(([key, label], i) => { legend.append("line").attr("x1", i * 105).attr("x2", i * 105 + 22).attr("stroke", colors[key]).attr("stroke-width", 3); legend.append("text").attr("x", i * 105 + 28).attr("y", 4).text(label); }); const wrapper = document.createElement("div"); wrapper.append(svg.node()); const summary = document.createElement("div"); summary.style.cssText = "font:13px Arial,sans-serif;margin:8px 0 20px 85px;line-height:1.55"; summary.innerHTML = `Selected-country summary: donated ${helpers.formatMoney(countrySummary.totalDonated)}; received ${helpers.formatMoney(countrySummary.totalReceived)}; overall role ${countrySummary.overallRole}; role switches ${countrySummary.switchYears.length ? countrySummary.switchYears.join(", ") : "none"}; largest rise ${countrySummary.peak ? `${countrySummary.peak.year} (${helpers.formatMoney(countrySummary.peak.change)})` : "n/a"}; largest fall ${countrySummary.valley ? `${countrySummary.valley.year} (${helpers.formatMoney(countrySummary.valley.change)})` : "n/a"}.`; wrapper.append(summary); return wrapper; }42:T5fe,md`### What I found - The largest strongly donor-heavy examples are ${countryOverview.donorHeavy.map(d => `**${d.country}**`).join(", ")}. The largest strongly recipient-heavy examples are ${countryOverview.recipientHeavy.map(d => `**${d.country}**`).join(", ")}. - **${countryOverview.balanced.map(d => d.country).join("** and **")}** have similar total amounts sent and received. I classify a country as balanced when its difference is within 10% of total activity. - Role changes do occur. Examples with repeated switches include ${countryOverview.switchers.map(d => `**${d.country}** (${d.switchYears.length})`).join(", ")}. - Sudden peaks and valleys are common. The strongest high-activity examples include ${countryOverview.volatile.map(d => `**${d.country}**`).join(", ")}. For the selected country, the largest rise is ${countrySummary.peak ? `${countrySummary.peak.year} (${helpers.formatMoney(countrySummary.peak.change)})` : "not available"} and the largest fall is ${countrySummary.valley ? `${countrySummary.valley.year} (${helpers.formatMoney(countrySummary.valley.change)})` : "not available"}. ### Why this chart Two lines on the same scale make donated and received amounts directly comparable. Crossings show changes in role, while steep changes and the point markers make peaks and valleys visible. The selector keeps the chart readable while still covering every country. The comparison table above makes the important cross-country examples visible without requiring the reader to test every selector option.`43:Tc89,viz2 = { const chartWidth = Math.max(700, Math.min(width, 980)); const chartHeight = 610; const margin = {top: 45, right: 30, bottom: 190, left: 70}; const x = d3.scaleLinear() .domain(d3.extent(purposeData.yearly, d => d.year)) .range([margin.left, chartWidth - margin.right]); const y = d3.scaleLinear().domain([0, 1]).range([chartHeight - margin.bottom, margin.top]); const color = d3.scaleOrdinal(purposeData.purposes, d3.schemeTableau10); const stacked = d3.stack().keys(purposeData.purposes)(purposeData.yearly); const area = d3.area() .x(d => x(d.data.year)) .y0(d => y(d[0])) .y1(d => y(d[1])) .curve(d3.curveMonotoneX); const svg = d3.create("svg") .attr("viewBox", [0, 0, chartWidth, chartHeight]) .attr("style", "max-width:100%;height:auto;font:12px Arial,sans-serif"); svg.append("text") .attr("x", margin.left) .attr("y", 22) .attr("font-size", 17) .attr("font-weight", 600) .text("Share of yearly commitments among the top 10 purposes"); svg.append("g") .selectAll("path") .data(stacked) .join("path") .attr("fill", d => color(d.key)) .attr("d", area) .append("title") .text(d => d.key + "\nOverall total: " + helpers.formatMoney(purposeData.totals.get(d.key))); const yearStep = (x.range()[1] - x.range()[0]) / Math.max(1, purposeData.yearly.length - 1); svg.append("g") .selectAll("rect") .data(purposeData.yearly) .join("rect") .attr("x", d => x(d.year) - yearStep / 2) .attr("y", margin.top) .attr("width", yearStep) .attr("height", chartHeight - margin.bottom - margin.top) .attr("fill", "transparent") .append("title") .text(d => d.year + "\n" + purposeData.purposes.map(purpose => purpose + ": " + d3.format(".1%")(d[purpose]) + " (" + helpers.formatMoney(d[purpose] * d._total) + ")").join("\n")); svg.append("g") .attr("transform", "translate(0," + (chartHeight - margin.bottom) + ")") .call(d3.axisBottom(x).ticks(8).tickFormat(d3.format("d"))); svg.append("g") .attr("transform", "translate(" + margin.left + ",0)") .call(d3.axisLeft(y).ticks(5).tickFormat(d3.format(".0%"))) .call(g => g.select(".domain").remove()); svg.append("text") .attr("x", (margin.left + chartWidth - margin.right) / 2) .attr("y", chartHeight - margin.bottom + 42) .attr("text-anchor", "middle") .text("Year"); svg.append("text") .attr("transform", "rotate(-90)") .attr("x", -(margin.top + chartHeight - margin.bottom) / 2) .attr("y", 18) .attr("text-anchor", "middle") .text("Share of top-ten commitment amount"); const legend = svg.append("g").attr("transform", "translate(" + margin.left + "," + (chartHeight - 120) + ")"); purposeData.purposes.forEach((purpose, i) => { const column = i % 2; const row = Math.floor(i / 2); const item = legend.append("g").attr("transform", "translate(" + (column * (chartWidth / 2 - 45)) + "," + (row * 23) + ")"); item.append("rect").attr("width", 12).attr("height", 12).attr("fill", color(purpose)); item.append("text").attr("x", 18).attr("y", 10).attr("font-size", 11).text((i + 1) + ". " + purpose); }); return svg.node(); }44:T486,md`### What I found The top 10 purposes by total commitment amount are: ${purposeSummary.map((d, i) => `${i + 1}. **${d.purpose}** — ${helpers.formatMoney(d.total)}; highest yearly share in ${d.peakYear} (${d3.format(".1%")(d.peakShare)})`).join("\n")} The relative mix changes substantially. **${purposeSummary[5].purpose}** is most prominent in ${purposeSummary[5].peakYear}, **${purposeSummary[4].purpose}** peaks in ${purposeSummary[4].peakYear}, **${purposeSummary[0].purpose}** dominates in ${purposeSummary[0].peakYear}, and **${purposeSummary[8].purpose}** becomes especially prominent by ${purposeSummary[8].peakYear}. This supports the idea that aid priorities changed rather than one purpose remaining dominant throughout the period. ### Why this chart A 100% stacked area chart shows composition instead of letting years with larger overall aid totals dominate the comparison. The shared vertical scale makes it easy to see which purposes occupy more of the yearly total and when their prominence changes. The tradeoff is that middle layers are harder to compare precisely, so the numbered list reports each purpose's total and peak year.`45:T6a1,geoContext = { const rawDecadeData = helpers.buildDecadeRecipients(aidRows); const minYear = d3.min(aidRows, d => d.year); const maxYear = d3.max(aidRows, d => d.year); const decades = rawDecadeData.decades.map(decade => { const start = Math.max(decade.start, minYear); const end = Math.min(decade.end, maxYear); const yearCount = end - start + 1; const byCountry = new Map([...decade.byCountry].map(([country, amount]) => [country, amount / yearCount])); return { ...decade, start, end, yearCount, label: start === end ? `${start}` : `${start}–${end}`, rawTotal: decade.total, total: decade.total / yearCount, byCountry }; }); const decadeData = {decades, maxAmount: d3.max(decades, d => d3.max(d.byCountry.values())) ?? 0}; const featureByName = new Map(geoData.features.map(feature => [feature.properties.ADMIN, feature])); const periods = decadeData.decades.map(decade => { const byFeature = new Map(); const regionTotals = new Map(); for (const [recipient, amount] of decade.byCountry) { const featureName = geoAliases[recipient] ?? recipient; const feature = featureByName.get(featureName); if (!feature) continue; byFeature.set(featureName, amount); const region = feature.properties.CONTINENT ?? "Other"; regionTotals.set(region, (regionTotals.get(region) ?? 0) + amount); } const leaders = [...decade.byCountry].sort((a, b) => d3.descending(a[1], b[1])); const regions = [...regionTotals].sort((a, b) => d3.descending(a[1], b[1])); return {...decade, byFeature, leader: leaders[0], regions}; }); return {...decadeData, periods}; }46:Ta90,viz3 = { const chartWidth = Math.max(720, Math.min(width, 980)); const columns = 2; const gap = 24; const panelWidth = (chartWidth - gap) / columns; const panelHeight = 280; const legendHeight = 62; const rows = Math.ceil(geoContext.periods.length / columns); const chartHeight = legendHeight + rows * panelHeight; const projection = d3.geoNaturalEarth1().fitSize([panelWidth - 18, panelHeight - 58], geoData); const path = d3.geoPath(projection); const color = d3.scaleSequentialSqrt(d3.interpolateBlues).domain([0, geoContext.maxAmount]); const svg = d3.create("svg") .attr("viewBox", [0, 0, chartWidth, chartHeight]) .attr("style", "max-width:100%;height:auto;font:11px Arial,sans-serif"); svg.append("text") .attr("x", 0) .attr("y", 20) .attr("font-size", 17) .attr("font-weight", 600) .text("Average received aid per year by period"); const legendValues = [0, 0.01, 0.1, 0.5, 1].map(d => d * geoContext.maxAmount); const legend = svg.append("g").attr("transform", "translate(0,34)"); legendValues.forEach((value, i) => { legend.append("rect") .attr("x", i * 115) .attr("width", 15) .attr("height", 15) .attr("fill", value ? color(value) : "#eee") .attr("stroke", "#bbb"); legend.append("text") .attr("x", i * 115 + 21) .attr("y", 12) .text(value ? helpers.formatMoney(value) : "No aid"); }); geoContext.periods.forEach((period, i) => { const column = i % columns; const row = Math.floor(i / columns); const panel = svg.append("g") .attr("transform", `translate(${column * (panelWidth + gap)},${legendHeight + row * panelHeight})`); panel.append("text") .attr("x", 0) .attr("y", 14) .attr("font-size", 14) .attr("font-weight", 600) .text(period.label); panel.append("text") .attr("x", 0) .attr("y", 32) .attr("fill", "#555") .text(`Leading recipient: ${period.leader[0]} (${helpers.formatMoney(period.leader[1])}/year)`); panel.append("g") .attr("transform", "translate(0,42)") .selectAll("path") .data(geoData.features) .join("path") .attr("d", path) .attr("fill", feature => { const amount = period.byFeature.get(feature.properties.ADMIN); return amount ? color(amount) : "#eee"; }) .attr("stroke", "#999") .attr("stroke-width", 0.35) .append("title") .text(feature => { const amount = period.byFeature.get(feature.properties.ADMIN) ?? 0; return `${period.label}\n${feature.properties.ADMIN}\n${amount ? helpers.formatMoney(amount) : "No recorded aid"}`; }); }); return svg.node(); }47:T507,md`### What I found - **Asia has the largest annual average in every period** in this dataset. Its annual average is ${geoContext.periods.map(d => `${d.label}: ${helpers.formatMoney(d.regions[0][1])}/year`).join("; ")}. - **India is the leading individual recipient in all five periods**, ranging from ${helpers.formatMoney(d3.min(geoContext.periods, d => d.leader[1]))} to ${helpers.formatMoney(d3.max(geoContext.periods, d => d.leader[1]))} per year. - The secondary geography changes. Europe becomes much more visible in the 1980s and especially the 1990s, while South America has the second-largest regional total in the 2000s and 2010s. Africa also becomes more visible after 1990. The pattern therefore has a stable Asian center but meaningful shifts among the other regions. ### Why this chart Small-multiple maps preserve the geographic context and let the reader compare periods without controlling a slider. Grouping reduces annual noise, annual averaging makes the partial first and last periods comparable to the full decades, and one shared square-root color scale keeps the five maps comparable while still showing moderate values. A limitation is that commitment amount is not a direct measure of need, and country-level aggregation hides differences within countries.`48:T4c2,md`--- ## Overall summary The three views show that international aid changed in several ways at once. Countries occupy very different roles: some primarily give, some primarily receive, and a smaller group changes roles or stays close to balanced. The mix of purposes also shifts sharply across years, with transport, refinancing, industry, welfare, and energy becoming prominent at different times. Geographically, Asia remains the largest recipient region in this reduced dataset, but Europe, South America, and Africa change in relative prominence across the decades. ## Sources - [Provided simplified AidData spreadsheet](https://docs.google.com/spreadsheets/d/1YiuHdfZv_JZ-igOemKJMRaU8dkucfmHxOP6Od3FraW8/) - [Provided country GeoJSON](https://drive.google.com/file/d/10OgiHSAf6y7h110pLy8ADQ7xWHGaMNlu/view) - [AidData Core Research Release](https://www.aiddata.org/data/aiddata-core-research-release-level-1-3-1) - [Natural Earth](https://www.naturalearthdata.com/) ## AI use disclosure I used OpenAI Codex to help write and check the JavaScript/D3 code, verify the calculations and visual output, and edit the written explanations. I reviewed the final notebook and am responsible for the submitted work.`49:[{"id":"bb8ba609b6dec5bcac44e3efbe7c3f32a94864636248d1245fd07b2e1de5542315ca21ecbb721b20353742f515ec4940c05f80c77c57f9e7c89fcaca1b6dbadb","href":"https://static.observableusercontent.com/files/bb8ba609b6dec5bcac44e3efbe7c3f32a94864636248d1245fd07b2e1de5542315ca21ecbb721b20353742f515ec4940c05f80c77c57f9e7c89fcaca1b6dbadb","name":"countries.geojson","type":"application/geo+json","lastModified":1794417256759,"size":4177662}] 38:{"id":"c76f417318bc2384","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-09T04:57:51.977Z","update_time":"$D2026-11-11T17:39:40.837Z","view_time":null,"first_public_time":"$D2026-11-11T19:30:28.854Z","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":"b3ddba61bff404c7","login":"harshith-kori-raj","name":"Harshith Kori Raj","avatar_url":"https://avatars-next.observableusercontent.com/af1abed5f1c20534d016dc9a5dbbefa4cf7a0cd8eba8e7fde83863fbe28b8816","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":339,"publish_version":339,"role":null,"authored":false,"authors":[{"type":"individual","id":"5264912dbf9db8e0","login":"harshith-kori-raj","name":"Harshith Kori Raj","avatar_url":"https://avatars-next.observableusercontent.com/af1abed5f1c20534d016dc9a5dbbefa4cf7a0cd8eba8e7fde83863fbe28b8816","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"b3ddba61bff404c7","login":"harshith-kori-raj","name":"Harshith Kori Raj","avatar_url":"https://avatars-next.observableusercontent.com/af1abed5f1c20534d016dc9a5dbbefa4cf7a0cd8eba8e7fde83863fbe28b8816","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":"md`# Mini-Project 2: Temporal Aid Visualization\n\n**Student:** Harshith Kori Raj\n**NetID:** hk4488\n\nI use the provided AidData and country boundary data to study how giving, aid purposes, and recipient geography changed from 1973 to 2013. All loading, cleaning, aggregation, and visualization below are done here in JavaScript with D3.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"import * as d3 from \"npm:d3@7\";","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"dataUrls = ({\n aidCsv: \"https://docs.google.com/spreadsheets/d/1YiuHdfZv_JZ-igOemKJMRaU8dkucfmHxOP6Od3FraW8/export?format=csv\",\n countryGeo: \"https://drive.usercontent.google.com/download?id=10OgiHSAf6y7h110pLy8ADQ7xWHGaMNlu&export=download\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"rawAid = d3.csv(dataUrls.aidCsv)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"$3f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"aidRows = helpers.cleanAidRows(rawAid)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"geoData = FileAttachment(\"countries.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"geoAliases = ({\n \"Czech Republic\": \"Czechia\",\n \"Korea\": \"South Korea\",\n \"Slovak Republic\": \"Slovakia\",\n \"United States\": \"United States of America\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"dataAudit = {\n const countryNames = [...new Set(aidRows.flatMap(d => [d.donor, d.recipient]))].sort(d3.ascending);\n const recipientNames = [...new Set(aidRows.map(d => d.recipient))].sort(d3.ascending);\n const featureNames = new Set(geoData.features.map(d => d.properties.ADMIN));\n const unmatched = recipientNames.filter(name => !featureNames.has(geoAliases[name] ?? name));\n return {\n countryNames,\n recipientNames,\n unmatched,\n yearRange: d3.extent(aidRows, d => d.year),\n purposeCount: new Set(aidRows.map(d => d.purpose).filter(Boolean)).size,\n mappedRecipients: recipientNames.length - unmatched.length\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"md`## Data preparation\n\nI loaded ${rawAid.length.toLocaleString()} rows and kept ${aidRows.length.toLocaleString()} rows with a valid year, positive amount, donor, and recipient. The data cover **${dataAudit.yearRange[0]}–${dataAudit.yearRange[1]}**, ${dataAudit.countryNames.length} countries, and ${dataAudit.purposeCount} named purpose values. The map join matches **${dataAudit.mappedRecipients} of ${dataAudit.recipientNames.length}** recipient names${dataAudit.unmatched.length ? `; unmatched: ${dataAudit.unmatched.join(\", \")}` : \", with no unmatched recipients\"}.\n\nI use commitment amount in constant U.S. dollars. A commitment is a promised amount, so it should not be interpreted as the amount actually delivered.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"md`---\n## Visualization 1 — Amount donated and received by country over time\n\nChoose any country to compare its yearly donated and received amounts. The summary below the chart also identifies role changes and the largest one-year rise and fall in total activity.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"viewof selectedCountry = Inputs.select(dataAudit.countryNames, {label: \"Choose a country:\", value: \"Australia\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"countrySeries = helpers.buildCountrySeries(aidRows, selectedCountry)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"countrySummary = helpers.summarizeCountry(countrySeries)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"countryOverview = {\n const all = dataAudit.countryNames.map(country => ({\n country,\n ...helpers.summarizeCountry(helpers.buildCountrySeries(aidRows, country))\n }));\n const byActivity = values => [...values].sort((a, b) => d3.descending(a.totalActivity, b.totalActivity));\n const volatility = d => Math.max(Math.abs(d.peak?.change ?? 0), Math.abs(d.valley?.change ?? 0));\n return {\n donorHeavy: byActivity(all.filter(d => d.balance < -0.5)).slice(0, 3),\n recipientHeavy: byActivity(all.filter(d => d.balance > 0.5)).slice(0, 3),\n balanced: byActivity(all.filter(d => Math.abs(d.balance) <= 0.1)).slice(0, 3),\n switchers: byActivity(all.filter(d => d.switchYears.length >= 2)).slice(0, 4),\n volatile: [...all].sort((a, b) => d3.descending(volatility(a), volatility(b))).slice(0, 4)\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"$40","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"$41","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"$42","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"md`---\n## Visualization 2 — Relative share of the top 10 purposes over time\n\nThe top ten are ranked by total commitment amount across all countries and years. The exact value **UNSPECIFIED** is removed before ranking.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"purposeData = helpers.buildPurposeShares(aidRows, 10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"purposeSummary = purposeData.purposes.map(purpose => {\n const peak = purposeData.yearly.reduce((best, row) => row[purpose] > best[purpose] ? row : best);\n return {purpose, total: purposeData.totals.get(purpose), peakYear: peak.year, peakShare: peak[purpose]};\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"$43","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"$44","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"md`---\n## Visualization 3 — Geographic history of received aid\n\nI group the data into calendar periods so the geographic pattern can be compared without animation. The first and last periods are partial decades, so the mapped values are annual averages (period total divided by its number of years). Every map uses the same color scale.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"$45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"$47","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"$48","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"2"}} 33:null