34:["$","title",null,{"children":"Mini-Project 1: Geographic Financial Aid (Due Oct. 29th) | Harshith Kori Raj | Observable"}] 3c:Ta99,

[NOTE]

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

1. Please **fork this notebook** for this mini-project. Ensure that the notebook is made either _public_ or _unlisted_ in the settings. 2. Complete each question to the best of your ability, clearly marking which visualization and/or written answer corresponds to which question asked. 3. Your coded solutions **must use D3**. Other visualization libraries (.e.g Vega-Lite) or other code languages (e.g. Python) are not allowed. - You are allowed to use functions and modules created by other creators. For example, you can use Mike Bostock's Color Legend notebook to create your legends. 4. You are free to modify any datasets mentioned in this project, or introduce new datasets if it helps you with any explanations or visualizations. For datasets originating from this dataset, you are free to modify them in any way as long as 1) the preprocessing is performed here in JavaScript, or 2) you preprocessed the dataset elsewhere (e.g. a Python notebook or Google Colab notebook via Python). - If you modified the dataset elsewhere, **please make sure to explicitly mention in your write-up where and how to access the code; preprocessing the dataset without a way for us to verify will lead to penalties on your score**. - If you are introducing a new dataset from elsewhere, **please make sure to explicitly mention how to access the dataset**. 5. Please adhere to our AI policy for the class, which is provided on our course syllabus: > _... you can use generative AI tools to do the assignments in this class. If you use an AI to guide you in completing an assignment, you must **disclose which parts were generated by the AI**. Remember that you are responsible for any errors or inaccuracies in AI-generated content, and you must be able to explain all submitted work._ 6. Submit the URL of this notebook on Brightspace by the listed due date. ### Submission Details This assignment is due **Oct. 29th @ 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:T698,Your goal is to create **3 independent visualizations of the same dataset**, 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]:** How do the countries compare in terms of how much they receive and donate? Are there countries that donate much more than they receive or receive much more than they donate? - **Visualization #2 [25pts]:** Do the countries that mostly receive or mostly donate tend to cluster around specific geographical areas of the world? Are there neighboring countries that have radically different patterns in terms of how much they receive vs. how much they donate? - **Visualization #3 [25pts]:** Are there any major differences in how the top 5 most frequent purposes of disbursements (across all countries) distribute geographically in terms of countries that receive donations? Are there countries that tend to receive more of certain types of donations than others?

[NOTE]

It is okay to submit more than one solution, plot, etc. 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:T87fb,const aid_project = await (async () => { const studentName = "Harshith Kori Raj"; const studentNetID = "hk4488"; const sheetUrl = "https://docs.google.com/spreadsheets/d/1YiuHdfZv_JZ-igOemKJMRaU8dkucfmHxOP6Od3FraW8/"; const csvUrl = "https://docs.google.com/spreadsheets/d/1YiuHdfZv_JZ-igOemKJMRaU8dkucfmHxOP6Od3FraW8/gviz/tq?tqx=out:csv&gid=1124214599"; const worldUrl = "https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json"; const topoUrl = "https://cdn.jsdelivr.net/npm/topojson-client@3/+esm"; const [rawRows, world, topojson] = await Promise.all([ d3.csv(csvUrl, d3.autoType), d3.json(worldUrl), import(topoUrl) ]); const expectedColumns = [ "aiddata_id", "aiddata_2_id", "year", "donor", "recipient", "commitment_amount_usd_constant", "coalesced_purpose_code", "coalesced_purpose_name" ]; const missingColumns = expectedColumns.filter(column => !rawRows.columns.includes(column)); if (missingColumns.length) throw new Error(`Missing AidData columns: ${missingColumns.join(", ")}`); const rows = rawRows .map(d => { const rawAmount = d.commitment_amount_usd_constant; const hasAmount = rawAmount !== null && rawAmount !== undefined && String(rawAmount).trim() !== ""; return { donor: String(d.donor ?? "").trim(), recipient: String(d.recipient ?? "").trim(), purpose: String(d.coalesced_purpose_name ?? "").trim(), amount: hasAmount ? Number(rawAmount) : NaN, year: Number(d.year) }; }) .filter(d => d.donor && d.recipient && d.purpose && Number.isFinite(d.amount)); if (!rows.length) throw new Error("No valid AidData rows were available after parsing."); const donated = d3.rollup(rows, values => d3.sum(values, d => d.amount), d => d.donor); const received = d3.rollup(rows, values => d3.sum(values, d => d.amount), d => d.recipient); const countryNames = Array.from(new Set([...donated.keys(), ...received.keys()])).sort(d3.ascending); const countryStats = countryNames.map(country => { const donatedAmount = donated.get(country) || 0; const receivedAmount = received.get(country) || 0; const activity = donatedAmount + receivedAmount; return { country, donated: donatedAmount, received: receivedAmount, net: receivedAmount - donatedAmount, activity, balance: activity ? (receivedAmount - donatedAmount) / activity : 0 }; }); const purposeFrequency = d3.rollups(rows, values => values.length, d => d.purpose) .sort((a, b) => d3.descending(a[1], b[1])); const topPurposes = purposeFrequency.slice(0, 5).map(([purpose, count], index) => ({purpose, count, index})); if (topPurposes.length !== 5) throw new Error(`Expected five aid purposes, found ${topPurposes.length}.`); const topPurposeSet = new Set(topPurposes.map(d => d.purpose)); const purposeByCountry = d3.rollup( rows.filter(d => topPurposeSet.has(d.purpose)), values => d3.sum(values, d => d.amount), d => d.purpose, d => d.recipient ); const cleanKey = value => String(value ?? "") .normalize("NFD") .replace(/[\u0300-\u036f]/g, "") .toLowerCase() .replace(/&/g, "and") .replace(/[^a-z0-9]+/g, " ") .trim(); const aliases = new Map(Object.entries({ "united states": "united states of america", "korea": "south korea", "czech republic": "czechia", "slovak republic": "slovakia", "democratic republic of the congo": "dem rep congo", "congo democratic republic": "dem rep congo", "dominican republic": "dominican rep", "central african republic": "central african rep", "equatorial guinea": "eq guinea", "bosnia and herzegovina": "bosnia and herz", "south sudan": "s sudan", "solomon islands": "solomon is", "russian federation": "russia", "viet nam": "vietnam", "lao peoples democratic republic": "laos", "syrian arab republic": "syria", "iran islamic republic of": "iran", "moldova republic of": "moldova", "tanzania united republic of": "tanzania", "bolivia plurinational state of": "bolivia", "venezuela bolivarian republic of": "venezuela", "swaziland": "eswatini", "cape verde": "cabo verde", "timor leste": "timor leste" })); const canonicalKey = value => aliases.get(cleanKey(value)) || cleanKey(value); const countryStatsByKey = new Map(countryStats.map(d => [canonicalKey(d.country), d])); const featureCollection = topojson.feature(world, world.objects.countries); const worldFeatures = featureCollection.features; const displayFeatures = worldFeatures.filter(d => d.properties?.name !== "Antarctica"); const statForFeature = feature => countryStatsByKey.get(canonicalKey(feature.properties?.name)); const mappedCountryKeys = new Set(displayFeatures.filter(statForFeature).map(d => canonicalKey(d.properties.name))); const unmatchedCountries = countryStats.map(d => d.country).filter(name => !mappedCountryKeys.has(canonicalKey(name))); const formatMoney = value => { const abs = Math.abs(value); const sign = value < 0 ? "−" : ""; if (abs >= 1e9) return `${sign}$${d3.format(".2~f")(abs / 1e9)}B`; if (abs >= 1e6) return `${sign}$${d3.format(".2~f")(abs / 1e6)}M`; if (abs >= 1e3) return `${sign}$${d3.format(".2~f")(abs / 1e3)}K`; return `${sign}$${d3.format(",.0f")(abs)}`; }; const formatAxisMoney = value => { if (value >= 1e9) return `$${d3.format(".0f")(value / 1e9)}B`; if (value >= 1e6) return `$${d3.format(".0f")(value / 1e6)}M`; if (value >= 1e3) return `$${d3.format(".0f")(value / 1e3)}K`; return `$${d3.format(".0f")(value)}`; }; const formatBalance = d3.format("+.0%"); const balanceLabel = value => value > 0.15 ? "recipient-heavy" : value < -0.15 ? "donor-heavy" : "relatively balanced"; const balanceColor = d3.scaleDiverging([-1, 0, 1], d3.interpolateRdBu); const noDataColor = "#d7d9de"; const ink = "#172033"; const muted = "#5d687b"; const grid = "#d9dee8"; const accent = "#334e8a"; const root = document.createElement("main"); root.className = "aid-project"; root.dataset.rawRows = rawRows.length; root.dataset.usableRows = rows.length; root.dataset.countryCount = countryStats.length; root.dataset.mappedCountries = mappedCountryKeys.size; root.dataset.purposeCount = topPurposes.length; root.innerHTML = ` `; const page = d3.select(root); const header = page.append("header").attr("class", "section").style("border-top", "0").style("padding-top", "8px"); header.append("div").attr("class", "eyebrow").text("2026 Information Visualization · Mini-Project 1"); header.append("h1").text("Geographic Financial Aid"); header.append("p").attr("class", "dek").text("Three coordinated D3 views compare countries as donors and recipients, reveal geographic balance patterns, and trace the five most frequent aid purposes across recipient countries."); header.append("div").attr("class", "identity").html(`Student: ${studentName}NetID: ${studentNetID}D3 + JavaScript only`); const auditSection = page.append("section").attr("class", "section data-audit"); auditSection.append("div").attr("class", "eyebrow").text("Methodology and validation"); auditSection.append("h2").text("Data audit"); auditSection.append("p").text("All preprocessing is performed in this notebook with JavaScript. Commitment amounts are parsed as numbers; rows are retained when donor, recipient, purpose, and a finite signed amount are present. Signed negative adjustments are preserved rather than silently discarded. Country-level totals sum commitments across all years in the provided reduced dataset."); const metrics = [ [d3.format(",")(rawRows.length), "source rows"], [d3.format(",")(rows.length), "usable rows"], [countryStats.length, "countries in AidData"], [mappedCountryKeys.size, "countries mapped"], [topPurposes.length, "top purposes"], [unmatchedCountries.length, "unmatched map names"] ]; auditSection.append("div").attr("class", "audit").selectAll("div.metric").data(metrics).join("div").attr("class", "metric").html(d => `${d[0]}${d[1]}`); auditSection.append("p").attr("class", unmatchedCountries.length ? "warning" : null).html(`Map-join audit: ${unmatchedCountries.length ? `The 110m world map omits or cannot match ${unmatchedCountries.join(", ")}; those small states remain absent from the geographic views but stay in the country comparison.` : "Every AidData country matched a world feature."}`); const drawBalanceLegend = (svg, {x, y, width, id}) => { const defs = svg.append("defs"); const gradient = defs.append("linearGradient").attr("id", id).attr("x1", "0%").attr("x2", "100%"); d3.range(0, 1.0001, 0.1).forEach(t => gradient.append("stop").attr("offset", `${t * 100}%`).attr("stop-color", balanceColor(-1 + 2 * t))); const g = svg.append("g").attr("class", "balance-legend").attr("transform", `translate(${x},${y})`); g.append("rect").attr("width", width).attr("height", 12).attr("rx", 6).attr("fill", `url(#${id})`); g.append("text").attr("x", 0).attr("y", 30).attr("font-size", 11).attr("fill", muted).text("donor-heavy"); g.append("text").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("font-size", 11).attr("fill", muted).text("balanced"); g.append("text").attr("x", width).attr("y", 30).attr("text-anchor", "end").attr("font-size", 11).attr("fill", muted).text("recipient-heavy"); return g; }; const donorLeaders = countryStats.slice().sort((a, b) => d3.ascending(a.net, b.net)).slice(0, 8); const recipientLeaders = countryStats.slice().sort((a, b) => d3.descending(a.net, b.net)).slice(0, 8); const extremes = Array.from(new Map([...donorLeaders.slice(0, 3), ...recipientLeaders.slice(0, 3)].map(d => [d.country, d])).values()); const viz1Section = page.append("section").attr("class", "section viz-section viz1-section"); viz1Section.append("div").attr("class", "eyebrow").text("Visualization 1 · Country comparison"); viz1Section.append("h2").text("How much does each country receive versus donate?"); viz1Section.append("p").attr("class", "dek").text("Position compares cumulative commitments in both directions; the diagonal marks equal giving and receiving. Distance above or below it reveals imbalance, while circle size preserves total activity."); const viz1Layout = viz1Section.append("div").attr("class", "two-col"); const viz1Card = viz1Layout.append("div").attr("class", "chart-card"); const v1w = 900, v1h = 620, v1m = {top: 78, right: 34, bottom: 82, left: 100}; const v1iw = v1w - v1m.left - v1m.right, v1ih = v1h - v1m.top - v1m.bottom; const v1max = d3.max(countryStats, d => Math.max(d.donated, d.received)); const x1 = d3.scaleSymlog().constant(5e7).domain([0, v1max]).nice().range([0, v1iw]); const y1 = d3.scaleSymlog().constant(5e7).domain([0, v1max]).nice().range([v1ih, 0]); const r1 = d3.scaleSqrt().domain([0, d3.max(countryStats, d => d.activity)]).range([4, 19]); const svg1 = viz1Card.append("svg").attr("class", "viz1-svg").attr("viewBox", [0, 0, v1w, v1h]).attr("role", "img").attr("aria-label", "Scatterplot comparing donated and received aid by country"); svg1.append("text").attr("x", v1w / 2).attr("y", 28).attr("text-anchor", "middle").attr("font-size", 22).attr("font-weight", 800).attr("fill", ink).text("Country financial-aid balance"); svg1.append("text").attr("x", v1w / 2).attr("y", 49).attr("text-anchor", "middle").attr("font-size", 12).attr("fill", muted).text("Cumulative constant-USD commitments across all available years"); const g1 = svg1.append("g").attr("transform", `translate(${v1m.left},${v1m.top})`); const xTicks = x1.ticks(7); const yTicks = y1.ticks(7); g1.append("g").attr("class", "grid").attr("transform", `translate(0,${v1ih})`).call(d3.axisBottom(x1).tickValues(xTicks).tickSize(-v1ih).tickFormat("")); g1.append("g").attr("class", "grid").call(d3.axisLeft(y1).tickValues(yTicks).tickSize(-v1iw).tickFormat("")); g1.append("line").attr("class", "equal-line").attr("x1", x1(0)).attr("y1", y1(0)).attr("x2", x1(v1max)).attr("y2", y1(v1max)).attr("stroke", "#566073").attr("stroke-width", 1.5).attr("stroke-dasharray", "7 5"); g1.append("text").attr("x", x1(v1max * .20)).attr("y", y1(v1max * .20) - 8).attr("font-size", 11).attr("fill", muted).attr("transform", `rotate(-32,${x1(v1max * .20)},${y1(v1max * .20) - 8})`).text("equal received and donated"); g1.append("g").attr("class", "axis x-axis").attr("transform", `translate(0,${v1ih})`).call(d3.axisBottom(x1).tickValues(xTicks).tickFormat(formatAxisMoney)); g1.append("g").attr("class", "axis y-axis").call(d3.axisLeft(y1).tickValues(yTicks).tickFormat(formatAxisMoney)); g1.append("text").attr("x", v1iw / 2).attr("y", v1ih + 59).attr("text-anchor", "middle").attr("font-size", 13).attr("font-weight", 700).text("Total donated (constant USD)"); g1.append("text").attr("transform", "rotate(-90)").attr("x", -v1ih / 2).attr("y", -75).attr("text-anchor", "middle").attr("font-size", 13).attr("font-weight", 700).text("Total received (constant USD)"); const points = g1.selectAll("circle.country-point").data(countryStats).join("circle") .attr("class", d => `country-point ${balanceLabel(d.balance).replace(/\s+/g, "-")}`) .attr("cx", d => x1(d.donated)).attr("cy", d => y1(d.received)).attr("r", d => r1(d.activity)) .attr("fill", d => balanceColor(d.balance)).attr("fill-opacity", .84).attr("stroke", "#fff").attr("stroke-width", 1.3) .attr("tabindex", 0).attr("aria-label", d => `${d.country}: donated ${formatMoney(d.donated)}, received ${formatMoney(d.received)}, ${balanceLabel(d.balance)}`); points.append("title").text(d => `${d.country}\nDonated: ${formatMoney(d.donated)}\nReceived: ${formatMoney(d.received)}\nNet received: ${formatMoney(d.net)}\nBalance: ${formatBalance(d.balance)} (${balanceLabel(d.balance)})`); g1.selectAll("text.extreme-label").data(extremes).join("text").attr("class", "extreme-label") .attr("x", d => x1(d.donated) + (d.balance > 0 ? 10 : -10)).attr("y", d => y1(d.received) - 8) .attr("text-anchor", d => d.balance > 0 ? "start" : "end").attr("font-size", 10.5).attr("font-weight", 700).attr("fill", ink).text(d => d.country); drawBalanceLegend(svg1, {x: 610, y: 12, width: 245, id: "balance-gradient-v1"}); const rankCard = viz1Layout.append("aside").attr("class", "rank-card"); rankCard.append("h3").style("margin-top", "0").text("Largest net imbalances"); rankCard.append("div").attr("class", "eyebrow").text("Net donors"); rankCard.append("ol").selectAll("li").data(donorLeaders.slice(0, 6)).join("li").html(d => `${d.country}
${formatMoney(Math.abs(d.net))} more donated`); rankCard.append("div").attr("class", "eyebrow").text("Net recipients"); rankCard.append("ol").selectAll("li").data(recipientLeaders.slice(0, 6)).join("li").html(d => `${d.country}
${formatMoney(d.net)} more received`); viz1Section.append("div").attr("class", "callout findings viz1-findings").html(`Findings. ${donorLeaders[0].country} is the largest net donor, donating ${formatMoney(Math.abs(donorLeaders[0].net))} more than it receives; ${recipientLeaders[0].country} is the largest net recipient, receiving ${formatMoney(recipientLeaders[0].net)} more than it donates. ${donorLeaders[1].country} is nearly as donor-heavy, while ${recipientLeaders[1].country} and ${recipientLeaders[2].country} form the next recipient tier. Countries near the diagonal—such as ${countryStats.slice().sort((a,b)=>d3.ascending(Math.abs(a.balance),Math.abs(b.balance)))[0].country}—have much more balanced two-way activity.`); viz1Section.append("p").attr("class", "rationale viz1-rationale").html("Design rationale. A shared symlog scale keeps zero-value and low-activity countries visible while accommodating the dataset’s very large range. The diagonal gives a direct equality benchmark; position carries the two amounts, color carries direction of imbalance, and area carries total activity. Labels are limited to the strongest outliers to avoid obscuring the comparison."); const topologyNeighbors = topojson.neighbors(world.objects.countries.geometries); const neighborContrasts = []; topologyNeighbors.forEach((list, i) => list.forEach(j => { if (j <= i) return; const aFeature = worldFeatures[i], bFeature = worldFeatures[j]; const a = statForFeature(aFeature), b = statForFeature(bFeature); if (a && b) neighborContrasts.push({a: aFeature.properties.name, b: bFeature.properties.name, aStat: a, bStat: b, gap: Math.abs(a.balance - b.balance)}); })); neighborContrasts.sort((a, b) => d3.descending(a.gap, b.gap)); const viz2Section = page.append("section").attr("class", "section viz-section viz2-section"); viz2Section.append("div").attr("class", "eyebrow").text("Visualization 2 · Geographic pattern"); viz2Section.append("h2").text("Where do donor-heavy and recipient-heavy countries cluster?"); viz2Section.append("p").attr("class", "dek").text("The map uses a normalized balance so countries can be compared by direction of activity rather than simply by economic size. Gray countries are outside the reduced AidData country set."); const viz2Card = viz2Section.append("div").attr("class", "chart-card"); const v2w = 1080, v2h = 620; const svg2 = viz2Card.append("svg").attr("class", "viz2-svg").attr("viewBox", [0, 0, v2w, v2h]).attr("role", "img").attr("aria-label", "World map of donor-heavy and recipient-heavy country balance"); svg2.append("text").attr("x", v2w / 2).attr("y", 31).attr("text-anchor", "middle").attr("font-size", 23).attr("font-weight", 800).attr("fill", ink).text("Net financial-aid balance by country"); svg2.append("text").attr("x", v2w / 2).attr("y", 54).attr("text-anchor", "middle").attr("font-size", 12).attr("fill", muted).text("Normalized balance = (received − donated) ÷ (received + donated)"); const projection2 = d3.geoNaturalEarth1().fitExtent([[28, 82], [v2w - 28, v2h - 70]], {type: "FeatureCollection", features: displayFeatures}); const path2 = d3.geoPath(projection2); const countries2 = svg2.append("g").selectAll("path.balance-country").data(displayFeatures).join("path") .attr("class", d => `balance-country ${statForFeature(d) ? "has-data" : "no-data"}`) .attr("d", path2).attr("fill", d => statForFeature(d) ? balanceColor(statForFeature(d).balance) : noDataColor) .attr("stroke", "#fff").attr("stroke-width", .65).attr("vector-effect", "non-scaling-stroke") .attr("tabindex", d => statForFeature(d) ? 0 : null) .attr("aria-label", d => { const stat = statForFeature(d); return stat ? `${d.properties.name}: ${balanceLabel(stat.balance)}, balance ${formatBalance(stat.balance)}` : `${d.properties.name}: no data`; }); countries2.append("title").text(d => { const stat = statForFeature(d); return stat ? `${d.properties.name}\nDonated: ${formatMoney(stat.donated)}\nReceived: ${formatMoney(stat.received)}\nNet received: ${formatMoney(stat.net)}\nBalance: ${formatBalance(stat.balance)} (${balanceLabel(stat.balance)})` : `${d.properties.name}\nNo record in the reduced AidData country set`; }); drawBalanceLegend(svg2, {x: v2w / 2 - 185, y: v2h - 48, width: 370, id: "balance-gradient-v2"}); svg2.append("rect").attr("x", v2w / 2 + 212).attr("y", v2h - 48).attr("width", 13).attr("height", 13).attr("rx", 2).attr("fill", noDataColor).attr("stroke", "#a7acb5"); svg2.append("text").attr("x", v2w / 2 + 232).attr("y", v2h - 37).attr("font-size", 10.5).attr("fill", muted).text("no data"); const contrastBox = viz2Section.append("div").attr("class", "two-col").style("margin-top", "14px"); contrastBox.append("div").attr("class", "callout findings viz2-findings").html(`Findings. Donor-heavy countries form a clear cluster across the United States and Western/Northern Europe, with Japan as another major donor. Recipient-heavy countries are more geographically dispersed across Eastern Europe, South and Southeast Asia, Latin America, and South Africa. The sharpest mapped neighbor contrast is ${neighborContrasts[0].a} (${balanceLabel(neighborContrasts[0].aStat.balance)}, ${formatBalance(neighborContrasts[0].aStat.balance)}) beside ${neighborContrasts[0].b} (${balanceLabel(neighborContrasts[0].bStat.balance)}, ${formatBalance(neighborContrasts[0].bStat.balance)}), demonstrating that proximity does not guarantee similar aid roles.`); const contrastList = contrastBox.append("aside").attr("class", "rank-card"); contrastList.append("h3").style("margin-top", "0").text("Largest neighbor contrasts"); contrastList.append("ol").selectAll("li").data(neighborContrasts.slice(0, 5)).join("li").html(d => `${d.a} ↔ ${d.b}
${formatBalance(d.aStat.balance)} vs. ${formatBalance(d.bStat.balance)}`); viz2Section.append("p").attr("class", "rationale viz2-rationale").html("Design rationale. A zero-centered diverging scale makes the sign and magnitude of normalized balance immediately visible while avoiding domination by the United States, Japan, or India. A Natural Earth projection supports global comparison, thin white borders preserve country boundaries, and the automatically computed topology-neighbor list turns visual border contrasts into verifiable ranked evidence. Gray explicitly means no data, not a balanced value."); const purposeStats = topPurposes.map(meta => { const amounts = purposeByCountry.get(meta.purpose) || new Map(); const ranked = Array.from(amounts, ([country, amount]) => ({country, amount})).sort((a, b) => d3.descending(a.amount, b.amount)); const total = d3.sum(ranked, d => d.amount); return {...meta, amounts, ranked, total, leader: ranked[0], leaderShare: total ? ranked[0].amount / total : 0}; }); const purposeMax = d3.max(purposeStats, p => d3.max(p.ranked, d => d.amount)); const purposeColor = d3.scaleSequentialSqrt([0, purposeMax], d3.interpolateYlGnBu); const mostConcentrated = purposeStats.slice().sort((a, b) => d3.descending(a.leaderShare, b.leaderShare))[0]; const mostDiffuse = purposeStats.slice().sort((a, b) => d3.ascending(a.leaderShare, b.leaderShare))[0]; const socialPurpose = purposeStats.find(d => d.purpose === "Social/ welfare services"); const civicPurpose = purposeStats.find(d => d.purpose === "Strengthening civil society"); const colombiaTopFiveTotal = d3.sum(purposeStats, d => d.amounts.get("Colombia") || 0); const colombiaSocialShare = colombiaTopFiveTotal ? (socialPurpose.amounts.get("Colombia") || 0) / colombiaTopFiveTotal : 0; const civicTopThree = civicPurpose.ranked.slice(0, 3).map(d => d.country).join(", "); const viz3Section = page.append("section").attr("class", "section viz-section viz3-section"); viz3Section.append("div").attr("class", "eyebrow").text("Visualization 3 · Purpose geography"); viz3Section.append("h2").text("How do the five most frequent aid purposes distribute geographically?"); viz3Section.append("p").attr("class", "dek").text("Each map shows total commitments received for one of the five most frequent purposes. Every panel uses the same square-root color domain, so equal colors represent equal dollar amounts across purposes."); const legend3 = viz3Section.append("div").attr("class", "chart-card").style("padding", "8px 16px 2px").append("svg").attr("class", "purpose-legend").attr("viewBox", [0, 0, 1000, 70]).attr("role", "img").attr("aria-label", "Shared color scale for commitment amounts received across the five purpose maps, plus a no-data swatch"); const defs3 = legend3.append("defs"); const grad3 = defs3.append("linearGradient").attr("id", "purpose-gradient").attr("x1", "0%").attr("x2", "100%"); d3.range(0, 1.0001, .1).forEach(t => grad3.append("stop").attr("offset", `${t * 100}%`).attr("stop-color", purposeColor(t * purposeMax))); legend3.append("text").attr("x", 90).attr("y", 19).attr("font-size", 12).attr("font-weight", 800).text("Commitment amount received · shared scale across all five maps"); legend3.append("rect").attr("x", 90).attr("y", 28).attr("width", 820).attr("height", 12).attr("rx", 6).attr("fill", "url(#purpose-gradient)"); [0, .25, .5, .75, 1].forEach(t => legend3.append("text").attr("x", 90 + 820 * t).attr("y", 58).attr("text-anchor", t === 0 ? "start" : t === 1 ? "end" : "middle").attr("font-size", 11).attr("fill", muted).text(formatMoney(t * purposeMax))); legend3.append("rect").attr("x", 925).attr("y", 28).attr("width", 12).attr("height", 12).attr("rx", 2).attr("fill", noDataColor).attr("stroke", "#a7acb5"); legend3.append("text").attr("x", 943).attr("y", 39).attr("font-size", 10.5).attr("fill", muted).text("no data"); const mapGrid3 = viz3Section.append("div").attr("class", "map-grid").style("margin-top", "14px"); const v3w = 520, v3h = 340; const projection3 = d3.geoNaturalEarth1().fitExtent([[12, 62], [v3w - 12, v3h - 16]], {type: "FeatureCollection", features: displayFeatures}); const path3 = d3.geoPath(projection3); purposeStats.forEach((purpose, panelIndex) => { const panel = mapGrid3.append("div").attr("class", "map-panel"); const svg = panel.append("svg").attr("class", "viz3-map").attr("data-purpose", purpose.purpose).attr("data-scale-max", purposeMax).attr("viewBox", [0, 0, v3w, v3h]).attr("role", "img").attr("aria-label", `Map of ${purpose.purpose} aid received by country`); const shortTitle = purpose.purpose.length > 46 ? `${purpose.purpose.slice(0, 43)}…` : purpose.purpose; svg.append("text").attr("x", 16).attr("y", 25).attr("font-size", 16).attr("font-weight", 800).attr("fill", ink).text(`${panelIndex + 1}. ${shortTitle}`); svg.append("text").attr("x", 16).attr("y", 45).attr("font-size", 11).attr("fill", muted).text(`${d3.format(",")(purpose.count)} records · ${formatMoney(purpose.total)} total · leader: ${purpose.leader.country}`); const paths = svg.append("g").selectAll("path.purpose-country").data(displayFeatures).join("path").attr("class", "purpose-country") .attr("d", path3).attr("fill", feature => { const stat = statForFeature(feature); const countryName = stat?.country; const amount = countryName ? (purpose.amounts.get(countryName) || 0) : 0; return amount > 0 ? purposeColor(amount) : noDataColor; }).attr("stroke", "#fff").attr("stroke-width", .45).attr("vector-effect", "non-scaling-stroke") .attr("tabindex", feature => { const stat = statForFeature(feature); return stat && (purpose.amounts.get(stat.country) || 0) !== 0 ? 0 : null; }).attr("aria-label", feature => { const stat = statForFeature(feature); const amount = stat ? (purpose.amounts.get(stat.country) || 0) : 0; return amount !== 0 ? `${feature.properties.name}: ${formatMoney(amount)} received for ${purpose.purpose}` : `${feature.properties.name}: no ${purpose.purpose} commitment`; }); paths.append("title").text(feature => { const stat = statForFeature(feature); const countryName = stat?.country; const amount = countryName ? (purpose.amounts.get(countryName) || 0) : 0; const rank = amount > 0 ? purpose.ranked.findIndex(d => d.country === countryName) + 1 : null; return amount > 0 ? `${feature.properties.name}\n${purpose.purpose}\nReceived: ${formatMoney(amount)}\nRank: ${rank} of ${purpose.ranked.length}` : `${feature.properties.name}\nNo ${purpose.purpose} commitment in the reduced data`; }); }); const leaderTable = viz3Section.append("table").attr("class", "purpose-leaders"); leaderTable.append("thead").append("tr").selectAll("th").data(["Rank by frequency", "Purpose", "Records", "Top recipient", "Top amount", "Leader share"]).join("th").text(d => d); leaderTable.append("tbody").selectAll("tr").data(purposeStats).join("tr").html(d => `${d.index + 1}${d.purpose}${d3.format(",")(d.count)}${d.leader.country}${formatMoney(d.leader.amount)}${d3.format(".1%")(d.leaderShare)}`); viz3Section.append("div").attr("class", "callout findings viz3-findings").html(`Findings. Geography changes substantially by purpose. ${mostConcentrated.purpose} is highly concentrated: ${mostConcentrated.leader.country} receives ${formatMoney(mostConcentrated.leader.amount)}, or ${d3.format(".1%")(mostConcentrated.leaderShare)} of the total across all recipient countries for that purpose. ${civicPurpose.purpose} is broader, led by ${civicTopThree}; ${mostDiffuse.purpose} is the most diffuse by top-recipient share (${d3.format(".1%")(mostDiffuse.leaderShare)}). India is broadly prominent rather than specialized, leading Sectors not specified, Higher education, and Multisector aid. Recipient profiles also differ: ${d3.format(".1%")(colombiaSocialShare)} of Colombia’s receipts among these five purposes are for ${socialPurpose.purpose}, showing a much stronger orientation toward that category than Colombia’s other top-five-purpose receipts.`); viz3Section.append("p").attr("class", "rationale viz3-rationale").html("Design rationale. Small multiples keep each purpose legible while preserving a common geographic frame. A single shared square-root scale compresses extreme values without sacrificing zero and maintains honest color comparability across panels. Panel totals, record frequencies, hover ranks, and the leader table make the patterns verifiable even when small countries are difficult to see on a world map."); const sources = page.append("section").attr("class", "section sources-section"); sources.append("div").attr("class", "eyebrow").text("Sources, limitations, and disclosure"); sources.append("h2").text("Reproducibility notes"); sources.append("p").attr("class", "sources").html(`Data sources. Primary commitments: course AidData Google Sheet, adapted from the AidData Core Research Release 1.3.1. Geographic boundaries: world-atlas countries-110m TopoJSON, converted in this notebook with topojson-client. Course guidance: 2026 AI policy.`); sources.append("p").html("Limitations. These charts summarize commitments rather than actual disbursements and aggregate across all available years, so they do not show timing, inflation beyond the provided constant-dollar field, or within-country destinations. The reduced dataset contains a limited country set, and the 110m map omits very small states such as Monaco and Liechtenstein. The balance index describes direction, not absolute magnitude; the first chart should be used alongside the map."); sources.append("p").attr("class", "ai-disclosure").html('AI assistance disclosure. I used OpenAI Codex to help generate and verify the JavaScript/D3 preprocessing, visualizations, design rationale, and written analyses for this mini-project. I reviewed the resulting code, calculations, visuals, and narrative and am responsible for the submitted work.'); return root; })(); display(aid_project); 3f:[] 38:{"id":"5850d9bcbee1d255","slug":"mini-project-1-geographic-financial-aid-due-oct-29th","title":"Mini-Project 1: Geographic Financial Aid (Due Oct. 29th)","thumbnail":"39f908024df585a3f20c19083fa0f6a53e17153cf47ae0f8552a9943eba40604","access_level":"public","create_time":"$D2026-10-25T15:16:44.455Z","update_time":"$D2026-10-28T19:20:20.215Z","view_time":null,"first_public_time":"$D2026-10-28T19:05:24.147Z","has_unpublished_edits":null,"fork":{"id":"e6fcea972bfc4543","slug":"2026-infovis-cse_project-1","title":"Mini-Project 1: Geographic Financial Aid (Due Oct. 29th)","owner":{"id":"3d6c0f5acd6a20a4","login":"rk2546","name":"rk2546"}},"stars":0,"starred":false,"owner":{"type":"team","id":"b3ddba61bff404c7","login":"harshith-kori-raj","name":"Harshith Kori Raj","avatar_url":"https://avatars-next.observableusercontent.com/af1abed5f1c20534d016dc9a5dbbefa4cf7a0cd8eba8e7fde83863fbe28b8816","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":222,"publish_version":222,"role":null,"authored":false,"authors":[{"type":"individual","id":"5264912dbf9db8e0","login":"harshith-kori-raj","name":"Harshith Kori Raj","avatar_url":"https://avatars-next.observableusercontent.com/af1abed5f1c20534d016dc9a5dbbefa4cf7a0cd8eba8e7fde83863fbe28b8816","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"b3ddba61bff404c7","login":"harshith-kori-raj","name":"Harshith Kori Raj","avatar_url":"https://avatars-next.observableusercontent.com/af1abed5f1c20534d016dc9a5dbbefa4cf7a0cd8eba8e7fde83863fbe28b8816","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Mini-Project 1: Geographic Financial Aid (Due Oct. 29th)","cells":[{"id":0,"value":"# Mini-Project 1: Geographic Financial Aid (Due Oct. 29th)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":27,"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":34,"value":"css","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"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":32,"value":"$3c","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"---\n## About the Dataset","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":21,"value":"This 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":58,"value":"---\n## Questions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"$3d","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":60,"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":55,"value":"Your answers to each question are graded on the following qualities, with each question totaling up to **25 points**:\n\n- **[10pts]**: Does the visualization answer the questions posed in the exercise?\n- **[10pts]**: Does the written answer & discussion the questions posed in the exercise?\n- **[5pts]**: Is the visual representation clear? Does it have good aesthetics? If needed, you can review this notebook on clarity for reference.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"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 completing this project, you can use the questions above as a self-evaluation tool in two main ways:\n\n1. 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.\n2. 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.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":65,"value":"\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"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":56,"value":"$3e","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3f","stdlib":"2"}} 33:null