34:["$","title",null,{"children":"Mini-Project 1: Geographic Financial Aid (Due Oct. 29th) | Simranjeet Singh | 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:T7d6,const isoByName = (() => { const countries = topojson.feature(world, world.objects.countries).features; const atlasNameToId = new Map(countries.map(f => [f.properties.name, f.id])); const alias = new Map(Object.entries({ "United States": "United States of America", "Korea, Republic of": "South Korea", "South Korea": "South Korea", "Korea, Dem. People's Rep.": "North Korea", "Korea": "South Korea", "Democratic Republic of the Congo": "Dem. Rep. Congo", "Congo, Dem. Rep.": "Dem. Rep. Congo", "Congo, Rep.": "Congo", "Republic of the Congo": "Congo", "Cote d'Ivoire": "Côte d'Ivoire", "Côte d’Ivoire": "Côte d'Ivoire", "Ivory Coast": "Côte d'Ivoire", "Laos": "Laos", "Lao People's Democratic Republic": "Laos", "Kyrgyzstan": "Kyrgyzstan", "Kyrgyz Republic": "Kyrgyzstan", "Slovakia": "Slovakia", "Slovak Republic": "Slovakia", "Macedonia": "North Macedonia", "Macedonia, FYR": "North Macedonia", "Bosnia and Herzegovina": "Bosnia and Herz.", "Brunei": "Brunei", "Brunei Darussalam": "Brunei", "Cape Verde": "Cape Verde", "Cabo Verde": "Cape Verde", "Gambia": "Gambia", "Gambia, The": "Gambia", "Bahamas": "Bahamas", "Bahamas, The": "Bahamas", "Czech Republic": "Czechia", "Moldova": "Moldova", "Moldova, Republic of": "Moldova", "Dominican Republic": "Dominican Rep.", "Equatorial Guinea": "Eq. Guinea", "Central African Republic": "Central African Rep.", "South Sudan": "S. Sudan", "Solomon Islands": "Solomon Is.", "Micronesia": "Micronesia", "Micronesia, Fed. Sts.": "Micronesia", "Eswatini": "eSwatini", "Swaziland": "eSwatini" })); const result = new Map(); for (const [aidName, atlasName] of alias) { const id = atlasNameToId.get(atlasName); if (id != null) result.set(aidName, id); } for (const [name, id] of atlasNameToId) { if (!result.has(name)) result.set(name, id); } return result; })();3f:Tbc8,(() => { const width = 760, height = 620; const margin = {top: 30, right: 30, bottom: 60, left: 70}; const data = agg.filter(d => d.donated > 0 && d.received > 0); const x = d3.scaleLog().domain(d3.extent(data, d => d.donated)).nice() .range([margin.left, width - margin.right]); const y = d3.scaleLog().domain(d3.extent(data, d => d.received)).nice() .range([height - margin.bottom, margin.top]); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width).attr("height", height) .style("font", "11px sans-serif"); const lo = Math.max(x.domain()[0], y.domain()[0]); const hi = Math.min(x.domain()[1], y.domain()[1]); svg.append("line") .attr("x1", x(lo)).attr("y1", y(lo)).attr("x2", x(hi)).attr("y2", y(hi)) .attr("stroke", "#999").attr("stroke-dasharray", "4 4"); svg.append("text").attr("x", x(hi)).attr("y", y(hi) - 6) .attr("text-anchor", "end").attr("fill", "#777").text("donate = receive"); svg.append("g").attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).ticks(6, "$.0s")) .call(g => g.append("text").attr("x", width - margin.right).attr("y", 40) .attr("fill", "#000").attr("text-anchor", "end").attr("font-weight", "bold") .text("Total donated (USD) →")); svg.append("g").attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(6, "$.0s")) .call(g => g.append("text").attr("x", -margin.top).attr("y", -55).attr("transform", "rotate(-90)") .attr("fill", "#000").attr("text-anchor", "end").attr("font-weight", "bold") .text("Total received (USD) →")); const color = d => d.net >= 0 ? "#2166ac" : "#b2182b"; const dots = svg.append("g").selectAll("circle").data(data).join("circle") .attr("cx", d => x(d.donated)).attr("cy", d => y(d.received)).attr("r", 4) .attr("fill", color).attr("fill-opacity", 0.7) .attr("stroke", "white").attr("stroke-width", 0.5); dots.append("title").text(d => `${d.country}\ndonated ${d3.format("$.3s")(d.donated)}\nreceived ${d3.format("$.3s")(d.received)}\nnet ${d3.format("+$.3s")(d.net)}`); const labelSet = new Set([ ...data.slice().sort((a,b) => d3.descending(a.net, b.net)).slice(0, 6).map(d => d.country), ...data.slice().sort((a,b) => d3.ascending(a.net, b.net)).slice(0, 6).map(d => d.country) ]); svg.append("g").selectAll("text.lbl").data(data.filter(d => labelSet.has(d.country))).join("text") .attr("x", d => x(d.donated) + 6).attr("y", d => y(d.received)) .attr("fill", "#333").attr("font-size", 10).text(d => d.country); const lg = svg.append("g").attr("transform", `translate(${margin.left + 10},${margin.top})`); [["#2166ac","net donor (below line)"], ["#b2182b","net recipient (above line)"]].forEach(([c, t], i) => { lg.append("circle").attr("cx", 0).attr("cy", i*16).attr("r", 5).attr("fill", c); lg.append("text").attr("x", 10).attr("y", i*16 + 4).text(t).attr("font-size", 11); }); return svg.node(); })()40:T749,(() => { const N = 20; const sorted = agg.slice().sort((a,b) => d3.descending(a.net, b.net)); const data = [...sorted.slice(0, N), ...sorted.slice(-N)].sort((a,b) => d3.descending(a.net, b.net)); const barH = 16, margin = {top: 30, right: 90, bottom: 40, left: 160}; const height = data.length * barH + margin.top + margin.bottom; const width = 760; const x = d3.scaleLinear().domain(d3.extent(data, d => d.net)).nice() .range([margin.left, width - margin.right]); const y = d3.scaleBand().domain(data.map(d => d.country)) .range([margin.top, height - margin.bottom]).padding(0.15); const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]) .attr("width", width).attr("height", height).style("font", "11px sans-serif"); svg.append("g").selectAll("rect").data(data).join("rect") .attr("x", d => x(Math.min(0, d.net))).attr("y", d => y(d.country)) .attr("width", d => Math.abs(x(d.net) - x(0))).attr("height", y.bandwidth()) .attr("fill", d => d.net >= 0 ? "#2166ac" : "#b2182b") .append("title").text(d => `${d.country}\nnet ${d3.format("+$.3s")(d.net)}`); svg.append("g").selectAll("text.name").data(data).join("text") .attr("x", margin.left - 6).attr("y", d => y(d.country) + y.bandwidth()/2) .attr("dy", "0.35em").attr("text-anchor", "end").attr("font-size", 10).text(d => d.country); svg.append("line").attr("x1", x(0)).attr("x2", x(0)) .attr("y1", margin.top).attr("y2", height - margin.bottom).attr("stroke", "#000"); svg.append("g").attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).ticks(6, "+$.0s")) .call(g => g.append("text").attr("x", width - margin.right).attr("y", 36) .attr("fill","#000").attr("text-anchor","end").attr("font-weight","bold") .text("Net flow = donated − received →")); return svg.node(); })()41:T1014,### Analysis The scatter plots each country by total donated (x) vs. total received (y), both log-scaled because amounts span roughly eight orders of magnitude ($10k to $100G+). The dashed donate = receive diagonal is the reference: points below it donate more than they receive (net donors, blue); points above receive more than they give (net recipients, red). Countries that donated or received exactly $0 cannot sit on a log axis, so they are reported separately in the edge-case cell. The structure is strongly asymmetric. A small cluster of wealthy economies sits below the diagonal and dominates giving — the United States (~+$120G net) and Japan (~+$110G) are the two largest net donors, followed by Germany, the United Kingdom, France, the Netherlands and Sweden. Germany is the most extreme single case on the plane: it donated on the order of $47G while receiving almost nothing (~$60k), placing it in the far bottom-right corner — the "purest" large donor in the data. The Netherlands donated ~$8.9G and received $0, so it appears only in the "donate only" edge list. On the recipient side, the largest net recipient is India (~−$130G net; it donated $0, so like South Africa it appears only in the "receive only" edge list, not on the scatter). Other strong net recipients visible above the line include Thailand (~−$49G), Brazil (~−$37G), Colombia (~−$26G), Poland (~−$25G), Korea (~−$24G) and Chile. So yes countries that donate far more than they receive, and vice-versa, are the dominant structure, not the exception. The donor role is concentrated in a handful of OECD economies; the recipient role is spread across many middle- and lower-income countries. Korea is a notable in-between case: it both donates (~$1.3G) and receives heavily (~$25G), sitting nearer the diagonal than the pure recipients — consistent with its historical transition from aid recipient toward donor. Bar chart (1B) as competing view. Its advantage: "who donates ≫ receives?" is answered by directly ranking net flow, so the longest blue and red bars are the extremes with no diagonal-reading required — and it includes the $0 countries the scatter must drop. It also makes visible something the scatter hides: a large middle band of near-parity countries (Finland, Austria, Iceland, Portugal, Greece, Qatar, Ireland…) whose bars are almost invisible, showing that large net imbalance is actually confined to ~15 donors and ~12 recipients. Its disadvantage: it collapses two numbers into one, so a $100G-give/$90G-receive country looks identical to a $10G-give/$0-receive one. The scatter preserves both magnitudes. I keep the scatter as primary because the question asks about both dimensions ("how much they receive and donate"); the bar chart sharpens the "much more than" sub-question and covers the zero cases. ### Thought process A scatter with a y = x line is the canonical encoding for "compare A vs B, who's above/below parity" position carries both values exactly, and distance from the diagonal reads directly as imbalance. Log scales are necessary, not cosmetic: on a linear scale the mega-donors (US, Japan) would crush every other country into the origin. Color redundantly encodes the net sign so the donor/recipient split survives even for points sitting visually near the line. Only the ~12 most extreme countries are labeled, to keep the plane legible while still naming the cases the question asks about. The one honest limitation of the log-log scatter is that it cannot show countries with a $0 on either axis (log(0) is undefined) — this drops genuine extremes like India and South Africa (received huge amounts, donated nothing) and the Netherlands (donated, received nothing). I handle this explicitly with the edge-case cell that lists the donate-only and receive-only countries, and the bar chart (1B) includes them, so no country is silently lost. The bar chart is included both for that coverage and because the prompt invites competing solutions, and net-flow ranking is the most direct possible answer to the "donates much more than it receives" sub-question.42:T87c,(() => { const width = 900, height = 500; const countries = topojson.feature(world, world.objects.countries); const borders = topojson.mesh(world, world.objects.countries, (a, b) => a !== b); const projection = d3.geoEqualEarth().fitExtent([[2,2],[width-2,height-2]], countries); const path = d3.geoPath(projection); const signedSqrt = v => Math.sign(v) * Math.sqrt(Math.abs(v)); const vals = Array.from(netById.values(), d => signedSqrt(d.net)); const maxAbs = d3.max(vals, v => Math.abs(v)); const color = d3.scaleDiverging([-maxAbs, 0, maxAbs], d3.interpolateRdBu); // blue=donor, red=recipient const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]) .attr("width", width).attr("height", height).style("font", "11px sans-serif"); svg.append("g").selectAll("path").data(countries.features).join("path") .attr("d", path) .attr("fill", f => { const d = netById.get(f.id); return d ? color(signedSqrt(d.net)) : "#eee"; }) .append("title").text(f => { const d = netById.get(f.id); return d ? `${f.properties.name}\ndonated ${d3.format("$.3s")(d.donated)}\nreceived ${d3.format("$.3s")(d.received)}\nnet ${d3.format("+$.3s")(d.net)}` : `${f.properties.name}\nno data`; }); svg.append("path").datum(borders).attr("d", path).attr("fill", "none") .attr("stroke", "#fff").attr("stroke-width", 0.5); const lgW = 260, lgH = 10, lgX = 20, lgY = height - 40; const grad = svg.append("defs").append("linearGradient").attr("id", "netgrad"); d3.range(0, 1.001, 0.05).forEach(t => grad.append("stop").attr("offset", `${t*100}%`) .attr("stop-color", color(d3.interpolateNumber(-maxAbs, maxAbs)(t)))); svg.append("rect").attr("x", lgX).attr("y", lgY).attr("width", lgW).attr("height", lgH) .attr("fill", "url(#netgrad)").attr("stroke", "#999"); svg.append("text").attr("x", lgX).attr("y", lgY - 5).attr("font-size", 11) .text("← net recipient net flow net donor →"); svg.append("text").attr("x", lgX).attr("y", lgY + lgH + 14).attr("font-size", 10).attr("fill","#777") .text("gray = no data. Color on signed-sqrt(net)."); return svg.node(); })()43:Tdab,### Analysis Coloring each country by net flow (blue = donor, red = recipient) on a signed-sqrt scale, the donor and recipient roles do cluster geographically, though the reduced "countries-only" sample colors only the countries present in it and leaves much of the world gray (no data) — a limit I return to below. Net donors (blue) cluster in three contiguous blocs: North America (a deep-blue United States, lighter Canada), Western/Northern Europe (Germany deepest, with the UK, France, the Netherlands, Sweden and neighbours), and Japan in East Asia. These are the classic OECD donor economies and each forms a connected regional patch rather than being scattered. Net recipients (red) are spread across the global South: India is the deepest red by far, with Thailand its neighbour, a South American cluster (Brazil, Colombia, Chile), South Africa, and a lighter-red band in Eastern Europe (Poland, Romania) and East Asia (Korea). So the broad North/South donor–recipient divide is clearly present in the data that exists. Neighboring countries with radically different patterns — the clearest cases visible on this map: Japan (deep blue) vs. Korea (red) — immediate neighbours across the Sea of Japan with opposite roles: Japan a top-three net donor, Korea a net recipient (~−$24G). The sharpest donor/recipient edge on the map. Germany (deep blue) vs. Poland (red) — share a land border, opposite colours. Western Europe gives; the post-socialist economy to its east receives. United States (blue) vs. the Americas to its south — a hard transition from blue North America to red Brazil / Colombia / Chile. Honest limitation of the clustering claim: because the sample is sparse, most of Africa, the Middle East, Central Asia and much of Southeast Asia are gray (no data) — only South Africa carries a value on the whole African continent. So while the colored countries cluster as described, this map cannot support a claim about regions that are mostly gray; the clustering conclusion holds for the Americas, Western Europe and East Asia, where coverage is good, and is simply unknown elsewhere. The full AidData set would fill these in; the reduced extract does not. ### Thought Process The question is explicitly spatial ("cluster around geographical areas", "neighbouring countries"), so a choropleth puts each value in its real location — the only encoding where clustering and neighbour-contrast become visible at a glance. A diverging scale centred at zero fits a signed quantity with a meaningful midpoint (parity); blue/red separates the two roles pre-attentively, so a reader sorts donors from recipients without consulting the legend. The key design decision is the signed-square-root transform applied to net flow before colouring. Raw net is dominated by the US, Japan and India, which on a linear colour scale would saturate those few countries and wash everyone else to near-white — destroying exactly the regional clustering the question asks about. Square-root compression keeps the extremes distinguishable while giving mid-size countries (Thailand, Poland, Chile) visible colour. Distinguishing gray "no data" from white "near parity" is deliberate and important here: with this sparse sample, most of the map is genuinely uncovered, and colouring those countries white would falsely imply they balance their giving and receiving. Gray makes the coverage gaps honest and keeps the clustering claim scoped to the regions that actually have data.44:T654,(() => { const countries = topojson.feature(world, world.objects.countries); const borders = topojson.mesh(world, world.objects.countries, (a, b) => a !== b); const cellW = 430, cellH = 230, pad = 14, cols = 2; const projection = d3.geoEqualEarth(); const path = d3.geoPath(projection); const container = d3.create("div"); top5purposes.forEach((purpose, i) => { const m = purposeReceipts.get(purpose); const max = d3.max(m.values()) || 1; const color = d3.scaleSequential([0, Math.sqrt(max)], d3.interpolateYlOrRd); const svg = container.append("svg") .attr("width", cellW).attr("height", cellH + 30) .style("display", "inline-block") .style("margin-right", (i % cols === cols - 1) ? "0" : `${pad}px`) .style("font", "11px sans-serif").style("vertical-align", "top"); projection.fitExtent([[2, 24], [cellW - 2, cellH]], countries); svg.append("text").attr("x", 4).attr("y", 14).attr("font-weight", "bold").attr("font-size", 12) .text(`${i+1}. ${purpose.length > 48 ? purpose.slice(0,48)+"…" : purpose}`); svg.append("g").selectAll("path").data(countries.features).join("path") .attr("d", path) .attr("fill", f => { const v = m.get(f.id); return v ? color(Math.sqrt(v)) : "#f0f0f0"; }) .append("title").text(f => { const v = m.get(f.id); return `${f.properties.name}\n${purpose}\nreceived ${v ? d3.format("$.3s")(v) : "—"}`; }); svg.append("path").datum(borders).attr("d", path).attr("fill", "none") .attr("stroke", "#fff").attr("stroke-width", 0.4); }); return container.node(); })()45:T100f,### Analysis The five most frequent purposes (by number of commitments) are: (1) Sectors not specified, (2) Social/welfare services, (3) Strengthening civil society, (4) Higher education, (5) Multisector aid. Each small-multiple maps how much every country received of that purpose, on its own sequential (sqrt) colour scale, so each panel answers "within this purpose, who received the most?" The overall geography is remarkably stable across purposes. The same triangle lights up in all five panels — South America (Brazil, Colombia, Chile), South/Southeast Asia (India, Thailand) and South Africa — because, as noted in Viz 2, the reduced sample simply does not carry data for most of Africa, the Middle East or Central Asia. So the set of recipient countries barely changes between purposes; what changes is the intensity ranking within that set, and that is where the interesting differences appear. Yes, there are countries that receive disproportionately more of specific aid types. The leaders table makes this concrete: Colombia and "Social/welfare services" is the sharpest disproportion in the whole dataset. Colombia receives $6.4G of social/welfare aid — over six times India's $970M and the runaway top recipient for that purpose. Yet in every other purpose Colombia is only mid-pack ($330M–$620M). One country, one purpose, a wildly outsized share: exactly the effect the question asks about. India is the default top recipient for most purposes — #1 in Sectors-not-specified ($5.1G), Higher education ($900M) and Multisector aid ($2.0G) — but is overtaken in the other two, which is itself the point: dominance is purpose-dependent, not absolute. South Africa leads "Strengthening civil society" ($720M), ahead of much larger economies like India and Brazil — a plausible governance/transition-aid signature, and a case of a smaller economy receiving disproportionately more of one specific type. Thailand is consistently a mid-to-high recipient (notably $1.1G in Multisector aid) but never #1 — a steady generalist rather than a specialist. So the headline is twofold: the geography of recipients is largely fixed by data coverage, but the leader of each purpose changes — Colombia for social/welfare, South Africa for civil society, India for the rest — and the magnitude of Colombia's social/welfare share shows that some countries absorb a specific aid type far out of proportion to their overall aid profile. ### Thought Process The question crosses two axes at once — purpose × geography among recipients — so the display must hold geography constant and vary purpose. Small multiples are the textbook encoding: one map per purpose, identical projection and layout, so the eye compares the same location across panels and can spot where a country is hot in one purpose and cold in another (Colombia going deep-red only in panel 2 is exactly this). Each panel gets its own colour scale, deliberately rather than a shared one. The purposes differ in total volume by more than an order of magnitude (Sectors-not-specified tops out at India's $5.1G; Strengthening civil society at South Africa's $720M). A single shared scale would render the smaller-volume purposes almost entirely pale and unreadable. Per-panel scaling answers the question each panel is meant to answer — "within this purpose, who received the most?" — which is precisely the geographic-distribution comparison the prompt asks for. The trade-off, which I note honestly, is that colour intensity is not comparable across panels; the leaders table is included so absolute magnitudes between purposes stay verifiable. Sequential single-hue (light→dark) is correct because received amount is a one-directional magnitude, not a signed quantity. "Most frequent" is defined by count of commitments (not dollar volume), matching the wording of the question. A sortable stacked bar was the main alternative, but it discards the geography the question explicitly asks about, so it loses here. As in Viz 2, gray marks no-data countries so the sparse coverage is not misread as "received nothing."46:[{"id":"09040dddbda03374a466600047ccbc70c46e6853884eb725db2141c566ca1b78fb7cc935096e8d5468c21e8df215e73fc49cdaaf7e2f1f89139793da25be02b2","href":"https://static.observableusercontent.com/files/09040dddbda03374a466600047ccbc70c46e6853884eb725db2141c566ca1b78fb7cc935096e8d5468c21e8df215e73fc49cdaaf7e2f1f89139793da25be02b2","name":"aiddata-countries-only.csv","type":"text/csv","lastModified":1793303492088,"size":8760387}] 38:{"id":"618998afbc8dc0fd","slug":"mini-project-1-geographic-financial-aid-due-oct-29th","title":"Mini-Project 1: Geographic Financial Aid (Due Oct. 29th)","thumbnail":"b26454bd3f0a53b02605bca4761dda10fbee278fc7d919cca7b1f68e4a90487b","access_level":"public","create_time":"$D2026-10-29T18:13:55.201Z","update_time":"$D2026-10-29T20:49:10.962Z","view_time":null,"first_public_time":"$D2026-10-29T20:59:42.537Z","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":"228f91e0b55c41b6","login":"simranjeet-singh","name":"Simranjeet Singh","avatar_url":"https://avatars-next.observableusercontent.com/d58a259fbae2a8ccfde0f1b92afaafbaccb5706e866e3ac06b91e01a0db4142b","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":337,"publish_version":337,"role":null,"authored":false,"authors":[{"type":"individual","id":"eab21e992bb35bff","login":"simranjeet-singh","name":"Simranjeet Singh","avatar_url":"https://avatars-next.observableusercontent.com/d58a259fbae2a8ccfde0f1b92afaafbaccb5706e866e3ac06b91e01a0db4142b","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"228f91e0b55c41b6","login":"simranjeet-singh","name":"Simranjeet Singh","avatar_url":"https://avatars-next.observableusercontent.com/d58a259fbae2a8ccfde0f1b92afaafbaccb5706e866e3ac06b91e01a0db4142b","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":"const student_name = \"Simranjeet Singh\";\nconst student_netid = \"xs2797\";","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"const world = await (await fetch(\"https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json\")).json();","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"const raw = await FileAttachment(\"aiddata-countries-only.csv\").csv({typed: true});","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"import * as d3 from \"https://cdn.jsdelivr.net/npm/d3@7/+esm\";","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"import * as topojson from \"https://cdn.jsdelivr.net/npm/topojson-client@3/+esm\";","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"// clean rows: valid year/amount, trimmed names\nconst rows = raw\n .map(d => ({\n year: +d.year,\n donor: (d.donor ?? \"\").toString().trim(),\n recipient: (d.recipient ?? \"\").toString().trim(),\n amount: +d.commitment_amount_usd_constant,\n purpose: (d.coalesced_purpose_name ?? \"\").toString().trim(),\n purpose_code: d.coalesced_purpose_code\n }))\n .filter(d => d.donor && d.recipient && Number.isFinite(d.amount) && d.amount > 0);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"// totals donated & received per country\nconst agg = (() => {\n const donated = d3.rollup(rows, v => d3.sum(v, d => d.amount), d => d.donor);\n const received = d3.rollup(rows, v => d3.sum(v, d => d.amount), d => d.recipient);\n const names = new Set([...donated.keys(), ...received.keys()]);\n const data = Array.from(names, name => {\n const give = donated.get(name) ?? 0;\n const get = received.get(name) ?? 0;\n return { country: name, donated: give, received: get, net: give - get, total: give + get };\n });\n return data.sort((a, b) => d3.descending(a.total, b.total));\n})();","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"// sanity check (prints a small table node)\n(() => {\n const fmt = x => d3.format(\"$.2s\")(x);\n const top = agg.slice(0, 15);\n const el = document.createElement(\"div\");\n el.style.font = \"12px sans-serif\";\n el.innerHTML = \"Top 15 by total volume
\" +\n top.map(d => `${d.country}: donated ${fmt(d.donated)}, received ${fmt(d.received)}, net ${d3.format(\"+$.2s\")(d.net)}`).join(\"
\");\n return el;\n})()","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"$3e","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"(() => {\n const miss = agg.filter(d => !isoByName.has(d.country))\n .sort((a, b) => d3.descending(a.total, b.total))\n .map(d => `${d.country} (${d3.format(\"$.2s\")(d.total)})`);\n const el = document.createElement(\"div\");\n el.style.font = \"12px sans-serif\";\n el.innerHTML = `${miss.length} unmatched countries (biggest first):
` + miss.slice(0, 60).join(\"
\");\n return el;\n})()","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"### Visualization #1: Donate vs. Receive\n\nHow 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":87,"value":"$3f","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"// edge cases: countries that only donate or only receive (can't appear on log axes)\n(() => {\n const onlyDonate = agg.filter(d => d.donated > 0 && d.received === 0);\n const onlyReceive = agg.filter(d => d.received > 0 && d.donated === 0);\n const el = document.createElement(\"div\");\n el.style.font = \"12px sans-serif\";\n el.innerHTML =\n `Donate only: ${onlyDonate.map(d=>d.country).join(\", \") || \"none\"}
` +\n `Receive only: ${onlyReceive.slice(0,30).map(d=>d.country).join(\", \")}` +\n (onlyReceive.length>30 ? ` … (+${onlyReceive.length-30} more)` : \"\");\n return el;\n})()","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"$40","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"$41","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"## Visualization #2: Geographic clustering\n\nDo mostly-receiving / mostly-donating countries cluster by region? Are there neighboring countries with radically different patterns?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"const netById = (() => {\n const m = new Map();\n for (const d of agg) {\n const id = isoByName.get(d.country);\n if (id != null) m.set(id, d);\n }\n return m;\n})();","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"$42","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"$43","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"## Visualization #3: Top-5 purposes, geographically\n\nDo the 5 most frequent purposes distribute differently among recipient countries? Do some countries receive disproportionately more of certain types?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"const top5purposes = (() => {\n const counts = d3.rollup(rows, v => v.length, d => d.purpose);\n return Array.from(counts, ([purpose, n]) => ({purpose, n}))\n .sort((a, b) => d3.descending(a.n, b.n)).slice(0, 5).map(d => d.purpose);\n})();","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"const purposeReceipts = (() => {\n const set = new Set(top5purposes);\n const filtered = rows.filter(d => set.has(d.purpose));\n const byPurpose = new Map(top5purposes.map(p => [p, new Map()]));\n for (const d of filtered) {\n const id = isoByName.get(d.recipient);\n if (id == null) continue;\n const m = byPurpose.get(d.purpose);\n m.set(id, (m.get(id) ?? 0) + d.amount);\n }\n return byPurpose;\n})();","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"$44","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"// top recipients per purpose\n(() => {\n const idToName = new Map(topojson.feature(world, world.objects.countries)\n .features.map(f => [f.id, f.properties.name]));\n const el = document.createElement(\"div\");\n el.style.font = \"12px sans-serif\";\n el.innerHTML = top5purposes.map(p => {\n const m = purposeReceipts.get(p);\n const top = Array.from(m, ([id, v]) => ({id, v}))\n .sort((a,b) => d3.descending(a.v, b.v)).slice(0, 5)\n .map(t => `${idToName.get(t.id) ?? t.id} ${d3.format(\"$.2s\")(t.v)}`).join(\", \");\n return `${p}
${top}`;\n }).join(\"

\");\n return el;\n})()","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"$45","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"## Disclosure & Preprocessing\nPreprocessing: all loading, cleaning, aggregation, and the country-name → ISO join are done in-notebook in JavaScript (§1–§2). No external preprocessing. World boundaries are the public world-atlas 110m TopoJSON (numeric ISO 3166-1 ids). Historical/dissolved entities in AidData (USSR, Yugoslavia, etc.) don't match the modern atlas and show as \"no data\" on maps; they remain fully included in Visualization #1.\n\nAI disclosure: Used AI for analysis part and also for debugging","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"2"}} 33:null