34:["$","title",null,{"children":"Mini-Project 1: Geographic Financial Aid (Due Oct. 29th) | Zhangzhuoyue Shi | 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:T14d9,viz1Butterfly = { const rows = countryTotals.slice().sort((a, b) => d3.descending(a.net, b.net)); const width = 960, labelW = 150; const margin = {top: 92, right: 60, bottom: 24, left: 60}; const height = margin.top + rows.length * 18 + margin.bottom; const mid = width / 2; const half = mid - labelW / 2 - margin.left; const max = d3.max(rows, d => Math.max(d.donated, d.received)); const isLog = v1Scale === "Log"; const minLog = 1e3; const base = isLog ? d3.scaleLog().domain([minLog, max]).clamp(true) : d3.scaleLinear().domain([0, max]); const xLeft = base.copy().range([mid - labelW / 2, mid - labelW / 2 - half]); const xRight = base.copy().range([mid + labelW / 2, mid + labelW / 2 + half]); const len = (scale, v) => (isLog && v < minLog) ? 0 : Math.abs(scale(v) - scale.range()[0]); const y = d3.scaleBand(rows.map(d => d.country), [margin.top, height - margin.bottom]).padding(0.18); const recColor = balanceColor(-0.8), donColor = balanceColor(0.8); const ticks = isLog ? [1e3, 1e5, 1e7, 1e9, 1e11] : xRight.ticks(5); const container = d3.create("div").style("position", "relative").style("background", "white").style("color", "#222").style("max-width", `${width}px`); const svg = container.append("svg").attr("viewBox", [0, 0, width, height]) .style("width", "100%").style("height", "auto").style("font-family", "system-ui, sans-serif"); const tip = makeTooltip(container.node()); svg.append("text").attr("x", mid).attr("y", 22).attr("text-anchor", "middle") .attr("font-size", 17).attr("font-weight", "bold") .text("How much does each country receive vs. donate? (1973–2013, constant USD)"); svg.append("text").attr("x", mid - labelW / 2 - half / 2).attr("y", 48).attr("text-anchor", "middle") .attr("font-size", 13).attr("font-weight", "bold").attr("fill", recColor).text("◀ Received"); svg.append("text").attr("x", mid + labelW / 2 + half / 2).attr("y", 48).attr("text-anchor", "middle") .attr("font-size", 13).attr("font-weight", "bold").attr("fill", donColor).text("Donated ▶"); // Axes + gridlines for (const [scale, axis] of [[xLeft, d3.axisTop], [xRight, d3.axisTop]]) { svg.append("g").attr("transform", `translate(0,${margin.top - 6})`) .call(axis(scale).tickValues(ticks).tickFormat(fmtUSD).tickSizeOuter(0)) .call(g => g.selectAll("text").attr("font-size", 10).attr("fill", "#555")) .call(g => g.select(".domain").attr("stroke", "#999")); svg.append("g").selectAll("line").data(ticks).join("line") .attr("x1", d => scale(d)).attr("x2", d => scale(d)) .attr("y1", margin.top - 6).attr("y2", height - margin.bottom) .attr("stroke", "#eee"); } // Divider between net donors and net recipients const firstRecipient = rows.findIndex(d => d.net < 0); const yDiv = y(rows[firstRecipient].country) - y.step() * y.paddingInner() / 2; svg.append("line").attr("x1", margin.left - 40).attr("x2", width - margin.right + 40) .attr("y1", yDiv).attr("y2", yDiv).attr("stroke", "#444").attr("stroke-dasharray", "4 3"); svg.append("text").attr("x", width - margin.right + 38).attr("y", yDiv - 5).attr("text-anchor", "end") .attr("font-size", 11).attr("fill", donColor).text(`▲ ${firstRecipient} net donors`); svg.append("text").attr("x", width - margin.right + 38).attr("y", yDiv + 13).attr("text-anchor", "end") .attr("font-size", 11).attr("fill", recColor).text(`▼ ${rows.length - firstRecipient} net recipients`); const row = svg.append("g").selectAll("g").data(rows).join("g") .attr("transform", d => `translate(0,${y(d.country)})`); row.append("rect").attr("x", margin.left - 40).attr("width", width - margin.left - margin.right + 80) .attr("height", y.bandwidth()).attr("fill", "transparent"); row.append("rect").attr("fill", recColor) .attr("x", d => mid - labelW / 2 - len(xLeft, d.received)).attr("width", d => len(xLeft, d.received)) .attr("height", y.bandwidth()); row.append("rect").attr("fill", donColor) .attr("x", mid + labelW / 2).attr("width", d => len(xRight, d.donated)) .attr("height", y.bandwidth()); row.append("text").attr("x", mid).attr("y", y.bandwidth() / 2).attr("dy", "0.35em") .attr("text-anchor", "middle").attr("font-size", 11).text(d => d.country); row.filter(d => d.received > 0).append("text") .attr("x", d => mid - labelW / 2 - len(xLeft, d.received) - 3).attr("y", y.bandwidth() / 2).attr("dy", "0.35em") .attr("text-anchor", "end").attr("font-size", 9).attr("fill", "#666").text(d => fmtUSD(d.received)); row.filter(d => d.donated > 0).append("text") .attr("x", d => mid + labelW / 2 + len(xRight, d.donated) + 3).attr("y", y.bandwidth() / 2).attr("dy", "0.35em") .attr("font-size", 9).attr("fill", "#666").text(d => fmtUSD(d.donated)); row.on("mouseenter", function() { d3.select(this).select("rect").attr("fill", "#f0f0f0"); }) .on("mousemove", (event, d) => tip.show(event, `${d.country}
Donated: ${fmtUSD(d.donated)}
Received: ${fmtUSD(d.received)}
` + `Net: ${fmtUSD(d.net)} (${d.net >= 0 ? "net donor" : "net recipient"})
` + `Balance index: ${d.balance.toFixed(2)}`)) .on("mouseleave", function() { d3.select(this).select("rect").attr("fill", "transparent"); tip.hide(); }); return container.node(); }3f:T110b,viz1Scatter = { const width = 960, height = 640; const margin = {top: 50, right: 40, bottom: 60, left: 90}; const max = 2e11, ticks = [0, 1e7, 1e8, 1e9, 1e10, 1e11]; const x = d3.scaleSymlog().constant(1e7).domain([0, max]).range([margin.left, width - margin.right]); const y = d3.scaleSymlog().constant(1e7).domain([0, max]).range([height - margin.bottom, margin.top]); const r = d3.scaleSqrt([0, d3.max(countryTotals, d => d.total)], [3, 22]); const [xa, xb] = x.range(), [ya, yb] = y.range(); const container = d3.create("div").style("position", "relative").style("background", "white").style("color", "#222").style("max-width", `${width}px`); const svg = container.append("svg").attr("viewBox", [0, 0, width, height]) .style("width", "100%").style("height", "auto").style("font-family", "system-ui, sans-serif"); const tip = makeTooltip(container.node()); svg.append("text").attr("x", width / 2).attr("y", 24).attr("text-anchor", "middle") .attr("font-size", 17).attr("font-weight", "bold").text("Donated vs. received, by country (symlog axes)"); // Regions above / below the diagonal svg.append("path").attr("d", `M${xa},${ya}L${xb},${yb}L${xa},${yb}Z`).attr("fill", balanceColor(0.35)).attr("opacity", 0.25); svg.append("path").attr("d", `M${xa},${ya}L${xb},${yb}L${xb},${ya}Z`).attr("fill", balanceColor(-0.35)).attr("opacity", 0.25); svg.append("line").attr("x1", xa).attr("y1", ya).attr("x2", xb).attr("y2", yb) .attr("stroke", "#555").attr("stroke-dasharray", "5 4"); svg.append("text").attr("transform", `translate(${x(3e10)},${y(3e10)}) rotate(${Math.atan2(yb - ya, xb - xa) * 180 / Math.PI})`) .attr("dy", -6).attr("text-anchor", "middle").attr("font-size", 11).attr("fill", "#444").text("donated = received"); svg.append("text").attr("x", xb - 60).attr("y", yb + 16).attr("text-anchor", "end").attr("font-size", 13) .attr("font-weight", "bold").attr("fill", balanceColor(0.9)).text("▲ Donates more than it receives"); svg.append("text").attr("x", xb - 12).attr("y", y(4e8)).attr("text-anchor", "end").attr("font-size", 13) .attr("font-weight", "bold").attr("fill", balanceColor(-0.9)).text("Receives more than it donates ▼"); svg.append("g").attr("transform", `translate(0,${ya})`) .call(d3.axisBottom(x).tickValues(ticks).tickFormat(fmtUSD)) .call(g => g.append("text").attr("x", (xa + xb) / 2).attr("y", 40).attr("fill", "#222") .attr("font-size", 13).attr("text-anchor", "middle").text("Total received →")); svg.append("g").attr("transform", `translate(${xa},0)`) .call(d3.axisLeft(y).tickValues(ticks).tickFormat(fmtUSD)) .call(g => g.append("text").attr("transform", "rotate(-90)").attr("x", -(ya + yb) / 2).attr("y", -62) .attr("fill", "#222").attr("font-size", 13).attr("text-anchor", "middle").text("Total donated →")); const pts = countryTotals.slice().sort((a, b) => b.total - a.total); svg.append("g").selectAll("circle").data(pts).join("circle") .attr("cx", d => x(d.received)).attr("cy", d => y(d.donated)).attr("r", d => r(d.total)) .attr("fill", d => balanceColor(d.balance)).attr("stroke", "#333").attr("stroke-width", 0.8).attr("fill-opacity", 0.9) .on("mousemove", (event, d) => tip.show(event, `${d.country}
Donated: ${fmtUSD(d.donated)}
Received: ${fmtUSD(d.received)}
Net: ${fmtUSD(d.net)}`)) .on("mouseleave", () => tip.hide()); // Points on the x-axis (almost no donations) get rotated labels to avoid collisions const onAxis = d => d.donated < 2e7; const labelled = pts.filter(d => d.total >= 2e9); const shift = new Map(); let lastX = -Infinity; for (const d of labelled.filter(onAxis).sort((a, b) => a.received - b.received)) { const px = Math.max(x(d.received), lastX + 11); shift.set(d, px - x(d.received)); lastX = px; } svg.append("g").attr("pointer-events", "none").selectAll("text") .data(labelled).join("text") .attr("transform", d => onAxis(d) ? `translate(${x(d.received) + shift.get(d)},${y(d.donated) - r(d.total) - 3}) rotate(-50)` : `translate(${x(d.received) + r(d.total) + 3},${y(d.donated)})`) .attr("dy", d => onAxis(d) ? 0 : "0.35em") .attr("font-size", 10.5).attr("stroke", "white").attr("stroke-width", 3).attr("paint-order", "stroke") .text(d => d.country); return container.node(); }40:Te0c,### Visualization #1 — Written analysis **The countries split into two almost disjoint groups.** Very few countries both give and receive large amounts; most sit at one of the two extremes. - **Donors are few and highly concentrated.** The **United States** ($116.2B donated vs. $0.1B received) and **Japan** ($114.2B vs. $2.1B) together account for **63%** of all money in the dataset (~$367B). Adding **Germany** ($47.2B donated, only $60K received), the **United Kingdom** ($23.7B) and **France** ($15.5B), the top five donors provide **86%** of all commitments. The Netherlands, Sweden, Norway, Switzerland, Denmark and Belgium follow with much smaller, but almost purely donor, profiles. - **Countries that receive much more than they donate:** **India** is by far the largest recipient ($134.0B) and never donates ($0). **South Africa** ($18.7B received) also donates exactly $0, and **Thailand** ($49.0B), **Brazil** ($36.6B), **Colombia** ($25.5B), **Poland** ($24.5B) and **Chile** ($7.3B) are *almost pure* recipients: each donates less than $1.2M, i.e. under 0.01% of what it receives. **South Korea** received $25.3B while donating only $1.3B, and **Kuwait** received $7.8B while donating $1.4B. - **Countries that donate much more than they receive:** the US, Japan, Germany, UK, France, the Netherlands, Sweden and Norway all have a balance index above +0.8, i.e. their donations dwarf what they receive. - **More balanced / mixed countries are the exception:** **Australia** ($2.45B donated vs. $2.57B received) and **Austria** ($0.78B vs. $0.77B) are almost perfectly balanced; **Canada** is a large donor ($7.5B) that also receives a lot ($4.1B); **Italy** ($3.8B vs. $2.4B) and **Saudi Arabia** ($1.7B vs. $4.9B) are similar two-way cases. - Overall, 17 countries are net donors and 30 are net recipients (Austria is a net donor only by a hair; Monaco donates a tiny $0.9M and receives nothing). ### Visualization #1 — Design rationale - **Butterfly chart (A).** Putting received and donated on two sides of a shared country label makes it possible to compare the two quantities *for the same country* (left vs. right length) and *across countries* (bar lengths in the same column share an aligned baseline, the most accurate channel for magnitude). Sorting by net balance turns the chart into a ranking: the strongest net donors at the top, the strongest net recipients at the bottom, with the explicit divider answering "which countries donate more than they receive" at a glance. Color is redundant with side (blue = donate, red = receive) and is kept consistent with the maps. - **Linear vs. log toggle.** Amounts span more than seven orders of magnitude (from about $5.6K to $134B). The linear scale is honest about magnitude (it makes it obvious that the US, Japan and India dominate) but hides small countries; the log scale makes every country readable at the cost of making differences look smaller. Offering both lets the reader answer both "who is big" and "what is the profile of small countries". - **Scatter plot (B), comparison.** The scatter answers the "much more than" part of the question most directly: the distance from the diagonal is the imbalance, and pure donors/recipients line up on the axes. It is better for spotting *mixed* countries (Canada, Australia, Italy, Saudi Arabia lie near the diagonal) but worse for reading exact values or comparing countries precisely, and label overlap limits how many countries can be named. The butterfly chart is better for precise ranking and lookup. Together they cover both the overview and the details.41:T18f1,viz2Map = { const width = 960, mapH = v2Region === "world" ? 500 : 620, legendH = v2Circles ? 112 : 64; const height = mapH + legendH; const projection = makeProjection(v2Region, width, mapH); const path = d3.geoPath(projection); const r = d3.scaleSqrt([0, d3.max(countryTotals, d => d.total)], [0, v2Region === "world" ? 30 : 40]); const container = d3.create("div").style("position", "relative").style("background", "white").style("color", "#222").style("max-width", `${width}px`); const svg = container.append("svg").attr("viewBox", [0, 0, width, height]) .style("width", "100%").style("height", "auto").style("font-family", "system-ui, sans-serif"); const tip = makeTooltip(container.node()); const hatch = addHatch(svg); const tipHtml = d => { const t = totalsByGeo.get(d.properties.name); if (!t) return `${d.properties.name}
Not in dataset`; return `${t.country}
Donated: ${fmtUSD(t.donated)}
Received: ${fmtUSD(t.received)}
` + `Net: ${fmtUSD(t.net)}
Balance index: ${t.balance.toFixed(2)}`; }; const mapG = svg.append("svg").attr("width", width).attr("height", mapH); mapG.append("rect").attr("width", width).attr("height", mapH).attr("fill", "#fbfdff"); mapG.append("path").datum(d3.geoGraticule10()).attr("d", path).attr("fill", "none").attr("stroke", "#eef0f3"); mapG.append("g").selectAll("path").data(countries).join("path") .attr("d", path) .attr("fill", d => totalsByGeo.has(d.properties.name) ? balanceColor(totalsByGeo.get(d.properties.name).balance) : hatch) .attr("stroke", d => totalsByGeo.has(d.properties.name) ? "#555" : "#ccc") .attr("stroke-width", d => totalsByGeo.has(d.properties.name) ? 0.6 : 0.3) .on("mousemove", (event, d) => tip.show(event, tipHtml(d))) .on("mouseleave", () => tip.hide()); const inBounds = (f, region) => { const [[x0, y0], [x1, y1]] = regionBounds[region]; const [lon, lat] = d3.geoCentroid(f); return lon > x0 && lon < x1 && lat > y0 && lat < y1; }; // Circles and labels only for countries whose centroid lies inside the focused region const withData = countries.filter(d => totalsByGeo.has(d.properties.name) && inBounds(d, v2Region)) .map(d => ({feature: d, t: totalsByGeo.get(d.properties.name), c: mainCentroid(d, path)})) .filter(d => d.c.every(Number.isFinite)) .sort((a, b) => b.t.total - a.t.total); if (v2Circles) { // White halo under a dark outline keeps circles visible on both dark and light fills const bubble = mapG.append("g").selectAll("g").data(withData).join("g") .attr("transform", d => `translate(${d.c[0]},${d.c[1]})`) .on("mousemove", (event, d) => tip.show(event, tipHtml(d.feature))) .on("mouseleave", () => tip.hide()); bubble.append("circle").attr("r", d => Math.max(2, r(d.t.total))) .attr("fill", "rgba(255,255,255,0.18)").attr("stroke", "white").attr("stroke-width", 3); bubble.append("circle").attr("r", d => Math.max(2, r(d.t.total))) .attr("fill", "none").attr("stroke", "#222").attr("stroke-width", 1.2); } // Labels: every dataset country in regional views; in the world view only big players outside // Europe (Europe is too dense at this scale, use the Europe focus instead) const labelled = v2Region === "world" ? withData.filter(d => d.t.total > 1.5e10 && !inBounds(d.feature, "europe")) : withData; // Simple label de-overlap: start below each circle, then push overlapping boxes apart vertically const labels = labelled.map(d => { const y0 = d.c[1] + (v2Circles ? Math.max(2, r(d.t.total)) + 9 : 0); return {d, x: d.c[0], y: y0, y0, w: d.t.country.length * 6.2 + 6, h: 12}; }); for (let iter = 0; iter < 80; iter++) { let moved = false; for (let i = 0; i < labels.length; i++) { for (let j = i + 1; j < labels.length; j++) { const a = labels[i], b = labels[j]; const ox = (a.w + b.w) / 2 - Math.abs(a.x - b.x); const oy = (a.h + b.h) / 2 - Math.abs(a.y - b.y); if (ox > 0 && oy > 0) { const s = (a.y <= b.y ? -1 : 1) * (oy / 2 + 0.5); a.y += s; b.y -= s; moved = true; } } } if (!moved) break; } const labelG = mapG.append("g").attr("pointer-events", "none"); labelG.selectAll("line").data(labels.filter(l => Math.abs(l.y - l.y0) > 6)).join("line") .attr("x1", l => l.x).attr("y1", l => l.y0 - 8).attr("x2", l => l.x).attr("y2", l => l.y + (l.y < l.y0 ? 3 : -9)) .attr("stroke", "#333").attr("stroke-width", 0.7); labelG.selectAll("text").data(labels).join("text") .attr("x", l => l.x).attr("y", l => l.y) .attr("text-anchor", "middle").attr("font-size", v2Region === "world" ? 10 : 10.5).attr("font-weight", 600) .attr("stroke", "white").attr("stroke-width", 3).attr("paint-order", "stroke") .text(l => l.d.t.country); svg.append("text").attr("x", 12).attr("y", 24).attr("font-size", 17).attr("font-weight", "bold") .attr("stroke", "white").attr("stroke-width", 4).attr("paint-order", "stroke") .text("Where are the donors and the recipients?"); // Legends const lg = svg.append("g").attr("transform", `translate(0,${mapH + 26})`); drawRampLegend(lg.append("g"), { color: balanceColor, x: d3.scaleLinear([-1, 1], [50, 370]), tickValues: [-1, -0.5, 0, 0.5, 1], tickFormat: d => ({"-1": "−1 only receives", "0": "0 balanced", "1": "+1 only donates"})[d] ?? d, title: "Balance index = (donated − received) / (donated + received)" }); lg.append("rect").attr("x", 430).attr("width", 18).attr("height", 12).attr("fill", hatch).attr("stroke", "#bbb"); lg.append("text").attr("x", 454).attr("y", 10).attr("font-size", 11).text("Not in dataset"); if (v2Circles) { const cg = lg.append("g").attr("transform", "translate(590,0)"); cg.append("text").attr("y", -6).attr("font-size", 11).attr("font-weight", "bold").text("Total volume (donated + received)"); let cx = 10; const cy = 4 + r(1e11); for (const v of [1e9, 1e10, 1e11]) { const rr = Math.max(2, r(v)); cg.append("circle").attr("cx", cx + rr).attr("cy", cy).attr("r", rr).attr("fill", "rgba(0,0,0,0.07)").attr("stroke", "#222"); cg.append("text").attr("x", cx + 2 * rr + 4).attr("y", cy + 4).attr("font-size", 10).text(fmtUSD(v)); cx += 2 * rr + 50; } } return container.node(); }42:Ted6,### Visualization #2 — Written analysis **Yes — donors and recipients cluster very clearly.** - **Donor cluster 1 – Western & Northern Europe:** Germany (+1.00), the Netherlands (+1.00), Switzerland (+1.00), France (+0.97), Sweden (+0.98), the UK (+0.92), Denmark (+0.89), Norway (+0.85), Belgium (+0.84) form one continuous blue block. - **Donor cluster 2 – North America and Japan:** the United States (+1.00) and Japan (+0.96) have the two largest donor circles (only India's circle is bigger); Canada is also a net donor (+0.29). - **Recipient clusters:** Latin America (Brazil, Colombia, Chile, all ≈ −1.00), South & Southeast Asia (India and Thailand, ≈ −1.00; India has the largest circle of any country, $134B in total), South Africa (−1.00), and — inside Europe itself — the **post-communist Central/Eastern European and Baltic states** (Poland, Czechia, Slovakia, Hungary, Romania, Slovenia, Estonia, Latvia, Lithuania all ≈ −1.00). Southern/peripheral Europe (Greece −0.88, Cyprus −1.00, Portugal −0.44, Ireland −0.52) leans toward receiving as well. - **The Gulf states** (Saudi Arabia −0.48, Kuwait −0.70, Qatar −0.75, UAE −0.63) form a distinct "mixed" cluster: mainly recipients, but they also donate noticeable amounts. - In short, the pattern follows a **rich-North / developing-South** and a **West / East (Europe)** divide. **Neighbors with radically different patterns** (best seen in the *Europe* and *Asia* views): - **Germany (+1.00) vs. Poland (−1.00) and Czechia (−0.99)** — the sharpest border on the map: an almost pure donor next to almost pure recipients. - **Austria (≈0, balanced) vs. Hungary, Slovakia and Slovenia (all ≈ −1.00).** - **Sweden (+0.98) and Finland (+0.57) vs. Estonia, Latvia and Lithuania (≈ −1.00)** across the Baltic Sea. - **Japan (+0.96) vs. South Korea (−0.90) and Taiwan (−0.95).** - **UK (+0.92) vs. Ireland (−0.52); Spain (+0.56) vs. Portugal (−0.44); Belgium (+0.84) vs. Luxembourg (−0.67); Italy (+0.23) vs. Slovenia (≈ −1.00).** - **United States (+1.00) vs. Canada (+0.29)** have the same sign, but Canada receives $4.1B whereas the US receives almost nothing; **Australia (≈0) vs. New Zealand (−0.60)** is a similar contrast in Oceania. *Caveat:* the dataset only contains 47 countries (mostly OECD members, Gulf states and some emerging economies), so most of Africa and Asia are hatched — the map can only describe the countries that appear in this reduced dataset. ### Visualization #2 — Design rationale - The question is about **geography and adjacency**, so a map is the natural representation: clusters and borders are perceived pre-attentively as contiguous regions of color. - I encode a **normalized** balance index instead of the raw net amount. Raw net values are dominated by the US, Japan and India and would make nearly every other country look neutral; the index captures the *pattern* (mostly donor vs. mostly recipient) regardless of the country's size, which is what the question asks about. - A **diverging red–white–blue** scheme is appropriate because the index has a meaningful midpoint (0 = balanced) and two opposite extremes. The same colors are used in Visualization #1 for consistency. Missing countries are hatched rather than grey/white so they are not confused with "balanced". - The normalized index loses magnitude (Monaco and the US could have the same color), so **proportional circles** add total volume back as a second, separable channel (size). They can be toggled off when they clutter the view. - Small European countries are tiny at world scale, so the **regional focus** views re-project and label every dataset country, which is what makes the neighbor comparisons readable. Tooltips give exact values.43:Tf67,viz3SmallMultiples = { const width = 960, cols = 2, pw = width / cols, mapH = v3Region === "world" ? 230 : 300, titleH = 46; const ph = mapH + titleH, nRows = 3, height = nRows * ph + 10; const maxVal = d3.max(top5Purposes, p => d3.max(purposeByRecipient.get(p)?.values() ?? [0])); const color = d3.scaleSequentialLog([1e6, maxVal], d3.interpolateYlGnBu).clamp(true); const inDataset = new Set(countryTotals.map(d => geoName(d.country))); const projection = makeProjection(v3Region, pw - 10, mapH); const path = d3.geoPath(projection); const container = d3.create("div").style("position", "relative").style("background", "white").style("color", "#222").style("max-width", `${width}px`); const svg = container.append("svg").attr("viewBox", [0, 0, width, height]) .style("width", "100%").style("height", "auto").style("font-family", "system-ui, sans-serif"); const tip = makeTooltip(container.node()); const hatch = addHatch(svg); top5Purposes.forEach((purpose, i) => { const byCountry = purposeByRecipient.get(purpose) ?? new Map(); const total = d3.sum(byCountry.values()); const [topName, topVal] = d3.greatest(byCountry, ([, v]) => v) ?? ["–", 0]; const topLabel = countryTotals.find(d => geoName(d.country) === topName)?.country ?? topName; const g = svg.append("g").attr("transform", `translate(${(i % cols) * pw},${Math.floor(i / cols) * ph})`); g.append("text").attr("x", 8).attr("y", 18).attr("font-size", 14).attr("font-weight", "bold") .text(`${i + 1}. ${purpose}`); g.append("text").attr("x", 8).attr("y", 35).attr("font-size", 11).attr("fill", "#555") .text(`${d3.format(",")(purposeCounts.get(purpose))} commitments · ${fmtUSD(total)} · top: ${topLabel} (${d3.format(".0%")(topVal / total)})`); const m = g.append("svg").attr("x", 5).attr("y", titleH).attr("width", pw - 10).attr("height", mapH); m.append("rect").attr("width", pw - 10).attr("height", mapH).attr("fill", "#fbfdff").attr("stroke", "#e3e6ea"); m.append("g").selectAll("path").data(countries).join("path") .attr("d", path) .attr("fill", d => { const v = byCountry.get(d.properties.name); if (v > 0) return color(v); return inDataset.has(d.properties.name) ? "#d9d9d9" : hatch; }) .attr("stroke", d => inDataset.has(d.properties.name) ? "#666" : "#d0d0d0") .attr("stroke-width", d => inDataset.has(d.properties.name) ? 0.5 : 0.25) .on("mousemove", (event, d) => { const v = byCountry.get(d.properties.name) ?? 0; const html = !inDataset.has(d.properties.name) ? `${d.properties.name}
Not in dataset` : `${d.properties.name}
${purpose}
Received: ${fmtUSD(v)}
` + `${d3.format(".1%")(total ? v / total : 0)} of this purpose's total`; tip.show(event, html); }) .on("mouseleave", () => tip.hide()); }); // Legend in the 6th panel const lg = svg.append("g").attr("transform", `translate(${pw + 30},${2 * ph + 70})`); drawRampLegend(lg.append("g"), { color, x: d3.scaleLog([1e6, maxVal], [0, 380]), tickValues: [1e6, 1e7, 1e8, 1e9, maxVal].filter((v, i, a) => i === a.length - 1 || v < maxVal * 0.5), tickFormat: fmtUSD, title: "Amount received for the purpose (log scale, 1973–2013)" }); lg.append("rect").attr("y", 52).attr("width", 18).attr("height", 12).attr("fill", "#d9d9d9").attr("stroke", "#666"); lg.append("text").attr("x", 24).attr("y", 62).attr("font-size", 11).text("In dataset, received $0 for this purpose"); lg.append("rect").attr("y", 74).attr("width", 18).attr("height", 12).attr("fill", hatch).attr("stroke", "#bbb"); lg.append("text").attr("x", 24).attr("y", 84).attr("font-size", 11).text("Not in dataset"); lg.append("text").attr("y", -40).attr("font-size", 15).attr("font-weight", "bold").text("Top 5 purposes: who receives them?"); return container.node(); }44:T11d7,viz3Heatmap = { const recipients = d3.rollups(top5Data, v => d3.sum(v, d => d.commitment_amount_usd_constant), d => d.recipient) .filter(([, v]) => v > 0).sort((a, b) => b[1] - a[1]); const rowTotal = new Map(recipients); const colTotal = new Map(top5Purposes.map(p => [p, d3.sum(purposeByRecipient.get(p)?.values() ?? [])])); const value = (c, p) => purposeByRecipient.get(p)?.get(geoName(c)) ?? 0; const share = (c, p) => v3Norm === "row" ? value(c, p) / rowTotal.get(c) : value(c, p) / colTotal.get(p); const width = 960, labelW = 140, cellW = 112, barW = 180, rowH = 21; const margin = {top: 110, bottom: 20}; const height = margin.top + recipients.length * rowH + margin.bottom; const x = d3.scaleBand(top5Purposes, [labelW, labelW + cellW * top5Purposes.length]).padding(0.04); const y = d3.scaleBand(recipients.map(d => d[0]), [margin.top, height - margin.bottom]).padding(0.08); const color = d3.scaleSequentialSqrt([0, 1], d3.interpolateBlues); const bx0 = labelW + cellW * top5Purposes.length + 20; const bar = d3.scaleLinear([0, recipients[0][1]], [0, barW]); const container = d3.create("div").style("position", "relative").style("background", "white").style("color", "#222").style("max-width", `${width}px`); const svg = container.append("svg").attr("viewBox", [0, 0, width, height]) .style("width", "100%").style("height", "auto").style("font-family", "system-ui, sans-serif"); const tip = makeTooltip(container.node()); svg.append("text").attr("x", 8).attr("y", 22).attr("font-size", 17).attr("font-weight", "bold") .text(v3Norm === "row" ? "What does each country receive? (share of its own top-5 aid)" : "Where does each purpose go? (share of the purpose's total)"); // Column headers (wrapped) const wrap = (s, n = 16) => s.split(" ").reduce((lines, w) => { const last = lines[lines.length - 1]; if (last && (last + " " + w).length <= n) lines[lines.length - 1] = last + " " + w; else lines.push(w); return lines; }, []); svg.append("g").selectAll("text").data(top5Purposes).join("text") .attr("x", d => x(d) + x.bandwidth() / 2).attr("y", margin.top - 50) .attr("text-anchor", "middle").attr("font-size", 11).attr("font-weight", 600) .selectAll("tspan").data(d => wrap(d)).join("tspan") .attr("x", function() { return this.parentNode.getAttribute("x"); }).attr("dy", (d, i) => i ? "1.15em" : 0).text(d => d); svg.append("text").attr("x", bx0).attr("y", margin.top - 10).attr("font-size", 11).attr("font-weight", 600) .text("Total top-5 aid received"); const row = svg.append("g").selectAll("g").data(recipients).join("g") .attr("transform", ([c]) => `translate(0,${y(c)})`); row.append("text").attr("x", labelW - 8).attr("y", y.bandwidth() / 2).attr("dy", "0.35em") .attr("text-anchor", "end").attr("font-size", 11).text(([c]) => c); row.selectAll("rect.cell").data(([c]) => top5Purposes.map(p => ({c, p, s: share(c, p), v: value(c, p)}))).join("rect") .attr("class", "cell").attr("x", d => x(d.p)).attr("width", x.bandwidth()).attr("height", y.bandwidth()) .attr("fill", d => d.v > 0 ? color(d.s) : "#f4f4f4") .on("mousemove", (event, d) => tip.show(event, `${d.c} · ${d.p}
Received: ${fmtUSD(d.v)}
` + `${d3.format(".1%")(d.v / rowTotal.get(d.c))} of ${d.c}'s top-5 aid
` + `${d3.format(".1%")(d.v / colTotal.get(d.p))} of all "${d.p}" aid`)) .on("mouseleave", () => tip.hide()); row.selectAll("text.pct").data(([c]) => top5Purposes.map(p => ({p, s: share(c, p)}))).join("text") .attr("class", "pct").attr("pointer-events", "none") .attr("x", d => x(d.p) + x.bandwidth() / 2).attr("y", y.bandwidth() / 2).attr("dy", "0.35em") .attr("text-anchor", "middle").attr("font-size", 10) .attr("fill", d => d.s > 0.45 ? "white" : "#333") .text(d => d.s >= 0.005 ? d3.format(".0%")(d.s) : ""); row.append("rect").attr("x", bx0).attr("width", ([, v]) => bar(v)).attr("height", y.bandwidth()).attr("fill", "#9aa5b1"); row.append("text").attr("x", ([, v]) => bx0 + bar(v) + 4).attr("y", y.bandwidth() / 2).attr("dy", "0.35em") .attr("font-size", 10).attr("fill", "#444").text(([, v]) => fmtUSD(v)); const lg = svg.append("g").attr("transform", `translate(${bx0},${margin.top - 72})`); drawRampLegend(lg, {color, x: d3.scaleLinear([0, 1], [0, 200]), tickValues: [0, 0.25, 0.5, 0.75, 1], tickFormat: d3.format(".0%"), title: v3Norm === "row" ? "Share of country's top-5 aid" : "Share of purpose total", height: 8}); return container.node(); }45:T133a,### Visualization #3 — Written analysis The 5 most frequent purposes are **Sectors not specified** (8,076 commitments, $8.55B), **Social/welfare services** (6,228, $9.21B), **Strengthening civil society** (5,600, $2.36B), **Higher education** (4,593, $3.63B) and **Multisector aid** (3,026, $4.79B). All of them flow mainly to a handful of large emerging economies (India, Colombia, South Africa, Thailand, Brazil, Chile) and to Central/Eastern Europe; donor countries (Western Europe, US, Japan) are grey in almost every panel. But **the purposes are distributed very differently:** - **Social/welfare services is concentrated in one country:** **Colombia** received $6.42B, i.e. **70%** of all social/welfare money, while every other recipient gets a small share. Colombia is the only dark cell of the map for this purpose. - **Sectors not specified is concentrated in India** ($5.07B, **59%** of the purpose total). - **Multisector aid** is also India-centred (41%) with Thailand second (22%), but it is the purpose that reaches **Central Europe** most strongly (Hungary $197M, Poland $168M). - **Strengthening civil society** is shared by four developing recipients — South Africa (30%), Colombia (26%), India (22%), Brazil (12%) — but it reaches the **fewest** countries (19) and is almost absent in Europe, East Asia and the Gulf. - **Higher education is the least concentrated purpose:** its largest recipient (India) holds only 25%, followed by Brazil 17%, Thailand 16%, Colombia 11% and South Africa 11%, plus South Korea, Chile, Romania, Slovenia and even the US ($30M, likely scholarships). Measured by concentration (Herfindahl index), its money is spread over the equivalent of ~6.9 equal recipients, versus ~4.4 for civil society, ~4.2 for multisector, ~2.6 for unspecified and ~2.0 for social welfare. - Note that "reaching many countries" and "being evenly spread" are different things: **social/welfare services reaches the most recipients (26)**, yet it is the *most* concentrated purpose because Colombia alone takes 70%. **Countries that receive more of certain types of donations** (row %): - **Colombia → social/welfare services** (80% of its top-5 aid). - **India → unspecified** (54%) and **multisector** (21%) aid. - **South Korea → higher education** (71%), and **Slovenia → higher education** (80%). - **Poland → multisector aid** (55%), **Hungary → multisector aid** (69%), while **Czech Republic → unspecified** (81%) — Central European transition-era aid tends to be broad, multi-sector support. - **South Africa** has the largest share of **civil-society** aid (24%), consistent with post-apartheid democracy-building programs. - Among the large recipients, **Brazil** has the most balanced mix (no purpose above 31% of its top-5 aid; only the much smaller Slovak Republic is equally balanced), and **Thailand** is also relatively diversified, led by multisector aid (37%). - The **Gulf states** receive mostly unspecified aid (Kuwait 64%, Saudi Arabia 51%) or social/welfare aid (Qatar 67%, UAE 68%), and **Taiwan** and the **United States** receive mainly higher-education aid (43% and 82%). (With the toggle on, "Sectors not specified" is replaced by **Material relief assistance and services** (largest recipient: 32%). The column-% conclusions for the other four purposes stay the same, because their totals do not change; the row-% values do change, because each country's top-5 total now includes a different fifth purpose, so some countries' dominant purpose can shift.) ### Visualization #3 — Design rationale - **Small multiples (A)** use the same map, the same projection and **one shared color scale** for all five purposes, so the eye can compare panels directly: a purpose that is dark in one place and pale elsewhere (social welfare → Colombia) is immediately distinguishable from one that is spread more evenly (higher education). A **log** color scale is needed because amounts per country range from thousands to billions of dollars; a linear scale would show only India and Colombia. The subtitle of each panel states the largest recipient and its share, answering "how concentrated" directly. Donor countries are shown in grey (received $0), distinct from hatched non-dataset countries. - **Heatmap (B), comparison.** Maps waste most of their area on countries that are not in the dataset and make small recipients (e.g. Baltic states, Slovenia) hard to see and to compare. The heatmap gives every recipient the same space, shows exact percentages, and the **row/column normalization switch** separates the two sub-questions: column % shows how each purpose is distributed among countries; row % shows which purpose dominates for each country. Its weakness is that it removes the geographic context (neighbors, regions), which is exactly what the maps provide. Using both gives the geographic overview and the precise per-country profile.46:[] 38:{"id":"a7bf65d690810bc5","slug":"mini-project-1-geographic-financial-aid-due-oct-29th","title":"Mini-Project 1: Geographic Financial Aid (Due Oct. 29th)","thumbnail":"e8f10bbb193ba7d06e3fb9597d7042e8062af5c241ef5da24c0e9868255c8b94","access_level":"public","create_time":"$D2026-10-28T05:15:22.015Z","update_time":"$D2026-10-28T07:28:13.104Z","view_time":null,"first_public_time":"$D2026-10-28T05:15:29.501Z","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":"ed775ad1e445e117","login":"zhangzhuoyue-shi","name":"Zhangzhuoyue Shi","avatar_url":"https://avatars-next.observableusercontent.com/b7a6e7a7c9510c6437f6d383464b87d66e9b1ca7d8a063546eb4fd5107404078","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":331,"publish_version":331,"role":null,"authored":false,"authors":[{"type":"individual","id":"b2dbefe24de67efd","login":"zhangzhuoyue-shi","name":"Zhangzhuoyue Shi","avatar_url":"https://avatars-next.observableusercontent.com/b7a6e7a7c9510c6437f6d383464b87d66e9b1ca7d8a063546eb4fd5107404078","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"ed775ad1e445e117","login":"zhangzhuoyue-shi","name":"Zhangzhuoyue Shi","avatar_url":"https://avatars-next.observableusercontent.com/b7a6e7a7c9510c6437f6d383464b87d66e9b1ca7d8a063546eb4fd5107404078","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":"## Mini-Project 1 Submission\n\n**Name:** Zhangzhuoyue Shi\n**NetID:** zs3699","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"## Data loading & preprocessing\n\nAll preprocessing is done here in JavaScript. The CSV is loaded directly from the course Google Sheet.\nFor each country I compute the total amount **donated** (sum of commitments where it is the `donor`) and **received** (sum where it is the `recipient`), plus:\n\n- **net** = donated − received (positive ⇒ net donor)\n- **balance** = (donated − received) / (donated + received), which ranges from **−1 (only receives)** to **+1 (only donates)**. This normalized index lets countries of very different sizes be compared on the same scale.\n\nMap shapes come from the `world-atlas` 1:50m TopoJSON (it includes small states such as Liechtenstein and Monaco). Four dataset names differ from the atlas names and are mapped in `geoName`.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"rawData = d3.csv(\"https://docs.google.com/spreadsheets/d/1YiuHdfZv_JZ-igOemKJMRaU8dkucfmHxOP6Od3FraW8/export?format=csv\", d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"data = rawData.filter(d => Number.isFinite(d.commitment_amount_usd_constant))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"countryTotals = {\n const amount = d => d.commitment_amount_usd_constant;\n const donated = d3.rollup(data, v => d3.sum(v, amount), d => d.donor);\n const received = d3.rollup(data, v => d3.sum(v, amount), d => d.recipient);\n const names = new Set([...donated.keys(), ...received.keys()]);\n return Array.from(names, country => {\n const don = donated.get(country) ?? 0;\n const rec = received.get(country) ?? 0;\n const total = don + rec;\n return {country, donated: don, received: rec, net: don - rec, total, balance: total > 0 ? (don - rec) / total : 0};\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"fmtUSD = v => (v < 0 ? \"−$\" : \"$\") + d3.format(\".3~s\")(Math.abs(v)).replace(\"G\", \"B\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"world = d3.json(\"https://cdn.jsdelivr.net/npm/world-atlas@2.0.2/countries-50m.json\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"countries = topojson.feature(world, world.objects.countries).features.filter(f => f.properties.name !== \"Antarctica\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"geoName = {\n // Dataset name -> world-atlas name\n const fixes = new Map([\n [\"United States\", \"United States of America\"],\n [\"Korea\", \"South Korea\"],\n [\"Czech Republic\", \"Czechia\"],\n [\"Slovak Republic\", \"Slovakia\"]\n ]);\n return name => fixes.get(name) ?? name;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"totalsByGeo = new Map(countryTotals.map(d => [geoName(d.country), d]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"balanceColor = d3.scaleDiverging([-1, 0, 1], d3.interpolateRdBu)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"regionBounds = ({\n world: [[-179.9, -58], [179.9, 84]],\n europe: [[-25, 34], [40, 71]],\n asia: [[30, 0], [146, 48]],\n americas: [[-170, -57], [-30, 72]]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"makeProjection = (region, width, height) => {\n const [[x0, y0], [x1, y1]] = regionBounds[region];\n // Sample the bounding box edges so the fit works with curved projections\n const edge = d3.range(0, 1.0001, 0.05).flatMap(t => [\n [x0 + (x1 - x0) * t, y0], [x0 + (x1 - x0) * t, y1],\n [x0, y0 + (y1 - y0) * t], [x1, y0 + (y1 - y0) * t]\n ]);\n const rotate = region === \"world\" ? 0 : -(x0 + x1) / 2;\n return d3.geoNaturalEarth1().rotate([rotate, 0])\n .fitExtent([[4, 4], [width - 4, height - 4]], {type: \"MultiPoint\", coordinates: edge});\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"mainCentroid = (feature, path) => {\n // Use the largest polygon so e.g. France's centroid is not pulled toward French Guiana\n if (feature.geometry.type !== \"MultiPolygon\") return path.centroid(feature);\n const polygons = feature.geometry.coordinates.map(coordinates => ({type: \"Polygon\", coordinates}));\n return path.centroid(d3.greatest(polygons, p => d3.geoArea(p)));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"makeTooltip = container => {\n const tip = d3.select(container).append(\"div\")\n .style(\"position\", \"absolute\").style(\"pointer-events\", \"none\")\n .style(\"background\", \"rgba(255,255,255,0.97)\").style(\"border\", \"1px solid #aaa\")\n .style(\"border-radius\", \"4px\").style(\"padding\", \"6px 9px\")\n .style(\"font\", \"12px/1.45 system-ui, sans-serif\").style(\"color\", \"#222\")\n .style(\"box-shadow\", \"0 2px 8px rgba(0,0,0,0.18)\").style(\"opacity\", 0)\n .style(\"max-width\", \"260px\").style(\"z-index\", 10);\n return {\n show(event, html) {\n const [x, y] = d3.pointer(event, container);\n const flip = x > container.clientWidth - 240;\n tip.html(html).style(\"opacity\", 1)\n .style(\"left\", flip ? null : `${x + 14}px`)\n .style(\"right\", flip ? `${container.clientWidth - x + 14}px` : null)\n .style(\"top\", `${y + 12}px`);\n },\n hide() { tip.style(\"opacity\", 0); }\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"drawRampLegend = (g, {color, x, tickValues, tickFormat, title, height = 10}) => {\n // Continuous color legend: gradient sampled through the position scale x\n const [x0, x1] = x.range();\n const id = \"ramp-\" + Math.random().toString(36).slice(2);\n const gradient = g.append(\"defs\").append(\"linearGradient\").attr(\"id\", id);\n for (const t of d3.range(0, 1.0001, 0.05)) {\n gradient.append(\"stop\").attr(\"offset\", `${t * 100}%`).attr(\"stop-color\", color(x.invert(x0 + t * (x1 - x0))));\n }\n g.append(\"rect\").attr(\"x\", x0).attr(\"width\", x1 - x0).attr(\"height\", height)\n .attr(\"fill\", `url(#${id})`).attr(\"stroke\", \"#999\").attr(\"stroke-width\", 0.5);\n g.append(\"g\").attr(\"transform\", `translate(0,${height})`)\n .call(d3.axisBottom(x).tickValues(tickValues).tickFormat(tickFormat).tickSize(4))\n .call(a => a.select(\".domain\").remove())\n .selectAll(\"text\").attr(\"font-size\", 10);\n g.append(\"text\").attr(\"x\", x0).attr(\"y\", -6).attr(\"font-size\", 11).attr(\"font-weight\", \"bold\").text(title);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"addHatch = svg => {\n // Diagonal hatch used for countries that are not in the dataset at all\n const id = \"hatch-\" + Math.random().toString(36).slice(2);\n svg.append(\"defs\").append(\"pattern\").attr(\"id\", id)\n .attr(\"patternUnits\", \"userSpaceOnUse\").attr(\"width\", 5).attr(\"height\", 5)\n .attr(\"patternTransform\", \"rotate(45)\")\n .call(p => p.append(\"rect\").attr(\"width\", 5).attr(\"height\", 5).attr(\"fill\", \"#f2f2f2\"))\n .call(p => p.append(\"line\").attr(\"x1\", 0).attr(\"y1\", 0).attr(\"x2\", 0).attr(\"y2\", 5).attr(\"stroke\", \"#d0d0d0\").attr(\"stroke-width\", 1.5));\n return `url(#${id})`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"---\n## Visualization #1 — Donated vs. received per country\n\n**Question:** 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?\n\n**Solution A — butterfly (back-to-back) bar chart.** Each row is one country. The blue bar to the right is the total amount it **donated**, the red bar to the left is the total amount it **received**. Rows are sorted by net balance (donated − received), so net donors are at the top, net recipients at the bottom, and the dashed line marks where a country switches from one group to the other. Use the radio button to switch bar length between a linear and a log scale. Hover a row for the exact numbers.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"viewof v1Scale = Inputs.radio([\"Linear\", \"Log\"], {label: \"Bar length scale\", value: \"Linear\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"$3e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"**Solution B — donated vs. received scatter plot.** Each country is a point: x = amount received, y = amount donated (both on a *symmetric log* scale, so that countries with exactly $0 on one side still appear, on the axis). The diagonal is where donated = received; the farther a point lies from the diagonal, the more lopsided the country is. Points above the diagonal (blue area) donate more than they receive, points below (red area) receive more. Color uses the same balance index as Visualization #2; circle size indicates the total volume","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"$3f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"$40","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"---\n## Visualization #2 — Geography of donors and recipients\n\n**Question:** 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?\n\n**Solution — diverging choropleth + proportional circles.** Each country is colored by its **balance index** (donated − received) / (donated + received): dark **red = only receives**, dark **blue = only donates**, white = balanced. Because the index hides *how much* money is involved, an optional circle on each country shows its total volume (donated + received). Hatched countries are not in the dataset. Use the selector to zoom into Europe, Asia or the Americas, where neighbors are easier to compare; hover any country for details.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"viewof v2Region = Inputs.select(new Map([[\"World\", \"world\"], [\"Europe\", \"europe\"], [\"Asia & Middle East\", \"asia\"], [\"Americas\", \"americas\"]]), {label: \"Map focus\", value: \"world\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"viewof v2Circles = Inputs.toggle({label: \"Show total volume (circles)\", value: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"$41","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"$42","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"---\n## Visualization #3 — Top 5 purposes by recipient geography\n\n**Question:** 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?\n\nThe top 5 purposes are computed as the 5 most frequent `coalesced_purpose_name` values (by number of commitments). Because \"Sectors not specified\" is not really a purpose, a toggle lets you replace it with the 6th most frequent purpose.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"viewof v3ExcludeUnspecified = Inputs.toggle({label: \"Exclude “Sectors not specified” (use the next most frequent purpose)\", value: false})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"purposeCounts = d3.rollup(data, v => v.length, d => d.coalesced_purpose_name)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"top5Purposes = d3.groupSort(data, v => -v.length, d => d.coalesced_purpose_name)\n .filter(p => !v3ExcludeUnspecified || p !== \"Sectors not specified\")\n .slice(0, 5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"top5Data = data.filter(d => top5Purposes.includes(d.coalesced_purpose_name))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"purposeByRecipient = d3.rollup(top5Data, v => d3.sum(v, d => d.commitment_amount_usd_constant),\n d => d.coalesced_purpose_name, d => geoName(d.recipient))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"**Solution A — small-multiple maps.** One map per purpose, all sharing the **same logarithmic color scale** (amount received for that purpose), so both the geography *within* a purpose and the totals *across* purposes are comparable. Light grey = a country that is in the dataset but received nothing for that purpose (typically a donor); hatched = not in the dataset. Each panel names its largest recipient and its share of that purpose's total.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"viewof v3Region = Inputs.select(new Map([[\"World\", \"world\"], [\"Europe\", \"europe\"], [\"Asia & Middle East\", \"asia\"], [\"Americas\", \"americas\"]]), {label: \"Map focus\", value: \"world\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"$43","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"**Solution B — recipient × purpose heatmap.** Maps are good for spatial patterns but make it hard to compare the many small European recipients and to read exact proportions. This heatmap lists every recipient (sorted by total top-5 aid, with that total as a bar on the right). Two normalizations answer the two sub-questions:\n\n- **Row % (share of each country's top-5 aid):** which *type* of donation dominates for a given country → \"countries that receive more of certain types\".\n- **Column % (share of each purpose's worldwide total):** how a purpose is spread across recipient countries → \"how the purposes distribute geographically\".","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"viewof v3Norm = Inputs.radio(new Map([[\"Row % — share of each country's top-5 aid\", \"row\"], [\"Column % — share of each purpose's total\", \"col\"]]), {label: \"Normalize by\", value: \"row\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"$44","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"$45","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"---\n## AI usage disclosure\n\nFollowing the course AI policy: the D3 code for the three visualizations and helper functions, and a first draft of the written analyses, were generated with the help of an AI assistant (Claude). I reviewed, ran, and verified all code and numbers in this notebook, edited the text, and I am able to explain all submitted work.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"2"}} 33:null