34:["$","title",null,{"children":"Mini-Project 2: Temporal Data Visualization (Due Nov. 12th) | Najim Rhalmi | 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:Tfaa, /* ============================================================ SECTION 2: CLEAN AND VALIDATE THE DATASET Unlike Mini-Project 1, we need to keep the year because we are now analyzing how commitments change over time. We check: 1. Whether the required columns exist. 2. Whether the year is valid. 3. Whether the financial amount is a valid number. 4. Whether a donor or recipient is identified. We also count missing values and negative amounts so we can explain how the data was processed. ============================================================ */ const v1Clean = (() => { // Get the headers of the CSV. const headers = Object.keys(v1Raw[0]); // we first normalize header formatting to avoid problems with spaces // or small differences in capitalization. const findColumn = name => headers.find(h => h.trim().toLowerCase() .replace(/[^a-z0-9]+/g, "_") .replace(/^_+|_+$/g, "") === name ); // Identify the columns needed const yearCol = findColumn("year"); const donorCol = findColumn("donor"); const recipientCol = findColumn("recipient"); const amountCol = findColumn("commitment_amount_usd_constant"); // Stop if a required column is missing. if (!yearCol || !donorCol || !recipientCol || !amountCol) { throw new Error( "Required columns are missing. Found: " + headers.join(", ") ); } // we clean country names by removing unnecessary spaces. // We do not automatically merge differently named countries. const cleanName = value => String(value ?? "").trim().replace(/\s+/g, " "); // Convert financial amounts into numbers. // Missing values become NaN, not zero. const parseAmount = value => { const text = String(value ?? "").trim(); if (!text) return NaN; // Remove currency symbols, commas and spaces. const cleaned = text.replace(/[$,\s]/g, ""); // Also support accounting notation such as (1234) = -1234. if (/^$.+$$/.test(cleaned)) { return -Number(cleaned.slice(1, -1)); } return Number(cleaned); }; const records = []; // Keep track of excluded records for our discussion. const report = { original: v1Raw.length, invalidYear: 0, invalidAmount: 0, missingBothCountries: 0, missingDonor: 0, missingRecipient: 0, zeroAmounts: 0, negativeAmounts: 0 }; // Go through every transaction. for (const row of v1Raw) { const donor = cleanName(row[donorCol]); const recipient = cleanName(row[recipientCol]); const yearText = String(row[yearCol] ?? "").trim(); const year = yearText === "" ? NaN : Number(yearText); const amount = parseAmount(row[amountCol]); // Exclude transactions without a valid calendar year. if (!Number.isInteger(year) || year < 1900 || year > 2100) { report.invalidYear++; continue; } // Exclude transactions whose amount cannot be interpreted. if (!Number.isFinite(amount)) { report.invalidAmount++; continue; } // At least one financial direction must be identifiable. if (!donor && !recipient) { report.missingBothCountries++; continue; } // A missing donor does not invalidate the known recipient side. if (!donor) report.missingDonor++; if (!recipient) report.missingRecipient++; // We preserve zero values and negative adjustments. if (amount === 0) report.zeroAmounts++; if (amount < 0) report.negativeAmounts++; // Create our cleaned transaction. records.push({ year, donor, recipient, amount }); } if (records.length === 0) { throw new Error("No valid records remain after cleaning."); } return { records, report, minYear: d3.min(records, d => d.year), maxYear: d3.max(records, d => d.year) }; })(); // Display the cleaning results. display({ ...v1Clean.report, validRecords: v1Clean.records.length, firstYear: v1Clean.minYear, lastYear: v1Clean.maxYear }); 40:T890, /* ============================================================ SECTION 3: COLORS AND FINANCIAL LABELS I keep the same visual logic from Mini-Project 1: Green = predominantly donor Red = predominantly recipient I also introduce a neutral color for relatively equal donations and receipts, and gray for missing observations. ============================================================ */ const v1Utils = (() => { const colors = { donor: "#27835B", recipient: "#CC5160", balanced: "#FAFAFB", missing: "#E5EAF0", text: "#233746", muted: "#647787", grid: "#E8EDF1" }; // This diverging scale maps the normalized balance // from -1 (recipient) through 0 (balanced) to +1 (donor). const balanceColor = d3.scaleLinear() .domain([-1, 0, 1]) .range([colors.recipient, colors.balanced, colors.donor]) .clamp(true); // Convert large financial values to readable labels like in mini project 1 const money = value => { if (!Number.isFinite(value)) return "N/A"; const sign = value < 0 ? "−" : ""; const a = Math.abs(value); if (a >= 1e12) return sign + "$" + d3.format(",.2f")(a / 1e12) + "T"; if (a >= 1e9) return sign + "$" + d3.format(",.2f")(a / 1e9) + "B"; if (a >= 1e6) return sign + "$" + d3.format(",.2f")(a / 1e6) + "M"; if (a >= 1e3) return sign + "$" + d3.format(",.2f")(a / 1e3) + "K"; return sign + "$" + d3.format(",.2f")(a); }; // For hover tooltips, display the actual numerical amount. const exactMoney = value => { const sign = value < 0 ? "−" : ""; return sign + "$" + d3.format(",.2f")(Math.abs(value)); }; // Classify a country's relative balance. // |balance| <= 0.20 corresponds approximately to a // 60/40 or less extreme division of positive commitments. const role = balance => { if (balance === null) return "No positive activity"; if (balance > 0.20) return "Predominantly donor"; if (balance < -0.20) return "Predominantly recipient"; return "Relatively balanced"; }; return {colors, balanceColor, money, exactMoney, role}; })(); display("Colors and financial formatting ready."); 41:Te2d, /* ============================================================ SECTION 4: AGGREGATE DONATIONS AND RECEIPTS BY YEAR In Mini-Project 1, I calculated total donations and receipts for each country across every year. Here, we calculate these amounts separately for EACH YEAR. I use a Map because it lets me accumulate transactions efficiently without repeatedly filtering the full CSV. I preserve: - signed donations and receipts, - positive commitments used for the balance index, - transaction counts to distinguish missing from zero. ============================================================ */ const v1Annual = (() => { // Key: country + year // Value: aggregated financial information. const countryYear = new Map(); // Retrieve an existing country-year entry or create one. function getCountryYear(country, year) { const key = `${country}\u0000${year}`; if (!countryYear.has(key)) { countryYear.set(key, { country, year, donated: 0, received: 0, positiveDonated: 0, positiveReceived: 0, donorCount: 0, recipientCount: 0 }); } return countryYear.get(key); } // Go through every cleaned transaction. for (const record of v1Clean.records) { // Add the commitment to the donor's annual total. if (record.donor) { const donor = getCountryYear(record.donor, record.year); donor.donated += record.amount; donor.positiveDonated += Math.max(0, record.amount); donor.donorCount++; } // Add the same commitment to the recipient's annual total. if (record.recipient) { const recipient = getCountryYear(record.recipient, record.year); recipient.received += record.amount; recipient.positiveReceived += Math.max(0, record.amount); recipient.recipientCount++; } } // Identify every country/entity and every calendar year. const countries = [...new Set( [...countryYear.values()].map(d => d.country) )].sort(d3.ascending); const years = d3.range( v1Clean.minYear, v1Clean.maxYear + 1 ); // Store an annual time series for every country. const byCountry = new Map(); for (const country of countries) { const rows = years.map(year => { const observed = countryYear.get(`${country}\u0000${year}`); // We create a placeholder for an unobserved year, // but mark it explicitly as NOT observed. const row = observed ?? { country, year, donated: 0, received: 0, positiveDonated: 0, positiveReceived: 0, donorCount: 0, recipientCount: 0 }; const positiveActivity = row.positiveDonated + row.positiveReceived; // Signed net balance: // positive = more outgoing commitments, // negative = more incoming commitments. const net = row.donated - row.received; // Normalized balance using only positive commitments. // This keeps the balance between -1 and +1. const balance = positiveActivity > 0 ? (row.positiveDonated - row.positiveReceived) / positiveActivity : null; return { ...row, observed: Boolean(observed), positiveActivity, net, balance }; }); byCountry.set(country, rows); } return { countryYear, countries, years, byCountry }; })(); // Display the aggregation summary. display({ countries: v1Annual.countries.length, years: v1Annual.years.length, observedCountryYearPairs: v1Annual.countryYear.size }); 42:Tf8d, /* ============================================================ SECTION 5: FIVE-YEAR AGGREGATION The heatmap will show five-year periods instead of every individual year. I use five-year intervals because they make longer-term trends easier to identify and reduce visual noise. We still keep the annual data for our second chart, which will allow us to identify precise peaks and valleys. ============================================================ */ const v1Periods = (() => { // Align intervals to calendar boundaries. // Example: 1970-1974, 1975-1979, 1980-1984. const firstStart = Math.floor(v1Clean.minYear / 5) * 5; const lastStart = Math.floor(v1Clean.maxYear / 5) * 5; const starts = d3.range(firstStart, lastStart + 1, 5); // The first and last intervals may cover fewer than five years. const label = start => `${Math.max(start, v1Clean.minYear)}–` + `${Math.min(start + 4, v1Clean.maxYear)}`; const byCountry = new Map(); const countryTotals = []; for (const country of v1Annual.countries) { const annual = v1Annual.byCountry.get(country); const periods = starts.map(start => { // Select the years belonging to this five-year interval. const rows = annual.filter(d => d.year >= start && d.year < start + 5 ); // Sum financial amounts for the interval. const donated = d3.sum(rows, d => d.donated); const received = d3.sum(rows, d => d.received); const positiveDonated = d3.sum( rows, d => d.positiveDonated ); const positiveReceived = d3.sum( rows, d => d.positiveReceived ); const donorCount = d3.sum(rows, d => d.donorCount); const recipientCount = d3.sum(rows, d => d.recipientCount); const positiveActivity = positiveDonated + positiveReceived; // Compare the two directions using a normalized index. const balance = positiveActivity > 0 ? (positiveDonated - positiveReceived) / positiveActivity : null; return { country, start, label: label(start), donated, received, positiveDonated, positiveReceived, positiveActivity, donorCount, recipientCount, observed: donorCount + recipientCount > 0, net: donated - received, balance }; }); byCountry.set(country, periods); // Calculate lifetime totals for sorting and classification. const donated = d3.sum(periods, d => d.donated); const received = d3.sum(periods, d => d.received); const positiveDonated = d3.sum( periods, d => d.positiveDonated ); const positiveReceived = d3.sum( periods, d => d.positiveReceived ); const positiveActivity = positiveDonated + positiveReceived; countryTotals.push({ country, donated, received, positiveDonated, positiveReceived, positiveActivity, net: donated - received, balance: positiveActivity > 0 ? (positiveDonated - positiveReceived) / positiveActivity : null }); } // Sort high-activity countries by their donor/recipient balance. // Small-activity countries are kept, but placed toward the bottom. countryTotals.sort((a, b) => d3.descending( Number(a.positiveActivity >= 10e6), Number(b.positiveActivity >= 10e6) ) || d3.descending(a.balance ?? -2, b.balance ?? -2) || d3.descending(a.positiveActivity, b.positiveActivity) || d3.ascending(a.country, b.country) ); return {starts, label, byCountry, countryTotals}; })(); display(`Periods: ${v1Periods.starts.map(v1Periods.label).join(", ")}`); display(Inputs.table( v1Periods.countryTotals.slice(0, 10).map(d => ({ Country: d.country, Donated: v1Utils.money(d.donated), Received: v1Utils.money(d.received), Net: v1Utils.money(d.net), Balance: d.balance === null ? "N/A" : d.balance.toFixed(3) })) )); 43:Ta2b, /* ============================================================ SECTION 6: VERIFY THE FINANCIAL AGGREGATION I compare the original transactions against the annual, five-year and country-level totals. Because floating-point additions can introduce small rounding differences, I calculate a tolerance based on the number and magnitude of the original transactions. The donor and recipient sides are checked separately, since some records may have a missing country identifier. ============================================================ */ const v1Validation = (() => { const records = v1Clean.records; // Calculate the expected totals directly from the CSV. const originalDonated = d3.sum( records.filter(d => d.donor), d => d.amount ); const originalReceived = d3.sum( records.filter(d => d.recipient), d => d.amount ); // Extract our aggregated annual and five-year values. const annualRows = [...v1Annual.byCountry.values()].flat(); const periodRows = [...v1Periods.byCountry.values()].flat(); const checks = [ ["Donated: annual", originalDonated, d3.sum(annualRows, d => d.donated)], ["Received: annual", originalReceived, d3.sum(annualRows, d => d.received)], ["Donated: five-year", originalDonated, d3.sum(periodRows, d => d.donated)], ["Received: five-year", originalReceived, d3.sum(periodRows, d => d.received)], ["Donated: country totals", originalDonated, d3.sum(v1Periods.countryTotals, d => d.donated)], ["Received: country totals", originalReceived, d3.sum(v1Periods.countryTotals, d => d.received)] ]; // IEEE 754 unit roundoff, as discussed in Mini-Project 1. const u = Number.EPSILON / 2; // Conservative budget for the multiple aggregation stages. const operations = 8 * records.length + annualRows.length + periodRows.length + v1Periods.countryTotals.length; const nu = operations * u; const gamma = nu < 1 ? nu / (1 - nu) : Infinity; const absoluteTotal = d3.sum( records, d => Math.abs(d.amount) ); const tolerance = Math.max(0.01, gamma * absoluteTotal); const results = checks.map(([name, expected, actual]) => ({ Check: name, Difference: Math.abs(expected - actual), Tolerance: tolerance, Passed: Math.abs(expected - actual) <= tolerance })); if (results.some(d => !d.Passed)) { throw new Error( "Aggregation validation failed. Check the preprocessing." ); } return results; })(); display(Inputs.table(v1Validation)); 44:T1980, /* ============================================================ SECTION 7: COUNTRY ROLES, REVERSALS, PEAKS AND VALLEYS We answer three important questions: 1. Which countries predominantly donate or receive? 2. Which countries change their role over time? 3. Which countries have significant peaks or valleys? I use a 20% normalized-balance threshold to distinguish donor-dominant, relatively balanced and recipient-dominant periods. I also impose minimum monetary activity requirements to avoid treating tiny transactions as major events. ============================================================ */ const v1Findings = (() => { // Classify countries using their whole-dataset commitments. const countryRoles = v1Periods.countryTotals.map(d => ({ ...d, role: d.positiveActivity < 10e6 ? "Low positive activity" : v1Utils.role(d.balance) })); const shortReversals = []; const sustainedReversals = []; const yearlyChanges = []; const peaksValleys = []; for (const country of v1Periods.countryTotals) { const periods = v1Periods.byCountry.get(country.country); const annual = v1Annual.byCountry.get(country.country); // We require a minimum amount of activity during each period. const minimumPeriodActivity = Math.max( 10e6, 0.02 * country.positiveActivity ); const periodRole = d => { if ( d.positiveActivity < minimumPeriodActivity || d.donorCount + d.recipientCount < 3 || d.balance === null ) return null; if (d.balance > 0.20) return "Donor"; if (d.balance < -0.20) return "Recipient"; return "Balanced"; }; // Detect a switch between two adjacent five-year periods. for (let i = 1; i < periods.length; i++) { const before = periodRole(periods[i - 1]); const after = periodRole(periods[i]); if ( before && after && before !== after && before !== "Balanced" && after !== "Balanced" ) { shortReversals.push({ country: country.country, from: before, to: after, beforePeriod: periods[i - 1].label, afterPeriod: periods[i].label }); } } // A stronger reversal must persist across four periods: // two donor periods followed by two recipient periods, // or two recipient periods followed by two donor periods. for (let i = 2; i + 1 < periods.length; i++) { const a = periodRole(periods[i - 2]); const b = periodRole(periods[i - 1]); const c = periodRole(periods[i]); const d = periodRole(periods[i + 1]); if ( a === b && c === d && a !== c && ["Donor", "Recipient"].includes(a) && ["Donor", "Recipient"].includes(c) ) { sustainedReversals.push({ country: country.country, from: a, to: c, before: `${periods[i - 2].label}, ${periods[i - 1].label}`, after: `${periods[i].label}, ${periods[i + 1].label}` }); } } // Different countries have different commitment sizes. // Thresholds are therefore based partly on their total activity. const changeThreshold = Math.max( 10e6, 0.02 * country.positiveActivity ); const peakThreshold = Math.max( 5e6, 0.01 * country.positiveActivity ); // Examine outgoing and incoming commitments independently. for (const series of [ {amount: "donated", count: "donorCount", label: "Donated"}, {amount: "received", count: "recipientCount", label: "Received"} ]) { // Detect large year-over-year increases or decreases. for (let i = 1; i < annual.length; i++) { const previous = annual[i - 1]; const current = annual[i]; // We only compare two genuinely observed calendar years. if (!previous[series.count] || !current[series.count]) { continue; } const change = current[series.amount] - previous[series.amount]; if (Math.abs(change) >= changeThreshold) { yearlyChanges.push({ country: country.country, flow: series.label, year: current.year, previous: previous[series.amount], current: current[series.amount], change }); } } // A local peak must exceed BOTH neighboring observed years. // A local valley must be lower than BOTH neighbors. for (let i = 1; i < annual.length - 1; i++) { const before = annual[i - 1]; const current = annual[i]; const after = annual[i + 1]; if ( !before[series.count] || !current[series.count] || !after[series.count] ) continue; const a = before[series.amount]; const b = current[series.amount]; const c = after[series.amount]; const isPeak = b > a && b > c; const isValley = b < a && b < c; // Prominence measures the smaller of the two // differences from the neighboring years. const prominence = Math.min( Math.abs(b - a), Math.abs(b - c) ); if ((isPeak || isValley) && prominence >= peakThreshold) { peaksValleys.push({ country: country.country, flow: series.label, type: isPeak ? "Peak" : "Valley", year: current.year, amount: b, prominence }); } } } } // Rank events by their financial magnitude. yearlyChanges.sort( (a, b) => Math.abs(b.change) - Math.abs(a.change) ); peaksValleys.sort( (a, b) => b.prominence - a.prominence ); return { countryRoles, shortReversals, sustainedReversals, yearlyChanges, peaksValleys }; })(); // Display how many countries meet each criterion. display({ predominantDonors: v1Findings.countryRoles.filter( d => d.role === "Predominantly donor" ).length, predominantRecipients: v1Findings.countryRoles.filter( d => d.role === "Predominantly recipient" ).length, relativelyBalanced: v1Findings.countryRoles.filter( d => d.role === "Relatively balanced" ).length, shortReversals: v1Findings.shortReversals.length, sustainedReversals: v1Findings.sustainedReversals.length, largeYearlyChanges: v1Findings.yearlyChanges.length, significantPeaksValleys: v1Findings.peaksValleys.length }); 45:T1802, /* ============================================================ SECTION 8: CHART A — TEMPORAL DONOR/RECIPIENT HEATMAP Each row represents a country. Each column represents a five-year period. We use color to show the normalized donor/recipient balance: - Dark green: predominantly donating. - Dark red: predominantly receiving. - Near white: relatively balanced. - Gray: no observations in that period. A gray dot marks periods with recorded commitments but no positive financial amounts. I use a heatmap because it allows all countries to be compared across time in a single visualization. ============================================================ */ const v1Heatmap = (() => { const countries = v1Periods.countryTotals; const periods = v1Periods.starts; // Chart dimensions and margins. const W = 1100; const rowHeight = 27; const M = { top: 125, right: 35, bottom: 115, left: 225 }; // The height adapts to the number of countries. const H = M.top + countries.length * rowHeight + M.bottom; // Horizontal positions: five-year intervals. const x = d3.scaleBand() .domain(periods) .range([M.left, W - M.right]) .paddingInner(0.07); // Vertical positions: country names. const y = d3.scaleBand() .domain(countries.map(d => d.country)) .range([M.top, H - M.bottom]) .paddingInner(0.10); const svg = d3.create("svg") .attr("width", W) .attr("height", H) .attr("viewBox", `0 0 ${W} ${H}`) .attr("role", "img") .attr("aria-label", "Country-by-period donor recipient heatmap") .style("width", "100%") .style("height", "auto") .style("max-width", "1100px") .style("background", "white") .style("font-family", "Arial, sans-serif"); // Chart title. svg.append("text") .attr("x", M.left) .attr("y", 32) .attr("font-size", 24) .attr("font-weight", "bold") .attr("fill", v1Utils.colors.text) .text("A. Country donor/recipient balance over time"); // Subtitle explains what the colors measure. svg.append("text") .attr("x", M.left) .attr("y", 58) .attr("font-size", 13) .attr("fill", v1Utils.colors.muted) .text("Normalized positive-commitment balance by five-year period"); // Add labels for the time periods above the heatmap. svg.append("g") .selectAll("text") .data(periods) .join("text") .attr("x", d => x(d) + x.bandwidth() / 2) .attr("y", M.top - 16) .attr("text-anchor", "middle") .attr("font-size", 12) .attr("fill", v1Utils.colors.text) .text(d => v1Periods.label(d)); // Add country labels to the left of the heatmap. svg.append("g") .selectAll("text") .data(countries) .join("text") .attr("x", M.left - 10) .attr("y", d => y(d.country) + y.bandwidth() / 2) .attr("text-anchor", "end") .attr("dominant-baseline", "middle") .attr("font-size", 12) .attr("fill", v1Utils.colors.text) .text(d => d.country); // Convert the country-period Map into an array of cells. // Each cell corresponds to one country in one period. const cells = countries.flatMap(d => v1Periods.byCountry.get(d.country) ); // Create one rectangle for every country-period combination. const heatmapCells = svg.append("g") .selectAll("rect") .data(cells) .join("rect") .attr("x", d => x(d.start)) .attr("y", d => y(d.country)) .attr("width", x.bandwidth()) .attr("height", y.bandwidth()) .attr("rx", 2) .attr("stroke", "#D8DFE6") .attr("stroke-width", 0.6) .attr("fill", d => { // Missing observations must not look like balanced aid. if (!d.observed) return v1Utils.colors.missing; // An observed period with no positive amount. if (d.balance === null) return "#FFFFFF"; return v1Utils.balanceColor(d.balance); }); // Browser tooltips show exact values when a user hovers. heatmapCells.append("title") .text(d => `${d.country} (${d.label})` + `\nDonated: ${d.donorCount ? v1Utils.exactMoney(d.donated) : "Not observed"}` + `\nReceived: ${d.recipientCount ? v1Utils.exactMoney(d.received) : "Not observed"}` + `\nNet: ${v1Utils.exactMoney(d.net)}` + `\nBalance: ${d.balance === null ? "Undefined" : d.balance.toFixed(3)}` + `\nRole: ${!d.observed ? "No observations" : v1Utils.role(d.balance)}` + `\nDonor records: ${d.donorCount}` + `\nRecipient records: ${d.recipientCount}` ); // Add a gray dot when a period has records but // no positive commitment activity. svg.append("g") .selectAll("circle") .data(cells.filter(d => d.observed && d.positiveActivity === 0 )) .join("circle") .attr("cx", d => x(d.start) + x.bandwidth() / 2) .attr("cy", d => y(d.country) + y.bandwidth() / 2) .attr("r", 3.5) .attr("fill", "#7B8996") .style("pointer-events", "none"); // Legend showing the meaning of the diverging color scale. const legendData = [ {balance: -1, label: "Recipient (−1)"}, {balance: -0.5, label: "Mostly receive"}, {balance: 0, label: "Balanced"}, {balance: 0.5, label: "Mostly donate"}, {balance: 1, label: "Donor (+1)"} ]; const legendY = H - 80; const legend = svg.append("g") .attr("transform", `translate(${M.left},${legendY})`); legend.selectAll("rect") .data(legendData) .join("rect") .attr("x", (d, i) => i * 158) .attr("y", 0) .attr("width", 145) .attr("height", 16) .attr("fill", d => v1Utils.balanceColor(d.balance)) .attr("stroke", "#C9D1D9"); legend.selectAll("text") .data(legendData) .join("text") .attr("x", (d, i) => i * 158) .attr("y", 34) .attr("font-size", 11) .attr("fill", v1Utils.colors.muted) .text(d => d.label); // Explain missing values explicitly. svg.append("text") .attr("x", M.left) .attr("y", H - 14) .attr("font-size", 11) .attr("fill", v1Utils.colors.muted) .text("Gray = no observation; white with gray dot = observed but no positive activity."); return svg.node(); })(); display(v1Heatmap); 46:T2c76, /* ============================================================ SECTION 11: CHART B — ANNUAL DONATED VS RECEIVED This chart complements the temporal heatmap. The heatmap compares countries across five-year periods, while this chart shows actual annual monetary commitments. Green solid line = donated commitments. Red dashed line = received commitments. I also mark significant local peaks and valleys and allow the user to inspect exact financial amounts. Missing observations create gaps rather than artificially being interpreted as zero commitments. ============================================================ */ const v1LineChart = (() => { // Retrieve the selected country and its annual data. const country = v1ChartControls.country; const data = v1Annual.byCountry.get(country); if (!data) { throw new Error("No annual records for " + country); } /* ============================================================ CHART DIMENSIONS ============================================================ */ const W = 1050; const H = 520; const M = { top: 110, right: 45, bottom: 80, left: 115 }; const colors = v1Utils.colors; /* ============================================================ X-AXIS: ACTUAL CALENDAR YEARS ============================================================ */ const x = d3.scaleLinear() .domain([v1Clean.minYear, v1Clean.maxYear]) .range([M.left, W - M.right]); /* ============================================================ Y-AXIS: FINANCIAL AMOUNTS I calculate the minimum and maximum using observed annual financial amounts. The user can switch between linear and symlog scales. ============================================================ */ const values = data.flatMap(d => [ d.donorCount > 0 ? d.donated : null, d.recipientCount > 0 ? d.received : null ]).filter(d => d !== null); const minimum = Math.min(0, ...values); const maximum = Math.max(0, ...values); const yDomain = minimum === maximum ? [-1, 1] : [minimum, maximum]; /* ============================================================ Y-AXIS: USE THE COMBINED CONTROL The selected scale now comes directly from v1ChartControls. This allows the reader to switch between linear and symmetric logarithmic scales using the same control panel as the country dropdown. ============================================================ */ const y = ( v1ChartControls.scale === "Linear" ? d3.scaleLinear() : d3.scaleSymlog().constant( Math.max(1e5, (maximum - minimum) / 1000) ) ) .domain(yDomain) .nice() .range([H - M.bottom, M.top]); /* ============================================================ CREATE THE SVG ============================================================ */ const svg = d3.create("svg") .attr("viewBox", `0 0 ${W} ${H}`) .attr("width", W) .attr("height", H) .attr("role", "img") .attr( "aria-label", `Annual financial commitments for ${country}` ) .style("width", "100%") .style("height", "auto") .style("max-width", "1050px") .style("font-family", "Arial, sans-serif") .style("background", "white"); /* ============================================================ TITLE AND SUBTITLE ============================================================ */ svg.append("text") .attr("x", M.left) .attr("y", 30) .attr("font-size", 23) .attr("font-weight", "bold") .attr("fill", colors.text) .text(`B. Annual financial commitments — ${country}`); svg.append("text") .attr("x", M.left) .attr("y", 55) .attr("font-size", 12.5) .attr("fill", colors.muted) .text( `Donated vs received in constant USD | ` + `${v1ChartControls.scale} scale` ); /* ============================================================ AXES AND GRIDLINES Gridlines help the reader compare monetary amounts without estimating the position of each point. ============================================================ */ svg.append("g") .attr("transform", `translate(${M.left},0)`) .call( d3.axisLeft(y) .ticks(7) .tickFormat(v1Utils.money) ) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line") .clone() .attr("x2", W - M.left - M.right) .attr("stroke", colors.grid) ); // Use actual year values on the horizontal axis. const yearTicks = [ v1Clean.minYear, ...v1Annual.years.filter(d => d % 5 === 0), v1Clean.maxYear ]; svg.append("g") .attr("transform", `translate(0,${H - M.bottom})`) .call( d3.axisBottom(x) .tickValues([...new Set(yearTicks)]) .tickFormat(d3.format("d")) ); svg.append("text") .attr("x", W / 2) .attr("y", H - 25) .attr("text-anchor", "middle") .attr("font-size", 13) .attr("fill", colors.text) .text("Commitment year"); // Zero reference line. svg.append("line") .attr("x1", M.left) .attr("x2", W - M.right) .attr("y1", y(0)) .attr("y2", y(0)) .attr("stroke", "#96A5B2") .attr("stroke-dasharray", "4,4"); /* ============================================================ DONATED AND RECEIVED SERIES The green line is solid and the red line is dashed. Using different line styles helps distinguish the series even without relying entirely on color. ============================================================ */ const series = [ { field: "donated", count: "donorCount", label: "Donated", color: colors.donor, dash: null }, { field: "received", count: "recipientCount", label: "Received", color: colors.recipient, dash: "7,4" } ]; for (const s of series) { // The defined() function prevents lines from // connecting through years with no observation. const line = d3.line() .defined(d => d[s.count] > 0) .x(d => x(d.year)) .y(d => y(d[s.field])) .curve(d3.curveLinear); svg.append("path") .datum(data) .attr("d", line) .attr("fill", "none") .attr("stroke", s.color) .attr("stroke-width", 2.8) .attr("stroke-dasharray", s.dash); // Circles indicate individual annual observations. svg.append("g") .selectAll("circle") .data(data.filter(d => d[s.count] > 0)) .join("circle") .attr("cx", d => x(d.year)) .attr("cy", d => y(d[s.field])) .attr("r", 3.2) .attr("fill", s.color) .attr("stroke", "white") .attr("stroke-width", 0.7); } /* ============================================================ LEGEND ============================================================ */ const legend = svg.append("g") .attr("transform", `translate(${M.left + 575},82)`); series.forEach((s, i) => { const g = legend.append("g") .attr("transform", `translate(${i * 145},0)`); g.append("line") .attr("x1", 0) .attr("x2", 28) .attr("stroke", s.color) .attr("stroke-width", 3) .attr("stroke-dasharray", s.dash); g.append("text") .attr("x", 35) .attr("y", 4) .attr("font-size", 12) .attr("fill", colors.text) .text(s.label); }); /* ============================================================ SIGNIFICANT PEAKS AND VALLEYS I use the events calculated in Section 7 rather than identifying significant changes by eye. Diamonds indicate local peaks. Downward triangles indicate local valleys. I display at most six markers to avoid overcrowding. ============================================================ */ const events = v1Findings.peaksValleys .filter(d => d.country === country) .slice(0, 6); for (const event of events) { const symbol = d3.symbol() .type( event.type === "Peak" ? d3.symbolDiamond : d3.symbolTriangle ) .size(110); const color = event.flow === "Donated" ? colors.donor : colors.recipient; svg.append("path") .attr("d", symbol()) .attr( "transform", `translate(${x(event.year)},${y(event.amount)}) ` + `rotate(${event.type === "Valley" ? 180 : 0})` ) .attr("fill", color) .attr("stroke", "white") .attr("stroke-width", 1.5) .style("pointer-events", "none"); } /* ============================================================ INTERACTIVE YEARLY TOOLTIP I create transparent rectangles over each year. Hovering shows exact financial amounts and any significant events associated with that year. This works even when the visible data points are small. ============================================================ */ const yearWidth = (W - M.left - M.right) / Math.max(1, data.length - 1); const guide = svg.append("line") .attr("y1", M.top) .attr("y2", H - M.bottom) .attr("stroke", "#607586") .attr("stroke-dasharray", "3,4") .attr("opacity", 0) .style("pointer-events", "none"); const hover = svg.append("g") .selectAll("rect") .data(data) .join("rect") .attr("x", d => x(d.year) - yearWidth / 2) .attr("y", M.top) .attr("width", yearWidth) .attr("height", H - M.top - M.bottom) .attr("fill", "transparent") .style("cursor", "crosshair"); hover.append("title") .text(d => { // Get events occurring during this particular year. const yearEvents = v1Findings.peaksValleys .filter(e => e.country === country && e.year === d.year ); const changes = v1Findings.yearlyChanges .filter(e => e.country === country && e.year === d.year ); return ( `${country} — ${d.year}` + `\nDonated: ${ d.donorCount ? v1Utils.exactMoney(d.donated) : "Not observed" }` + `\nReceived: ${ d.recipientCount ? v1Utils.exactMoney(d.received) : "Not observed" }` + `\nNet balance: ${v1Utils.exactMoney(d.net)}` + `\nDonor records: ${d.donorCount}` + `\nRecipient records: ${d.recipientCount}` + yearEvents.map(e => `\n${e.flow}: ${e.type}` ).join("") + changes.map(e => `\n${e.flow} yearly change: ${ v1Utils.money(e.change) }` ).join("") ); }); hover .on("pointerenter pointermove", (event, d) => { guide .attr("x1", x(d.year)) .attr("x2", x(d.year)) .attr("opacity", 1); }) .on("pointerleave", () => { guide.attr("opacity", 0); }); /* ============================================================ MARKER EXPLANATION ============================================================ */ svg.append("text") .attr("x", W - M.right) .attr("y", H - 8) .attr("text-anchor", "end") .attr("font-size", 11) .attr("fill", colors.muted) .text( "◆ Local peak ▼ Local valley | Hover for yearly values" ); return svg.node(); })(); display(v1LineChart); 47:T830, /* ============================================================ SECTION 12: COUNTRY ROLES, CHANGES AND PEAKS — TABLES The heatmap helps us understand patterns visually, while the tables provide exact financial evidence. I use these tables to support my written analysis rather than estimating amounts directly from the charts. ============================================================ */ // Rank countries according to lifetime positive activity. const v1CountryRanking = [...v1Findings.countryRoles] .sort((a, b) => b.positiveActivity - a.positiveActivity) .map(d => ({ Country: d.country, Classification: d.role, Donated: v1Utils.money(d.donated), Received: v1Utils.money(d.received), Net: v1Utils.money(d.net), Balance: d.balance === null ? "N/A" : d.balance.toFixed(3) })); display("A. Country classifications and monetary totals"); display(Inputs.table(v1CountryRanking)); // Display the strongest year-over-year monetary changes. const v1ChangeTable = v1Findings.yearlyChanges .slice(0, 20) .map(d => ({ Country: d.country, Flow: d.flow, Year: d.year, Previous: v1Utils.money(d.previous), Current: v1Utils.money(d.current), Change: v1Utils.money(d.change) })); display("B. Largest qualifying year-over-year changes"); display(Inputs.table(v1ChangeTable)); // Display the most prominent local peaks and valleys. const v1ExtremaTable = v1Findings.peaksValleys .slice(0, 20) .map(d => ({ Country: d.country, Flow: d.flow, Type: d.type, Year: d.year, Amount: v1Utils.money(d.amount), Prominence: v1Utils.money(d.prominence) })); display("C. Significant local peaks and valleys"); display(Inputs.table(v1ExtremaTable)); // Strong reversals, if any meet our strict definition. display("D. Sustained donor/recipient role reversals"); display(Inputs.table(v1Findings.sustainedReversals)); // We also show weaker changes between consecutive periods. display("E. Shorter donor/recipient role switches"); display(Inputs.table(v1Findings.shortReversals.slice(0, 25))); 48:T2dc7,I imported the files and go 98540 records and 47 countries/enttites where the data covers from 1973 to 2013. For each country I calculate the annual donated commitments, received commitments and net balance = tota donated - total received. A positive net balance means a country donated more than it received, while a negative balance means it received more than it donated. I also calculate the normalized donor/recipient balance: ${tex.block`B = \frac{D^{+} - R^{+}}{D^{+} + R^{+}}`} Where: - **D⁺** represents total positive donated commitments. - **R⁺** represents total positive received commitments. - **B** represents the normalized donor/recipient balance. We have to use this measure to normalize the data and lets us compare countries according to their relative roles. If we look at net balance only very large donors/recipients can not be compared to much smaller donors/recipients. Values range from -1 to 1. -1 represents only receiving positive commitments and +1 represents only donating positive commitnemnts, 0 is neutral equal donor/recipient commitments. The threshold is 0.2 corresponding to 60/40 division of positive financial activity. So +0.3 means a country is predominantly donating and -0.2 means predominantly receiving. I selected ±0.20 as the threshold for classifying countries because it corresponds to a 60/40 distribution of positive financial commitments. I wanted to distinguish countries with a noticeable donor/recipient imbalance from those with relatively similar amounts. I also considered using ±0.30, corresponding to a 65/35 distribution, but this would be more restrictive and could exclude moderate role transitions that are relevant to the assignment. Since my role-reversal detection already requires minimum financial activity and consistency across consecutive periods, I decided to retain ±0.20. This is a methodological choice rather than an established statistical standard, and the classification results may change with a different threshold. (source: https://r.tiid.org/Trade_indicators/trade-performance.html) In the heatmap we aggregate the info into 5 year periods. # Comparison 1. Comparison of donated vs received amount over time The results show a big difference between countries between donated and received commitments over time.Countries like the United States, Japan, and Germany are amongst the largest donors. They are predominantly donors across much of the historical period whereas others mainly receive the commitments . As seen in many Project 1s, the United States had about $116.18 billion donated compared to $104.52 million received, showing a significant net difference of around +$116.07 billion. Japan followed with a net balance of around +112.10 billion and Germany was third further down with +47.22 in net commitments. India, Thailand, and Brazil are amongst the higher receivers. Therefore the commitments aren't evenly distributed amongst every country in the dataset. I partitioned the heat map into sections of 5 years in order to make long-term patterns more visible to users. And I also added a line chart on which you can choose the country you wish to analyze and examine when that country experienced higher or lower levels of financial activities. 2. Countries that mainly donated,receive or equal. In order to answer the second question on whether there are countries which send commitments, receive commitments, or do both, I used normalized balance in order to classify the countries. In the heat map, countries with predominantly outgoing commitments represented in green shades whereas countries with predominantly incoming commitments are represented in red shades. I followed the same reasoning I used in mini project 1, which is that, in general, when it comes to money, the colors used are red and green. Furthermore I had the chance to meet with the lecturer that spoke about the red shade being well seen in Asian countries. I did give him the case of mini project 1, where he told me to do a red shade as it was okay. Therefore I thought it would be the opportunity to continue and listen to his advice. We can see that the United States, Japan, the Netherlands, and Germany appear as donor-dominant side countries whereas India, Thailand, Brazil, Colombia, and Poland are recipient-dominant countries. I also added a range from -0.2 to +0.2 for the countries with equal net balance as it is very rare and almost impossible for a country to have exact receive and donor commitments. Giving a range allows for a more accurate representation of the equal countries in a real-world scenario. Since I normalized the net balance, regardless of whether the value amount of commitments is large or small, we are looking at the proportional net balance . This can cause an issue where countries with very small amounts of outgoing commitments and no incoming commitments would be considered as positive 1 (so net donors), but it would not be the actual case. Therefore I added a minimum financial activity requirement of 10 million in order to solve this issue. 3.Countries that change roles overtime In order to answer this question we compare the normalized balance across consecutive 5-year periods. I made two classifications. The first is short-term role switches : A country changes directly from donor-dominant to recipient-dominant or vice versa over two sections of 5-year periods. The second is sustained ruled reversal: A country is classified in one direction for two consecutive classifying periods but then in the opposite direction for another two consecutive qualifying periods. In order for a country to have a valid role, it must have the sufficient financial requirement for the activities and at least three commitments per qualifying period. We can see that Finland and Kuwait are in the sustained roll reversal table. Firstly Finland moved from recipient-dominant classification to donor-dominant and Kuwait did the opposite, changing from donor to recipient, by the Inverse way.We can also see shorter switches in countries like Canada, Austria, or even Belgium. It's possible for a country to receive large commitments at a specific point in time and then go back to being a major donor. I made it so we look at consecutive periods So we get a more reliable interpretation. 4. Sudden increase,peaks,valleys Let delta A_t= A__t - A_(t-1). This gives us whether a country donated or received more or less compared to the previous year. The threshold for change is considered to be 10 million or 2% of that specific country's cumulative positive financial activity. I calculate the minimum difference between the central year and either neighboring year, which I used as a measure of the peaks/valleys' prominence. This value must be at least 5 million or more, or 1% of that country's cumulative positive activity. From the results we see that Poland appears among the most prominent local peaks for received commitments and Germany appears amongst the prominent local peaks for donated commitments. We also have The United States, Japan, Korea, and Thailand Which show notable fluctuations. The peak and valley detection method is useful in highlighting unusual changes but doesn't explain what causes them. A large commitment could reflect particular financing agreements, accounting adjustments, or changes in coverage of the reduced dataset. #Interpretation chart A For Chart AI created a temporal heat map where each row represents a country and each column represents a 5-year period gap. This visualization allows me to compare the behavior of all 47 countries over time without actually having to draw the 47 separate line charts. Heatmaps make it easier for humans to identify countries with consistent patterns as it is easier to see with the eye. A country that remains green across multiple periods is predominantly a donor and if it's red it will be predominantly a recipient. This pops to the eye of a user when looking at the chart. A dramatic A change from red to green is easily noticeable and suggests that a country's role has changed over that period of time. I kept the white for balanced commitments and gray for missing observation as gray is usually used for missing observation. It's a pretty straightforward explanation of why I used gray. I added a hover tool tip displaying the country's name, time period, donated amount, received amount, signed net balance, normalized balance, and transaction count. The 47 countries made the heat map pretty big so I tried to reduce it as much as possible while keeping it visible. That is an issue of using such a heat map with such big datasets but since we need to see each country as the questions regard each country, I cannot cut the heat map. The heat map allows for a global overview of the donor/recipient relationships over several decades. But its main limitation is that the colors represent the relative balance and not the total financial amount so two countries can have the same color but very different commitment volumes. For example United states and Japan have extremely high donor commitments. Germany also has quite a high donor commitment but as explained previously they have around 100 billion in scaling versus 40 billion in scaling. #Interpretation chart B For the second chart I made an interactive line chart Which displays annual donated and received commitments for a selected country. You may select one of the 47 countries on a drop-down menu and it represents the donated commitments with a solid green line and received commitments with a dashed red line. Using both color and a line style makes the two variables a lot easier to distinguish. The horizontal axis represents actual calendar years and the vertical axis represents monetary commitments in USD. I selected a linear scale by default because I wanted differences in line height to correspond directly to the differences in financial amounts. But as explained, commitments are measured in billions and some other commitments are measured in millions or even smaller. Therefore I added an option to switch to a symmetric logarithmic scale, which represents positive values, zero, and negative financial adjustments while making smaller monetary differences more visible. The disadvantage in using that is that equal visual distances are no longer corresponding to equal dollar differences so I kept the linear scale as the default. I added markers for prominent local peaks and valleys and hover information showing the exact annual commitments. The line chart allows for display of the actual monetary magnitude, which makes it a lot easier to compare a country's donated and received amounts and to identify sudden financial increases or decreases (which we cannot see in the heat map). But the chart can only display one country at a time whereas the heat map gives us an overall view of all the countries. In limitations the dataset describes financial commitments so the records are only agreements and not actual transactions done. Furthermore we have a smaller version of the dataset, which only covers 1973 to 2013, so we cannot know the current situation of these countries. A lot of commitments are probably missing. In order to represent all the years, the heat map is divided into 5-year periods but it doesn't allow for precise temporal readability. The normalized balance uses positive commitments whereas the financial chart uses signed totals. So the measures answer different questions and we must interpret them separately. Finally the role reversal and peak detection methods depend on minimum financial activity thresholds. These thresholds reduce the influence of very small fluctuations. 49:Tcd6, /* ============================================================ VISUALIZATION 2 — SECTION 1: PREPARE PURPOSE RECORDS For this visualization, I need to examine the purposes of financial commitments over time. I use v1Raw instead of v1Clean.records because the cleaned records from Part 1 do not include purpose names. I exclude UNSPECIFIED and preserve negative adjustments so the monetary ranking is based on the actual signed commitment amounts, rather than the number of records. ============================================================ */ const v2Data = (() => { // Identify the columns in our original CSV. const headers = Object.keys(v1Raw[0]); const find = wanted => headers.find(h => h.trim().toLowerCase() .replace(/[^a-z0-9]+/g, "_") .replace(/^_+|_+$/g, "") === wanted ); const cols = { year: find("year"), amount: find("commitment_amount_usd_constant"), name: find("coalesced_purpose_name"), code: find("coalesced_purpose_code") }; // Verify that the required fields exist. if (!cols.year || !cols.amount || !cols.name) { throw new Error( "Missing required columns: " + headers.join(", ") ); } const report = { original: v1Raw.length, invalidYear: 0, invalidAmount: 0, missingPurpose: 0, unspecified: 0, negative: 0, valid: 0 }; const records = []; // Go through every original transaction. // IMPORTANT: continue is inside this loop. for (const row of v1Raw) { // Convert the commitment year to a number. const yearText = String(row[cols.year] ?? "").trim(); const year = yearText ? Number(yearText) : NaN; // Convert financial amounts while preserving negatives. const rawAmount = String(row[cols.amount] ?? "") .trim() .replace(/[$,\s]/g, ""); const amount = /^$.+$$/.test(rawAmount) ? -Number(rawAmount.slice(1, -1)) : rawAmount ? Number(rawAmount) : NaN; if (!Number.isInteger(year) || year < 1900 || year > 2100) { report.invalidYear++; continue; } if (!Number.isFinite(amount)) { report.invalidAmount++; continue; } // Read and normalize the purpose name. const name = String(row[cols.name] ?? "") .trim() .replace(/\s+/g, " "); const code = String( cols.code ? row[cols.code] ?? "" : "" ).trim(); // Remove transactions with no purpose information. if (!name) { report.missingPurpose++; continue; } // The professor explicitly asks us to exclude UNSPECIFIED. if (name.toUpperCase() === "UNSPECIFIED") { report.unspecified++; continue; } // Capitalization differences should not split one purpose // into multiple separate groups. const key = name.toUpperCase(); records.push({ year, amount, name, code, key, positive: Math.max(0, amount), adjustment: Math.min(0, amount) }); report.valid++; if (amount < 0) { report.negative++; } } if (records.length === 0) { throw new Error("No valid specified purpose records."); } return {records, report, cols}; })(); // Show how many records are retained and excluded. display(v2Data.report); 4a:T112e, /* ============================================================ VISUALIZATION 2 — SECTION 2: TOP 10 PURPOSES BY AMOUNT The professor asks for the 10 purposes receiving the highest total monetary commitments. I use d3.group to group transactions by purpose and d3.sum to calculate their monetary totals. IMPORTANT: We rank by money, NOT transaction frequency. I then calculate annual and five-year totals so we can analyze how the importance of each purpose changes. ============================================================ */ const v2Purpose = (() => { // Group records by normalized purpose name. // This fixes the "grouped is not defined" error. const grouped = d3.group( v2Data.records, d => d.key ); // Calculate each purpose's lifetime monetary totals. const all = Array.from(grouped, ([key, rows]) => { // Find the most common display spelling of the purpose. const displayNames = d3.rollups( rows, v => v.length, d => d.name ).sort((a, b) => b[1] - a[1] || d3.ascending(a[0], b[0]) ); return { key, name: displayNames[0][0], // Keep codes and naming variations for validation. codes: [...new Set( rows.map(d => d.code).filter(Boolean) )].sort(), names: displayNames.map(d => d[0]), // Signed amount includes negative adjustments. signed: d3.sum(rows, d => d.amount), // Positive amount will be used for the stacked areas. positive: d3.sum(rows, d => d.positive), adjustments: d3.sum(rows, d => d.adjustment), // Record count is diagnostic, NOT our ranking criterion. count: rows.length }; }); // Rank purposes by total signed financial amount. all.sort((a, b) => d3.descending(a.signed, b.signed) || d3.ascending(a.name, b.name) ); // Select the 10 highest monetary purposes. // The same top 10 are used for all years. const top10 = all.slice(0, 10).map((d, i) => ({ ...d, id: `p${i}` })); if (top10.length < 10) { throw new Error("Fewer than 10 specified purposes."); } // Group transactions by purpose AND year. // This lets us calculate a temporal series for each purpose. const lookup = d3.rollup( v2Data.records, rows => ({ signed: d3.sum(rows, d => d.amount), positive: d3.sum(rows, d => d.positive), count: rows.length }), d => d.key, d => d.year ); // Construct annual observations for the top 10 purposes. const years = d3.range( v1Clean.minYear, v1Clean.maxYear + 1 ); const annual = years.map(year => { const row = {year, observed: false}; for (const purpose of top10) { const value = lookup.get(purpose.key)?.get(year); row[purpose.id] = value?.positive ?? 0; row[`${purpose.id}Signed`] = value?.signed ?? 0; row[`${purpose.id}Count`] = value?.count ?? 0; if (value?.count) { row.observed = true; } } row.total = d3.sum( top10, purpose => row[purpose.id] ); return row; }); // Group annual values into five-year periods. const periods = v1Periods.starts.map(start => { const rows = annual.filter(d => d.year >= start && d.year < start + 5 ); const out = { start, label: v1Periods.label(start) }; for (const purpose of top10) { out[purpose.id] = d3.sum( rows, d => d[purpose.id] ); } out.total = d3.sum( top10, purpose => out[purpose.id] ); // Identify which purpose dominates each period. const leader = [...top10].sort( (a, b) => out[b.id] - out[a.id] )[0]; out.leader = out.total > 0 ? leader.name : "No positive top-ten activity"; out.leaderShare = out.total > 0 ? out[leader.id] / out.total : null; return out; }); // Consistent colors across the area chart and ranking. const color = d3.scaleOrdinal() .domain(top10.map(d => d.id)) .range(d3.schemeTableau10); return { all, top10, annual, periods, color }; })(); // Display the actual top 10 purposes. display(Inputs.table( v2Purpose.top10.map((d, i) => ({ Rank: i + 1, Purpose: d.name, "Signed total": v1Utils.money(d.signed), "Positive commitments": v1Utils.money(d.positive), Records: d.count })) )); 4b:T2270, /* ============================================================ VISUALIZATION 2 — CHART A: STACKED AREA CHART Each colored area represents one of the ten purposes that received the largest TOTAL signed commitments. Unlike Mini-Project 1, we select purposes based on monetary value, NOT the number of transactions. Absolute mode: - Each layer represents positive commitments in USD. - The overall height shows total positive financial volume. Percentage mode: - The combined layers represent 100% of positive commitments among the selected top ten. - This makes changes in relative importance visible. Negative financial adjustments are preserved in the original ranking but excluded from the positive-only area heights to avoid invalid negative percentages. ============================================================ */ const v2AreaChart = (() => { // Define chart dimensions. const W = 1050; const H = 610; const M = { top: 85, right: 35, bottom: 190, left: 105 }; const percent = v2Mode === "Percentage of top 10"; // Use an HTML container for the SVG and hover tooltip. const root = document.createElement("div"); root.style.cssText = "position:relative;max-width:1050px;" + "font-family:Arial,sans-serif;background:white;"; const svg = d3.select(root) .append("svg") .attr("viewBox", `0 0 ${W} ${H}`) .attr("role", "img") .attr("aria-label", "Stacked area chart of top ten aid purposes") .style("width", "100%") .style("height", "auto") .style("display", "block"); // Create a tooltip that follows the mouse. const tooltip = d3.select(root) .append("div") .style("position", "absolute") .style("pointer-events", "none") .style("opacity", 0) .style("z-index", 5) .style("padding", "8px 12px") .style("border-radius", "6px") .style("background", "#223444") .style("color", "white") .style("font", "12px/1.5 Arial, sans-serif"); // Each purpose has a unique ID assigned in V2-02. const keys = v2Purpose.top10.map(d => d.id); // D3's stack generator computes the lower and upper // boundaries of each purpose layer. // // stackOffsetExpand converts monetary amounts into // relative proportions for the 100% view. const layers = d3.stack() .keys(keys) .offset( percent ? d3.stackOffsetExpand : d3.stackOffsetNone )(v2Purpose.annual); // Determine the maximum height of the absolute stack. const stackMax = d3.max( layers, layer => d3.max(layer, d => d[1]) ) || 0; // Actual calendar years determine horizontal positions. const x = d3.scaleLinear() .domain([v1Clean.minYear, v1Clean.maxYear]) .range([M.left, W - M.right]); // Percentage mode always has a vertical range of 0–100%. // Absolute mode uses the observed monetary maximum. const y = d3.scaleLinear() .domain([ 0, percent ? 1 : Math.max(1, stackMax) ]) .nice() .range([H - M.bottom, M.top]); // Chart title. svg.append("text") .attr("x", M.left) .attr("y", 28) .attr("font-size", 23) .attr("font-weight", "bold") .attr("fill", "#203445") .text("2A. How the top 10 aid purposes change over time"); // Subtitle depends on the selected visualization mode. svg.append("text") .attr("x", M.left) .attr("y", 51) .attr("font-size", 12.5) .attr("fill", "#637486") .text(percent ? "Percentage of positive commitments among the same top 10 purposes" : "Positive commitments in constant USD; ranking uses signed monetary totals" ); // Draw the Y-axis and horizontal gridlines. svg.append("g") .attr("transform", `translate(${M.left},0)`) .call( d3.axisLeft(y) .ticks(6) .tickFormat( percent ? d3.format(".0%") : v1Utils.money ) ) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line") .clone() .attr("x2", W - M.left - M.right) .attr("stroke", "#E8EDF1") ); // Draw the X-axis. svg.append("g") .attr("transform", `translate(0,${H - M.bottom})`) .call( d3.axisBottom(x) .ticks(10) .tickFormat(d3.format("d")) ); svg.append("text") .attr("x", W / 2) .attr("y", H - M.bottom + 46) .attr("text-anchor", "middle") .attr("font-size", 13) .text("Commitment year"); // Generate the shape for each purpose layer. // // I use straight segments instead of smooth curves // because smoothing could suggest values that were // never recorded in the dataset. const area = d3.area() .defined(d => d.data.observed && d.data.total > 0 ) .x(d => x(d.data.year)) .y0(d => y(d[0])) .y1(d => y(d[1])) .curve(d3.curveLinear); // Draw the stacked areas. svg.selectAll(".purpose-area") .data(layers) .join("path") .attr("class", "purpose-area") .attr("d", area) .attr("fill", d => v2Purpose.color(d.key)) .attr("stroke", "white") .attr("stroke-width", 0.3) .append("title") .text(layer => v2Purpose.top10.find(p => p.id === layer.key).name ); // Add the legend below the plot. // Long names are shortened only visually. // Their full names remain available on hover. v2Purpose.top10.forEach((purpose, i) => { // Display five purposes in each legend column. const gx = M.left + (i >= 5 ? 465 : 0); const gy = H - M.bottom + 78 + (i % 5) * 21; svg.append("rect") .attr("x", gx) .attr("y", gy - 11) .attr("width", 12) .attr("height", 12) .attr("rx", 2) .attr("fill", v2Purpose.color(purpose.id)); svg.append("text") .attr("x", gx + 18) .attr("y", gy) .attr("font-size", 11.5) .attr("fill", "#33495A") .text( `${i + 1}. ` + (purpose.name.length > 50 ? purpose.name.slice(0, 47) + "…" : purpose.name) ) .append("title") .text(purpose.name); }); // Create a vertical reference line that follows the year. const cursor = svg.append("line") .attr("y1", M.top) .attr("y2", H - M.bottom) .attr("stroke", "#40576A") .attr("stroke-dasharray", "3,3") .attr("opacity", 0); // A transparent rectangle captures mouse movements // anywhere inside the plotting area. svg.append("rect") .attr("x", M.left) .attr("y", M.top) .attr("width", W - M.left - M.right) .attr("height", H - M.top - M.bottom) .attr("fill", "transparent") .on("pointermove", event => { // Convert mouse position back into a calendar year. const mx = d3.pointer(event, svg.node())[0]; const year = Math.max( v1Clean.minYear, Math.min( v1Clean.maxYear, Math.round(x.invert(mx)) ) ); // Annual rows begin at the first year, so we can // retrieve the selected year by its index. const row = v2Purpose.annual[ year - v1Clean.minYear ]; // Rank the purposes by activity in this particular year. const sorted = [...v2Purpose.top10] .sort((a, b) => row[b.id] - row[a.id]); cursor .attr("x1", x(year)) .attr("x2", x(year)) .attr("opacity", 1); // Clear the previous tooltip contents. tooltip.selectAll("*").remove(); tooltip.append("div") .style("font-weight", "bold") .text( `${year} — top 10 total: ` + v1Utils.money(row.total) ); if (!row.observed) { tooltip.append("div") .text("No top-ten purpose records this year."); } else { // Display both the monetary amount and its // percentage of that year's top-ten total. for (const purpose of sorted) { const share = row.total > 0 ? 100 * row[purpose.id] / row.total : 0; tooltip.append("div") .text( `${purpose.name}: ` + `${v1Utils.money(row[purpose.id])} ` + `(${share.toFixed(1)}%)` ); } } // Keep the tooltip inside the chart container. const bounds = root.getBoundingClientRect(); tooltip .style( "left", `${Math.min( event.clientX - bounds.left + 12, Math.max(8, bounds.width - 310) )}px` ) .style( "top", `${Math.max( 0, event.clientY - bounds.top - 15 )}px` ) .style("opacity", 1); }) .on("pointerleave", () => { cursor.attr("opacity", 0); tooltip.style("opacity", 0); }); return root; })(); display(v2AreaChart); 4c:T113f, /* ============================================================ VISUALIZATION 2 — CHART B: TOP TEN PURPOSE RANKING The area chart shows changes over time, but it can be difficult to determine which purpose is largest overall. I therefore add a horizontal bar chart showing the top ten purposes by their total signed financial value. This ranking is calculated from the SUM of monetary commitments, not the number of records. I use the same purpose colors as Chart A so users can easily connect the two visualizations. ============================================================ */ const v2RankingChart = (() => { const data = v2Purpose.top10; const W = 1050; const rowHeight = 33; const M = { top: 72, right: 115, bottom: 65, left: 365 }; const H = M.top + data.length * rowHeight + M.bottom; // Determine the observed monetary range. const minAmount = Math.min( 0, d3.min(data, d => d.signed) ?? 0 ); const maxAmount = Math.max( 1, d3.max(data, d => d.signed) ?? 1 ); // Linear scale: bar lengths remain proportional to money. const x = d3.scaleLinear() .domain([minAmount, maxAmount]) .nice() .range([M.left, W - M.right]); // One horizontal band for each purpose. const y = d3.scaleBand() .domain(data.map(d => d.id)) .range([M.top, H - M.bottom]) .padding(0.24); const svg = d3.create("svg") .attr("viewBox", `0 0 ${W} ${H}`) .attr("role", "img") .attr("aria-label", "Top ten aid purposes ranked by monetary amount") .style("width", "100%") .style("height", "auto") .style("max-width", "1050px") .style("font-family", "Arial, sans-serif") .style("background", "white"); // Title and subtitle. svg.append("text") .attr("x", M.left) .attr("y", 28) .attr("font-size", 22) .attr("font-weight", "bold") .attr("fill", "#203445") .text("2B. Top 10 purposes by total monetary commitments"); svg.append("text") .attr("x", M.left) .attr("y", 49) .attr("font-size", 12) .attr("fill", "#637486") .text("Ranked by lifetime signed USD totals, not transaction frequency"); // Draw the monetary X-axis and vertical gridlines. svg.append("g") .attr("transform", `translate(0,${H - M.bottom})`) .call( d3.axisBottom(x) .ticks(6) .tickFormat(v1Utils.money) ) .call(g => g.selectAll(".tick line") .clone() .attr("y2", -(H - M.bottom - M.top)) .attr("stroke", "#E8EDF1") ); // Zero line helps if a purpose has negative signed totals. svg.append("line") .attr("x1", x(0)) .attr("x2", x(0)) .attr("y1", M.top) .attr("y2", H - M.bottom) .attr("stroke", "#536879"); // Draw one bar for each purpose. const bars = svg.append("g") .selectAll("rect") .data(data) .join("rect") .attr("x", d => Math.min(x(0), x(d.signed))) .attr("y", d => y(d.id)) .attr("width", d => Math.abs(x(d.signed) - x(0))) .attr("height", y.bandwidth()) .attr("rx", 3) .attr("fill", d => v2Purpose.color(d.id)); // Show full names and exact monetary values on hover. bars.append("title") .text(d => `${d.name}` + `\nSigned commitments: ${v1Utils.exactMoney(d.signed)}` + `\nPositive commitments: ${v1Utils.exactMoney(d.positive)}` + `\nTransactions: ${d.count}` ); // Place purpose labels to the left of the bars. svg.append("g") .selectAll("text") .data(data) .join("text") .attr("x", M.left - 12) .attr("y", d => y(d.id) + y.bandwidth() / 2) .attr("text-anchor", "end") .attr("dominant-baseline", "middle") .attr("font-size", 11.8) .attr("fill", "#203445") .text((d, i) => `${i + 1}. ` + (d.name.length > 46 ? d.name.slice(0, 43) + "…" : d.name) ) .append("title") .text(d => d.name); // Add readable amounts beside the bars. svg.append("g") .selectAll("text") .data(data) .join("text") .attr("x", d => x(d.signed) + (d.signed >= 0 ? 8 : -8) ) .attr("y", d => y(d.id) + y.bandwidth() / 2) .attr("dominant-baseline", "middle") .attr("text-anchor", d => d.signed >= 0 ? "start" : "end" ) .attr("font-size", 11) .attr("fill", "#203445") .text(d => v1Utils.money(d.signed)); return svg.node(); })(); display(v2RankingChart); 4d:Tce8, /* ============================================================ VISUALIZATION 2 — SECTION 6: VALIDATION AND EVIDENCE I verify that the top ten monetary totals agree with the original purpose records. I also calculate the most prominent purpose during each five-year period. These results will support the written analysis with actual purpose names, years, amounts and percentages, rather than making estimates from the chart. ============================================================ */ const v2Evidence = (() => { // Identify the ten purpose keys selected in V2-02. const topKeys = new Set( v2Purpose.top10.map(d => d.key) ); // Calculate their total directly from the source records. const selectedRecords = v2Data.records.filter(d => topKeys.has(d.key) ); const originalTop10 = d3.sum( selectedRecords, d => d.amount ); // Calculate the same total from the purpose ranking. const rankedTop10 = d3.sum( v2Purpose.top10, d => d.signed ); // Floating-point differences may occur when summing // financial amounts in a different order. const tolerance = Math.max( 0.01, 1e-9 * d3.sum( selectedRecords, d => Math.abs(d.amount) ) ); const difference = Math.abs( originalTop10 - rankedTop10 ); if (difference > tolerance) { throw new Error( "Purpose ranking does not reconcile with source records." ); } // The annual stacked chart must also agree with the // selected purposes' positive financial totals. const positiveTop10 = d3.sum( v2Purpose.top10, d => d.positive ); const annualPositive = d3.sum( v2Purpose.annual, d => d.total ); if (Math.abs(positiveTop10 - annualPositive) > tolerance) { throw new Error( "Annual purpose totals do not reconcile." ); } return { signedTop10: rankedTop10, positiveTop10, negativeAdjustments: d3.sum( v2Purpose.top10, d => d.adjustments ), difference, tolerance, validated: true }; })(); display("A. Purpose aggregation validation:"); display(v2Evidence); // Purpose names and codes may not always map perfectly. // Inspect multiple codes or spelling variations. display("B. Purpose naming and code variations:"); display(Inputs.table( v2Purpose.all .filter(d => d.codes.length > 1 || d.names.length > 1 ) .map(d => ({ Purpose: d.name, Codes: d.codes.join(", ") || "None", NameVariations: d.names.join(" / ") })) .slice(0, 30) )); // Find the leading purpose in each five-year interval. display("C. Leading purposes during five-year periods:"); display(Inputs.table( v2Purpose.periods.map(d => ({ Period: d.label, LeadingPurpose: d.leader, Share: d.leaderShare === null ? "N/A" : d3.format(".1%")(d.leaderShare), PositiveTop10Volume: v1Utils.money(d.total) })) )); // Show the exact financial ranking. display("D. Top 10 purposes by cumulative monetary value:"); display(Inputs.table( v2Purpose.top10.map((d, i) => ({ Rank: i + 1, Purpose: d.name, TotalSignedUSD: v1Utils.money(d.signed), PositiveUSD: v1Utils.money(d.positive), NegativeAdjustments: v1Utils.money(d.adjustments), Transactions: d.count })) )); 4e:T18d8,For the second visualization we investigate which aid purposes receive the largest financial commitments and if their importance changes over time. This time we focus on the purpose of the commitments.For this part we use coalesced_purpose_name, coalesced_purpose_code,year, commintment_amount_usd columns. First clean The data, like I did in mini project 1 where the purpose names avoid treating capitalization as different for different purposes and we exclude record labels unspecified.Here I decided to rank the purposes by total monetary commitments instead of number of transactions since each commitment has a different values.I kept negative financial adjustments when calculating overall monetary ranking. For the stacked area chart I used positive commitments so the stacked values and percentages can be interpreted easily by the users. Then I calculated the annual totals for the 10 selected purposes and 5-year totals to identify the leading purpose during the different periods. 1. Top 10. According to the generated table, the ranking of the ten largest purposes was: 1. Air transport with $39.81 billion 2. Rail transport with $20.78 billion 3. Industrial development with 19.75 billion 4. Rescheduling and refinancing with $17.95 billion 5. Power generation/non-renewable resources with 15.13 billion, 6. import support with 10.28 billion 7. Social/welfare services with 9.21 billion 8. Telecommunications with 8.68 billion 9. General budget support with 8.63 billion 10. Power generation/renewable sources with 8.62 billion Air transport is the largest purpose, with $39.81 billion in reported commitments, almost twice as much as the second place, which is rail transport, with $20.78 billion. The top 10 purposes represent around $158.85 billion in signed commitments. The ranking shows the cumulative importance of each purpose and not whether the same purpose remained dominant throughout the historical period so I added a temporal analysis. 2. How does the importance change over time In the earlier years rescheduling and refinancing were particularly prominent. They represented 32.4% of the positive commitments among the selected top 10 during 1973-1974. It remained the leading purpose during 1975-1979 with around 27.7%. But during the years 1980 to 1984, air transport became the largest purpose, with around 41% of the top 10 positive commitments during that period. This change shows that the leading category was no longer rescheduling and refinancing but air transport, which shows that the dominant purpose change is across the historical periods. During 1985-1989 and 1990-1994, the situation changed and rescheduling and refinancing returned as the leading purpose, representing 28.8% and 26%, respectively. During 1995 and 1999 air transport became prominent, representing 31.4% of the top 10 commitments, and then increased to 49.3% during the years 2000 to 2004. From 2005 to 2009 rail transport became the largest purpose, representing around 45.2% of the top 10 commitments. It then increased to 70.7% during 2010-2013. Although rail transport is the second-largest purpose in the dataset, it became dominant in the final periods, showing a change throughout the years. The visualization shows a changing pattern. Rescheduling and refinancing were prominent in several earlier periods. Air transport became particularly important in the middle and later years and The visualization shows that funding priorities changed across the observed periods. Rescheduling and refinancing were prominent in several earlier periods, air transport became particularly important during the middle years, and rail transport became the dominant purpose in the final periods, reaching approximately 70.7% of positive commitments among the selected top ten purposes during 2010–2013. #Interpretation of chart A For Chart A I chose a stacked area chart since I wanted to show how multiple purposes change over time without having ten separate line charts. Each color represents one of the ten purposes and the horizontal axis represents the years. I added an interactive button which allows users to switch between absolute USD and percentage for the top ten. In USD mode we can see how much positive financial activity is recorded for each purpose over time and this helps us identify increases or decreases and periods with larger overall financial commitments. Whereas in purpose mode the charts allow us to see how important each purpose was compared to the other nine purposes during that same year. Since A purpose can increase in monetary value but still decrease in relative importance to the other purposes. This is important to have both. The advantage is that a stacked area chart allows for the user to see an evolution of 10 purposes all at once. The disadvantage is that it's difficult to compare the exact sizes of middle layers since they don't all share the same baseline. With 10 purposes the graph can be a little dense visually. #Interpretation of chart B For the second chart I used a horizontal bar chart in order to rank the ten purposes according to their cumulative signed financial commitments. I chose the horizontal bars since The purpose names are long so the layout makes it easier for us to read the labels. The length of each bar represents financial amounts so the comparison is more direct. We keep the same colors so it's easier to just go from chart A to chart B. The advantage of this chart is that it clearly answers the question of which purpose is the largest but the limitation is that it doesn't show us the commitment secured. Using only this chart we can wrongly assume that air transport was always dominant since its overall rank is first. Which is why we need to use both charts. #Limitations The limitation We select the 10 purposes based on their cumulative amounts across all years whereas a purpose outside the overall top 10 could have been particularly important during a shorter period but won't appear in the stack chart since it's too recent. Percentage mode only compares the 10 selected purposes not every purpose present in the dataset. And since the dataset is from 1973 to 2013, the first and last 5 years don't actually contain 5 years. Changes in recorded commitments do not necessarily explain why funding priorities changed.4f:T864, /* ============================================================ VISUALIZATION 3 — CELL V3-01: LOAD THE PROVIDED GEOGRAPHIC FILE I now use the geography file supplied with the assignment: countries-50m.json. I inspected this file and confirmed that its type is FeatureCollection, which means it is ALREADY GeoJSON. No TopoJSON conversion or online metadata download is needed. Each feature includes a country name (NAME) and a continent (CONTINENT). I assign a unique internal ID to each feature. This is necessary because ISO_N3 is missing/invalid for some features (including Norway), and some identifiers repeat. These internal IDs are NOT ISO country codes. ============================================================ */ const v3Sources = await (async () => { // Use the exact filename displayed in Observable's Files panel. const geojson = await FileAttachment("countries-50m.json").json(); // Fail clearly if a different format is loaded by mistake. if ( geojson?.type !== "FeatureCollection" || !Array.isArray(geojson.features) ) { throw new Error( "countries-50m.json must be a GeoJSON FeatureCollection." ); } if (geojson.features.length === 0) { throw new Error("Geographic file has no features."); } // Preserve the original geometry and properties. // id is a UNIQUE INTERNAL feature identifier, not an ISO code. const features = geojson.features.map((feature, i) => ({ ...feature, id: String(i).padStart(3, "0") })); // Check fields used later for country matching and regions. const required = ["NAME", "CONTINENT"]; const missing = required.filter( key => !(key in (features[0].properties ?? {})) ); if (missing.length) { throw new Error( "Missing geographic properties: " + missing.join(", ") ); } return {features, geojson}; })(); // Display the imported geographic file details. display({ geographicFile: "countries-50m.json", format: v3Sources.geojson.type, features: v3Sources.features.length, nameField: "NAME", continentField: "CONTINENT", usesExternalMetadata: false }); 50:T1d27, /* ============================================================ VISUALIZATION 3 — CELL V3-02: MATCH AIDDATA TO GEOJSON The CSV provides country names while the GeoJSON uses NAME for the country, so I match on normalized names. I use explicit aliases only where the two files use different names for the same place: Czech Republic -> Czechia Slovak Republic -> Slovakia United States -> United States of America Korea -> South Korea (assumption from Mini-Project 1) Region information comes directly from CONTINENT. North America and South America are merged into Americas to preserve the original chart's regional categories. IMPORTANT: numeric is retained as a property name for compatibility with V3-03 and V3-05. It is now a UNIQUE INTERNAL FEATURE ID, NOT an ISO numeric country code. ============================================================ */ const v3Match = (() => { // Normalize names by removing case differences, // accent marks, punctuation and extra spaces. const clean = value => String(value ?? "") .normalize("NFD") .replace(/[\u0300-\u036f]/g, "") .toLowerCase() .replace(/[^a-z0-9]+/g, " ") .trim(); /* ============================================================ CREATE A COUNTRY NAME LOOKUP We prioritize NAME because it identifies the actual geographic country polygon. This avoids accidentally assigning a territory to the wrong country based on its sovereign-state property. ============================================================ */ const byName = new Map(); for (const feature of v3Sources.features) { const name = clean(feature.properties?.NAME); if (name && !byName.has(name)) { byName.set(name, feature); } } // Add alternative country names only when needed. for (const feature of v3Sources.features) { const props = feature.properties ?? {}; for (const name of [ props.ADMIN, props.NAME_LONG, props.NAME_EN ]) { const normalized = clean(name); if (normalized && !byName.has(normalized)) { byName.set(normalized, feature); } } } /* ============================================================ EXPLICIT COUNTRY NAME ALIASES I inspected both supplied files to identify differences. Korea is interpreted as South Korea. This follows our Mini-Project 1 assumption and should be disclosed. ============================================================ */ const aliases = new Map([ ["czech republic", "czechia"], ["slovak republic", "slovakia"], ["united states", "united states of america"], ["korea", "south korea"] ]); /* ============================================================ CONVERT CONTINENT LABELS TO REGIONAL CATEGORIES GeoJSON separates North and South America. Our visualization combines them into Americas. The five geographic groups remain: Africa, Asia, Europe, Americas and Oceania. ============================================================ */ function regionFromContinent(continent) { if ( continent === "North America" || continent === "South America" ) { return "Americas"; } if ( ["Africa", "Asia", "Europe", "Oceania"] .includes(continent) ) { return continent; } return "Unmapped"; } /* ============================================================ MATCH EACH AIDDATA COUNTRY TO ITS GEOJSON FEATURE ============================================================ */ const countryRows = v1Annual.countries.map(country => { const originalName = clean(country); // Use an alias if the geographic file uses another name. const matchName = aliases.get(originalName) ?? originalName; // Locate the country polygon. const feature = byName.get(matchName) ?? null; const props = feature?.properties ?? {}; // Use the CONTINENT property directly from GeoJSON. const region = feature ? regionFromContinent(props.CONTINENT) : "Unmapped"; return { country, // Internal feature ID; intentionally not an ISO number. numeric: feature?.id ?? null, // Preserve ISO information for diagnostic purposes. alpha3: props.ISO_A3 !== "-99" ? (props.ISO_A3 ?? null) : (props.ADM0_A3 ?? null), isoNumeric: props.ISO_N3 ?? null, // Actual geographic country name. metadataName: props.NAME ?? null, region, // Track whether the country has a polygon. mapped: Boolean(feature), // Record whether an explicit name correction was used. usedAlias: aliases.has(originalName), problem: !feature ? "No matching GeoJSON country NAME" : region === "Unmapped" ? "Unrecognized continent" : null }; }); /* ============================================================ VERIFY THAT THE JOIN IS ONE-TO-ONE Two different AidData countries should not be assigned to the same polygon by mistake. ============================================================ */ const duplicates = d3.groups( countryRows.filter(d => d.mapped), d => d.numeric ).filter(([, rows]) => rows.length > 1); if (duplicates.length) { throw new Error( "More than one AidData country matched the same polygon: " + duplicates.map(([, rows]) => rows.map(d => d.country).join(", ") ).join("; ") ); } /* ============================================================ CREATE LOOKUP TABLES We retain the original variable names so that V3-03, V3-04, V3-05 and V3-07 remain compatible. ============================================================ */ // AidData country name -> geographic match. const matches = new Map( countryRows.map(d => [d.country, d]) ); // Internal geographic ID -> AidData country. const byNumeric = new Map( countryRows .filter(d => d.mapped) .map(d => [d.numeric, d]) ); // Internal geographic ID -> actual GeoJSON feature. const featureByNumeric = new Map( v3Sources.features.map(feature => [ feature.id, feature ]) ); return { clean, countryRows, matches, byNumeric, featureByNumeric }; })(); /* ============================================================ DISPLAY MATCHING RESULTS This checks whether every country used by the AidData visualization has been assigned to the correct map feature. ============================================================ */ display({ aidDataCountries: v1Annual.countries.length, matched: v3Match.countryRows.filter( d => d.mapped ).length, unmatched: v3Match.countryRows.filter( d => !d.mapped ).length, matchedToUnclassifiedContinent: v3Match.countryRows.filter( d => d.mapped && d.region === "Unmapped" ).length }); // Show the explicit name changes. display("Name aliases used:"); display(Inputs.table( v3Match.countryRows .filter(d => d.usedAlias) .map(d => ({ AidDataName: d.country, GeoJSONName: d.metadataName, Region: d.region })) )); // Show unresolved cases, if any. display("Unmatched or unclassified countries:"); display(Inputs.table( v3Match.countryRows .filter(d => d.problem) .map(d => ({ Country: d.country, Issue: d.problem })) )); 51:T21dd, /* ============================================================ VISUALIZATION 3 — CELL V3-05: WORLD CHOROPLETH This map now draws the supplied GeoJSON features DIRECTLY. There is no conversion from TopoJSON. V3-02 matches AidData names to unique feature IDs. V3-03 aggregates positive received commitments by those IDs. V3-04 chooses the five-year period with a slider. Darker blue = more positive received commitments. Light gray = no matched recipient record in that period. White = a recipient record exists but has zero positive USD. The monetary color scale is fixed across ALL periods so moving the slider does not change the scale's meaning. ============================================================ */ const v3WorldMap = (() => { // Get the five-year period selected with the slider. const start = v3Received.starts[v3SelectedIndex]; if (start == null) { throw new Error("No five-year period selected."); } const period = v1Periods.label(start); /* ============================================================ CHART DIMENSIONS AND MARGINS ============================================================ */ const W = 1060; const H = 615; const M = { top: 88, right: 18, bottom: 112, left: 18 }; /* ============================================================ GEOGRAPHIC PROJECTION I use the Natural Earth projection because it provides a familiar overview of the world's countries. The provided geographic file is already GeoJSON, so I pass its features directly to D3. ============================================================ */ const collection = { type: "FeatureCollection", features: v3Sources.features }; const projection = d3.geoNaturalEarth1() .fitExtent( [ [M.left, M.top], [W - M.right, H - M.bottom] ], collection ); // Convert geographic coordinates into SVG paths. const geoPath = d3.geoPath(projection); /* ============================================================ CREATE SVG ============================================================ */ const svg = d3.create("svg") .attr("viewBox", `0 0 ${W} ${H}`) .attr("role", "img") .attr( "aria-label", `Positive received commitments, ${period}` ) .style("width", "100%") .style("max-width", "1060px") .style("height", "auto") .style("display", "block") .style("background", "white") .style("font-family", "Arial, sans-serif"); /* ============================================================ FIXED MONETARY COLOR SCALE Financial aid amounts are highly skewed. I use log1p() to make smaller positive amounts easier to distinguish from very large amounts. The maximum comes from ALL periods, rather than only the selected period, so colors remain comparable. ============================================================ */ const globalMax = v3Received.maxMap; const transformedMax = Math.log1p(globalMax); const color = d3.scaleSequential(d3.interpolateBlues) .domain([0, transformedMax]); /* ============================================================ COUNTRY LOOKUP The new geographic file has unique feature IDs assigned in V3-01. V3-03 uses those IDs and the period as lookup keys. Therefore, no external ISO country dataset is needed. ============================================================ */ function getRecord(feature) { return v3Received.countryNumericPeriod.get( `${feature.id}\u0000${start}` ); } // Calculate the appropriate country color. function fill(feature) { const data = getRecord(feature); // Gray means no matched recipient record. if (!data) { return "#E2E7EC"; } // White means recorded activity but no positive receipts. if (data.positive <= 0) { return "#FFFFFF"; } // Apply the same logarithmic scale across all periods. return color(Math.log1p(data.positive)); } /* ============================================================ CHART TITLE ============================================================ */ svg.append("text") .attr("x", M.left + 15) .attr("y", 29) .attr("font-size", 23) .attr("font-weight", "bold") .attr("fill", "#223445") .text(`3A. Received financial aid by country — ${period}`); svg.append("text") .attr("x", M.left + 15) .attr("y", 53) .attr("font-size", 12.5) .attr("fill", "#637486") .text( "Positive received commitments in constant USD; " + "fixed scale across five-year periods" ); /* ============================================================ DRAW COUNTRY POLYGONS Each feature from our actual GeoJSON file is drawn using the selected geographic projection. ============================================================ */ const shapes = svg.append("g") .selectAll("path") .data(v3Sources.features) .join("path") .attr("d", geoPath) .attr("fill", fill) .attr("stroke", "#8D9AA6") .attr("stroke-width", 0.42); /* ============================================================ COUNTRY TOOLTIPS The supplied GeoJSON stores country names under NAME, not under the lowercase name property used previously. I display the original AidData country name where a matching financial record exists. I also display: - The selected period. - Positive received commitments. - Signed received commitments. - Negative adjustments. - Number of recipient records. ============================================================ */ shapes.append("title") .text(feature => { const data = getRecord(feature); const match = v3Match.byNumeric.get(feature.id); // Use the actual GeoJSON property NAME as a fallback. const name = match?.country ?? feature.properties?.NAME ?? "Unknown country"; if (!data) { return ( `${name}` + `\nPeriod: ${period}` + `\nNo matched recipient observation` ); } return ( `${name}` + `\nPeriod: ${period}` + `\nPositive received: ${v1Utils.exactMoney(data.positive)}` + `\nSigned received: ${v1Utils.exactMoney(data.signed)}` + `\nNegative adjustments: ${v1Utils.exactMoney(data.negative)}` + `\nRecipient records: ${data.count}` ); }); /* ============================================================ CONTINUOUS COLOR LEGEND Since we use a logarithmic transformation for coloring, we apply the inverse function expm1() to show actual monetary values in the legend. This allows users to interpret the colors in USD, rather than having to understand logarithmic units. ============================================================ */ const legendX = 155; const legendY = H - 76; const legendW = 735; const steps = 75; // Draw a continuous sequence of colored rectangles. svg.append("g") .selectAll("rect") .data(d3.range(steps)) .join("rect") .attr("x", i => legendX + i * legendW / steps ) .attr("y", legendY) .attr("width", legendW / steps + 0.5) .attr("height", 14) .attr("fill", i => color( (i / (steps - 1)) * transformedMax ) ); /* ============================================================ LEGEND MONETARY LABELS ============================================================ */ [0, 0.25, 0.5, 0.75, 1].forEach(fraction => { // Reverse log1p() to obtain the original dollar amount. const amount = Math.expm1( fraction * transformedMax ); svg.append("text") .attr("x", legendX + fraction * legendW) .attr("y", legendY + 32) .attr("text-anchor", "middle") .attr("font-size", 10.5) .attr("fill", "#506477") .text(v1Utils.money(amount)); }); /* ============================================================ EXPLAIN MISSING AND ZERO VALUES These two situations must remain visually distinct. A country with no records does not necessarily have zero real-world financial aid. ============================================================ */ svg.append("text") .attr("x", legendX) .attr("y", H - 13) .attr("font-size", 11) .attr("fill", "#637486") .text( "Gray = no recorded recipient observation; " + "white = recorded without positive commitments." ); return svg.node(); })(); display(v3WorldMap); 52:T224a, /* ============================================================ VISUALIZATION 3 — SECTION 3: RECIPIENT AGGREGATION In this visualization, I focus exclusively on countries that RECEIVE financial commitments. I use the cleaned AidData records from Part 1, but only look at the recipient side of each transaction. I aggregate received commitments by country and five-year period to examine geographic changes over time. I preserve three monetary measures: 1. Signed commitments, including negative adjustments. 2. Positive commitments, used for map colors and shares. 3. Negative adjustments, retained for transparency. I use the geographic matching information from V3-02 to assign each country to a continent or region. Unmatched countries are kept in an "Unmapped" category so their commitments are not silently discarded. ============================================================ */ const v3Received = (() => { // Reuse the five-year periods calculated in Part 1. const starts = v1Periods.starts; // Define the regions used for geographic comparisons. const regions = [ "Africa", "Asia", "Europe", "Americas", "Oceania", "Unmapped" ]; /* ============================================================ STEP 1: AGGREGATE RECEIVED AMOUNTS I create one entry for each country and five-year period. A Map allows me to efficiently combine multiple transactions belonging to the same country and period. ============================================================ */ const rows = new Map(); function getCountryPeriod(country, start) { const key = `${country}\u0000${start}`; if (!rows.has(key)) { rows.set(key, { country, start, signed: 0, positive: 0, negative: 0, count: 0 }); } return rows.get(key); } /* ============================================================ STEP 2: PROCESS THE TRANSACTIONS I use only transactions with a valid recipient. Each year is assigned to a five-year interval: 1973 belongs to 1970–1974, for example. The label shown to the reader will use the actual dataset coverage, such as 1973–1974. ============================================================ */ for (const transaction of v1Clean.records) { // Skip transactions without an identified recipient. if (!transaction.recipient) continue; // Calculate the starting year of the five-year interval. const start = Math.floor( transaction.year / 5 ) * 5; const cell = getCountryPeriod( transaction.recipient, start ); // Keep the original signed financial commitment. cell.signed += transaction.amount; // Positive activity is used for the choropleth colors. cell.positive += Math.max( 0, transaction.amount ); // Keep negative adjustments separately. cell.negative += Math.min( 0, transaction.amount ); // Count how many records contributed. cell.count++; } /* ============================================================ STEP 3: ATTACH GEOGRAPHIC INFORMATION V3-02 already matched AidData country names to the provided countries-50m.json file. I reuse that matching information here. Each country receives its corresponding region and unique internal map feature identifier. ============================================================ */ const all = [...rows.values()].map(d => ({ ...d, // Readable period label. label: v1Periods.label(d.start), // Country information produced in V3-02. match: v3Match.matches.get(d.country) })); /* ============================================================ STEP 4: CREATE LOOKUP TABLES The first lookup finds data by country name and period. The second lookup finds data by geographic feature ID and period, which is used for coloring the world map. The feature ID was assigned in V3-01, so we do not depend on potentially invalid numeric ISO codes. ============================================================ */ const countryPeriod = new Map( all.map(d => [ `${d.country}\u0000${d.start}`, d ]) ); const countryNumericPeriod = new Map( all .filter(d => d.match?.mapped) .map(d => [ `${d.match.numeric}\u0000${d.start}`, d ]) ); /* ============================================================ STEP 5: AGGREGATE BY REGION The geographic dataset includes continent information. I use the standardized regions created during V3-02. North and South America are combined into Americas. The Unmapped category remains available in case a country cannot be connected to geographic information. ============================================================ */ const regionPeriod = d3.rollup( all, items => ({ signed: d3.sum(items, d => d.signed), positive: d3.sum(items, d => d.positive), count: d3.sum(items, d => d.count) }), d => d.start, d => d.match?.region || "Unmapped" ); /* ============================================================ STEP 6: PREPARE REGIONAL TIME SERIES I create one row per five-year period. Each row stores the amount received by every region. These values will be used for the 100% stacked area chart showing how the regional distribution changes. ============================================================ */ const periodRows = starts.map(start => { const row = { start, label: v1Periods.label(start) }; // Retrieve positive commitments for each region. for (const region of regions) { row[region] = regionPeriod.get(start)?.get(region)?.positive ?? 0; } // Calculate total positive received commitments. row.total = d3.sum( regions, region => row[region] ); // Preserve the signed total for numerical validation. row.signed = d3.sum( all.filter(d => d.start === start), d => d.signed ); return row; }); /* ============================================================ STEP 7: DEFINE A FIXED GLOBAL MAXIMUM I calculate the largest positive received amount across ALL countries and ALL five-year periods. This is important because the world map must use the same color scale even when the slider changes. Otherwise, the same shade of blue could represent different monetary amounts in different periods. ============================================================ */ const maxMap = Math.max( 1, d3.max( all.filter(d => d.match?.mapped), d => d.positive ) ?? 0 ); /* ============================================================ STEP 8: DETERMINE ACTIVE REGIONS If every country is successfully matched, the Unmapped category has no positive commitments and does not need to appear in the regional chart's legend. ============================================================ */ const activeRegions = regions.filter(region => region !== "Unmapped" || d3.sum( periodRows, d => d.Unmapped ) > 0 ); /* ============================================================ STEP 9: DEFINE CONSISTENT REGIONAL COLORS Each geographic region keeps the same color across the entire historical period. ============================================================ */ const palette = d3.scaleOrdinal() .domain(regions) .range([ "#C76A51", // Africa "#5F76B4", // Asia "#8A6EB0", // Europe "#2A917F", // Americas "#D2A349", // Oceania "#86929E" // Unmapped ]); /* ============================================================ RETURN THE DATA FOR LATER CELLS V3-04 uses starts. V3-05 uses countryNumericPeriod and maxMap. V3-06 uses periodRows, activeRegions and palette. V3-07 uses all and periodRows for validation. ============================================================ */ return { starts, all, countryPeriod, countryNumericPeriod, regionPeriod, periodRows, regions, activeRegions, maxMap, palette }; })(); /* ============================================================ DISPLAY THE AGGREGATION SUMMARY ============================================================ */ display({ fiveYearPeriods: v3Received.starts.length, recipientCountryPeriodPairs: v3Received.all.length, fixedMapColorMaximum: v1Utils.money(v3Received.maxMap), geographicRegions: v3Received.activeRegions }); 53:T1b90, /* ============================================================ VISUALIZATION 3 — CHART B: REGIONAL PERCENTAGE CHART The world map shows WHERE countries receive commitments. However, it is difficult to compare entire regions just by looking at the colors of individual countries. I therefore create a normalized stacked area chart showing the percentage of positive received commitments allocated to each geographic region over time. The main regions are: - Africa - Asia - Europe - Americas - Oceania If some recipients cannot be mapped, their commitments are included in a separate "Unmapped" category. This ensures that the percentage denominator includes all recorded positive received commitments. These percentages show historical funding allocation, not direct measurements of humanitarian need. ============================================================ */ const v3RegionalChart = (() => { const W = 1030; const H = 555; const M = { top: 85, right: 28, bottom: 155, left: 94 }; // Use the regions produced during preprocessing. const regions = v3Received.activeRegions; // Each row represents one five-year period. const rows = v3Received.periodRows; // D3 stacks the regional values into cumulative layers. // // stackOffsetExpand normalizes the sum to 100%, // allowing comparison of relative regional shares. const layers = d3.stack() .keys(regions) .offset(d3.stackOffsetExpand)(rows); // The X-axis represents the starting year of each period. const x = d3.scaleLinear() .domain(d3.extent(rows, d => d.start)) .range([M.left, W - M.right]); // The normalized Y-axis always ranges from 0 to 100%. const y = d3.scaleLinear() .domain([0, 1]) .range([H - M.bottom, M.top]); const svg = d3.create("svg") .attr("viewBox", `0 0 ${W} ${H}`) .attr("role", "img") .attr( "aria-label", "Regional distribution of received aid over time" ) .style("width", "100%") .style("height", "auto") .style("max-width", "1030px") .style("font-family", "Arial, sans-serif") .style("background", "white"); // Chart title and explanation. svg.append("text") .attr("x", M.left) .attr("y", 30) .attr("font-size", 23) .attr("font-weight", "bold") .attr("fill", "#203445") .text("3B. Geographic distribution of received aid over time"); svg.append("text") .attr("x", M.left) .attr("y", 53) .attr("font-size", 12.5) .attr("fill", "#637486") .text( "Regional shares of positive received commitments " + "during five-year periods" ); // Draw the percentage Y-axis. svg.append("g") .attr("transform", `translate(${M.left},0)`) .call( d3.axisLeft(y) .ticks(5) .tickFormat(d3.format(".0%")) ) .call(g => g.selectAll(".tick line") .clone() .attr("x2", W - M.left - M.right) .attr("stroke", "#E8EDF1") ); // Label the X-axis with actual period ranges. // Rotate the labels to avoid overlap. svg.append("g") .attr("transform", `translate(0,${H - M.bottom})`) .call( d3.axisBottom(x) .tickValues(rows.map(d => d.start)) .tickFormat(d => v1Periods.label(d)) ) .selectAll("text") .attr("transform", "rotate(-32)") .style("text-anchor", "end") .attr("font-size", 10.5); // Generate the geographic area shapes. // // I avoid smoothing because it could imply that // intermediate periods were actually observed. const area = d3.area() .defined(d => d.data.total > 0) .x(d => x(d.data.start)) .y0(d => y(d[0])) .y1(d => y(d[1])) .curve(d3.curveLinear); // Draw one colored area for every region. svg.selectAll(".region-area") .data(layers) .join("path") .attr("class", "region-area") .attr("d", area) .attr("fill", d => v3Received.palette(d.key)) .attr("stroke", "white") .attr("stroke-width", 0.7) .append("title") .text(d => d.key); /* ============================================================ LEGEND Consistent region colors make it easier to follow each geographic area across the historical periods. ============================================================ */ regions.forEach((region, i) => { const gx = M.left + (i % 3) * 300; const gy = H - 66 + Math.floor(i / 3) * 26; svg.append("rect") .attr("x", gx) .attr("y", gy - 11) .attr("width", 14) .attr("height", 14) .attr("rx", 2) .attr("fill", v3Received.palette(region)); svg.append("text") .attr("x", gx + 21) .attr("y", gy) .attr("font-size", 12) .attr("fill", "#344859") .text(region); }); /* ============================================================ INTERACTIVE HOVER When the user hovers over a time period, we show the exact share and positive financial amount received by each region during that interval. ============================================================ */ // Vertical reference line highlights the selected period. const marker = svg.append("line") .attr("y1", M.top) .attr("y2", H - M.bottom) .attr("stroke", "#47596E") .attr("stroke-dasharray", "3,3") .attr("opacity", 0); // Create a transparent hover area for every period. const hover = svg.append("g") .selectAll("rect") .data(rows) .join("rect") .attr("x", (d, i) => { // Each hover region begins halfway between // the current period and the previous one. if (i === 0) return x(d.start); return ( x(d.start) + x(rows[i - 1].start) ) / 2; }) .attr("width", (d, i) => { const left = i === 0 ? x(d.start) : ( x(d.start) + x(rows[i - 1].start) ) / 2; const right = i === rows.length - 1 ? x(d.start) : ( x(d.start) + x(rows[i + 1].start) ) / 2; return Math.max(2, right - left); }) .attr("y", M.top) .attr("height", H - M.top - M.bottom) .attr("fill", "transparent") .style("cursor", "crosshair"); // Highlight the period on mouse movement. hover .on("pointerenter pointermove", (event, d) => { marker .attr("x1", x(d.start)) .attr("x2", x(d.start)) .attr("opacity", 1); }) .on("pointerleave", () => marker.attr("opacity", 0) ); // Browser tooltip with exact regional amounts. hover.append("title") .text(d => { const lines = regions.map(region => { const share = d.total > 0 ? d3.format(".1%")(d[region] / d.total) : "N/A"; return ( `\n${region}: ${share}` + ` (${v1Utils.money(d[region])})` ); }); return ( `${d.label}` + `\nTotal positive receipts: ${v1Utils.money(d.total)}` + lines.join("") ); }); return svg.node(); })(); display(v3RegionalChart); 54:T11e8, /* ============================================================ VISUALIZATION 3 — SECTION 7: FINANCIAL VALIDATION I validate that the financial amounts used in the geographic visualizations agree with the original recipient transactions. I also calculate which regions and countries received the largest positive commitments during each period. These tables will allow me to provide exact geographic findings in the written discussion. I explicitly report unmatched countries and their financial amounts rather than hiding them. ============================================================ */ const v3Validation = (() => { // Select only transactions with an identified recipient. const source = v1Clean.records.filter(d => d.recipient ); // Total signed received commitments in the original data. const signedRaw = d3.sum( source, d => d.amount ); // Positive commitments, excluding negative adjustments. const positiveRaw = d3.sum( source, d => Math.max(0, d.amount) ); // Compare those amounts with the country-period aggregation. const signedGrouped = d3.sum( v3Received.all, d => d.signed ); const positiveGrouped = d3.sum( v3Received.all, d => d.positive ); // Check the total used in the regional stacked area. const regionalPositive = d3.sum( v3Received.periodRows, d => d.total ); // Floating-point allowance for reordering many sums. const tolerance = Math.max( 0.01, 1e-9 * d3.sum( source, d => Math.abs(d.amount) ) ); // Three independent reconciliation comparisons. const checks = [ { Check: "Signed received commitments", Difference: Math.abs(signedRaw - signedGrouped) }, { Check: "Positive received commitments", Difference: Math.abs(positiveRaw - positiveGrouped) }, { Check: "Regional positive commitments", Difference: Math.abs(positiveRaw - regionalPositive) } ].map(d => ({ ...d, Tolerance: tolerance, Passed: d.Difference <= tolerance })); // Stop if any financial totals do not reconcile. if (checks.some(d => !d.Passed)) { throw new Error( "Geographic recipient totals do not reconcile." ); } return checks; })(); display("A. Geographic aggregation validation:"); display(Inputs.table(v3Validation)); /* ============================================================ FIND THE LEADING REGION AND RECIPIENT IN EACH PERIOD ============================================================ */ const v3RegionalEvidence = v3Received.periodRows.map(row => { // Rank regions by positive received commitments. const ranked = [...v3Received.activeRegions] .sort((a, b) => row[b] - row[a]); const leading = ranked[0]; // Find the largest mapped recipient during this period. const countries = v3Received.all .filter(d => d.start === row.start && d.match?.mapped ) .sort((a, b) => b.positive - a.positive); return { Period: row.label, LargestRegion: row.total > 0 ? leading : "No observed positive activity", RegionShare: row.total > 0 ? d3.format(".1%")(row[leading] / row.total) : "N/A", LeadingMappedRecipient: countries[0]?.country || "N/A", CountryPositiveReceipts: v1Utils.money(countries[0]?.positive || 0), UnmappedShare: row.total > 0 ? d3.format(".1%")(row.Unmapped / row.total) : "N/A" }; }); display("B. Leading geographic regions by period:"); display(Inputs.table(v3RegionalEvidence)); /* ============================================================ REPORT COUNTRIES NOT DISPLAYED ON THE MAP This is important because a country without a polygon may still have financial commitments in the CSV. ============================================================ */ const v3UnmatchedEvidence = v3Match.countryRows .filter(d => !d.mapped) .map(country => { // Get all recipient commitments for this country. const entries = v3Received.all.filter( d => d.country === country.country ); return { Country: country.country, Reason: country.problem, IncomingSigned: v1Utils.money( d3.sum(entries, d => d.signed) ), IncomingPositive: v1Utils.money( d3.sum(entries, d => d.positive) ), Records: d3.sum( entries, d => d.count ) }; }); display("C. Unmatched countries and their commitments:"); display(Inputs.table(v3UnmatchedEvidence)); 55:T7af, /* ============================================================ VISUALIZATION 3 — FINAL VERIFICATION After replacing the geographic dataset, I want to verify that the new map still represents the same financial data. I check: 1. That the correct GeoJSON file is loaded. 2. That the AidData countries are matched. 3. That country-period IDs refer to actual map features. 4. That the financial reconciliation checks still pass. This prevents a missing geographic match from silently excluding financial commitments from our visualization. ============================================================ */ const v3ReplacementCheck = (() => { // Total AidData country/entity names. const countries = v1Annual.countries.length; // Countries successfully connected to geographic features. const matched = v3Match.countryRows.filter( d => d.mapped ).length; const unmatched = v3Match.countryRows.filter( d => !d.mapped ); // Verify every mapped country-period references a valid // feature from our uploaded GeoJSON file. const missingFeatureKeys = v3Received.all.filter(d => d.match?.mapped && !v3Match.featureByNumeric.has(d.match.numeric) ); // Reuse the monetary checks performed in V3-07. const failedMoneyChecks = v3Validation.filter( d => !d.Passed ); // Stop if a mismatch is detected. if ( unmatched.length || missingFeatureKeys.length || failedMoneyChecks.length ) { throw new Error( "Check country matching and financial reconciliation " + "before submission." ); } return { geometryFormat: v3Sources.geojson.type, geographicFeatures: v3Sources.features.length, aidDataCountryLabels: countries, matchedCountries: matched, unmatchedCountries: unmatched.length, unmatchedAggregationKeys: missingFeatureKeys.length, failedFinancialChecks: failedMoneyChecks.length }; })(); display(v3ReplacementCheck); 56:T2095,Here I use a dataset, a data CSV, and the countries-50m.json geographic file. The geo file contains 241 features with country names and continent information. I match the country's name from a data file with a geographic dataset using a few name corrections whenever necessary. After preprocessing we get 47 countries that were successfully matched. I grouped the Received commitments into 5-year periods again I calculate positive received commitments separately from signed amounts. I used positive amounts for the map colors and regional percentage while keeping negative adjustments in the original totals for validation. I grouped each country into its respective continent For better regional comparison. 1. How does distribution change over time: Asia received the largest share of positive financial commitments throughout the dataset Yet the percentage allocated to Asia changed drastically. In the year 1973-1974 Asia represented 85.2% of the total positive received commitment Which then increased to 90.4% during Years 1975 to 1979 The commitments in the earlier periods were strongly concentrated in Asian recipient countries, India has the largest individual reception during every 5-year period in the dataset, which explains Asia's dominance. However the geographic distribution becomes less concentrated in Asia in the later years. During 1990-1994 Asia's share decreased to 53.4% while Europe's share reached approx. 28.3%, During this year Poland is an important cause of this, receiving around 13.34 billion in positive received commitments during the years 1990 to 1994. Therefore although Asia stayed the largest recipient region, Europe represented a much larger proportion of recorded commitments during that specific period. In the period 2000-2004 Asia's share decreased to 46.1%, its lowest share across all nine periods. During that interval During 2000–2004, Asia's share decreased to 46.1%, its lowest share across the nine periods. During the same interval, the Americas represented approximately 28.7% of positive received commitments, Europe 15.4%, and Africa 8.1%. This shows that although Asia remained the largest individual recipient region, the geographic distribution of financial commitments had become less concentrated in Asia than in earlier periods. Therefore although Asia stayed the largest individual region, we can see a decrease throughout the periods. 2. Do commitments stay in the same region or shift over time? From the results we see a pattern occur. Regions remain important throughout the dataset but their relative shares change over time. Asia stayed leading but its percentage did not stay consistent. It increased then decreased. For example it increased again from 46.1 during 2002-2004 to 62.7 during 2005-2009, then decreased to 56.9% during 2010-2013. This is again largely due to India receiving large amounts during these periods, such as 21.62 billion during the 2005-2009 period and 17 billion during the 2010-2013 period. The Americas represented only 9.6% of the positive received commitments during 1975-1979. Around 2000 to 2004, the percentage increased to 28.7% and reached 30.1% during 2010 to 2013, which is the last period recorded in the dataset. Countries like Brazil and Colombia illustrate this increase, Brazil received around 5.52 billion during 2010-2013. Africa also increased from 1.2% during 1985 to 1989, to 8.1% during 2000 to 2004, to 13.2% during 2005 to 2009. In Europe We had around 28.3% of the shares during 1990-1994 but it recorded a much smaller share in the future periods and was around zero during two of the last intervals. This shows a limitation in the dataset, as European countries didn't stop receiving financial assistance but we do not see them in our dataset. Therefore the distribution of received commitments was not geographically constant. Asia remained the leading region but the increase in shares of America and Africa shows that the relative distribution changed considerably over time. #Interpretation of chart A I used a choropleth world map since our question focused on geographic changes and the map allows the user to see directly where recipient countries are located. I used country boundaries from the dataset on a Natural Earth projection to display the world. Each country is shaded according to the amount of positive financial commitments it received during the selected period. Dark blue represents large positive received commitments, Whereas lighter blue indicates smaller amounts. Like previous charts I've used gray for countries without a match recipient observation during that selected period and white for recorded observation with no positive commitment amounts. I added a 5-year slider so users can move between periods and see different geographic distribution changes. They can select 1994 and see the large amounts received by India and Poland or 2005 to 2009 and see the different distribution of commitments among countries like India, Colombia, or even South Africa. The same color scale is used across all the periods so the shades of blue represent the same monetary amount. Since the financial amounts vary significantly, I applied a logarithmic transformation to color intensity so smaller values are easier to distinguish without larger recipients dominating the entire map visually. I also added hover information displaying the country, period, positive received amount, signed amount, and number of records as done in every other chart. The advantage of this chart is that it makes the geographic location of financial commitments directly visible to users. But comparing entire regions is not always easy to do on a world map as large countries occupy more visual space than smaller countries, although they receive less might money. #Interpretation of chart B For chart B I made a 100% stacked area chart, which compares how the regional shares of positive received commitment changed over time. This chart groups the countries by geographic region. Each colored area represents one region and the combined height of all regions will always be equal to 100%. I chose the visualization since I wanted to make the shifts in relative importance easier to compare than when we do it on the world map. It's easier to see Asia's share decrease from 90.4% during 1975-1979 to 46.1% during 2000-2004. Furthermore it also amplifies the increases in the Americas and Africa in the later periods visually. I added consistent colors for each region in the chart and hover information displaying the exact percentage and positive monetary amount. The advantage of this chart is that users can compare the evolution of regional shares in one view without needing to change the selected period. But this graph is normalized to 100% so it doesn't directly show the total amount received during each period. A Regions' percentage can decrease even if its actual monetary commitments increase, simply because other regions received larger increases. Another limitation of this graph is that the regional chart hides differences between individual countries. For example India's large commitments contribute significantly to Asia's share but it is not directly visible from the regional area alone. I think we need both charts: the map to show where the commitments go and the stacked area chart to show how their geographic proportions changed over time. # Limitations As mentioned previously the dataset is records of final financial commitments and not actual disbursements. That is one limitation. Furthermore the dataset is reduced to cover only 1973 to 2013. And the amount received doesn't directly measure a country's need for assistance. Some countries may receive larger commitments because of funding priorities, financing agreements, or other factors that are not represented in our dataset. The map uses absolute monetary amounts rather than amounts adjusted for population or GDP so the colors represent the volume of recorded commitments and not how much assistance a country received relative to its population or economic size. And the 5-year aggregation makes the geographic patterns easier to compare but it hides changes which occur during the individual years. Finally the first and last intervals also cover fewer years than the other ones, making it a little less accurate.57:T407,# AI Disclosure Ai- disclosure: I used Ai to help me throughout the assignment. It helped me fix code, format, and clean the dataset. And for completion check (checking i answered everything and did not forget to answer a specific question). I used ChatGPT to help generate the JavaScript/D3 code for the three visualizations, including data preprocessing and the geographic maps. Since AI use was permitted for this assignment, I chose to use it because I believed it would help me produce cleaner code, better visualizations, and more accurate geographic representations. I reviewed the generated code, made adjustments where necessary,added notes explaining what the code does (I read through each line understanding what it does and didn' t blindly copy paste) and examined the resulting visualizations to make sure they addressed the assignment questions. The analysis, interpretation of the results, and discussion of the visualization choices are my own. AI was used to help with coding efficiency and data preprocessing.58:[{"id":"09040dddbda03374a466600047ccbc70c46e6853884eb725db2141c566ca1b78fb7cc935096e8d5468c21e8df215e73fc49cdaaf7e2f1f89139793da25be02b2","href":"https://static.observableusercontent.com/files/09040dddbda03374a466600047ccbc70c46e6853884eb725db2141c566ca1b78fb7cc935096e8d5468c21e8df215e73fc49cdaaf7e2f1f89139793da25be02b2","name":"aiddata-countries-only - aiddata-countries-only.csv","type":"text/csv","lastModified":1794467700886,"size":8760387},{"id":"55260abbc777c0a3b8fed19f3929dd822fef9d5118b53b76b2176d20782910e599eac919999ea8ee85a60b783fd37082574f6591fd46c0d70ddf9b00df71ce27","href":"https://static.observableusercontent.com/files/55260abbc777c0a3b8fed19f3929dd822fef9d5118b53b76b2176d20782910e599eac919999ea8ee85a60b783fd37082574f6591fd46c0d70ddf9b00df71ce27","name":"countries-50m.json","type":"application/json","lastModified":1794473326143,"size":4177662}] 38:{"id":"576b2ee4a474ac32","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-10T04:16:54.071Z","update_time":"$D2026-11-12T12:10:15.972Z","view_time":null,"first_public_time":"$D2026-11-12T12:12:19.096Z","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":"85059ad626ed3d01","login":"najim-rhalmi","name":"Najim Rhalmi","avatar_url":"https://avatars-next.observableusercontent.com/319ab4b6f628b94b79607cee456ea6c770361d60152dae9fab2c4950cc360fb3","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":426,"publish_version":426,"role":null,"authored":false,"authors":[{"type":"individual","id":"4bfe50431c572ac9","login":"najim-rhalmi","name":"Najim Rhalmi","avatar_url":"https://avatars-next.observableusercontent.com/319ab4b6f628b94b79607cee456ea6c770361d60152dae9fab2c4950cc360fb3","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"85059ad626ed3d01","login":"najim-rhalmi","name":"Najim Rhalmi","avatar_url":"https://avatars-next.observableusercontent.com/319ab4b6f628b94b79607cee456ea6c770361d60152dae9fab2c4950cc360fb3","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":"#Part 1","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"\n/* ============================================================\n SECTION 1: IMPORT THE DATASET\n\n We import our AidData CSV file from Observable.\n\n I first display the number of transactions and the\n column names to check that the file loaded correctly.\n============================================================ */\n\nconst v1Raw = await FileAttachment(\"aiddata-countries-only - aiddata-countries-only.csv\")\n .csv({typed: false});\n\n// Check that the file is not empty.\nif (v1Raw.length === 0) {\n throw new Error(\"The CSV file contains no records.\");\n}\n\n// Display how many transactions are in the dataset.\ndisplay(`Total records: ${v1Raw.length.toLocaleString()}`);\n\n// Display the column names so we can verify their structure.\ndisplay(Object.keys(v1Raw[0]));\n\n// Display the first 8 transactions to inspect the data.\ndisplay(Inputs.table(v1Raw.slice(0, 8)));\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"$3f","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"$40","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"$41","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"$42","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"$43","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"$44","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"$45","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"\n/* ============================================================\n CHART B — COMBINED INTERACTIVE CONTROLS\n\n I group the country selector and Y-axis scale control\n in one place to make the chart easier to use.\n\n Both settings are combined using Inputs.form().\n============================================================ */\n\nconst v1ChartControls = view(\n Inputs.form({\n\n // Select one country from the dataset.\n country: Inputs.select(\n v1Annual.countries,\n {\n label: \"Choose a country\",\n value: [...v1Periods.countryTotals]\n .sort((a, b) =>\n b.positiveActivity - a.positiveActivity\n )[0].country\n }\n ),\n\n // Select how monetary values are displayed.\n scale: Inputs.radio(\n [\"Linear\", \"Symmetric logarithmic\"],\n {\n label: \"Y-axis scale\",\n value: \"Linear\"\n }\n )\n\n })\n);\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"$46","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"$47","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"# Observations\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"$48","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"## Visualization 2","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"$49","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"$4a","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"\n/* ============================================================\n VISUALIZATION 2 — SECTION 3: CHART MODE SELECTOR\n\n I want to examine two different questions:\n\n 1. How much money was committed to each purpose over time?\n 2. How important was each purpose compared to the other\n top-ten purposes during the same year?\n\n A stacked area chart in absolute USD answers the first.\n A normalized 100% stacked area chart answers the second.\n\n I use an Observable input so the user can switch between\n both views without requiring separate charts.\n============================================================ */\n\nconst v2Mode = view(\n Inputs.radio(\n [\"Absolute USD\", \"Percentage of top 10\"],\n {\n label: \"Choose how to compare aid purposes\",\n value: \"Absolute USD\"\n }\n )\n);\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"$4b","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"$4c","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"$4d","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"## Explanation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"$4e","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"## Visualization 3","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"$4f","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"$50","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"\n/* ============================================================\n VISUALIZATION 3 — SECTION 4: TIME SLIDER\n\n I add a slider that allows the user to explore how\n received financial commitments shift geographically.\n\n Each slider position corresponds to one five-year period.\n\n Observable automatically re-evaluates the dependent map\n cell whenever the selected period changes.\n============================================================ */\n\nconst v3SelectedIndex = view(\n Inputs.range(\n [0, v3Received.starts.length - 1],\n {\n step: 1,\n\n // Start near the middle of the historical dataset.\n value: Math.min(\n 4,\n v3Received.starts.length - 1\n ),\n\n label: \"Select a five-year period\"\n }\n )\n);\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"$51","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"$52","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"$53","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"$54","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"$55","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"# Explanations","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"$56","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"$57","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W58","stdlib":"2"}} 33:null