34:["$","title",null,{"children":"Mini-Project 1: Geographic Financial Aid (Due Oct. 29th) | Joe Perinchery | 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:T25d4,{ // Prepare data const data = countryTotals .map(d => ({ ...d, total: d.donated + d.received, net: d.donated - d.received, status: d.donated > d.received ? "Net donor" : d.received > d.donated ? "Net recipient" : "Balanced" })) .filter(d => d.donated >= 0 && d.received >= 0); // Dimensions const width = 920; const height = 640; const margin = { top: 80, right: 50, bottom: 75, left: 95 }; // Formatters const formatMoney = value => { const a = Math.abs(value); if (a >= 1e9) return `$${(value / 1e9).toFixed(2)}B`; if (a >= 1e6) return `$${(value / 1e6).toFixed(2)}M`; return `$${value.toFixed(0)}`; }; const formatAxis = v => { if (v === 0) return "$0"; if (v >= 1e9) return `$${+(v / 1e9).toFixed(1)}B`; return `$${+(v / 1e6).toFixed(0)}M`; }; const maxValue = d3.max(data, d => Math.max(d.donated, d.received)); // Scales: SAME symlog scale + constant on both axes so y = x stays valid const SYMLOG_C = 1e8; const x = d3.scaleSymlog() .constant(SYMLOG_C) .domain([0, maxValue]) .range([margin.left, width - margin.right]); const y = d3.scaleSymlog() .constant(SYMLOG_C) .domain([0, maxValue]) .range([height - margin.bottom, margin.top]); const tickCandidates = [0, 1e8, 1e9, 5e9, 1e10, 2e10, 5e10, 1e11, 1.5e11]; const ticks = tickCandidates.filter(t => t <= maxValue * 1.05); const r = d3.scaleSqrt() .domain([0, d3.max(data, d => d.total)]) .range([4, 16]); const colors = { "Net donor": "#08519c", "Net recipient": "#238b45", "Balanced": "#999999" }; const color = d => colors[d.status]; // Wrapper + SVG + tooltip const wrapper = d3.create("div") .style("position", "relative") .style("width", "100%") .style("max-width", `${width}px`); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .style("max-width", "100%") .style("height", "auto") .style("font-family", "sans-serif"); const tooltip = wrapper.append("div") .style("position", "absolute") .style("visibility", "hidden") .style("background", "white") .style("padding", "10px 12px") .style("border", "1px solid #ddd") .style("border-radius", "8px") .style("box-shadow", "0 4px 12px rgba(0,0,0,0.15)") .style("font-family", "sans-serif") .style("font-size", "13px") .style("pointer-events", "none") .style("z-index", "10"); // Title + subtitle svg.append("text") .attr("x", width / 2).attr("y", 28) .attr("text-anchor", "middle") .attr("font-size", 20).attr("font-weight", "bold") .text("Financial Aid Donated vs. Received by Country"); svg.append("text") .attr("x", width / 2).attr("y", 48) .attr("text-anchor", "middle") .attr("font-size", 12).attr("fill", "#666") .text("Total commitments, 1947–2013, constant USD. Dot size = donated + received. Both axes use the same symlog scale."); // Gridlines svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).tickValues(ticks) .tickSize(-(height - margin.top - margin.bottom)).tickFormat("")) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").attr("stroke", "#e6e6e6")); svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).tickValues(ticks) .tickSize(-(width - margin.left - margin.right)).tickFormat("")) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").attr("stroke", "#e6e6e6")); // Equality line y = x const x0 = x(0), y0 = y(0), x1 = x(maxValue), y1 = y(maxValue); svg.append("line") .attr("x1", x0).attr("y1", y0).attr("x2", x1).attr("y2", y1) .attr("stroke", "#777").attr("stroke-width", 1.5) .attr("stroke-dasharray", "6,4"); // Diagonal label, rotated along the line, with a white halo const angle = Math.atan2(y1 - y0, x1 - x0) * 180 / Math.PI; const dlx = x0 + (x1 - x0) * 0.72; const dly = y0 + (y1 - y0) * 0.72; svg.append("text") .attr("transform", `translate(${dlx},${dly - 8}) rotate(${angle})`) .attr("text-anchor", "middle") .attr("font-size", 11).attr("fill", "#555") .attr("stroke", "white").attr("stroke-width", 4) .attr("paint-order", "stroke") .text("Donated = Received"); // Axes svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).tickValues(ticks).tickFormat(formatAxis)) .call(g => g.selectAll("text").attr("dy", "1.1em")); svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).tickValues(ticks).tickFormat(formatAxis)) .call(g => g.selectAll("text").attr("dx", "-4")); // Axis labels svg.append("text") .attr("x", width / 2).attr("y", height - 18) .attr("text-anchor", "middle").attr("font-size", 13) .text("Total Donated (constant USD, symlog scale)"); svg.append("text") .attr("transform", `translate(22, ${height / 2}) rotate(-90)`) .attr("text-anchor", "middle").attr("font-size", 13) .text("Total Received (constant USD, symlog scale)"); // Draw big dots first so small ones stay on top const sorted = [...data].sort((a, b) => b.total - a.total); svg.append("g") .selectAll("circle") .data(sorted) .join("circle") .attr("cx", d => x(d.donated)) .attr("cy", d => y(d.received)) .attr("r", d => r(d.total)) .attr("fill", d => color(d)) .attr("fill-opacity", 0.7) .attr("stroke", "#333") .attr("stroke-width", 0.7) .on("mouseover", function (event, d) { d3.select(this).attr("stroke-width", 1.8).attr("fill-opacity", 1); tooltip .style("visibility", "visible") .html(` ${d.country}

Donated: ${formatMoney(d.donated)}

Received: ${formatMoney(d.received)}

Total activity: ${formatMoney(d.total)}

Net (donated − received): ${formatMoney(d.net)}

${d.status}

`); }) .on("mousemove", function (event) { const [mx, my] = d3.pointer(event, wrapper.node()); tooltip .style("left", `${Math.min(mx + 15, width - 240)}px`) .style("top", `${Math.max(my - 20, 0)}px`); }) .on("mouseout", function () { d3.select(this).attr("stroke-width", 0.7).attr("fill-opacity", 0.7); tooltip.style("visibility", "hidden"); }); // Labels: union of top 8 by total activity and top 10 by |net|, with overlap check const overflows = d => x(d.donated) + r(d.total) + 4 + d.country.length * 6.2 > width - 10; const labelX = d => overflows(d) ? x(d.donated) - r(d.total) - 4 : x(d.donated) + r(d.total) + 4; const labelY = d => y(d.received) - r(d.total) - 2; const candidates = [ ...new Set([ ...[...data].sort((a, b) => b.total - a.total).slice(0, 10), ...[...data].sort((a, b) => Math.abs(b.net) - Math.abs(a.net)).slice(0, 10) ]) ].sort((a, b) => b.total - a.total); const placed = []; const labels = candidates.filter(d => { const w = d.country.length * 6.2; const lx = overflows(d) ? labelX(d) - w : labelX(d); const ly = labelY(d); const clash = placed.some(p => Math.abs(p.y - ly) < 13 && lx < p.x + p.w && p.x < lx + w); if (!clash) placed.push({ x: lx, y: ly, w }); return !clash; }); svg.append("g") .selectAll("text.point-label") .data(labels) .join("text") .attr("class", "point-label") .attr("x", labelX) .attr("y", labelY) .attr("text-anchor", d => overflows(d) ? "end" : "start") .attr("font-size", 11).attr("fill", "#222") .attr("stroke", "white").attr("stroke-width", 3) .attr("paint-order", "stroke") .style("pointer-events", "none") .text(d => d.country); // Legend (compact, top-middle, above the diagonal) const legend = svg.append("g") .attr("transform", `translate(${width - 420}, ${margin.top + 8})`); legend.append("rect") .attr("x", -10).attr("y", -14) .attr("width", 215).attr("height", 92) .attr("fill", "white").attr("fill-opacity", 0.9) .attr("stroke", "#ddd").attr("rx", 6); // Row 1: colors side by side ["Net donor", "Net recipient"].forEach((s, i) => { const ox = i * 90; legend.append("circle") .attr("cx", ox).attr("cy", 0).attr("r", 5) .attr("fill", colors[s]).attr("fill-opacity", 0.7) .attr("stroke", "#333").attr("stroke-width", 0.7); legend.append("text") .attr("x", ox + 11).attr("y", 4) .attr("font-size", 11).text(s); }); // Row 2: size legend (two reference circles) legend.append("text") .attr("x", -4).attr("y", 24) .attr("font-size", 10).attr("fill", "#555") .text("Dot size = donated + received"); const sizeVals = [1e10, 1e11].filter(v => v <= d3.max(data, d => d.total)); let cx = 10; sizeVals.forEach(v => { legend.append("circle") .attr("cx", cx + r(v)).attr("cy", 58 - r(v)) .attr("r", r(v)) .attr("fill", "none").attr("stroke", "#555"); legend.append("text") .attr("x", cx + r(v)).attr("y", 72) .attr("text-anchor", "middle") .attr("font-size", 9).attr("fill", "#555") .text(formatAxis(v)); cx += r(v) * 2 + 22; }); // Display wrapper.node().appendChild(svg.node()); display(wrapper.node()); }3f:Ta78,### 1. How do countries compare in terms of how much they donate and receive? The scatter plot reveals substantial differences in the financial aid commitments made and received by countries between 1973 and 2013. The **United States is the largest donor**, with approximately **$116.18 billion** in commitments, followed closely by **Japan ($114.18 billion)** and **Germany ($47.22 billion)**. In contrast, **India is the largest recipient**, receiving approximately **$133.98 billion**, followed by **Thailand ($49.04 billion)** and **Brazil ($36.61 billion)**. These differences indicate that financial aid activity is unevenly distributed across countries, with several countries accounting for particularly large donation or receipt totals. ### 2. Are there countries that donate significantly more than they receive? **Yes.** Several countries exhibit substantial differences between their donated and received amounts. - **United States:** Donated $116.18B compared with $104.52M received. - **Japan:** Donated $114.18B compared with $2.08B received. - **Germany:** Donated $47.22B while receiving only a comparatively small amount. These countries appear below the dashed equality line, indicating that their outgoing financial aid commitments substantially exceed their incoming commitments. ### 3. Are there countries that receive significantly more than they donate? **Yes.** Several countries exhibit the opposite pattern. - **India:** Received $133.98B, with no outgoing donations recorded in the dataset. - **Thailand:** Received $49.04B while donating approximately $25,461. - **Brazil:** Received $36.61B while donating approximately $1.13M. These countries appear above the equality line, indicating that their incoming financial aid commitments significantly exceed their outgoing commitments. ### 4. Overall interpretation The visualization reveals a pronounced distinction between major net donors and major net recipients. Countries such as the United States and Japan occupy the donation-heavy region of the scatter plot, whereas India, Thailand, and Brazil occupy the receipt-heavy region. The dashed equality line provides a visual reference for comparing these roles. The positions of major donors and recipients on opposite sides of the line reveal substantial differences between their donated and received commitments, with exact amounts available through the interactive tooltips. Overall, the visualization reveals significant differences in financial aid activity across countries. Several countries function predominantly as donors, while others function predominantly as recipients, rather than participating equally in both roles.40:T676,A scatter plot was selected because the objective is to compare two quantitative variables: the total amount of financial aid donated and received by each country. Unlike a bar chart, which primarily emphasizes rankings, the scatter plot reveals the relationship between these variables and makes it possible to identify countries with substantially different donation and receipt amounts. The horizontal axis represents donations, while the vertical axis represents receipts. A dashed equality line provides a visual reference: countries above the line receive more than they donate, whereas countries below the line donate more than they receive. Blue and green distinguish net donors from net recipients, allowing these patterns to be identified without relying solely on position. Circle area represents the combined value of financial aid donated and received, making countries with greater overall financial aid activity more visually prominent. Both axes use the same symmetric logarithmic (symlog) transformation because financial aid amounts vary considerably across countries. This prevents smaller values from becoming excessively compressed while preserving zero values. However, because the scale is nonlinear, equal visual distances do not represent equal monetary differences. Interactive tooltips provide precise monetary amounts, while selective labels highlight important countries without overcrowding the chart. Overall, this design is effective because it communicates the relationship between donations and receipts, identifies major imbalances, and allows readers to explore individual countries within a single visualization.41:T19cf, { // 1. Load world GeoJSON const geo = await FileAttachment("world.json").json(); // 2. Country name corrections const aliases = { "United States": "USA", "United Kingdom": "England", "Slovak Republic": "Slovakia", "Korea": "South Korea" }; // 3. Financial aid lookup const aidLookup = new Map( countryTotals.map(d => [ aliases[d.country] || d.country, d ]) ); // 4. Keep all country boundaries except Antarctica const countries = geo.features.filter(d => d.geometry != null && d.properties.name !== "Antarctica" ); const collection = { type: "FeatureCollection", features: countries }; // 5. Dimensions and projection const width = 900; const height = 550; const projection = d3.geoNaturalEarth1() .fitExtent( [[25, 55], [width - 25, height - 125]], collection ); const path = d3.geoPath(projection); // 6. Diverging color scale // Green = receives more, Blue = donates more const color = d3.scaleLinear() .domain([-1, -0.5, 0, 0.5, 1]) .range([ "#006d2c", "#74c476", "#f7f7f7", "#6baed6", "#08519c" ]) .interpolate(d3.interpolateRgb); // 7. SVG const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .style("max-width", "100%") .style("height", "auto"); // 8. Tooltip container // Attach to Observable's map wrapper instead of body const wrapper = d3.create("div") .style("position", "relative") .style("width", "100%") .style("max-width", `${width}px`); const tooltip = wrapper.append("div") .style("position", "absolute") .style("visibility", "hidden") .style("background", "white") .style("padding", "12px 16px") .style("border", "1px solid #ddd") .style("border-radius", "8px") .style("box-shadow", "0 4px 15px rgba(0,0,0,0.15)") .style("font-family", "sans-serif") .style("font-size", "13px") .style("color", "#222") .style("pointer-events", "none") .style("z-index", "1000"); const formatMoney = value => Math.abs(value) >= 1e9 ? `$${(value / 1e9).toFixed(2)}B` : `$${(value / 1e6).toFixed(2)}M`; // 9. Draw all countries svg.selectAll("path.country") .data(countries) .join("path") .attr("class", "country") .attr("d", path) .attr("fill", d => { const aid = aidLookup.get(d.properties.name); return aid ? color(aid.balance) : "#E5E7EB"; }) .attr("stroke", "#777") .attr("stroke-width", 0.45) .on("mouseover", function(event, d) { const aid = aidLookup.get(d.properties.name); d3.select(this) .attr("stroke", "#111") .attr("stroke-width", 1.5); if (aid) { const netLabel = aid.balance > 0 ? "Net donor" : aid.balance < 0 ? "Net recipient" : "Balanced"; tooltip.html(` ${aid.country}

Donated: ${formatMoney(aid.donated)}

Received: ${formatMoney(aid.received)}

Balance: ${aid.balance.toFixed(3)}

${netLabel}

`); } else { tooltip.html(` ${d.properties.name}

No matching financial aid data

`); } tooltip.style("visibility", "visible"); }) .on("mousemove", function(event) { const [x, y] = d3.pointer(event, wrapper.node()); tooltip .style("left", `${Math.min(x + 15, width - 220)}px`) .style("top", `${Math.max(0, y - 20)}px`); }) .on("mouseout", function() { d3.select(this) .attr("stroke", "#777") .attr("stroke-width", 0.45); tooltip.style("visibility", "hidden"); }); // 10. Title svg.append("text") .attr("x", width / 2) .attr("y", 28) .attr("text-anchor", "middle") .attr("font-size", 20) .attr("font-weight", "bold") .attr("fill", "#222") .text("Global Financial Aid: Donors vs. Recipients"); // 11. Subtitle svg.append("text") .attr("x", width / 2) .attr("y", 47) .attr("text-anchor", "middle") .attr("font-size", 12) .attr("fill", "#666") .text("Relative balance of financial aid commitments by country"); // 12. Legend gradient const defs = svg.append("defs"); const gradient = defs.append("linearGradient") .attr("id", "aid-blue-green-gradient") .attr("x1", "0%") .attr("x2", "100%"); d3.range(0, 1.001, 0.02).forEach(t => { gradient.append("stop") .attr("offset", `${t * 100}%`) .attr("stop-color", color(-1 + 2 * t)); }); const legendWidth = 440; const legendHeight = 16; const legendX = (width - legendWidth) / 2; const legendY = height - 75; svg.append("rect") .attr("x", legendX) .attr("y", legendY) .attr("width", legendWidth) .attr("height", legendHeight) .attr("fill", "url(#aid-blue-green-gradient)") .attr("stroke", "#ccc") .attr("stroke-width", 0.5); // 13. Legend axis const legendScale = d3.scaleLinear() .domain([-1, 1]) .range([legendX, legendX + legendWidth]); svg.append("g") .attr("transform", `translate(0, ${legendY + legendHeight})` ) .call( d3.axisBottom(legendScale) .tickValues([-1, -0.5, 0, 0.5, 1]) .tickFormat(d3.format(".1f")) .tickSize(5) ) .call(g => g.select(".domain").remove()) .selectAll("text") .attr("font-size", 11); // 14. Legend labels svg.append("text") .attr("x", legendX) .attr("y", legendY - 10) .attr("font-size", 12) .attr("fill", "#006d2c") .text("Receives more"); svg.append("text") .attr("x", legendX + legendWidth) .attr("y", legendY - 10) .attr("text-anchor", "end") .attr("font-size", 12) .attr("fill", "#08519c") .text("Donates more"); // 15. Explanation svg.append("text") .attr("x", width / 2) .attr("y", height - 20) .attr("text-anchor", "middle") .attr("font-size", 11) .attr("fill", "#777") .text("Balance Index = (Donated - Received) / (Donated + Received)"); // 16. Put SVG inside wrapper and display wrapper.node().appendChild(svg.node()); display(wrapper.node()); } 42:Tad7,### 1. Do countries that primarily donate or receive financial aid cluster in particular geographic regions? Yes. The choropleth map reveals several geographical patterns in financial aid commitments. **Western and Northern Europe:** Countries such as Germany, France, Sweden, Norway, and the United Kingdom are predominantly net donors. Their blue coloring indicates that their outgoing commitments exceed their incoming commitments. **Central and Eastern Europe:** Countries such as Poland, the Czech Republic, Slovakia, and Hungary are predominantly net recipients. Their green coloring contrasts with the predominantly donor-oriented countries farther west. **South America:** Brazil and Colombia are strong net recipients, suggesting a concentration of recipient-oriented countries within the region. **East Asia:** The region presents contrasting patterns. Japan is a strong net donor, whereas Korea is predominantly a net recipient in the dataset. Overall, countries with similar financial aid roles appear to cluster geographically, although these patterns are not uniform across entire regions. ### 2. Are there neighboring countries with radically different donation and receipt patterns? Yes. Several countries sharing land borders show substantial differences in their financial aid roles. **Germany and Poland:** Germany has a balance index close to +1, indicating that it predominantly donates, while Poland has an index close to −1, indicating that it predominantly receives. Despite sharing a border, they have nearly opposite financial aid patterns. **Germany and the Czech Republic:** Germany is a strong net donor, whereas the Czech Republic is predominantly a net recipient, providing another example of contrasting financial aid roles among neighboring countries. **Italy and Slovenia:** Italy is a moderate net donor, with a balance index of approximately +0.23, while Slovenia is a strong net recipient, with an index close to −1. Japan and Korea also illustrate contrasting roles within East Asia, although they do not share a land border. ### 3. Overall interpretation The visualization reveals geographic clustering alongside significant differences between neighboring countries. Western and Northern Europe contain several prominent net donors, whereas parts of Central and Eastern Europe and South America contain predominantly net recipients. However, the differences between Germany and Poland, Germany and the Czech Republic, and Italy and Slovenia demonstrate that geographic proximity does not necessarily imply similar financial aid patterns. Overall, the findings indicate that regional tendencies exist, but individual countries can exhibit substantially different donor-recipient roles even when geographically close.43:T84d,A **choropleth world map** was selected because the objective is to identify geographic patterns in financial aid donations and receipts. Unlike a bar chart or scatter plot, a map preserves the geographical relationships between countries, making it easier to observe regional clusters and differences between neighboring countries. The visualization uses a **diverging color scale**, with blue representing net donors and green representing net recipients. Darker shades indicate stronger imbalances, while the near-white midpoint represents countries with relatively balanced donations and receipts. To compare countries regardless of their total financial aid amounts, a normalized balance index was calculated: **Balance Index = (Donated − Received) / (Donated + Received)** Values closer to +1 indicate predominantly donor countries, while values closer to −1 indicate predominantly recipient countries. This measure is appropriate because the question focuses on whether countries primarily donate or receive, rather than the absolute amount of aid. Countries without matching data are displayed in gray, distinguishing missing information from countries with recorded financial aid activity. Interactive tooltips provide country names, donated and received amounts, and balance indices. This allows readers to investigate individual countries without overcrowding the map with labels. Overall, the design is effective because it makes regional clustering visible while allowing neighboring countries with contrasting financial aid patterns to be identified and compared. ### Limitations The balance index represents relative financial aid activity rather than absolute monetary amounts. Therefore, countries with substantially different total commitments may appear in similar colors if their donor-recipient proportions are alike. Additionally, geographically small countries can be difficult to identify. The Natural Earth projection also distorts geographic areas to some extent, which may influence the visual prominence of different countries without affecting their underlying financial aid values.44:T2e51,{ // Settings (state these in your write-up) const MIN_COMMITMENTS = 0; // minimum top-five commitments for a country to appear // 1. Select the five most frequent purposes (by number of commitments) const purposeCounts = d3.rollups( aiddata.filter(d => d.coalesced_purpose_name), rows => rows.length, d => d.coalesced_purpose_name ) .sort((a, b) => b[1] - a[1]) .slice(0, 5); const purposes = purposeCounts.map(d => d[0]); // 2. Geographic region assignments const regionCountries = { "North America": ["Canada", "United States", "Mexico"], "Central America & Caribbean": [ "Costa Rica", "Cuba", "Dominican Republic", "El Salvador", "Guatemala", "Haiti", "Honduras", "Jamaica", "Nicaragua", "Panama" ], "South America": [ "Argentina", "Bolivia", "Brazil", "Chile", "Colombia", "Ecuador", "Paraguay", "Peru", "Uruguay", "Venezuela" ], "Western & Northern Europe": [ "Austria", "Belgium", "Denmark", "Finland", "France", "Germany", "Iceland", "Ireland", "Liechtenstein", "Luxembourg", "Netherlands", "Norway", "Sweden", "Switzerland", "United Kingdom" ], "Central & Eastern Europe": [ "Czech Republic", "Estonia", "Hungary", "Latvia", "Lithuania", "Poland", "Romania", "Slovak Republic", "Slovenia", "Bulgaria", "Croatia", "Serbia" ], "Southern Europe": ["Cyprus", "Greece", "Italy", "Portugal", "Spain", "Turkey"], "Middle East & North Africa": [ "Kuwait", "Qatar", "Saudi Arabia", "United Arab Emirates", "Egypt", "Jordan", "Morocco", "Tunisia", "Israel", "Iran", "Iraq", "Lebanon" ], "South Asia": ["India", "Pakistan", "Bangladesh", "Sri Lanka", "Nepal"], "East & Southeast Asia": [ "Japan", "Korea", "Taiwan", "Thailand", "China", "Indonesia", "Malaysia", "Philippines", "Vietnam", "Singapore" ], "Sub-Saharan Africa": [ "South Africa", "Nigeria", "Kenya", "Ghana", "Ethiopia", "Tanzania", "Uganda", "Senegal", "Mozambique", "Zambia" ], "Oceania": ["Australia", "New Zealand"] }; const regionLookup = new Map( Object.entries(regionCountries).flatMap(([region, names]) => names.map(name => [name, region]) ) ); const regionOrder = [ ...Object.keys(regionCountries), "Other / Unclassified" ]; // 3. Commitments by country and selected purpose (count and dollars) const usd = d => +d.commitment_amount_usd_constant || 0; const byCountry = d3.rollup( aiddata.filter(d => d.recipient && purposes.includes(d.coalesced_purpose_name)), rows => ({ n: rows.length, usd: d3.sum(rows, usd), byPurpose: d3.rollup( rows, g => ({ n: g.length, usd: d3.sum(g, usd) }), d => d.coalesced_purpose_name ) }), d => d.recipient ); // 4. One row per recipient country (filtered by minimum activity) const countries = [...byCountry] .filter(([country, o]) => o.n >= MIN_COMMITMENTS) .map(([country, o]) => ({ country, total: o.n, totalUsd: o.usd, byPurpose: o.byPurpose, region: regionLookup.get(country) || "Other / Unclassified" })); // Sort by region, then by number of top-five commitments countries.sort((a, b) => regionOrder.indexOf(a.region) - regionOrder.indexOf(b.region) || b.total - a.total ); // 5. Heatmap cells: share of the country's top-five commitments const cells = countries.flatMap(c => purposes.map(purpose => { const cell = c.byPurpose.get(purpose) ?? { n: 0, usd: 0 }; return { country: c.country, region: c.region, purpose, count: cell.n, amount: cell.usd, total: c.total, totalUsd: c.totalUsd, share: 100 * cell.n / c.total }; }) ); const maxShare = d3.max(cells, d => d.share) || 100; const color = d3.scaleSequential() .domain([0, maxShare]) .interpolator(t => d3.interpolateBlues(0.18 + 0.82 * t)) .clamp(true); const formatMoney = value => { const a = Math.abs(value); if (a >= 1e9) return `$${(value / 1e9).toFixed(2)}B`; if (a >= 1e6) return `$${(value / 1e6).toFixed(2)}M`; if (a >= 1e3) return `$${(value / 1e3).toFixed(2)}K`; return `$${d3.format(",.0f")(value)}`; }; // 6. Layout dimensions const width = 1100; const left = 260; const right = 120; const top = 110; const rowHeight = 22; const groupGap = 17; const cellGap = 5; const chartWidth = width - left - right; const columnWidth = chartWidth / purposes.length; let currentY = top; let previousRegion = null; const regionHeaders = []; countries.forEach(d => { if (d.region !== previousRegion) { if (previousRegion !== null) currentY += groupGap; regionHeaders.push({ region: d.region, y: currentY }); currentY += 19; previousRegion = d.region; } d.y = currentY; currentY += rowHeight; }); const height = currentY + 125; const yLookup = new Map(countries.map(d => [d.country, d.y])); const x = d3.scaleBand() .domain(purposes) .range([left, width - right]) .paddingInner(cellGap / columnWidth); // 7. Container, SVG and tooltip const wrapper = d3.create("div") .style("position", "relative") .style("width", "100%") .style("max-width", `${width}px`); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height) .style("max-width", "100%") .style("height", "auto") .style("font-family", "sans-serif"); const tooltip = wrapper.append("div") .style("position", "absolute") .style("visibility", "hidden") .style("background", "white") .style("padding", "12px 15px") .style("border", "1px solid #ddd") .style("border-radius", "8px") .style("box-shadow", "0 4px 12px rgba(0,0,0,0.15)") .style("font-size", "13px") .style("color", "#222") .style("pointer-events", "none") .style("z-index", "100"); // 8. Title and subtitle svg.append("text") .attr("x", width / 2).attr("y", 29) .attr("text-anchor", "middle") .attr("font-size", 21).attr("font-weight", "bold") .text("Financial Aid Purposes by Recipient Country"); svg.append("text") .attr("x", width / 2).attr("y", 50) .attr("text-anchor", "middle") .attr("font-size", 12).attr("fill", "#666") .text(`Share of each country's commitments (by count) across the five most frequent purposes | Countries with at least ${MIN_COMMITMENTS} such commitments | Each row sums to 100%`); // 9. Column headers svg.append("g") .selectAll("text.column") .data(purposes) .join("text") .attr("x", d => x(d) + x.bandwidth() / 2) .attr("y", 80) .attr("text-anchor", "middle") .attr("font-size", 10) .attr("font-weight", "bold") .each(function (d) { const words = d.split(" "); const lines = []; let line = ""; words.forEach(word => { const test = line ? line + " " + word : word; if (test.length > 19 && line) { lines.push(line); line = word; } else { line = test; } }); if (line) lines.push(line); const node = d3.select(this); lines.forEach((part, i) => { node.append("tspan") .attr("x", x(d) + x.bandwidth() / 2) .attr("dy", i === 0 ? 0 : 12) .text(part); }); }); // 10. Region headings svg.append("g") .selectAll("text.region") .data(regionHeaders) .join("text") .attr("x", 15) .attr("y", d => d.y + 12) .attr("font-size", 12) .attr("font-weight", "bold") .attr("fill", "#475569") .text(d => d.region); // 11. Country labels svg.append("g") .selectAll("text.country") .data(countries) .join("text") .attr("x", left - 12) .attr("y", d => d.y + rowHeight / 2 + 4) .attr("text-anchor", "end") .attr("font-size", 11) .attr("fill", "#222") .text(d => d.country); // 12. Heatmap cells svg.append("g") .selectAll("rect.cell") .data(cells) .join("rect") .attr("class", "cell") .attr("x", d => x(d.purpose)) .attr("y", d => yLookup.get(d.country)) .attr("width", x.bandwidth()) .attr("height", rowHeight - 3) .attr("rx", 2) .attr("fill", d => d.count > 0 ? color(d.share) : "#e5e7eb") .attr("stroke", "white") .attr("stroke-width", 0.5) .on("mouseover", function (event, d) { d3.select(this).attr("stroke", "#111").attr("stroke-width", 1.5); tooltip .style("visibility", "visible") .html(` ${d.country} ${d.region} ${d.purpose} Commitments: ${d.count.toLocaleString()} of ${d.total.toLocaleString()} Share: ${d.share.toFixed(1)}% Amount: ${formatMoney(d.amount)} ${d.count === 0 ? ' No commitments for this purpose' : ''} `); }) .on("mousemove", function (event) { const [mx, my] = d3.pointer(event, wrapper.node()); const bounds = wrapper.node().getBoundingClientRect(); tooltip .style("left", `${Math.max(0, Math.min(mx + 14, bounds.width - 245))}px`) .style("top", `${Math.max(0, my - 20)}px`); }) .on("mouseout", function () { d3.select(this).attr("stroke", "white").attr("stroke-width", 0.5); tooltip.style("visibility", "hidden"); }); // 13. Values inside cells when large enough svg.append("g") .selectAll("text.cell-value") .data(cells.filter(d => d.count > 0 && d.share >= 3)) .join("text") .attr("x", d => x(d.purpose) + x.bandwidth() / 2) .attr("y", d => yLookup.get(d.country) + 13) .attr("text-anchor", "middle") .attr("font-size", 10) .attr("fill", d => d.share > maxShare * 0.55 ? "white" : "#172554") .style("pointer-events", "none") .text(d => `${d.share.toFixed(0)}%`); // 14. Legend const legendWidth = 430; const legendX = (width - legendWidth) / 2; const legendY = height - 73; const gradientId = "aid-heatmap-gradient"; const gradient = svg.append("defs") .append("linearGradient") .attr("id", gradientId) .attr("x1", "0%") .attr("x2", "100%"); d3.range(0, 1.001, 0.02).forEach(t => { gradient.append("stop") .attr("offset", `${t * 100}%`) .attr("stop-color", d3.interpolateBlues(0.18 + 0.82 * t)); }); svg.append("text") .attr("x", width / 2).attr("y", legendY - 14) .attr("text-anchor", "middle") .attr("font-size", 12).attr("font-weight", "bold") .text("Share of the Country's Top-Five-Purpose Commitments"); svg.append("rect") .attr("x", legendX).attr("y", legendY) .attr("width", legendWidth).attr("height", 15) .attr("fill", `url(#${gradientId})`) .attr("stroke", "#ccc"); const legendScale = d3.scaleLinear() .domain([0, maxShare]) .range([legendX, legendX + legendWidth]); svg.append("g") .attr("transform", `translate(0, ${legendY + 15})`) .call( d3.axisBottom(legendScale) .ticks(5) .tickFormat(d => `${d.toFixed(0)}%`) ) .call(g => g.select(".domain").remove()); svg.append("text") .attr("x", width / 2).attr("y", height - 12) .attr("text-anchor", "middle") .attr("font-size", 11).attr("fill", "#777") .text("Gray = no commitments for that purpose | Darker blue = larger share | Hover for exact values"); // 15. Display wrapper.node().appendChild(svg.node()); display(wrapper.node()); // Diagnostic: countries without a listed region (add them to regionCountries) const unclassified = countries .filter(d => d.region === "Other / Unclassified") .map(d => d.country); if (unclassified.length) { display({ message: "Review geographic region assignments", countries: unclassified }); } }45:Tbe5,### 1. Do the five most frequent aid purposes show different geographic distributions? Yes. The geographically grouped heatmap reveals noticeable regional differences in the relative frequency of financial aid purposes among recipient countries. **Central and Eastern Europe:** Social/welfare services account for a large share of the selected commitments across several countries, including approximately 52% in the Czech Republic, 49% in Lithuania and Estonia, 46% in Poland, and 45% in Hungary and Latvia. **South America:** The distribution is more varied. Brazil and Chile have their highest shares in sectors not specified (34% and 35%, respectively), whereas Colombia has its highest share in strengthening civil society (36%). **East and Southeast Asia:** Thailand has its highest share in sectors not specified (49%), while Korea has its highest share in social/welfare services (49%). **South Asia:** India's commitments are relatively evenly distributed among the five selected purposes, with sectors not specified accounting for the largest share at approximately 31%. These observations suggest that recipient countries in some regions exhibit similar aid-purpose profiles, while others show substantial differences. ### 2. Are there countries that tend to receive more of certain types of aid than others? Yes. Several countries demonstrate clear differences in the relative frequency of aid purposes. **Slovenia:** Higher education accounts for approximately 48% of its commitments among the five selected purposes, compared with 22% in the Czech Republic and 19% in Poland. **Czech Republic:** Social/welfare services account for approximately 52% of commitments, compared with 21% in Brazil. **Colombia:** Strengthening civil society represents approximately 36% of commitments, compared with 19% in Brazil and 11% in Chile. **Thailand:** Sectors not specified accounts for approximately 49% of commitments, compared with 8% in Korea. These comparisons demonstrate that countries can have different aid-purpose profiles, even within the same geographic region. ### 3. Overall interpretation The visualization reveals regional similarities alongside substantial differences between individual recipient countries. Social/welfare services are particularly prominent among several Central and Eastern European countries, while South American and East Asian countries show more varied distributions. However, the heatmap measures the proportion of commitments within each country's five selected purposes, not each country's share of worldwide commitments for a purpose. Therefore, it is most useful for identifying differences in the composition of aid purposes rather than ranking countries by total aid received. Additionally, countries with very few recorded commitments may display extreme percentages, such as 100%. These values should be interpreted cautiously. Overall, the findings indicate that the relative frequency of different financial aid purposes varies across countries and geographical regions.46:Tb28,A **geographically grouped heatmap** was selected to compare the five most frequent financial aid purposes across recipient countries and regions. The five purposes were identified by counting their occurrences across the complete dataset. Each column represents one purpose, while each row represents a recipient country, grouped by geographical region. **Visual Encoding** - **Position:** Countries are organized into geographic regions, making regional similarities and differences easier to identify. - **Color:** A sequential blue scale represents each purpose's percentage of a country's commitments among the five selected purposes. Darker shades indicate higher proportions, while gray indicates no recorded commitments for that purpose. - **Labels:** Percentages are displayed directly within cells, allowing comparisons without requiring interaction. - **Interaction:** Tooltips provide the exact commitment count, percentage, and monetary amount for each country-purpose combination. The percentage for each cell is calculated as: **Purpose Share (%) = (Commitments for the selected purpose / Commitments across the five selected purposes for that country) × 100** This normalization allows countries with different numbers of recorded commitments to be compared according to their relative aid-purpose composition. A heatmap was preferred over separate bar charts because it presents all five purposes in a compact matrix, enabling simultaneous comparisons across countries and purposes. Grouping countries geographically also helps reveal broader regional patterns. Overall, this design is effective for identifying differences in the relative frequency of aid purposes among countries and regions. ### Limitations The visualization includes all recipient countries with at least one recorded commitment among the five selected purposes, preserving the available geographic coverage. However, some countries have very few recorded commitments and consequently display extreme percentages, such as 100%. For example, Germany and Finland show 100% for social/welfare services. This means all their recorded commitments *among the five selected purposes* belong to that category, not that they receive only social/welfare aid overall. Countries with fewer than 30 relevant commitments should therefore be interpreted cautiously because their percentages are based on relatively few observations. Additionally, the heatmap represents the relative **frequency of commitment records rather than their monetary value or absolute geographic concentration**. A country with a higher percentage does not necessarily receive more commitments or money than another country. Finally, grouping countries by region provides broad geographic context but does not preserve their exact locations or neighboring relationships as a world map would.47:[{"id":"09040dddbda03374a466600047ccbc70c46e6853884eb725db2141c566ca1b78fb7cc935096e8d5468c21e8df215e73fc49cdaaf7e2f1f89139793da25be02b2","href":"https://static.observableusercontent.com/files/09040dddbda03374a466600047ccbc70c46e6853884eb725db2141c566ca1b78fb7cc935096e8d5468c21e8df215e73fc49cdaaf7e2f1f89139793da25be02b2","name":"aiddata-countries-only - aiddata-countries-only.csv","type":"text/csv","lastModified":1793296681000,"size":8760387},{"id":"4ca87506126821ba8e6badceeeb7a20a29bdc210c060ce393e04728d41276351c70429c9d1defd0aa3b85d56c725bc68836d349bb4d801292183c04dbcaa75d6","href":"https://static.observableusercontent.com/files/4ca87506126821ba8e6badceeeb7a20a29bdc210c060ce393e04728d41276351c70429c9d1defd0aa3b85d56c725bc68836d349bb4d801292183c04dbcaa75d6","name":"world.json","type":"application/json","lastModified":1793309229000,"size":252487}] 38:{"id":"b6c85f3f6b1f6cef","slug":"mini-project-1-geographic-financial-aid-due-oct-29th","title":"Mini-Project 1: Geographic Financial Aid (Due Oct. 29th)","thumbnail":"e0d60e68e602368068f712834a29d8042302214355847fa8976b2f3a9486f69e","access_level":"public","create_time":"$D2026-10-27T21:55:13.311Z","update_time":"$D2026-10-30T02:42:51.032Z","view_time":null,"first_public_time":"$D2026-10-30T02:34:08.525Z","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":"b1c13dcdda5ce541","login":"joe-perinchery","name":"Joe Perinchery","avatar_url":"https://avatars-next.observableusercontent.com/724dab26c31ae22b2165c43ac641f459baa9dc2d74abb1a4010ac514dce89065","tier":"free_2026","bio":"","followed_by_you":false,"follows_you":false},"version":496,"publish_version":496,"role":null,"authored":false,"authors":[{"type":"individual","id":"53b524aa4951f570","login":"joe-perinchery","name":"Joe Perinchery","avatar_url":"https://avatars-next.observableusercontent.com/724dab26c31ae22b2165c43ac641f459baa9dc2d74abb1a4010ac514dce89065","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"b1c13dcdda5ce541","login":"joe-perinchery","name":"Joe Perinchery","avatar_url":"https://avatars-next.observableusercontent.com/724dab26c31ae22b2165c43ac641f459baa9dc2d74abb1a4010ac514dce89065","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":106,"value":"let STUDENT_NAME= \"Joe Shaju Perinchery\"\nlet net_id = \"JP8276\"","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"## Ai Usage Disclosure\n\nI used ChatGPT to help interpret and better understand the assignment questions, explore suitable visualization techniques, and troubleshoot errors during D3 implementation. AI assistance was also used to review code, suggest improvements to visualization clarity, and help structure the written explanations.\n\nI reviewed the suggestions, evaluated the visualizations against the assignment requirements, and checked my interpretations of the data against the dataset.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"// IMPORTING FILE\nlet aiddata=FileAttachment(\"aiddata-countries-only - aiddata-countries-only.csv\").csv()","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"aiddata.slice(0, 5)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"\nconst donated = d3.rollup(\n aiddata,\n rows => d3.sum(rows, d => +d.commitment_amount_usd_constant),\n d => d.donor\n);\n\nconst received = d3.rollup(\n aiddata,\n rows => d3.sum(rows, d => +d.commitment_amount_usd_constant),\n d => d.recipient\n);\n\nconst countryTotals = Array.from(\n new Set([...donated.keys(), ...received.keys()]),\n country => {\n const D = donated.get(country) || 0;\n const R = received.get(country) || 0;\n\n return {\n country,\n donated: D,\n received: R,\n balance: D + R !== 0 ? (D - R) / (D + R) : 0\n };\n }\n);\n\ndisplay(countryTotals.slice(0, 10));\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"## Question 1 P1","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"$3e","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"## Question 1 P2 Analysis and Discussion","pinned":true,"hidden":false,"mode":"md","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":90,"value":"## Question 1 P3 Design Rationale and Effectiveness","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"$40","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"## Question 2 P1","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"$41","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"## Question 2 P2 Analysis and Discussion","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"$42","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"## Question 2 P3 Design Rationale and Effectiveness","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"$43","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"## Question 3 P1","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"$44","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"## Question 3 P2 Analysis and Discussion","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"$45","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"## Question 3 P3 Design Rationale and Effectiveness\n","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"$46","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"2"}} 33:null