34:["$","title",null,{"children":"Mini-Project 1: Geographic Financial Aid (Due Oct. 29th) | Lakshmi Hukunda raju | 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:Tdd8,(() => { const data = countryTotals; const width = 928, rowH = 17, labelW = 150; const margin = {top: 80, right: 20, bottom: 20, left: 20}; const height = margin.top + data.length * rowH + margin.bottom; const half = (width - margin.left - margin.right - labelW) / 2; const midL = margin.left + half; const midR = midL + labelW; const maxVal = d3.max(data, d => Math.max(d.donated, d.received)); const xRec = d3.scaleLinear([0, maxVal], [midL, margin.left]); const xDon = d3.scaleLinear([0, maxVal], [midR, width - margin.right]); const y = d3.scaleBand(data.map(d => d.country), [margin.top, height - margin.bottom]).padding(0.2); const colors = {received: "#e08214", donated: "#542788"}; const fmt = v => d3.format("$.2~s")(v).replace("G", "B"); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width).attr("height", height) .attr("style", "max-width: 100%; height: auto; font: 11px sans-serif;"); svg.append("text").attr("x", margin.left).attr("y", 18) .attr("font-size", 15).attr("font-weight", "bold") .text("Total aid donated vs. received by country, 1947–2013 (constant USD)"); svg.append("text").attr("x", margin.left).attr("y", 36).attr("fill", "#555") .text("Sorted by net balance: net donors at the top, net recipients at the bottom. Hover a row for exact values."); for (const x of [xRec, xDon]) { svg.append("g") .attr("transform", `translate(0,${margin.top})`) .call(d3.axisTop(x).ticks(4).tickFormat(fmt)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").clone() .attr("y2", height - margin.top - margin.bottom) .attr("stroke-opacity", 0.1)); } svg.append("text").attr("x", midL).attr("y", margin.top - 28).attr("text-anchor", "end") .attr("fill", colors.received).attr("font-weight", "bold").text("← Received"); svg.append("text").attr("x", midR).attr("y", margin.top - 28) .attr("fill", colors.donated).attr("font-weight", "bold").text("Donated →"); const row = svg.append("g").selectAll("g").data(data).join("g") .attr("transform", d => `translate(0,${y(d.country)})`); row.append("rect") .attr("x", d => xRec(d.received)) .attr("width", d => xRec(0) - xRec(d.received)) .attr("height", y.bandwidth()) .attr("fill", colors.received); row.append("rect") .attr("x", xDon(0)) .attr("width", d => xDon(d.donated) - xDon(0)) .attr("height", y.bandwidth()) .attr("fill", colors.donated); row.append("text") .attr("x", (midL + midR) / 2).attr("y", y.bandwidth() / 2).attr("dy", "0.35em") .attr("text-anchor", "middle") .attr("fill", d => d.net >= 0 ? colors.donated : colors.received) .text(d => d.country); row.append("title") .text(d => `${d.country}\nDonated: ${fmt(d.donated)}\nReceived: ${fmt(d.received)}\nNet: ${fmt(d.net)}`); const firstRec = data.find(d => d.net < 0); if (firstRec) { const yLine = y(firstRec.country) - (y.step() - y.bandwidth()) / 2; svg.append("line") .attr("x1", margin.left).attr("x2", width - margin.right) .attr("y1", yLine).attr("y2", yLine) .attr("stroke", "#333").attr("stroke-dasharray", "4,3"); svg.append("text").attr("x", width - margin.right).attr("y", yLine - 4) .attr("text-anchor", "end").attr("fill", "#333").attr("font-size", 10) .text("net donors ▲ / ▼ net recipients"); } return svg.node(); })()3f:T1545,(() => { const data = countryTotals; const width = 760, height = 640; const margin = {top: 60, right: 40, bottom: 60, left: 80}; const maxVal = d3.max(data, d => Math.max(d.donated, d.received)); const top = maxVal * 1.3; // a little headroom above the largest value const x = d3.scaleSymlog().constant(1e6).domain([0, top]).range([margin.left, width - margin.right]); const y = d3.scaleSymlog().constant(1e6).domain([0, top]).range([height - margin.bottom, margin.top]); const ticks = [0, ...d3.range(6, Math.floor(Math.log10(top)) + 1).map(e => 10 ** e)]; // $0, $1M, $10M, ... const fmt = v => v === 0 ? "$0" : d3.format("$~s")(v).replace("G", "B"); const color = d3.scaleLinear([0, 0.5, 1], ["#e08214", "#bbbbbb", "#542788"]); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width).attr("height", height) .attr("style", "max-width: 100%; height: auto; font: 11px sans-serif;"); svg.append("text").attr("x", margin.left).attr("y", 20) .attr("font-size", 15).attr("font-weight", "bold") .text("Donated vs. received per country (symlog scale)"); svg.append("text").attr("x", margin.left).attr("y", 38).attr("fill", "#555") .text("Above the diagonal = net donor, below = net recipient. Dashed lines mark a 10× imbalance."); svg.append("g").attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).tickValues(ticks).tickFormat(fmt)) .call(g => g.selectAll(".tick line").clone() .attr("y2", -(height - margin.top - margin.bottom)).attr("stroke-opacity", 0.08)) .call(g => g.append("text").attr("x", width - margin.right).attr("y", 40) .attr("fill", "currentColor").attr("text-anchor", "end") .text("Total received (constant USD) →")); svg.append("g").attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).tickValues(ticks).tickFormat(fmt)) .call(g => g.selectAll(".tick line").clone() .attr("x2", width - margin.left - margin.right).attr("stroke-opacity", 0.08)) .call(g => g.append("text").attr("x", -margin.left + 5).attr("y", margin.top - 10) .attr("fill", "currentColor").attr("text-anchor", "start") .text("↑ Total donated (constant USD)")); const vals = [0, ...d3.range(4, Math.log10(top) + 0.001, 0.05).map(e => 10 ** e)]; const line = d3.line(d => x(d[0]), d => y(d[1])); for (const [k, dash, label] of [ [1, null, "donated = received"], [10, "4,4", "donates 10× more"], [0.1, "4,4", "receives 10× more"] ]) { const pts = vals.map(v => [v, v * k]).filter(([a, b]) => a <= top && b <= top); svg.append("path").attr("d", line(pts)).attr("fill", "none") .attr("stroke", "#888").attr("stroke-dasharray", dash); const [lx, ly] = pts[pts.length - 1]; svg.append("text").attr("x", x(lx) - 4).attr("y", y(ly) + (k < 1 ? -6 : 12)) .attr("text-anchor", "end").attr("fill", "#888").attr("font-size", 10).text(label); } // Region labels written along the diagonal const angle = Math.atan2(y(1e9) - y(1e7), x(1e9) - x(1e7)) * 180 / Math.PI; const along = `translate(${x(2e7)},${y(2e7)}) rotate(${angle})`; svg.append("text").attr("transform", `${along} translate(0,-10)`).attr("text-anchor", "middle") .attr("fill", "#542788").attr("font-weight", "bold").text("▲ NET DONORS"); svg.append("text").attr("transform", `${along} translate(0,20)`).attr("text-anchor", "middle") .attr("fill", "#e08214").attr("font-weight", "bold").text("▼ NET RECIPIENTS"); svg.append("g").selectAll("circle").data(data).join("circle") .attr("cx", d => x(d.received)).attr("cy", d => y(d.donated)).attr("r", 5.5) .attr("fill", d => color(d.donorShare)) .attr("stroke", "#fff").attr("stroke-width", 0.8) .append("title") .text(d => `${d.country}\nDonated: ${fmt(d.donated)}\nReceived: ${fmt(d.received)}\nDonor share: ${d3.format(".0%")(d.donorShare)}`); // Label the 6 biggest net donors and 6 biggest net recipients. // Each label tries a few positions around its dot and takes the first one that doesn't collide. const extremes = [...data.slice(0, 6), ...data.slice(-6)]; const placed = []; const labels = extremes.map(d => { const px = x(d.received), py = y(d.donated), w = d.country.length * 5.6, h = 11; for (const dy of [0, -13, 13, -26, 26, -39, 39, -52, -65, -78]) { for (const dx of [8, -8 - w]) { const b = {x0: px + dx, x1: px + dx + w, y0: py + dy - h / 2, y1: py + dy + h / 2}; if (b.x0 < margin.left + 2 || b.x1 > width - 2 || b.y0 < margin.top || b.y1 > height - margin.bottom - 2) continue; if (placed.some(o => o.x0 < b.x1 && b.x0 < o.x1 && o.y0 < b.y1 && b.y0 < o.y1)) continue; placed.push(b); return {d, px, py, lx: b.x0, ly: py + dy, dx}; } } return null; }).filter(Boolean); const lab = svg.append("g").selectAll("g").data(labels).join("g"); lab.filter(l => l.ly !== l.py).append("line") .attr("x1", l => l.px).attr("y1", l => l.py) .attr("x2", l => l.dx > 0 ? l.lx - 2 : l.lx + l.d.country.length * 5.6 + 2).attr("y2", l => l.ly) .attr("stroke", "#aaa").attr("stroke-width", 0.7); lab.append("text").attr("x", l => l.lx).attr("y", l => l.ly).attr("dy", "0.35em") .attr("font-size", 10).text(l => l.d.country); return svg.node(); })()40:Tc7e,### Visualization 1: Analysis **How countries compare.** Donating is concentrated in a handful of countries. The United States (~$116B) and Japan (~$114B) together account for more than half of all donations, and each gave more than double the next donor, Germany (~$47B). Receiving is dominated by India (~$134B), which alone received more than the US donated. Only 17 of the 47 countries are net donors; the remaining 30 receive more than they give. **Countries that donate far more than they receive.** The top of chart 1a is almost entirely Western and Northern Europe, North America, and Japan. Germany, the Netherlands, Switzerland, and Monaco received essentially nothing (donor share ≈ 100%). The US, Japan, the UK, France, and Sweden all donated more than 10× what they received and sit above the "donates 10× more" line in chart 1b. **Countries that receive far more than they donate.** India (~$134B), Thailand (~$49B), Brazil (~$37B), Colombia (~$26B), Korea (~$25B), Poland (~$25B), and South Africa (~$19B) are the largest net recipients. Most of them donated essentially nothing, so they sit on the bottom edge of chart 1b. **Countries that both give and receive.** Austria is almost perfectly balanced (~$784M donated vs. ~$770M received) and sits on the diagonal in chart 1b. Canada (~$7.5B donated vs. ~$4.1B received) and Italy (~$3.8B vs. ~$2.4B) are net donors that also received substantial amounts. Saudi Arabia (~$1.7B vs. ~$4.9B) and Kuwait (~$1.4B vs. ~$7.8B) are meaningful donors yet net recipients. Korea (~$1.3B donated) and Taiwan (~$84M) received large amounts but have also started donating. Australia and Ireland fall just below the line as slight net recipients. ### Visualization 1: Design rationale **Chart 1a (butterfly chart).** Received extends left and donated extends right, on one shared linear scale, so both quantities can be compared directly for each country. Rows are sorted by net balance, which puts the most extreme net donors at the top and the most extreme net recipients at the bottom; the dashed line marks where the balance flips sign. This answers "who donates much more than they receive, and vice versa" by position alone. Purple always means donating and orange always means receiving, in every chart of this notebook. **Chart 1b (symlog scatterplot).** Each country is a dot at (received, donated). The diagonal y = x separates net donors from net recipients, and the dashed lines turn "much more" into a concrete threshold (10×). A symmetric-log scale is used instead of a plain log scale so that countries that never donated or never received ($0) can still be plotted. **Comparing the two.** 1a shows true magnitudes and an exact ranking, but aid totals span about six orders of magnitude, so most of the middle rows shrink to invisible bars. 1b keeps every country readable and shows the donate-to-receive *ratio* directly by distance from the diagonal, but absolute amounts are harder to judge on a log scale, and only the most extreme countries are labeled to avoid clutter. 1a is better for the ranking question; 1b is better for spotting how lopsided each country is. Together they answer both parts of the question.41:T1511,function shareMap({focus, title, subtitle, width = 928, height = 520, labels = false}) { const margin = {top: 56, bottom: 70}; const color = d3.scaleLinear([0, 0.5, 1], ["#e08214", "#f0f0f0", "#542788"]); const pct = d3.format(".0%"); const fmt = v => d3.format("$.2~s")(v).replace("G", "B"); const uid = "m" + Math.random().toString(36).slice(2, 8); // unique ids for clip/pattern const projection = d3.geoNaturalEarth1() .fitExtent([[10, margin.top], [width - 10, height - margin.bottom]], focus); const path = d3.geoPath(projection); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width).attr("height", height) .attr("style", "max-width: 100%; height: auto; font: 11px sans-serif;"); const defs = svg.append("defs"); defs.append("clipPath").attr("id", `${uid}-clip`).append("rect") .attr("x", 0).attr("y", margin.top - 6) .attr("width", width).attr("height", height - margin.top - margin.bottom + 12); const hatch = defs.append("pattern").attr("id", `${uid}-hatch`) .attr("patternUnits", "userSpaceOnUse").attr("width", 5).attr("height", 5) .attr("patternTransform", "rotate(45)"); hatch.append("rect").attr("width", 5).attr("height", 5).attr("fill", "#fff"); hatch.append("line").attr("x1", 0).attr("y1", 0).attr("x2", 0).attr("y2", 5) .attr("stroke", "#c8c8c8").attr("stroke-width", 1.5); svg.append("text").attr("x", 10).attr("y", 20) .attr("font-size", 15).attr("font-weight", "bold").text(title); svg.append("text").attr("x", 10).attr("y", 38).attr("fill", "#555").text(subtitle); const info = f => totalsByMapName.get(f.properties.name); const tip = f => { const d = info(f); return d ? `${d.country}\nDonor share: ${pct(d.donorShare)}\nDonated: ${fmt(d.donated)}\nReceived: ${fmt(d.received)}` : `${f.properties.name}\n(not in dataset)`; }; const map = svg.append("g").attr("clip-path", `url(#${uid}-clip)`); map.append("path").attr("d", path({type: "Sphere"})).attr("fill", "#eaf2f7"); map.append("g").selectAll("path").data(worldFeatures).join("path") .attr("d", path) .attr("fill", f => info(f) ? color(info(f).donorShare) : `url(#${uid}-hatch)`) .attr("stroke", "#8a8a8a").attr("stroke-width", 0.4) .append("title").text(tip); // Countries too small to see get a circle marker in their color const tiny = worldFeatures.filter(f => info(f) && path.area(f) < 40); map.append("g").selectAll("circle").data(tiny).join("circle") .attr("cx", f => path.centroid(f)[0]).attr("cy", f => path.centroid(f)[1]) .attr("r", 4.5).attr("fill", f => color(info(f).donorShare)) .attr("stroke", "#222").attr("stroke-width", 0.8) .append("title").text(tip); // Optional labels: big countries at the centroid of their largest polygon, // tiny countries next to their marker so they don't cover their neighbors' labels. if (labels) { const tinySet = new Set(tiny); const mainPart = f => f.geometry.type === "MultiPolygon" ? {type: "Polygon", coordinates: d3.greatest(f.geometry.coordinates, c => d3.geoArea({type: "Polygon", coordinates: c}))} : f.geometry; map.append("g").selectAll("text") .data(worldFeatures.filter(info)) .join("text") .attr("transform", f => tinySet.has(f) ? `translate(${path.centroid(f)[0] + 7},${path.centroid(f)[1] + 10})` : `translate(${projection(d3.geoCentroid(mainPart(f)))})`) .attr("text-anchor", f => tinySet.has(f) ? "start" : "middle").attr("dy", "0.35em") .attr("font-size", f => tinySet.has(f) ? 8 : 9).attr("font-weight", "bold") .attr("fill", "#111").attr("stroke", "#fff").attr("stroke-width", 2.5) .attr("paint-order", "stroke").attr("pointer-events", "none") .text(f => info(f).country); } // Legend const lx = width / 2 - 180, ly = height - margin.bottom + 30, lw = 360; const grad = defs.append("linearGradient").attr("id", `${uid}-grad`); for (const t of [0, 0.25, 0.5, 0.75, 1]) grad.append("stop").attr("offset", t).attr("stop-color", color(t)); const lg = svg.append("g").attr("transform", `translate(${lx},${ly})`); lg.append("text").attr("x", lw / 2).attr("y", -8).attr("text-anchor", "middle").attr("font-weight", "bold") .text("Donor share = donated ÷ (donated + received)"); lg.append("rect").attr("width", lw).attr("height", 12).attr("fill", `url(#${uid}-grad)`).attr("stroke", "#999"); lg.append("g").attr("transform", "translate(0,12)") .call(d3.axisBottom(d3.scaleLinear([0, 1], [0, lw])).ticks(5, "%").tickSize(4)) .call(g => g.select(".domain").remove()); lg.append("text").attr("x", 0).attr("y", 38).attr("fill", "#e08214").text("◀ only receives"); lg.append("text").attr("x", lw).attr("y", 38).attr("text-anchor", "end").attr("fill", "#542788").text("only donates ▶"); const key = svg.append("g").attr("transform", `translate(${lx + lw + 30},${ly})`); key.append("rect").attr("width", 14).attr("height", 12).attr("fill", `url(#${uid}-hatch)`).attr("stroke", "#999"); key.append("text").attr("x", 20).attr("y", 10).text("not in dataset"); key.append("circle").attr("cx", 7).attr("cy", 28).attr("r", 4.5).attr("fill", "#ccc").attr("stroke", "#222"); key.append("text").attr("x", 20).attr("y", 32).text("small country (marker)"); return svg.node(); }42:Tb84,(() => { const data = neighborPairs; const width = 928, rowH = 20; const margin = {top: 90, right: 40, bottom: 30, left: 250}; const height = margin.top + data.length * rowH + margin.bottom; const x = d3.scaleLinear([0, 1], [margin.left, width - margin.right]); const y = d3.scaleBand(d3.range(data.length), [margin.top, height - margin.bottom]).padding(0.3); const color = d3.scaleLinear([0, 0.5, 1], ["#e08214", "#bbbbbb", "#542788"]); const pct = d3.format(".0%"); const note = p => [p.donorSide, p.recipientSide].sort().join("|") === "Brazil|France" ? " (via French Guiana)" : ""; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width).attr("height", height) .attr("style", "max-width: 100%; height: auto; font: 11px sans-serif;"); svg.append("text").attr("x", 10).attr("y", 20).attr("font-size", 15).attr("font-weight", "bold") .text("Neighbors that behave differently: donor share of every pair of bordering countries"); svg.append("text").attr("x", 10).attr("y", 38).attr("fill", "#555") .text("Each row is two countries that share a land border. A long line means very different roles; pairs with a gap ≥ 50 points are in bold."); svg.append("g").attr("transform", `translate(0,${margin.top - 10})`) .call(d3.axisTop(x).ticks(4, "%")) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").clone() .attr("y2", height - margin.top - margin.bottom + 10).attr("stroke-opacity", 0.1)); svg.append("line").attr("x1", x(0.5)).attr("x2", x(0.5)) .attr("y1", margin.top - 10).attr("y2", height - margin.bottom) .attr("stroke", "#999").attr("stroke-dasharray", "3,3"); svg.append("text").attr("x", x(0)).attr("y", margin.top - 40).attr("fill", "#e08214").attr("font-weight", "bold") .text("◀ only receives"); svg.append("text").attr("x", x(1)).attr("y", margin.top - 40).attr("text-anchor", "end") .attr("fill", "#542788").attr("font-weight", "bold").text("only donates ▶"); const row = svg.append("g").selectAll("g").data(data).join("g") .attr("transform", (d, i) => `translate(0,${y(i) + y.bandwidth() / 2})`); row.append("text").attr("x", margin.left - 12).attr("dy", "0.35em").attr("text-anchor", "end") .attr("font-weight", d => d.diff >= 0.5 ? "bold" : null) .text(d => `${d.donorSide} – ${d.recipientSide}${note(d)}`); row.append("line").attr("x1", d => x(d.shareLo)).attr("x2", d => x(d.shareHi)) .attr("stroke", "#999").attr("stroke-width", 2); for (const k of ["shareLo", "shareHi"]) { row.append("circle").attr("cx", d => x(d[k])).attr("r", 5) .attr("fill", d => color(d[k])).attr("stroke", "#fff"); } row.append("title").text(d => `${d.donorSide}: ${pct(d.shareHi)} donor share\n${d.recipientSide}: ${pct(d.shareLo)} donor share\nGap: ${Math.round(d.diff * 100)} points`); return svg.node(); })()43:Td32,### Visualization 2: Analysis **Clustering.** Yes, donors and recipients cluster clearly. - **Donors (purple)** are concentrated in Western and Northern Europe (Germany, France, the UK, the Netherlands, Belgium, Switzerland, the Nordic countries), North America (the US, and Canada to a lesser degree), and Japan. - **Recipients (orange)** form several regional blocks: South America (Brazil, Colombia, and Chile all receive almost exclusively), South and Southeast Asia (India, Thailand), South Africa, East Asia apart from Japan (Korea, Taiwan), and Central and Eastern Europe (Poland, the Czech Republic, Slovakia, Hungary, Romania, and the Baltic states). - **Mixed countries** sit in between. The Gulf states (Saudi Arabia, Kuwait [CHECK: Qatar and the UAE on the map]) donate but receive more. Southern Europe (Spain, Italy [CHECK: Portugal, Greece]) is lighter than Northern Europe. Austria is right at 50%. Within Europe there is a clear **west-to-east gradient**: donors in the west, recipients in the former Eastern Bloc. **Neighbors with radically different patterns.** Chart 2c ranks every pair of bordering countries in the dataset by the gap between their donor shares. The most striking contrast is **Germany (~100% donor) vs. Poland (~0%)**, which follows the old East-West divide in Europe. Germany and Austria vs. the Czech Republic, Slovakia, Hungary, and Slovenia show the same pattern. [CHECK chart 2c for the other pairs with a gap above 50 points, e.g. United Kingdom – Ireland or the Luxembourg pairs, and list them here.] France – Brazil appears only because of the land border through French Guiana. Chart 2c only considers *land* borders, so it misses sea neighbors. The most striking of these is **Japan (~98% donor) vs. Korea (~5%)**, which is clearly visible on the world map. ### Visualization 2: Design rationale A **choropleth** is the natural encoding for "where": position on the map *is* geography, so clusters show up as same-colored regions. Color encodes **donor share** rather than raw dollars because the question is about each country's *role* (mostly giving vs. mostly receiving), and a ratio lets a small country like Switzerland be compared with a large one like the US. A **diverging** purple–orange scale with a light midpoint makes the two roles visually opposite and highlights balanced countries. Countries not in the dataset are **hatched** rather than grey, so they can't be confused with balanced countries. Countries too small to see (Monaco, Liechtenstein, Luxembourg, Qatar, and others) get a circle marker in their color. **Comparing 2a, 2b, and 2c.** - The **world map (2a)** answers the clustering question at a glance, but Europe, where about two-thirds of the countries are, is crowded. - The **Europe zoom (2b)** fixes that and adds labels, which makes the east-west divide and individual neighbors readable, at the cost of losing the global context. - Neither map makes it easy to *rank* neighbor contrasts precisely, because comparing two colors is less accurate than comparing two positions. **Chart 2c** encodes each bordering pair as two dots on a shared 0–100% axis, so the size of the contrast is a length that can be read and ranked. Its limitation is that it only knows land borders. The three views are complementary: the maps for spotting clusters, and 2c for measuring neighbor contrasts.44:T113d,(() => { const width = 928, cols = 2, panelW = width / cols, panelH = 290, headerH = 60; const nRows = Math.ceil((top5Purposes.length + 1) / cols); // last slot holds the legend const height = headerH + nRows * panelH; const fmt = v => d3.format("$.2~s")(v).replace("G", "B"); const amounts = d3.rollup(purposeByRecipient, v => v[0].amount, d => d.purpose, d => toMapName(d.country)); const positive = purposeByRecipient.map(d => d.amount).filter(a => a > 0); const color = d3.scaleSequentialLog([d3.min(positive), d3.max(positive)], t => d3.interpolateYlGnBu(0.15 + 0.85 * t)); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width).attr("height", height) .attr("style", "max-width: 100%; height: auto; font: 11px sans-serif;"); svg.append("text").attr("x", 10).attr("y", 20).attr("font-size", 15).attr("font-weight", "bold") .text("Where does each of the top 5 purposes go? Amount received per country, 1947–2013"); svg.append("text").attr("x", 10).attr("y", 38).attr("fill", "#555") .text("All five maps share one logarithmic color scale, so colors are comparable across purposes. Hover a country for exact values."); top5Purposes.forEach((p, i) => { const x0 = (i % cols) * panelW, y0 = headerH + Math.floor(i / cols) * panelH; const g = svg.append("g").attr("transform", `translate(${x0},${y0})`); const amt = amounts.get(p.purpose) ?? new Map(); const total = d3.sum(amt.values()); const top3 = d3.sort(amt, ([, a]) => -a).slice(0, 3) .map(([name, a]) => `${countryTotals.find(d => toMapName(d.country) === name).country} ${fmt(a)}`); g.append("text").attr("x", 10).attr("y", 14).attr("font-weight", "bold").attr("font-size", 12) .text(`${i + 1}. ${p.purpose}`); g.append("text").attr("x", 10).attr("y", 30).attr("fill", "#555") .text(`${p.count.toLocaleString()} commitments · ${fmt(total)} · top: ${top3.join(", ")}`); const projection = d3.geoNaturalEarth1() .fitExtent([[8, 40], [panelW - 8, panelH - 8]], {type: "FeatureCollection", features: worldFeatures}); const path = d3.geoPath(projection); g.append("path").attr("d", path({type: "Sphere"})).attr("fill", "#f4f8fb").attr("stroke", "#ddd"); g.append("g").selectAll("path").data(worldFeatures).join("path") .attr("d", path) .attr("fill", f => { const name = f.properties.name; if (!totalsByMapName.has(name)) return "#e3e3e3"; const a = amt.get(name) ?? 0; return a > 0 ? color(a) : "#fff"; }) .attr("stroke", f => totalsByMapName.has(f.properties.name) ? "#777" : "#fff") .attr("stroke-width", 0.4) .append("title").text(f => { const d = totalsByMapName.get(f.properties.name); return d ? `${d.country}\n${p.purpose}: ${fmt(amt.get(f.properties.name) ?? 0)}` : `${f.properties.name} (not in dataset)`; }); }); // Legend in the empty last slot const li = top5Purposes.length; const lx = (li % cols) * panelW + 40, ly = headerH + Math.floor(li / cols) * panelH + 70, lw = panelW - 100; const lg = svg.append("g").attr("transform", `translate(${lx},${ly})`); const ls = d3.scaleLog(color.domain(), [0, lw]); const gradId = "g3a" + Math.random().toString(36).slice(2, 7); const grad = lg.append("defs").append("linearGradient").attr("id", gradId); d3.range(0, 1.001, 0.1).forEach(t => grad.append("stop").attr("offset", t).attr("stop-color", color(ls.invert(t * lw)))); lg.append("text").attr("y", -10).attr("font-weight", "bold").text("Amount received for that purpose (log scale)"); lg.append("rect").attr("width", lw).attr("height", 12).attr("fill", `url(#${gradId})`).attr("stroke", "#999"); lg.append("g").attr("transform", "translate(0,12)") .call(d3.axisBottom(ls).ticks(5).tickFormat(v => Number.isInteger(Math.log10(v)) ? fmt(v) : "").tickSize(4)) .call(g => g.select(".domain").remove()); const keys = [["#fff", "in dataset, received $0 for this purpose"], ["#e3e3e3", "not in dataset"]]; keys.forEach(([fill, label], k) => { lg.append("rect").attr("x", 0).attr("y", 48 + k * 20).attr("width", 14).attr("height", 12) .attr("fill", fill).attr("stroke", "#777"); lg.append("text").attr("x", 20).attr("y", 58 + k * 20).text(label); }); return svg.node(); })()45:Td9a,(() => { const totals = d3.rollup(purposeByRecipient, v => v[0].total, d => d.country); const countries = d3.sort(totals.keys(), c => -totals.get(c)); const cell = new Map(purposeByRecipient.map(d => [`${d.country}|${d.purpose}`, d])); const fmt = v => d3.format("$.2~s")(v).replace("G", "B"); const pct = d3.format(".0%"); const width = 928, rowH = 20, labelW = 150, totalW = 110; const margin = {top: 120, bottom: 20}; const height = margin.top + countries.length * rowH + margin.bottom; const x = d3.scaleBand(top5Purposes.map(d => d.purpose), [labelW, width - totalW]).padding(0.04); const y = d3.scaleBand(countries, [margin.top, height - margin.bottom]).padding(0.08); const color = d3.scaleSequential([0, 1], d3.interpolateBlues); const wrap = (s, n) => s.split(/\s+/).reduce((lines, w) => { const cur = lines[lines.length - 1]; if (cur && (cur + " " + w).length > n) lines.push(w); else lines[lines.length - 1] = cur ? cur + " " + w : w; return lines; }, [""]); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width).attr("height", height) .attr("style", "max-width: 100%; height: auto; font: 11px sans-serif;"); svg.append("text").attr("x", 10).attr("y", 20).attr("font-size", 15).attr("font-weight", "bold") .text("What each recipient's top-5-purpose aid is made of"); svg.append("text").attr("x", 10).attr("y", 38).attr("fill", "#555") .text("Each row sums to 100% across the five purposes. Darker = larger share; the outlined cell is the country's dominant purpose."); top5Purposes.forEach(p => { const lines = wrap(p.purpose, 18); const t = svg.append("text").attr("x", x(p.purpose) + x.bandwidth() / 2) .attr("y", margin.top - 8 - (lines.length - 1) * 12) .attr("text-anchor", "middle").attr("font-weight", "bold"); lines.forEach((l, k) => t.append("tspan").attr("x", x(p.purpose) + x.bandwidth() / 2).attr("dy", k ? 12 : 0).text(l)); }); svg.append("text").attr("x", width - totalW + 10).attr("y", margin.top - 8).attr("font-weight", "bold") .text("Top-5 total"); const row = svg.append("g").selectAll("g").data(countries).join("g") .attr("transform", c => `translate(0,${y(c)})`); row.append("text").attr("x", labelW - 8).attr("y", y.bandwidth() / 2).attr("dy", "0.35em") .attr("text-anchor", "end").text(c => c); row.append("text").attr("x", width - totalW + 10).attr("y", y.bandwidth() / 2).attr("dy", "0.35em") .attr("fill", "#555").text(c => fmt(totals.get(c))); row.each(function(c) { const r = d3.select(this); const ds = top5Purposes.map(p => cell.get(`${c}|${p.purpose}`)); const best = d3.greatest(ds, d => d.share); for (const d of ds) { r.append("rect").attr("x", x(d.purpose)).attr("width", x.bandwidth()).attr("height", y.bandwidth()) .attr("fill", color(d.share)) .attr("stroke", d === best ? "#111" : "none").attr("stroke-width", 1.5) .append("title").text(`${c} · ${d.purpose}\n${fmt(d.amount)} (${pct(d.share)} of its top-5 aid)`); if (d.share >= 0.01) { r.append("text").attr("x", x(d.purpose) + x.bandwidth() / 2).attr("y", y.bandwidth() / 2) .attr("dy", "0.35em").attr("text-anchor", "middle").attr("font-size", 10) .attr("fill", d.share > 0.55 ? "#fff" : "#222").attr("pointer-events", "none") .text(pct(d.share)); } } }); return svg.node(); })()46:T951,### Visualization 3: Analysis *(Fill in from charts 3a and 3b. The questions to answer and where to look:)* **Top 5 purposes:** [list them from the table, with counts]. **Geographic differences between purposes** (chart 3a: compare the five maps, and the "top:" line above each map): - [Which purpose is the most geographically concentrated? For example, is one purpose dominated by a single country or region (South Asia, South America, Eastern Europe)?] - [Which purpose is the most spread out, with many countries colored?] - [Any purpose that goes mainly to a region that receives little of the others?] **Countries that receive more of certain types** (chart 3b: the outlined cell in each row is that country's dominant purpose): - [2–4 countries whose aid is dominated by one purpose, e.g. "X received NN% of its top-5 aid for ".] - [Any regional pattern among countries that share the same dominant purpose.] ### Visualization 3: Design rationale **Chart 3a (small multiples).** One world map per purpose, laid out in a grid. All five maps share **one logarithmic color scale**, so the same color means the same dollar amount on every map, and the maps can be compared side by side. A log scale is needed because amounts range from thousands to billions of dollars. Recipients in the dataset that received nothing for a purpose are white, and countries outside the dataset are grey, so "zero" and "no data" are not confused. The line above each map names the top three recipients, which makes the concentration of each purpose explicit. **Chart 3b (heatmap).** Rows are recipient countries, sorted by the total they received across the five purposes; columns are the purposes. Each cell shows that purpose's **share** of the row's total, so each row sums to 100% and a country's specialization is visible regardless of its size. The darkest cell in each row is outlined. **Comparing the two.** The maps answer the *geographic* part of the question: where each purpose goes and whether it concentrates regionally. However, small European countries are hard to see at this size, and comparing color shades across five separate maps is imprecise. The heatmap answers the *which countries receive more of which type* part precisely, with exact percentages for all countries including the small ones, but it loses the geography. Using both gives a complete answer.47:[{"id":"09040dddbda03374a466600047ccbc70c46e6853884eb725db2141c566ca1b78fb7cc935096e8d5468c21e8df215e73fc49cdaaf7e2f1f89139793da25be02b2","href":"https://static.observableusercontent.com/files/09040dddbda03374a466600047ccbc70c46e6853884eb725db2141c566ca1b78fb7cc935096e8d5468c21e8df215e73fc49cdaaf7e2f1f89139793da25be02b2","name":"aiddata-countries-only - aiddata-countries-only.csv","type":"text/csv","lastModified":1792864732000,"size":8760387}] 38:{"id":"ffdf631e4cce4e59","slug":"mini-project-1-geographic-financial-aid-due-oct-29th","title":"Mini-Project 1: Geographic Financial Aid (Due Oct. 29th)","thumbnail":"ff3f5d7cc3479aacadc56e7050b58add08f425e87824e020c2f0286b0bf81fcf","access_level":"public","create_time":"$D2026-10-20T01:26:42.465Z","update_time":"$D2026-10-24T19:52:41.370Z","view_time":null,"first_public_time":"$D2026-10-24T21:29:38.954Z","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":"d5ead825994975c2","login":"lakshmi-hukunda-raju","name":"Lakshmi Hukunda raju","avatar_url":"https://avatars-next.observableusercontent.com/e918e120d7e6332eab81860310c55d446c3108b389e8491d6705f5446a1e85ff","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":332,"publish_version":332,"role":null,"authored":false,"authors":[{"type":"individual","id":"ff6d6eceb45c4cd9","login":"lakshmi-hukunda-raju","name":"Lakshmi Hukunda raju","avatar_url":"https://avatars-next.observableusercontent.com/e918e120d7e6332eab81860310c55d446c3108b389e8491d6705f5446a1e85ff","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"d5ead825994975c2","login":"lakshmi-hukunda-raju","name":"Lakshmi Hukunda raju","avatar_url":"https://avatars-next.observableusercontent.com/e918e120d7e6332eab81860310c55d446c3108b389e8491d6705f5446a1e85ff","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":"md`# Mini-Project 1: Geographic Financial Aid\n**Student name:** Lakshmi Hukunda Raju\n**NetID:** lh4140`","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"md`## Data Preparation`","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"const aidData = await FileAttachment(\"aiddata-countries-only - aiddata-countries-only.csv\").csv({typed: \"auto\"});","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"aidData.length","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"Inputs.table(aidData)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"## Visualization 1: How do countries compare in donating vs. receiving?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"const cleanData = aidData.filter(d =>\n d.donor && d.recipient &&\n Number.isFinite(d.commitment_amount_usd_constant) &&\n d.commitment_amount_usd_constant > 0\n);","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"const countryTotals = (() => {\n const amt = d => d.commitment_amount_usd_constant;\n const donated = d3.rollup(cleanData, v => d3.sum(v, amt), d => d.donor);\n const received = d3.rollup(cleanData, v => d3.sum(v, amt), d => d.recipient);\n const countries = new Set([...donated.keys(), ...received.keys()]);\n return Array.from(countries, country => {\n const don = donated.get(country) ?? 0;\n const rec = received.get(country) ?? 0;\n return {country, donated: don, received: rec, net: don - rec, donorShare: don / (don + rec)};\n }).sort((a, b) => b.net - a.net);\n})();","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"Inputs.table(countryTotals)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"$3e","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"$3f","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"$40","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"## Visualization 2: Do mostly-receiving or mostly-donating countries cluster geographically?\n\nThe map uses **donor share** = donated ÷ (donated + received) from the Data Preparation step: purple for countries that mostly donate, orange for countries that mostly receive.\n\n**Additional dataset:** country outlines come from [world-atlas](https://github.com/topojson/world-atlas) (Natural Earth 1:50m, TopoJSON), loaded from `https://cdn.jsdelivr.net/npm/world-atlas@2/countries-50m.json`. Four dataset names are renamed to match the map (United States, Korea, Czech Republic, Slovak Republic), and a check cell confirms that all 47 countries are found.\n\nThree views are shown: **2a** a world map, **2b** a zoom on Europe (where most of the dataset's countries are), and **2c** a chart that ranks every pair of bordering countries by how differently they behave.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"import * as topojson from \"npm:topojson-client\";\nconst worldTopo = await fetch(\"https://cdn.jsdelivr.net/npm/world-atlas@2/countries-50m.json\").then(r => r.json());","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"// The dataset and the world map spell four countries differently.\nconst nameFix = {\n \"United States\": \"United States of America\",\n \"Korea\": \"South Korea\",\n \"Czech Republic\": \"Czechia\",\n \"Slovak Republic\": \"Slovakia\"\n};\nconst toMapName = c => nameFix[c] ?? c;\n\nconst worldFeatures = topojson.feature(worldTopo, worldTopo.objects.countries).features\n .filter(f => f.properties.name !== \"Antarctica\");\n\nconst totalsByMapName = new Map(countryTotals.map(d => [toMapName(d.country), d]));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"// Sanity check: should be an empty list (every dataset country found on the map).\ncountryTotals.map(d => d.country).filter(c => !worldFeatures.some(f => f.properties.name === toMapName(c)))","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"$41","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"shareMap({\n focus: {type: \"FeatureCollection\", features: worldFeatures},\n title: \"Where are the donors and the recipients? (world)\",\n subtitle: \"Purple = mostly donates, orange = mostly receives, light grey = roughly balanced. Hover a country for exact values.\"\n})","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"shareMap({\n focus: {type: \"MultiPoint\", coordinates: [[-24, 34], [36, 34], [-24, 71], [36, 71]]},\n height: 660,\n labels: true,\n title: \"Zoom: Europe, where most of the dataset's countries are\",\n subtitle: \"Same color scale as the world map. Labels show dataset countries.\"\n})","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"const neighborPairs = (() => {\n const geoms = worldTopo.objects.countries.geometries;\n const nbrs = topojson.neighbors(geoms); // countries that share a land border\n const pairs = [];\n geoms.forEach((g, i) => {\n for (const j of nbrs[i]) {\n if (j <= i) continue;\n const a = totalsByMapName.get(g.properties.name);\n const b = totalsByMapName.get(geoms[j].properties.name);\n if (!a || !b) continue;\n const [hi, lo] = a.donorShare >= b.donorShare ? [a, b] : [b, a];\n pairs.push({donorSide: hi.country, recipientSide: lo.country,\n shareHi: hi.donorShare, shareLo: lo.donorShare,\n diff: hi.donorShare - lo.donorShare});\n }\n });\n return pairs.sort((p, q) => q.diff - p.diff);\n})();","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"$42","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"$43","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"## Visualization 3: How do the top 5 purposes distribute geographically among recipients?\n\n\"Most frequent\" is measured by the **number of commitments** per purpose across the whole dataset. The table below shows the top 5. For each recipient country, the amount it received for each of these five purposes is then computed.\n\nTwo views are shown: **3a** one map per purpose (geographic distribution) and **3b** a country × purpose heatmap (what each recipient's aid is made of).","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"const top5Purposes = d3.rollups(cleanData, v => v.length, d => d.coalesced_purpose_name)\n .sort((a, b) => b[1] - a[1])\n .slice(0, 5)\n .map(([purpose, count]) => ({purpose, count}));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"Inputs.table(top5Purposes)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"const purposeByRecipient = (() => {\n const names = new Set(top5Purposes.map(d => d.purpose));\n const rows = cleanData.filter(d => names.has(d.coalesced_purpose_name));\n const byCountry = d3.rollup(rows,\n v => d3.sum(v, d => d.commitment_amount_usd_constant),\n d => d.recipient, d => d.coalesced_purpose_name);\n const out = [];\n for (const [country, m] of byCountry) {\n const total = d3.sum(m.values());\n for (const p of top5Purposes) {\n const amount = m.get(p.purpose) ?? 0;\n out.push({country, purpose: p.purpose, amount, total, share: amount / total});\n }\n }\n return out;\n})();","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"$44","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"$45","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"$46","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"## AI Disclosure\n\nPer the course AI policy: I used Claude (Anthropic) as a coding and writing assistant for this assignment.\n\n- **Generated by AI:** the JavaScript/D3 code in the Data Preparation cells and in all chart cells (1a, 1b, 2a, 2b, 2c, 3a, 3b), including the `shareMap` helper and the neighbor-pair computation; first drafts of the design-rationale and comparison paragraphs.\n- **My own work:** [describe, e.g. choosing the chart types, running and checking every cell, reading the charts, writing and editing the analysis sections, verifying the numbers against the tables].\n\nI have reviewed all of the code and text and can explain every part of it.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"2"}} 33:null