34:["$","title",null,{"children":"Mini-Project 1: Geographic Financial Aid (Due Oct. 29th) | Mitran Ramesh kumar | 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:T498,# My Solutions **AI use disclosure (course policy):** I used Claude (Anthropic) to help write the D3 code for all charts and the first drafts of the analysis and design paragraphs, and to compute and cross-check the numbers. I ran every cell, checked the numbers against the data and tooltips, chose which charts to keep, and edited the text. I can explain every design and implementation choice in this notebook. **Data and preprocessing:** all preprocessing is done in JavaScript in this notebook. The data is the countries-only file (47 countries, 1947–2013, constant USD). "Share" = donated ÷ (donated + received), so 100% = a pure donor and 0% = a pure recipient. This file only keeps rows where both donor and recipient are among the 47 countries, so "India donated $0" means India gave nothing to these 47 countries in this file. It does not mean India gave no aid at all. Six rows list the same country as donor and recipient; I kept them (they are negligible). **External dataset:** World Atlas (Natural Earth country shapes, TopoJSON, 50m), loaded from https://cdn.jsdelivr.net/npm/world-atlas@2/countries-50m.json, used for the maps in Visualizations 2 and 3.3f:Te8b,{ const W = 820, H = 640, m = {t: 56, r: 24, b: 56, l: 76}; const max = d3.max(totals, d => Math.max(d.donated, d.received)) * 1.25; const x = d3.scaleSymlog().constant(1e6).domain([0, max]).range([m.l, W - m.r]); const y = d3.scaleSymlog().constant(1e6).domain([0, max]).range([H - m.b, m.t]); const ticks = [0, 1e6, 1e7, 1e8, 1e9, 1e10, 1e11].filter(t => t <= max); const svg = d3.create("svg").attr("viewBox", [0, 0, W, H]).style("max-width", "100%").style("font", "11px sans-serif"); svg.append("text").attr("x", m.l).attr("y", 20).attr("font-size", 15).attr("font-weight", 600) .text("Who gives and who gets? Total aid donated vs. received, 1947–2013"); svg.append("text").attr("x", m.l).attr("y", 38).attr("fill", "#555") .text("One dot per country · log-like axes (constant 2011 USD) · blue = mostly donates, orange = mostly receives"); for (const t of ticks) { svg.append("line").attr("x1", x(t)).attr("x2", x(t)).attr("y1", m.t).attr("y2", H - m.b).attr("stroke", "#eee"); svg.append("line").attr("y1", y(t)).attr("y2", y(t)).attr("x1", m.l).attr("x2", W - m.r).attr("stroke", "#eee"); } svg.append("g").attr("transform", `translate(0,${H - m.b})`).call(d3.axisBottom(x).tickValues(ticks).tickFormat(fmtUSD)).call(g => g.select(".domain").attr("stroke", "#999")); svg.append("g").attr("transform", `translate(${m.l},0)`).call(d3.axisLeft(y).tickValues(ticks).tickFormat(fmtUSD)).call(g => g.select(".domain").attr("stroke", "#999")); svg.append("text").attr("x", (m.l + W - m.r) / 2).attr("y", H - 14).attr("text-anchor", "middle").text("Total donated →"); svg.append("text").attr("transform", "rotate(-90)").attr("x", -(m.t + H - m.b) / 2).attr("y", 16).attr("text-anchor", "middle").text("Total received →"); const line = (k, label, dash) => { const pts = d3.range(0, 1.0001, 0.005).map(f => { const v = 1e4 * (max / 1e4) ** f; return [v, v * k]; }).filter(([a, b]) => b <= max); svg.append("path").attr("fill", "none").attr("stroke", "#777").attr("stroke-dasharray", dash) .attr("d", d3.line(p => x(p[0]), p => y(p[1]))(pts)); const [lx, ly] = pts.at(-1); svg.append("text").attr("x", x(lx) - 4).attr("y", y(ly) + (k > 1 ? 14 : -6)).attr("text-anchor", "end").attr("fill", "#777").text(label); }; line(1, "donated = received", null); line(10, "receives 10× more", "3 3"); line(0.1, "donates 10× more", "3 3"); const pts = svg.append("g").selectAll("circle").data(totals).join("circle") .attr("cx", d => x(d.donated)).attr("cy", d => y(d.received)).attr("r", 5.5) .attr("fill", d => balanceColor(d.share)).attr("stroke", "#444").attr("stroke-width", 0.6); pts.append("title").text(d => `${d.name}\nDonated ${fmtUSD(d.donated)}\nReceived ${fmtUSD(d.received)}\n${d3.format(".0%")(d.share)} of its flow is outgoing`); const placed = []; for (const d of d3.sort(totals, d => -d.total)) { const px = x(d.donated), py = y(d.received), w = d.name.length * 5.4 + 2; const cands = d3.cross([0, -12, 12, -24, 24, -36, 36], [9, -9 - w]); for (const [dy, dx] of cands) { const b = {x0: px + dx, x1: px + dx + w, y0: py + dy - 6, y1: py + dy + 6}; if (b.x0 < m.l + 2 || b.x1 > W - 4 || b.y0 < m.t || b.y1 > H - m.b) 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); if (dy) svg.append("line").attr("x1", px).attr("y1", py).attr("x2", dx > 0 ? b.x0 - 1 : b.x1 + 1).attr("y2", py + dy).attr("stroke", "#bbb").attr("stroke-width", .7); svg.append("text").attr("x", b.x0).attr("y", py + dy).attr("dy", "0.35em").attr("font-size", 10).attr("fill", "#222").text(d.name); break; } } display(svg.node()); }40:T780,{ const W = 820, rowH = 15, m = {t: 70, r: 120, b: 30, l: 150}, H = m.t + totals.length * rowH + m.b; const x = d3.scaleLinear([0, 1], [m.l, W - m.r]); const y = d3.scaleBand(totals.map(d => d.name), [m.t, H - m.b]); const r = d3.scaleSqrt([0, d3.max(totals, d => d.total)], [2.5, 9]); const svg = d3.create("svg").attr("viewBox", [0, 0, W, H]).style("max-width", "100%").style("font", "11px sans-serif"); svg.append("text").attr("x", 10).attr("y", 20).attr("font-size", 15).attr("font-weight", 600).text("Share of each country's aid flow that is outgoing"); svg.append("text").attr("x", 10).attr("y", 38).attr("fill", "#555").text("Donated ÷ (donated + received). Dot area ∝ total flow (donated + received). Sorted from pure donors to pure recipients."); svg.append("g").attr("transform", `translate(0,${m.t - 6})`).call(d3.axisTop(x).tickValues([0, .25, .5, .75, 1]).tickFormat(d3.format(".0%"))) .call(g => g.select(".domain").remove()).call(g => g.selectAll(".tick line").clone().attr("y2", H - m.t - m.b + 6).attr("stroke", "#eee")); svg.append("line").attr("x1", x(.5)).attr("x2", x(.5)).attr("y1", m.t - 6).attr("y2", H - m.b).attr("stroke", "#888").attr("stroke-dasharray", "3 3"); const g = svg.append("g").selectAll("g").data(totals).join("g").attr("transform", d => `translate(0,${y(d.name) + rowH / 2})`); g.append("text").attr("x", m.l - 10).attr("text-anchor", "end").attr("dy", "0.35em").text(d => d.name); g.append("circle").attr("cx", d => x(d.share)).attr("r", d => r(d.total)).attr("fill", d => balanceColor(d.share)).attr("stroke", "#444").attr("stroke-width", .5); g.append("text").attr("x", W - m.r + 14).attr("dy", "0.35em").attr("fill", "#555").text(d => fmtUSD(d.net >= 0 ? d.net : -d.net) + (d.net >= 0 ? " net out" : " net in")); g.append("title").text(d => `${d.name}\nDonated ${fmtUSD(d.donated)}\nReceived ${fmtUSD(d.received)}`); display(svg.node()); }41:Ta8f,### Visualization #1: Analysis The countries differ enormously. The United States ($116.18B) and Japan ($114.18B) donate the most, followed by Germany ($47.22B). Those three account for about 76% of all money donated. India receives the most ($133.98B), followed by Thailand ($49.04B) and Brazil ($36.61B); the top three recipients receive about 60% of everything received. **Countries that donate much more than they receive (at least 10×, 12 countries):** United States (about 1,100×, $116.18B donated vs. $0.10B received), Sweden (about 106×), France (about 65×), Japan (about 55×), United Kingdom (about 25×), Denmark, Norway and Belgium (about 12–18×), and Germany, the Netherlands, Switzerland and Monaco, which received almost nothing (Germany received $60,164 and the Netherlands $0). **Countries that receive much more than they donate (at least 10×, 20 countries):** India (donated $0), Thailand (donated $25,461 and received $49.04B), Brazil, Colombia, Poland, South Africa, Chile, Hungary, Romania, Czech Republic, Slovakia, the three Baltic states, Slovenia, Cyprus, Iceland, Greece, Korea (about 19× more received) and Taiwan (about 38×). **Roughly balanced (between 25% and 75% outgoing, 6 countries):** Australia (donated $2.45B, received $2.57B), Austria (51% of its flow is outgoing), Italy and Canada (somewhat more outgoing), Portugal and Saudi Arabia (somewhat more incoming). Overall the pattern is very polarized: most countries are on one side by a wide margin, and only a few sit near the equal line. ### Visualization #1: Design rationale The question is about two quantities per country and how they relate, so a scatterplot is the most direct encoding. Position on a common scale makes it easy to read "donates more or receives more": dots below the diagonal donate more, dots above receive more. Both axes use the same symlog scale because the totals span from $0 to over $100B; a linear scale would squash almost all countries into a corner, and a pure log scale cannot show zeros. I added dashed 10× lines so that "much more" has a visible meaning. Colour repeats the share (blue = donor, orange = recipient, grey = balanced) using a colour-blind-safe pair, with light grey gridlines, and every dot is labelled with collision avoidance so there is no need to hover. Weakness of 1a: the symlog axis is non-linear, so distances do not translate directly to dollar differences, and countries with $0 on one axis pile up on the axis. Chart 1b fixes both: it ranks all 47 countries by share, so the exact ordering is easy to read, and dot size shows how big each country's total flow is. Its drawback is that it hides the absolute amounts (for that, see 1a).42:T6f7,const countries = topojson.feature(world, world.objects.countries).features.filter(f => f.properties.name !== "Antarctica"); const geoms = world.objects.countries.geometries; const neighbors = topojson.neighbors(geoms); function drawChoropleth({features, projection, W, H, fill, tip, stroke = "#fff", labelFn}) { const svg = d3.create("svg").attr("viewBox", [0, 0, W, H]).style("max-width", "100%").style("font", "11px sans-serif"); const path = d3.geoPath(projection); svg.append("g").selectAll("path").data(features).join("path").attr("d", path) .attr("fill", fill).attr("stroke", stroke).attr("stroke-width", 0.4) .append("title").text(tip); if (labelFn) svg.append("g").selectAll("text").data(features.filter(labelFn)).join("text") .attr("transform", d => `translate(${path.centroid(d)})`).attr("text-anchor", "middle").attr("font-size", 8.5).attr("fill", "#222") .attr("paint-order", "stroke").attr("stroke", "#fff").attr("stroke-width", 2).text(d => d.properties.name); return svg; } function colorBar(svg, x, y, w, scale, domain, label, fmt) { const id = "g" + Math.random().toString(36).slice(2); const grad = svg.append("defs").append("linearGradient").attr("id", id); d3.range(0, 1.001, 0.05).forEach(t => grad.append("stop").attr("offset", t * 100 + "%").attr("stop-color", scale(domain[0] + t * (domain[1] - domain[0])))); svg.append("rect").attr("x", x).attr("y", y).attr("width", w).attr("height", 10).attr("fill", `url(#${id})`); const ax = d3.scaleLinear(domain, [x, x + w]); svg.append("g").attr("transform", `translate(0,${y + 10})`).call(d3.axisBottom(ax).ticks(5).tickSize(3).tickFormat(fmt)).call(g => g.select(".domain").remove()); svg.append("text").attr("x", x).attr("y", y - 6).attr("font-weight", 600).text(label); }43:T412,{ const W = 960, H = 500; const proj = d3.geoNaturalEarth1().fitExtent([[8, 40], [W - 8, H - 30]], {type: "FeatureCollection", features: countries}); const svg = drawChoropleth({features: countries, projection: proj, W, H, fill: f => { const d = byMapName.get(f.properties.name); return d ? balanceColor(d.share) : "#f3f3f3"; }, tip: f => { const d = byMapName.get(f.properties.name); return d ? `${f.properties.name}\nDonated ${fmtUSD(d.donated)}\nReceived ${fmtUSD(d.received)}\nOutgoing share ${d3.format(".0%")(d.share)}` : `${f.properties.name}\n(not in this dataset)`; }}); svg.append("text").attr("x", 10).attr("y", 20).attr("font-size", 15).attr("font-weight", 600).text("Mostly donors vs. mostly recipients"); svg.append("text").attr("x", 10).attr("y", 36).attr("fill", "#555").text("Fill = donated ÷ (donated + received). Light grey = country not in this dataset."); colorBar(svg, 40, H - 70, 220, balanceColor, [0, 1], "← mostly receives | mostly donates →", d3.format(".0%")); display(svg.node()); }44:T451,{ const W = 960, H = 560; const box = {type: "MultiPoint", coordinates: [[-12, 34], [34, 34], [34, 66], [-12, 66]]}; const proj = d3.geoMercator().fitExtent([[0, 50], [W, H]], box); const eu = countries.filter(f => { const [lon, lat] = d3.geoCentroid(f); return lon > -14 && lon < 40 && lat > 30 && lat < 72; }); const svg = drawChoropleth({features: eu, projection: proj, W, H, fill: f => { const d = byMapName.get(f.properties.name); return d ? balanceColor(d.share) : "#f3f3f3"; }, tip: f => { const d = byMapName.get(f.properties.name); return d ? `${f.properties.name}: ${d3.format(".0%")(d.share)} outgoing` : f.properties.name; }, labelFn: f => byMapName.has(f.properties.name) && !["Monaco", "Liechtenstein", "Luxembourg", "Cyprus"].includes(f.properties.name)}); svg.append("text").attr("x", 10).attr("y", 20).attr("font-size", 15).attr("font-weight", 600).text("Europe up close: a west-to-east gradient from donors to recipients"); svg.append("text").attr("x", 10).attr("y", 36).attr("fill", "#555").text("Same colour scale as the world map."); display(svg.node()); }45:T950,const pairs = (() => { const out = []; geoms.forEach((g, i) => neighbors[i].forEach(j => { if (j <= i) return; const a = byMapName.get(g.properties.name), b = byMapName.get(geoms[j].properties.name); if (!a || !b) return; const [hi, lo] = a.share >= b.share ? [a, b] : [b, a]; out.push({hi, lo, diff: hi.share - lo.share}); })); return out.sort((p, q) => q.diff - p.diff); })(); { const data = pairs.filter(p => p.diff >= 0.5); const W = 820, rowH = 24, m = {t: 78, r: 30, b: 28, l: 230}, H = m.t + data.length * rowH + m.b; const x = d3.scaleLinear([0, 1], [m.l, W - m.r]); const svg = d3.create("svg").attr("viewBox", [0, 0, W, H]).style("max-width", "100%").style("font", "11px sans-serif"); svg.append("text").attr("x", 10).attr("y", 20).attr("font-size", 15).attr("font-weight", 600).text("Neighbours that play opposite roles"); svg.append("text").attr("x", 10).attr("y", 38).attr("fill", "#555").text("Countries sharing a land border whose outgoing shares differ by ≥ 50 points (France–Brazil borders via French Guiana)."); svg.append("g").attr("transform", `translate(0,${m.t - 8})`).call(d3.axisTop(x).tickValues([0, .25, .5, .75, 1]).tickFormat(d3.format(".0%"))) .call(g => g.select(".domain").remove()).call(g => g.selectAll(".tick line").clone().attr("y2", H - m.t - m.b + 8).attr("stroke", "#eee")); const g = svg.append("g").selectAll("g").data(data).join("g").attr("transform", (d, i) => `translate(0,${m.t + i * rowH + rowH / 2})`); g.append("text").attr("x", m.l - 12).attr("text-anchor", "end").attr("dy", "0.35em").text(d => `${d.hi.name} – ${d.lo.name}`); g.append("line").attr("x1", d => x(d.lo.share)).attr("x2", d => x(d.hi.share)).attr("stroke", "#aaa").attr("stroke-width", 2); g.append("circle").attr("cx", d => x(d.lo.share)).attr("r", 6).attr("fill", d => balanceColor(d.lo.share)).attr("stroke", "#444").attr("stroke-width", .6); g.append("circle").attr("cx", d => x(d.hi.share)).attr("r", 6).attr("fill", d => balanceColor(d.hi.share)).attr("stroke", "#444").attr("stroke-width", .6); g.append("title").text(d => `${d.hi.name}: ${d3.format(".1%")(d.hi.share)} outgoing (donated ${fmtUSD(d.hi.donated)}, received ${fmtUSD(d.hi.received)})\n${d.lo.name}: ${d3.format(".1%")(d.lo.share)} outgoing (donated ${fmtUSD(d.lo.donated)}, received ${fmtUSD(d.lo.received)})`); display(svg.node()); }46:Ta8f,### Visualization #2: Analysis **Yes, they cluster.** - *Donors:* Western and Northern Europe (Germany, France, UK, Netherlands, Belgium, Switzerland, Denmark, Norway, Sweden, all above 90% outgoing), plus the United States and Japan (98–100%). Canada (65%) is a weaker donor. - *Recipients:* South America (Brazil, Colombia, Chile, about 0% outgoing), South and Southeast Asia (India, Thailand), South Africa, and Central/Eastern Europe (Poland, Czech Republic, Slovakia, Hungary, Romania, the Baltics, Slovenia, all under 1% outgoing). Korea and Taiwan are also nearly pure recipients, which is the opposite of Japan in the same region. - *In between:* Southern Europe and the Gulf. Spain (78%) and Italy (62%) are donors but lighter than the north; Portugal (28%) and Greece (6%) are recipients; Saudi Arabia (26%), Kuwait (15%), Qatar (13%) and the UAE (18%) receive more than they donate. - Europe therefore shows a west-to-east gradient: blue in the west and north, orange from the Baltic down to Romania. **Neighbours with radically different patterns: yes (chart 2c).** The sharpest are Germany (100% outgoing) and Poland (0%), and Germany and the Czech Republic (0.4%). Others: Switzerland (100%) next to Liechtenstein (19%), the UK (96%) next to Ireland (24%), Luxembourg (17%) next to Germany, France and Belgium (92–100%), Italy (62%) next to Slovenia (0.1%), and Spain (78%) next to Portugal (28%). Austria sits at about 50% and is flanked by recipients on its east side (Hungary, Slovakia, Slovenia, Czech Republic) and donors on its west side (Germany, Switzerland). France and Brazil technically border through French Guiana. ### Visualization #2: Design rationale Geographic clustering is about *location*, so a choropleth is the obvious choice. I coloured by the share instead of by net dollars, because net dollars would just highlight the biggest countries (US, Japan, India) and wash out small countries; a share works for a country of any size. The scale is diverging and centred on 50% (grey), which makes "mostly donates / mostly receives / balanced" three easy-to-tell classes. Countries not in the dataset are very light grey so they recede. The world map is too small to read Europe (most countries in the data are there), so 2b zooms into Europe with country labels. A map is poor at exact comparisons between neighbours, so 2c lists land-border pairs (computed from the TopoJSON geometry with `topojson.neighbors`) ranked by the difference in share. Weaknesses: map area exaggerates large countries (Brazil, Russia, Canada), and the share hides the dollar size, so a tiny country with 100% looks as important as the United States; the tooltips give the dollar values.47:T520,## Visualization #3: top 5 purposes by recipient geography *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?* **Top 5 purposes by number of commitments (across all countries):** Sectors not specified (8,140), Social/welfare services (6,407), Strengthening civil society (5,805), Higher education (5,262), Multisector aid (3,028). "Most frequent" is by record count, as the question says. I group by `coalesced_purpose_code`, not by name, because the same purpose appears under several spellings (for example "Sectors not specified" and "SECTORS NOT SPECIFIED"), and grouping by name would undercount. "Sectors not specified" is a real category in the data, so I kept it. **3a** is five maps (one per purpose); **3b** is a recipient × purpose heatmap. For each recipient I plot the share of *its* commitments that carry each purpose, so that big recipients (India, Brazil) do not hide small ones. Recipients with fewer than 100 commitments are hatched grey, because their percentages are unreliable (for example, Germany has only 2 commitments, so "100% social/welfare" means nothing).48:T844,{ const W = 960, pw = 480, ph = 250, top = 70, H = top + 3 * ph; const svg = d3.create("svg").attr("viewBox", [0, 0, W, H]).style("max-width", "100%").style("font", "11px sans-serif"); svg.append("text").attr("x", 10).attr("y", 20).attr("font-size", 15).attr("font-weight", 600).text("Where does each of the five most frequent aid purposes go?"); svg.append("text").attr("x", 10).attr("y", 38).attr("fill", "#555").text(`Colour = share of a recipient's commitments that have this purpose (same scale on every map). Colours cap at 20%. Hatched grey = fewer than ${MIN} commitments.`); const defs = svg.append("defs"); defs.append("pattern").attr("id", "few").attr("width", 4).attr("height", 4).attr("patternUnits", "userSpaceOnUse") .append("path").attr("d", "M0,4L4,0").attr("stroke", "#bbb").attr("stroke-width", .8); top5.forEach((p, i) => { const gx = (i % 2) * pw, gy = top + Math.floor(i / 2) * ph; const proj = d3.geoNaturalEarth1().fitExtent([[gx + 6, gy + 22], [gx + pw - 6, gy + ph - 6]], {type: "FeatureCollection", features: countries}); const path = d3.geoPath(proj); svg.append("text").attr("x", gx + 10).attr("y", gy + 14).attr("font-weight", 600).text(`${i + 1}. ${purposeName.get(p)} (${d3.format(",")(d3.sum(purposeCount.values(), m => m.get(p) ?? 0))} commitments)`); svg.append("g").selectAll("path").data(countries).join("path").attr("d", path).attr("stroke", "#fff").attr("stroke-width", .3) .attr("fill", f => { const c = byMapName.get(f.properties.name)?.name; if (!c) return "#f3f3f3"; return recCount.get(c) >= MIN ? shareColor(shareOf(c, p)) : "url(#few)"; }) .append("title").text(f => { const c = byMapName.get(f.properties.name)?.name; return c && recCount.get(c) ? `${c}\n${purposeName.get(p)}: ${purposeCount.get(c)?.get(p) ?? 0} of ${recCount.get(c)} commitments (${d3.format(".1%")(shareOf(c, p))})` : f.properties.name; }); }); colorBar(svg, pw + 40, top + 2 * ph + 60, 300, shareColor, [0, 0.2], "Share of recipient's commitments", d3.format(".0%")); display(svg.node()); }49:T9ae,{ const cw = 118, rh = 20, m = {t: 92, l: 130, r: 70, b: 20}, W = m.l + 5 * cw + m.r, H = m.t + bigRecipients.length * rh + m.b; const x = d3.scaleBand(top5, [m.l, m.l + 5 * cw]).padding(0.05); const y = d3.scaleBand(bigRecipients, [m.t, H - m.b]).padding(0.05); const svg = d3.create("svg").attr("viewBox", [0, 0, W, H]).style("max-width", "100%").style("font", "11px sans-serif"); svg.append("text").attr("x", 10).attr("y", 20).attr("font-size", 15).attr("font-weight", 600).text("What kind of aid does each recipient get?"); svg.append("text").attr("x", 10).attr("y", 38).attr("fill", "#555").text(`% of the recipient's commitments in each top-5 purpose · recipients with ≥ ${MIN} commitments, sorted by number of commitments`); const lab = (s, n) => s.split(" ").reduce((ls, w) => { const l = ls.at(-1); (l + " " + w).length > n && l ? ls.push(w) : ls[ls.length - 1] = (l ? l + " " : "") + w; return ls; }, [""]); svg.append("g").selectAll("text").data(top5).join("text").attr("x", p => x(p) + x.bandwidth() / 2).attr("y", m.t - 8).attr("text-anchor", "middle") .selectAll("tspan").data(p => lab(purposeName.get(p), 18).map((t, i, a) => ({t, i, n: a.length}))).join("tspan") .attr("x", function() { return +this.parentNode.getAttribute("x"); }).attr("dy", (d, i) => i === 0 ? `${-(d.n - 1) * 1.1}em` : "1.1em").text(d => d.t); svg.append("text").attr("x", W - m.r + 6).attr("y", m.t - 8).attr("fill", "#555").text("commitments"); const cells = svg.append("g"); for (const c of bigRecipients) { svg.append("text").attr("x", m.l - 8).attr("y", y(c) + y.bandwidth() / 2).attr("text-anchor", "end").attr("dy", "0.35em").text(c); svg.append("text").attr("x", W - m.r + 6).attr("y", y(c) + y.bandwidth() / 2).attr("dy", "0.35em").attr("fill", "#555").text(d3.format(",")(recCount.get(c))); for (const p of top5) { const s = shareOf(c, p); cells.append("rect").attr("x", x(p)).attr("y", y(c)).attr("width", x.bandwidth()).attr("height", y.bandwidth()).attr("fill", shareColor(s)) .append("title").text(`${c} · ${purposeName.get(p)}\n${purposeCount.get(c)?.get(p) ?? 0} of ${recCount.get(c)} commitments (${d3.format(".1%")(s)})`); cells.append("text").attr("x", x(p) + x.bandwidth() / 2).attr("y", y(c) + y.bandwidth() / 2).attr("dy", "0.35em").attr("text-anchor", "middle") .attr("font-size", 10).attr("fill", s > 0.085 ? "#fff" : "#222").text(d3.format(".1%")(s)); } } display(svg.node()); }4a:Tceb,### Visualization #3: Analysis **Geography.** The five purposes reach the same core of recipients (India, Thailand, Brazil, Colombia, Chile, South Africa and the Central/Eastern European countries), but with different emphasis. - **Sectors not specified** is concentrated in the largest recipients: India has the most records (1,684), then Brazil (1,676) and Thailand (1,510). As a share, it is largest for Saudi Arabia (20.1%) and Thailand (15.1%), and nearly absent in Eastern Europe (about 2–4%) and the Gulf states other than Saudi Arabia (under 2%). - **Social/welfare services** is led by South Africa (1,121 records) and Brazil (1,108) in count, and by the Gulf states (Qatar 31%, UAE 35%, Kuwait 29%) and Taiwan (19%) in share. Eastern Europe is a steady 8–14%. - **Strengthening civil society** is the most concentrated in Latin America and South Africa: Colombia leads (1,605 records, 11.9% of its commitments), then South Africa (1,220, 8.1%) and India (1,200, but only 4.9%). It is almost absent in Korea, Taiwan, Kuwait and Qatar (0–0.5%). - **Higher education** is led by Brazil (845) and India (776) in count. In share it is highest for Slovenia (20.1%), Qatar (18.3%), Kuwait (14.6%), Cyprus (14.5%) and the UAE (14.0%), with Hungary, the Czech Republic and Slovakia at about 13%, so it is a Central/Eastern Europe and Gulf story rather than a big-country one. - **Multisector aid** is the most evenly spread (2–4% everywhere), so it shows the least geographic difference. **Countries that receive more of certain types.** - The Gulf states receive an unusually large share of social/welfare services (Kuwait, Qatar and the UAE at 29–35%, against 4–7% in India, Brazil and Thailand). - Central and Eastern European countries tilt toward social/welfare and higher education (8–14% each) with very little "sectors not specified" and "civil society" aid. - Latin America and South Africa tilt toward civil society (Colombia 11.9% vs. Thailand 3.0% and Korea 0.5%). - Thailand (15.1%) and Saudi Arabia (20.1%) have the highest share of aid with an unspecified sector. These conclusions apply only to recipients with enough records (at least 100); the other 25 countries have too few records (most are donors). ### Visualization #3: Design rationale Five small maps with one shared colour scale make it possible to compare *where* each purpose goes, which is the geographic part of the question. Normalising by each recipient's own commitments answers "which countries receive more of certain types". The weakness is that small countries (the Gulf, Slovenia, the Baltics) are too small to see on a world map, so I added 3b, a heatmap with one row per recipient and the percentage printed in each cell. It gives up geography, but it is the easier way to read exact values and it uses the same colours as the maps. Colours cap at 20% so that the common range (0–15%) stays readable; the UAE (35%) and Qatar (31%) therefore show at the darkest colour in 3a, and their exact values are in 3b. An alternative I considered was colouring by dollars instead of record counts. It would show where the money goes, but a few very large commitments (for example Colombia's $6.4B of social/welfare aid) would dominate the map, whereas the question is about how *frequent* the purposes are.4b:[{"id":"09040dddbda03374a466600047ccbc70c46e6853884eb725db2141c566ca1b78fb7cc935096e8d5468c21e8df215e73fc49cdaaf7e2f1f89139793da25be02b2","href":"https://static.observableusercontent.com/files/09040dddbda03374a466600047ccbc70c46e6853884eb725db2141c566ca1b78fb7cc935096e8d5468c21e8df215e73fc49cdaaf7e2f1f89139793da25be02b2","name":"aiddata.csv","type":"text/csv","lastModified":1793122083538,"size":8760387}] 38:{"id":"dc7f520505685c4b","slug":"mini-project-1-geographic-financial-aid-due-oct-29th","title":"Mini-Project 1: Geographic Financial Aid (Due Oct. 29th)","thumbnail":"46f31cedbd75491fdef30acef8f03cda33e2fa21deeb7d78191d6419c9803802","access_level":"public","create_time":"$D2026-10-27T17:12:40.190Z","update_time":"$D2026-10-27T20:21:38.552Z","view_time":null,"first_public_time":"$D2026-10-27T20:21:55.867Z","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":"992958b3c9c14128","login":"mitranrameshkumar","name":"Mitran Ramesh kumar","avatar_url":null,"tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":270,"publish_version":270,"role":null,"authored":false,"authors":[{"type":"individual","id":"ed38ba31ccd0f13a","login":"mitranrameshkumar","name":"Mitran Ramesh kumar","avatar_url":null,"tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"992958b3c9c14128","login":"mitranrameshkumar","name":"Mitran Ramesh kumar","avatar_url":null,"tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Mini-Project 1: Geographic Financial Aid (Due Oct. 29th)","cells":[{"id":0,"value":"# Mini-Project 1: Geographic Financial Aid (Due Oct. 29th)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":27,"value":"import { css } from \"@rk2546/infovis-cse-backend\";","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"css","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"---\n## Submission Instructions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"$3c","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"---\n## About the Dataset","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":21,"value":"This spreadsheet is a simplified and reduced version of the AidData dataset. This dataset describes commitment information for over 1.5 million development finance activities funded between 1947 and 2013. The simplified dataset contains the following columns:\n\n- **`aiddata_id`**: unique ID of the commitment\n- **`aiddata_2_id`**: secondary unique ID\n- **`year`**: year of the commitment\n- **`donor`**: country providing the financial resource\n- **`recipient`**: country receiving the financial resource\n- **`commitment_amount_usd_constant`**: the total amount of financial resources provided\n- **`coalesced_purpose_code`**: categorization ID for the stated purpose of the commitment\n- **`coalesced_purpose_name`**: the purpose of the commitment","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":58,"value":"---\n## Questions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"$3d","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":60,"value":"---\n## Grading Criteria","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"Your answers to each question are graded on the following qualities, with each question totaling up to **25 points**:\n\n- **[10pts]**: Does the visualization answer the questions posed in the exercise?\n- **[10pts]**: Does the written answer & discussion the questions posed in the exercise?\n- **[5pts]**: Is the visual representation clear? Does it have good aesthetics? If needed, you can review this notebook on clarity for reference.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"The questions above are a very useful tool for you to verify whether you are producing a good solution or not. As you go about completing this project, you can use the questions above as a self-evaluation tool in two main ways:\n\n1. Verify that you can indeed answer the questions with your visualization. If you can’t fully answer the questions, it means your solution has some problems.\n2. Compare multiple solutions to the same problem and ask yourself: “which one makes it easier for me to answer these questions?”, where easier may mean, more accurately, with less effort or faster.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":65,"value":"\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"## Students' Workspace\n\n_From this point onward, you are free to modify the notebook in any way you see fit._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"$3e","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"import * as d3 from \"npm:d3@7\";\nimport * as topojson from \"npm:topojson-client@3\";\nconst raw = await FileAttachment(\"aiddata.csv\").csv();\nconst world = await d3.json(\"https://cdn.jsdelivr.net/npm/world-atlas@2/countries-50m.json\");\ndisplay(raw.length);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"const fmtUSD = v => v === 0 ? \"$0\" : \"$\" + d3.format(\".3~s\")(v).replace(\"G\", \"B\");\nconst nameFix = {\"United States\":\"United States of America\",\"Korea\":\"South Korea\",\"Czech Republic\":\"Czechia\",\"Slovak Republic\":\"Slovakia\"};\nconst mapName = c => nameFix[c] ?? c;\nconst rows = raw.map(d => ({donor: d.donor, recipient: d.recipient,\n amount: +d.commitment_amount_usd_constant,\n purpose: d.coalesced_purpose_code,\n purposeLabel: d.coalesced_purpose_name}));\nconst purposeName = new Map(d3.rollups(rows, v => d3.greatest(d3.rollups(v, g => g.length, d => d.purposeLabel), d => d[1])[0], d => d.purpose));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"const totals = (() => {\n const don = d3.rollup(rows, v => d3.sum(v, d => d.amount), d => d.donor);\n const rec = d3.rollup(rows, v => d3.sum(v, d => d.amount), d => d.recipient);\n return Array.from(new Set([...don.keys(), ...rec.keys()]), name => {\n const donated = don.get(name) ?? 0, received = rec.get(name) ?? 0;\n return {name, donated, received, total: donated + received,\n net: donated - received, share: donated / (donated + received)};\n }).sort((a, b) => b.share - a.share || b.net - a.net);\n})();\nconst byMapName = new Map(totals.map(d => [mapName(d.name), d]));\nconst balanceColor = d3.scaleLinear([0, 0.5, 1], [\"#c2571a\", \"#ececec\", \"#1f6f9f\"]).clamp(true);","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: donated vs. received\n\n*How do the countries compare in terms of how much they receive and donate? Are there countries that donate much more than they receive or receive much more than they donate?*\n\nI built two charts. **1a** is a scatterplot (x = donated, y = received). **1b** is a ranked dot strip of each country's share. I compare them in the design rationale below.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"$3f","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"$40","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"$41","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"## Visualization #2: geographic clustering\n\n*Do the countries that mostly receive or mostly donate tend to cluster around specific geographical areas of the world? Are there neighboring countries that have radically different patterns in terms of how much they receive vs. how much they donate?*\n\n**2a** is a world map, **2b** is a Europe close-up, and **2c** lists neighbouring countries with opposite roles. All use the same diverging colour scale (share).","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"$42","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"$43","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"$44","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"$45","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"$46","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"$47","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"const top5 = d3.rollups(rows, v => v.length, d => d.purpose).sort((a, b) => b[1] - a[1]).slice(0, 5).map(d => d[0]);\nconst recCount = d3.rollup(rows, v => v.length, d => d.recipient);\nconst purposeCount = d3.rollup(rows.filter(d => top5.includes(d.purpose)), v => v.length, d => d.recipient, d => d.purpose);\nconst MIN = 100;\nconst shareOf = (country, purpose) => (purposeCount.get(country)?.get(purpose) ?? 0) / recCount.get(country);\nconst shareColor = d3.scaleSequentialSqrt([0, 0.2], d3.interpolateYlGnBu);\nconst bigRecipients = d3.sort([...recCount].filter(([, n]) => n >= MIN).map(d => d[0]), c => -recCount.get(c));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"$48","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"$49","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"$4a","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4b","stdlib":"2"}} 33:null