34:["$","title",null,{"children":"Mini-Project 1: Geographic Financial Aid (Due Oct. 29th) | Yabo Wang | 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:T45b,**About the data.** The provided file (`aiddata-countries-only.csv`) contains 98,540 aid commitments made between 1973 and 2013. Every donor *and* every recipient in it is one of the same 47 countries, so all totals below only count aid flowing *within* this group (for example, aid to Kenya or Yemen is not in the file). 40 of the 47 countries appear both as a donor and as a recipient. I removed 6 rows in which the donor and the recipient are the same country (each under $70K), and merged purpose names that differ only in capitalisation or spacing (e.g. "HIGHER EDUCATION" and "Higher education", which also share the same purpose code). All preprocessing is done in JavaScript in this notebook (cells `raw`, `countryData`, `top5Purposes`, `purposeData`), so no external preprocessing is needed. Country boundaries for the maps come from the world-atlas package (Natural Earth, 1:110m), loaded in the `world` cell from https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json. Numbers in the written answers that cannot be read off a chart are recomputed in the appendix table at the end of the notebook.3f:T1e31,viz1 = { const size = 560; // square plot: same scale on both axes const margin = {top: 84, right: 24, bottom: 62, left: 92}; const floor = 1e4, ceiling = 3e11, band = 46; // values < $10K go in the "<$10K" band const width = margin.left + band + size + margin.right, height = margin.top + size + band + margin.bottom; const x = d3.scaleLog([floor, ceiling], [margin.left + band, width - margin.right]); const y = d3.scaleLog([floor, ceiling], [height - margin.bottom - band, margin.top]); const px = v => v < floor ? margin.left + band / 2 : x(v); const py = v => v < floor ? height - margin.bottom - band / 2 : y(v); const green = "#1b7837", purple = "#762a83"; const isDonor = d => d.total_donated > d.total_received; const tickValues = d3.range(4, 12).map(e => 10 ** e); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("style", "max-width: 100%; height: auto; font: 11px sans-serif; background: #fff;"); // Title + legend svg.append("text").attr("x", 16).attr("y", 26).attr("font-size", 17).attr("font-weight", 700) .text("Who gives and who receives? Total aid donated vs. received, 1973–2013"); svg.append("text").attr("x", 16).attr("y", 46).attr("fill", "#555") .text("All 47 countries in the dataset · commitments in constant USD · both axes on the same log scale · hover a dot for the amounts"); const key = svg.append("g").attr("transform", "translate(16,66)"); [["Net donor (donated > received)", green], ["Net recipient (received > donated)", purple]].forEach(([label, c], i) => { key.append("circle").attr("cx", 5 + i * 230).attr("cy", 0).attr("r", 5).attr("fill", c); key.append("text").attr("x", 14 + i * 230).attr("y", 4).text(label); }); // "<$10K" bands (log scales cannot show $0) svg.append("rect").attr("x", margin.left).attr("y", margin.top).attr("width", band - 4) .attr("height", height - margin.bottom - margin.top).attr("fill", "#f2f2f2"); svg.append("rect").attr("x", margin.left).attr("y", height - margin.bottom - band + 4) .attr("width", width - margin.right - margin.left).attr("height", band - 4).attr("fill", "#f2f2f2"); // Light grid svg.append("g").attr("stroke", "#e6e6e6") .call(g => g.selectAll(".v").data(tickValues).join("line").attr("class", "v") .attr("x1", x).attr("x2", x).attr("y1", margin.top).attr("y2", height - margin.bottom - band)) .call(g => g.selectAll(".h").data(tickValues).join("line").attr("class", "h") .attr("y1", y).attr("y2", y).attr("x1", margin.left + band).attr("x2", width - margin.right)); // Axes svg.append("g").attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).tickValues(tickValues).tickFormat(fmtUSD)) .call(g => g.append("text").attr("x", margin.left + band / 2 - 2).attr("y", 30) .attr("fill", "currentColor").attr("text-anchor", "middle").text("<$10K")) .call(g => g.append("text").attr("x", (margin.left + width - margin.right) / 2).attr("y", 48) .attr("fill", "currentColor").attr("font-size", 12).attr("font-weight", 600) .text("Total aid RECEIVED →")); svg.append("g").attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).tickValues(tickValues).tickFormat(fmtUSD)) .call(g => g.append("text").attr("x", -9).attr("y", height - margin.bottom - band / 2 + 2) .attr("dy", "0.32em").attr("fill", "currentColor").attr("text-anchor", "end").text("<$10K")) .call(g => g.append("text").attr("transform", "rotate(-90)") .attr("x", -(margin.top + height - margin.bottom) / 2).attr("y", -70) .attr("fill", "currentColor").attr("font-size", 12).attr("font-weight", 600).attr("text-anchor", "middle") .text("Total aid DONATED →")); // Reference lines: 1x and 10x const line = d3.line(d => x(d[0]), d => y(d[1])); const angle = Math.atan2(y(ceiling) - y(floor), x(ceiling) - x(floor)) * 180 / Math.PI; [ {k: 1, dash: "6,4", color: "#666", label: "donated = received", at: 3e5}, {k: 10, dash: "2,4", color: "#888", label: "donated = 10 × received", at: 3e5}, {k: 0.1, dash: "2,4", color: "#888", label: "received = 10 × donated", at: 3e5} ].forEach(({k, dash, color, label, at}) => { const x0 = Math.max(floor, floor / k), x1 = Math.min(ceiling, ceiling / k); svg.append("path").attr("d", line([[x0, x0 * k], [x1, x1 * k]])) .attr("fill", "none").attr("stroke", color).attr("stroke-dasharray", dash); svg.append("text").attr("transform", `translate(${x(at)},${y(at * k) - 5}) rotate(${angle})`) .attr("text-anchor", "middle").attr("fill", color).attr("font-style", "italic").text(label); }); // Region labels svg.append("text").attr("x", margin.left + band + 10).attr("y", margin.top + 16) .attr("fill", green).attr("font-size", 13).attr("font-weight", 700).text("↖ NET DONORS"); svg.append("text").attr("x", width - margin.right - 10).attr("y", height - margin.bottom - band - 12) .attr("text-anchor", "end").attr("fill", purple).attr("font-size", 13).attr("font-weight", 700).text("NET RECIPIENTS ↘"); // Dots svg.append("g").selectAll("circle").data(countryData).join("circle") .attr("cx", d => px(d.total_received)).attr("cy", d => py(d.total_donated)) .attr("r", 5).attr("fill", d => isDonor(d) ? green : purple) .attr("fill-opacity", 0.85).attr("stroke", "#fff") .append("title") .text(d => `${d.country}\nDonated: ${fmtUSD(d.total_donated)}\nReceived: ${fmtUSD(d.total_received)}\nNet ratio: ${d3.format("+.2f")(d.net_ratio)}`); // Country labels: biggest first, avoiding dots and other labels const charW = 6, lineH = 11; const pts = countryData.map(d => [px(d.total_received), py(d.total_donated)]); const taken = [ {x0: margin.left + band, x1: margin.left + band + 120, y0: margin.top, y1: margin.top + 22}, // NET DONORS {x0: width - margin.right - 140, x1: width - margin.right, y0: height - margin.bottom - band - 28, y1: height - margin.bottom - band - 6} ]; const hit = (a, b) => a.x0 < b.x1 && b.x0 < a.x1 && a.y0 < b.y1 && b.y0 < a.y1; const prefer = {"Saudi Arabia": [-8, 9, "end"]}; // makes room for Australia const spots = [[8, 0, "start"], [-8, 0, "end"], [0, -11, "middle"], [0, 12, "middle"], [8, -9, "start"], [8, 9, "start"], [-8, -9, "end"], [-8, 9, "end"]]; const byVolume = d3.sort(countryData, d => -(d.total_donated + d.total_received)); const labels = []; for (const d of byVolume) { const cx = px(d.total_received), cy = py(d.total_donated), w = d.country.length * charW; for (const [dx, dy, anchor] of prefer[d.country] ? [prefer[d.country], ...spots] : spots) { const x0 = anchor === "start" ? cx + dx : anchor === "end" ? cx + dx - w : cx - w / 2; const box = {x0, x1: x0 + w, y0: cy + dy - lineH / 2, y1: cy + dy + lineH / 2}; const outside = box.x0 < margin.left - 2 || box.x1 > width - margin.right || box.y0 < margin.top || box.y1 > height - margin.bottom; const onDot = pts.some(([px_, py_]) => px_ > box.x0 - 4 && px_ < box.x1 + 4 && py_ > box.y0 - 4 && py_ < box.y1 + 4); if (outside || onDot || taken.some(b => hit(b, box))) continue; taken.push(box); labels.push({d, x: cx + dx, y: cy + dy, anchor}); break; } } svg.append("g").selectAll("text").data(labels).join("text") .attr("x", l => l.x).attr("y", l => l.y).attr("dy", "0.35em").attr("text-anchor", l => l.anchor) .attr("font-size", 10).attr("fill", "#333") .attr("stroke", "#fff").attr("stroke-width", 3).attr("paint-order", "stroke") .text(l => l.d.country); return svg.node(); }40:T84d,**Written analysis.** Both giving and receiving are highly concentrated: the United States and Japan account for 63% of all the money donated in the file, and India, Thailand and Brazil for 60% of all the money received. Most countries are strongly one-sided: 32 of the 47 lie outside the two "10×" guide lines, i.e. they donate more than ten times what they receive, or the other way round. - **Donate much more than they receive (top-left).** The United States ($116.2B donated vs. $0.1B received) and Japan ($114.2B vs. $2.1B) are by far the largest donors, followed by Germany ($47.2B donated, practically nothing received), the United Kingdom ($23.7B vs. $1.0B) and France ($15.5B vs. $0.2B). The Netherlands, Switzerland, Sweden, Norway, Denmark, Belgium and Monaco also give more than 10× what they get. - **Receive much more than they donate (bottom-right).** India is the largest recipient ($134.0B) and donated nothing to the other 46 countries. Thailand ($49.0B), Brazil ($36.6B), Colombia ($25.5B), Poland ($24.5B) and South Africa ($18.7B) received billions, while each of them donated less than $1.2M. Korea received $25.3B and donated $1.3B. The other former communist countries of Central and Eastern Europe (Czech Republic, Hungary, Romania, Slovakia, Slovenia, Estonia, Latvia, Lithuania) receive far less, but are just as one-sided. Chile ($7.3B received), Taiwan ($3.4B), Cyprus, Greece and Iceland are also beyond the 10× line: 20 countries receive more than ten times what they donate, and 12 donate more than ten times what they receive. - **Balanced (close to the diagonal).** Australia ($2.45B donated vs. $2.57B received), Austria ($0.78B vs. $0.77B), Italy ($3.8B vs. $2.4B) and Canada ($7.5B vs. $4.1B). Practically everything these four countries received (over 99.9%) came from the United States. - **A surprise.** The Gulf states are net recipients in this dataset: Saudi Arabia donated $1.7B but received $4.9B, Kuwait $1.4B vs. $7.8B — mostly committed by the United States (91% of Saudi Arabia's receipts, 99% of Kuwait's). Their own aid to countries outside the 47 is not in the file.41:T53c,**Thought process.** - *Scatter plot of donated (y) vs. received (x):* one dot per country shows both amounts and how they relate at the same time. - *Log scales on both axes:* totals range from a few thousand dollars to $134B (more than 7 orders of magnitude); on linear axes almost every country would collapse into one corner. Both axes use the same scale (a square plot), so the diagonal is at 45° and a factor of 10 is the same distance in both directions. - *Reference lines:* the dashed diagonal is donated = received; the two dotted lines mark a factor of 10 in either direction, which turns the question's "much more" into something that can be read directly from the chart. - *Zeros:* a log scale cannot show $0, so countries that donated or received less than $10K (including $0) are placed in a separate grey band instead of being silently clamped onto the axis. - *Labels and colour:* the question asks *which* countries give or receive much more, so every dot is named (labels are placed so that none overlaps a dot or another label) and the exact amounts are left to the tooltip; colour repeats the position (green = net donor, purple = net recipient) with a colour-blind-safe purple/green pair that is reused in Visualization #2. - *Limitation:* the chart shows totals for 1973–2013, so changes over time are not visible.42:T12e2,viz2 = { const width = 960, height = 560; const projection = d3.geoEqualEarth().fitExtent([[0, 70], [width, height - 4]], countries); const path = d3.geoPath(projection); const byName = new Map(countryData.map(d => [toMapName(d.country), d])); const inData = f => byName.has(f.properties.name); const europe = d3.geoGraticule().extent([[-25, 34], [36, 71]]).outline(); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("style", "max-width: 100%; height: auto; font: 11px sans-serif; background: #fff;"); svg.append("text").attr("x", 16).attr("y", 24).attr("font-size", 17).attr("font-weight", 700) .text("Where are the net donors and the net recipients?"); svg.append("text").attr("x", 16).attr("y", 43).attr("fill", "#555") .text("Net ratio = (donated − received) / (donated + received), 1973–2013 · grey = not one of the 47 countries in the dataset"); // dataset countries drawn last so their outlines show svg.append("g").selectAll("path") .data(d3.sort(countries.features, f => inData(f))) .join("path") .attr("d", path) .attr("fill", f => inData(f) ? color2(byName.get(f.properties.name).net_ratio) : "#dcdcdc") .attr("stroke", f => inData(f) ? "#444" : "#fff") .attr("stroke-width", f => inData(f) ? 0.5 : 0.4) .append("title") .text(f => { const d = byName.get(f.properties.name); return d ? `${d.country}\nNet ratio: ${d3.format("+.2f")(d.net_ratio)}\nDonated: ${fmtUSD(d.total_donated)}\nReceived: ${fmtUSD(d.total_received)}` : `${f.properties.name}: not in the dataset`; }); // Labels outside Europe const offsets = {"United States of America": [12, 26], "Japan": [26, 4], "South Korea": [-34, -8], "Taiwan": [24, 8], "Chile": [-26, 10], "New Zealand": [-6, 22], "Thailand": [-22, 14], "Saudi Arabia": [-28, 10], "Colombia": [-18, -4]}; const show = ["United States of America", "Canada", "Brazil", "Colombia", "Chile", "South Africa", "India", "Thailand", "Japan", "South Korea", "Taiwan", "Australia", "New Zealand", "Saudi Arabia"]; svg.append("g").selectAll("text") .data(countries.features.filter(f => show.includes(f.properties.name))) .join("text") .attr("transform", f => { const [cx, cy] = path.centroid(f), [dx, dy] = offsets[f.properties.name] ?? [0, 0]; return `translate(${cx + dx},${cy + dy})`; }) .attr("text-anchor", "middle").attr("font-size", 10).attr("font-weight", 600) .attr("stroke", "#fff").attr("stroke-width", 3).attr("paint-order", "stroke") .text(f => { const d = byName.get(f.properties.name); return `${d.country} ${d3.format("+.2f")(d.net_ratio)}`; }); // Box marking the zoomed Europe map svg.append("path").attr("d", path(europe)).attr("fill", "none").attr("stroke", "#222").attr("stroke-dasharray", "3,3"); const [ex, ey] = projection([-25, 71]); svg.append("text").attr("x", ex).attr("y", ey - 5).attr("font-size", 10) .attr("stroke", "#fff").attr("stroke-width", 3).attr("paint-order", "stroke").text("Europe: see zoomed map ↓"); // Gulf states: labels with leader lines const gulf = [["Kuwait", [56, 41]], ["Qatar", [58, 37.5]], ["United Arab Emirates", [60, 34]]]; const gulfF = gulf.map(([name, at]) => [countries.features.find(f => f.properties.name === name), projection(at)]); svg.append("g").attr("stroke", "#222").attr("stroke-width", 0.7).selectAll("line").data(gulfF).join("line") .attr("x1", ([f]) => path.centroid(f)[0]).attr("y1", ([f]) => path.centroid(f)[1]) .attr("x2", ([, p]) => p[0] - 2).attr("y2", ([, p]) => p[1] - 3); svg.append("g").attr("font-size", 10).attr("font-weight", 600) .attr("stroke", "#fff").attr("stroke-width", 3).attr("paint-order", "stroke") .selectAll("text").data(gulfF).join("text") .attr("x", ([, p]) => p[0]).attr("y", ([, p]) => p[1]) .text(([f]) => { const d = byName.get(f.properties.name); return `${d.country === "United Arab Emirates" ? "UAE" : d.country} ${d3.format("+.2f")(d.net_ratio)}`; }); // French Guiana belongs to France in the map data const [gx, gy] = projection([-53, 4]); svg.append("text").attr("x", gx + 10).attr("y", gy - 10).attr("font-size", 9).attr("fill", "#444") .attr("stroke", "#fff").attr("stroke-width", 3).attr("paint-order", "stroke").text("French Guiana (France)"); gradientLegend(svg, { color: color2, x: d3.scaleLinear([-1, 1], [20, 240]), title: "Net ratio", tickValues: [-1, -0.5, 0, 0.5, 1], tickFormat: v => v ? d3.format("+.1~f")(v) : "0", at: [0, height - 64] }); svg.append("text").attr("x", 20).attr("y", height - 18).attr("fill", "#555") .text("−1 = only receives · +1 = only donates"); return svg.node(); }43:T12d8,viz2_europe = { const width = 960, height = 640; const outline = d3.geoGraticule().extent([[-25, 34], [36, 71]]).outline(); const projection = d3.geoAzimuthalEqualArea().rotate([-6, -53]) .fitExtent([[10, 62], [width - 10, height - 10]], outline) .clipExtent([[0, 56], [width, height]]); const path = d3.geoPath(projection); const byName = new Map(countryData.map(d => [toMapName(d.country), d])); const inData = f => byName.has(f.properties.name); const short = {"United Kingdom": "UK", "Czech Republic": "Czechia", "Slovak Republic": "Slovakia", "Netherlands": "Neth.", "Luxembourg": "Lux.", "Switzerland": "Switz.", "Belgium": "Belg."}; // label offsets (px) const offsets = {"Switzerland": [-6, 6], "Austria": [12, 0], "Slovakia": [12, -2], "Hungary": [4, 8], "Denmark": [-4, -2], "Norway": [-38, 60], "Sweden": [-10, 40], "Finland": [0, 30], "Estonia": [26, -2], "Latvia": [34, 0], "Lithuania": [30, 4], "Ireland": [-8, 0], "Cyprus": [0, -14], "Greece": [-10, 6], "France": [10, 10], "Italy": [16, 34], "Portugal": [-8, 6]}; // small countries: labels with leader lines const callouts = {"Netherlands": {dx: -13, dy: -50, anchor: "middle"}, "Belgium": {dx: -140, dy: 6, anchor: "end"}, "Luxembourg": {dx: -150, dy: 36, anchor: "end"}, "Slovenia": {dx: 44, dy: 40, anchor: "start"}}; const labelPos = f => { const [cx, cy] = path.centroid(f), c = callouts[f.properties.name]; const [dx, dy] = c ? [c.dx, c.dy] : offsets[f.properties.name] ?? [0, 0]; return [cx + dx, cy + dy]; }; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("style", "max-width: 100%; height: auto; font: 11px sans-serif; background: #fff;"); svg.append("text").attr("x", 16).attr("y", 24).attr("font-size", 17).attr("font-weight", 700) .text("Zoom on Europe: neighbours with opposite roles"); svg.append("text").attr("x", 16).attr("y", 42).attr("fill", "#555") .text("The dashed box on the world map · same colour scale · number = net ratio · grey = not in the dataset"); // clip to the dashed box const clip = DOM.uid("europe-clip"); svg.append("clipPath").attr("id", clip.id).append("path").attr("d", path(outline)); svg.append("g").attr("clip-path", clip).selectAll("path") .data(d3.sort(countries.features, f => inData(f))) .join("path") .attr("d", path) .attr("fill", f => inData(f) ? color2(byName.get(f.properties.name).net_ratio) : "#dcdcdc") .attr("stroke", f => inData(f) ? "#444" : "#fff") .attr("stroke-width", f => inData(f) ? 0.6 : 0.5) .append("title") .text(f => { const d = byName.get(f.properties.name); return d ? `${d.country}\nNet ratio: ${d3.format("+.2f")(d.net_ratio)}\nDonated: ${fmtUSD(d.total_donated)}\nReceived: ${fmtUSD(d.total_received)}` : `${f.properties.name}: not in the dataset`; }); svg.append("path").attr("d", path(outline)).attr("fill", "none").attr("stroke", "#222").attr("stroke-dasharray", "3,3"); // label dataset countries inside the box const labelled = countries.features.filter(f => { const [lon, lat] = d3.geoCentroid(f); return inData(f) && lon > -25 && lon < 36 && lat > 34 && lat < 71; }); svg.append("g").attr("stroke", "#222").attr("stroke-width", 0.8) .selectAll("line").data(labelled.filter(f => callouts[f.properties.name])).join("line") .attr("x1", f => path.centroid(f)[0]).attr("y1", f => path.centroid(f)[1]) .attr("x2", f => labelPos(f)[0] + ({end: 4, start: -4, middle: 0})[callouts[f.properties.name].anchor]) .attr("y2", f => labelPos(f)[1] + (callouts[f.properties.name].anchor === "middle" ? 15 : -4)); const label = svg.append("g").attr("font-size", 10) .attr("stroke", "#fff").attr("stroke-width", 3).attr("paint-order", "stroke") .selectAll("text").data(labelled).join("text") .attr("text-anchor", f => callouts[f.properties.name]?.anchor ?? "middle") .attr("transform", f => `translate(${labelPos(f)})`); label.append("tspan").attr("x", 0).attr("font-weight", 600) .text(f => { const n = byName.get(f.properties.name).country; return short[n] ?? n; }); label.append("tspan").attr("x", 0).attr("dy", "1.1em") .text(f => d3.format("+.2f")(byName.get(f.properties.name).net_ratio)); gradientLegend(svg, { color: color2, x: d3.scaleLinear([-1, 1], [24, 244]), title: "Net ratio", tickValues: [-1, -0.5, 0, 0.5, 1], tickFormat: v => v ? d3.format("+.1~f")(v) : "0", at: [0, 96] }); svg.append("text").attr("x", 24).attr("y", 142).attr("fill", "#555").text("−1 = only receives · +1 = only donates"); return svg.node(); }44:T89b,**Written analysis — clustering.** Yes, both roles are clearly clustered. - **Net donors** (dark green) are concentrated in western and northern Europe — Germany, the Netherlands and Switzerland (+1.00), Sweden (+0.98), France (+0.97), the UK (+0.92), Denmark (+0.89), Norway (+0.85) and Belgium (+0.84) — plus the two largest donors overall, the United States (+1.00) and Japan (+0.96). - **Strong net recipients** (dark purple, below −0.85) form three groups: (1) Central and Eastern Europe — Poland, the Czech Republic, Slovakia, Hungary, Slovenia, Romania, Estonia, Latvia and Lithuania are all between −0.99 and −1.00, so the former communist countries practically only receive; together with Greece (−0.88) and Cyprus (−1.00), every country in the data from central-eastern and south-eastern Europe is a strong recipient; (2) six countries of the Global South — India, Thailand, Brazil, Colombia, Chile and South Africa (all −1.00); (3) Korea (−0.90) and Taiwan (−0.95) in East Asia. Iceland (−0.98) is the only strong recipient in north-western Europe. - **Moderate net recipients:** Ireland (−0.52), Portugal (−0.44), Luxembourg (−0.67), New Zealand (−0.60) and the Gulf states (Saudi Arabia −0.48, UAE −0.63, Kuwait −0.70, Qatar −0.75). - **Roughly balanced:** Austria (+0.01), Australia (−0.03), Italy (+0.23) and Canada (+0.29); Finland (+0.57) and Spain (+0.56) are moderate donors. **Neighbours with radically different patterns** (mostly visible on the zoomed map): - Germany (+1.00) vs. Poland (−1.00) and the Czech Republic (−0.99) — the sharpest contrast across a land border; Germany alone committed $17.2B to Poland. - Austria (+0.01) vs. Hungary, Slovakia and Slovenia (all −1.00). - Spain (+0.56) vs. Portugal (−0.44), and the UK (+0.92) vs. Ireland (−0.52): neighbours with opposite signs inside Western Europe. - Luxembourg (−0.67) is a net recipient although all its neighbours are strong donors — France (+0.97), Belgium (+0.84), Germany (+1.00); all of its receipts ($0.56B) came from the United States. - Across a short stretch of sea: Finland (+0.57) vs. Estonia (−1.00), and Japan (+0.96) vs. Korea (−0.90).45:T476,**Thought process.** - *Net ratio (D − R) / (D + R) on a choropleth:* the question is about which role a country plays, not how big it is, so a value from −1 (only receives) to +1 (only donates) lets small and large countries be compared on one scale. Size is covered by Visualization #1. - *Diverging purple–green scale centred on 0:* the same colours and meaning as Visualization #1, and colour-blind safe. - *Equal Earth projection* keeps areas undistorted; Antarctica is removed because it only takes space. - *Grey = not one of the 47 countries,* stated in the subtitle, so missing data is not mistaken for "balanced"; dataset countries also get a dark outline. - *Zoomed map of Europe:* 30 of the 47 countries are European and many are tiny, so the neighbour comparison needs a larger map with the value written on each country. - *Caveats:* the ratio hides magnitude (Monaco is +1.00 with $0.9M donated, India −1.00 with $134B received); Monaco and Liechtenstein (−0.62) are too small to appear on the 110m world map, but both are shown in Visualization #1; French Guiana is coloured like France because it is part of France.46:T1247,viz3_maps = { const cols = 2, panelW = 480, panelH = 220, headerH = 62, mapW = 350; const rows = Math.ceil((top5Purposes.length + 1) / cols); const width = cols * panelW, height = 56 + rows * panelH; const projection = d3.geoEqualEarth().fitExtent([[6, headerH], [6 + mapW, panelH - 8]], countries); const path = d3.geoPath(projection); // Europe inset next to each world map (many recipients there are small) const europe = d3.geoGraticule().extent([[5, 34], [35, 61]]).outline(); const box = {x0: mapW + 18, y0: headerH, x1: panelW - 10, y1: panelH - 10}; const insetProjection = d3.geoAzimuthalEqualArea().rotate([-20, -48]) .fitExtent([[box.x0 + 2, box.y0 + 15], [box.x1 - 2, box.y1 - 2]], europe) .clipExtent([[box.x0, box.y0 + 13], [box.x1, box.y1]]); const insetPath = d3.geoPath(insetProjection); const count = d3.rollup(raw, v => v.length, d => d.coalesced_purpose_name); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("style", "max-width: 100%; height: auto; font: 11px sans-serif; background: #fff;"); svg.append("text").attr("x", 16).attr("y", 24).attr("font-size", 17).attr("font-weight", 700) .text("Where does the money for the 5 most frequent purposes go?"); svg.append("text").attr("x", 16).attr("y", 43).attr("fill", "#555") .text("Total amount received per country, 1973–2013 · same colour scale in every map · grey = nothing received for this purpose, or not one of the 47 countries"); top5Purposes.forEach((purpose, i) => { const g = svg.append("g").attr("transform", `translate(${(i % cols) * panelW},${56 + Math.floor(i / cols) * panelH})`); const rowsP = d3.sort(purposeData.filter(d => d.purpose === purpose), d => -d.amount); const amount = new Map(rowsP.map(d => [toMapName(d.recipient), d.amount])); const fill = f => amount.has(f.properties.name) ? color3(amount.get(f.properties.name)) : "#e3e3e3"; const tip = f => `${f.properties.name}\n${purpose}: ${amount.has(f.properties.name) ? fmtUSD(amount.get(f.properties.name)) : "none"}`; g.append("rect").attr("x", 4).attr("y", 4).attr("width", panelW - 8).attr("height", panelH - 8) .attr("fill", "none").attr("stroke", "#e5e5e5"); g.append("text").attr("x", 14).attr("y", 24).attr("font-size", 13).attr("font-weight", 700) .text(`#${i + 1} ${purpose}`); g.append("text").attr("x", 14).attr("y", 40).attr("fill", "#555") .text(`${d3.format(",")(count.get(purpose))} commitments · ${rowsP.length} recipients · ${fmtUSD(d3.sum(rowsP, d => d.amount))} in total`); g.append("text").attr("x", 14).attr("y", 55).attr("fill", "#555") .text("Top: " + rowsP.slice(0, 3).map(d => `${d.recipient} ${fmtUSD(d.amount)}`).join(" · ")); // world map, with a dashed box around the area shown in the inset g.append("g").selectAll("path").data(countries.features).join("path") .attr("d", path).attr("fill", fill).attr("stroke", "#fff").attr("stroke-width", 0.3) .append("title").text(tip); g.append("path").attr("d", path(europe)).attr("fill", "none") .attr("stroke", "#444").attr("stroke-width", 0.6).attr("stroke-dasharray", "2,2"); // Europe inset g.append("rect").attr("x", box.x0).attr("y", box.y0).attr("width", box.x1 - box.x0).attr("height", box.y1 - box.y0) .attr("fill", "#fff").attr("stroke", "#bbb"); g.append("g").selectAll("path").data(countries.features).join("path") .attr("d", insetPath).attr("fill", fill).attr("stroke", "#fff").attr("stroke-width", 0.5) .append("title").text(tip); g.append("text").attr("x", box.x0 + 4).attr("y", box.y0 + 10).attr("font-size", 9).attr("fill", "#555") .text("Europe, enlarged"); }); // Legend in the empty sixth panel const slot = top5Purposes.length; const lx = (slot % cols) * panelW, ly = 56 + Math.floor(slot / cols) * panelH; gradientLegend(svg, { color: color3, x: d3.scaleLog(color3.domain(), [lx + 30, lx + panelW - 40]), title: "Amount received for that purpose (constant USD, log scale)", tickValues: [1e6, 1e7, 1e8, 1e9], tickFormat: fmtUSD, at: [0, ly + 50] }); svg.append("text").attr("x", lx + 30).attr("y", ly + 110).attr("fill", "#555") .text("Amounts below $1M use the lightest colour."); svg.append("text").attr("x", lx + 30).attr("y", ly + 130).attr("fill", "#555") .text("Dashed box on each world map = area enlarged on its right."); svg.append("text").attr("x", lx + 30).attr("y", ly + 150).attr("fill", "#555") .text("Kuwait, Qatar and Taiwan are too small to see (heatmap: Kuwait, Taiwan)."); return svg.node(); }47:T1286,viz3_heatmap = { const minTotal = 1e7; // hide recipients with < $10M // columns grouped by region const regions = [ ["Six large Global South recipients", ["India", "Colombia", "South Africa", "Thailand", "Brazil", "Chile"]], ["Central, eastern & south-eastern Europe", ["Poland", "Czech Republic", "Romania", "Hungary", "Slovak Republic", "Cyprus", "Lithuania", "Slovenia", "Latvia", "Estonia"]], ["East Asia", ["Korea", "Taiwan"]], ["Gulf", ["Saudi Arabia", "Kuwait", "Qatar", "United Arab Emirates"]] ]; const regionOf = new Map(regions.flatMap(([r, cs]) => cs.map(c => [c, r]))); const totals = d3.rollup(purposeData, v => d3.sum(v, d => d.amount), d => d.recipient); const shown = [...totals].filter(([, t]) => t >= minTotal).map(([r]) => r); const groups = d3.groups(shown, r => regionOf.get(r) ?? "Other") .sort(([a], [b]) => d3.ascending([...regions.map(([r]) => r), "Other"].indexOf(a), [...regions.map(([r]) => r), "Other"].indexOf(b))) .map(([region, cs]) => [region, d3.sort(cs, r => -totals.get(r))]); const amount = new Map(purposeData.map(d => [`${d.recipient}|${d.purpose}`, d.amount])); const s = 36, gap = 12; // square cells const margin = {top: 196, right: 56, bottom: 30, left: 170}; const xs = new Map(); let x = margin.left; for (const [, cs] of groups) { for (const r of cs) { xs.set(r, x); x += s; } x += gap; } const width = x - gap + margin.right; const height = margin.top + top5Purposes.length * s + 22 + margin.bottom; const color = d3.scaleSequential([0, 0.8], d3.interpolateBlues).clamp(true); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("style", "max-width: 100%; height: auto; font: 11px sans-serif; background: #fff;"); svg.append("text").attr("x", 16).attr("y", 24).attr("font-size", 17).attr("font-weight", 700) .text("Which recipients specialise in which purposes?"); svg.append("text").attr("x", 16).attr("y", 43).attr("fill", "#555") .text("Each column sums to 100%: share of the country's top-5-purpose money going to each purpose · columns grouped by region, sorted by total"); svg.append("text").attr("x", 16).attr("y", 59).attr("fill", "#555") .text(`Darker blue = larger share (80% or more is darkest) · grey = nothing received · ${totals.size - shown.length} recipients with less than ${fmtUSD(minTotal)} in total are not shown`); // region brackets const g0 = svg.append("g").attr("transform", `translate(0,${margin.top - 118})`); for (const [region, cs] of groups) { const x0 = xs.get(cs[0]), x1 = xs.get(cs.at(-1)) + s; g0.append("path").attr("d", `M${x0 + 1},6V0H${x1 - 1}V6`).attr("fill", "none").attr("stroke", "#999"); g0.append("text").attr("x", (x0 + x1) / 2).attr("y", -5).attr("text-anchor", "middle").attr("font-weight", 600) .text(cs.length * s < region.length * 6 ? region.split(" ")[0] : region); } // country names, rotated svg.append("g").selectAll("text").data(shown).join("text") .attr("transform", r => `translate(${xs.get(r) + s / 2 + 4},${margin.top - 6}) rotate(-60)`) .text(r => r); // purpose names svg.append("g").selectAll("text").data(top5Purposes).join("text") .attr("x", margin.left - 10).attr("y", (p, i) => margin.top + i * s + s / 2).attr("dy", "0.35em") .attr("text-anchor", "end").attr("font-weight", 600).text(p => p); for (const r of shown) { top5Purposes.forEach((p, i) => { const a = amount.get(`${r}|${p}`) ?? 0, share = a / totals.get(r); const cell = svg.append("g").attr("transform", `translate(${xs.get(r)},${margin.top + i * s})`); cell.append("rect").attr("x", 1).attr("y", 1).attr("width", s - 2).attr("height", s - 2) .attr("fill", a > 0 ? color(share) : "#ececec") .append("title").text(`${r} · ${p}\n${fmtUSD(a)} (${d3.format(".1%")(share)} of ${fmtUSD(totals.get(r))})`); if (a > 0) cell.append("text").attr("x", s / 2).attr("y", s / 2).attr("dy", "0.35em").attr("text-anchor", "middle") .attr("font-size", 10).attr("fill", share > 0.45 ? "#fff" : "#333").attr("pointer-events", "none") .text(share < 0.005 ? "<1%" : d3.format(".0%")(share)); }); svg.append("text").attr("x", xs.get(r) + s / 2).attr("y", margin.top + top5Purposes.length * s + 14) .attr("text-anchor", "middle").attr("font-size", 9).attr("fill", "#555").text(fmtUSD(totals.get(r))); } svg.append("text").attr("x", margin.left - 10).attr("y", margin.top + top5Purposes.length * s + 14) .attr("text-anchor", "end").attr("font-size", 9).attr("fill", "#555").text("Total in these 5 purposes"); return svg.node(); }48:T823,**Written analysis.** The five most frequent purposes (by number of commitments, after merging different spellings of the same purpose) are *Sectors not specified* (8,140), *Social/welfare services* (6,406), *Strengthening civil society* (5,607), *Higher education* (5,260) and *Multisector aid* (3,028). Together they make up 29% of all commitments but only 8.2% of the money: they are many small commitments, while the big amounts go to infrastructure such as air and rail transport. **Geographic differences between purposes.** Four of the five purposes are concentrated in the same six countries — India, Colombia, South Africa, Thailand, Brazil and Chile — which receive between 88% and 97% of the money for each of these four purposes. *Higher education* is the exception: the six get only 66%, the remaining third goes mainly to Central and Eastern Europe and Korea, and no country dominates it (the top recipient, India, gets only 19%). Within the six, the leader differs by purpose: - *Social/welfare services* is almost a Colombian category: Colombia received $6.45B, 68% of the total. - *Sectors not specified* and *Multisector aid* are dominated by India (59% and 41%); Thailand is second in multisector aid (22%). - *Strengthening civil society* is led by South Africa (30%) and Colombia (26%) rather than India. **Countries that tend to receive certain types** (heatmap; share of each country's top-5 money): - Colombia: 80% social/welfare services. - Higher education dominates for Korea, Slovenia and the United States (82% each) and Taiwan (69%), and for most of Central and Eastern Europe: Slovakia 64%, Poland 59%, Lithuania 52%, Romania 51%, Latvia and Estonia 49%. - Mostly "sectors not specified": the Czech Republic (68%), Kuwait (60%), India (54%) and Saudi Arabia (51%); Cyprus also gets its largest share (42%) from it. - Multisector aid is the largest share for Hungary (49%) and Thailand (37%). - South Africa has by far the largest share of civil-society aid (24%), while Brazil (no purpose above 28%) and Chile (30%) receive the most balanced mix.49:T969,**Thought process.** - *Small multiples instead of a dropdown:* a first version showed one purpose at a time with a dropdown, but comparing purposes then means remembering earlier maps, so the five maps are now shown side by side. - *One shared log colour scale:* amounts per country range from under $1M to $6.5B; a shared scale makes the colours comparable across all five maps. - *Heatmap normalised per country for the second question:* on the maps, big recipients such as India are dark for every purpose simply because they receive a lot, so the maps cannot show tendencies. Dividing each country's column by its total removes size and shows the mix. Columns are grouped by region and sorted by total within each region, so the heatmap also shows geography that is too small to see on the world maps (for example, higher education is the largest share in 7 of the 10 Central, eastern and south-eastern European recipients). Cells are square so that neither rows nor columns look more strongly grouped, and the percentages are printed because the written answer compares exact shares, which colour alone cannot show precisely. - *The two views complement each other:* the maps show geography, with Europe enlarged next to each map because many recipients there are small; Kuwait, Qatar and Taiwan are still too small to see. The heatmap shows every recipient above $10M clearly, grouped by region, but not their exact location. - *Definitions and caveats:* "most frequent" is counted by number of commitments, as the question asks. Spellings of the same purpose are merged first; without this, e.g. Higher education would have 4,593 instead of 5,260 commitments and Poland's heatmap column would look very different (81% of Poland's higher-education money is recorded under the spelling "HIGHER EDUCATION"). Counting by purpose code instead gives the same five purposes in the same order (see the appendix). "Sectors not specified" is a catch-all category, so it says little about what the money was for; it is kept because the question asks for the most frequent purposes as recorded (without it, #6 *Material relief assistance and services*, with 2,243 commitments, would take its place). Recipients with less than $10M in these purposes (Austria, Finland, Germany, Qatar, UAE) are left out of the heatmap because their totals are too small for the percentages to mean much; they are still on the maps.4a:T11e2,// Numbers quoted in the text that are not shown on a chart facts = { const amt = d => d.commitment_amount_usd_constant; const sum = v => d3.sum(v, amt); const total = sum(raw); const pct = d3.format(".1%"), pct2 = d3.format(".2%"); const byCountry = new Map(countryData.map(d => [d.country, d])); const received = d3.rollup(raw, sum, d => d.recipient); const fromUS = d3.rollup(raw.filter(d => d.donor === "United States"), sum, d => d.recipient); const usShare = c => pct2((fromUS.get(c) ?? 0) / received.get(c)); const inTop5 = raw.filter(d => top5Purposes.includes(d.coalesced_purpose_name)); const six = ["India", "Colombia", "South Africa", "Thailand", "Brazil", "Chile"]; const purposeTotal = d3.rollup(purposeData, v => d3.sum(v, d => d.amount), d => d.purpose); const byMoney = d3.rollups(raw, sum, d => d.coalesced_purpose_name).sort((a, b) => d3.descending(a[1], b[1])); const byCount = d3.rollups(raw, v => v.length, d => d.coalesced_purpose_name).sort((a, b) => d3.descending(a[1], b[1])); const polandHE = raw.filter(d => d.recipient === "Poland" && d.coalesced_purpose_name === "Higher education"); const top5Totals = d3.rollup(purposeData, v => d3.sum(v, d => d.amount), d => d.recipient); const rows = [ ["Viz 1", "Share of all money donated that came from the United States and Japan", pct((byCountry.get("United States").total_donated + byCountry.get("Japan").total_donated) / total)], ["Viz 1", "Share of all money received that went to India, Thailand and Brazil", pct(d3.sum(["India", "Thailand", "Brazil"], c => byCountry.get(c).total_received) / total)], ["Viz 1", "Countries donating > 10× what they receive / receiving > 10× what they donate", `${countryData.filter(d => d.total_donated > 10 * d.total_received).length} / ${countryData.filter(d => d.total_received > 10 * d.total_donated).length}`], ...["Australia", "Austria", "Italy", "Canada", "Saudi Arabia", "Kuwait"].map(c => ["Viz 1", `Share of ${c}'s receipts committed by the United States`, usShare(c)]), ["Viz 2", "Committed by Germany to Poland", fmtUSD(sum(raw.filter(d => d.donor === "Germany" && d.recipient === "Poland")))], ["Viz 2", "Share of Luxembourg's receipts committed by the United States", usShare("Luxembourg")], ["Viz 3", "Top-5 purposes: share of all commitments / of all money", `${pct(inTop5.length / raw.length)} / ${pct(sum(inTop5) / total)}`], ["Viz 3", "Largest purposes by money", byMoney.slice(0, 2).map(([p, s]) => `${p} ${fmtUSD(s)}`).join(" · ")], ...top5Purposes.flatMap(p => { const rowsP = d3.sort(purposeData.filter(d => d.purpose === p), d => -d.amount); return [ ["Viz 3", `${p}: share received by the six (${six.join(", ")})`, pct(d3.sum(rowsP.filter(d => six.includes(d.recipient)), d => d.amount) / purposeTotal.get(p))], ["Viz 3", `${p}: largest recipients' shares`, rowsP.slice(0, 3).map(d => `${d.recipient} ${pct(d.amount / purposeTotal.get(p))}`).join(" · ")] ]; }), ["Viz 3", 'Commitments recorded exactly as "Higher education" (before merging spellings)', d3.format(",")(raw.filter(d => d.purpose_as_recorded === "Higher education").length)], ["Viz 3", "Share of Poland's higher-education money recorded as \"HIGHER EDUCATION\"", pct(sum(polandHE.filter(d => d.purpose_as_recorded === "HIGHER EDUCATION")) / sum(polandHE))], ["Viz 3", "Top-5 purposes when counted by purpose code (most common name under each code)", d3.rollups(raw, v => [v.length, d3.mode(v, d => d.coalesced_purpose_name)], d => d.coalesced_purpose_code) .sort((a, b) => d3.descending(a[1][0], b[1][0])).slice(0, 5) .map(([, [n, name]]) => `${name} (${d3.format(",")(n)})`).join(" · ")], ["Viz 3", "6th most frequent purpose", `${byCount[5][0]} (${d3.format(",")(byCount[5][1])} commitments)`], ["Viz 3", "Recipients left out of the heatmap (less than $10M in these purposes)", [...top5Totals].filter(([, t]) => t < 1e7).map(([r]) => r).sort().join(", ")] ]; const table = d3.create("table").style("max-width", "900px"); table.append("caption").style("text-align", "left").style("font-weight", 600) .text("Supporting numbers quoted in the written analyses"); table.append("thead").append("tr").selectAll("th").data(["Chart", "Number quoted in the text", "Value"]).join("th").text(d => d); table.append("tbody").selectAll("tr").data(rows).join("tr") .selectAll("td").data(d => d).join("td").text(d => d); return table.node(); }4b:[{"id":"09040dddbda03374a466600047ccbc70c46e6853884eb725db2141c566ca1b78fb7cc935096e8d5468c21e8df215e73fc49cdaaf7e2f1f89139793da25be02b2","href":"https://static.observableusercontent.com/files/09040dddbda03374a466600047ccbc70c46e6853884eb725db2141c566ca1b78fb7cc935096e8d5468c21e8df215e73fc49cdaaf7e2f1f89139793da25be02b2","name":"aiddata-countries-only.csv","type":"text/csv","lastModified":1793285125665,"size":8760387}] 38:{"id":"5b769e0e779507f8","slug":"mini-project-1-geographic-financial-aid-due-oct-29th","title":"Mini-Project 1: Geographic Financial Aid (Due Oct. 29th)","thumbnail":"1471d049f1a6dc8cd023e9cc261d13c4b416e58d311a7d726003ff783f7589fa","access_level":"public","create_time":"$D2026-10-19T23:16:46.386Z","update_time":"$D2026-10-29T23:35:03.571Z","view_time":null,"first_public_time":"$D2026-10-29T18:19:40.121Z","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":"95b845878324a756","login":"yabo-wang","name":"Yabo Wang","avatar_url":"https://avatars-next.observableusercontent.com/de0fd0b7a43eaf569dd0c8ef61518874f46c0e852b5b80af8f3864798950c687","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":357,"publish_version":357,"role":null,"authored":false,"authors":[{"type":"individual","id":"8e1cd5bbb0dcf43e","login":"yabo-wang","name":"Yabo Wang","avatar_url":"https://avatars-next.observableusercontent.com/de0fd0b7a43eaf569dd0c8ef61518874f46c0e852b5b80af8f3864798950c687","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"95b845878324a756","login":"yabo-wang","name":"Yabo Wang","avatar_url":"https://avatars-next.observableusercontent.com/de0fd0b7a43eaf569dd0c8ef61518874f46c0e852b5b80af8f3864798950c687","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":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"**Use of generative AI.** I wrote the first version of this notebook (code and written answers) myself and used Claude (Anthropic) to review and revise it:\n- checked every number in the written answers against the data and pointed out errors in my draft, which were corrected;\n- revised the `viz3_heatmap` and `facts` cells;\n- revised parts of my other cells: layout, label placement, legends, map details and the colour scale;\n- wrote some sentences in the written analyses and thought-process notes.\n\nI decided which changes to keep, and I can explain all the code in this notebook.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"// Load the CSV\nraw = {\n const rows = (await FileAttachment(\"aiddata-countries-only.csv\").csv({typed: true}))\n .filter(d => d.donor !== d.recipient); // drop 6 self-flows\n // merge spellings of the same purpose (e.g. \"HIGHER EDUCATION\" / \"Higher education\"), no space after \"/\"\n const key = name => String(name).toLowerCase().replace(/\\s+/g, \"\");\n const spelling = new Map(\n d3.rollups(rows, v => v.length, d => key(d.coalesced_purpose_name), d => d.coalesced_purpose_name)\n .map(([k, variants]) => [k, d3.greatest(variants, ([, n]) => n)[0].replace(/\\/ /g, \"/\")])\n );\n return rows.map(d => ({...d, purpose_as_recorded: d.coalesced_purpose_name,\n coalesced_purpose_name: spelling.get(key(d.coalesced_purpose_name))}));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"// Viz 1 & 2: totals and net ratio per country\ncountryData = {\n const sum = v => d3.sum(v, d => d.commitment_amount_usd_constant);\n const donated = d3.rollup(raw, sum, d => d.donor);\n const received = d3.rollup(raw, sum, d => d.recipient);\n const names = new Set([...donated.keys(), ...received.keys()]);\n return Array.from(names, country => {\n const total_donated = donated.get(country) ?? 0;\n const total_received = received.get(country) ?? 0;\n const net_ratio = (total_donated - total_received) / ((total_donated + total_received) || 1);\n return {country, total_donated, total_received, net_ratio};\n }).sort((a, b) => d3.descending(a.net_ratio, b.net_ratio));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"// Viz 3: 5 most frequent purposes (by count)\ntop5Purposes = d3.rollups(raw, v => v.length, d => d.coalesced_purpose_name)\n .sort((a, b) => d3.descending(a[1], b[1]))\n .slice(0, 5)\n .map(([purpose]) => purpose)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"// Viz 3: amount per recipient and purpose\npurposeData = d3.rollups(\n raw.filter(d => top5Purposes.includes(d.coalesced_purpose_name)),\n v => d3.sum(v, d => d.commitment_amount_usd_constant),\n d => d.recipient,\n d => d.coalesced_purpose_name\n )\n .flatMap(([recipient, byPurpose]) => byPurpose.map(([purpose, amount]) => ({recipient, purpose, amount})))\n .filter(d => d.amount > 0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"// AidData names -> map names\ntoMapName = {\n const fix = new Map([\n [\"United States\", \"United States of America\"],\n [\"Korea\", \"South Korea\"],\n [\"Czech Republic\", \"Czechia\"],\n [\"Slovak Republic\", \"Slovakia\"]\n ]);\n return name => fix.get(name) ?? name;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"world = d3.json(\"https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"// Country shapes without Antarctica (Monaco and Liechtenstein are not in this map)\ncountries = {\n const fc = topojson.feature(world, world.objects.countries);\n return {...fc, features: fc.features.filter(f => f.properties.name !== \"Antarctica\")};\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"// $1.2B instead of d3's SI \"$1.2G\"\nfmtUSD = v => d3.format(\"$.3~s\")(v).replace(\"G\", \"B\").replace(\"k\", \"K\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"// Colour legend helper\ngradientLegend = (svg, {color, x, title, tickValues, tickFormat, at}) => {\n const [x0, x1] = x.range();\n const uid = DOM.uid(\"legend\");\n const g = svg.append(\"g\").attr(\"transform\", `translate(${at[0]},${at[1]})`);\n g.append(\"defs\").append(\"linearGradient\").attr(\"id\", uid.id)\n .selectAll(\"stop\").data(d3.range(0, 1.0001, 0.05)).join(\"stop\")\n .attr(\"offset\", t => t)\n .attr(\"stop-color\", t => color(x.invert(x0 + t * (x1 - x0))));\n g.append(\"rect\").attr(\"x\", x0).attr(\"width\", x1 - x0).attr(\"height\", 10).attr(\"fill\", uid);\n g.append(\"g\").attr(\"transform\", \"translate(0,10)\")\n .call(d3.axisBottom(x).tickValues(tickValues).tickFormat(tickFormat).tickSize(4))\n .call(g => g.select(\".domain\").remove());\n g.append(\"text\").attr(\"x\", x0).attr(\"y\", -6).attr(\"font-weight\", 600).text(title);\n return g;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"## Visualization #1\n**Question:** How do the countries compare in terms of how much they receive and donate? Are there countries that donate much more than they receive or receive much more than they donate?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"$3f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"$40","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"$41","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"## Visualization #2\n**Question:** Do the countries that mostly receive or mostly donate tend to cluster around specific geographical areas of the world? Are there neighboring countries that have radically different patterns in terms of how much they receive vs. how much they donate?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"// Same colours as Viz 1 (colour-blind safe)\ncolor2 = d3.scaleDiverging([-1, 0, 1], d3.interpolatePRGn)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"$42","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"$43","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"$44","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"$45","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"## Visualization #3\n**Question:** Are there any major differences in how the top 5 most frequent purposes of disbursements (across all countries) distribute geographically in terms of countries that receive donations? Are there countries that tend to receive more of certain types of donations than others?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"// One log scale for all five maps; starts at 20% so small amounts are not near-white\ncolor3 = d3.scaleSequentialLog([1e6, d3.max(purposeData, d => d.amount)], t => d3.interpolateYlGnBu(0.2 + 0.8 * t)).clamp(true)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"$47","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"$48","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"$49","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"## Appendix: supporting numbers\nNumbers quoted in the written analyses that cannot be read directly off a chart, recomputed from the data cells above.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4b","stdlib":"2"}} 33:null