2b:null 2c:["$","title",null,{"children":"Mini-Project 1: Geographic Financial Aid | New York University | Observable"}] 31:T601,## Submission Instructions: 1. You are free to either **fork this notebook** or **create your own notebook** for this mini-project. Ensure that: - The notebook is made _public_ in the settings. - That you include the following details inside of your submission at or near the top of the notebook: 1) _NetID_, 2) _Name_, and 3) _Notebook URL_. **You will get a ZERO if you do not include these details!** 2. Complete each question to the best of your ability, clearly marking which visualization and/or written answer corresponds to which question asked. - Your coded solutions **must use D3**. Other visualization libraries (.e.g Vega-Lite) 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](https://observablehq.com/@d3/color-legend) notebook to create your legends. 3. Export a `.tgz` of your completed notebook and upload it to the correct Assignment on Brightspace. This mini-project is due November 6 @ 11:59pm.

[NOTE]: Please make sure to Read ALL instructions carefully for each part of this assignment; the code should try to match exactly the requirements specified!

[NOTE]: Please make sure that your NOTEBOOK URL link correctly links to your noteook, alongside your Name and NetID, before submitting!

32:T697,## Questions Your goal is to create 3 independent visualizations of the same data set, 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 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.

33:Te61,chart1 = { const margin = {top: 40, right: 120, bottom: 60, left: 200}; const width = 1000; const height = Math.max(600, donorRecipientData.length * 18); const topCountries = donorRecipientData.slice(0, 30); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;"); const maxValue = d3.max(topCountries, d => Math.max(d.donated, d.received)); const x = d3.scaleLinear() .domain([-maxValue, maxValue]) .range([margin.left, width - margin.right]); const y = d3.scaleBand() .domain(topCountries.map(d => d.country)) .range([margin.top, height - margin.bottom]) .padding(0.2); const color = d3.scaleOrdinal() .domain(["donated", "received"]) .range(["#4e79a7", "#e15759"]); svg.append("text") .attr("x", width / 2) .attr("y", margin.top / 2) .attr("text-anchor", "middle") .attr("font-size", "16px") .attr("font-weight", "bold") .text("Top 30 Countries: Donations vs Receipts"); svg.append("line") .attr("x1", x(0)) .attr("x2", x(0)) .attr("y1", margin.top) .attr("y2", height - margin.bottom) .attr("stroke", "#000") .attr("stroke-width", 2); svg.selectAll(".bar-donated") .data(topCountries) .join("rect") .attr("class", "bar-donated") .attr("x", d => x(-d.donated)) .attr("y", d => y(d.country)) .attr("width", d => x(0) - x(-d.donated)) .attr("height", y.bandwidth()) .attr("fill", color("donated")) .attr("opacity", 0.8) .append("title") .text(d => `${d.country}\nDonated: $${(d.donated / 1e9).toFixed(2)}B`); svg.selectAll(".bar-received") .data(topCountries) .join("rect") .attr("class", "bar-received") .attr("x", x(0)) .attr("y", d => y(d.country)) .attr("width", d => x(d.received) - x(0)) .attr("height", y.bandwidth()) .attr("fill", color("received")) .attr("opacity", 0.8) .append("title") .text(d => `${d.country}\nReceived: $${(d.received / 1e9).toFixed(2)}B`); svg.append("g") .attr("transform", `translate(${x(0)},0)`) .call(d3.axisLeft(y)) .selectAll("text") .attr("font-size", "11px"); const xAxis = d3.axisBottom(x) .ticks(8) .tickFormat(d => `$${Math.abs(d / 1e9).toFixed(0)}B`); svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(xAxis) .selectAll("text") .attr("font-size", "10px"); svg.append("text") .attr("x", x(-maxValue * 0.5)) .attr("y", height - margin.bottom + 40) .attr("text-anchor", "middle") .attr("font-size", "12px") .attr("fill", color("donated")) .text("← Donated (USD)"); svg.append("text") .attr("x", x(maxValue * 0.5)) .attr("y", height - margin.bottom + 40) .attr("text-anchor", "middle") .attr("font-size", "12px") .attr("fill", color("received")) .text("Received (USD) →"); const legend = svg.append("g") .attr("transform", `translate(${width - margin.right + 10}, ${margin.top})`); legend.append("rect") .attr("width", 15) .attr("height", 15) .attr("fill", color("donated")) .attr("opacity", 0.8); legend.append("text") .attr("x", 20) .attr("y", 12) .attr("font-size", "12px") .text("Donated"); legend.append("rect") .attr("y", 25) .attr("width", 15) .attr("height", 15) .attr("fill", color("received")) .attr("opacity", 0.8); legend.append("text") .attr("x", 20) .attr("y", 37) .attr("font-size", "12px") .text("Received"); return svg.node(); }34:T414,- This is a diverging bar chart where donations go left in blue and receipts go right in red for the top 30 countries. - Looking at this chart, it's pretty clear that there are three types of countries here. First, you have the big donors like USA, Japan, and Germany who give out tons of money (over $50B each) but barely receive anything. Then on the flip side, India is the biggest recipient at around $100B, followed by Thailand and Brazil who receive a lot but don't donate much. There are also some countries in the middle like UK and France that both donate and receive, but they donate way more than they receive. The chart really shows that developed countries (North America, Western Europe, Japan) are the main donors while developing countries in Asia, South America, and Africa are mainly recipients. You can easily spot countries that donate much more than they receive (like USA and Japan) versus countries that receive much more than they donate (like India and Thailand) just by looking at which side their bars are longer on.35:Tb25,chart2 = { const width = 975; const height = 610; const projection = d3.geoNaturalEarth1() .fitSize([width, height], geoData); const path = d3.geoPath(projection); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;"); const maxAbsNet = d3.max(geoData.features, d => Math.abs(d.properties.netFlow)); const colorScale = d3.scaleDiverging() .domain([-maxAbsNet, 0, maxAbsNet]) .interpolator(d3.interpolateRdBu) .unknown("#ccc"); svg.append("g") .selectAll("path") .data(geoData.features) .join("path") .attr("d", path) .attr("fill", d => { if (d.properties.donated === 0 && d.properties.received === 0) { return "#f0f0f0"; } return colorScale(d.properties.netFlow); }) .attr("stroke", "#333") .attr("stroke-width", 0.5) .append("title") .text(d => { const name = d.properties.name; const donated = d.properties.donated; const received = d.properties.received; const net = d.properties.netFlow; if (donated === 0 && received === 0) { return `${name}\nNo data`; } return `${name} Donated: $${(donated / 1e9).toFixed(2)}B Received: $${(received / 1e9).toFixed(2)}B Net: $${(net / 1e9).toFixed(2)}B`; }); svg.append("text") .attr("x", width / 2) .attr("y", 25) .attr("text-anchor", "middle") .attr("font-size", "16px") .attr("font-weight", "bold") .text("Geographic Distribution: Net Donors vs Net Recipients"); const legendWidth = 300; const legendHeight = 10; const legend = svg.append("g") .attr("transform", `translate(${width - legendWidth - 50}, ${height - 50})`); const defs = svg.append("defs"); const linearGradient = defs.append("linearGradient") .attr("id", "legend-gradient"); linearGradient.selectAll("stop") .data(d3.range(0, 1.01, 0.01)) .join("stop") .attr("offset", d => `${d * 100}%`) .attr("stop-color", d => colorScale(d * 2 * maxAbsNet - maxAbsNet)); legend.append("rect") .attr("width", legendWidth) .attr("height", legendHeight) .style("fill", "url(#legend-gradient)"); legend.append("text") .attr("x", 0) .attr("y", legendHeight + 15) .attr("font-size", "11px") .attr("text-anchor", "start") .text("← Net Recipients"); legend.append("text") .attr("x", legendWidth) .attr("y", legendHeight + 15) .attr("font-size", "11px") .attr("text-anchor", "end") .text("Net Donors →"); legend.append("text") .attr("x", legendWidth / 2) .attr("y", legendHeight + 15) .attr("font-size", "11px") .attr("text-anchor", "middle") .text("Balanced"); return svg.node(); }36:T400,- This is a world map colored by whether countries are net donors (blue) or net recipients (red), with darker colors meaning stronger donor/recipient status. - The map makes it super obvious that donor and recipient countries definitely cluster geographically. All the dark blue (donor countries) are in North America, Western Europe, and developed parts of Asia like Japan and South Korea. Meanwhile, the red (recipient countries) cluster in South Asia, South America, and parts of Eastern Europe. When you look at neighboring countries, there are some interesting contrasts - like in Europe, you have Western countries like Germany and France in blue right next to Eastern European countries like Poland and Romania in red. Same thing in Asia where Japan and South Korea are major donors but Thailand and other Southeast Asian countries nearby are recipients. So yeah, neighboring countries can have totally different patterns based on their economic development, even though they're close to each other geographically.37:T1300,chart2_symbols = { const mapWidth = 975; const mapHeight = 610; const legendWidth = 160; const legendMargin = 20; const totalWidth = mapWidth + legendWidth + legendMargin; const totalHeight = mapHeight; const projection = d3.geoNaturalEarth1() .fitSize([mapWidth, mapHeight], geoData); const path = d3.geoPath(projection); const svg = d3.create("svg") .attr("width", totalWidth) .attr("height", totalHeight) .attr("viewBox", [0, 0, totalWidth, totalHeight]) .attr("style", "max-width: 100%; height: auto;"); svg.append("g") .selectAll("path") .data(geoData.features) .join("path") .attr("d", path) .attr("fill", "#f0f0f0") .attr("stroke", "#999") .attr("stroke-width", 0.5); const circleData = []; donorRecipientData.forEach(d => { if (d.donated === 0 && d.received === 0) return; const feature = geoData.features.find(f => f.properties.name === d.country); if (!feature) return; const centroid = d3.geoCentroid(feature); if (!isFinite(centroid[0]) || !isFinite(centroid[1])) return; const isDonor = d.donated > d.received; const value = isDonor ? d.donated : d.received; circleData.push({ country: d.country, coords: centroid, value: value, type: isDonor ? "donor" : "recipient", donated: d.donated, received: d.received }); }); const maxValue = d3.max(circleData, d => d.value); const radiusScale = d3.scaleSqrt() .domain([0, maxValue]) .range([0, 40]); svg.selectAll("circle.bubble") .data(circleData) .join("circle") .attr("class", "bubble") .attr("cx", d => projection(d.coords)[0]) .attr("cy", d => projection(d.coords)[1]) .attr("r", d => radiusScale(d.value)) .attr("fill", d => d.type === "donor" ? "#4e79a7" : "#e15759") .attr("opacity", 0.6) .attr("stroke", "#333") .attr("stroke-width", 1) .append("title") .text(d => `${d.country}\nDonated: $${(d.donated/1e9).toFixed(2)}B\nReceived: $${(d.received/1e9).toFixed(2)}B`); svg.append("text") .attr("x", mapWidth / 2) .attr("y", 25) .attr("text-anchor", "middle") .attr("font-size", "16px") .attr("font-weight", "bold") .text("Geographic Clustering: Proportional Symbol Map"); const legendX = mapWidth + legendMargin; const legendY = 80; const legend = svg.append("g") .attr("transform", `translate(${legendX}, ${legendY})`); const legendPadding = 12; const legendBoxWidth = 150; const titleHeight = 25; const sizeSectionHeight = 130; const typeSectionHeight = 75; const totalLegendHeight = titleHeight + sizeSectionHeight + typeSectionHeight + (legendPadding * 2); legend.append("text") .attr("x", legendBoxWidth / 2 - legendPadding) .attr("y", 8) .attr("text-anchor", "middle") .attr("font-size", "13px") .attr("font-weight", "bold") .text("Aid Activity"); const sizeLegendY = 32; legend.append("text") .attr("x", 0) .attr("y", sizeLegendY) .attr("font-size", "11px") .attr("font-weight", "bold") .text("Amount (USD):"); const exampleSizes = [100e9, 50e9, 10e9]; const sizeLabels = ["$100B", "$50B", "$10B"]; const maxExampleRadius = radiusScale(100e9); let currentY = sizeLegendY + 15; exampleSizes.forEach((value, i) => { const r = radiusScale(value); currentY += r + 5; legend.append("circle") .attr("cx", maxExampleRadius + 5) .attr("cy", currentY) .attr("r", r) .attr("fill", "none") .attr("stroke", "#666") .attr("stroke-width", 1.5); legend.append("text") .attr("x", maxExampleRadius + 15 + maxExampleRadius) .attr("y", currentY + 4) .attr("font-size", "10px") .attr("fill", "#333") .text(sizeLabels[i]); currentY += r + 8; }); const typeLegendY = currentY + 20; legend.append("text") .attr("x", 0) .attr("y", typeLegendY) .attr("font-size", "11px") .attr("font-weight", "bold") .text("Type:"); legend.append("circle") .attr("cx", 15) .attr("cy", typeLegendY + 16) .attr("r", 8) .attr("fill", "#4e79a7") .attr("opacity", 0.7) .attr("stroke", "#333") .attr("stroke-width", 1); legend.append("text") .attr("x", 30) .attr("y", typeLegendY + 20) .attr("font-size", "10px") .attr("fill", "#333") .text("Net Donors"); legend.append("circle") .attr("cx", 15) .attr("cy", typeLegendY + 38) .attr("r", 8) .attr("fill", "#e15759") .attr("opacity", 0.7) .attr("stroke", "#333") .attr("stroke-width", 1); legend.append("text") .attr("x", 30) .attr("y", typeLegendY + 42) .attr("font-size", "10px") .attr("fill", "#333") .text("Net Recipients"); return svg.node(); }38:T407,- This map uses circles to show aid amounts, where bigger circles mean more aid activity. Blue circles are donors and red circles are recipients. - This view adds another layer to the geographic story by showing not just who's a donor or recipient, but how much aid is involved. The massive blue circle over the USA shows it's by far the biggest donor, while the huge red circle over India shows it's the biggest recipient. What's interesting is you can see clear geographic clustering - North America and Western Europe have big blue circles (lots of donations), while South and Southeast Asia have big red circles (lots of receipts). The size differences are dramatic too - some countries have tiny circles while others dominate their regions. This helps answer the question about geographic patterns because you can literally see how donor countries bunch together in developed regions and recipient countries group together in developing regions, and the circle sizes show that the differences between neighbors can be huge.39:T446,purposeByRecipient = { const result = new Map(); const filtered = data.filter(d => top5Purposes.includes(d.coalesced_purpose_name)); filtered.forEach(d => { const standardizedRecipient = standardizeCountryName(d.recipient); if (!result.has(standardizedRecipient)) { result.set(standardizedRecipient, new Map()); } const countryMap = result.get(standardizedRecipient); const current = countryMap.get(d.coalesced_purpose_name) || 0; countryMap.set(d.coalesced_purpose_name, current + d.commitment_amount_usd_constant); }); const array = Array.from(result.entries()).map(([country, purposeMap]) => { const purposes = {}; let total = 0; top5Purposes.forEach(p => { purposes[p] = purposeMap.get(p) || 0; total += purposes[p]; }); const dominant = top5Purposes.reduce((max, p) => purposes[p] > purposes[max] ? p : max , top5Purposes[0]); return { country, total, dominant, ...purposes }; }); return array.sort((a, b) => b.total - a.total).slice(0, 40); }3a:T15ba,chart3_heatmap = { const margin = {top: 80, right: 280, bottom: 100, left: 180}; const width = 1200; const cellWidth = 80; const cellHeight = 20; const height = margin.top + (purposeByRecipient.length * cellHeight) + margin.bottom; const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;"); const purposeAbbreviations = { "Air transport": "AT", "Rail transport": "RT", "Industrial development": "ID", "Power generation/non-renewable sources": "PG", "RESCHEDULING AND REFINANCING": "RR" }; const abbreviatedPurposes = top5Purposes.map(p => purposeAbbreviations[p] || p.substring(0, 2).toUpperCase()); const matrixData = []; purposeByRecipient.forEach(country => { top5Purposes.forEach((purpose, i) => { matrixData.push({ country: country.country, purpose: purpose, abbrev: abbreviatedPurposes[i], value: country[purpose] || 0 }); }); }); const maxValue = d3.max(matrixData, d => d.value); const colorScale = d3.scaleSequential() .domain([0, maxValue]) .interpolator(d3.interpolateYlOrRd); const x = d3.scaleBand() .domain(abbreviatedPurposes) .range([margin.left, margin.left + (cellWidth * top5Purposes.length)]) .padding(0.05); const y = d3.scaleBand() .domain(purposeByRecipient.map(d => d.country)) .range([margin.top, margin.top + (cellHeight * purposeByRecipient.length)]) .padding(0.05); svg.append("text") .attr("x", width / 2) .attr("y", 25) .attr("text-anchor", "middle") .attr("font-size", "16px") .attr("font-weight", "bold") .text("Aid Distribution Matrix: Countries × Purpose Types"); svg.selectAll("rect.cell") .data(matrixData) .join("rect") .attr("class", "cell") .attr("x", d => x(d.abbrev)) .attr("y", d => y(d.country)) .attr("width", x.bandwidth()) .attr("height", y.bandwidth()) .attr("fill", d => d.value > 0 ? colorScale(d.value) : "#f5f5f5") .attr("stroke", "#fff") .attr("stroke-width", 1) .append("title") .text(d => `${d.country}\n${d.purpose}\n$${(d.value/1e9).toFixed(2)}B`); svg.append("g") .attr("transform", `translate(${margin.left}, 0)`) .call(d3.axisLeft(y)) .selectAll("text") .attr("font-size", "9px"); const xAxis = svg.append("g") .attr("transform", `translate(0, ${margin.top - 10})`) .call(d3.axisTop(x)); xAxis.selectAll("text") .attr("font-size", "12px") .attr("font-weight", "bold") .attr("text-anchor", "middle"); xAxis.selectAll("line").remove(); xAxis.select(".domain").remove(); const purposeLegendX = margin.left + (cellWidth * top5Purposes.length) + 20; const purposeLegendY = margin.top + 20; const purposeLegend = svg.append("g") .attr("transform", `translate(${purposeLegendX}, ${purposeLegendY})`); purposeLegend.append("text") .attr("x", 0) .attr("y", -10) .attr("font-size", "12px") .attr("font-weight", "bold") .text("Purpose Categories:"); top5Purposes.forEach((purpose, i) => { const abbrev = abbreviatedPurposes[i]; const itemY = i * 25 + 5; purposeLegend.append("text") .attr("x", 12) .attr("y", itemY) .attr("text-anchor", "middle") .attr("font-size", "10px") .attr("font-weight", "bold") .text(abbrev); const fullName = purpose; if (fullName.length > 30) { const words = fullName.split(' '); const midpoint = Math.ceil(words.length / 2); const line1 = words.slice(0, midpoint).join(' '); const line2 = words.slice(midpoint).join(' '); purposeLegend.append("text") .attr("x", 30) .attr("y", itemY - 4) .attr("font-size", "9px") .text(line1); purposeLegend.append("text") .attr("x", 30) .attr("y", itemY + 7) .attr("font-size", "9px") .text(line2); } else { purposeLegend.append("text") .attr("x", 30) .attr("y", itemY) .attr("font-size", "9px") .text(fullName); } }); const colorLegendWidth = 300; const colorLegendHeight = 15; const colorLegend = svg.append("g") .attr("transform", `translate(${margin.left}, ${height - margin.bottom + 40})`); const defs = svg.append("defs"); const gradient = defs.append("linearGradient") .attr("id", "heatmap-gradient-ylord"); gradient.selectAll("stop") .data(d3.range(0, 1.01, 0.1)) .join("stop") .attr("offset", d => `${d * 100}%`) .attr("stop-color", d => colorScale(d * maxValue)); colorLegend.append("rect") .attr("width", colorLegendWidth) .attr("height", colorLegendHeight) .style("fill", "url(#heatmap-gradient-ylord)") .attr("stroke", "#999") .attr("stroke-width", 1); colorLegend.append("text") .attr("x", 0) .attr("y", colorLegendHeight + 18) .attr("font-size", "10px") .attr("text-anchor", "start") .text("$0"); colorLegend.append("text") .attr("x", colorLegendWidth) .attr("y", colorLegendHeight + 18) .attr("text-anchor", "end") .attr("font-size", "10px") .text(`$${(maxValue/1e9).toFixed(0)}B`); colorLegend.append("text") .attr("x", colorLegendWidth / 2) .attr("y", -8) .attr("text-anchor", "middle") .attr("font-size", "11px") .attr("font-weight", "bold") .text("Aid Amount (USD)"); return svg.node(); }3b:Ta0c,chart3b = { const width = 975; const height = 200; const rows = Math.ceil(top5Purposes.length / 2); const cols = 2; const totalHeight = height * rows + 80; const projection = d3.geoNaturalEarth1() .fitSize([width / cols - 20, height - 40], geoData); const path = d3.geoPath(projection); const svg = d3.create("svg") .attr("width", width) .attr("height", totalHeight) .attr("viewBox", [0, 0, width, totalHeight]) .attr("style", "max-width: 100%; height: auto;"); svg.append("text") .attr("x", width / 2) .attr("y", 25) .attr("text-anchor", "middle") .attr("font-size", "16px") .attr("font-weight", "bold") .text("Geographic Distribution of Aid by Purpose"); const colorScale = d3.scaleOrdinal() .domain(top5Purposes) .range(d3.schemeCategory10); top5Purposes.forEach((purpose, i) => { const row = Math.floor(i / cols); const col = i % cols; const xOffset = col * (width / cols); const yOffset = 50 + row * height; const g = svg.append("g") .attr("transform", `translate(${xOffset}, ${yOffset})`); g.append("text") .attr("x", (width / cols) / 2) .attr("y", 15) .attr("text-anchor", "middle") .attr("font-size", "12px") .attr("font-weight", "bold") .text(purpose.length > 40 ? purpose.substring(0, 37) + "..." : purpose); const purposeAmounts = new Map(); data.filter(d => d.coalesced_purpose_name === purpose).forEach(d => { const standardizedRecipient = standardizeCountryName(d.recipient); const current = purposeAmounts.get(standardizedRecipient) || 0; purposeAmounts.set(standardizedRecipient, current + d.commitment_amount_usd_constant); }); const maxAmount = d3.max(Array.from(purposeAmounts.values())); const purposeColor = d3.scaleSequential() .domain([0, maxAmount]) .interpolator(d3.interpolateYlOrRd); g.append("g") .attr("transform", "translate(10, 30)") .selectAll("path") .data(geoData.features) .join("path") .attr("d", path) .attr("fill", d => { const amount = purposeAmounts.get(d.properties.name) || 0; return amount > 0 ? purposeColor(amount) : "#f5f5f5"; }) .attr("stroke", "#999") .attr("stroke-width", 0.3) .append("title") .text(d => { const amount = purposeAmounts.get(d.properties.name) || 0; return `${d.properties.name}\n${purpose}\n$${(amount / 1e9).toFixed(2)}B`; }); }); return svg.node(); }3c:Td15,chart3c = { const margin = {top: 60, right: 40, bottom: 60, left: 180}; const width = 1000; const barHeight = 25; const groupSpacing = 40; const groupedData = []; top5Purposes.forEach(purpose => { const purposeData = data .filter(d => d.coalesced_purpose_name === purpose) .reduce((acc, d) => { const current = acc.get(d.recipient) || 0; acc.set(d.recipient, current + d.commitment_amount_usd_constant); return acc; }, new Map()); const top5 = Array.from(purposeData.entries()) .sort((a, b) => b[1] - a[1]) .slice(0, 5) .map(([country, amount]) => ({ purpose, country, amount })); groupedData.push(...top5); }); const height = margin.top + (top5Purposes.length * (5 * barHeight + groupSpacing)) + margin.bottom; const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;"); svg.append("text") .attr("x", width / 2) .attr("y", 30) .attr("text-anchor", "middle") .attr("font-size", "16px") .attr("font-weight", "bold") .text("Top 5 Recipient Countries for Each Aid Purpose"); const colorScale = d3.scaleOrdinal() .domain(top5Purposes) .range(d3.schemeCategory10); const maxAmount = d3.max(groupedData, d => d.amount); const x = d3.scaleLinear() .domain([0, maxAmount]) .range([margin.left, width - margin.right]); top5Purposes.forEach((purpose, groupIndex) => { const groupData = groupedData.filter(d => d.purpose === purpose); const yOffset = margin.top + (groupIndex * (5 * barHeight + groupSpacing)); svg.append("text") .attr("x", margin.left + 30) .attr("y", yOffset - 5) .attr("text-anchor", "end") .attr("font-size", "11px") .attr("font-weight", "bold") .attr("fill", colorScale(purpose)) .text(purpose) groupData.forEach((d, i) => { const y = yOffset + (i * barHeight); svg.append("rect") .attr("x", margin.left) .attr("y", y) .attr("width", x(d.amount) - margin.left) .attr("height", barHeight - 3) .attr("fill", colorScale(purpose)) .attr("opacity", 0.7) .append("title") .text(`${d.country}\n${purpose}\n$${(d.amount/1e9).toFixed(2)}B`); svg.append("text") .attr("x", margin.left - 5) .attr("y", y + (barHeight / 2)) .attr("text-anchor", "end") .attr("alignment-baseline", "middle") .attr("font-size", "10px") .text(d.country); svg.append("text") .attr("x", x(d.amount) + 5) .attr("y", y + (barHeight / 2)) .attr("alignment-baseline", "middle") .attr("font-size", "9px") .text(`$${(d.amount/1e9).toFixed(1)}B`); }); }); svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).ticks(6).tickFormat(d => `$${(d/1e9).toFixed(0)}B`)); svg.append("text") .attr("x", (margin.left + width - margin.right) / 2) .attr("y", height - 20) .attr("text-anchor", "middle") .attr("font-size", "12px") .text("Aid Amount (USD)"); return svg.node(); }3d:[{"id":"73d953b454a992305f4c4a03837d8f2eda080065df489d1eebbad98086566e86f0082390f1274374819d17fe9a62d2f39626a1849d293349e0e250e56ce3e746","href":"https://static.observableusercontent.com/files/73d953b454a992305f4c4a03837d8f2eda080065df489d1eebbad98086566e86f0082390f1274374819d17fe9a62d2f39626a1849d293349e0e250e56ce3e746","name":"aiddata-countries-only - aiddata-countries-only.csv","type":"text/csv","lastModified":1761779829738.718,"size":8760387}] 2f:{"id":"efb291f6d0735578","slug":null,"title":"Mini-Project 1: Geographic Financial Aid","thumbnail":"30acc9dcc4965d16f0c3fec3fe439af0cadd7ba254642df6a6e98ecb964898aa","access_level":"public","create_time":"$D2025-10-29T23:13:19.489Z","update_time":"$D2025-11-01T23:59:44.570Z","view_time":null,"first_public_time":"$D2025-11-01T23:59:53.052Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"3e0135dbcb9af4fe","login":"new-york-university21","name":"New York University","avatar_url":"https://avatars-next.observableusercontent.com/d97d076a94403ded92e5811f3b293e5a00e959f42fc5252221bd57904d711438","tier":"starter_2024","bio":""},"version":305,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"6b3b6472db850914","login":"sm12505","name":"Sm12505","avatar_url":"https://avatars-next.observableusercontent.com/25d7e16f268c88a291fc61a344dcc836598b5be17f4329fda0ef29d45aae18d2","tier":null,"bio":""}],"members":[{"type":"team","id":"3e0135dbcb9af4fe","login":"new-york-university21","name":"New York University","avatar_url":"https://avatars-next.observableusercontent.com/d97d076a94403ded92e5811f3b293e5a00e959f42fc5252221bd57904d711438","tier":"starter_2024","role":"editor"},{"type":"individual","id":"6b3b6472db850914","login":"sm12505","name":"Sm12505","avatar_url":"https://avatars-next.observableusercontent.com/25d7e16f268c88a291fc61a344dcc836598b5be17f4329fda0ef29d45aae18d2","tier":null,"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","cells":[{"id":0,"value":"# Mini-Project 1: Geographic Financial Aid","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":27,"value":"import {css} from \"@rk2546/2025-infovis-cse_notebook-gallery\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"css","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":39,"value":"---\n\n#### [TO-DO]\n\nFill out the following submission details:\n\n* **Name:** <Siddh Mandirwala>\n* **NetID:** <sm12505>\n* **NOTEBOOK URL:** <[NOTEBOOK URL](https://observablehq.com/d/efb291f6d0735578)>\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"## About the Dataset\n\nHere we load a [simplified and reduced version](https://docs.google.com/spreadsheets/d/1YiuHdfZv_JZ-igOemKJMRaU8dkucfmHxOP6Od3FraW8/) of the [AidData dataset](https://www.aiddata.org/data/aiddata-core-research-release-level-1-3-1). You are free to change this code as you wish. If you don't want to preprocess your data on Observable, then you can do the preprocessing using whatever languages or tools you'd like and then [upload](/@observablehq/file-attachments) your preprocessed data to Observable. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":21,"value":"\n\nThe dataset contains the following columns:\n- **yearDate**: year of the commitment as a Date object\n- **yearInt**: year of the commitment as an integer\n- **donor**: country providing the financial resource\n- **recipient**: country receiving the financial resource\n- **amount**: the total amount of financial resources provided\n- **purpose**: the purpose of the transaction","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"### Remember\n\nThe questions above are a very useful tool for you to verify whether you are producing a good solution or not. As you go about solving this exercise you can use the questions above as an 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.\n\nFurthermore, you should feel free to process and transform the data any way you deem relevant and use any tool you prefer for data processing. Data transformation does not necessarily have to be in JavaScript nor within Observable. It’s ok to pre-process the data and then load it in Observable if you prefer.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":55,"value":"### Grading Criteria\n\nYour 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](/@nyuvis/contextual-elements-aesthetics-and-clarity) for reference.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":200,"value":"# Solution","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":203,"value":"data = {\n const raw = await FileAttachment(\"aiddata-countries-only - aiddata-countries-only.csv\").csv({typed: true});\n \n return raw.filter(d => d.donor && d.recipient && d.commitment_amount_usd_constant);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"world = await fetch(\"https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json\").then(r => r.json())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"csvCountries = {\n const allCountries = new Set([\n ...data.map(d => d.donor),\n ...data.map(d => d.recipient)\n ]);\n \n return Array.from(allCountries).sort();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"worldMapCountries = {\n const countries = topojson.feature(world, world.objects.countries);\n return countries.features.map(f => f.properties.name).sort();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"mismatchedCountries = {\n const worldMapSet = new Set(worldMapCountries);\n const unmatched = csvCountries.filter(country => !worldMapSet.has(country));\n \n return {\n unmatched\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"countryNameMap = new Map([\n [\"Czech Republic\", \"Czechia\"],\n [\"Korea\", \"South Korea\"],\n [\"Liechtenstein\", \"Liechtenstein\"],\n [\"Monaco\", \"Monaco\"],\n [\"Slovak Republic\", \"Slovakia\"],\n [\"United States\", \"United States of America\"]\n])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"standardizeCountryName = function(countryName) {\n return countryNameMap.get(countryName) || countryName;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"mappingVerification = {\n const worldMapSet = new Set(worldMapCountries);\n \n const results = mismatchedCountries.unmatched.map(csvName => {\n const standardized = standardizeCountryName(csvName);\n const existsInMap = worldMapSet.has(standardized);\n \n return {\n csvName: csvName,\n mappedTo: standardized,\n matched: existsInMap ? \"yes\" : \"no\"\n };\n });\n \n return results;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"# Visualization 1","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":231,"value":"donorRecipientData = {\n const donations = d3.rollup(\n data,\n v => d3.sum(v, d => d.commitment_amount_usd_constant),\n d => standardizeCountryName(d.donor)\n );\n \n const receipts = d3.rollup(\n data,\n v => d3.sum(v, d => d.commitment_amount_usd_constant),\n d => standardizeCountryName(d.recipient)\n );\n \n const allCountries = new Set([...donations.keys(), ...receipts.keys()]);\n \n const combined = Array.from(allCountries).map(country => ({\n country: country,\n donated: donations.get(country) || 0,\n received: receipts.get(country) || 0,\n net: (donations.get(country) || 0) - (receipts.get(country) || 0),\n total: (donations.get(country) || 0) + (receipts.get(country) || 0)\n }));\n \n return combined.sort((a, b) => b.total - a.total);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":235,"value":"# Visualization 2","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":237,"value":"geoData = {\n const countries = topojson.feature(world, world.objects.countries);\n \n const netFlow = new Map();\n donorRecipientData.forEach(d => {\n netFlow.set(d.country, d.net);\n });\n \n countries.features.forEach(feature => {\n const countryName = feature.properties.name;\n const netValue = netFlow.get(countryName) || 0;\n feature.properties.netFlow = netValue;\n feature.properties.donated = donorRecipientData.find(d => d.country === countryName)?.donated || 0;\n feature.properties.received = donorRecipientData.find(d => d.country === countryName)?.received || 0;\n });\n \n return countries;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"$36","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":242,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"$38","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":246,"value":"# Visualization 3","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":248,"value":"top5Purposes = {\n const purposeTotals = d3.rollup(\n data,\n v => ({\n total: d3.sum(v, d => d.commitment_amount_usd_constant),\n count: v.length\n }),\n d => d.coalesced_purpose_name\n );\n \n const sorted = Array.from(purposeTotals.entries())\n .sort((a, b) => b[1].total - a[1].total)\n .slice(0, 5);\n \n return sorted.map(d => d[0]);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"$39","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"$3a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"- This heatmap shows how much money each country receives for different aid purposes. Darker red means more money for that purpose.\n\n- The heatmap makes it easy to spot which countries get what types of aid. India clearly dominates in Rail transport, Industrial development, and Power generation - you can see those dark red boxes across multiple purposes for India. Poland has this crazy dark red box for Rescheduling and refinancing, which is basically all their aid. Thailand gets a good mix across Air transport, Rail transport, and Industrial development. Some countries like Brazil and South Korea show lighter colors spread across multiple purposes, meaning they get aid for various things but not huge amounts in any single category. So yeah, there are definitely major differences - some countries like India get diverse aid across many purposes while others like Poland are super specialized in just one type.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":256,"value":"$3b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"- These are five small world maps, one for each aid purpose, showing where that type of aid goes. Darker colors mean more aid for that purpose.\n\n- These maps show that different types of aid have different geographic patterns. Rail transport aid is heavily concentrated in India (super dark red) with some going to Thailand and Southeast Asia. Air transport spreads out more to countries like South Korea, Canada, Brazil, and Saudi Arabia. Industrial development is again focused on India but also Thailand and Brazil. Power generation also centers on India but reaches Colombia and South Korea too. Rescheduling and refinancing is almost entirely Poland with barely anything elsewhere. So yes, there are major geographic differences by purpose - some aid types like rail focus heavily on a few Asian countries, while others like air transport spread more globally. Countries definitely specialize in receiving certain types of aid based on their development needs.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":258,"value":"$3c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"- This grouped bar chart shows the top 5 countries that receive the most aid for each of the 5 purposes, with bars colored by purpose type.\n\n- This chart gives you the exact numbers and makes the specialization really clear. For Rail transport, India dominates with $12.4B, way more than Thailand's $5.6B in second place. For Air transport, it's more balanced between South Korea ($5.3B), Canada ($4.1B), and Thailand ($4.0B). Industrial development is again India-heavy at $7.4B. Power generation shows India at $8.2B with Colombia second at $1.6B. And Rescheduling has Poland at an insane $14.7B while Brazil is way down at $0.1B. So this answers the question by showing that yes, countries definitely receive more of certain types - India gets massive amounts for infrastructure and power, Poland gets almost all the refinancing aid, and air transport is more evenly distributed. Each country has its own pattern of what aid it receives most.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W3d","stdlib":"1"}} 30:"$2f:body"