34:["$","title",null,{"children":"Mini-Project 1: Geographic Financial Aid (Due Oct. 29th) | Shalini Gupta | 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:T1831, const viz1 = await (async () => { const d3 = await import("https://cdn.jsdelivr.net/npm/d3@7/+esm"); const width = 950; const height = 650; const margin = { top: 120, right: 75, bottom: 90, left: 110 }; const data = countryStats.filter(d => Number.isFinite(d.donated) && Number.isFinite(d.received) && d.donated >= 0 && d.received >= 0 && d.donated + d.received > 0 ); const maxValue = d3.max(data, d => Math.max(d.donated, d.received) ) || 1; // Logarithmic-style scales that support zero const x = d3.scaleSymlog() .constant(1e7) .domain([0, maxValue]) .range([margin.left, width - margin.right]); const y = d3.scaleSymlog() .constant(1e7) .domain([0, maxValue]) .range([height - margin.bottom, margin.top]); const tickCandidates = [ 0, 1e7, 1e8, 1e9, 1e10, 1e11, 1e12 ]; const tickValues = tickCandidates.filter( v => v <= maxValue ); const money = d3.format(",.0f"); 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("background", "#ffffff") .style("font-family", "Arial, sans-serif"); // Title svg.append("text") .attr("x", width / 2) .attr("y", 35) .attr("text-anchor", "middle") .attr("font-size", 24) .attr("font-weight", "bold") .attr("fill", "#1e293b") .text("Global Financial Aid: Donors vs. Recipients"); // Subtitle svg.append("text") .attr("x", width / 2) .attr("y", 58) .attr("text-anchor", "middle") .attr("font-size", 13) .attr("fill", "#64748b") .text("Country-level aid commitments | Logarithmic-style axes"); // Legend above the chart const legend = svg.append("g") .attr("transform", `translate(${width / 2 - 190}, 87)`); const legendData = [ {label: "Net Donor", color: "#f59e0b"}, {label: "Net Recipient", color: "#0d9488"} ]; legend.selectAll("circle") .data(legendData) .join("circle") .attr("cx", (d, i) => i * 190) .attr("cy", 0) .attr("r", 6) .attr("fill", d => d.color); legend.selectAll("text") .data(legendData) .join("text") .attr("x", (d, i) => i * 190 + 14) .attr("y", 4) .attr("font-size", 13) .attr("fill", "#334155") .text(d => d.label); // Horizontal gridlines svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call( d3.axisLeft(y) .tickValues(tickValues) .tickSize(-(width - margin.left - margin.right)) .tickFormat("") ) .call(g => g.select(".domain").remove()) .call(g => g.selectAll("line") .attr("stroke", "#e2e8f0")); // Vertical gridlines svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call( d3.axisBottom(x) .tickValues(tickValues) .tickSize(-(height - margin.top - margin.bottom)) .tickFormat("") ) .call(g => g.select(".domain").remove()) .call(g => g.selectAll("line") .attr("stroke", "#e2e8f0")); // X axis svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call( d3.axisBottom(x) .tickValues(tickValues) .tickFormat(v => v === 0 ? "0" : d3.format("~s")(v) ) .tickSizeOuter(0) ) .call(g => g.selectAll("text") .attr("font-size", 11) .attr("fill", "#475569")); // Y axis svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call( d3.axisLeft(y) .tickValues(tickValues) .tickFormat(v => v === 0 ? "0" : d3.format("~s")(v) ) .tickSizeOuter(0) ) .call(g => g.selectAll("text") .attr("font-size", 11) .attr("fill", "#475569")); // Axis labels svg.append("text") .attr("x", width / 2) .attr("y", height - 28) .attr("text-anchor", "middle") .attr("font-size", 15) .attr("font-weight", 500) .attr("fill", "#334155") .text("Total Aid Donated (USD)"); svg.append("text") .attr("transform", "rotate(-90)") .attr("x", -(margin.top + height - margin.bottom) / 2) .attr("y", 30) .attr("text-anchor", "middle") .attr("font-size", 15) .attr("font-weight", 500) .attr("fill", "#334155") .text("Total Aid Received (USD)"); // Equal donation/receipt reference line svg.append("line") .attr("x1", x(0)) .attr("y1", y(0)) .attr("x2", x(maxValue)) .attr("y2", y(maxValue)) .attr("stroke", "#64748b") .attr("stroke-width", 2) .attr("stroke-dasharray", "6,5"); // Points const points = svg.append("g") .selectAll("circle") .data(data) .join("circle") .attr("cx", d => x(d.donated)) .attr("cy", d => y(d.received)) .attr("r", 5.5) .attr("fill", d => d.net >= 0 ? "#f59e0b" : "#0d9488" ) .attr("stroke", "#ffffff") .attr("stroke-width", 1) .attr("opacity", 0.8) .style("cursor", "pointer"); // Native tooltip points.append("title") .text(d => `${d.country} Donated: $${money(d.donated)} Received: $${money(d.received)} Net: $${d3.format("+,.0f")(d.net)}` ); // Highlight countries with largest absolute net balances const highlighted = [...data] .sort((a, b) => Math.abs(b.net) - Math.abs(a.net) ) .slice(0, 6); const labelGroup = svg.append("g"); labelGroup.selectAll("text") .data(highlighted) .join("text") .attr("x", d => x(d.donated) + 9) .attr("y", d => y(d.received) - 9) .attr("font-size", 11) .attr("font-weight", "bold") .attr("fill", "#334155") .attr("paint-order", "stroke") .attr("stroke", "#ffffff") .attr("stroke-width", 3) .attr("stroke-linejoin", "round") .text(d => d.country); // Reference-line explanation svg.append("text") .attr("x", width - margin.right - 8) .attr("y", height - margin.bottom - 20) .attr("text-anchor", "end") .attr("font-size", 11) .attr("fill", "#64748b") .text("Dashed line = equal donations and receipts"); return svg.node(); })(); display(viz1); 3f:T72e,### Visualization 1: Comparing Financial Aid Donors and Recipients **Analysis** The scatter plot illustrates significant differences in financial aid commitments across countries. The horizontal axis represents total aid donated, while the vertical axis represents total aid received. The dashed diagonal indicates an equal amount of donations and receipts. Countries below the diagonal are net donors, whereas those above it are net recipients. The United States and Japan stand out as major donors, with substantially greater financial contributions than receipts. Germany also appears as a major net donor, with almost no incoming aid recorded in this dataset. In contrast, India, Thailand, and Brazil are prominent net recipients. India receives one of the highest total amounts of financial aid, while its recorded contributions are comparatively small. The distribution suggests a substantial imbalance in global financial aid flows, with a smaller set of countries accounting for large outgoing commitments and many others receiving substantially more than they contribute. **Design Rationale** A scatter plot was selected because it allows the donated and received amounts to be compared simultaneously for each country. The diagonal reference line makes it easy to distinguish net donors from net recipients. A symmetric logarithmic scale was used to accommodate the large differences in financial amounts while still displaying zero values. Orange and teal distinguish the two groups, and hover tooltips provide exact country-level values without overcrowding the visualization. **Limitations** The dataset represents recorded financial commitments rather than necessarily completed transfers. Therefore, the results describe patterns in recorded aid commitments and should not be interpreted as actual disbursements.40:T770, const countryMapData = (() => { const normalize = name => String(name || "") .toLowerCase() .normalize("NFD") .replace(/[\u0300-\u036f]/g, "") .replace(/[^a-z0-9]/g, ""); const aliases = { "unitedstatesofamerica": "unitedstates", "russianfederation": "russia", "korearepublicof": "southkorea", "republicofkorea": "southkorea", "koreademocraticpeoplesrepublicof": "northkorea", "iranislamicrepublicof": "iran", "viet nam": "vietnam", "syrianarabrepublic": "syria", "laopeoplesdemocraticrepublic": "laos", "democraticrepublicofthecongo": "demrepcongo", "congodemocraticrepublic": "demrepcongo", "cotedivoire": "ivorycoast", "czechrepublic": "czechia", "tanzaniaunitedrepublicof": "tanzania", "boliviaplurinationalstateof": "bolivia", "venezuelabolivarianrepublicof": "venezuela", "myanmarburma": "myanmar", "korea": "southkorea", "slovakrepublic": "slovakia", "eswatini": "swaziland" }; const canonical = name => { const key = normalize(name); return aliases[key] || key; }; const statsByCountry = new Map( countryStats.map(d => [canonical(d.country), d]) ); const features = worldFeatures.map(feature => { const name = feature.properties.name; const stats = statsByCountry.get(canonical(name)); return { ...feature, properties: { ...feature.properties, donated: stats?.donated ?? null, received: stats?.received ?? null, net: stats?.net ?? null, matched: Boolean(stats) } }; }); return { features, matched: features.filter(d => d.properties.matched).length, unmatched: features .filter(d => !d.properties.matched) .map(d => d.properties.name) }; })(); display({ matchedCountries: countryMapData.matched, unmatchedCountries: countryMapData.unmatched }); 41:T17a1, const viz2 = await (async () => { const d3 = await import( "https://cdn.jsdelivr.net/npm/d3@7/+esm" ); const width = 1050; const height = 690; 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", "Arial, sans-serif") .style("background", "#ffffff"); // Title svg.append("text") .attr("x", width / 2) .attr("y", 38) .attr("text-anchor", "middle") .attr("font-size", 24) .attr("font-weight", "bold") .attr("fill", "#1e293b") .text("Geographic Distribution of Net Financial Aid"); // Subtitle svg.append("text") .attr("x", width / 2) .attr("y", 63) .attr("text-anchor", "middle") .attr("font-size", 13) .attr("fill", "#64748b") .text("Country-level commitments | Net aid = donated - received"); // Map projection const projection = d3.geoNaturalEarth1() .fitExtent( [[25, 105], [width - 25, height - 145]], {type: "Sphere"} ); const path = d3.geoPath(projection); // Determine financial data range const values = countryMapData.features .map(d => d.properties.net) .filter(Number.isFinite); const maxAbs = d3.max(values, d => Math.abs(d)) || 1; // Symmetric logarithmic intensity const magnitude = d3.scaleSymlog() .constant(1e8) .domain([0, maxAbs]) .range([0, 1]); const donorColor = d3.interpolateRgb( "#ffedd5", "#b45309" ); const recipientColor = d3.interpolateRgb( "#ccfbf1", "#0f766e" ); const color = net => { if (!Number.isFinite(net)) return "#e5e7eb"; if (net === 0) return "#f8fafc"; const strength = magnitude(Math.abs(net)); return net > 0 ? donorColor(strength) : recipientColor(strength); }; // Ocean and globe background svg.append("path") .datum({type: "Sphere"}) .attr("d", path) .attr("fill", "#f0f9ff") .attr("stroke", "#cbd5e1") .attr("stroke-width", 1); // Draw countries const countries = svg.append("g") .selectAll("path") .data(countryMapData.features) .join("path") .attr("d", path) .attr("fill", d => color(d.properties.net)) .attr("stroke", "#ffffff") .attr("stroke-width", 0.6) .style("cursor", "pointer"); const formatMoney = d3.format(",.0f"); // Country tooltips countries.append("title") .text(d => { const p = d.properties; if (!p.matched) { return `${p.name} No matched aid data`; } const status = p.net > 0 ? "Net Donor" : p.net < 0 ? "Net Recipient" : "Balanced"; return `${p.name} Donated: $${formatMoney(p.donated)} Received: $${formatMoney(p.received)} Net balance: $${d3.format("+,.0f")(p.net)} Status: ${status}`; }); // Hover highlighting countries .on("mouseenter", function() { d3.select(this) .attr("stroke", "#111827") .attr("stroke-width", 1.5) .raise(); }) .on("mouseleave", function() { d3.select(this) .attr("stroke", "#ffffff") .attr("stroke-width", 0.6); }); const legendWidth = 560; const legendHeight = 18; const legendX = (width - legendWidth) / 2; const legendY = height - 100; svg.append("text") .attr("x", width / 2) .attr("y", legendY - 16) .attr("text-anchor", "middle") .attr("font-size", 14) .attr("font-weight", "bold") .attr("fill", "#334155") .text("Net Financial Aid Balance (USD)"); // Use the same symlog transformation as the map const legendScale = d3.scaleSymlog() .constant(1e8) .domain([-maxAbs, maxAbs]) .range([legendX, legendX + legendWidth]); // Define SVG gradient const gradientId = "viz2-net-gradient"; const gradient = svg.append("defs") .append("linearGradient") .attr("id", gradientId) .attr("x1", "0%") .attr("x2", "100%"); // Sample colors at uniformly spaced legend positions for (let i = 0; i <= 100; i++) { const t = i / 100; const net = legendScale.invert( legendX + t * legendWidth ); gradient.append("stop") .attr("offset", (t * 100) + "%") .attr("stop-color", color(net)); } // Draw gradient bar svg.append("rect") .attr("x", legendX) .attr("y", legendY) .attr("width", legendWidth) .attr("height", legendHeight) .attr("rx", 3) .attr("fill", "url(#" + gradientId + ")") .attr("stroke", "#cbd5e1") .attr("stroke-width", 0.6); // Legend axis svg.append("g") .attr( "transform", `translate(0,${legendY + legendHeight})` ) .call( d3.axisBottom(legendScale) .ticks(7) .tickFormat(d3.format("~s")) .tickSize(5) ) .call(g => g.select(".domain").remove()) .call(g => g.selectAll("text") .attr("font-size", 11) .attr("fill", "#475569")); // Legend category labels svg.append("text") .attr("x", legendX) .attr("y", height - 33) .attr("text-anchor", "start") .attr("font-size", 12) .attr("font-weight", "bold") .attr("fill", "#0f766e") .text("Net Recipient"); svg.append("text") .attr("x", width / 2) .attr("y", height - 33) .attr("text-anchor", "middle") .attr("font-size", 11) .attr("fill", "#64748b") .text("Balanced"); svg.append("text") .attr("x", legendX + legendWidth) .attr("y", height - 33) .attr("text-anchor", "end") .attr("font-size", 12) .attr("font-weight", "bold") .attr("fill", "#b45309") .text("Net Donor"); // Separate key for missing or unmatched data svg.append("rect") .attr("x", width - 185) .attr("y", 87) .attr("width", 14) .attr("height", 14) .attr("rx", 2) .attr("fill", "#e5e7eb"); svg.append("text") .attr("x", width - 163) .attr("y", 99) .attr("font-size", 11) .attr("fill", "#64748b") .text("No matched data"); return svg.node(); })(); display(viz2); 42:T7f7,### Visualization 2: Geographic Distribution of Net Financial Aid **Analysis** The choropleth map reveals geographic differences in the distribution of financial aid commitments. North America, particularly the United States and Canada, and parts of Western Europe and East Asia contain several major net donors. In contrast, countries such as India, Brazil, and Thailand are net recipients. There is some geographic clustering among net donor countries, particularly in Western and Northern Europe. However, the pattern is not uniform across neighboring countries. For example, Germany appears as a net donor, while neighboring Poland appears as a net recipient. Similarly, Japan is a net donor, whereas nearby countries in East and Southeast Asia exhibit different aid patterns. These differences demonstrate that geographic proximity does not necessarily determine whether a country primarily donates or receives financial aid. **Design Rationale** A world choropleth map was selected because the question specifically concerns geographic clustering and differences between neighboring countries. Unlike the scatter plot in Visualization 1, this representation makes spatial relationships easier to identify. Orange represents net donors, while teal represents net recipients, maintaining consistency with the previous visualization. Darker shades indicate larger absolute net aid commitments, and a symmetric logarithmic transformation helps distinguish countries across a wide range of financial values. Hover tooltips provide exact donation, receipt, and net commitment amounts without overcrowding the map. **Limitations** Countries shown in gray do not have successfully matched records in the visualization and should not be interpreted as countries receiving or donating no aid. The dataset covers recorded financial commitments rather than necessarily completed transactions. Additionally, total commitments are aggregated across years, so the map does not illustrate how financial aid patterns have changed over time.43:T10d7, const viz3 = await (async () => { const d3 = await import("https://cdn.jsdelivr.net/npm/d3@7/+esm"); const width = 1050; const height = 650; const normalize = name => String(name || "") .toLowerCase() .normalize("NFD") .replace(/[\u0300-\u036f]/g, "") .replace(/[^a-z0-9]/g, ""); const aliases = { unitedstatesofamerica: "unitedstates", czechia: "czechrepublic", slovakia: "slovakrepublic", southkorea: "korea", northkorea: "northkorea", russianfederation: "russia", vietnam: "vietnam" }; const canonical = name => { const key = normalize(name); return aliases[key] || key; }; const selectedData = purposeCountryData.filter( d => d.purpose === purposeSelector ); const aidByCountry = new Map( selectedData.map(d => [canonical(d.recipient), d]) ); const features = worldFeatures.map(feature => { const stats = aidByCountry.get( canonical(feature.properties.name) ); return { ...feature, properties: { ...feature.properties, aid: stats ? stats.total : null, count: stats ? stats.count : 0 } }; }); const maxAid = d3.max( purposeCountryData, d => d.total ) || 1; const colorScale = d3.scaleSequential() .domain([0, maxAid]) .interpolator(d3.interpolateYlGnBu); const svg = d3.create("svg") .attr("viewBox", `0 0 ${width} ${height}`) .style("max-width", "100%") .style("height", "auto") .style("font-family", "Arial, sans-serif"); svg.append("text") .attr("x", width / 2) .attr("y", 38) .attr("text-anchor", "middle") .attr("font-size", 24) .attr("font-weight", "bold") .attr("fill", "#1e293b") .text("Geographic Distribution of Aid Purposes"); svg.append("text") .attr("x", width / 2) .attr("y", 65) .attr("text-anchor", "middle") .attr("font-size", 14) .attr("fill", "#64748b") .text("Selected purpose: " + purposeSelector); const projection = d3.geoNaturalEarth1() .fitExtent( [[25, 110], [width - 25, height - 110]], { type: "Sphere" } ); const path = d3.geoPath(projection); svg.append("path") .datum({ type: "Sphere" }) .attr("d", path) .attr("fill", "#f0f9ff") .attr("stroke", "#cbd5e1"); const formatMoney = d3.format(",.0f"); const countries = svg.append("g") .selectAll("path") .data(features) .join("path") .attr("d", path) .attr("fill", d => { const amount = d.properties.aid; return amount === null ? "#e5e7eb" : colorScale(amount); }) .attr("stroke", "#ffffff") .attr("stroke-width", 0.6); countries.append("title") .text(d => { const p = d.properties; if (p.aid === null) { return p.name + ": No matched records"; } return ( p.name + "\nPurpose: " + purposeSelector + "\nTotal received: $" + formatMoney(p.aid) + "\nCommitments: " + p.count ); }); // Color legend const legendWidth = 380; const legendX = (width - legendWidth) / 2; const legendY = height - 75; const gradientId = "aid-purpose-gradient"; const gradient = svg.append("defs") .append("linearGradient") .attr("id", gradientId) .attr("x1", "0%") .attr("x2", "100%"); for (let i = 0; i <= 20; i++) { const t = i / 20; gradient.append("stop") .attr("offset", (t * 100) + "%") .attr("stop-color", colorScale(t * maxAid)); } svg.append("rect") .attr("x", legendX) .attr("y", legendY) .attr("width", legendWidth) .attr("height", 16) .attr("rx", 3) .attr("fill", "url(#" + gradientId + ")"); const legendScale = d3.scaleLinear() .domain([0, maxAid]) .range([legendX, legendX + legendWidth]); svg.append("g") .attr("transform", "translate(0," + (legendY + 16) + ")") .call( d3.axisBottom(legendScale) .ticks(5) .tickFormat(d3.format("~s")) ) .call(g => g.select(".domain").remove()); svg.append("text") .attr("x", width / 2) .attr("y", height - 15) .attr("text-anchor", "middle") .attr("font-size", 12) .attr("fill", "#64748b") .text("Total Aid Commitments Received (USD)"); return svg.node(); })(); display(viz3); 44:T99d,### Visualization 3: Geographic Distribution of the Five Most Frequent Aid Purposes **Analysis** The geographic distribution of financial aid varies considerably depending on the purpose of the commitment. The five most frequently recorded purposes are Sectors not specified (8,076 records), Social/welfare services (6,228), Strengthening civil society (5,600), Higher education (4,593), and Multisector aid (3,026). India is the largest recipient in three categories: Sectors not specified ($5.07 billion), Higher education ($900.7 million), and Multisector aid ($1.96 billion). This suggests that India receives substantial aid commitments across several different development categories rather than being concentrated in a single purpose. However, other countries dominate particular categories. Colombia receives approximately $6.42 billion for Social/welfare services, considerably more than India, the second-largest recipient in that category. South Africa leads Strengthening civil society with approximately $720.1 million, followed by Colombia and India. The results also reveal differences in the geographic distribution of aid. Higher education commitments are particularly prominent in India, Brazil, and Thailand, whereas Strengthening civil society commitments are concentrated among countries including South Africa, Colombia, and India. Multisector aid is especially prominent in India, Thailand, and South Africa. Overall, the maps demonstrate that aid commitments are not distributed uniformly across geographic regions or development purposes. Some countries appear repeatedly among the leading recipients, while others receive especially large commitments for specific purposes. An important distinction is that frequency measures the number of commitment records, whereas the map represents the total financial value of those commitments. A purpose with fewer records may involve larger financial amounts. **Design Rationale** An interactive choropleth map was selected to compare the geographic distribution of the five most frequently recorded financial aid purposes. A dropdown allows users to switch between purposes while maintaining a consistent geographic layout, making it easier to identify differences in recipient countries. A sequential teal-to-blue color scale represents the total amount of financial aid received for each selected purpose. Darker colors indicate larger commitments, while gray represents countries45:[{"id":"09040dddbda03374a466600047ccbc70c46e6853884eb725db2141c566ca1b78fb7cc935096e8d5468c21e8df215e73fc49cdaaf7e2f1f89139793da25be02b2","href":"https://static.observableusercontent.com/files/09040dddbda03374a466600047ccbc70c46e6853884eb725db2141c566ca1b78fb7cc935096e8d5468c21e8df215e73fc49cdaaf7e2f1f89139793da25be02b2","name":"aiddata-countries-only - aiddata-countries-only.csv","type":"text/csv","lastModified":1792623746632,"size":8760387}] 38:{"id":"9939051f4366a6a8","slug":"mini-project-1-geographic-financial-aid-due-oct-29th","title":"Mini-Project 1: Geographic Financial Aid (Due Oct. 29th)","thumbnail":"97a54225d919b58b9c3219cfffb54217845a7485cd791138ac30798968b913f4","access_level":"public","create_time":"$D2026-10-21T22:51:07.156Z","update_time":"$D2026-10-29T00:03:50.642Z","view_time":null,"first_public_time":"$D2026-11-11T03:29:08.663Z","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":"57979a561d1d4c1a","login":"shalini-gupta","name":"Shalini Gupta","avatar_url":"https://avatars-next.observableusercontent.com/94a4c374cf3a97c928da7369c41f18f34216070f9b0bdbf6f3fdeb946c6bcb47","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":294,"publish_version":294,"role":null,"authored":false,"authors":[{"type":"individual","id":"2ecf6220b7a82c80","login":"shalini-gupta","name":"Shalini Gupta","avatar_url":"https://avatars-next.observableusercontent.com/94a4c374cf3a97c928da7369c41f18f34216070f9b0bdbf6f3fdeb946c6bcb47","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"57979a561d1d4c1a","login":"shalini-gupta","name":"Shalini Gupta","avatar_url":"https://avatars-next.observableusercontent.com/94a4c374cf3a97c928da7369c41f18f34216070f9b0bdbf6f3fdeb946c6bcb47","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Mini-Project 1: Geographic Financial Aid (Due Oct. 29th)","cells":[{"id":0,"value":"# Mini-Project 1: Geographic Financial Aid (Due Oct. 29th)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":27,"value":"import { css } from \"@rk2546/infovis-cse-backend\";","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"css","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"---\n## Submission Instructions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"$3c","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"---\n## About the Dataset","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":21,"value":"This spreadsheet is a simplified and reduced version of the AidData dataset. This dataset describes commitment information for over 1.5 million development finance activities funded between 1947 and 2013. The simplified dataset contains the following columns:\n\n- **`aiddata_id`**: unique ID of the commitment\n- **`aiddata_2_id`**: secondary unique ID\n- **`year`**: year of the commitment\n- **`donor`**: country providing the financial resource\n- **`recipient`**: country receiving the financial resource\n- **`commitment_amount_usd_constant`**: the total amount of financial resources provided\n- **`coalesced_purpose_code`**: categorization ID for the stated purpose of the commitment\n- **`coalesced_purpose_name`**: the purpose of the commitment","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":58,"value":"---\n## Questions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"$3d","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":60,"value":"---\n## Grading Criteria","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"Your answers to each question are graded on the following qualities, with each question totaling up to **25 points**:\n\n- **[10pts]**: Does the visualization answer the questions posed in the exercise?\n- **[10pts]**: Does the written answer & discussion the questions posed in the exercise?\n- **[5pts]**: Is the visual representation clear? Does it have good aesthetics? If needed, you can review this notebook on clarity for reference.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"The questions above are a very useful tool for you to verify whether you are producing a good solution or not. As you go about completing this project, you can use the questions above as a self-evaluation tool in two main ways:\n\n1. Verify that you can indeed answer the questions with your visualization. If you can’t fully answer the questions, it means your solution has some problems.\n2. Compare multiple solutions to the same problem and ask yourself: “which one makes it easier for me to answer these questions?”, where easier may mean, more accurately, with less effort or faster.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":65,"value":"\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"## Students' Workspace\n\n_From this point onward, you are free to modify the notebook in any way you see fit._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"const aiData = FileAttachment(\"aiddata-countries-only - aiddata-countries-only.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"\nconst countryStats = (() => {\n const countries = new Map();\n\n for (const row of aiData) {\n const amount = +row.commitment_amount_usd_constant;\n\n if (!Number.isFinite(amount)) continue;\n\n const donor = row.donor?.trim();\n const recipient = row.recipient?.trim();\n\n for (const [name, type] of [\n [donor, \"donated\"],\n [recipient, \"received\"]\n ]) {\n if (!name) continue;\n\n if (!countries.has(name)) {\n countries.set(name, {\n country: name,\n donated: 0,\n received: 0\n });\n }\n\n countries.get(name)[type] += amount;\n }\n }\n\n return Array.from(countries.values())\n .map(d => ({\n ...d,\n net: d.donated - d.received\n }))\n .sort((a, b) =>\n (b.donated + b.received) -\n (a.donated + a.received)\n );\n})();\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"$3e","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"$3f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"const worldData = await (async () => {\n const response = await fetch(\n \"https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json\"\n );\n\n if (!response.ok) {\n throw new Error(\"Failed to load world map data\");\n }\n\n return response.json();\n})();\n\ndisplay(`World map loaded successfully: ${worldData.objects.countries.geometries.length} geographic features`);\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"const worldFeatures = await (async () => {\n const topojson = await import(\n \"https://cdn.jsdelivr.net/npm/topojson-client@3/+esm\"\n );\n\n const countries = topojson.feature(\n worldData,\n worldData.objects.countries\n ).features;\n\n return countries.map(d => ({\n ...d,\n properties: {\n ...d.properties,\n name: d.properties?.name || \"Unknown\"\n }\n }));\n})();\n\ndisplay(`Successfully prepared ${worldFeatures.length} countries with geographic boundaries and names.`);\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"$40","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"$41","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"const unmatchedAidCountries = (() => {\n const normalize = name =>\n String(name || \"\")\n .toLowerCase()\n .normalize(\"NFD\")\n .replace(/[\\u0300-\\u036f]/g, \"\")\n .replace(/[^a-z0-9]/g, \"\");\n\n const mappedNames = new Set(\n countryMapData.features\n .filter(d => d.properties.matched)\n .map(d => normalize(d.properties.name))\n );\n\n return [...countryStats]\n .filter(d => !mappedNames.has(normalize(d.country)))\n .sort((a, b) =>\n (b.donated + b.received) -\n (a.donated + a.received)\n )\n .slice(0, 30)\n .map(d => ({\n country: d.country,\n donated: Math.round(d.donated),\n received: Math.round(d.received)\n }));\n})();\n\ndisplay(unmatchedAidCountries);\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"$42","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"const purposeStats = (() => {\n const counts = new Map();\n\n for (const row of aiData) {\n const purpose = String(\n row.coalesced_purpose_name || \"\"\n ).trim();\n\n if (!purpose) continue;\n\n counts.set(purpose, (counts.get(purpose) || 0) + 1);\n }\n\n return [...counts.entries()]\n .map(([purpose, count]) => ({\n purpose,\n count\n }))\n .sort((a, b) => b.count - a.count);\n})();\n\ndisplay(purposeStats.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":81,"value":"const purposeCountryData = (() => {\n const topFive = purposeStats\n .slice(0, 5)\n .map(d => d.purpose);\n\n const totals = new Map();\n\n for (const row of aiData) {\n const purpose = String(\n row.coalesced_purpose_name || \"\"\n ).trim();\n\n const recipient = String(\n row.recipient || \"\"\n ).trim();\n\n const amount = +row.commitment_amount_usd_constant;\n\n if (\n !topFive.includes(purpose) ||\n !recipient ||\n !Number.isFinite(amount)\n ) continue;\n\n const key = `${purpose}|||${recipient}`;\n\n if (!totals.has(key)) {\n totals.set(key, {\n purpose,\n recipient,\n total: 0,\n count: 0\n });\n }\n\n const entry = totals.get(key);\n entry.total += amount;\n entry.count += 1;\n }\n\n return [...totals.values()];\n})();\n\ndisplay({\n totalRecords: purposeCountryData.length,\n sample: purposeCountryData.slice(0, 10)\n});\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"\nconst purposeSelector = view(\n Inputs.select(\n purposeStats.slice(0, 5).map(d => d.purpose),\n {\n label: \"Select Aid Purpose\",\n value: purposeStats[0].purpose\n }\n )\n);\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"$43","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"const purposeComparison = (() => {\n const topFive = purposeStats.slice(0, 5);\n\n return topFive.map(p => {\n const recipients = purposeCountryData\n .filter(d => d.purpose === p.purpose)\n .sort((a, b) => b.total - a.total)\n .slice(0, 5);\n\n return {\n purpose: p.purpose,\n frequency: p.count,\n topRecipients: recipients.map(d => ({\n country: d.recipient,\n totalUSD: Math.round(d.total),\n records: d.count\n }))\n };\n });\n})();\n\ndisplay(purposeComparison);\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"const purposeComparisonTable = purposeComparison.flatMap(\n d => d.topRecipients.map((r, i) => ({\n purpose: d.purpose,\n rank: i + 1,\n country: r.country,\n totalUSD: r.totalUSD,\n commitments: r.records\n }))\n);\n\ndisplay(Inputs.table(purposeComparisonTable, {\n columns: [\n \"purpose\",\n \"rank\",\n \"country\",\n \"totalUSD\",\n \"commitments\"\n ],\n header: {\n purpose: \"Aid Purpose\",\n rank: \"Rank\",\n country: \"Recipient Country\",\n totalUSD: \"Total Aid (USD)\",\n commitments: \"Records\"\n }\n}));\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"\ndisplay(\n Inputs.table(\n purposeComparison.map(d => ({\n purpose: d.purpose,\n frequency: d.frequency,\n topCountry: d.topRecipients[0]?.country,\n topAmountUSD: d.topRecipients[0]?.totalUSD,\n secondCountry: d.topRecipients[1]?.country,\n thirdCountry: d.topRecipients[2]?.country\n })),\n {\n columns: [\n \"purpose\",\n \"frequency\",\n \"topCountry\",\n \"topAmountUSD\",\n \"secondCountry\",\n \"thirdCountry\"\n ],\n header: {\n purpose: \"Aid Purpose\",\n frequency: \"Frequency\",\n topCountry: \"Largest Recipient\",\n topAmountUSD: \"Aid Received (USD)\",\n secondCountry: \"2nd Recipient\",\n thirdCountry: \"3rd Recipient\"\n }\n }\n )\n);\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"$44","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W45","stdlib":"2"}} 33:null