34:["$","title",null,{"children":"Mini-Project 2: Temporal Data Visualization (Due Nov. 12th) | Swati Singh | 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:T508,mp2_aid = { // Convert empty or invalid numeric values to null const parseNumber = value => { const text = String(value ?? "").trim().replace(/[$,]/g, ""); if (!text) return null; const number = Number(text); return Number.isFinite(number) ? number : null; }; // Standardize text without changing its meaning const cleanText = value => String(value ?? "").trim(); return mp2_raw.map(row => { const year = parseNumber(row.year); const amount = parseNumber( row.commitment_amount_usd_constant ); const purposeCode = cleanText( row.coalesced_purpose_code ); const purposeName = cleanText( row.coalesced_purpose_name ); return { id: cleanText(row.aiddata_id), year, donor: cleanText(row.donor), recipient: cleanText(row.recipient), amount, purpose_code: purposeCode, purpose_name: purposeName, // Use codes as identifiers to avoid splitting // a purpose because of differences in spelling. purpose_key: purposeCode || `NAME:${purposeName.toLowerCase()}` }; }).filter(d => Number.isInteger(d.year) && d.year >= 1900 && d.year <= 2100 && d.donor !== "" && d.recipient !== "" && d.amount !== null ); }40:T5e8,mp2_country_series = { const donated = d3.rollup( mp2_aid, records => d3.sum(records, d => d.amount), d => d.donor, d => d.year ); const received = d3.rollup( mp2_aid, records => d3.sum(records, d => d.amount), d => d.recipient, d => d.year ); const countries = [...new Set([ ...donated.keys(), ...received.keys() ])].sort(d3.ascending); const firstYear = mp2_periods[0].start; const lastYear = mp2_periods.at(-1).end; const years = d3.range(firstYear, lastYear + 1); return countries.map(country => { const donations = donated.get(country) ?? new Map(); const receipts = received.get(country) ?? new Map(); // Fill unrecorded country-years with zero. const values = years.map(year => { const donatedUSD = donations.get(year) ?? 0; const receivedUSD = receipts.get(year) ?? 0; return { year, donated: donatedUSD, received: receivedUSD, net: donatedUSD - receivedUSD, activity: donatedUSD + receivedUSD }; }); const totalDonated = d3.sum(values, d => d.donated); const totalReceived = d3.sum(values, d => d.received); const totalActivity = totalDonated + totalReceived; return { country, values, total_donated: totalDonated, total_received: totalReceived, net: totalDonated - totalReceived, balance: totalActivity > 0 ? (totalDonated - totalReceived) / totalActivity : null }; }); }41:T16f2, mp2_viz1_lines = { // ================================================== // 1. Selected country and chart dimensions // ================================================== const country = mp2_country_series.find( d => d.country === mp2_selected_country ); const data = country.values; const width = 930; const height = 490; const margin = { top: 100, right: 55, bottom: 70, left: 100 }; const plotWidth = width - margin.left - margin.right; const plotHeight = height - margin.top - margin.bottom; // ================================================== // 2. Scales // ================================================== const x = d3.scaleLinear() .domain(d3.extent(data, d => d.year)) .range([0, plotWidth]); const maxAmount = d3.max( data, d => Math.max(d.donated, d.received, 0) ); const y = d3.scaleLinear() .domain([0, Math.max(1, maxAmount)]) .nice(5) .range([plotHeight, 0]); const color = { donated: "#2563eb", received: "#ea580c" }; // ================================================== // 3. SVG and headings // ================================================== const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", `0 0 ${width} ${height}`) .style("font-family", "Arial, sans-serif"); svg.append("text") .attr("x", margin.left) .attr("y", 30) .attr("font-size", 21) .attr("font-weight", "bold") .attr("fill", "#111827") .text(`${country.country}: Donated vs. Received Over Time`); svg.append("text") .attr("x", margin.left) .attr("y", 55) .attr("font-size", 12) .attr("fill", "#64748b") .text( `Total donated: ${mp2_format_usd(country.total_donated)}` + ` | Total received: ${mp2_format_usd(country.total_received)}` ); const plot = svg.append("g") .attr( "transform", `translate(${margin.left},${margin.top})` ); // ================================================== // 4. Axes and gridlines // ================================================== const ticks = y.ticks(5); plot.append("g") .call( d3.axisLeft(y) .tickValues(ticks) .tickSize(-plotWidth) .tickFormat("") ) .call(g => g.select(".domain").remove()) .call(g => g.selectAll("line") .attr("stroke", "#e5e7eb")); plot.append("g") .attr("transform", `translate(0,${plotHeight})`) .call( d3.axisBottom(x) .ticks(9) .tickFormat(d3.format("d")) .tickSizeOuter(0) ); plot.append("g") .call( d3.axisLeft(y) .tickValues(ticks) .tickFormat(mp2_format_usd) .tickSizeOuter(0) ); // ================================================== // 5. Donation and receipt lines // ================================================== const line = key => d3.line() .x(d => x(d.year)) .y(d => y(Math.max(0, d[key]))) .curve(d3.curveLinear); ["donated", "received"].forEach(key => { plot.append("path") .datum(data) .attr("fill", "none") .attr("stroke", color[key]) .attr("stroke-width", 2.5) .attr("d", line(key)); // Each point has the exact yearly information. plot.selectAll(`circle.${key}`) .data(data) .join("circle") .attr("class", key) .attr("cx", d => x(d.year)) .attr("cy", d => y(Math.max(0, d[key]))) .attr("r", 2.8) .attr("fill", color[key]) .attr("opacity", 0.85) .append("title") .text(d => `${country.country} — ${d.year}\n` + `Donated: ${mp2_format_usd(d.donated)}\n` + `Received: ${mp2_format_usd(d.received)}\n` + `Net: ${mp2_format_usd(d.net)}` ); }); // ================================================== // 6. Highlight the largest annual values // ================================================== const peaks = [ { type: "donated", record: d3.greatest(data, d => d.donated) }, { type: "received", record: d3.greatest(data, d => d.received) } ].filter(d => d.record && d.record[d.type] > 0); plot.selectAll("circle.peak") .data(peaks) .join("circle") .attr("class", "peak") .attr("cx", d => x(d.record.year)) .attr("cy", d => y(d.record[d.type])) .attr("r", 6) .attr("fill", "white") .attr("stroke", d => color[d.type]) .attr("stroke-width", 2.5) .append("title") .text(d => `Highest annual ${d.type} amount\n` + `${d.record.year}: ${mp2_format_usd(d.record[d.type])}` ); // ================================================== // 7. Legend // ================================================== const legend = svg.append("g") .attr( "transform", `translate(${margin.left + 10},78)` ); [ {label: "Donated", key: "donated"}, {label: "Received", key: "received"} ].forEach((item, i) => { const g = legend.append("g") .attr("transform", `translate(${i * 135},0)`); g.append("line") .attr("x1", 0) .attr("x2", 26) .attr("y1", 0) .attr("y2", 0) .attr("stroke", color[item.key]) .attr("stroke-width", 3); g.append("text") .attr("x", 34) .attr("y", 4) .attr("font-size", 12) .attr("fill", "#334155") .text(item.label); }); svg.append("text") .attr("x", width / 2) .attr("y", height - 25) .attr("text-anchor", "middle") .attr("font-size", 13) .attr("fill", "#334155") .text("Year"); svg.append("text") .attr( "transform", `translate(22,${margin.top + plotHeight / 2}) rotate(-90)` ) .attr("text-anchor", "middle") .attr("font-size", 13) .attr("fill", "#334155") .text("Annual commitments (USD)"); return svg.node(); } 42:T5f5, mp2_country_findings = mp2_country_series.map(country => { const periods = mp2_country_periods .filter(d => d.country === country.country && ["Net donor", "Net recipient"].includes(d.role) ); // Count changes between strong donor/recipient roles. let switches = 0; const switchDetails = []; for (let i = 1; i < periods.length; i++) { if (periods[i].role !== periods[i - 1].role) { switches++; switchDetails.push( `${periods[i - 1].period} (${periods[i - 1].role})` + ` → ${periods[i].period} (${periods[i].role})` ); } } // Identify the greatest annual rise and fall in // total recorded financial activity. const changes = country.values.slice(1).map((d, i) => ({ year: d.year, change: d.activity - country.values[i].activity })); const rise = d3.greatest(changes, d => d.change); const fall = d3.least(changes, d => d.change); return { country: country.country, total_donated: country.total_donated, total_received: country.total_received, overall_balance: country.balance, role_switches: switches, switch_details: switchDetails.join("; "), largest_rise_year: rise?.year ?? null, largest_rise_usd: rise?.change ?? null, largest_fall_year: fall?.year ?? null, largest_fall_usd: fall?.change ?? null }; }).sort((a, b) => d3.descending(a.role_switches, b.role_switches) || d3.descending( a.total_donated + a.total_received, b.total_donated + b.total_received ) ) 43:T120f, mp2_viz1_overview = { // ================================================== // 1. Chart layout // ================================================== const countries = [...mp2_country_series] .sort((a, b) => d3.descending( a.balance ?? -2, b.balance ?? -2 ) ) .map(d => d.country); const periods = mp2_periods.map(d => d.label); const width = 940; const margin = { top: 100, right: 35, bottom: 105, left: 165 }; const rowHeight = 19; const height = margin.top + countries.length * rowHeight + margin.bottom; const x = d3.scaleBand() .domain(periods) .range([margin.left, width - margin.right]) .padding(0.08); const y = d3.scaleBand() .domain(countries) .range([ margin.top, margin.top + countries.length * rowHeight ]) .padding(0.12); // ================================================== // 2. Diverging scale for donor/recipient orientation // ================================================== const color = d3.scaleDiverging(t => t < 0.5 ? d3.interpolateRgb("#ea580c", "#f8fafc")(t * 2) : d3.interpolateRgb("#f8fafc", "#2563eb")( (t - 0.5) * 2 ) ) .domain([-1, 0, 1]) .clamp(true); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", `0 0 ${width} ${height}`) .style("font-family", "Arial, sans-serif"); svg.append("text") .attr("x", 20) .attr("y", 30) .attr("font-size", 20) .attr("font-weight", "bold") .attr("fill", "#111827") .text("How Countries' Aid Roles Evolved"); svg.append("text") .attr("x", 20) .attr("y", 55) .attr("font-size", 12) .attr("fill", "#64748b") .text( "Five-year periods | Blue = donating, orange = receiving" ); // ================================================== // 3. Country labels // ================================================== svg.selectAll("text.country") .data(countries) .join("text") .attr("class", "country") .attr("x", margin.left - 10) .attr("y", d => y(d) + y.bandwidth() / 2) .attr("dy", "0.35em") .attr("text-anchor", "end") .attr("font-size", 10.5) .attr("fill", "#334155") .text(d => d); // ================================================== // 4. Heatmap cells // ================================================== const cells = svg.selectAll("rect.period-cell") .data(mp2_country_periods) .join("rect") .attr("class", "period-cell") .attr("x", d => x(d.period)) .attr("y", d => y(d.country)) .attr("width", x.bandwidth()) .attr("height", y.bandwidth()) .attr("rx", 2) .attr("fill", d => { if (d.role === "Net donor") return "#2563eb"; if (d.role === "Net recipient") return "#ea580c"; if (d.role === "Mixed") return "#fde68a"; return "#94a3b8"; // No recorded activity }); cells.append("title") .text(d => `${d.country} | ${d.period}\n` + `Donated: ${mp2_format_usd(d.donated)}\n` + `Received: ${mp2_format_usd(d.received)}\n` + `Role: ${d.role}\n` + `Balance: ${d.balance === null ? "No activity" : d.balance.toFixed(2)}` ); // ================================================== // 5. Period axis // ================================================== svg.append("g") .attr( "transform", `translate(0,${margin.top - 8})` ) .call(d3.axisTop(x).tickSize(0)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll("text") .attr("font-size", 10) .attr("fill", "#475569")); // ================================================== // 6. Legend // ================================================== const legendY = height - 57; const legendItems = [ {label: "Net recipient", fill: "#ea580c"}, {label: "Mixed (±20%)", fill: "#fde68a"}, {label: "Net donor", fill: "#2563eb"}, {label: "No activity", fill: "#94a3b8"} ]; const legend = svg.append("g") .attr("transform", `translate(160,${legendY})`); const items = legend.selectAll("g.item") .data(legendItems) .join("g") .attr("class", "item") .attr("transform", (d, i) => `translate(${i * 185},0)` ); items.append("rect") .attr("width", 14) .attr("height", 14) .attr("rx", 2) .attr("fill", d => d.fill); items.append("text") .attr("x", 21) .attr("y", 12) .attr("font-size", 11) .attr("fill", "#475569") .text(d => d.label); return svg.node(); } 44:Tcb6, ### Written Analysis - **Overall donation and receipt patterns:** The data shows that countries have very different roles in development finance. Countries such as the United States, Japan, and Germany consistently appear as major donors, while India, Brazil, and Thailand primarily receive commitments. However, not every country follows such an unequal pattern. Austria, for example, donated approximately $784.1 million and received $770.3 million over the entire period, making its overall financial activity nearly balanced. Australia is another example, with $2.45 billion donated and $2.57 billion received. - **Countries changing roles over time:** The country role heatmap shows that these patterns are not necessarily fixed. Ireland shifts from being primarily a recipient during 1998–2002 to a net donor during 2003–2007. Finland and Portugal show similar transitions in earlier periods. This is interesting because a country's overall donor–recipient balance does not necessarily reflect how its role changed throughout the dataset's history. - **Sudden peaks and decreases:** The annual line chart reveals sharp fluctuations that are less obvious when looking at overall totals. Kuwait, for example, shows an unusually large spike in commitments received around 1992, reaching approximately $7.5 billion, while most other years have much smaller amounts. Poland also shows a major year-over-year increase of approximately $8.82 billion in 1992, followed by a decrease of around $8.77 billion in 1993. These changes suggest that financial commitments can be concentrated in particular years rather than distributed evenly over time. - **Long-term versus short-term behavior:** Some countries maintain a relatively consistent role across nearly all periods, while others alternate between donating and receiving. This makes it important to look at both the full historical record and shorter intervals before classifying a country as a donor or recipient. ### Design Decisions I used two complementary visualizations because a single chart would make it difficult to examine individual financial trends while also comparing every country's role over time. The interactive line chart lets users select a country and compare its annual donated and received amounts directly, using blue and orange lines to keep the two measures distinct. I used a linear Y-axis starting at zero because it represents financial differences proportionally and makes sudden peaks or decreases easier to interpret. However, very large spikes can compress smaller values near the bottom of the chart, which is a limitation of this scale. To provide a broader view, I added a country-by-period heatmap that groups the data into historical intervals and uses blue for net donors, orange for net recipients, yellow for relatively balanced activity, and gray for periods without recorded activity. I used a normalized balance with a ±20% threshold to distinguish countries with a clear donor or recipient role from those with more similar outgoing and incoming commitments. The line chart is more useful for examining exact amounts and yearly changes, while the heatmap makes it much easier to spot long-term patterns and role transitions across countries. 45:T6e1, mp2_top10_purposes = { // ================================================== // 1. Group all commitments by purpose identifier // ================================================== const grouped = d3.group( mp2_aid.filter(d => d.purpose_key), d => d.purpose_key ); // Exclude the generic UNSPECIFIED categories, // without removing specific descriptions such as // "Government and civil society, purpose unspecified". const isUnspecified = name => /^(unspecified|sectors?\s+not\s+specified|not\s+specified)$/i .test(String(name ?? "").trim()); // ================================================== // 2. Calculate total funding by purpose code // ================================================== const summaries = [...grouped].map(([key, records]) => { const nameCounts = d3.rollups( records.filter(d => d.purpose_name), group => group.length, d => d.purpose_name ).sort((a, b) => d3.descending(a[1], b[1])); const purposeName = nameCounts[0]?.[0] ?? "Unknown purpose"; // Exclude the entire code if one of its names // identifies it as a generic unspecified purpose. const excluded = nameCounts.some(d => isUnspecified(d[0]) ); return { purpose_key: key, purpose_name: purposeName, frequency: records.length, total_usd: d3.sum(records, d => d.amount), excluded }; }); // ================================================== // 3. Rank by TOTAL AMOUNT, not record count // ================================================== return summaries .filter(d => !d.excluded && d.total_usd > 0 ) .sort((a, b) => d3.descending(a.total_usd, b.total_usd) ) .slice(0, 10); }46:T413, mp2_purpose_period_data = { const selectedKeys = new Set( mp2_top10_purposes.map(d => d.purpose_key) ); const firstYear = mp2_periods[0].start; const periodStart = year => mp2_periods.find( period => year >= period.start && year <= period.end ).start; // Sum commitments by period and purpose code const totals = d3.rollup( mp2_aid.filter(d => selectedKeys.has(d.purpose_key) ), records => d3.sum(records, d => d.amount), d => periodStart(d.year), d => d.purpose_key ); return mp2_periods.map(period => { const values = totals.get(period.start) ?? new Map(); const row = { period: period.label, start: period.start, end: period.end, years: period.years }; // Annualize totals so the final partial period // is comparable with the five-year intervals. mp2_top10_purposes.forEach(purpose => { row[purpose.purpose_key] = (values.get(purpose.purpose_key) ?? 0) / period.years; }); return row; }); } 47:T1978, mp2_viz2_area = { // ================================================== // 1. Layout and metric // ================================================== const width = 1110; const height = 565; const margin = { top: 110, right: 350, bottom: 100, left: 90 }; const plotWidth = width - margin.left - margin.right; const plotHeight = height - margin.top - margin.bottom; const showShare = mp2_purpose_metric === "Relative share (%)"; const purposes = mp2_top10_purposes; const keys = purposes.map(d => d.purpose_key); const data = mp2_purpose_period_data; // ================================================== // 2. Stacking and color scale // ================================================== const stack = d3.stack() .keys(keys) .value((d, key) => d[key] ?? 0) .offset( showShare ? d3.stackOffsetExpand : d3.stackOffsetNone ); const series = stack(data); const color = d3.scaleOrdinal() .domain(keys) .range(d3.schemeTableau10); // ================================================== // 3. X and Y scales // ================================================== const x = d3.scaleLinear() .domain(d3.extent(data, d => d.start)) .range([0, plotWidth]); const maxTotal = d3.max( data, row => d3.sum(keys, key => row[key] ?? 0) ); const y = d3.scaleLinear() .domain([ 0, showShare ? 1 : Math.max(1, maxTotal) ]) .range([plotHeight, 0]); if (!showShare) { y.nice(5); } const yTicks = showShare ? [0, 0.25, 0.5, 0.75, 1] : y.ticks(4); // ================================================== // 4. SVG title and subtitle // ================================================== const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", `0 0 ${width} ${height}`) .style("font-family", "Arial, sans-serif"); svg.append("text") .attr("x", 28) .attr("y", 32) .attr("font-size", 21) .attr("font-weight", "bold") .attr("fill", "#111827") .text("How the Top 10 Aid Purposes Changed Over Time"); svg.append("text") .attr("x", 28) .attr("y", 55) .attr("font-size", 12) .attr("fill", "#64748b") .text( "Top 10 selected by total commitment amount across all years" ); svg.append("text") .attr("x", 28) .attr("y", 77) .attr("font-size", 12) .attr("fill", "#64748b") .text( showShare ? "Each band shows its percentage of the selected top 10 purposes" : "Each band shows average annual commitments within a period" ); const plot = svg.append("g") .attr( "transform", `translate(${margin.left},${margin.top})` ); // ================================================== // 5. Gridlines // ================================================== plot.append("g") .call( d3.axisLeft(y) .tickValues(yTicks) .tickSize(-plotWidth) .tickFormat("") ) .call(g => g.select(".domain").remove()) .call(g => g.selectAll("line") .attr("stroke", "#e5e7eb")); // ================================================== // 6. Draw the stacked areas // ================================================== const area = d3.area() .x(d => x(d.data.start)) .y0(d => y(d[0])) .y1(d => y(d[1])) .curve(d3.curveLinear); const paths = plot.selectAll("path.purpose-area") .data(series) .join("path") .attr("class", "purpose-area") .attr("d", area) .attr("fill", d => color(d.key)) .attr("fill-opacity", 0.88) .attr("stroke", "white") .attr("stroke-width", 0.7); paths.append("title") .text(d => purposes.find(p => p.purpose_key === d.key) ?.purpose_name ?? d.key ); // ================================================== // 7. Axes // ================================================== plot.append("g") .attr("transform", `translate(0,${plotHeight})`) .call( d3.axisBottom(x) .tickValues(data.map(d => d.start)) .tickFormat(d3.format("d")) .tickSizeOuter(0) ) .call(g => g.selectAll("text") .attr("font-size", 10) .attr("fill", "#475569")); plot.append("g") .call( d3.axisLeft(y) .tickValues(yTicks) .tickFormat( showShare ? d3.format(".0%") : mp2_format_usd ) .tickSizeOuter(0) ); svg.append("text") .attr("x", margin.left + plotWidth / 2) .attr("y", height - 55) .attr("text-anchor", "middle") .attr("font-size", 12) .attr("fill", "#334155") .text("Five-year period (starting year)"); svg.append("text") .attr( "transform", `translate(20,${margin.top + plotHeight / 2}) rotate(-90)` ) .attr("text-anchor", "middle") .attr("font-size", 12) .attr("fill", "#334155") .text( showShare ? "Share of top 10 commitments" : "Average annual amount (USD)" ); // ================================================== // 8. Legend // ================================================== const legend = svg.append("g") .attr( "transform", `translate(${width - margin.right + 22},${margin.top})` ); legend.append("text") .attr("font-size", 13) .attr("font-weight", "bold") .attr("fill", "#334155") .text("Purpose"); const legendItems = legend.selectAll("g.legend-item") .data(purposes) .join("g") .attr("class", "legend-item") .attr("transform", (d, i) => `translate(0,${25 + i * 32})` ); legendItems.append("rect") .attr("width", 14) .attr("height", 14) .attr("rx", 2) .attr("fill", d => color(d.purpose_key)); legendItems.append("text") .attr("x", 22) .attr("y", 11) .attr("font-size", 11) .attr("fill", "#334155") .text(d => d.purpose_name.length > 42 ? d.purpose_name.slice(0, 39) + "..." : d.purpose_name ) .append("title") .text(d => d.purpose_name); // ================================================== // 9. Interpretation note // ================================================== svg.append("text") .attr("x", margin.left) .attr("y", height - 15) .attr("font-size", 11) .attr("fill", "#64748b") .text( "Dollar amounts are annualized within each period; " + "the final interval contains six years." ); return svg.node(); } 48:Td75, ### Written Analysis - **Most significant purposes overall:** The ten purposes receiving the largest total financial commitments include air transport ($39.81 billion), rail transport ($20.78 billion), industrial development ($19.75 billion), and rescheduling and refinancing ($17.95 billion). Air transport receives substantially more funding than any other individual purpose in the dataset, but its importance changes considerably across different periods. - **Changes in dominant purposes:** The relative-share chart shows several noticeable shifts in funding priorities. During 1973–1977, food aid and food security programs accounted for approximately 32.3% of commitments among the selected top ten purposes. Air transport became the leading purpose during 1978–1982, while industrial development was most prominent during 1983–1987. Rescheduling and refinancing then accounted for approximately 37.0% during 1988–1992, showing a major change in the distribution of commitments. - **Later shifts in funding:** Air transport became particularly prominent again during 1998–2002, accounting for approximately 57.8% of the selected purposes' commitments. However, social/welfare services became the largest category during 2003–2007, with a share of approximately 35.4%. Rail transport became increasingly dominant in the final years, suggesting that the composition of financial commitments changed considerably rather than remaining focused on the same purposes throughout the dataset. - **Changes in total funding:** The absolute-amount view provides another perspective. The average annual funding for the selected purposes reached approximately $7.50 billion during 1988–1992, compared with around $1.74 billion during 1973–1977. This shows that changes in relative importance do not necessarily mean an increase in actual funding, since a purpose can gain a larger percentage even when the total amount being committed is lower. ### Design Decisions I chose a stacked area chart because the main goal was to understand how the relative importance of different aid purposes changed over time, rather than simply compare their overall totals. I first identified the top ten purposes using their total commitment amounts across the entire dataset and grouped records by purpose code to avoid treating different spellings of the same category as separate purposes. Each purpose has a distinct color that remains consistent across the two comparison modes, with a legend placed beside the chart to identify the categories without covering the data. I included a selector directly above the visualization to switch between percentage shares and average annual commitment amounts. The percentage view uses a 0–100% Y-axis to show how the selected purposes contribute to the total within each period, making changes in funding priorities easier to follow. The dollar view instead uses a linear scale starting at zero, allowing us to see how the overall amount of funding changes alongside its composition. I also grouped the data into multi-year intervals to reduce year-to-year fluctuations and used annual averages so the final six-year interval could be compared more fairly with the earlier five-year periods. One limitation of stacking is that categories in the middle are harder to compare precisely because their baselines change, but I think it works well for showing the overall shifts in funding priorities. 49:T414, mp2_geo_matches = { // Normalize differences in punctuation, capitalization, // spaces, and accented characters. const normalize = value => String(value ?? "") .normalize("NFD") .replace(/[\u0300-\u036f]/g, "") .toLowerCase() .replace(/[^a-z0-9]/g, ""); const featuresByName = new Map(); mp2_geo_features.forEach(feature => { const properties = feature.properties; const possibleNames = [ properties.name, properties.NAME, properties.ADMIN, properties.NAME_LONG, properties.FORMAL_EN ].filter(Boolean); possibleNames.forEach(name => featuresByName.set(normalize(name), feature) ); }); return mp2_country_series.map(d => { const alias = mp2_country_aliases[d.country]; const feature = featuresByName.get(normalize(alias ?? d.country)) ?? featuresByName.get(normalize(d.country)) ?? null; return { country: d.country, feature, matched_name: feature?.properties.name ?? null }; }); } 4a:T90a, mp2_country_regions = { const normalize = value => String(value ?? "") .normalize("NFD") .replace(/[\u0300-\u036f]/g, "") .toLowerCase() .replace(/[^a-z0-9]/g, ""); const regionByName = new Map(); const regionByNumericCode = new Map(); // -------------------------------------------------- // 1. Prepare reference lookup tables // -------------------------------------------------- mp2_region_metadata.forEach(row => { const region = row["Region Name"]; if (!region) return; [ row["CLDR display name"], row["official_name_en"], row["ISO3166-1-Alpha-2"], row["ISO3166-1-Alpha-3"] ].filter(Boolean).forEach(name => { regionByName.set(normalize(name), region); }); const numericCode = row["ISO3166-1-numeric"]; if (numericCode) { regionByNumericCode.set( String(Number(numericCode)), region ); } }); const matches = new Map( mp2_geo_matches.map(d => [d.country, d.feature]) ); // -------------------------------------------------- // 2. Assign one broad region to every aid country // -------------------------------------------------- return mp2_country_series.map(country => { const feature = matches.get(country.country); const properties = feature?.properties ?? {}; const possibleNames = [ country.country, mp2_country_aliases[country.country], properties.name, properties.NAME, properties.ADMIN, properties.ISO_A3, properties.ADM0_A3 ].filter(Boolean); let region = properties.CONTINENT ?? properties.continent ?? properties.REGION_UN ?? null; if (!region) { region = possibleNames .map(name => regionByName.get(normalize(name))) .find(Boolean) ?? null; } // Numeric identifiers from some Natural Earth files if (!region && feature?.id != null) { region = regionByNumericCode.get( String(Number(feature.id)) ) ?? null; } // Combine North and South America into one region. if ( region === "North America" || region === "South America" ) { region = "Americas"; } return { country: country.country, region: region ?? "Unmatched" }; }); } 4b:T1d1a, mp2_viz3_map = { // ================================================== // 1. Selected period and country data // ================================================== const selected = mp2_periods.find( d => d.label === mp2_selected_period ); const records = mp2_period_receipts.filter( d => d.period_start === selected.start ); const receipts = new Map( records.map(d => [d.country, d]) ); const featureCountries = new Map( mp2_geo_matches .filter(d => d.feature !== null) .map(d => [d.feature, d.country]) ); // ================================================== // 2. Map dimensions and projection // ================================================== const width = 960; const height = 600; const projection = d3.geoNaturalEarth1() .fitExtent( [[20, 100], [width - 20, 475]], {type: "Sphere"} ); const path = d3.geoPath(projection); // ================================================== // 3. Shared color scale across all periods // ================================================== const positiveValues = mp2_period_receipts .map(d => d.annual_average_usd) .filter(d => d > 0) .sort(d3.ascending); const colorMaximum = Math.max( 1, d3.quantile(positiveValues, 0.98) ?? 1 ); // Teal → Green → Yellow → Orange → Purple const color = d3.scaleSequentialSqrt( d3.interpolateRgbBasis([ "#5eead4", "#22c55e", "#fbbf24", "#f97316", "#7c3aed" ]) ) .domain([0, colorMaximum]) .clamp(true); const noDataColor = "#9ca3af"; const noReceiptsColor = "#e2e8f0"; const negativeColor = "#be185d"; // ================================================== // 4. SVG title and context // ================================================== const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", `0 0 ${width} ${height}`) .style("font-family", "Arial, sans-serif"); svg.append("text") .attr("x", width / 2) .attr("y", 32) .attr("text-anchor", "middle") .attr("font-size", 22) .attr("font-weight", "bold") .attr("fill", "#111827") .text(`Where Financial Aid Was Received: ${selected.label}`); svg.append("text") .attr("x", width / 2) .attr("y", 56) .attr("text-anchor", "middle") .attr("font-size", 12) .attr("fill", "#64748b") .text( "Average annual commitments received during the selected period" ); // Show the leading recipient countries in the subtitle. const topRecipients = records .filter(d => d.amount_usd > 0) .sort((a, b) => d3.descending(a.amount_usd, b.amount_usd) ) .slice(0, 3); svg.append("text") .attr("x", width / 2) .attr("y", 77) .attr("text-anchor", "middle") .attr("font-size", 11) .attr("fill", "#475569") .text( "Top recipients: " + topRecipients.map(d => `${d.country} (${mp2_format_usd(d.amount_usd)})` ).join(" | ") ); // ================================================== // 5. World background // ================================================== svg.append("path") .datum({type: "Sphere"}) .attr("d", path) .attr("fill", "#f8fafc") .attr("stroke", "#cbd5e1") .attr("stroke-width", 0.8); svg.append("path") .datum(d3.geoGraticule10()) .attr("d", path) .attr("fill", "none") .attr("stroke", "#e2e8f0") .attr("stroke-width", 0.4); // ================================================== // 6. Draw countries // ================================================== const countries = svg.append("g") .selectAll("path.country") .data(mp2_geo_features) .join("path") .attr("class", "country") .attr("d", path) .attr("fill", feature => { const country = featureCountries.get(feature); // No matching financial country if (!country) return noDataColor; const record = receipts.get(country); // Country exists in the dataset but has no // incoming commitments in the selected period if (!record || record.annual_average_usd === 0) { return noReceiptsColor; } const amount = record.annual_average_usd; if (amount < 0) return negativeColor; return color(amount); }) .attr("stroke", "#ffffff") .attr("stroke-width", 0.45) .attr("stroke-linejoin", "round"); // ================================================== // 7. Country tooltips // ================================================== countries.append("title") .text(feature => { const country = featureCountries.get(feature); const record = receipts.get(country); if (!record) { return ( `${feature.properties.name}\n` + `No recorded incoming commitments in ${selected.label}` ); } return ( `${country} | ${selected.label}\n` + `Total received: ${mp2_format_usd(record.amount_usd)}\n` + `Annual average: ${mp2_format_usd(record.annual_average_usd)}\n` + `Years in period: ${record.years}` ); }); // ================================================== // 8. Color legend // ================================================== const legendX = 265; const legendY = 502; const legendWidth = 440; const legendHeight = 15; const gradientId = "mp2-geography-gradient"; const gradient = svg.append("defs") .append("linearGradient") .attr("id", gradientId); gradient.selectAll("stop") .data(d3.range(0, 1.001, 0.025)) .join("stop") .attr("offset", d => `${d * 100}%`) .attr("stop-color", d => color(colorMaximum * d * d) ); svg.append("rect") .attr("x", legendX) .attr("y", legendY) .attr("width", legendWidth) .attr("height", legendHeight) .attr("fill", `url(#${gradientId})`) .attr("stroke", "#cbd5e1") .attr("stroke-width", 0.5); const legendScale = d3.scaleSqrt() .domain([0, colorMaximum]) .range([legendX, legendX + legendWidth]); svg.append("g") .attr( "transform", `translate(0,${legendY + legendHeight})` ) .call( d3.axisBottom(legendScale) .tickValues( [0, 0.25, 0.5, 0.75, 1] .map(d => d * colorMaximum) ) .tickFormat(mp2_format_usd) ) .call(g => g.select(".domain").remove()) .call(g => g.selectAll("text") .attr("font-size", 11)); // Missing data indicator svg.append("rect") .attr("x", 28) .attr("y", 502) .attr("width", 14) .attr("height", 14) .attr("fill", noDataColor); svg.append("text") .attr("x", 48) .attr("y", 514) .attr("font-size", 11) .attr("fill", "#64748b") .text("No matched data"); svg.append("rect") .attr("x", 28) .attr("y", 526) .attr("width", 14) .attr("height", 14) .attr("fill", noReceiptsColor) .attr("stroke", "#cbd5e1"); svg.append("text") .attr("x", 48) .attr("y", 538) .attr("font-size", 11) .attr("fill", "#64748b") .text("No receipts in period"); svg.append("text") .attr("x", width / 2) .attr("y", 578) .attr("text-anchor", "middle") .attr("font-size", 11) .attr("fill", "#64748b") .text( "Shared square-root color scale; values above the " + "98th percentile use the darkest shade." ); return svg.node(); } 4c:T1b64, mp2_viz3_regional_history = { // ================================================== // 1. Data, dimensions, and region colors // ================================================== const data = mp2_region_history; const width = 960; const height = 450; const margin = { top: 90, right: 185, bottom: 85, left: 80 }; const plotWidth = width - margin.left - margin.right; const plotHeight = height - margin.top - margin.bottom; const regionOrder = [ "Asia", "Americas", "Europe", "Africa", "Oceania", "Unmatched" ]; const regionColors = { Asia: "#f97316", Americas: "#2563eb", Europe: "#8b5cf6", Africa: "#16a34a", Oceania: "#db2777", Unmatched: "#64748b" }; // Include only regions represented in the data const regions = regionOrder.filter(region => data.some(d => d[region] > 0) ); // ================================================== // 2. Calculate regional shares // ================================================== const series = regions.map(region => ({ region, values: data.map(d => ({ period: d.period, start: d.start, amount: d[region] ?? 0, total: d.total, share: d.total > 0 ? (d[region] ?? 0) / d.total : null })) })); // ================================================== // 3. Position scales // ================================================== const x = d3.scaleLinear() .domain(d3.extent(data, d => d.start)) .range([0, plotWidth]); const y = d3.scaleLinear() .domain([0, 1]) .range([plotHeight, 0]); // ================================================== // 4. Create SVG and headings // ================================================== const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", `0 0 ${width} ${height}`) .style("font-family", "Arial, sans-serif"); svg.append("text") .attr("x", 25) .attr("y", 30) .attr("font-size", 21) .attr("font-weight", "bold") .attr("fill", "#111827") .text("Changing Regional Shares of Incoming Aid"); svg.append("text") .attr("x", 25) .attr("y", 52) .attr("font-size", 12) .attr("fill", "#64748b") .text( "Percentage of recorded financial commitments received by each region" ); const plot = svg.append("g") .attr( "transform", `translate(${margin.left},${margin.top})` ); // ================================================== // 5. Horizontal gridlines // ================================================== const shareTicks = [0, 0.25, 0.5, 0.75, 1]; plot.append("g") .call( d3.axisLeft(y) .tickValues(shareTicks) .tickSize(-plotWidth) .tickFormat("") ) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line") .attr("stroke", "#e5e7eb")); // ================================================== // 6. Draw one line per region // ================================================== const line = d3.line() .defined(d => d.share !== null) .x(d => x(d.start)) .y(d => y(d.share)) .curve(d3.curveLinear); plot.selectAll("path.region-line") .data(series) .join("path") .attr("class", "region-line") .attr("fill", "none") .attr("stroke", d => regionColors[d.region]) .attr("stroke-width", 2.7) .attr("stroke-linecap", "round") .attr("stroke-linejoin", "round") .attr("d", d => line(d.values)); // ================================================== // 7. Add points and tooltips // ================================================== const points = series.flatMap(s => s.values .filter(d => d.share !== null) .map(d => ({ ...d, region: s.region })) ); plot.selectAll("circle.region-point") .data(points) .join("circle") .attr("class", "region-point") .attr("cx", d => x(d.start)) .attr("cy", d => y(d.share)) .attr("r", 3.8) .attr("fill", d => regionColors[d.region]) .attr("stroke", "#ffffff") .attr("stroke-width", 0.9) .append("title") .text(d => `${d.region} | ${d.period}\n` + `Regional share: ${d3.format(".1%")(d.share)}\n` + `Amount received: ${mp2_format_usd(d.amount)}\n` + `Total across regions: ${mp2_format_usd(d.total)}` ); // ================================================== // 8. Axes // ================================================== plot.append("g") .attr("transform", `translate(0,${plotHeight})`) .call( d3.axisBottom(x) .tickValues(data.map(d => d.start)) .tickFormat(d3.format("d")) .tickSizeOuter(0) ) .call(g => g.selectAll("text") .attr("font-size", 11) .attr("fill", "#475569")); plot.append("g") .call( d3.axisLeft(y) .tickValues(shareTicks) .tickFormat(d3.format(".0%")) .tickSizeOuter(0) ); svg.append("text") .attr("x", margin.left + plotWidth / 2) .attr("y", height - 37) .attr("text-anchor", "middle") .attr("font-size", 12) .attr("fill", "#334155") .text("Historical period (starting year)"); svg.append("text") .attr( "transform", `translate(23,${margin.top + plotHeight / 2}) rotate(-90)` ) .attr("text-anchor", "middle") .attr("font-size", 12) .attr("fill", "#334155") .text("Share of incoming commitments"); // ================================================== // 9. Region legend // ================================================== const legend = svg.append("g") .attr( "transform", `translate(${width - margin.right + 25},${margin.top + 15})` ); legend.append("text") .attr("font-size", 13) .attr("font-weight", "bold") .attr("fill", "#334155") .text("Region"); const legendItems = legend.selectAll("g.legend-item") .data(regions) .join("g") .attr("class", "legend-item") .attr("transform", (d, i) => `translate(0,${23 + i * 29})` ); legendItems.append("line") .attr("x1", 0) .attr("x2", 24) .attr("y1", 0) .attr("y2", 0) .attr("stroke", d => regionColors[d]) .attr("stroke-width", 3); legendItems.append("circle") .attr("cx", 12) .attr("cy", 0) .attr("r", 3.5) .attr("fill", d => regionColors[d]); legendItems.append("text") .attr("x", 33) .attr("y", 4) .attr("font-size", 12) .attr("fill", "#334155") .text(d => d); // ================================================== // 10. Explanatory note // ================================================== svg.append("text") .attr("x", width / 2) .attr("y", height - 11) .attr("text-anchor", "middle") .attr("font-size", 11) .attr("fill", "#64748b") .text( "Shares are calculated separately within each period; " + "hover over points for exact amounts." ); return svg.node(); } 4d:Tdf9, ### Written Analysis - **Overall geographical distribution:** The data shows that Asia remains the largest recipient region throughout the recorded period, although its share of incoming commitments changes substantially over time. During 1973–1977, Asia accounted for approximately 86.6% of all recorded commitments received. By 1988–1992, this had fallen to 57.5%, indicating that commitments were becoming more geographically distributed across the regions represented in the dataset. - **Changes across regions:** The regional trend chart shows that the Americas and Europe became more prominent during certain periods. Europe's share increased noticeably around 1988–1992 before declining in later years. Meanwhile, the Americas gradually gained a larger share of incoming commitments, and Africa also became more visible in the later periods. Although Asia continued to receive the largest overall share, the distribution was no longer as heavily concentrated there as it was in the 1970s. - **Individual recipient countries:** The geographical map provides more detail about which countries contribute to these regional patterns. India consistently appears as a major recipient across the historical periods. During 1988–1992, India received approximately $17.97 billion, followed by Poland and Kuwait among the largest recipients. In the final period, 2008–2013, India remained the largest recipient at approximately $25.75 billion, followed by South Africa ($6.65 billion) and Brazil ($6.58 billion). This suggests that while some countries remain prominent recipients, the geographical distribution of commitments has expanded to include other regions over time. - **Interpreting the shifts:** These findings show changes in where recorded financial commitments were directed, but they do not necessarily establish which regions had the greatest need for aid. The dataset covers only a selected set of countries, and commitment amounts can be influenced by many factors beyond development needs. Therefore, the geographical patterns should be interpreted within the coverage and limitations of the dataset. ### Design Decisions I used an interactive choropleth map together with a regional line chart because I wanted to show both where financial commitments were received and how those patterns changed throughout the dataset's history. The map allows users to select a historical period and compare recipient countries geographically, which makes regional concentrations easier to recognize. I used a multihue sequential color scale, ranging from teal and green through yellow and orange to purple, to distinguish lower and higher commitment amounts. I also assigned separate gray shades to countries without matched data and countries without recorded receipts in the selected period, so the absence of data is not confused with a low financial value. The map uses the same square-root color scale across all periods, making comparisons more consistent while keeping smaller amounts visible. However, the map alone requires switching between periods, which makes long-term comparisons difficult. To address this, I added a regional line chart where each region has its own color and all regions share a 0–100% Y-axis. This makes it easier to identify whether a region's proportion of incoming commitments increased, decreased, or remained relatively stable over time. I think the two views work well together because the map provides country-level geographical detail, while the line chart makes the historical regional trends easier to compare.4e:[{"id":"09040dddbda03374a466600047ccbc70c46e6853884eb725db2141c566ca1b78fb7cc935096e8d5468c21e8df215e73fc49cdaaf7e2f1f89139793da25be02b2","href":"https://static.observableusercontent.com/files/09040dddbda03374a466600047ccbc70c46e6853884eb725db2141c566ca1b78fb7cc935096e8d5468c21e8df215e73fc49cdaaf7e2f1f89139793da25be02b2","name":"aiddata-countries-only.csv","type":"text/csv","lastModified":1793220360622,"size":8760387},{"id":"55260abbc777c0a3b8fed19f3929dd822fef9d5118b53b76b2176d20782910e599eac919999ea8ee85a60b783fd37082574f6591fd46c0d70ddf9b00df71ce27","href":"https://static.observableusercontent.com/files/55260abbc777c0a3b8fed19f3929dd822fef9d5118b53b76b2176d20782910e599eac919999ea8ee85a60b783fd37082574f6591fd46c0d70ddf9b00df71ce27","name":"countries-50m.json","type":"application/json","lastModified":1794518003393,"size":4177662}] 38:{"id":"cd1cfa658bfe740d","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-12T20:01:27.372Z","update_time":"$D2026-11-12T22:45:42.049Z","view_time":null,"first_public_time":"$D2026-11-12T22:45:03.834Z","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":"31796935448e8396","login":"swati-singh","name":"Swati Singh","avatar_url":"https://avatars-next.observableusercontent.com/aa0eb037c6af2ec7060abfe5d861b0235d3d5abc018ffe41d2a04a8f99bd2a16","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":453,"publish_version":453,"role":null,"authored":false,"authors":[{"type":"individual","id":"a2af93fb39c4d44d","login":"swati-singh","name":"Swati Singh","avatar_url":"https://avatars-next.observableusercontent.com/aa0eb037c6af2ec7060abfe5d861b0235d3d5abc018ffe41d2a04a8f99bd2a16","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"31796935448e8396","login":"swati-singh","name":"Swati Singh","avatar_url":"https://avatars-next.observableusercontent.com/aa0eb037c6af2ec7060abfe5d861b0235d3d5abc018ffe41d2a04a8f99bd2a16","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":234,"value":"Name: Swati Singh\n\nNetid: ss20478","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"## 1. Data Loading and Preprocessing","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"mp2_raw = FileAttachment(\"aiddata-countries-only.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"mp2_geo_source = FileAttachment(\"countries-50m.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"mp2_topojson = await import(\n \"https://cdn.jsdelivr.net/npm/topojson-client@3/+esm\"\n)","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":"mp2_format_usd = value => {\n\n const sign = value < 0 ? \"−\" : \"\";\n const amount = Math.abs(value);\n\n if (amount >= 1e9)\n return `${sign}$${(amount / 1e9).toFixed(2)}B`;\n\n if (amount >= 1e6)\n return `${sign}$${(amount / 1e6).toFixed(1)}M`;\n\n if (amount >= 1e3)\n return `${sign}$${(amount / 1e3).toFixed(1)}K`;\n\n return `${sign}$${amount.toFixed(0)}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"mp2_periods = {\n\n const firstYear = d3.min(mp2_aid, d => d.year);\n const lastYear = d3.max(mp2_aid, d => d.year);\n\n const starts = d3.range(firstYear, lastYear + 1, 5);\n\n // Merge a final 1- or 2-year fragment into the\n // previous interval instead of showing it alone.\n if (\n starts.length > 1 &&\n lastYear - starts[starts.length - 1] < 2\n ) {\n starts.pop();\n }\n\n return starts.map((start, i) => {\n\n const end = i === starts.length - 1\n ? lastYear\n : Math.min(start + 4, lastYear);\n\n return {\n start,\n end,\n years: end - start + 1,\n label: `${start}–${end}`\n };\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"mp2_data_summary = Inputs.table([\n {\n Metric: \"Original records\",\n Value: mp2_raw.length\n },\n {\n Metric: \"Valid records\",\n Value: mp2_aid.length\n },\n {\n Metric: \"First year\",\n Value: d3.min(mp2_aid, d => d.year)\n },\n {\n Metric: \"Last year\",\n Value: d3.max(mp2_aid, d => d.year)\n },\n {\n Metric: \"Unique donor countries\",\n Value: new Set(mp2_aid.map(d => d.donor)).size\n },\n {\n Metric: \"Unique recipient countries\",\n Value: new Set(mp2_aid.map(d => d.recipient)).size\n },\n {\n Metric: \"Negative commitment records\",\n Value: mp2_aid.filter(d => d.amount < 0).length\n },\n {\n Metric: \"Five-year intervals\",\n Value: mp2_periods.length\n }\n])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"## 2. Visualization 1: How Country Roles Change Over Time","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"$40","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"viewof mp2_selected_country = Inputs.select(\n mp2_country_series.map(d => d.country),\n {\n label: \"Select a country\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"$41","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"mp2_country_periods = mp2_country_series.flatMap(country =>\n mp2_periods.map(period => {\n\n const years = country.values.filter(d =>\n d.year >= period.start &&\n d.year <= period.end\n );\n\n const donated = d3.sum(years, d => d.donated);\n const received = d3.sum(years, d => d.received);\n const total = donated + received;\n\n const balance = total > 0\n ? (donated - received) / total\n : null;\n\n // A 20% balance band avoids calling a nearly\n // equal donor/recipient balance a strong role.\n const role = balance === null ? \"No activity\" :\n balance > 0.2 ? \"Net donor\" :\n balance < -0.2 ? \"Net recipient\" :\n \"Mixed\";\n\n return {\n country: country.country,\n period: period.label,\n donated,\n received,\n balance,\n role\n };\n })\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"$42","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"Inputs.table(\n mp2_country_findings\n .filter(d => d.role_switches > 0)\n .map(d => ({\n Country: d.country,\n \"Role changes\": d.role_switches,\n \"Change details\": d.switch_details\n }))\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"\nmp2_largest_rises = Inputs.table(\n [...mp2_country_findings]\n .filter(d => d.largest_rise_usd > 0)\n .sort((a, b) =>\n d3.descending(\n a.largest_rise_usd,\n b.largest_rise_usd\n )\n )\n .slice(0, 10)\n .map(d => ({\n Country: d.country,\n \"Year of largest rise\": d.largest_rise_year,\n \"Annual increase\": mp2_format_usd(d.largest_rise_usd)\n }))\n)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"\nmp2_largest_falls = Inputs.table(\n [...mp2_country_findings]\n .filter(d => d.largest_fall_usd < 0)\n .sort((a, b) =>\n d3.ascending(\n a.largest_fall_usd,\n b.largest_fall_usd\n )\n )\n .slice(0, 10)\n .map(d => ({\n Country: d.country,\n \"Year of largest fall\": d.largest_fall_year,\n \"Annual decrease\": mp2_format_usd(d.largest_fall_usd)\n }))\n)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"Inputs.table(\n mp2_country_findings\n .filter(d =>\n d.overall_balance !== null &&\n d.total_donated + d.total_received > 0\n )\n .sort((a, b) =>\n d3.ascending(\n Math.abs(a.overall_balance),\n Math.abs(b.overall_balance)\n )\n )\n .slice(0, 10)\n .map(d => ({\n Country: d.country,\n Donated: mp2_format_usd(d.total_donated),\n Received: mp2_format_usd(d.total_received),\n \"Balance score\": d.overall_balance.toFixed(3)\n }))\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"$43","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"$44","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"## 3. Visualization 2: How Aid Purposes Change Over Time","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"$45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"Inputs.table(\n mp2_top10_purposes.map((d, i) => ({\n Rank: i + 1,\n \"Purpose Code\": d.purpose_key,\n Purpose: d.purpose_name,\n Commitments: d.frequency,\n \"Total Amount\": mp2_format_usd(d.total_usd)\n }))\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"viewof mp2_purpose_metric = Inputs.radio(\n [\n \"Relative share (%)\",\n \"Annual average commitments (USD)\"\n ],\n {\n label: \"Compare purposes by\",\n value: \"Relative share (%)\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"$47","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"\nmp2_purpose_period_findings = mp2_purpose_period_data.map(\n row => {\n\n const ranked = mp2_top10_purposes\n .map(purpose => ({\n name: purpose.purpose_name,\n amount: row[purpose.purpose_key]\n }))\n .sort((a, b) =>\n d3.descending(a.amount, b.amount)\n );\n\n const total = d3.sum(ranked, d => d.amount);\n\n return {\n Period: row.period,\n \"Leading purpose\": ranked[0]?.name ?? \"None\",\n \"Annual average for leading purpose\":\n mp2_format_usd(ranked[0]?.amount ?? 0),\n \"Share of top 10\": total > 0\n ? d3.format(\".1%\")(ranked[0].amount / total)\n : \"N/A\",\n \"Annual average across top 10\":\n mp2_format_usd(total)\n };\n }\n)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"Inputs.table(mp2_purpose_period_findings)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"$48","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"## 4. Visualization 3: Geographical Shifts in Aid Over Time","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"mp2_geo_features = {\n\n const source = mp2_geo_source;\n\n const collection = source.type === \"Topology\"\n ? mp2_topojson.feature(\n source,\n source.objects.countries ??\n Object.values(source.objects)[0]\n )\n : source;\n\n return collection.features.map(feature => ({\n ...feature,\n properties: {\n ...feature.properties,\n\n // Natural Earth files can use different name fields.\n name:\n feature.properties?.NAME ??\n feature.properties?.name ??\n feature.properties?.ADMIN ??\n feature.properties?.NAME_EN ??\n String(feature.id ?? \"Unknown\")\n }\n }));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"mp2_country_aliases = ({\n \"United States\": \"United States of America\",\n \"Korea\": \"South Korea\",\n \"Czech Republic\": \"Czechia\",\n \"Slovak Republic\": \"Slovakia\",\n \"Russian Federation\": \"Russia\",\n \"Viet Nam\": \"Vietnam\",\n \"Lao PDR\": \"Laos\",\n \"Ivory Coast\": \"Côte d'Ivoire\",\n \"Türkiye\": \"Turkey\",\n \"Swaziland\": \"eSwatini\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"Inputs.table(\n mp2_geo_matches\n .filter(d => d.feature === null)\n .map(d => ({\n Country: d.country,\n \"Attempted name\":\n mp2_country_aliases[d.country] ?? d.country\n }))\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"mp2_region_metadata = d3.csv(\n \"https://raw.githubusercontent.com/datasets/country-codes/master/data/country-codes.csv\"\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"Inputs.table(\n mp2_country_regions.filter(\n d => d.region === \"Unmatched\"\n )\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"\nmp2_period_receipts = {\n\n const firstYear = mp2_periods[0].start;\n\n const periodStart = year =>\n mp2_periods.find(\n period => year >= period.start && year <= period.end\n ).start;\n\n const totals = d3.rollups(\n\n mp2_aid,\n\n records => d3.sum(records, d => d.amount),\n\n d => periodStart(d.year),\n d => d.recipient\n );\n\n const periodByStart = new Map(\n mp2_periods.map(d => [d.start, d])\n );\n\n return totals.flatMap(([start, countries]) => {\n\n const period = periodByStart.get(start);\n\n return countries.map(([country, amount]) => ({\n period_start: start,\n period: period.label,\n years: period.years,\n country,\n amount_usd: amount,\n\n // Compare periods using an annualized amount.\n annual_average_usd: amount / period.years\n }));\n });\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"viewof mp2_selected_period = Inputs.select(\n mp2_periods.map(d => d.label),\n {\n label: \"Select historical period\",\n value: mp2_periods.length > 1\n ? mp2_periods[mp2_periods.length - 2].label\n : mp2_periods[0].label\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"\nmp2_region_history = {\n\n const regionLookup = new Map(\n mp2_country_regions.map(d => [\n d.country,\n d.region\n ])\n );\n\n const regions = [\n \"Africa\", \"Americas\", \"Asia\",\n \"Europe\", \"Oceania\", \"Unmatched\"\n ];\n\n return mp2_periods.map(period => {\n\n const records = mp2_period_receipts.filter(\n d => d.period_start === period.start\n );\n\n const totals = d3.rollup(\n\n records,\n\n rows => d3.sum(rows, d => d.amount_usd),\n\n d => regionLookup.get(d.country) ?? \"Unmatched\"\n );\n\n const row = {\n period: period.label,\n start: period.start,\n years: period.years\n };\n\n regions.forEach(region => {\n row[region] = totals.get(region) ?? 0;\n });\n\n row.total = d3.sum(\n regions,\n region => row[region]\n );\n\n return row;\n });\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"$4c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"\nmp2_region_findings = mp2_region_history.map(row => {\n\n const regions = [\n \"Africa\", \"Americas\", \"Asia\",\n \"Europe\", \"Oceania\", \"Unmatched\"\n ];\n\n const ranked = regions\n .map(region => ({\n region,\n amount: row[region]\n }))\n .sort((a, b) =>\n d3.descending(a.amount, b.amount)\n );\n\n return {\n Period: row.period,\n \"Largest recipient region\": ranked[0].region,\n \"Regional share\": row.total > 0\n ? d3.format(\".1%\")(ranked[0].amount / row.total)\n : \"N/A\",\n \"Total received\": mp2_format_usd(row.total),\n \"Second-largest region\": ranked[1].region\n };\n})\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"Inputs.table(mp2_region_findings)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"Inputs.table(\n mp2_periods.map(period => {\n\n const leading = mp2_period_receipts\n .filter(d => d.period_start === period.start)\n .sort((a, b) =>\n d3.descending(a.amount_usd, b.amount_usd)\n )\n .slice(0, 3);\n\n return {\n Period: period.label,\n \"Top recipient\": leading[0]?.country ?? \"N/A\",\n \"Amount received\":\n mp2_format_usd(leading[0]?.amount_usd ?? 0),\n \"Second recipient\": leading[1]?.country ?? \"N/A\",\n \"Third recipient\": leading[2]?.country ?? \"N/A\"\n };\n })\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"$4d","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"## Data Sources\n\n- [Country Codes reference dataset](https://github.com/datasets/country-codes), used for regional classification where needed.\n\nAll financial data cleaning and aggregation were performed in JavaScript within this Observable notebook.\n\n## AI Use Declaration\n\nI used OpenAI's ChatGPT to assist with the code and visualizations. I have reviewed the submitted work, understand the implementation, and can explain the code, design decisions, and findings.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4e","stdlib":"2"}} 33:null