34:["$","title",null,{"children":"Mini-Project 1: Geographic Financial Aid (Due Oct. 29th) | Saakshi Narayan | 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:Taa4,## My Solutions **AI use disclosure (course policy):** I used Claude (Anthropic) to help write the D3 code for the charts and the Appendix helpers. I verified the numbers against the data myself, edited the text, and can explain every design and implementation choice in this notebook. ### Data and preprocessing (all in JavaScript, in this notebook) All the code for this section lives in the **Appendix** at the end. - **Loading.** The course spreadsheet is pulled directly from Google Sheets as a CSV (`rawData`). It contains 98,540 commitments among 47 countries, spanning 1973–2013. - **Self-flows.** Six rows list the same country as both donor and recipient (e.g. Liechtenstein → Liechtenstein). They total roughly $140K and carry no information about giving vs. receiving, so I filter them out. - **Negative value.** There is a single negative commitment (−$55,619, Australia → Thailand, 2009), most likely a cancellation or de-obligation. I left it in since it's a legitimate correction, and it's far too small to affect any chart. - **Inconsistent purpose names.** One purpose code can appear under several spellings: *"Social/ welfare services"*, *"Social/welfare services"* and *"SOCIAL/WELFARE SERVICES"* are all code 16010. So any grouping by purpose uses `coalesced_purpose_code` rather than the name. (The top 5 comes out identical either way, but grouping by name gives slightly wrong counts.) - **Country names.** Four countries are spelled differently in the sheet vs. the map file (United States, Korea, Czech Republic, Slovak Republic); `atlasToData` handles that mapping manually. - **Map shapes.** Geometry comes from the Natural Earth 1:50m countries in `world-atlas@2.0.2` (via jsdelivr). I went with 50m instead of the more typical 110m because 110m is missing Monaco and Liechtenstein, which are both in the dataset. - **"Balance index".** For Q1 and Q2 I reduce each country to a single number: balance = (received − donated) / (received + donated) The range is **−1 (donates only)** to **+1 (receives only)**, and 0 means the two are equal. It's essentially a symmetric version of the received/donated ratio: ±0.5 corresponds to one side being 3× the other and ±0.82 to 10×, which is why those values appear as ticks in the legends. I prefer it to the raw difference (received − donated), since the difference is driven almost entirely by a few very large countries, whereas the index puts Iceland and Japan on a comparable scale. Caveat: the amounts are **commitments** in constant USD, not actual disbursements, and this is a reduced "countries only" cut of AidData, so most of the world's low-income recipients (most of Africa, for example) aren't in it at all.3f:T17bc,chart1A = { // Butterfly chart: donated to the left, received to the right, sorted by net position const data = d3.sort(countries, d => d.received - d.donated); // biggest net donor first const W = Math.min(width, 920); const margin = { top: 96, right: 14, bottom: 46, left: 14 }; const labelW = 136, rowH = 16; const innerW = W - margin.left - margin.right; const half = (innerW - labelW) / 2; const H = data.length * rowH; const maxV = d3.max(data, d => Math.max(d.donated, d.received)); const xDon = d3.scaleLinear([0, maxV], [half, 0]).nice(); const xRec = d3.scaleLinear(xDon.domain(), [half + labelW, innerW]); const y = d3.scaleBand(data.map(d => d.name), [0, H]).paddingInner(0.22); const container = d3.create("div").style("position", "relative").style("font-family", "sans-serif"); const svg = container.append("svg") .attr("viewBox", [0, 0, W, H + margin.top + margin.bottom]) .attr("width", W).style("max-width", "100%").style("height", "auto") .attr("font-family", "sans-serif").attr("font-size", 11); const tip = makeTooltip(container.node()); svg.append("text").attr("x", margin.left).attr("y", 20).attr("font-size", 16).attr("font-weight", 700) .text("Who gives and who receives? Total aid committed by each country, 1973–2013"); svg.append("text").attr("x", margin.left).attr("y", 40).attr("font-size", 12).attr("fill", "#555") .text("Constant US dollars, summed over all commitments. Rows are sorted from the largest net donor (top) to the largest net recipient (bottom)."); svg.append("text").attr("x", margin.left).attr("y", 56).attr("font-size", 12).attr("fill", "#555") .text("Both sides share the same linear scale; hover a row for exact numbers."); const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`); // light grid + axes (one per side) const fmtAxis = d => d === 0 ? "0" : fmtMoney(d); const ticks = xDon.ticks(4); g.append("g").attr("stroke", "#e6e6e6") .selectAll("line").data([...ticks.map(t => xDon(t)), ...ticks.map(t => xRec(t))]).join("line") .attr("x1", d => d).attr("x2", d => d).attr("y1", -4).attr("y2", H); g.append("g").attr("transform", `translate(0,${H})`) .call(d3.axisBottom(xDon).ticks(4).tickFormat(fmtAxis).tickSizeOuter(0)) .call(a => a.select(".domain").remove()); g.append("g").attr("transform", `translate(0,${H})`) .call(d3.axisBottom(xRec).ticks(4).tickFormat(fmtAxis).tickSizeOuter(0)) .call(a => a.select(".domain").remove()); g.append("text").attr("x", half / 2).attr("y", H + 36).attr("text-anchor", "middle").attr("fill", "#444") .text("Total donated (USD)"); g.append("text").attr("x", half + labelW + half / 2).attr("y", H + 36).attr("text-anchor", "middle").attr("fill", "#444") .text("Total received (USD)"); // column headers g.append("text").attr("x", half - 2).attr("y", -12).attr("text-anchor", "end") .attr("font-weight", 700).attr("font-size", 13).attr("fill", DONATE).text("◀ Donated"); g.append("text").attr("x", half + labelW + 2).attr("y", -12) .attr("font-weight", 700).attr("font-size", 13).attr("fill", RECEIVE).text("Received ▶"); // divider between net donors and net recipients const firstRecipient = data.findIndex(d => d.received > d.donated); const yDiv = y(data[firstRecipient].name) - (y.step() * y.paddingInner()) / 2; g.append("line").attr("x1", 0).attr("x2", innerW).attr("y1", yDiv).attr("y2", yDiv) .attr("stroke", "#888").attr("stroke-dasharray", "4 3"); g.append("text").attr("x", innerW).attr("y", yDiv - 5).attr("text-anchor", "end").attr("fill", DONATE) .attr("font-weight", 600).text(`▲ ${firstRecipient} net donors`); g.append("text").attr("x", innerW).attr("y", yDiv + 13).attr("text-anchor", "end").attr("fill", RECEIVE) .attr("font-weight", 600).text(`▼ ${data.length - firstRecipient} net recipients`); const row = g.append("g").selectAll("g").data(data).join("g") .attr("transform", d => `translate(0,${y(d.name)})`); row.append("rect").attr("x", d => xDon(d.donated)).attr("width", d => half - xDon(d.donated)) .attr("height", y.bandwidth()).attr("fill", DONATE); row.append("rect").attr("x", half + labelW).attr("width", d => xRec(d.received) - (half + labelW)) .attr("height", y.bandwidth()).attr("fill", RECEIVE); row.append("text").attr("x", half + labelW / 2).attr("y", y.bandwidth() / 2).attr("dy", "0.35em") .attr("text-anchor", "middle").attr("fill", "#222").text(d => d.name); // label only the very large bars (>= $10B) so the chart is not cluttered // (long bars get the label inside the bar in white, shorter ones get it just outside) const inside = w => w > 70; row.filter(d => d.donated >= 1e10).append("text") .attr("x", d => inside(half - xDon(d.donated)) ? xDon(d.donated) + 5 : xDon(d.donated) - 4) .attr("text-anchor", d => inside(half - xDon(d.donated)) ? "start" : "end") .attr("fill", d => inside(half - xDon(d.donated)) ? "white" : DONATE) .attr("y", y.bandwidth() / 2).attr("dy", "0.35em").attr("font-weight", 600).text(d => fmtMoney(d.donated)); row.filter(d => d.received >= 1e10).append("text") .attr("x", d => inside(xRec(d.received) - half - labelW) ? xRec(d.received) - 5 : xRec(d.received) + 4) .attr("text-anchor", d => inside(xRec(d.received) - half - labelW) ? "end" : "start") .attr("fill", d => inside(xRec(d.received) - half - labelW) ? "white" : RECEIVE) .attr("y", y.bandwidth() / 2).attr("dy", "0.35em").attr("font-weight", 600).text(d => fmtMoney(d.received)); // invisible hover band per row row.append("rect").attr("x", 0).attr("width", innerW).attr("y", -1).attr("height", y.bandwidth() + 2) .attr("fill", "#000").attr("fill-opacity", 0) .on("mouseenter", function (event, d) { d3.select(this).attr("fill-opacity", 0.06); tip.show(event, countryTip(d)); }) .on("mousemove", (event, d) => tip.show(event, countryTip(d))) .on("mouseleave", function () { d3.select(this).attr("fill-opacity", 0); tip.hide(); }); return container.node(); }40:T1ed1,chart1B = { // Scatter plot of donated (x) vs received (y) on symmetric-log axes, so that tiny and huge countries both show up. const W = Math.min(width, 820), H = Math.round(W * 0.86); const margin = { top: 140, right: 28, bottom: 58, left: 78 }; const iw = W - margin.left - margin.right, ih = H - margin.top - margin.bottom; const maxV = 1.5 * d3.max(countries, d => Math.max(d.donated, d.received)); // small offset (12px) so countries sitting exactly at $0 are not drawn on top of the axis const x = d3.scaleSymlog().constant(1e6).domain([0, maxV]).range([12, iw]); const y = d3.scaleSymlog().constant(1e6).domain([0, maxV]).range([ih - 12, 0]); const tickVals = [0, 1e6, 1e7, 1e8, 1e9, 1e10, 1e11].filter(v => v <= maxV); const fmtAxis = d => d === 0 ? "$0" : fmtMoney(d); const container = d3.create("div").style("position", "relative").style("font-family", "sans-serif"); const svg = container.append("svg").attr("viewBox", [0, 0, W, H]).attr("width", W) .style("max-width", "100%").style("height", "auto").attr("font-family", "sans-serif").attr("font-size", 11); const tip = makeTooltip(container.node()); svg.append("text").attr("x", 10).attr("y", 20).attr("font-size", 16).attr("font-weight", 700) .text("Donated vs. received, on log-like axes"); svg.append("text").attr("x", 10).attr("y", 40).attr("font-size", 12).attr("fill", "#555") .text("Each dot is a country. On the diagonal a country gives exactly as much as it gets; the dashed lines mark a 10× imbalance."); svg.append("text").attr("x", 10).attr("y", 56).attr("font-size", 12).attr("fill", "#555") .text("Axes use a symmetric-log scale (linear below $1M, logarithmic above) so countries that never donate or never receive still appear at 0."); const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`); const clip = uid("clip"); g.append("clipPath").attr("id", clip).append("rect").attr("width", iw).attr("height", ih); // shaded "10x" regions, built by sampling the curves y = 10x and y = x/10 const xs = [0, ...d3.range(0, 12.01, 0.05).map(e => 10 ** e)].filter(v => v <= maxV); const above = [[0, 0], ...xs.map(v => [v, Math.min(10 * v, maxV)]), [maxV, maxV], [0, maxV]]; const below = [[0, 0], ...xs.map(v => [v, v / 10]), [maxV, 0]]; const area = pts => d3.line()(pts.map(([a, b]) => [x(a), y(b)])) + "Z"; g.append("path").attr("d", area(above)).attr("fill", RECEIVE).attr("fill-opacity", 0.07).attr("clip-path", `url(#${clip})`); g.append("path").attr("d", area(below)).attr("fill", DONATE).attr("fill-opacity", 0.07).attr("clip-path", `url(#${clip})`); g.append("text").attr("x", x(2e7)).attr("y", y(maxV / 1.4)).attr("dy", "0.35em").attr("fill", RECEIVE).attr("font-weight", 700).attr("font-size", 12) .text("Receives more than 10× what it gives"); g.append("text").attr("x", iw - 8).attr("y", y(3e6)).attr("text-anchor", "end").attr("fill", DONATE) .attr("font-weight", 700).attr("font-size", 12).text("Gives more than 10× what it receives"); // grid + axes g.append("g").attr("stroke", "#e8e8e8").selectAll("line").data(tickVals).join("line") .attr("x1", d => x(d)).attr("x2", d => x(d)).attr("y1", 0).attr("y2", ih); g.append("g").attr("stroke", "#e8e8e8").selectAll("line").data(tickVals).join("line") .attr("y1", d => y(d)).attr("y2", d => y(d)).attr("x1", 0).attr("x2", iw); g.append("g").attr("transform", `translate(0,${ih})`) .call(d3.axisBottom(x).tickValues(tickVals).tickFormat(fmtAxis)) .call(a => a.select(".domain").remove()); g.append("g").call(d3.axisLeft(y).tickValues(tickVals).tickFormat(fmtAxis)) .call(a => a.select(".domain").remove()); g.append("text").attr("x", iw / 2).attr("y", ih + 42).attr("text-anchor", "middle").attr("fill", "#333") .text("Total donated (USD, symlog scale) →"); g.append("text").attr("transform", `translate(${-58},${ih / 2}) rotate(-90)`).attr("text-anchor", "middle") .attr("fill", "#333").text("Total received (USD, symlog scale) →"); // reference lines const curve = f => d3.line()(xs.map(v => [x(v), y(Math.min(f(v), maxV))])); g.append("path").attr("d", curve(v => v)).attr("fill", "none").attr("stroke", "#777").attr("stroke-width", 1.2); g.append("path").attr("d", curve(v => 10 * v)).attr("fill", "none").attr("stroke", "#999").attr("stroke-dasharray", "4 3"); g.append("path").attr("d", curve(v => v / 10)).attr("fill", "none").attr("stroke", "#999").attr("stroke-dasharray", "4 3"); g.append("text").attr("x", x(4e10)).attr("y", y(4e10)).attr("dy", -6).attr("text-anchor", "end") .attr("fill", "#666").attr("font-style", "italic").attr("transform", `rotate(${-Math.atan2(y(1e9) - y(1e10), x(1e10) - x(1e9)) * 180 / Math.PI}, ${x(4e10)}, ${y(4e10)})`) .text("gives = receives"); // points (big first so small ones stay on top) const pts = d3.sort(countries, d => -d.total); g.append("g").selectAll("circle").data(pts).join("circle") .attr("cx", d => x(d.donated)).attr("cy", d => y(d.received)).attr("r", 5.5) .attr("fill", d => balanceColor(d.balance)).attr("stroke", "#333").attr("stroke-width", 0.7) .on("mouseenter mousemove", (event, d) => tip.show(event, countryTip(d))) .on("mouseleave", () => tip.hide()); // greedy label placement: try 4 spots around each dot, skip if it would overlap something const placed = pts.map(d => ({ x0: x(d.donated) - 6, x1: x(d.donated) + 6, y0: y(d.received) - 6, y1: y(d.received) + 6 })); const overlaps = b => b.x0 < 0 || b.x1 > iw || b.y0 < 0 || b.y1 > ih || placed.some(p => b.x0 < p.x1 && b.x1 > p.x0 && b.y0 < p.y1 && b.y1 > p.y0); // dots that sit almost on top of each other share one label ("Poland / Colombia") const groups = []; for (const d of d3.sort(countries, d => -d.total)) { const near = groups.find(gp => Math.hypot(gp.cx - x(d.donated), gp.cy - y(d.received)) < 11); if (near) near.name += ` / ${d.name}`; else groups.push({ cx: x(d.donated), cy: y(d.received), name: d.name }); } const labels = []; for (const d of groups) { const cx = d.cx, cy = d.cy, w = d.name.length * 5.9, h = 11; const options = [ { x: cx + 8, y: cy + 4, a: "start", b: { x0: cx + 8, x1: cx + 8 + w, y0: cy - 6, y1: cy + 5 } }, { x: cx - 8, y: cy + 4, a: "end", b: { x0: cx - 8 - w, x1: cx - 8, y0: cy - 6, y1: cy + 5 } }, { x: cx, y: cy - 9, a: "middle", b: { x0: cx - w / 2, x1: cx + w / 2, y0: cy - 9 - h, y1: cy - 8 } }, { x: cx, y: cy + 17, a: "middle", b: { x0: cx - w / 2, x1: cx + w / 2, y0: cy + 7, y1: cy + 18 } }, { x: cx + 7, y: cy - 6, a: "start", b: { x0: cx + 7, x1: cx + 7 + w, y0: cy - 16, y1: cy - 5 } }, { x: cx + 7, y: cy + 14, a: "start", b: { x0: cx + 7, x1: cx + 7 + w, y0: cy + 4, y1: cy + 15 } }, // last resort: further away, with a thin leader line back to the dot ...[[60, 0], [60, -14], [60, 14], [30, 28], [30, -28]].map(([dx, dy]) => ({ x: cx + dx, y: cy + dy + 4, a: "start", lead: true, cx, cy, b: { x0: cx + dx, x1: cx + dx + w, y0: cy + dy - 6, y1: cy + dy + 5 } })) ]; const ok = options.find(o => !overlaps(o.b)); if (ok) { placed.push(ok.b); labels.push({ ...ok, name: d.name }); } } g.append("g").attr("stroke", "#888").selectAll("line").data(labels.filter(l => l.lead)).join("line") .attr("x1", l => l.cx + 5).attr("y1", l => l.cy).attr("x2", l => l.x - 2).attr("y2", l => l.y - 4); g.append("g").attr("pointer-events", "none").selectAll("text").data(labels).join("text") .attr("x", d => d.x).attr("y", d => d.y).attr("text-anchor", d => d.a) .attr("fill", "#222").attr("paint-order", "stroke").attr("stroke", "white").attr("stroke-width", 3) .text(d => d.name); balanceLegend(svg.append("g").attr("transform", `translate(${margin.left},${88})`), { width: 300, title: "Dot color = balance index" }); return container.node(); }41:T952,### Analysis (Visualization #1) **Both giving and receiving are heavily concentrated.** Two donors account for almost two-thirds of all aid given: the **United States ($116B, 32% of all aid in the dataset)** and **Japan ($114B, 31%)**, followed by Germany ($47B), the UK ($24B) and France ($15.5B). On the recipient side, **India alone accounts for $134B, 37% of the total**, and never shows up as a donor. Most of the remainder goes to Thailand ($49B), Brazil ($37B), Colombia ($25.5B), Korea ($25B), Poland ($24.5B) and South Africa ($18.7B). **Most countries fall clearly on one side.** The butterfly chart (1A) splits into 17 net donors and 30 net recipients, and for most rows only one bar is even visible. The scatter plot (1B) makes this more obvious: nearly every dot lies outside the dashed "10×" lines, meaning the typical country gives (or receives) at least ten times what flows in the opposite direction. - **Donate far more than they receive:** Germany, the Netherlands and Switzerland received essentially nothing ($0, $0 and $0.3M). The US received just $105M against $116B given, roughly 1,100 to 1. Japan, France, Sweden, the UK, Denmark, Norway and Belgium all exceed 10× on the giving side. Monaco is an odd edge case: it only donates, but only about $0.9M in total. - **Receive far more than they donate:** India, South Africa, Romania, Latvia and Lithuania never donate. Thailand, Brazil, Colombia, Poland, Chile and Hungary donate so little (about $1M at most) that their index is effectively +1. Korea and Taiwan stand out because they *do* donate meaningful amounts (Korea $1.3B), yet still received 19× and 40× more, respectively. - **Roughly balanced:** only **Austria** ($784M given vs. $770M received) and **Australia** ($2.45B vs. $2.57B) sit right on the diagonal. Canada and Italy also both give and receive substantial amounts (Canada gave $7.5B and received $4.1B, mostly from the US), so they're donors, but only by a factor of about 2. - **Gulf states sit in between:** Saudi Arabia, Kuwait, Qatar and the UAE all donate (Saudi Arabia $1.7B, Kuwait $1.4B) but receive 3–7× more, so they show up as moderate rather than pure recipients. Something I didn't expect: being a major donor and being a major recipient aren't mutually exclusive. Korea is the 5th largest recipient and still gives more than Austria, Finland, Ireland or Luxembourg.42:T8ac,### Design rationale (Visualization #1) **1A, butterfly (back-to-back) bar chart.** The question compares two quantities per country, so each country gets one row with the two quantities on either side of its name. Bar length along a shared, zero-based axis is the most accurate channel for magnitude, and putting both sides on the *same* scale lets you compare a country's two bars directly. Rows are sorted by net position (donated − received) rather than alphabetically, so the chart reads as a ranking: largest net donors on top, largest net recipients at the bottom, with a dashed line where the sign changes. Color is redundant with position here (purple = donated, orange = received), but I kept it because the same purple/orange encoding is reused in every chart in the notebook, so the reader only has to learn it once. Following the clarity notebook's advice against labeling every value, only bars above $10B get labels; exact values for every country are in the tooltip. **1B, scatter plot on symmetric-log axes.** 1A's weakness is that the values span several orders of magnitude, so on a linear scale about half the countries have bars too small to see, and "small" is indistinguishable from "zero". In 1B each country is a point at (donated, received). The diagonal is "gives = receives" and the dashed lines mark a 10× imbalance, so "does it donate *much* more than it receives?" reduces to "is the point outside the dashed lines?", which can be checked for all 47 countries at once. I chose `d3.scaleSymlog` over a log scale because India, South Africa and others donated exactly $0, and Germany/Netherlands received exactly $0; a log scale can't represent zero, whereas symlog is linear near 0 and logarithmic above $1M. **Comparing the two.** 1A is more accessible to a general audience and represents absolute size faithfully (the US and Japan clearly dwarf everyone else). 1B does a better job on the "much more" part of the question and makes small countries visible, but log scales are harder to read: the gap between $1M and $10M looks the same as the gap between $10B and $100B, which makes it poor for judging totals. I see them as complementary: 1A for "how much", 1B for "how lopsided".43:T103f,chart2A = { // Choropleth of the balance index, with a zoomed Europe/Middle-East panel const F = mapFrame({ W: Math.min(width, 980), title: "Where are the givers and where are the receivers?", subtitle: "Color = balance index (received − donated) / (received + donated), all commitments 1973–2013. Hatched = not in the dataset." }); for (const p of F.panels) { p.g.append("g").selectAll("path").data(worldFeatures).join("path") .attr("d", p.path) .attr("fill", f => countryByName.has(f.dataName) ? balanceColor(countryByName.get(f.dataName).balance) : `url(#${F.hatch})`) .attr("stroke", "#fff").attr("stroke-width", p.key === "world" ? 0.4 : 0.7) .on("mouseenter mousemove", (event, f) => { const d = countryByName.get(f.dataName); F.tip.show(event, d ? countryTip(d) : `${f.properties.name}
not in the dataset`); }) .on("mouseleave", () => F.tip.hide()); } // In the zoomed panel: name labels where there is room, and markers for micro-states const inset = F.panels[1]; const micro = new Set(["Monaco", "Liechtenstein", "Luxembourg", "Qatar", "Cyprus"]); const lab = worldFeatures.filter(f => countryByName.has(f.dataName)).map(f => { const [cx, cy] = inset.projection(mainCentroid(f)); const [[x0, y0], [x1, y1]] = inset.path.bounds(f); return { f, d: countryByName.get(f.dataName), cx, cy, bw: x1 - x0 }; }).filter(l => l.cx > inset.x && l.cx < inset.x + inset.w && l.cy > inset.y && l.cy < inset.y + inset.h); inset.g.append("g").selectAll("circle").data(lab.filter(l => micro.has(l.d.name))).join("circle") .attr("cx", l => l.cx).attr("cy", l => l.cy).attr("r", 4.5) .attr("fill", l => balanceColor(l.d.balance)).attr("stroke", "#222").attr("stroke-width", 1) .on("mouseenter mousemove", (event, l) => F.tip.show(event, countryTip(l.d))) .on("mouseleave", () => F.tip.hide()); // greedy label placement: big countries first; skip a label if it would collide with one already placed const placed = lab.filter(l => micro.has(l.d.name)).map(l => ({ x0: l.cx - 5, x1: l.cx + 5, y0: l.cy - 5, y1: l.cy + 5 })); const hit = b => b.x0 < inset.x || b.x1 > inset.x + inset.w || b.y0 < inset.y + 22 || b.y1 > inset.y + inset.h || placed.some(p => b.x0 < p.x1 && b.x1 > p.x0 && b.y0 < p.y1 && b.y1 > p.y0); const labels = []; for (const l of d3.sort(lab, l => micro.has(l.d.name) ? 1 : 0, l => -l.bw)) { const w = l.d.name.length * 5.3, h = 10; const opts = micro.has(l.d.name) ? [[l.cx + 7, l.cy, "start"], [l.cx - 7, l.cy, "end"], [l.cx, l.cy - 11, "middle"], [l.cx, l.cy + 11, "middle"]] : l.bw > w * 0.8 ? [[l.cx, l.cy, "middle"], [l.cx, l.cy + 11, "middle"], [l.cx, l.cy - 11, "middle"]] : []; for (const [tx, ty, a] of opts) { const x0 = a === "start" ? tx : a === "end" ? tx - w : tx - w / 2; const b = { x0, x1: x0 + w, y0: ty - h / 2, y1: ty + h / 2 }; if (!hit(b)) { placed.push(b); labels.push({ tx, ty, a, name: l.d.name }); break; } } } inset.g.append("g").attr("pointer-events", "none").selectAll("text").data(labels).join("text") .attr("x", l => l.tx).attr("y", l => l.ty).attr("dy", "0.35em").attr("text-anchor", l => l.a) .attr("font-size", 9.5).attr("fill", "#111") .attr("paint-order", "stroke").attr("stroke", "rgba(255,255,255,0.85)").attr("stroke-width", 2.5) .text(l => l.name); balanceLegend(F.svg.append("g").attr("transform", `translate(${F.side.x},${F.side.y + 26})`), { width: Math.min(F.side.w - 10, 300), title: "Balance index" }); const n = F.svg.append("g").attr("transform", `translate(${F.side.x},${F.side.y + 110})`); n.append("rect").attr("width", 18).attr("height", 12).attr("fill", `url(#${F.hatch})`).attr("stroke", "#ccc"); n.append("text").attr("x", 24).attr("y", 10).attr("fill", "#444").text("Not in the dataset"); n.append("circle").attr("cx", 9).attr("cy", 32).attr("r", 4.5).attr("fill", "#fff").attr("stroke", "#222"); n.append("text").attr("x", 24).attr("y", 36).attr("fill", "#444").text("Very small country (marker)"); return F.container.node(); }44:T1656,chart2B = { // Dumbbell chart: pairs of neighboring countries, sorted by how different their balance index is. // By default only pairs that differ by at least 0.5 are drawn; a button reveals all of them. const W = Math.min(width, 860); const rowH = 19; const margin = { top: 128, right: 130, bottom: 40, left: 130 }; const iw = W - margin.left - margin.right; const x = d3.scaleLinear([-1, 1], [0, iw]); const ticks = [-1, -0.818, -0.5, 0, 0.5, 0.818, 1]; const tickLab = d => ({ "-1": "only gives", "-0.818": "10×", "-0.5": "3×", "0": "equal", "0.5": "3×", "0.818": "10×", "1": "only receives" })[d]; const MIN_GAP = 0.5; const container = d3.create("div").style("position", "relative").style("font-family", "sans-serif"); const button = container.append("button") .style("position", "absolute").style("left", "0px").style("top", "64px") .style("font-size", "12px").style("padding", "3px 8px").style("border", "1px solid #999") .style("border-radius", "4px").style("background", "#fff").style("cursor", "pointer"); const svg = container.append("svg").attr("width", W).style("max-width", "100%").style("height", "auto") .attr("font-family", "sans-serif").attr("font-size", 11); const tip = makeTooltip(container.node()); let showAll = false; button.on("click", () => { showAll = !showAll; render(); }); function render() { const data = showAll ? neighborPairs : neighborPairs.filter(e => e.gap >= MIN_GAP); const hidden = neighborPairs.length - data.length; button.text(showAll ? `Show only pairs that differ by ≥ ${MIN_GAP}` : `Show all ${neighborPairs.length} neighbor pairs (+${hidden} similar ones)`); const k = data.findIndex(e => e.gap < 1); // first pair that differs by less than 1 const extra = k > 0 ? 16 : 0; // vertical gap to separate the "radically different" group const ih = data.length * rowH + extra; const yb = d3.scaleBand(d3.range(data.length), [0, data.length * rowH]).padding(0.3); const y = i => yb(i) + (k > 0 && i >= k ? extra : 0); y.bandwidth = yb.bandwidth; svg.selectAll("*").remove(); svg.attr("viewBox", [0, 0, W, ih + margin.top + margin.bottom]); svg.append("text").attr("x", 0).attr("y", 20).attr("font-size", 16).attr("font-weight", 700) .text("Neighbors that behave very differently"); svg.append("text").attr("x", 0).attr("y", 40).attr("font-size", 12).attr("fill", "#555") .text("Pairs of neighboring countries (both in the data), sorted by the gap between their balance indices."); svg.append("text").attr("x", 0).attr("y", 56).attr("font-size", 12).attr("fill", "#555") .text("Solid = shared land border (computed from the map topology); dashed = short sea crossing (added by hand)."); const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`); g.append("rect").attr("x", x(-1)).attr("width", x(0) - x(-1)).attr("y", -26).attr("height", ih + 26).attr("fill", DONATE).attr("fill-opacity", 0.05); g.append("rect").attr("x", x(0)).attr("width", x(1) - x(0)).attr("y", -26).attr("height", ih + 26).attr("fill", RECEIVE).attr("fill-opacity", 0.05); g.append("text").attr("x", x(-0.5)).attr("y", -12).attr("text-anchor", "middle").attr("fill", DONATE).attr("font-weight", 700).text("◀ gives more than it receives"); g.append("text").attr("x", x(0.5)).attr("y", -12).attr("text-anchor", "middle").attr("fill", RECEIVE).attr("font-weight", 700).text("receives more than it gives ▶"); g.append("g").attr("stroke", "#e3e3e3").selectAll("line").data(ticks).join("line") .attr("x1", d => x(d)).attr("x2", d => x(d)).attr("y1", 0).attr("y2", ih).attr("stroke", d => d === 0 ? "#999" : null); g.append("g").attr("transform", `translate(0,${ih})`).call(d3.axisBottom(x).tickValues(ticks).tickFormat(tickLab)) .call(a => a.select(".domain").remove()); g.append("text").attr("x", iw / 2).attr("y", ih + 32).attr("text-anchor", "middle").attr("fill", "#444") .text("Balance index = (received − donated) / (received + donated)"); if (k > 0) { const yy = y(k) - 9; g.append("line").attr("x1", -margin.left).attr("x2", iw + margin.right).attr("y1", yy).attr("y2", yy).attr("stroke", "#777").attr("stroke-dasharray", "4 3"); g.append("text").attr("x", iw / 2).attr("y", yy).attr("dy", "0.35em").attr("text-anchor", "middle").attr("font-weight", 600).attr("fill", "#333") .attr("paint-order", "stroke").attr("stroke", "white").attr("stroke-width", 6) .text(`▲ ${k} pairs differ by ≥ 1 on the index (radically different) ▼ smaller gaps`); } const row = g.append("g").selectAll("g").data(data).join("g").attr("transform", (e, i) => `translate(0,${y(i) + y.bandwidth() / 2})`); row.append("line").attr("x1", e => x(e.a.balance)).attr("x2", e => x(e.b.balance)) .attr("stroke", "#9a9a9a").attr("stroke-width", 2.5).attr("stroke-dasharray", e => e.type === "sea neighbor" ? "3 2" : null); for (const side of ["a", "b"]) { row.append("circle").attr("cx", e => x(e[side].balance)).attr("r", 5.5) .attr("fill", e => balanceColor(e[side].balance)).attr("stroke", "#333").attr("stroke-width", 0.8) .on("mouseenter mousemove", (event, e) => tip.show(event, countryTip(e[side]) + `
${e.type}: ${e.a.name} – ${e.b.name}`)) .on("mouseleave", () => tip.hide()); row.append("text").attr("x", e => x(e[side].balance) + (side === "a" ? -9 : 9)).attr("dy", "0.35em") .attr("text-anchor", side === "a" ? "end" : "start").attr("fill", "#222").text(e => e[side].name); } } render(); return container.node(); }45:T8c5,chart2C = { // Alternative to 2A: proportional symbols (size = total money moved, color = balance) const F = mapFrame({ W: Math.min(width, 980), title: "Alternative: proportional-symbol map", subtitle: "Circle area = total aid moved (donated + received); color = balance index. Grey shapes are only there for context." }); const r = d3.scaleSqrt([0, d3.max(countries, d => d.total)], [0, 30]); const rInset = d3.scaleSqrt(r.domain(), [0, 38]); const byName = new Map(worldFeatures.map(f => [f.dataName, f])); const pts = d3.sort(countries, d => -d.total).map(d => ({ d, f: byName.get(d.name) })); for (const p of F.panels) { const rr = p.key === "world" ? r : rInset; p.g.append("g").selectAll("path").data(worldFeatures).join("path").attr("d", p.path) .attr("fill", f => countryByName.has(f.dataName) ? "#e2e2e2" : "#f3f3f3").attr("stroke", "#fff").attr("stroke-width", 0.5); p.g.append("g").selectAll("circle").data(pts).join("circle") .attr("transform", e => `translate(${p.projection(mainCentroid(e.f))})`) .attr("r", e => Math.max(2.5, rr(e.d.total))) .attr("fill", e => balanceColor(e.d.balance)).attr("fill-opacity", 0.9) .attr("stroke", "#333").attr("stroke-width", 0.6) .on("mouseenter mousemove", (event, e) => F.tip.show(event, countryTip(e.d))) .on("mouseleave", () => F.tip.hide()); } balanceLegend(F.svg.append("g").attr("transform", `translate(${F.side.x},${F.side.y + 26})`), { width: Math.min(F.side.w - 10, 300), title: "Circle color = balance index" }); const s = F.svg.append("g").attr("transform", `translate(${F.side.x},${F.side.y + 120})`); s.append("text").attr("font-weight", 600).attr("font-size", 12).text("Circle size = total aid moved (world map)"); const ex = [1e9, 2e10, 1e11]; const sg = s.append("g").attr("transform", `translate(40,${18 + 2 * r(1e11)})`); sg.selectAll("circle").data(ex).join("circle").attr("cy", v => -r(v)).attr("r", v => r(v)).attr("fill", "none").attr("stroke", "#666"); sg.selectAll("text").data(ex).join("text").attr("x", r(1e11) + 8).attr("y", v => -2 * r(v)).attr("dy", "0.35em") .attr("font-size", 10).attr("fill", "#444").text(v => fmtMoney(v)); return F.container.node(); }46:Tb74,### Analysis (Visualization #2) **Yes, the geographic clustering is very strong.** The donors (purple) are the wealthy, early-industrialized countries: **North America (US), Western and Northern Europe** (Germany, France, the UK, the Netherlands, Belgium, Switzerland and the Nordics) and **Japan**. The recipients (orange) form a handful of distinct blocks: - **Latin America**: Brazil, Colombia and Chile are all pure recipients. - **South and Southeast Asia**: India and Thailand, the two biggest recipients overall. - **Southern Africa**: South Africa (the only African country in this reduced dataset). - **Central and Eastern Europe**: Poland, the Czech Republic, Slovakia, Hungary, Slovenia, Romania and the three Baltic states are all strongly orange. In the zoomed panel you can more or less trace the old East/West divide of Europe along the color boundary. - **East Asia outside Japan**: Korea and Taiwan. The "in-between" countries also make sense geographically. The **Gulf states** (Saudi Arabia, Kuwait, Qatar, UAE) are a lighter orange since they both give and receive. **Southern Europe and the periphery of Western Europe** (Spain, Italy, Portugal, Greece, Ireland) are paler than the core: Spain and Italy are moderate donors, while Portugal, Ireland and Greece are moderate-to-strong recipients. **Austria, Australia and Canada** are close to neutral. **Neighbors with radically different patterns.** 2B ranks every neighbor pair by the distance between their indices; 16 pairs differ by 1 or more on the −1 to +1 scale, which essentially means one is a clear donor and the other a clear recipient. The most extreme cases: - **Germany vs. Poland** and **Germany vs. the Czech Republic**: Germany gave $47B and received essentially nothing, while Poland received $24.5B and gave almost nothing. These are the most "radical" pairs in the dataset. - **Japan vs. Korea** and **Japan vs. Taiwan** (sea neighbors): Japan is the second largest donor, while Korea and Taiwan are major recipients. - **France vs. Brazil**, which share a land border via French Guiana. This one surprised me, but it's technically correct. - **Austria vs. its eastern neighbors** (Hungary, Slovakia, Slovenia, the Czech Republic): Austria itself is balanced, but all four neighbors to its east are near-pure recipients. - **Italy vs. Slovenia**, **Finland vs. Estonia** and **Switzerland vs. Liechtenstein** show the same pattern. - **Luxembourg vs. Germany, France and Belgium**: Luxembourg is surrounded by large donors yet is a net recipient here ($555M received vs. $112M donated). - **UK vs. Ireland**: the UK is a strong donor, while Ireland received about 3× what it gave. Conversely, many neighbors look nearly identical: the Czech Republic/Poland/Slovakia/Hungary, the three Baltic states, the Netherlands/Germany/Belgium, and Sweden/Norway/Denmark. That's further evidence that the pattern is regional rather than random.47:Tc18,### Design rationale (Visualization #2) **2A, choropleth of the balance index.** Since the question is about *where* donors and recipients are, a map is the obvious choice, and a choropleth lets each country's full area encode its value. I mapped the balance index instead of raw dollars because a choropleth should show a normalized quantity: the question is about each country's *pattern* (mostly giving vs. mostly receiving), not its size, and raw totals would just highlight the largest countries. The index has a meaningful midpoint (0 = balanced), so a **diverging** scale fits (ColorBrewer PuOr, which is colorblind-safe), with neutral at 0, purple for donors and orange for recipients. Countries missing from the dataset are **hatched light grey** so they read as "no data" rather than as a value (I didn't want them confused with the near-white "balanced" color). Since 34 of the 47 countries are in Europe and the Middle East, which are tiny at world scale, I added a **zoomed second panel** with a different projection (conic conformal, a good fit for Europe), name labels where space allows, and point markers for the micro-states (Monaco, Liechtenstein, Luxembourg, Qatar, Cyprus) that would otherwise be only a few pixels wide. Borders are thin and white, as the clarity notebook recommends. The world view uses Equal Earth because it's equal-area, so continents aren't visually inflated the way they are on Mercator. **2B, neighbor dumbbell chart.** The second question ("are there neighboring countries that…") is hard to answer reliably from a map alone: you'd have to scan borders and compare colors, and color is a weak channel for judging differences. So I derived the neighbor pairs from the map topology with `topojson.neighbors` (two countries are neighbors if their shapes share an arc), and manually added a few short sea crossings (Japan–Korea, Finland–Estonia, UK–France, etc.), drawn dashed so it's clear they're my addition. Each pair is a row with two dots on the same −1…+1 axis, and rows are sorted by the gap. Long lines = radically different neighbors, readable straight off the top of the chart without searching. By default only pairs that differ by at least 0.5 are shown, with a button to reveal all 55. **2C, alternative: proportional-symbol map.** A well-known issue with choropleths is that large countries dominate visually regardless of their importance in the data (Canada and Australia look "important" just because they're big). In 2C, circle *area* encodes total money moved and color encodes the balance index. This makes it clear that the activity is concentrated in a few places (the US, Japan, Germany, India, Thailand, Brazil). On the downside, circles overlap heavily in Europe even in the zoomed panel, and color is harder to read on small circles than on whole countries. For the clustering question I think **2A is better**: the question is about the pattern rather than the volume, and 2A shows contiguous regions (Western vs. Eastern Europe) much more clearly. 2C is the better option if you also want magnitude on the map.48:T42c,## Visualization #3 **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?** "Most frequent" = number of commitments, grouped by purpose **code**. The top 5: | Rank | Purpose (code) | Commitments | Amount | |---|---|---|---| | 1 | Sectors not specified (99810) | 8,140 | $8.6B | | 2 | Social / welfare services (16010) | 6,407 | $9.5B | | 3 | Strengthening civil society (15150) | 5,805 | $2.5B | | 4 | Higher education (11420) | 5,262 | $4.7B | | 5 | Multisector aid (43010) | 3,028 | $4.8B | Combined, they make up 29% of all commitments but only about 8% of the money ($30B of $367B). They're mostly frequent, smaller grants; the very large commitments (power plants, railways, etc.) fall under other purpose codes. **3A** is a set of small-multiple maps (one per purpose) and **3B** is a heatmap grouped by region. I compare the two below.49:T20db,chart3A = { // Small multiples: one map per purpose, with a button group to switch the measure // Layout: one row per purpose = [world map | zoomed Europe & Middle East]. The legend sits above the maps. const W = Math.min(width, 980); const worldW = Math.round(W * 0.6), insetW = W - worldW - 14; const ph = Math.round(worldW * 0.42); // panel height (world map cropped at 57°S / 72°N) const top = 178, rowGap = 34; const H = top + 5 * (ph + rowGap); const recByName = new Map(recipientPurpose.map(r => [r.recipient, r])); const measures = { share: { label: "Share of the country's top-5 aid", value: v => v.share, scale: d3.scaleSequential([0, 1], t => d3.interpolateYlGnBu(0.08 + 0.92 * t)).clamp(true), fmt: d3.format(".0%"), ticks: [0, 0.25, 0.5, 0.75, 1] }, amount: { label: "Amount received (USD, log scale)", value: v => Math.max(v.amount, 1e6), scale: d3.scaleSequentialLog([1e6, 1e10], t => d3.interpolateYlGnBu(0.08 + 0.92 * t)).clamp(true), fmt: v => fmtMoney(v), ticks: [1e6, 1e7, 1e8, 1e9, 1e10] }, count: { label: "Number of commitments (sqrt scale)", value: v => v.count, scale: d3.scaleSequentialSqrt([0, d3.max(recipientPurpose, r => d3.max(r.values, v => v.count))], t => d3.interpolateYlGnBu(0.08 + 0.92 * t)), fmt: d3.format(","), ticks: null } }; const container = d3.create("div").style("position", "relative").style("font-family", "sans-serif"); const svg = container.append("svg").attr("viewBox", [0, 0, W, H]).attr("width", W) .style("max-width", "100%").style("height", "auto").attr("font-family", "sans-serif").attr("font-size", 11); const tip = makeTooltip(container.node()); svg.append("text").attr("y", 20).attr("font-size", 16).attr("font-weight", 700) .text("Where does each of the five most frequent purposes go?"); svg.append("text").attr("y", 40).attr("font-size", 12).attr("fill", "#555") .text("One map per purpose (ranked by number of commitments). Only recipient countries are colored; each map has a zoomed Europe/Middle-East inset."); // measure switcher (plain D3 buttons so the chart works without viewof) const btns = container.insert("div", "svg").style("position", "absolute").style("left", "0px").style("top", "50px") .style("display", "flex").style("gap", "6px").style("font-size", "12px"); btns.append("span").text("Color by:").style("align-self", "center").style("color", "#444"); let current = "share"; const buttons = btns.selectAll("button").data(Object.keys(measures)).join("button") .text(k => ({ share: "Share of country's top-5 mix", amount: "Amount (USD)", count: "Number of commitments" })[k]) .style("font-size", "12px").style("padding", "3px 8px").style("border", "1px solid #999").style("border-radius", "4px") .style("cursor", "pointer") .on("click", (event, k) => { current = k; update(); }); const hatch = uid("hatch"); svg.append("defs").append("pattern").attr("id", hatch).attr("patternUnits", "userSpaceOnUse") .attr("width", 5).attr("height", 5).attr("patternTransform", "rotate(45)") .call(p => p.append("rect").attr("width", 5).attr("height", 5).attr("fill", "#f4f4f4")) .call(p => p.append("line").attr("y2", 5).attr("stroke", "#d4d4d4").attr("stroke-width", 1.5)); const box = [[-12, 22], [58, 62]]; const boxPts = [[box[0][0], box[0][1]], [box[1][0], box[0][1]], [box[1][0], box[1][1]], [box[0][0], box[1][1]], [16, box[1][1]], [16, box[0][1]]]; const fc = { type: "FeatureCollection", features: worldFeatures }; const panels = top5Purposes.map((p, i) => { const py = top + i * (ph + rowGap); const g = svg.append("g").attr("transform", `translate(0,${py})`); g.append("text").attr("y", -8).attr("font-weight", 700).attr("font-size", 13).text(`#${p.rank} ${p.name}`); g.append("text").attr("x", W).attr("y", -8).attr("text-anchor", "end").attr("fill", "#666") .text(`${d3.format(",")(p.count)} commitments · ${fmtMoney(p.amount)} in total`); const world = d3.geoEqualEarth().fitExtent([[0, 0], [worldW, ph]], fc); const inset = d3.geoConicConformal().rotate([-20, 0]).parallels([35, 60]) .fitExtent([[worldW + 14, 0], [W, ph]], { type: "MultiPoint", coordinates: boxPts }); const clip = uid("clip"); g.append("clipPath").attr("id", clip).append("rect").attr("x", worldW + 14).attr("width", insetW).attr("height", ph); const shapes = []; shapes.push(g.append("g").selectAll("path").data(worldFeatures).join("path").attr("d", d3.geoPath(world))); shapes.push(g.append("g").attr("clip-path", `url(#${clip})`).selectAll("path").data(worldFeatures).join("path").attr("d", d3.geoPath(inset))); g.append("rect").attr("x", worldW + 14.5).attr("y", 0.5).attr("width", insetW - 1).attr("height", ph - 1) .attr("fill", "none").attr("stroke", "#999").attr("stroke-dasharray", "3 2"); g.append("text").attr("x", worldW + 20).attr("y", 13).attr("font-size", 10).attr("fill", "#555").text("Zoom: Europe & Middle East"); return { p, i, shapes }; }); const legend = svg.append("g").attr("transform", `translate(12,${96})`); function update() { const m = measures[current]; buttons.style("background", k => k === current ? "#333" : "#fff").style("color", k => k === current ? "#fff" : "#333"); for (const { p, i, shapes } of panels) { for (const s of shapes) { s.attr("fill", f => { const r = recByName.get(f.dataName); if (!countryByName.has(f.dataName) || !countryByName.get(f.dataName).nReceived) return `url(#${hatch})`; if (!r || r.top5Count < MIN_COMMITMENTS) return "#dedede"; return m.scale(m.value(r.values[i])); }).attr("stroke", "#fff").attr("stroke-width", 0.4) .on("mouseenter mousemove", (event, f) => { const r = recByName.get(f.dataName); let html = `${f.dataName} — ${p.name}
`; if (!countryByName.has(f.dataName) || !countryByName.get(f.dataName).nReceived) html += `not a recipient in the dataset`; else if (!r || r.top5Count < MIN_COMMITMENTS) html += `only ${r ? r.top5Count : 0} top-5 commitments (too few to compare)`; else { const v = r.values[i]; html += `${fmtMoney(v.amount)} in ${v.count} commitments
` + `${d3.format(".0%")(v.share)} of its top-5 aid · ${d3.format(".1%")(v.shareOfAll)} of all aid it received`; } tip.show(event, html); }) .on("mouseleave", () => tip.hide()); } } // legend legend.selectAll("*").remove(); const lw = 300; const id = uid("grad"); legend.append("defs").append("linearGradient").attr("id", id).selectAll("stop") .data(d3.range(0, 1.001, 0.05)).join("stop").attr("offset", t => `${t * 100}%`) .attr("stop-color", t => m.scale.interpolator()(t)); legend.append("text").attr("y", -8).attr("font-weight", 700).attr("font-size", 12).text(m.label); legend.append("rect").attr("width", lw).attr("height", 12).attr("fill", `url(#${id})`); const lx = m.scale.copy().range([0, lw]); const ticks = m.ticks ?? lx.ticks(5); legend.append("g").attr("transform", "translate(0,12)") .call(d3.axisBottom(lx).tickValues(ticks).tickFormat(m.fmt).tickSize(4)) .call(a => a.select(".domain").remove()); const keys = legend.append("g").attr("transform", `translate(${lw + 50},-8)`); keys.append("rect").attr("width", 16).attr("height", 11).attr("fill", "#dedede"); keys.append("text").attr("x", 22).attr("y", 9).attr("fill", "#444").text(`Recipient, but < ${MIN_COMMITMENTS} top-5 commitments`); keys.append("rect").attr("y", 20).attr("width", 16).attr("height", 11).attr("fill", `url(#${hatch})`).attr("stroke", "#ccc"); keys.append("text").attr("x", 22).attr("y", 29).attr("fill", "#444").text("Not a recipient in the dataset"); keys.append("text").attr("y", 50).attr("fill", "#666").attr("font-size", 10.5) .text(current === "share" ? "Each country's five shares add up to 100%." : current === "amount" ? "Values under $1M are shown at the lightest color." : "Raw counts favor countries that get many small grants."); } update(); return container.node(); }4a:T14db,chart3B = { // Heatmap: recipients (grouped by region) x top-5 purposes; color = share of that country's top-5 aid const regionOrder = ["South Asia", "East & Southeast Asia", "Africa", "Latin America", "Gulf", "Central & Eastern Europe", "Western Europe", "North America", "Oceania", "Other"]; const rows = d3.sort(recipientPurpose.filter(r => r.top5Count >= MIN_COMMITMENTS), r => regionOrder.indexOf(r.region), r => -r.top5Total); const groups = d3.groups(rows, r => r.region); const cell = 32, gap = 3, headerH = 18; const W = Math.min(width, 900); const margin = { top: 190, left: 150, right: 10, bottom: 50 }; const gridW = top5Purposes.length * cell + (top5Purposes.length - 1) * gap; const barX = gridW + 36, barW = Math.max(120, W - margin.left - margin.right - barX - 150); // y positions with a header row per region let yy = 0; const yPos = new Map(), headers = []; for (const [region, rs] of groups) { headers.push({ region, y: yy }); yy += headerH; for (const r of rs) { yPos.set(r.recipient, yy); yy += cell + gap; } yy += 6; } const H = margin.top + yy + margin.bottom; const color = d3.scaleSequential([0, 1], t => d3.interpolateYlGnBu(0.08 + 0.92 * t)); const xBar = d3.scaleLinear([0, d3.max(rows, r => r.top5Total)], [0, barW]).nice(); const container = d3.create("div").style("position", "relative").style("font-family", "sans-serif"); const svg = container.append("svg").attr("viewBox", [0, 0, W, H]).attr("width", W) .style("max-width", "100%").style("height", "auto").attr("font-family", "sans-serif").attr("font-size", 11); const tip = makeTooltip(container.node()); svg.append("text").attr("y", 20).attr("font-size", 16).attr("font-weight", 700) .text("What mix of the top-5 purposes does each recipient get?"); svg.append("text").attr("y", 40).attr("font-size", 12).attr("fill", "#555") .text("Cell color = share of the country's top-5 money that went to each purpose (each row sums to 100%). Darkest-outlined cell = dominant purpose."); svg.append("text").attr("y", 56).attr("font-size", 12).attr("fill", "#555") .text(`Rows are grouped by world region and sorted by top-5 total; recipients with < ${MIN_COMMITMENTS} top-5 commitments are left out.`); const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`); // column headers (two lines) const colX = i => i * (cell + gap); g.append("g").selectAll("text").data(top5Purposes).join("text") .attr("transform", (p, i) => `translate(${colX(i) + cell / 2 + 3},-8) rotate(-55)`) .attr("font-size", 11).attr("fill", "#222").text(p => `#${p.rank} ${p.name}`); g.append("text").attr("x", barX).attr("y", -10).attr("font-weight", 600).attr("fill", "#222").text("Top-5 total received"); g.append("g").selectAll("text").data(headers).join("text") .attr("x", -margin.left).attr("y", h => h.y + 13).attr("font-weight", 700).attr("fill", "#555") .attr("font-size", 11).text(h => h.region.toUpperCase()); const row = g.append("g").selectAll("g").data(rows).join("g").attr("transform", r => `translate(0,${yPos.get(r.recipient)})`); row.append("text").attr("x", -8).attr("y", cell / 2).attr("dy", "0.35em").attr("text-anchor", "end").attr("fill", "#222").text(r => r.recipient); const cells = row.selectAll("g").data(r => r.values.map((v, i) => ({ r, v, i }))).join("g") .attr("transform", c => `translate(${colX(c.i)},0)`); cells.append("rect").attr("width", cell).attr("height", cell).attr("fill", c => color(c.v.share)) .attr("stroke", c => c.v.share === d3.max(c.r.values, v => v.share) ? "#111" : "none").attr("stroke-width", 1.6) .on("mouseenter mousemove", (event, c) => tip.show(event, `${c.r.recipient} — ${c.v.purpose}
${fmtMoney(c.v.amount)} in ${c.v.count} commitments
` + `${d3.format(".0%")(c.v.share)} of its top-5 aid · ${d3.format(".1%")(c.v.shareOfAll)} of all aid it received`)) .on("mouseleave", () => tip.hide()); cells.append("text").attr("x", cell / 2).attr("y", cell / 2).attr("dy", "0.35em").attr("text-anchor", "middle") .attr("font-size", 9.5).attr("pointer-events", "none") .attr("fill", c => c.v.share > 0.5 ? "white" : "#333") .text(c => c.v.share >= 0.005 ? d3.format(".0%")(c.v.share) : "–"); row.append("rect").attr("x", barX).attr("y", 6).attr("height", cell - 12).attr("width", r => xBar(r.top5Total)).attr("fill", "#7a7a7a"); row.append("text").attr("x", r => barX + xBar(r.top5Total) + 5).attr("y", cell / 2).attr("dy", "0.35em").attr("fill", "#444") .text(r => `${fmtMoney(r.top5Total)} · ${d3.format(r.top5ShareOfAll < 0.01 ? ".1%" : ".0%")(r.top5ShareOfAll)} of all aid received`); // legend const lg = g.append("g").attr("transform", `translate(0,${yy + 18})`); const id = uid("grad"); lg.append("defs").append("linearGradient").attr("id", id).selectAll("stop").data(d3.range(0, 1.001, 0.05)).join("stop") .attr("offset", t => `${t * 100}%`).attr("stop-color", t => color(t)); lg.append("rect").attr("width", gridW).attr("height", 10).attr("fill", `url(#${id})`); lg.append("g").attr("transform", "translate(0,10)") .call(d3.axisBottom(d3.scaleLinear([0, 1], [0, gridW])).ticks(4, "%").tickSize(3)).call(a => a.select(".domain").remove()); return container.node(); }4b:T89f,### Analysis (Visualization #3) **Yes, the five purposes end up in quite different places.** - **Sectors not specified** is largely an **India** story: India received 59% of all the money in this category ($5.1B), and it makes up 54% of India's own top-5 mix. Saudi Arabia (51%), Kuwait (60%), the Czech Republic (68%) and Cyprus (42%) also receive mostly "unspecified" aid, so the category is strongest in South Asia and the Gulf. - **Social / welfare services** is dominated by **Colombia**, which received $6.45B, **68% of all the money in this category worldwide**, and 80% of Colombia's own top-5 mix. Qatar (56%) and the UAE (45%) also lean toward social/welfare, though their amounts are small. - **Strengthening civil society** is concentrated in **Latin America, South Africa and India**. South Africa (31% of the category's money), Colombia (25%) and India (23%) lead, and Colombia has the most commitments (1,605). It's nearly absent in Central/Eastern Europe and the Gulf (0–12% of their mix). - **Higher education** is the clearest geographic cluster: it's the **dominant purpose for nearly every Central and Eastern European country** (Slovenia 82%, Slovakia 64%, Poland 59%, Lithuania 52%, Romania 51%, Latvia and Estonia 49%) and for **Korea (82%) and Taiwan (69%)**. In dollar terms it's also the most evenly distributed category: India, Brazil, Thailand, Colombia, South Africa, Korea and Poland each receive between $0.35B and $0.9B. - **Multisector aid** goes mainly to **India (41%) and Thailand (22%)**; it's the largest top-5 category for Thailand (37%) and Hungary (49%). So some countries clearly receive more of certain types than others: **Colombia → social/welfare, India → unspecified and multisector, South Africa → civil society, Eastern Europe/Korea/Taiwan → higher education.** Brazil and Chile are the most "balanced" recipients, with no category much above 30%. One caveat: these five purposes are a small slice of what most countries receive: only 7% of India's aid and 2% of Korea's, compared to 32% of Colombia's and 26% of Slovenia's (the bar on the right of 3B). So "Korea mostly gets higher education" holds *within these five categories*, not overall.4c:Tae0,### Design rationale (Visualization #3) **3A, small-multiple maps.** The question asks how each purpose is *distributed geographically*, so I wanted a map per purpose, laid out identically and with the same color scale so they can be compared side by side (small multiples). Each row is one purpose: a world map plus a zoomed Europe/Middle-East panel, since the Central/Eastern European pattern for higher education is invisible at world scale. Color is a **sequential** scale (YlGnBu) because the values are all positive amounts. The default measure is the **share of a country's top-5 money** going to that purpose: this normalizes away the fact that India is enormous, so a small country with a strong specialisation (Slovenia → higher education) shows up as strongly as a large one. Buttons above the maps switch to the absolute **amount** (log scale, since it spans four orders of magnitude) or the **number of commitments**, so you can also see who gets the most money in each category. Recipients with fewer than 10 top-5 commitments are shown in plain grey, because shares based on 1–2 grants are meaningless (most Western European donors technically "received" one or two grants), and countries that never receive anything are hatched. **3B, heatmap grouped by region.** The maps are good for spotting geographic patterns but bad at precise comparison: you can't easily see Thailand's full mix, and the color of small countries is hard to judge. The heatmap puts recipients on rows and purposes on columns, with each row summing to 100%. Rows are **grouped by world region** (that's the geographic part) and sorted by size within each region, which is more meaningful than alphabetical order. I outline each country's dominant purpose so the "who gets what" question can be answered by scanning for the dark boxes; this is how the higher-education column lights up for the whole Central & Eastern Europe block. I used square cells with equal spacing (as the clarity notebook suggests for heatmaps) and printed the percentages because there are only 22 × 5 cells. The grey bar on the right shows each country's top-5 total and how much of its overall aid that is, so readers don't over-interpret the shares. **Comparing the two.** 3A is more intuitive for the "geographically" part and shows clusters at a glance (South America in social/civil society, Eastern Europe in higher education), but it takes up a lot of vertical space and tiny countries are still hard to read even with the zoomed panels. 3B is much more compact and precise, and it's better for the second question (which countries specialise in which purposes), but geography is only encoded through the region grouping. If I could only keep one, I would keep the heatmap and use the maps as an overview.4d:T654,regionOf = new Map([ ["United States", "North America"], ["Canada", "North America"], ["Brazil", "Latin America"], ["Chile", "Latin America"], ["Colombia", "Latin America"], ["India", "South Asia"], ["Japan", "East & Southeast Asia"], ["Korea", "East & Southeast Asia"], ["Taiwan", "East & Southeast Asia"], ["Thailand", "East & Southeast Asia"], ["Australia", "Oceania"], ["New Zealand", "Oceania"], ["South Africa", "Africa"], ["Saudi Arabia", "Gulf"], ["Kuwait", "Gulf"], ["Qatar", "Gulf"], ["United Arab Emirates", "Gulf"], ["Czech Republic", "Central & Eastern Europe"], ["Estonia", "Central & Eastern Europe"], ["Hungary", "Central & Eastern Europe"], ["Latvia", "Central & Eastern Europe"], ["Lithuania", "Central & Eastern Europe"], ["Poland", "Central & Eastern Europe"], ["Romania", "Central & Eastern Europe"], ["Slovak Republic", "Central & Eastern Europe"], ["Slovenia", "Central & Eastern Europe"], ["Austria", "Western Europe"], ["Belgium", "Western Europe"], ["Denmark", "Western Europe"], ["Finland", "Western Europe"], ["France", "Western Europe"], ["Germany", "Western Europe"], ["Iceland", "Western Europe"], ["Ireland", "Western Europe"], ["Italy", "Western Europe"], ["Liechtenstein", "Western Europe"], ["Luxembourg", "Western Europe"], ["Monaco", "Western Europe"], ["Netherlands", "Western Europe"], ["Norway", "Western Europe"], ["Portugal", "Western Europe"], ["Spain", "Western Europe"], ["Sweden", "Western Europe"], ["Switzerland", "Western Europe"], ["United Kingdom", "Western Europe"], ["Greece", "Western Europe"], ["Cyprus", "Western Europe"] ])4e:T578,// Draws the shared diverging legend into a . Tick positions are the 3x and 10x ratios. function balanceLegend(g, { width = 300, title = "Balance between giving and receiving" } = {}) { const id = uid("bal-grad"); const x = d3.scaleLinear([-1, 1], [0, width]); g.append("defs").append("linearGradient").attr("id", id) .selectAll("stop").data(d3.range(0, 1.0001, 0.05)).join("stop") .attr("offset", t => `${t * 100}%`) .attr("stop-color", t => balanceColor(t * 2 - 1)); g.append("text").attr("y", -8).attr("font-weight", 600).attr("font-size", 12).text(title); g.append("rect").attr("width", width).attr("height", 12).attr("fill", `url(#${id})`); const ticks = [ [-1, "", "only gives"], [-0.818, "10×", ""], [-0.5, "3×", ""], [0, "equal", ""], [0.5, "3×", ""], [0.818, "10×", ""], [1, "", "only receives"] ]; const t = g.append("g").attr("transform", "translate(0,12)").attr("font-size", 10).attr("fill", "#444"); t.selectAll("line").data(ticks).join("line") .attr("x1", d => x(d[0])).attr("x2", d => x(d[0])).attr("y1", 0).attr("y2", 4).attr("stroke", "#444"); t.selectAll("text").data(ticks).join("text") .attr("x", d => x(d[0])).attr("y", 15) .attr("text-anchor", d => d[0] === -1 ? "start" : d[0] === 1 ? "end" : "middle") .text(d => d[1]) .append("tspan").attr("x", d => x(d[0])).attr("dy", 11).text(d => d[2]); return g; }4f:Tefb,// Shared layout for the world maps: a world panel plus an enlarged Europe + Middle East panel, // because 34 of the 47 countries in the dataset are in that small region. function mapFrame({ W, title, subtitle }) { const worldH = Math.round(W * 0.47); const insetW = Math.round(W * 0.64); const top = 64, gap = 26; const box = [[-25, 22], [60, 71]]; // lon/lat window for the zoomed panel const ring = [ // the window's outline, densified so it follows the parallels ...d3.range(box[0][0], box[1][0] + 0.1, 1).map(l => [l, box[0][1]]), ...d3.range(box[0][1], box[1][1] + 0.1, 1).map(l => [box[1][0], l]), ...d3.range(box[1][0], box[0][0] - 0.1, -1).map(l => [l, box[1][1]]), ...d3.range(box[1][1], box[0][1] - 0.1, -1).map(l => [box[0][0], l]) ]; const boxLine = { type: "LineString", coordinates: ring }; // fit the zoomed projection to the panel width, then derive the panel height from the window's shape const insetProj = d3.geoConicConformal().rotate([-16, 0]).parallels([35, 65]).fitWidth(insetW, boxLine); const [[, by0], [, by1]] = d3.geoPath(insetProj).bounds(boxLine); const insetH = Math.round((by1 - by0) * 0.93); // trim a little of the empty corners const iy0 = top + worldH + gap; const [tx, ty] = insetProj.translate(); insetProj.translate([tx, ty + iy0 - by0 - (by1 - by0) * 0.05]); const H = top + worldH + gap + insetH + 10; const container = d3.create("div").style("position", "relative").style("font-family", "sans-serif"); const svg = container.append("svg").attr("viewBox", [0, 0, W, H]).attr("width", W) .style("max-width", "100%").style("height", "auto").attr("font-family", "sans-serif").attr("font-size", 11); const tip = makeTooltip(container.node()); svg.append("text").attr("x", 0).attr("y", 20).attr("font-size", 16).attr("font-weight", 700).text(title); svg.append("text").attr("x", 0).attr("y", 40).attr("font-size", 12).attr("fill", "#555").text(subtitle); // hatch pattern for countries that are not in the dataset const hatch = uid("hatch"); svg.append("defs").append("pattern").attr("id", hatch).attr("patternUnits", "userSpaceOnUse") .attr("width", 5).attr("height", 5).attr("patternTransform", "rotate(45)") .call(p => p.append("rect").attr("width", 5).attr("height", 5).attr("fill", "#f2f2f2")) .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)); const worldProj = d3.geoEqualEarth().fitExtent([[0, top], [W, top + worldH]], { type: "FeatureCollection", features: worldFeatures }); const panels = [ { key: "world", projection: worldProj, x: 0, y: top, w: W, h: worldH }, { key: "inset", projection: insetProj, x: 0, y: iy0, w: insetW, h: insetH } ]; panels.forEach(p => { const clip = uid("clip"); svg.append("clipPath").attr("id", clip).append("rect").attr("x", p.x).attr("y", p.y).attr("width", p.w).attr("height", p.h); p.g = svg.append("g").attr("clip-path", `url(#${clip})`); p.path = d3.geoPath(p.projection); }); svg.append("path").attr("d", panels[0].path({ type: "LineString", coordinates: ring })) .attr("fill", "none").attr("stroke", "#333").attr("stroke-width", 1).attr("stroke-dasharray", "3 2"); svg.append("rect").attr("x", 0.5).attr("y", iy0 + 0.5).attr("width", insetW - 1).attr("height", insetH - 1) .attr("fill", "none").attr("stroke", "#333").attr("stroke-dasharray", "3 2"); svg.append("text").attr("x", 6).attr("y", iy0 + 16).attr("font-weight", 600).attr("fill", "#333") .text("Zoom: Europe & the Middle East"); // right-hand side area next to the inset, for legends and notes const side = { x: insetW + 24, y: iy0, w: W - insetW - 24, h: insetH }; return { container, svg, tip, panels, hatch, side, W, H }; }50:[] 38:{"id":"72def8e282f6f8e2","slug":"mini-project-1-geographic-financial-aid-due-oct-29th","title":"Mini-Project 1: Geographic Financial Aid (Due Oct. 29th)","thumbnail":"8bb91f97c9f6a54508362fcac41a59f217218eef90a360651cef8936a0f3015a","access_level":"public","create_time":"$D2026-10-20T18:26:35.930Z","update_time":"$D2026-10-27T18:53:38.147Z","view_time":null,"first_public_time":"$D2026-10-27T18:53:57.005Z","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":"459840abc0d4f703","login":"sn4230","name":"Saakshi Narayan","avatar_url":null,"tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":364,"publish_version":364,"role":null,"authored":false,"authors":[{"type":"individual","id":"79f3185a27bbe722","login":"sn4230","name":"Saakshi Narayan","avatar_url":null,"tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"459840abc0d4f703","login":"sn4230","name":"Saakshi Narayan","avatar_url":null,"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":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"## Visualization #1\n\n**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\nI built two charts for this question. **1A** is the primary answer; **1B** is an alternative design that addresses 1A's main limitation (small countries effectively vanish). I compare the two below.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"$3f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"$40","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"$41","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"$42","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"## Visualization #2\n\n**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**2A** (choropleth) addresses the clustering part, **2B** (a neighbor dumbbell chart) addresses the neighbors part directly, and **2C** is an alternative map design that I compare against 2A.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"$43","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"$44","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"$45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"$46","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"$47","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"$48","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"$4b","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"$4c","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"---\n## Appendix\n\nEverything below is the data prep and helper code that the charts above depend on.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"### Data","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"rawData = d3.csv(\n \"https://docs.google.com/spreadsheets/d/1YiuHdfZv_JZ-igOemKJMRaU8dkucfmHxOP6Od3FraW8/export?format=csv&gid=1124214599\",\n d3.autoType\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"aid = rawData\n .map(d => ({\n year: +d.year,\n donor: String(d.donor).trim(),\n recipient: String(d.recipient).trim(),\n amount: +d.commitment_amount_usd_constant,\n code: String(d.coalesced_purpose_code),\n purpose: String(d.coalesced_purpose_name).trim()\n }))\n // 6 rows list the same country as donor and recipient (e.g. Liechtenstein -> Liechtenstein);\n // they say nothing about giving vs. receiving, so I drop them.\n .filter(d => d.donor !== d.recipient && Number.isFinite(d.amount))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"$4d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"countries = {\n const sum = v => d3.sum(v, d => d.amount);\n const donated = d3.rollup(aid, sum, d => d.donor);\n const received = d3.rollup(aid, sum, d => d.recipient);\n const nDonated = d3.rollup(aid, v => v.length, d => d.donor);\n const nReceived = d3.rollup(aid, v => v.length, d => d.recipient);\n const names = new Set([...donated.keys(), ...received.keys()]);\n\n return Array.from(names, name => {\n const don = donated.get(name) ?? 0;\n const rec = received.get(name) ?? 0;\n return {\n name,\n region: regionOf.get(name) ?? \"Other\",\n donated: don,\n received: rec,\n net: rec - don, // > 0 means net recipient\n total: rec + don,\n balance: (rec - don) / (rec + don), // -1 = only donates, +1 = only receives\n nDonated: nDonated.get(name) ?? 0,\n nReceived: nReceived.get(name) ?? 0\n };\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"top5Purposes = {\n // Rank purposes by how often they occur (number of commitments). I group by the purpose CODE,\n // because the same code is spelled several ways (e.g. \"Social/ welfare services\" vs \"SOCIAL/WELFARE SERVICES\").\n const byCode = d3.groups(aid, d => d.code);\n const ranked = d3.sort(byCode, ([, v]) => -v.length).slice(0, 5);\n const shortNames = { \"99810\": \"Sectors not specified\", \"16010\": \"Social / welfare services\",\n \"15150\": \"Strengthening civil society\", \"11420\": \"Higher education\", \"43010\": \"Multisector aid\" };\n return ranked.map(([code, v], i) => {\n const commonName = d3.greatest(d3.rollups(v, g => g.length, d => d.purpose), d => d[1])[0];\n return { rank: i + 1, code, name: shortNames[code] ?? commonName, count: v.length, amount: d3.sum(v, d => d.amount) };\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"recipientPurpose = {\n const codes = new Set(top5Purposes.map(p => p.code));\n const totalReceived = d3.rollup(aid, v => d3.sum(v, d => d.amount), d => d.recipient);\n const roll = d3.rollup(aid.filter(d => codes.has(d.code)),\n v => ({ amount: d3.sum(v, d => d.amount), count: v.length }), d => d.recipient, d => d.code);\n return Array.from(roll, ([recipient, m]) => {\n const top5Total = d3.sum(m.values(), v => v.amount);\n const top5Count = d3.sum(m.values(), v => v.count);\n const all = totalReceived.get(recipient);\n return {\n recipient, region: regionOf.get(recipient) ?? \"Other\", totalReceived: all, top5Total, top5Count,\n top5ShareOfAll: top5Total / all,\n values: top5Purposes.map(p => {\n const v = m.get(p.code) ?? { amount: 0, count: 0 };\n return { code: p.code, purpose: p.name, amount: v.amount, count: v.count,\n share: v.amount / top5Total, shareOfAll: v.amount / all };\n })\n };\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"// Recipients with fewer top-5 commitments than this are shown as \"too few\" (their shares would be noise)\nMIN_COMMITMENTS = 10","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"### Map data","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"worldAtlas = 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":93,"value":"// The atlas and the AidData sheet spell four countries differently\natlasToData = new Map([\n [\"United States of America\", \"United States\"],\n [\"South Korea\", \"Korea\"],\n [\"Czechia\", \"Czech Republic\"],\n [\"Slovakia\", \"Slovak Republic\"]\n])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"worldFeatures = topojson.feature(worldAtlas, worldAtlas.objects.countries).features\n .filter(f => f.properties.name !== \"Antarctica\")\n .map(f => Object.assign(f, { dataName: atlasToData.get(f.properties.name) ?? f.properties.name }))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"countryByName = new Map(countries.map(d => [d.name, d]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"// Pairs that do not share a land border in the atlas but are separated by a short stretch of sea\nseaNeighbors = [\n [\"Japan\", \"Korea\"], [\"Japan\", \"Taiwan\"], [\"United Kingdom\", \"France\"], [\"United Kingdom\", \"Ireland\"],\n [\"Denmark\", \"Sweden\"], [\"Finland\", \"Estonia\"], [\"Australia\", \"New Zealand\"], [\"Greece\", \"Cyprus\"],\n [\"Qatar\", \"United Arab Emirates\"]\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"neighborPairs = {\n const geoms = worldAtlas.objects.countries.geometries;\n const nb = topojson.neighbors(geoms);\n const nameOf = i => atlasToData.get(geoms[i].properties.name) ?? geoms[i].properties.name;\n const pairs = [];\n geoms.forEach((_, i) => nb[i].forEach(j => {\n if (j <= i) return;\n const a = countryByName.get(nameOf(i)), b = countryByName.get(nameOf(j));\n if (a && b) pairs.push({ a, b, type: \"land border\" });\n }));\n for (const [p, q] of seaNeighbors) {\n const a = countryByName.get(p), b = countryByName.get(q);\n if (a && b && !pairs.some(e => (e.a === a && e.b === b) || (e.a === b && e.b === a))) pairs.push({ a, b, type: \"sea neighbor\" });\n }\n for (const e of pairs) {\n if (e.a.balance > e.b.balance) [e.a, e.b] = [e.b, e.a]; // a = the more \"giving\" country\n e.gap = e.b.balance - e.a.balance;\n }\n return d3.sort(pairs, e => -e.gap);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"### Helpers (scales, formatting, tooltips, legends, map layout)","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"// Diverging scale shared by every chart: purple = gives, orange = receives (ColorBrewer PuOr, colorblind-safe)\nbalanceColor = d3.scaleDiverging([-1, 0, 1], d3.interpolatePuOr)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"DONATE = balanceColor(-0.8)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"RECEIVE = balanceColor(0.8)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"fmtMoney = v => {\n const a = Math.abs(v);\n const f = d3.format(\".3~r\");\n const s = a >= 1e9 ? `$${f(a / 1e9)}B`\n : a >= 1e6 ? `$${f(a / 1e6)}M`\n : a >= 1e3 ? `$${f(a / 1e3)}K`\n : `$${Math.round(a)}`;\n return v < 0 ? `−${s}` : s;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"// balance = (r - 1) / (r + 1) where r = received / donated, so |balance| = 0.5 is a 3x gap and 0.818 is a 10x gap\nroleLabel = b => b <= -0.818 ? \"donates >10× what it receives\"\n : b <= -0.5 ? \"mostly donates (3–10×)\"\n : b < 0.5 ? \"roughly balanced (within 3×)\"\n : b < 0.818 ? \"mostly receives (3–10×)\"\n : \"receives >10× what it donates\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"countryTip = d => `${d.name} (${d.region})
\n ■ Donated: ${fmtMoney(d.donated)} in ${d3.format(\",\")(d.nDonated)} commitments
\n ■ Received: ${fmtMoney(d.received)} in ${d3.format(\",\")(d.nReceived)} commitments
\n Balance index: ${d3.format(\"+.2f\")(d.balance)} → ${roleLabel(d.balance)}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"function makeTooltip(container) {\n const tip = d3.select(container).append(\"div\")\n .style(\"position\", \"absolute\")\n .style(\"pointer-events\", \"none\")\n .style(\"background\", \"rgba(255,255,255,0.97)\")\n .style(\"border\", \"1px solid #bbb\")\n .style(\"border-radius\", \"4px\")\n .style(\"padding\", \"6px 9px\")\n .style(\"font\", \"12px/1.45 sans-serif\")\n .style(\"box-shadow\", \"0 2px 6px rgba(0,0,0,0.15)\")\n .style(\"max-width\", \"290px\")\n .style(\"opacity\", 0);\n return {\n show(event, content) {\n const [x, y] = d3.pointer(event, container);\n tip.html(content).style(\"opacity\", 1);\n const w = tip.node().offsetWidth;\n const left = x + 16 + w > container.clientWidth ? x - w - 12 : x + 16;\n tip.style(\"left\", `${Math.max(0, left)}px`).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":106,"value":"uid = name => `${name}-${Math.random().toString(36).slice(2, 9)}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"$4e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"// Centroid of a country's largest polygon (avoids e.g. France's centroid landing in the Atlantic because of French Guiana)\nfunction mainCentroid(feature) {\n if (feature.geometry.type !== \"MultiPolygon\") return d3.geoCentroid(feature);\n const polys = feature.geometry.coordinates.map(c => ({ type: \"Polygon\", coordinates: c }));\n return d3.geoCentroid(d3.greatest(polys, 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":109,"value":"$4f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W50","stdlib":"2"}} 33:null