34:["$","title",null,{"children":"Mini-Project 1: Geographic Financial Aid (Due Oct. 29th) | Ronak Pradhan | 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:T1d2e, const width = 1350; const height = 700; const margin = {top: 85, right: 300, bottom: 90, left: 110}; const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom; const plotWidth = innerWidth - 115; const maxAmount = d3.max(countries, d => Math.max(d.donated, d.received)); const transformAmount = d => Math.log10(d + 1); const x = d3.scaleLinear() .domain([0, transformAmount(maxAmount)]) .range([0, plotWidth]); const y = d3.scaleLinear() .domain([0, transformAmount(maxAmount)]) .range([innerHeight, 0]); const formatAmount = d => { if (d >= 1e9) return `$${(d / 1e9).toFixed(0)}B`; if (d >= 1e6) return `$${(d / 1e6).toFixed(0)}M`; if (d >= 1e3) return `$${(d / 1e3).toFixed(0)}K`; return `$${d.toFixed(0)}`; }; const tickAmounts = [0, 1e6, 1e7, 1e8, 1e9, 1e10, 1e11] .filter(d => d <= maxAmount); const tickPositions = tickAmounts.map(transformAmount); const svg = d3.create("svg") .attr("viewBox", `0 0 ${width} ${height}`) .attr("width", "100%") .style("max-width", "1350px") .style("height", "auto") .style("font-family", "sans-serif") .style("background", "white"); svg.append("text") .attr("x", margin.left + plotWidth / 2) .attr("y", 35) .attr("text-anchor", "middle") .attr("font-size", 22) .attr("font-weight", "bold") .text("Who Gives More Than They Receive?"); svg.append("text") .attr("x", margin.left + plotWidth / 2) .attr("y", 58) .attr("text-anchor", "middle") .attr("font-size", 12) .attr("fill", "#666") .text("Total recorded commitments by country, 1947–2013"); const chart = svg.append("g") .attr("transform", `translate(${margin.left},${margin.top})`); // X axis chart.append("g") .attr("transform", `translate(0,${innerHeight})`) .call(d3.axisBottom(x) .tickValues(tickPositions) .tickFormat(d => formatAmount(Math.pow(10, d) - 1))) .call(g => g.select(".domain").attr("stroke", "#888")) .call(g => g.selectAll(".tick line").attr("stroke", "#ddd")) .call(g => g.selectAll("text").attr("font-size", 10)); // Y axis chart.append("g") .call(d3.axisLeft(y) .tickValues(tickPositions) .tickFormat(d => formatAmount(Math.pow(10, d) - 1))) .call(g => g.select(".domain").attr("stroke", "#888")) .call(g => g.selectAll(".tick line").attr("stroke", "#ddd")) .call(g => g.selectAll("text").attr("font-size", 10)); // Grid lines chart.append("g") .call(d3.axisBottom(x) .tickValues(tickPositions) .tickSize(innerHeight) .tickFormat("")) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line") .attr("stroke", "#eee") .attr("stroke-width", 0.8)); chart.append("g") .call(d3.axisLeft(y) .tickValues(tickPositions) .tickSize(-plotWidth) .tickFormat("")) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line") .attr("stroke", "#eee") .attr("stroke-width", 0.8)); // Equality line chart.append("path") .attr("d", d3.line()([ [x(0), y(0)], [x(transformAmount(maxAmount)), y(transformAmount(maxAmount))] ])) .attr("stroke", "#555") .attr("stroke-width", 1.8) .attr("stroke-dasharray", "6,4") .attr("fill", "none"); // Axis titles chart.append("text") .attr("x", plotWidth / 2) .attr("y", innerHeight + 55) .attr("text-anchor", "middle") .attr("font-size", 13) .attr("font-weight", "bold") .text("Total donated (USD, constant)"); chart.append("text") .attr("transform", "rotate(-90)") .attr("x", -innerHeight / 2) .attr("y", -72) .attr("text-anchor", "middle") .attr("font-size", 13) .attr("font-weight", "bold") .text("Total received (USD, constant)"); // Country points chart.selectAll(".country-point") .data(countries) .join("circle") .attr("class", "country-point") .attr("cx", d => x(transformAmount(d.donated))) .attr("cy", d => y(transformAmount(d.received))) .attr("r", 4.5) .attr("fill", d => d.net >= 0 ? "#2878B5" : "#D95F59") .attr("opacity", 0.8) .attr("stroke", "white") .attr("stroke-width", 0.7) .append("title") .text(d => `${d.country} Donated: ${formatAmount(d.donated)} Received: ${formatAmount(d.received)} Net: ${formatAmount(Math.abs(d.net))} ${d.net >= 0 ? "more donated" : "more received"}`); // Select five countries for labeling const labeled = countries .filter(d => d.donated > 0 && d.received > 0) .sort((a, b) => d3.descending( (a.donated + a.received), (b.donated + b.received) ) ) .slice(0, 5) .map(d => ({ ...d, pointX: x(transformAmount(d.donated)), pointY: y(transformAmount(d.received)) })) .sort((a, b) => d3.ascending(a.pointY, b.pointY)); // Position labels to the right of their points, // separating them vertically to avoid overlap. const labelGap = 19; labeled.forEach((d, i) => { d.labelY = d.pointY; if (i > 0) { d.labelY = Math.max(d.labelY, labeled[i - 1].labelY + labelGap); } }); const maxLabelY = innerHeight - 8; for (let i = labeled.length - 1; i >= 0; i--) { labeled[i].labelY = Math.min(labeled[i].labelY, maxLabelY); if (i < labeled.length - 1) { labeled[i].labelY = Math.min( labeled[i].labelY, labeled[i + 1].labelY - labelGap ); } } // Connector lines chart.selectAll(".label-connector") .data(labeled) .join("line") .attr("class", "label-connector") .attr("x1", d => d.pointX + 5) .attr("y1", d => d.pointY) .attr("x2", d => d.pointX + 11) .attr("y2", d => d.labelY - 3) .attr("stroke", "#777") .attr("stroke-width", 0.8); // Country labels, always to the right of their dots chart.selectAll(".country-label") .data(labeled) .join("text") .attr("class", "country-label") .attr("x", d => d.pointX + 13) .attr("y", d => d.labelY) .attr("text-anchor", "start") .attr("dominant-baseline", "middle") .attr("font-size", 10) .attr("font-weight", 500) .attr("fill", "#222") .text(d => d.country); // Explanatory legend const note = svg.append("g") .attr("transform", `translate(${margin.left + innerWidth + 15},${margin.top + 25})`); note.append("text") .attr("font-size", 14) .attr("font-weight", "bold") .text("How to read this chart"); note.append("line") .attr("x2", 180) .attr("y1", 14) .attr("y2", 14) .attr("stroke", "#ccc"); note.append("circle") .attr("cx", 5) .attr("cy", 36) .attr("r", 4.5) .attr("fill", "#D95F59"); note.append("text") .attr("x", 17) .attr("y", 40) .attr("font-size", 12) .attr("font-weight", "bold") .text("Above the diagonal"); note.append("text") .attr("x", 17) .attr("y", 58) .attr("font-size", 11) .attr("fill", "#555") .text("Receives more than it donates"); note.append("circle") .attr("cx", 5) .attr("cy", 96) .attr("r", 4.5) .attr("fill", "#2878B5"); note.append("text") .attr("x", 17) .attr("y", 100) .attr("font-size", 12) .attr("font-weight", "bold") .text("Below the diagonal"); note.append("text") .attr("x", 17) .attr("y", 118) .attr("font-size", 11) .attr("fill", "#555") .text("Donates more than it receives"); note.append("line") .attr("x2", 180) .attr("y1", 145) .attr("y2", 145) .attr("stroke", "#ccc"); note.append("line") .attr("x2", 25) .attr("y1", 168) .attr("y2", 168) .attr("stroke", "#555") .attr("stroke-width", 1.8) .attr("stroke-dasharray", "6,4"); note.append("text") .attr("x", 33) .attr("y", 172) .attr("font-size", 11) .text("Equal amounts"); display(svg.node()); 3f:Tdc0,# Visualization 1: Comparing Aid Donors and Recipients ## Analysis This scatter plot compares countries based on the total amount of development aid they donated and received between 1947 and 2013. Each point represents a country, with the horizontal axis showing its total aid donated and the vertical axis showing its total aid received. The diagonal reference line represents an equal amount of aid donated and received. Countries below this line donated more than they received and can therefore be considered net donors. Countries above the line received more than they donated and can be considered net recipients. The further a country lies from the diagonal, the greater the relative difference between its donations and receipts. Since both axes use logarithmic scales, the distance reflects a multiplicative difference rather than an absolute difference in dollar amounts. The visualization reveals substantial differences in the roles countries play in international development finance. Countries such as the United States and Japan appear among the prominent donors, while countries such as India and Brazil are prominent recipients. The plot also illustrates that countries can participate in international development finance in both roles, rather than being exclusively donors or recipients. An important observation is that the relationship between donations and receipts varies considerably across countries. Some countries contribute substantially more than they receive, while others receive considerably more than they contribute. Comparing both measures together makes these differences easier to identify than examining either donations or receipts independently. Overall, the visualization highlights the unequal distribution of international development commitments and shows that countries have very different positions within the global development finance system. ## Design Rationale A scatter plot was selected because the objective is to compare two quantitative variables simultaneously: the total amount of aid donated and the total amount received by each country. Position along the horizontal and vertical axes allows viewers to compare both measures and identify the relationship between them. Both axes use logarithmic scales because aid commitments vary significantly in magnitude across countries. A linear scale would make countries with smaller commitment amounts difficult to distinguish, as observations would be concentrated near the origin. Logarithmic scales make it possible to display countries with both relatively small and very large aid totals while preserving their relative ordering. The diagonal reference line represents equal donations and receipts. It provides a clear visual benchmark for distinguishing net donors from net recipients. Countries below the line donate more than they receive, whereas countries above it receive more than they donate. Color reinforces this distinction. Blue represents net donors and red represents net recipients. This diverging color scheme makes the two groups easier to distinguish without requiring viewers to interpret every point individually. Country labels highlight important observations, while tooltips provide exact donated and received amounts when needed. This avoids overcrowding the visualization with labels while still allowing viewers to examine individual countries. Together, the logarithmic axes, reference line, color encoding, and tooltips make the comparison more accessible and informative.40:T1b80,isoCountries.registerLocale(en) // Aggregate donations and receipts const viz2Donated = d3.rollup( aiddata, v => d3.sum(v, d => +d.commitment_amount_usd_constant || 0), d => d.donor ) const viz2Received = d3.rollup( aiddata, v => d3.sum(v, d => +d.commitment_amount_usd_constant || 0), d => d.recipient ) const viz2AidCountries = Array.from( new Set([...viz2Donated.keys(), ...viz2Received.keys()]), country => { const donated = viz2Donated.get(country) ?? 0 const received = viz2Received.get(country) ?? 0 const total = donated + received return { country, donated, received, net: donated - received, balance: total === 0 ? 0 : (donated - received) / total } } ) // Load world geography const viz2WorldData = await d3.json( "https://cdn.jsdelivr.net/npm/world-atlas@2/countries-10m.json" ) const viz2WorldCountries = feature( viz2WorldData, viz2WorldData.objects.countries ).features // Match AidData countries using ISO numeric codes const viz2FeaturesByCode = d3.group( viz2WorldCountries, d => String(d.id).padStart(3, "0") ) const viz2MapData = viz2AidCountries.flatMap(aid => { const alpha3 = isoCountries.getAlpha3Code(aid.country, "en") const numeric = alpha3 ? isoCountries.alpha3ToNumeric(alpha3) : undefined if (!numeric) return [] const code = String(numeric).padStart(3, "0") const features = viz2FeaturesByCode.get(code) ?? [] const selected = features.find( d => d.properties.name.trim().toLowerCase() === aid.country.trim().toLowerCase() ) ?? features.reduce( (largest, d) => !largest || d3.geoArea(d) > d3.geoArea(largest) ? d : largest, null ) return selected ? [{ ...selected, country: aid.country, donated: aid.donated, received: aid.received, net: aid.net, balance: aid.balance }] : [] }) // Map dimensions const viz2Width = 1100 const viz2Height = 680 const viz2Svg = d3.create("svg") .attr("viewBox", [0, 0, viz2Width, viz2Height]) .attr("width", "100%") .style("max-width", "1100px") .style("height", "auto") .style("font-family", "sans-serif") .style("background", "white") const viz2Projection = d3.geoNaturalEarth1() .fitExtent( [[25, 105], [1075, 535]], { type: "FeatureCollection", features: viz2WorldCountries } ) const viz2Path = d3.geoPath(viz2Projection) // Get the projected globe dimensions const viz2GlobeBounds = viz2Path.bounds({type: "Sphere"}) const viz2GlobeX = viz2GlobeBounds[0][0] const viz2GlobeY = viz2GlobeBounds[0][1] const viz2GlobeWidth = viz2GlobeBounds[1][0] - viz2GlobeX const viz2GlobeHeight = viz2GlobeBounds[1][1] - viz2GlobeY // Aid balance color scale const viz2Color = d3.scaleDiverging( [-1, 0, 1], d3.interpolateRdBu ) // Title viz2Svg.append("text") .attr("x", 35) .attr("y", 38) .attr("font-size", 25) .attr("font-weight", "bold") .text("Geography of International Aid") viz2Svg.append("text") .attr("x", 35) .attr("y", 65) .attr("font-size", 13) .attr("fill", "#555") .text("Net aid position by country | AidData commitments, 1947–2013") // Ocean base fitted to the globe viz2Svg.append("ellipse") .attr("cx", viz2GlobeX + viz2GlobeWidth / 2) .attr("cy", viz2GlobeY + viz2GlobeHeight / 2) .attr("rx", viz2GlobeWidth / 2) .attr("ry", viz2GlobeHeight / 2) .attr("fill", "#8ECAE6") // Graticule viz2Svg.append("path") .datum(d3.geoGraticule10()) .attr("d", viz2Path) .attr("fill", "none") .attr("stroke", "#B5D5E3") .attr("stroke-width", 0.45) // All countries in white viz2Svg.append("g") .selectAll("path") .data(viz2WorldCountries) .join("path") .attr("d", viz2Path) .attr("fill", "#FFFFFF") // Countries with AidData records viz2Svg.append("g") .selectAll("path") .data(viz2MapData) .join("path") .attr("d", viz2Path) .attr("fill", d => viz2Color(d.balance)) .append("title") .text(d => `${d.country} Donated: $${d3.format(",.0f")(d.donated)} Received: $${d3.format(",.0f")(d.received)} Net: $${d3.format(",.0f")(d.net)} Relative balance: ${d3.format(".1%")(d.balance)}` ) // Country boundaries const viz2CountryBoundaries = topoMesh( viz2WorldData, viz2WorldData.objects.countries ) viz2Svg.append("path") .datum(viz2CountryBoundaries) .attr("d", viz2Path) .attr("fill", "none") .attr("stroke", "#89969D") .attr("stroke-width", 0.7) .attr("stroke-linejoin", "round") // Globe outline viz2Svg.append("path") .datum({type: "Sphere"}) .attr("d", viz2Path) .attr("fill", "none") .attr("stroke", "#6BAAC8") .attr("stroke-width", 0.9) // Aid balance legend const viz2LegendX = 340 const viz2LegendY = 590 const viz2LegendWidth = 420 const viz2LegendHeight = 14 const viz2GradientId = "viz2-final-aid-gradient" const viz2Gradient = viz2Svg.append("defs") .append("linearGradient") .attr("id", viz2GradientId) .attr("x1", "0%") .attr("x2", "100%") d3.range(0, 1.01, 0.01).forEach(t => { viz2Gradient.append("stop") .attr("offset", `${t * 100}%`) .attr("stop-color", viz2Color(-1 + 2 * t)) }) viz2Svg.append("text") .attr("x", viz2LegendX + viz2LegendWidth / 2) .attr("y", viz2LegendY - 18) .attr("text-anchor", "middle") .attr("font-size", 13) .attr("font-weight", "bold") .text("Relative aid balance") viz2Svg.append("rect") .attr("x", viz2LegendX) .attr("y", viz2LegendY) .attr("width", viz2LegendWidth) .attr("height", viz2LegendHeight) .attr("fill", `url(#${viz2GradientId})`) const viz2LegendScale = d3.scaleLinear() .domain([-1, 1]) .range([viz2LegendX, viz2LegendX + viz2LegendWidth]) viz2Svg.append("g") .attr("transform", `translate(0, ${viz2LegendY + viz2LegendHeight})`) .call( d3.axisBottom(viz2LegendScale) .tickValues([-1, -0.5, 0, 0.5, 1]) .tickFormat(d3.format(".0%")) .tickSize(5) ) .call(g => g.select(".domain").remove()) viz2Svg.append("text") .attr("x", viz2LegendX) .attr("y", viz2LegendY + 58) .attr("font-size", 12) .attr("fill", "#555") .text("Net recipient") viz2Svg.append("text") .attr("x", viz2LegendX + viz2LegendWidth) .attr("y", viz2LegendY + 58) .attr("text-anchor", "end") .attr("font-size", 12) .attr("fill", "#555") .text("Net donor") // No-data legend viz2Svg.append("rect") .attr("x", 35) .attr("y", 630) .attr("width", 12) .attr("height", 12) .attr("fill", "#FFFFFF") .attr("stroke", "#89969D") .attr("stroke-width", 0.7) viz2Svg.append("text") .attr("x", 54) .attr("y", 640) .attr("font-size", 11) .attr("fill", "#555") .text("No matched AidData records") // Water legend viz2Svg.append("rect") .attr("x", 200) .attr("y", 630) .attr("width", 12) .attr("height", 12) .attr("fill", "#8ECAE6") .attr("stroke", "#6BAAC8") .attr("stroke-width", 0.7) viz2Svg.append("text") .attr("x", 220) .attr("y", 640) .attr("font-size", 11) .attr("fill", "#555") .text("Water") display(viz2Svg.node())41:T1194,# Visualization 2: Geography of International Aid ## Analysis The world map examines the geographical distribution of countries according to their relative positions as aid donors and recipients between 1947 and 2013. Unlike the first visualization, which compares the absolute amounts donated and received, this map focuses on whether countries primarily provide or receive international development commitments. The map reveals geographical patterns in donor and recipient roles. Several countries in North America and Europe appear as net donors, while countries in parts of South America and South Asia appear predominantly as net recipients. However, these patterns are not uniform across entire regions. Countries within the same geographical area can have different positions in international development finance. The map also helps identify differences between neighboring countries. Countries that share geographical borders or belong to the same broader region do not necessarily have similar donor and recipient profiles. This suggests that geographical proximity alone does not determine a country's role in international aid. The relative balance measure also helps distinguish between countries that are predominantly donors and those that are predominantly recipients. Values closer to +1 indicate that a country donates considerably more than it receives, while values closer to -1 indicate that it receives considerably more than it donates. Values closer to zero indicate a more balanced relationship between donations and receipts. Overall, the map provides a geographical perspective on international development finance. It complements the scatter plot by revealing regional patterns and differences between neighboring countries that are not immediately apparent when looking only at the total amounts donated and received. ## Design Rationale A choropleth map was selected because the question focuses on the geographical distribution of donor and recipient roles. Representing the data using country boundaries makes it easier to identify regional patterns and compare neighboring countries. Rather than encoding absolute aid volume, the map uses a normalized relative aid balance calculated as: Relative Aid Balance = (Total Donated − Total Received) / (Total Donated + Total Received) The resulting value ranges from -1 to +1. Positive values indicate that a country donates more than it receives, negative values indicate that it receives more than it donates, and values close to zero indicate a more balanced position. A diverging red-to-blue color scale was selected to represent these opposing roles. Red represents net recipients, blue represents net donors, and lighter colors near the midpoint represent countries with a more balanced position. This encoding makes the distinction between donor and recipient countries immediately visible. Using relative balance instead of absolute aid volume is appropriate for this visualization because the objective is to compare countries based on their donor and recipient roles. If absolute amounts were used, countries with very large commitment totals could dominate the color scale, making it harder to identify the relative positions of other countries. The relative measure allows countries with different levels of total aid activity to be compared more consistently. Countries without matched AidData records are displayed in a neutral color, while the water is visually distinguished from the land. Country boundaries are retained so that neighboring countries remain identifiable even when they have no associated records. Tooltips provide additional information about each matched country's total donations, total receipts, net amount, and relative aid balance. The geographic matching process successfully matched 45 of the 47 distinct countries in the AidData totals, representing approximately 95.7% coverage. Two country entries, Slovak Republic and Korea, could not be matched and therefore are not represented with their corresponding aid values on the map. This is a limitation of the geographical matching process and should be considered when interpreting the results. The map and scatter plot serve complementary purposes. The scatter plot communicates the absolute scale of donations and receipts, while the map emphasizes the geographical distribution of relative donor and recipient positions. Together, they provide a more complete understanding of international development finance.42:T20ee,// Identify the five most frequent purposes across the full dataset const viz3PurposeCounts = d3.rollup( aiddata.filter(d => d.coalesced_purpose_name), v => v.length, d => String(d.coalesced_purpose_name).trim() ) const viz3TopPurposes = Array.from( viz3PurposeCounts, ([purpose, count]) => ({purpose, count}) ) .sort((a, b) => d3.descending(a.count, b.count)) .slice(0, 5) const viz3PurposeNames = viz3TopPurposes.map(d => d.purpose) // Keep records with both recipient and purpose const viz3ValidData = aiddata .filter(d => d.recipient && d.coalesced_purpose_name) .map(d => ({ ...d, recipient: String(d.recipient).trim(), purpose: String(d.coalesced_purpose_name).trim(), amount: +d.commitment_amount_usd_constant || 0 })) // Include every recipient country const viz3Countries = Array.from( new Set(viz3ValidData.map(d => d.recipient)) ) // Aggregate commitment counts and amounts const viz3Aggregated = d3.rollups( viz3ValidData.filter(d => viz3PurposeNames.includes(d.purpose)), v => ({ count: v.length, amount: d3.sum(v, d => d.amount) }), d => d.recipient, d => d.purpose ) const viz3PurposeMap = new Map() viz3Aggregated.forEach(([country, purposes]) => { purposes.forEach(([purpose, values]) => { viz3PurposeMap.set(`${country}|${purpose}`, values) }) }) // Create the complete country-purpose matrix const viz3HeatmapData = viz3Countries.flatMap(country => viz3PurposeNames.map(purpose => { const values = viz3PurposeMap.get(`${country}|${purpose}`) return { country, purpose, count: values?.count ?? 0, amount: values?.amount ?? 0, hasData: !!values } }) ) // Order countries by total commitment amount across the five purposes const viz3CountryTotals = new Map( viz3Countries.map(country => [ country, d3.sum( viz3PurposeNames, purpose => viz3PurposeMap.get(`${country}|${purpose}`)?.amount ?? 0 ) ]) ) viz3Countries.sort((a, b) => d3.descending( viz3CountryTotals.get(a), viz3CountryTotals.get(b) ) || d3.ascending(a, b) ) // Yellow-orange-red logarithmic color scale const viz3PositiveAmounts = viz3HeatmapData .filter(d => d.amount > 0) .map(d => d.amount) const viz3MinAmount = d3.min(viz3PositiveAmounts) ?? 1 const viz3MaxAmount = d3.max(viz3PositiveAmounts) ?? 10 const viz3ScaleMax = viz3MaxAmount > viz3MinAmount ? viz3MaxAmount : viz3MinAmount * 1.01 const viz3Color = d3.scaleSequentialLog( [viz3MinAmount, viz3ScaleMax], d3.interpolateYlOrRd ) // Chart dimensions const viz3Width = 1100 const viz3Margin = { top: 285, right: 35, bottom: 115, left: 190 } const viz3CellHeight = 22 const viz3Height = viz3Margin.top + viz3Countries.length * viz3CellHeight + viz3Margin.bottom const viz3Svg = d3.create("svg") .attr("viewBox", [0, 0, viz3Width, viz3Height]) .attr("width", "100%") .style("max-width", "1100px") .style("height", "auto") .style("font-family", "sans-serif") .style("background", "white") // Scales const viz3X = d3.scaleBand() .domain(viz3PurposeNames) .range([ viz3Margin.left, viz3Width - viz3Margin.right ]) .padding(0.06) const viz3Y = d3.scaleBand() .domain(viz3Countries) .range([ viz3Margin.top, viz3Margin.top + viz3Countries.length * viz3CellHeight ]) .padding(0.08) // Title and subtitle viz3Svg.append("text") .attr("x", viz3Margin.left) .attr("y", 38) .attr("font-size", 25) .attr("font-weight", "bold") .text("Geographic Distribution of Aid Purposes") viz3Svg.append("text") .attr("x", viz3Margin.left) .attr("y", 65) .attr("font-size", 13) .attr("fill", "#555") .text("Total aid commitments by recipient country and purpose | 1947–2013") viz3Svg.append("text") .attr("x", viz3Margin.left) .attr("y", 105) .attr("font-size", 12) .attr("fill", "#555") .text("Rows: recipient countries | Columns: five most frequent aid purposes") // Purpose heading, separated from the rotated labels viz3Svg.append("text") .attr("x", viz3Margin.left + (viz3Width - viz3Margin.left - viz3Margin.right) / 2) .attr("y", 155) .attr("text-anchor", "middle") .attr("font-size", 12) .attr("font-weight", "bold") .text("Top 5 purposes by number of commitments") // Recipient country heading viz3Svg.append("text") .attr("x", viz3Margin.left - 10) .attr("y", viz3Margin.top - 18) .attr("text-anchor", "end") .attr("font-size", 11) .attr("font-weight", "bold") .text("Recipient country") // Purpose labels viz3Svg.append("g") .attr("transform", `translate(0, ${viz3Margin.top - 8})`) .call(d3.axisTop(viz3X).tickSize(0)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll("text") .attr("font-size", 10) .attr("text-anchor", "start") .attr("transform", "rotate(-35)") .attr("dx", "0.4em") .attr("dy", "-0.3em") ) // Country labels viz3Svg.append("g") .attr("transform", `translate(${viz3Margin.left - 8}, 0)`) .call(d3.axisLeft(viz3Y).tickSize(0)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll("text").attr("font-size", 10)) // Heatmap cells viz3Svg.append("g") .selectAll("rect") .data(viz3HeatmapData) .join("rect") .attr("x", d => viz3X(d.purpose)) .attr("y", d => viz3Y(d.country)) .attr("width", viz3X.bandwidth()) .attr("height", viz3Y.bandwidth()) .attr("rx", 2) .attr("fill", d => { if (!d.hasData) return "#E5E5E5" if (d.amount <= 0) return "#FFF1B8" return viz3Color(d.amount) }) .attr("stroke", "white") .attr("stroke-width", 1) .append("title") .text(d => `${d.country} Purpose: ${d.purpose} Number of commitments: ${d3.format(",")(d.count)} Total committed amount: $${d3.format(",.0f")(d.amount)}` ) // Legend const viz3LegendX = viz3Margin.left const viz3LegendY = viz3Height - 65 const viz3LegendWidth = 320 const viz3LegendHeight = 14 const viz3GradientId = "viz3-final-purpose-gradient" const viz3Defs = viz3Svg.append("defs") const viz3Gradient = viz3Defs.append("linearGradient") .attr("id", viz3GradientId) .attr("x1", "0%") .attr("x2", "100%") d3.range(0, 1.01, 0.01).forEach(t => { const amount = Math.exp( Math.log(viz3MinAmount) + t * (Math.log(viz3ScaleMax) - Math.log(viz3MinAmount)) ) viz3Gradient.append("stop") .attr("offset", `${t * 100}%`) .attr("stop-color", viz3Color(amount)) }) viz3Svg.append("text") .attr("x", viz3LegendX) .attr("y", viz3LegendY - 12) .attr("font-size", 11) .attr("font-weight", "bold") .text("Total commitment amount (USD, logarithmic scale)") viz3Svg.append("rect") .attr("x", viz3LegendX) .attr("y", viz3LegendY) .attr("width", viz3LegendWidth) .attr("height", viz3LegendHeight) .attr("fill", `url(#${viz3GradientId})`) // Show actual minimum, intermediate powers of ten, and actual maximum const viz3PowerTicks = d3.range( Math.ceil(Math.log10(viz3MinAmount)), Math.floor(Math.log10(viz3MaxAmount)) + 1 ).map(power => 10 ** power) const viz3LegendTicks = Array.from( new Set([ viz3MinAmount, ...viz3PowerTicks.filter( d => d > viz3MinAmount && d < viz3MaxAmount ), viz3MaxAmount ]) ).sort(d3.ascending) const viz3LegendScale = d3.scaleLog() .domain([viz3MinAmount, viz3ScaleMax]) .range([ viz3LegendX, viz3LegendX + viz3LegendWidth ]) const viz3FormatAmount = d => { if (d >= 1e9) return `$${(d / 1e9).toFixed(2).replace(/\.?0+$/, "")}B` if (d >= 1e6) return `$${(d / 1e6).toFixed(2).replace(/\.?0+$/, "")}M` if (d >= 1e3) return `$${(d / 1e3).toFixed(2).replace(/\.?0+$/, "")}K` return `$${d3.format(",.0f")(d)}` } viz3Svg.append("g") .attr("transform", `translate(0, ${viz3LegendY + viz3LegendHeight})`) .call( d3.axisBottom(viz3LegendScale) .tickValues(viz3LegendTicks) .tickFormat(viz3FormatAmount) .tickSize(4) ) .call(g => g.select(".domain").remove()) .call(g => g.selectAll("text").attr("font-size", 10)) // Gray means no aid commitments for this purpose viz3Svg.append("rect") .attr("x", viz3LegendX + 390) .attr("y", viz3LegendY) .attr("width", 14) .attr("height", 14) .attr("fill", "#E5E5E5") .attr("stroke", "#BBBBBB") viz3Svg.append("text") .attr("x", viz3LegendX + 412) .attr("y", viz3LegendY + 11) .attr("font-size", 11) .attr("fill", "#555") .text("Gray = no aid commitments for this purpose") display(viz3Svg.node())43:T12fd,# Visualization 3: Geographic Distribution of Aid Purposes ## Analysis This heatmap examines how international aid commitments are distributed across recipient countries for the five most frequent aid purposes between 1947 and 2013. The five categories are Sectors not specified, Social welfare and services, Strengthening civil society, Higher education, and Multisector aid. The visualization reveals that the distribution of aid commitments varies across both recipient countries and purposes. India, Colombia, South Africa, Thailand, Brazil, and Chile show relatively high commitment amounts across several of the selected categories. However, the intensity of commitments differs between countries and purposes, suggesting that international aid is not distributed uniformly. Some countries show stronger commitment amounts in particular categories than others. For example, Colombia has particularly high commitments in Social welfare and services, while India shows substantial commitments across several of the five purpose categories. This suggests that recipient countries have different profiles of aid allocation depending on the type of assistance. The heatmap also highlights countries with no recorded commitments in certain purpose categories. For example, the United States has gray cells in some categories despite having commitments in others. These cells indicate the absence of recorded commitments for that particular country-purpose combination among the five selected purposes. They do not necessarily mean that the country received no international aid overall. Overall, the visualization demonstrates that the geographical distribution of international aid varies by purpose. Some countries receive substantial commitments across multiple categories, while others have more limited or concentrated commitments in the five most frequent purposes. ## Design Rationale A heatmap was selected because it allows comparisons across two categorical dimensions: recipient countries and aid purposes. Countries are arranged as rows, while the five most frequent commitment purposes are represented as columns. This makes it easier to identify patterns across countries and compare how commitment amounts vary between purposes. The five purposes were selected based on the number of commitments recorded in each category across the dataset. However, the color intensity represents the total amount of aid committed in USD for each country-purpose combination. This distinction allows the visualization to focus on the most frequently occurring purposes while also showing the financial scale of commitments associated with them. A yellow-to-orange-to-red sequential color gradient represents commitment amounts. Lighter yellow shades indicate smaller amounts, while darker red shades indicate larger amounts. A logarithmic scale is used because commitment amounts vary considerably across countries and purposes. This allows smaller commitment amounts to remain distinguishable alongside much larger amounts. Gray represents country-purpose combinations with no recorded aid commitments. Countries are ordered by their total commitment amounts across the five selected purposes, making it easier to identify the largest recipients within these categories. Tooltips provide the recipient country, aid purpose, number of commitments, and total committed amount, allowing viewers to inspect individual cells without overcrowding the chart. The legend communicates the range of commitment amounts using a logarithmic scale, while the separate gray indicator clarifies the meaning of cells without recorded commitments. Together, these design choices make it possible to compare both the distribution and magnitude of aid commitments across recipient countries and purposes. ## Interpretation and Limitations The visualization considers only the five most frequent aid purposes rather than every purpose in the dataset. Therefore, a country may have no recorded commitments in one of the displayed categories while still receiving aid for other purposes. Additionally, the five purposes are selected by the number of commitments, whereas the color intensity represents the total amount committed in USD. These are two different measures and should be interpreted separately. A purpose can have many commitments without necessarily having the largest total financial value. Finally, the dataset records aid commitments rather than verified disbursements. The visualization therefore describes recorded financial commitments and should not be interpreted as evidence that all committed funds were actually disbursed. Overall, the heatmap demonstrates that aid commitments are distributed differently across countries and purposes, highlighting differences in the types and financial scale of assistance received by recipient countries.44:[{"id":"09040dddbda03374a466600047ccbc70c46e6853884eb725db2141c566ca1b78fb7cc935096e8d5468c21e8df215e73fc49cdaaf7e2f1f89139793da25be02b2","href":"https://static.observableusercontent.com/files/09040dddbda03374a466600047ccbc70c46e6853884eb725db2141c566ca1b78fb7cc935096e8d5468c21e8df215e73fc49cdaaf7e2f1f89139793da25be02b2","name":"aiddata-countries-only.csv","type":"text/csv","lastModified":1793308043844,"size":8760387}] 38:{"id":"9b009cd69c4669b7","slug":"mini-project-1-geographic-financial-aid-due-oct-29th","title":"Mini-Project 1: Geographic Financial Aid (Due Oct. 29th)","thumbnail":"ed1a9e0195532abcf95441a2f09d4743b8d45a43bcf98e7d1320ee0ec717ed73","access_level":"public","create_time":"$D2026-10-29T20:54:37.990Z","update_time":"$D2026-10-30T05:35:09.119Z","view_time":null,"first_public_time":"$D2026-10-30T05:17:59.434Z","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":"9571c48f002df9ca","login":"ronak-pradhan","name":"Ronak Pradhan","avatar_url":"https://avatars-next.observableusercontent.com/df693ceb713b48092db263e4b4c7832b5eb20bb1a1a68876672633ec3103e2dd","tier":"free_2026","bio":"","followed_by_you":false,"follows_you":false},"version":359,"publish_version":359,"role":null,"authored":false,"authors":[{"type":"individual","id":"f7d2eb023aff1992","login":"ronak-pradhan","name":"Ronak Pradhan","avatar_url":"https://avatars-next.observableusercontent.com/df693ceb713b48092db263e4b4c7832b5eb20bb1a1a68876672633ec3103e2dd","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"9571c48f002df9ca","login":"ronak-pradhan","name":"Ronak Pradhan","avatar_url":"https://avatars-next.observableusercontent.com/df693ceb713b48092db263e4b4c7832b5eb20bb1a1a68876672633ec3103e2dd","tier":"free_2026","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":67,"value":"import {Legend, Swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"import isoCountries from \"npm:i18n-iso-countries@7.14.0\"\nimport en from \"npm:i18n-iso-countries@7.14.0/langs/en.json\" with {type: \"json\"}\nimport {feature, mesh as topoMesh} from \"npm:topojson-client@3\"","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"const aiddata = await FileAttachment(\"aiddata-countries-only.csv\").csv({typed: true});\n\nconst donated = d3.rollup(\n aiddata,\n v => d3.sum(v, d => +d.commitment_amount_usd_constant || 0),\n d => d.donor\n);\n\nconst received = d3.rollup(\n aiddata,\n v => d3.sum(v, d => +d.commitment_amount_usd_constant || 0),\n d => d.recipient\n);\n\nconst countries = Array.from(new Set([...donated.keys(), ...received.keys()]), country => {\n const donatedAmount = donated.get(country) ?? 0;\n const receivedAmount = received.get(country) ?? 0;\n\n return {\n country,\n donated: donatedAmount,\n received: receivedAmount,\n total: donatedAmount + receivedAmount,\n net: donatedAmount - receivedAmount\n };\n});","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":87,"value":"$3f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"# Visualization 2","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"$40","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"$41","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"# Visualization 3","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"$42","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":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"# GenAI Declaration\nGenerative AI was used to assist with D3.js coding and debugging. All outputs were reviewed by me","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W44","stdlib":"2"}} 33:null