34:["$","title",null,{"children":"Mini-Project 1: Geographic Financial Aid (Due Oct. 29th) | Mohit Gangwani | 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:T4a0,function Legend(color, {title = "", width = 360, height = 50, ticks = 5, tickFormat, tickValues, marginLeft = 12, marginRight = 12} = {}) { const dom = color.domain(), lo = d3.min(dom), hi = d3.max(dom); const x = d3.scaleLinear([lo, hi], [marginLeft, width - marginRight]); const fmtTick = typeof tickFormat === "string" ? d3.format(tickFormat) : (tickFormat ?? x.tickFormat(ticks)); const svg = d3.create("svg").attr("width", width).attr("height", height) .attr("viewBox", [0, 0, width, height]).style("overflow", "visible").style("display", "block") .style("font", "10px sans-serif"); svg.append("g").selectAll("rect").data(d3.range(marginLeft, width - marginRight, 1)).join("rect") .attr("x", d => d).attr("y", 18).attr("width", 1.5).attr("height", 12) .attr("fill", d => color(x.invert(d))); svg.append("g").attr("transform", "translate(0,30)") .call(d3.axisBottom(x).ticks(ticks).tickValues(tickValues ?? null).tickFormat(fmtTick).tickSize(4)) .call(g => g.select(".domain").remove()); svg.append("text").attr("x", marginLeft).attr("y", 12).attr("font-weight", "bold").text(title); return svg.node(); }3f:T685,// AidData names → world-atlas (Natural Earth) names. Extend this using the `unmatched` cell below. const nameMap = ({ "United States": "United States of America", "Korea": "South Korea", "Korea, Republic of": "South Korea", "Korea, Democratic Republic of": "North Korea", "Slovak Republic": "Slovakia", "Czech Republic": "Czechia", "Bosnia and Herzegovina": "Bosnia and Herz.", "Central African Republic": "Central African Rep.", "Congo, Democratic Republic of": "Dem. Rep. Congo", "Democratic Republic of the Congo": "Dem. Rep. Congo", "Congo, Republic of": "Congo", "Cote d'Ivoire": "Côte d'Ivoire", "Dominican Republic": "Dominican Rep.", "Equatorial Guinea": "Eq. Guinea", "South Sudan": "S. Sudan", "Solomon Islands": "Solomon Is.", "Marshall Islands": "Marshall Is.", "Lao People's Democratic Republic": "Laos", "Lao PDR": "Laos", "Viet Nam": "Vietnam", "Russian Federation": "Russia", "Syrian Arab Republic": "Syria", "Iran, Islamic Republic of": "Iran", "Kyrgyz Republic": "Kyrgyzstan", "Macedonia, FYR": "Macedonia", "Swaziland": "eSwatini", "Sao Tome and Principe": "São Tomé and Principe", "St. Vincent and the Grenadines": "St. Vin. and Gren.", "Antigua and Barbuda": "Antigua and Barb.", "Micronesia, Federated States of": "Micronesia", "East Timor": "Timor-Leste", "Tanzania, United Republic of": "Tanzania", "Brunei Darussalam": "Brunei", "West Bank and Gaza Strip": "Palestine", "Palestinian Adm. Areas": "Palestine", "Bahamas, The": "Bahamas", "Gambia, The": "Gambia", "Cape Verde": "Cabo Verde", "Yemen, Republic of": "Yemen", "Egypt, Arab Republic of": "Egypt" });40:T4f6,function drawMap({fill, tooltip, width = 960, height = 500, title = "", highlight = null, overlay = null}) { const top = title ? 30 : 4; const projection = d3.geoEqualEarth().fitExtent([[4, top], [width - 4, height - 4]], {type: "Sphere"}); const path = d3.geoPath(projection); 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;"); if (title) svg.append("text").attr("x", width / 2).attr("y", 20) .attr("text-anchor", "middle").attr("font-weight", "bold").attr("font-size", 14).text(title); svg.append("path").datum({type: "Sphere"}).attr("d", path).attr("fill", "#f4f8fb").attr("stroke", "#bbb"); svg.append("g").selectAll("path").data(land.features).join("path") .attr("d", path) .attr("fill", f => fill(f.properties.name) ?? "#e2e2e2") .attr("stroke", "#fff").attr("stroke-width", 0.4) .append("title").text(f => tooltip(f.properties.name)); // details-on-demand if (highlight) svg.append("path").datum(highlight).attr("d", path) .attr("fill", "none").attr("stroke", "#000").attr("stroke-width", 1.8).attr("stroke-linejoin", "round"); if (overlay) overlay(svg, path); return svg.node(); }41:Tb13,const viz1BarChart = (() => { const rowH = 14, labelW = 160, W = 1000; const margin = {top: 70, right: 20, bottom: 20, left: 20}; const half = (W - margin.left - margin.right - labelW) / 2; const H = margin.top + margin.bottom + rowH * countries.length; const max = d3.max(countries, d => Math.max(d.donated, d.received)); const cL = margin.left + half, cR = cL + labelW; // Linear scales starting at zero: bars encode length, so no log scale and no truncated baseline const xRec = d3.scaleLinear().domain([0, max]).range([cL, margin.left]); const xDon = d3.scaleLinear().domain([0, max]).range([cR, W - margin.right]); const y = d3.scaleBand().domain(countries.map(d => d.name)).range([margin.top, H - margin.bottom]).padding(0.2); const svg = d3.create("svg").attr("viewBox", [0, 0, W, H]).attr("width", W) .attr("style", "max-width:100%;height:auto;font:10px sans-serif;"); svg.append("text").attr("x", W / 2).attr("y", 18).attr("text-anchor", "middle") .attr("font-size", 15).attr("font-weight", "bold") .text("Total aid received vs. donated per country (constant USD, 1947–2013)"); svg.append("text").attr("x", W / 2).attr("y", 34).attr("text-anchor", "middle").attr("fill", "#555") .text("Sorted by net balance (donated − received): net donors at the top, net recipients at the bottom"); svg.append("text").attr("x", cL).attr("y", 52).attr("text-anchor", "end") .attr("fill", colors.received).attr("font-weight", "bold").text("← Received"); svg.append("text").attr("x", cR).attr("y", 52) .attr("fill", colors.donated).attr("font-weight", "bold").text("Donated →"); svg.append("g").attr("transform", `translate(0,${margin.top})`) .call(d3.axisTop(xRec).ticks(4).tickFormat(fmt)).call(g => g.select(".domain").remove()); svg.append("g").attr("transform", `translate(0,${margin.top})`) .call(d3.axisTop(xDon).ticks(4).tickFormat(fmt)).call(g => g.select(".domain").remove()); const row = svg.append("g").selectAll("g").data(countries).join("g"); row.append("rect").attr("x", d => xRec(d.received)).attr("y", d => y(d.name)) .attr("width", d => cL - xRec(d.received)).attr("height", y.bandwidth()).attr("fill", colors.received); row.append("rect").attr("x", cR).attr("y", d => y(d.name)) .attr("width", d => xDon(d.donated) - cR).attr("height", y.bandwidth()).attr("fill", colors.donated); row.append("text").attr("x", (cL + cR) / 2).attr("y", d => y(d.name) + y.bandwidth() / 2) .attr("dy", "0.35em").attr("text-anchor", "middle") .attr("font-weight", d => Math.abs(d.net) > max * 0.05 ? "bold" : "normal") .text(d => d.name); row.append("title").text(d => `${d.name}\nReceived: ${fmt(d.received)}\nDonated: ${fmt(d.donated)}\nNet: ${fmt(d.net)}`); return svg.node(); })(); display(viz1BarChart);42:T85c,**1a. Back-to-back bar chart** **What it shows.** Donating is highly concentrated. The United States (about $115B) and Japan (about $113B) are far ahead of everyone else, followed by Germany (about $47B), the United Kingdom (about $24B), France (about $15B) and the Netherlands (about $9B). Together these six account for most of all donations, and their received bars are zero or tiny. These are the countries that donate much more than they receive. Most other Western European donors (Sweden, Norway, Denmark, Switzerland, Belgium, Spain, Finland) donate only a few billion each. Receiving is concentrated in a different set of countries. India is by far the largest recipient (about $135B, more than the United States donated in total), followed by Thailand (about $49B), Brazil (about $37B), Colombia, Poland and South Korea (about $25B each) and South Africa (about $19B). Their donated bars are zero or nearly zero, so these countries receive much more than they donate. In the middle of the chart, many small European countries (e.g., Iceland, Estonia, Latvia, Lithuania, Slovenia, Cyprus, the Czech and Slovak Republics) have tiny bars on both sides. They are minor participants in either role. **Why this design.** Following Cleveland & McGill's ranking (position > length > angle > area > color), the two quantities are encoded as length on a zero-based linear scale, and both sides share the same scale so bars are directly comparable. A log scale would distort bar length, so it is not used for bars. Sorting by net balance turns the questions into positions: net donors rise to the top, net recipients sink to the bottom, and balanced countries sit in the middle. Color only labels the two roles (purple = donated, orange = received, from the colorblind-safe ColorBrewer PuOr palette). It doesn't encode amounts. Hovering a row shows exact received, donated and net values (details-on-demand). **Limitations.** Because the scale is linear, countries with small amounts are nearly invisible. The two halves also start from separate baselines, so donated and received are compared by length rather than by aligned position.43:Teb4,const viz1Scatter = (() => { const W = 900, H = 640, m = {top: 50, right: 30, bottom: 55, left: 75}; const max = d3.max(countries, d => Math.max(d.donated, d.received)); // Symlog: linear near 0 (so the many $0 values can be drawn), logarithmic above $1M const x = d3.scaleSymlog().constant(1e6).domain([0, max]).range([m.left, W - m.right]).nice(); const y = d3.scaleSymlog().constant(1e6).domain([0, max]).range([H - m.bottom, m.top]).nice(); const ticks = [0, 1e7, 1e8, 1e9, 1e10, 1e11, 1e12].filter(t => t <= x.domain()[1]); const isFocus = d => focusCountry && d.name.toLowerCase() === focusCountry.toLowerCase(); const svg = d3.create("svg").attr("viewBox", [0, 0, W, H]).attr("width", W) .attr("style", "max-width:100%;height:auto;font:10px sans-serif;"); svg.append("text").attr("x", W / 2).attr("y", 20).attr("text-anchor", "middle") .attr("font-size", 15).attr("font-weight", "bold").text("Donated vs. received per country (symlog scale)"); svg.append("g").attr("transform", `translate(0,${H - m.bottom})`) .call(d3.axisBottom(x).tickValues(ticks).tickFormat(fmt)) .call(g => g.append("text").attr("x", W - m.right).attr("y", 40).attr("fill", "#000") .attr("text-anchor", "end").attr("font-weight", "bold").text("Total received →")); svg.append("g").attr("transform", `translate(${m.left},0)`) .call(d3.axisLeft(y).tickValues(ticks).tickFormat(fmt)) .call(g => g.append("text").attr("x", -m.left + 8).attr("y", m.top - 12).attr("fill", "#000") .attr("text-anchor", "start").attr("font-weight", "bold").text("↑ Total donated")); svg.append("g").attr("stroke", "#eee") .call(g => g.selectAll("line.v").data(ticks).join("line").attr("x1", x).attr("x2", x).attr("y1", m.top).attr("y2", H - m.bottom)) .call(g => g.selectAll("line.h").data(ticks).join("line").attr("y1", y).attr("y2", y).attr("x1", m.left).attr("x2", W - m.right)); const lim = x.domain()[1]; svg.append("line").attr("x1", x(0)).attr("y1", y(0)).attr("x2", x(lim)).attr("y2", y(lim)) .attr("stroke", "#888").attr("stroke-dasharray", "4 3"); svg.append("text").attr("x", x(lim * 0.3)).attr("y", y(lim * 0.3) - 6).attr("fill", "#666") .attr("text-anchor", "end").text("donated = received"); svg.append("text").attr("x", m.left + 10).attr("y", m.top + 10).attr("fill", colors.donated).attr("font-weight", "bold").text("Net donors"); svg.append("text").attr("x", W - m.right - 10).attr("y", H - m.bottom - 10).attr("text-anchor", "end") .attr("fill", colors.received).attr("font-weight", "bold").text("Net recipients"); svg.append("g").selectAll("circle").data(d3.sort(countries, isFocus)).join("circle") .attr("cx", d => x(d.received)).attr("cy", d => y(d.donated)) .attr("r", d => isFocus(d) ? 9 : 4.5) .attr("fill", d => d.net >= 0 ? colors.donated : colors.received) .attr("fill-opacity", d => focusCountry && !isFocus(d) ? 0.25 : 0.8) .attr("stroke", d => isFocus(d) ? "#000" : "#fff").attr("stroke-width", d => isFocus(d) ? 2 : 1) .append("title").text(d => `${d.name}\nReceived: ${fmt(d.received)}\nDonated: ${fmt(d.donated)}`); const labeled = new Set([ ...countries.filter(d => d.donated > 0 && d.received > 0).map(d => d.name), ...d3.sort(countries, d => -Math.abs(d.net)).slice(0, 12).map(d => d.name), ...countries.filter(isFocus).map(d => d.name) ]); svg.append("g").selectAll("text").data(countries.filter(d => labeled.has(d.name))).join("text") .attr("x", d => x(d.received) + 6).attr("y", d => y(d.donated) + 3) .attr("fill", d => isFocus(d) ? "#000" : "#333").attr("font-weight", d => isFocus(d) ? "bold" : "normal") .text(d => d.name); return svg.node(); })(); display(viz1Scatter);44:T850,**1b. Scatterplot (donated vs. received)** **What it shows.** The scatterplot shows a group the bar chart hides: countries that both donate and receive. Points above the dashed y = x line are net donors, and points below it are net recipients. Japan received about $2B but donated about $110B, a clear net donor despite also being a recipient. The UK, France and Norway follow the same pattern on a smaller scale. South Korea, Kuwait and Saudi Arabia are mirror cases. Each donated a meaningful amount (about $1.3–1.8B) but received much more (about $25B, $8B and $5B), so they sit well below the line as net recipients. Australia and Austria sit almost exactly on the line, so their two roles roughly balance. Canada and Italy are just above it. Countries that donate nothing at all lie on the bottom axis: India, Thailand, Chile, Hungary and Colombia, among others. Germany and Switzerland lie on or next to the left axis because they received almost nothing. Overall, almost every country is far from the diagonal and plays mainly one role. Japan (huge net donor) and India (huge net recipient) are the two most extreme examples. **Why this design.** A scatterplot shows the relationship between two quantitative variables. Both are encoded with position, the most accurate channel. The y = x reference line turns "donates more or receives more?" into a simple above/below judgment, and distance from the line shows how unbalanced a country is. The values span about 6 orders of magnitude and many are exactly $0, so I used a symlog scale. It is logarithmic for large values (appropriate when data spans several orders of magnitude) but still defined at 0, where a pure log scale fails. Point color repeats the net donor/recipient class from 1a, so the eye groups the two classes by similarity (Gestalt). Interaction: the "Highlight a country" box enlarges and outlines the chosen point while fading the rest, so it pops out pre-attentively. Hovering any point gives exact values. **Limitations.** Log-type axes make it harder to judge exact differences, and labels can overlap in dense areas (e.g., near $0 and $1B).45:T62c,// Pitfall 2 (classification) const indexHistogram = (() => { const W = 640, H = 200, m = {top: 28, right: 10, bottom: 34, left: 40}; const bins = d3.bin().domain([-1, 1]).thresholds(20)(countries.map(d => d.ratio)); const x = d3.scaleLinear([-1, 1], [m.left, W - m.right]); const y = d3.scaleLinear([0, d3.max(bins, b => b.length)], [H - m.bottom, m.top]).nice(); const svg = d3.create("svg").attr("viewBox", [0, 0, W, H]).attr("width", W) .attr("style", "max-width:100%;height:auto;font:10px sans-serif;"); svg.append("text").attr("x", m.left).attr("y", 14).attr("font-weight", "bold").attr("font-size", 12) .text("Distribution of the donor index (number of countries per bin)"); svg.append("g").selectAll("rect").data(bins).join("rect") .attr("x", b => x(b.x0) + 1).attr("width", b => x(b.x1) - x(b.x0) - 1) .attr("y", b => y(b.length)).attr("height", b => y(0) - y(b.length)) .attr("fill", b => indexColor((b.x0 + b.x1) / 2)).attr("stroke", "#999").attr("stroke-width", 0.3) .append("title").text(b => `${d3.format("+.1f")(b.x0)} to ${d3.format("+.1f")(b.x1)}: ${b.length} countries`); svg.append("g").attr("transform", `translate(0,${H - m.bottom})`).call(d3.axisBottom(x).ticks(10, "+.1f")) .call(g => g.append("text").attr("x", W - m.right).attr("y", 30).attr("fill", "#000").attr("text-anchor", "end") .text("donor index (−1 only receives … +1 only donates)")); svg.append("g").attr("transform", `translate(${m.left},0)`).call(d3.axisLeft(y).ticks(4)); return svg.node(); })(); display(indexHistogram);46:Tee8,**Written analysis: Visualization #2** **Note on coverage:** this simplified dataset contains only about 47 countries. Gray countries (most of Africa, the Middle East, Central Asia, Russia, China, Mexico and much of Latin America) don't appear in the data at all. The patterns below describe the countries that are present. **2a. Donor-index choropleth (with histogram)** **What it shows**. The histogram is strongly bimodal. About 19 countries sit at or near −1 (they only receive), and about 9 sit at or near +1 (they only donate). Only a handful are near 0, so most countries play clearly one role. On the map, the two roles cluster **geographically**: - Net donors (purple) form a block across North America (United States, Canada), Western and Northern Europe (Germany, France, the UK, the Netherlands, Belgium, Switzerland, Sweden, Norway, Denmark, Finland, Spain, Italy) and Japan. Canada, Spain and Italy are lighter, meaning they also received a noticeable amount. - Net recipients (orange) cover South and Southeast Asia (India, Thailand, Taiwan, South Korea), South America (Brazil, Colombia, Chile), South Africa, and Central and Eastern Europe (Poland, the Czech and Slovak Republics, Hungary, Romania, the Baltic states, Slovenia). - The Gulf states (Saudi Arabia, Kuwait, the UAE, Qatar), Ireland, Portugal and New Zealand are lighter orange: mainly recipients, but also donors. - Australia is almost white (index close to 0), so its donations and receipts are roughly balanced. **Neighbors with radically different patterns.** The sharpest contrast is in Central Europe, along the old East/West divide. Germany (+1, pure donor) borders Poland and the Czech Republic (both about −1, pure recipients). Austria and Italy, which are donors or close to balanced, border recipients such as the Czech Republic, Slovakia, Hungary and Slovenia. These pairs are marked with black borders, and neighborTable lists every pair with an index gap of at least 1. Across water, Japan (strong donor) and South Korea (strong recipient) are a similarly sharp contrast, though the land-border method doesn't detect them. In North America, the United States (+1) and Canada (about +0.35) are both donors, so they are not a contrasting pair. Mexico is not in the dataset. **Why this design.** - The question is about where countries are and which ones are next to each other, so a map is the right representation. - Raw dollar totals mostly reflect country size, so the choropleth shades a normalized rate: donor index = (donated -received) / (donated + received), from −1 (only receives) to +1 (only donates). - A diverging color scale fits because 0 ("balanced") is a meaningful midpoint. ColorBrewer PuOr is colorblind-safe and keeps the same meaning as in Viz #1 (purple = donor, orange = recipient). Countries with no data are gray so they aren't confused with "balanced" (white). - The scale is continuous (unclassed). The histogram justifies this: values pile up at the extremes, so equal-count bins would split the −1 group arbitrarily, and the few in-between values are informative. - Equal Earth is an equal-area projection, so shaded countries are not size-distorted the way they would be with Mercator. - Neighbor contrasts are found from the map topology (topojson.neighbors), not by eye, and outlined in black to draw attention to them. **Limitations.** The donor index hides scale: a country that donated a few million gets the same color as the United States. Large countries (Canada, Brazil, Australia) visually dominate small ones (the Netherlands, Belgium, the Baltic states). The black borders are thin at world scale and easiest to see in Central Europe. Natural Earth draws French Guiana as part of France and Alaska as part of the US, so those areas take their parent country's color. 47:T689,const viz2Symbols = (() => { const maxAbs = d3.max(countries, d => Math.abs(d.net)); const r = d3.scaleSqrt([0, maxAbs], [0, 34]); // sqrt so circle AREA (not radius) ∝ value const legendVals = [1e10, 1e11, 1e12].filter(v => v <= maxAbs); return drawMap({ title: "Size of the imbalance: circle area ∝ |donated − received| (purple = net donor, orange = net recipient)", fill: n => byAtlas.has(n) ? "#ececec" : "#f7f7f7", tooltip: countryTip, overlay: (svg, path) => { const pts = land.features .filter(f => byAtlas.has(f.properties.name)) .map(f => ({f, d: byAtlas.get(f.properties.name), c: path.centroid(f)})) .filter(p => p.d.net !== 0 && isFinite(p.c[0])) .sort((a, b) => Math.abs(b.d.net) - Math.abs(a.d.net)); // big circles first, small on top svg.append("g").selectAll("circle").data(pts).join("circle") .attr("cx", p => p.c[0]).attr("cy", p => p.c[1]).attr("r", p => r(Math.abs(p.d.net))) .attr("fill", p => p.d.net > 0 ? colors.donated : colors.received) .attr("fill-opacity", 0.65).attr("stroke", "#fff").attr("stroke-width", 0.7) .append("title").text(p => countryTip(p.f.properties.name)); // size legend const lg = svg.append("g").attr("transform", "translate(70,440)"); lg.selectAll("circle").data(legendVals).join("circle") .attr("cy", v => -r(v)).attr("r", r).attr("fill", "none").attr("stroke", "#555"); lg.selectAll("text").data(legendVals).join("text") .attr("x", 40).attr("y", v => -2 * r(v)).attr("dy", "0.35em").attr("font-size", 10).text(fmt); } }); })(); display(viz2Symbols);48:T5ce,**2b. Proportional-symbol map (net balance)** **What it shows.** Circle area shows how large each country's imbalance is. - The biggest donor circles are the United States and Japan, followed by a dense cluster in Western Europe (Germany, the UK, France, the Netherlands). - The biggest recipient circle is India, followed by Thailand, Brazil, Colombia, South Korea, South Africa and Poland. - Smaller recipient circles appear for Chile, the Gulf states and Eastern Europe. The money flows from three donor hubs (North America, Western Europe, Japan) toward recipients in South/Southeast Asia, South America, Southern Africa and Eastern Europe. Two pairs of opposite circles sit side by side: Japan and South Korea in East Asia, and Western vs. Eastern Europe, where purple and orange circles overlap. **Why this design.** A choropleth exaggerates large-area countries, and shading raw dollar totals would mostly show country size. A proportional-symbol map places a circle at each country's center, so the eye goes to where the money is rather than to land area. I used scaleSqrt so that circle area, not radius, is proportional to the amount, and kept the same purple/orange colors for direction. **Limitations.** Circles overlap in dense regions (Europe, East Asia). Area is judged less precisely than length or position, so the symbol map is good for "where are the big flows?" but not for exact comparison (that is what Viz #1 does). It also can't show which neighbors contrast.49:T94f,**Written analysis: Visualization #3** The five most frequent purposes (by number of commitments) are Sectors not specified, Social/welfare services, Strengthening civil society, Higher education and Multisector aid. **Data transformation (shared by 3a–3c).** Filter the data to these five purposes, group by recipient × purpose, and sum the amounts. 3a divides each sum by the country's total received aid; 3c divides by the country's top-5 total, so each row adds up to 100%. Without this normalization every view would mostly show which countries are largest rather than what the aid is for. **3a. Small-multiple maps (share of each country's aid)** **What it shows.** For most large recipients the panels are very light. These five purposes are frequent (many small commitments) but make up only a small share of the money that countries like India, Brazil or Thailand receive. Most of their aid goes to other purposes such as infrastructure. - Sectors not specified is the most widespread: light-to-medium shading across India, Saudi Arabia, Brazil, South Africa and parts of Central Europe. - Social/welfare services stands out in Colombia (the darkest large country in any panel) and, less strongly, the United States. - Higher education is strongest in the United States, the only large country with a clearly medium-blue shade. All other countries are pale. - Strengthening civil society and Multisector aid are pale everywhere. They are spread thinly, with slightly darker shades in South Africa and India. - Germany is the darkest country in the Social/welfare panel only because it received almost nothing in total ($60k), all of it for that purpose. This is a small-denominator effect, not a large flow. **Why this design.** Putting five purposes on one map would require five overlapping color variables, so the views are faceted into one panel per purpose. All panels share the same equal-area projection and the same sequential single-hue scale (light = low share, dark = high share), so they can be compared directly. Countries without that purpose are gray, which keeps "no data" separate from "low share". **Limitations.** Because most shares are small and a few tiny recipients reach 100%, most countries fall into the lightest part of the scale and differences between them are hard to see. Small European countries are also hard to read at world scale.4a:T67c,**3b. Dominant-purpose map** **What it shows.** Each country is colored by whichever of the five purposes received the most money there. Clear regional patterns appear: - Sectors not specified (blue) dominates the big recipients in the Global South: India, Brazil, South Africa, as well as Saudi Arabia and the Czech Republic. - Higher education (teal) dominates in richer recipients: the United States, South Korea, Taiwan, Chile and Slovenia. Multisector aid (green) dominates in Central/Eastern Europe (Poland, Hungary, the Slovak Republic, Latvia) and in Thailand. - Social/welfare services (orange) dominates in Colombia, the smaller Gulf states (UAE, Qatar), Romania, the Baltic states (Estonia, Lithuania) and a few donor countries that received very little (Germany, Finland). - Strengthening civil society (red) is not the dominant purpose anywhere. Central and Eastern Europe is the most mixed region: neighboring countries such as the Czech Republic (unspecified), Poland and Hungary (multisector), Slovenia (higher education) and Romania (social/welfare) each have a different dominant purpose. **Why this design.** A categorical choropleth gives a one-glance summary of "what kind of aid does each country mostly get?". Five distinct hues stay within the number of categories people can reliably tell apart. They have similar saturation, so no category stands out unintentionally. Hovering shows the full breakdown for a country. **Limitations.** It shows only the winner, hiding close seconds (Lithuania is 35% social/welfare vs. 35% multisector; Taiwan is 43% higher education vs. 42% social/welfare) and hiding the amount of money involved.4b:T91d,const viz3Heatmap = (() => { const labelW = 150, m = {top: 140, right: 90, bottom: 20, left: labelW}; const W = m.left + m.right + top5.length * 110, H = m.top + m.bottom + heatRows.length * 20; const x = d3.scaleBand(top5, [m.left, W - m.right]).padding(0.05); const y = d3.scaleBand(heatRows.map(d => d.name), [m.top, H - m.bottom]).padding(0.05); const c = d3.scaleSequential([0, 1], d3.interpolateBlues); const svg = d3.create("svg").attr("viewBox", [0, 0, W, H]).attr("width", W) .attr("style", "max-width:100%;height:auto;font:10px sans-serif;"); svg.append("text").attr("x", 0).attr("y", 16).attr("font-size", 14).attr("font-weight", "bold") .text("Share of each country's top-5-purpose aid, by purpose (30 largest recipients)"); svg.append("g").attr("transform", `translate(0,${m.top - 4})`) .call(d3.axisTop(x).tickSize(0)).call(g => g.select(".domain").remove()) .selectAll("text").attr("transform", "rotate(-30)").attr("text-anchor", "start").attr("font-size", 10); svg.append("g").attr("transform", `translate(${m.left - 4},0)`) .call(d3.axisLeft(y).tickSize(0)).call(g => g.select(".domain").remove()); const row = svg.append("g").selectAll("g").data(heatRows).join("g"); row.selectAll("rect").data(d => d.shares.map((s, i) => ({name: d.name, p: top5[i], s}))).join("rect") .attr("x", d => x(d.p)).attr("y", d => y(d.name)).attr("width", x.bandwidth()).attr("height", y.bandwidth()) .attr("fill", d => c(d.s)) .append("title").text(d => `${d.name}\n${d.p}: ${d3.format(".0%")(d.s)}`); // Text color flips on dark cells to keep luminance contrast row.selectAll("text.v").data(d => d.shares.map((s, i) => ({name: d.name, p: top5[i], s}))).join("text") .attr("x", d => x(d.p) + x.bandwidth() / 2).attr("y", d => y(d.name) + y.bandwidth() / 2).attr("dy", "0.35em") .attr("text-anchor", "middle").attr("fill", d => d.s > 0.55 ? "#fff" : "#333") .text(d => d.s >= 0.01 ? d3.format(".0%")(d.s) : ""); row.append("text").attr("x", W - m.right + 6).attr("y", d => y(d.name) + y.bandwidth() / 2).attr("dy", "0.35em") .attr("fill", "#555").text(d => fmt(d.total)); svg.append("text").attr("x", W - m.right + 6).attr("y", m.top - 8).attr("font-weight", "bold").text("Top-5 total"); return svg.node(); })(); display(viz3Heatmap);4c:T902,**3c. Heatmap (purpose mix of the 30 largest recipients)** **What it shows**. Many countries are highly specialized: - Higher education: the United States (82%), Slovenia (80%) and Korea (71%). - Sectors not specified: the Czech Republic (81%), Kuwait (64%), India (54%) and Saudi Arabia (51%). - Social/welfare services: Colombia (80%), the UAE (68%) and Qatar (67%). - Multisector aid: Hungary (69%) and Poland (55%). Others have a balanced mix: South Africa (34 / 16 / 24 / 13 / 14%), Brazil, Chile, Thailand and Romania receive meaningful shares of four or five purposes. Strengthening civil society never exceeds about 25%. Its highest shares are in South Africa (24%) and the Baltic states (Estonia 21%, Latvia 15%, Lithuania 13%), countries that went through political transitions. In money terms, India ($9.4B) and Colombia ($8.1B) receive far more top-5-purpose aid than anyone else, followed by South Africa, Thailand and Brazil (about $2–3B each). **Why this design.** A matrix fits two categorical dimensions (country × purpose) and one quantity (share). Rows are normalized to 100%, so a country's specialization is visible regardless of its size, and printed percentages allow exact reading. Text switches to white on dark cells to stay legible. The rightmost column adds the top-5 total so the shares can be read in context. **Limitations.** It drops geography, so regional patterns must be read from 3a and 3b. It is limited to the 30 largest recipients to stay readable, and the bottom rows (Austria, Liechtenstein, Germany, Finland) are based on very small amounts. **Comparing 3a, 3b and 3c** Yes, the top 5 purposes are distributed differently across the world. Unspecified-sector aid goes mainly to large developing recipients (India, Brazil, South Africa) and the Gulf. Higher education goes to richer recipients (the US, Korea, Taiwan, Slovenia, Chile). Multisector aid is concentrated in Central/Eastern Europe and Thailand. Social/welfare aid is concentrated in Colombia, the Gulf states and the Baltics. Civil-society aid is spread thinly everywhere. The small multiples show each purpose's spatial spread. The dominant-purpose map is the fastest summary. The heatmap gives the exact country-level mix. No single view answers everything, so the three are used together. 4d:[{"id":"09040dddbda03374a466600047ccbc70c46e6853884eb725db2141c566ca1b78fb7cc935096e8d5468c21e8df215e73fc49cdaaf7e2f1f89139793da25be02b2","href":"https://static.observableusercontent.com/files/09040dddbda03374a466600047ccbc70c46e6853884eb725db2141c566ca1b78fb7cc935096e8d5468c21e8df215e73fc49cdaaf7e2f1f89139793da25be02b2","name":"aiddata-countries-only.csv","type":"text/csv","lastModified":1793124163360,"size":8760387}] 38:{"id":"4360330f78b9fb31","slug":"mini-project-1-geographic-financial-aid-due-oct-29th","title":"Mini-Project 1: Geographic Financial Aid (Due Oct. 29th)","thumbnail":"821b69ee30b07472322abc21395a9eeb78d7d087548bcbc0ff81ca67082feec4","access_level":"public","create_time":"$D2026-10-27T17:49:02.766Z","update_time":"$D2026-10-27T20:19:46.248Z","view_time":null,"first_public_time":"$D2026-10-27T20:48:53.056Z","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":"383d02e3b2b3aefd","login":"mohit-gangwani","name":"Mohit Gangwani","avatar_url":"https://avatars-next.observableusercontent.com/76fcbbde21623ab461b6fdb3e1da501d1b48a81ce7c5a3ba04f9866cf4e1804b","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":456,"publish_version":456,"role":null,"authored":false,"authors":[{"type":"individual","id":"ef35952751fbeeb8","login":"mohit-gangwani","name":"Mohit Gangwani","avatar_url":"https://avatars-next.observableusercontent.com/76fcbbde21623ab461b6fdb3e1da501d1b48a81ce7c5a3ba04f9866cf4e1804b","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"383d02e3b2b3aefd","login":"mohit-gangwani","name":"Mohit Gangwani","avatar_url":"https://avatars-next.observableusercontent.com/76fcbbde21623ab461b6fdb3e1da501d1b48a81ce7c5a3ba04f9866cf4e1804b","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":68,"value":"const Name = \"Mohit Gangwani\"\nconst net_id = \"mcg9877\"","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"$3e","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"function Swatches(color, {size = 14} = {}) {\n const div = d3.create(\"div\").style(\"display\", \"flex\").style(\"flex-wrap\", \"wrap\")\n .style(\"gap\", \"6px 16px\").style(\"font\", \"11px sans-serif\").style(\"margin\", \"4px 0\");\n const item = div.selectAll(\"span\").data(color.domain()).join(\"span\")\n .style(\"display\", \"inline-flex\").style(\"align-items\", \"center\").style(\"gap\", \"5px\");\n item.append(\"span\").style(\"width\", `${size}px`).style(\"height\", `${size}px`)\n .style(\"background\", d => color(d)).style(\"display\", \"inline-block\");\n item.append(\"span\").text(d => d);\n return div.node();\n}","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"const data = await FileAttachment(\"aiddata-countries-only.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"const amt = d => +d.commitment_amount_usd_constant || 0;","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"const fmt = v => d3.format(\"$.3s\")(v).replace(\"G\", \"B\");","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"const donated = d3.rollup(data, v => d3.sum(v, amt), d => d.donor);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"const received = d3.rollup(data, v => d3.sum(v, amt), d => d.recipient);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"// One row per country: totals, net balance and a normalized \"donor index\" in [-1, 1]\nconst countries = (() => {\n const names = new Set([...donated.keys(), ...received.keys()]);\n return Array.from(names, name => {\n const d = donated.get(name) ?? 0, r = received.get(name) ?? 0;\n return {name, donated: d, received: r, net: d - r, ratio: (d - r) / (d + r)};\n }).filter(d => d.donated + d.received > 0)\n .sort((a, b) => d3.descending(a.net, b.net));\n})();","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"// Overview of the derived table\nconst summary = Inputs.table(countries, {\n columns: [\"name\", \"donated\", \"received\", \"net\", \"ratio\"],\n header: {ratio: \"donor index\"},\n format: {donated: fmt, received: fmt, net: fmt, ratio: d3.format(\"+.2f\")}\n});\ndisplay(summary);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"const colors = ({received: \"#e08214\", donated: \"#8073ac\"});","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"**Map geometry & name matching**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"const world = await d3.json(\"https://cdn.jsdelivr.net/npm/world-atlas@2/countries-50m.json\");","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"const land = topojson.feature(world, world.objects.countries);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"$3f","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"const toAtlas = name => nameMap[name] ?? name;","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"const byAtlas = new Map(countries.map(d => [toAtlas(d.name), d]));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"const atlasToAid = new Map(countries.map(d => [toAtlas(d.name), d.name]));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"const unmatched = (() => {\n const atlasNames = new Set(land.features.map(f => f.properties.name));\n return countries.map(d => d.name).filter(n => !atlasNames.has(toAtlas(n)));\n})();\ndisplay(unmatched);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"**Reusable map function**\n\nThe projection is Equal Earth, an equal-area projection. Shaded areas need an equal-area projection so that country sizes are not distorted, so Mercator is avoided.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"$40","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"const countryTip = n => {\n const d = byAtlas.get(n);\n return d ? `${d.name}\\nDonated: ${fmt(d.donated)}\\nReceived: ${fmt(d.received)}\\nNet: ${fmt(d.net)}\\nDonor index: ${d3.format(\"+.2f\")(d.ratio)}`\n : `${n}: no data`;\n};","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"**1a. Back-to-back bar chart, sorted by the derived net balance**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"$41","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"$42","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"**1b. Scatterplot, donated vs. received (symlog axes, y = x reference line), with search-to-highlight**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"const focusCountry = view(Inputs.text({label: \"Highlight a country\", placeholder: \"e.g. India\", datalist: countries.map(d => d.name)}));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"$43","pinned":true,"hidden":false,"mode":"ts","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":96,"value":"**Comparing 1a and 1b**\n\nThe back-to-back bar chart is better for ranking every country and comparing exact amounts. The scatterplot is better for seeing both roles at once, spotting the countries that donate and receive, and showing small countries that the linear bar chart hides. Using both answers every part of the question: who donates or receives most (1a), and who does both and how balanced they are (1b).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"**Visualization #2: Geography of donors and recipients**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"**2a. Choropleth of the normalized donor index, with contrasting neighbor borders**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"// Pitfall 3 (color): diverging scale because 0 = \"balanced\" is a meaningful midpoint.\n// PuOr is ColorBrewer, perceptually ordered and colorblind-safe (no rainbow).\nconst indexColor = d3.scaleDiverging([-1, 0, 1], t => d3.interpolatePuOr(1 - t));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"$45","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"// Neighboring countries (shared border, via TopoJSON topology) whose donor index differs a lot\nconst neighborContrasts = (() => {\n const geoms = world.objects.countries.geometries;\n const nb = topojson.neighbors(geoms);\n const pairs = [];\n geoms.forEach((g, i) => nb[i].forEach(j => {\n if (j <= i) return;\n const A = g.properties.name, B = geoms[j].properties.name;\n const a = byAtlas.get(A), b = byAtlas.get(B);\n if (!a || !b) return;\n pairs.push({countryA: a.name, countryB: b.name, atlasA: A, atlasB: B,\n indexA: a.ratio, indexB: b.ratio, gap: Math.abs(a.ratio - b.ratio)});\n }));\n return pairs.filter(p => p.gap >= 1).sort((p, q) => q.gap - p.gap);\n})();","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"const neighborTable = Inputs.table(neighborContrasts, {\n columns: [\"countryA\", \"indexA\", \"countryB\", \"indexB\", \"gap\"],\n format: {indexA: d3.format(\"+.2f\"), indexB: d3.format(\"+.2f\"), gap: d3.format(\".2f\")}\n});\ndisplay(neighborTable);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"const contrastMesh = (() => {\n const keys = new Set(neighborContrasts.map(p => [p.atlasA, p.atlasB].sort().join(\"|\")));\n return topojson.mesh(world, world.objects.countries,\n (a, b) => a !== b && keys.has([a.properties.name, b.properties.name].sort().join(\"|\")));\n})();","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"const viz2Index = (() => {\n const wrap = document.createElement(\"div\");\n wrap.append(Legend(indexColor, {title: \"Donor index: −1 = only receives · 0 = balanced · +1 = only donates\", width: 420,\n tickFormat: d3.format(\"+.1f\")}));\n wrap.append(drawMap({\n title: \"Do donors and recipients cluster? (black borders = neighbors with opposite patterns, gap ≥ 1)\",\n fill: n => byAtlas.has(n) ? indexColor(byAtlas.get(n).ratio) : null,\n tooltip: countryTip,\n highlight: contrastMesh\n }));\n return wrap;\n})();\ndisplay(viz2Index);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"$46","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"**2b.** Proportional-symbol map of net balance (absolute magnitude)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"$47","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"$48","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"**Comparing 2a and 2b**\n\nThe donor-index choropleth best answers \"mostly donate or mostly receive?\" and shows the neighbor contrasts. The proportional-symbol map shows how much each country gives or gets and removes the land-area bias. Together they answer both parts of the question: the roles cluster into a donor North (North America, Western Europe, Japan) and a recipient South and East, with the sharpest neighbor contrasts in Central Europe and East Asia.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"**Visualization #3: Geography of the top 5 purposes**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"// \"Most frequent\" = largest number of commitments (count of rows), across all countries\nconst top5 = d3.rollups(data, v => v.length, d => d.coalesced_purpose_name)\n .sort((a, b) => b[1] - a[1]).slice(0, 5).map(d => d[0]);\ndisplay(top5);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"const top5data = data.filter(d => top5.includes(d.coalesced_purpose_name));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"// recipient -> purpose -> total amount\nconst recipByPurpose = d3.rollup(top5data, v => d3.sum(v, amt), d => d.recipient, d => d.coalesced_purpose_name);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"// Normalization: share of a country's TOTAL received aid that went to purpose p\nconst shareOf = (country, p) => {\n const tot = received.get(country);\n const v = recipByPurpose.get(country)?.get(p);\n return tot > 0 && v > 0 ? v / tot : null;\n};","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"// 5 categories, within the 5–6 hue limit for categorical color. Tableau10 hues have similar\n// lightness/saturation (uniform saliency) and are distinguishable for most color-vision deficiencies.\nconst purposeColor = d3.scaleOrdinal(top5, d3.schemeTableau10);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"**3a. Small multiples (faceting): one map per purpose, colored by share of the country's aid**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"const shareColor = (() => {\n const vals = top5.flatMap(p => countries.map(c => shareOf(c.name, p))).filter(v => v != null);\n // One shared single-hue sequential scale for all five panels so they can be compared.\n // sqrt spreads the many small shares while keeping 0 at the light end.\n return d3.scaleSequentialSqrt([0, d3.max(vals)], d3.interpolateBlues);\n})();","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"const viz3Maps = (() => {\n const wrap = document.createElement(\"div\");\n wrap.append(Legend(shareColor, {title: \"Share of the country's total received aid going to this purpose\", tickFormat: \"%\", width: 480}));\n const grid = document.createElement(\"div\");\n grid.style.cssText = \"display:grid;grid-template-columns:repeat(auto-fit,minmax(440px,1fr));gap:6px\";\n for (const p of top5) {\n grid.append(drawMap({\n width: 480, height: 270, title: p,\n fill: n => { const a = atlasToAid.get(n); const s = a ? shareOf(a, p) : null; return s != null ? shareColor(s) : null; },\n tooltip: n => {\n const a = atlasToAid.get(n), v = recipByPurpose.get(a)?.get(p), s = a ? shareOf(a, p) : null;\n return `${a ?? n}\\n${p}: ${v ? fmt(v) : \"none\"}${s != null ? ` (${d3.format(\".1%\")(s)} of its aid)` : \"\"}`;\n }\n }));\n }\n wrap.append(grid);\n return wrap;\n})();\ndisplay(viz3Maps);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"$49","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"**3b. Dominant purpose per recipient (categorical choropleth)**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"const viz3Dominant = (() => {\n const wrap = document.createElement(\"div\");\n wrap.append(Swatches(purposeColor));\n wrap.append(drawMap({\n title: \"Which of the top-5 purposes each country received the most money for\",\n fill: n => {\n const m = recipByPurpose.get(atlasToAid.get(n));\n if (!m) return null;\n return purposeColor(d3.greatest(m, ([, v]) => v)[0]);\n },\n tooltip: n => {\n const a = atlasToAid.get(n), m = recipByPurpose.get(a);\n if (!m) return `${n}: no top-5 receipts`;\n return `${a}\\n` + top5.map(p => `${p}: ${fmt(m.get(p) ?? 0)}`).join(\"\\n\");\n }\n }));\n return wrap;\n})();\ndisplay(viz3Dominant);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"$4a","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"**3c. Matrix (heatmap): purpose mix of the 30 largest recipients (row-normalized)**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"const heatRows = d3.sort(\n Array.from(recipByPurpose, ([name, m]) => {\n const total = d3.sum(m.values());\n return {name, total, shares: top5.map(p => (m.get(p) ?? 0) / total)};\n }), d => -d.total).slice(0, 30);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"$4b","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"$4c","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"**Data notes**\n\n- All preprocessing (aggregation by donor/recipient/purpose, net balance, donor index, top-5 filter, shares) is done in JavaScript in this notebook. No external preprocessing.\n- Additional dataset: world country boundaries from world-atlas (Natural Earth, 1:50m, TopoJSON), loaded from https://cdn.jsdelivr.net/npm/world-atlas@2/countries-50m.json.\n- AidData country names were matched to map names with the nameMap cell. Countries listed in unmatched (if any) have no shape at this resolution: they are not on the maps but are included in Visualization #1.\n- Amounts are commitment_amount_usd_constant (constant USD), summed across all years. Commitments are not disbursements, so totals reflect promised rather than delivered aid.\n- Countries that appear only as donors or only as recipients get a donor index of exactly +1 or −1. Countries absent from the dataset are drawn in gray.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"2"}} 33:null