34:["$","title",null,{"children":"Mini-Project 1: Geographic Financial Aid (Due Oct. 29th) | Zhiqi Zhao | 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:Tfd4,function drawComparison(countryData) { const W = 960; const H = 700; const margin = {top: 80, right: 35, bottom: 80, left: 90}; const svg = d3.create("svg") .attr("viewBox", [0, 0, W, H]) .style("max-width", "100%") .style("height", "auto") .style("background", "white") .style("font", "12px sans-serif"); const maximum = d3.max( countryData, d => Math.max(d.donated, d.received) ) * 1.15; const x = d3.scaleSymlog() .constant(1e6) .domain([0, maximum]) .range([margin.left, W - margin.right]); const y = d3.scaleSymlog() .constant(1e6) .domain([0, maximum]) .range([H - margin.bottom, margin.top]); const color = d3.scaleDiverging( [-1, 0, 1], d3.interpolateBrBG ); const ticks = [0, 1e6, 1e7, 1e8, 1e9, 1e10, 1e11]; const formatTick = value => value === 0 ? "0" : value >= 1e9 ? `${value / 1e9}B` : `${value / 1e6}M`; svg.append("text") .attr("x", margin.left) .attr("y", 27) .attr("font-size", 21) .attr("font-weight", "bold") .text("Visualization 1: Donated vs. received commitments"); svg.append("text") .attr("x", margin.left) .attr("y", 51) .attr("fill", "#555") .text("1973–2013 · constant USD · symlog axes · hover over a point for details"); svg.append("g") .attr("transform", `translate(0,${H - margin.bottom})`) .call( d3.axisBottom(x) .tickValues(ticks) .tickFormat(formatTick) .tickSize(-(H - margin.top - margin.bottom)) ) .call(g => g.selectAll(".tick line").attr("stroke", "#e5e7eb")); svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call( d3.axisLeft(y) .tickValues(ticks) .tickFormat(formatTick) .tickSize(-(W - margin.left - margin.right)) ) .call(g => g.selectAll(".tick line").attr("stroke", "#e5e7eb")); svg.append("line") .attr("x1", x(0)) .attr("y1", y(0)) .attr("x2", x(maximum)) .attr("y2", y(maximum)) .attr("stroke", "#666") .attr("stroke-dasharray", "5,5"); svg.append("text") .attr("x", x(2e8)) .attr("y", y(2e8) - 12) .text("Received = donated"); svg.append("text") .attr("x", 310) .attr("y", 115) .attr("fill", "#8c510a") .text("Brown: receive more"); svg.append("text") .attr("x", 700) .attr("y", 580) .attr("fill", "#01665e") .text("Teal: donate more"); const points = svg.append("g") .selectAll("circle") .data(countryData) .join("circle") .attr("cx", d => x(d.donated)) .attr("cy", d => y(d.received)) .attr("r", 6) .attr("fill", d => color(d.balance)) .attr("stroke", "#333") .attr("stroke-width", 0.6) .attr("opacity", 0.85); points.append("title") .text(d => `${d.name}\nDonated: $${d3.format(",")(d.donated)}\nReceived: $${d3.format(",")(d.received)}` ); const labels = new Map([ ["United States", [-110, 18]], ["Japan", [-40, -10]], ["Germany", [-65, -10]], ["United Kingdom", [-100, -10]], ["India", [9, -8]], ["Thailand", [9, -8]], ["Poland", [10, -8]], ["South Africa", [9, 16]], ["Korea", [-45, 17]] ]); svg.append("g") .selectAll("text") .data(countryData.filter(d => labels.has(d.name))) .join("text") .attr("x", d => x(d.donated) + labels.get(d.name)[0]) .attr("y", d => y(d.received) + labels.get(d.name)[1]) .attr("paint-order", "stroke") .attr("stroke", "white") .attr("stroke-width", 3) .attr("fill", "#222") .text(d => d.name); svg.append("text") .attr("x", (margin.left + W - margin.right) / 2) .attr("y", H - 25) .attr("text-anchor", "middle") .text("Total donated commitments (constant USD) →"); svg.append("text") .attr( "transform", `translate(23,${(margin.top + H - margin.bottom) / 2}) rotate(-90)` ) .attr("text-anchor", "middle") .text("Total received commitments (constant USD) →"); return svg.node(); } display(drawComparison(countries));3f:T594,### Visualization 1: Analysis Countries differ a lot in how much they donate and receive. The United States and Japan donate the most, about $116.18 billion and $114.18 billion. India receives the most, about $133.98 billion. The United States, Japan, and Germany donate much more than they receive. For example, Germany donates about $47.22 billion but receives only $60,164. India, Thailand, Brazil, Colombia, Poland, and South Africa receive much more than they donate. India has no donations recorded in this file, while Thailand receives about $49.04 billion and donates only $25,461. Some countries are more balanced. Australia donates about $2.45 billion and receives about $2.57 billion. These comparisons are based only on the provided dataset. ### Design reasons I wanted to compare donated and received amounts for each country, so I chose a scatterplot. Each point represents one country. The dashed line shows equal amounts, making it easy to see which countries donate more or receive more. Brown marks countries that receive more, and teal marks countries that donate more. The amounts range from zero to billions of dollars, so I used symlog scales on both axes. They allow zero values and keep smaller amounts visible, although equal distances do not mean equal dollar differences. I labeled selected countries to avoid crowding the chart. Hovering over a point shows the country's name and exact amounts.40:Tf3c,function drawBalanceMap(countryData, geography) { const W = 960; const H = 620; const svg = d3.create("svg") .attr("viewBox", [0, 0, W, H]) .style("max-width", "100%") .style("height", "auto") .style("background", "white") .style("font", "12px sans-serif"); const countryLookup = new Map( countryData.map(d => [d.name, d]) ); const aliases = { "United States of America": "United States", "South Korea": "Korea", "Slovakia": "Slovak Republic", "Czechia": "Czech Republic" }; const countryName = feature => aliases[feature.properties.name] || feature.properties.name; const features = geography.features.filter( d => d.properties.name !== "Antarctica" ); const projection = d3.geoNaturalEarth1() .fitExtent([[20, 80], [W - 20, 510]], {type: "Sphere"}); const path = d3.geoPath(projection); const color = d3.scaleDiverging( [-1, 0, 1], d3.interpolateBrBG ); function countryDetails(name) { const d = countryLookup.get(name); return d ? `${name}\nDonated: $${d3.format(",")(d.donated)}\nReceived: $${d3.format(",")(d.received)}\nBalance: ${d3.format(".3f")(d.balance)}` : `${name}\nNot included in the aid dataset`; } svg.append("text") .attr("x", 28) .attr("y", 28) .attr("font-size", 21) .attr("font-weight", "bold") .text("Visualization 2: Where do countries donate or receive more?"); svg.append("text") .attr("x", 28) .attr("y", 53) .attr("fill", "#555") .text("1973–2013 · balance = (donated − received) / (donated + received)"); svg.append("path") .datum({type: "Sphere"}) .attr("d", path) .attr("fill", "#f7fafc") .attr("stroke", "#cbd5e1"); svg.append("g") .selectAll("path") .data(features) .join("path") .attr("d", path) .attr("fill", feature => { const d = countryLookup.get(countryName(feature)); return d ? color(d.balance) : "#dddddd"; }) .attr("stroke", "white") .attr("stroke-width", 0.5) .append("title") .text(feature => countryDetails(countryName(feature))); const smallCountries = [ {name: "Monaco", coordinates: [7.4246, 43.7384]}, {name: "Liechtenstein", coordinates: [9.5554, 47.166]} ]; svg.append("g") .selectAll("circle") .data(smallCountries) .join("circle") .attr("cx", d => projection(d.coordinates)[0]) .attr("cy", d => projection(d.coordinates)[1]) .attr("r", 3) .attr("fill", d => { const country = countryLookup.get(d.name); return country ? color(country.balance) : "#dddddd"; }) .attr("stroke", "#333") .attr("stroke-width", 0.5) .append("title") .text(d => countryDetails(d.name)); svg.append("text") .attr("x", 28) .attr("y", 540) .text("Receive more ← balanced → donate more"); svg.append("g") .selectAll("rect") .data(d3.range(100)) .join("rect") .attr("x", d => 28 + d * 2.6) .attr("y", 552) .attr("width", 2.8) .attr("height", 12) .attr("fill", d => color(-1 + 2 * d / 99)); const legendScale = d3.scaleLinear() .domain([-1, 1]) .range([28, 288]); svg.append("g") .attr("transform", "translate(0,564)") .call( d3.axisBottom(legendScale) .tickValues([-1, 0, 1]) .tickFormat(d3.format(".1f")) .tickSize(4) ) .call(g => g.select(".domain").remove()); svg.append("rect") .attr("x", 350) .attr("y", 552) .attr("width", 15) .attr("height", 12) .attr("fill", "#dddddd"); svg.append("text") .attr("x", 373) .attr("y", 563) .text("Not included in the aid dataset"); svg.append("text") .attr("x", 28) .attr("y", 598) .attr("fill", "#555") .text("Hover for amounts. Monaco and Liechtenstein use enlarged points."); return svg.node(); } display(drawBalanceMap(countries, world));41:T739,### Visualization 2: Analysis Countries that mostly donate cluster in Western and Northern Europe. Examples include Germany, France, the United Kingdom, the Netherlands, and Sweden. The United States and Japan also donate much more than they receive. Countries that mostly receive include India and Thailand in Asia, and Brazil, Colombia, and Chile in South America. South Africa also receives much more than it donates. In Europe, Poland, Hungary, and Romania mostly receive, so countries in the same region do not always follow the same pattern. These patterns apply only to the countries included in this dataset. Germany and Poland are neighboring countries with very different patterns. Germany donates about $47.22 billion and receives only $60,164. Poland receives about $24.52 billion and donates only about $403,184. Spain and Portugal are another example. Spain donates about $2.01 billion and receives $561.71 million, while Portugal donates $68.90 million and receives $175.24 million. They have opposite patterns, although the difference is less extreme than Germany and Poland. ### Design reasons I chose a world map because the question asks about geographical areas and neighboring countries. Showing countries in their locations makes regional patterns easier to see. I used the balance between donated and received amounts for the colors. Brown means a country receives more, teal means it donates more, and colors near the middle mean the amounts are closer. This shows the direction of the difference without letting countries with the largest amounts control the color scale. Hovering shows the exact amounts. Gray means a country is not included in this aid dataset, rather than that it has no aid activity. Monaco and Liechtenstein are shown as enlarged points because they are missing from the map's country polygons.42:T1999,function drawPurposeMaps(metric) { const W = 1020; const H = 1050; const panelWidth = 500; const panelHeight = 290; const svg = d3.create("svg") .attr("viewBox", [0, 0, W, H]) .style("max-width", "100%") .style("height", "auto") .style("background", "white") .style("font", "12px sans-serif"); const aliases = { "United States of America": "United States", "South Korea": "Korea", "Slovakia": "Slovak Republic", "Czechia": "Czech Republic" }; const countryName = feature => aliases[feature.properties.name] || feature.properties.name; const features = world.features.filter( d => d.properties.name !== "Antarctica" ); const smallCountries = [ {name: "Monaco", coordinates: [7.4246, 43.7384]}, {name: "Liechtenstein", coordinates: [9.5554, 47.166]} ]; const projection = d3.geoNaturalEarth1() .fitExtent( [[6, 8], [panelWidth - 6, 227]], {type: "Sphere"} ); const path = d3.geoPath(projection); const maximum = d3.max( topPurposes.flatMap(([purpose]) => Array.from( purposeStats.get(purpose).values(), d => d[metric] ) ) ) || 1; const color = metric === "share" ? d3.scaleSequential(d3.interpolateBlues).domain([0, maximum]) : d3.scaleSequentialSqrt(d3.interpolateBlues).domain([0, maximum]); const metricLabels = { count: "Number of commitment records", amount: "Committed amount (constant USD)", share: "Purpose records / all received records in each country" }; const formatValue = value => metric === "share" ? d3.format(".1%")(value) : metric === "amount" ? ( value >= 1e9 ? `${d3.format(".2f")(value / 1e9)}B` : value >= 1e6 ? `${d3.format(".1f")(value / 1e6)}M` : d3.format(",.0f")(value) ) : d3.format(",.0f")(value); svg.append("text") .attr("x", 28) .attr("y", 28) .attr("font-size", 21) .attr("font-weight", "bold") .text("Visualization 3: Where are the five most frequent aid purposes received?"); svg.append("text") .attr("x", 28) .attr("y", 51) .attr("fill", "#555") .text("1973–2013 · purposes ranked by record count · same color scale across all five maps"); topPurposes.forEach(([purpose, totalCount], index) => { const stats = purposeStats.get(purpose); const panel = svg.append("g") .attr( "transform", `translate(${(index % 2) * 510 + 5},${75 + Math.floor(index / 2) * panelHeight})` ); panel.append("text") .attr("x", 12) .attr("y", 15) .attr("font-size", 14) .attr("font-weight", "bold") .text(`${index + 1}. ${purpose}`); panel.append("text") .attr("x", 12) .attr("y", 34) .attr("fill", "#555") .text(`${d3.format(",")(totalCount)} records in the dataset`); const map = panel.append("g") .attr("transform", "translate(0,43)"); function fillCountry(name) { if (!recipientCounts.has(name)) return "#dddddd"; return color(stats.get(name)?.[metric] || 0); } function details(name) { if (!recipientCounts.has(name)) { return `${name}\nNo recipient records in this dataset`; } const d = stats.get(name) || { count: 0, amount: 0, share: 0 }; return `${name} — ${purpose}\nRecords: ${d3.format(",")(d.count)}\nAmount: $${d3.format(",")(d.amount)}\nShare of all received records: ${d3.format(".2%")(d.share)}`; } map.append("path") .datum({type: "Sphere"}) .attr("d", path) .attr("fill", "#f7fafc") .attr("stroke", "#cbd5e1"); map.append("g") .selectAll("path") .data(features) .join("path") .attr("d", path) .attr("fill", d => fillCountry(countryName(d))) .attr("stroke", "white") .attr("stroke-width", 0.45) .append("title") .text(d => details(countryName(d))); map.append("g") .selectAll("circle") .data(smallCountries) .join("circle") .attr("cx", d => projection(d.coordinates)[0]) .attr("cy", d => projection(d.coordinates)[1]) .attr("r", 2.8) .attr("fill", d => fillCountry(d.name)) .attr("stroke", "#333") .attr("stroke-width", 0.5) .append("title") .text(d => details(d.name)); }); svg.append("text") .attr("x", 28) .attr("y", 970) .text(metricLabels[metric]); svg.append("g") .selectAll("rect") .data(d3.range(100)) .join("rect") .attr("x", d => 28 + d * 2.6) .attr("y", 982) .attr("width", 2.8) .attr("height", 12) .attr("fill", d => color(maximum * d / 99)); const legendScale = d3.scaleLinear() .domain([0, maximum]) .range([28, 288]); svg.append("g") .attr("transform", "translate(0,994)") .call( d3.axisBottom(legendScale) .tickValues([0, maximum / 2, maximum]) .tickFormat(formatValue) .tickSize(4) ) .call(g => g.select(".domain").remove()); svg.append("text") .attr("x", 350) .attr("y", 995) .attr("fill", "#555") .text( metric === "share" ? "Linear color scale" : "Square-root color scale; legend shows original values" ); svg.append("text") .attr("x", 28) .attr("y", 1032) .attr("fill", "#555") .text("Gray: no recipient records. Lightest blue: zero for this purpose among recorded recipients."); return svg.node(); } const purposeContainer = document.createElement("div"); const purposeLabel = document.createElement("label"); purposeLabel.textContent = "Map metric: "; const purposeSelect = document.createElement("select"); for (const [label, value] of [ ["Record count", "count"], ["Committed amount", "amount"], ["Within-country record share", "share"] ]) { const option = document.createElement("option"); option.textContent = label; option.value = value; purposeSelect.append(option); } purposeLabel.style.cssText = "font: bold 22px sans-serif; color: #173b63;"; purposeSelect.style.fontSize = "20px"; purposeSelect.style.padding = "12px"; purposeSelect.style.margin = "0 0 20px 12px"; purposeLabel.append(purposeSelect); purposeContainer.append(purposeLabel); const purposeChartArea = document.createElement("div"); purposeContainer.append(purposeChartArea); function updatePurposeMaps() { purposeChartArea.replaceChildren( drawPurposeMaps(purposeSelect.value) ); } purposeSelect.addEventListener("change", updatePurposeMaps); updatePurposeMaps(); display(purposeContainer);43:T989,### Visualization 3: Analysis The five most frequent purposes are Sectors not specified, Social/ welfare services, Strengthening civil society, Higher education, and Multisector aid. They are selected by record count, rather than total amount. The maps show some similar geographical patterns. Many records go to the included countries in South America, India and Thailand in Asia, and South Africa. However, the leading country changes by purpose. India has the most records for Sectors not specified (1,684) and Multisector aid (810). South Africa leads Social/ welfare services (1,100), Colombia leads Strengthening civil society (1,551), and Brazil leads Higher education (844). Countries also differ in the types of aid they receive. Strengthening civil society makes up 11.54% of Colombia's received records, compared with 2.88% in Thailand. Higher education makes up 7.46% in Chile, compared with 3.17% in India. These percentages use all received records in each country. The amount view shows another difference. Colombia receives about $6.42 billion for Social/ welfare services, the largest amount for that purpose, even though South Africa has more records. India receives the largest amounts for Sectors not specified, Higher education, and Multisector aid. South Africa receives the largest amount for Strengthening civil society. More records do not always mean more money. These results apply only to the provided dataset. ### Design reasons I chose five maps to show where countries receive each type of aid and make geographical differences easier to compare. They use the same map layout and share one color scale for the selected metric. Darker blue means a higher value. The dropdown lets readers compare record counts, committed amounts, and within-country record shares. Counts show how frequent each purpose is, amounts show the money committed, and shares show the mix of aid each country receives. Counts and amounts show the size of aid activity, but countries with more aid stand out more. Shares make it easier to compare aid types within each country, but a high share may be based on only a few records. I used square-root color scales for counts and amounts to keep smaller values visible, and a linear scale for shares. Hovering shows the exact values. Gray means there are no recipient records for that country, while the lightest blue means a recorded recipient has zero records for that purpose.44:[{"id":"09040dddbda03374a466600047ccbc70c46e6853884eb725db2141c566ca1b78fb7cc935096e8d5468c21e8df215e73fc49cdaaf7e2f1f89139793da25be02b2","href":"https://static.observableusercontent.com/files/09040dddbda03374a466600047ccbc70c46e6853884eb725db2141c566ca1b78fb7cc935096e8d5468c21e8df215e73fc49cdaaf7e2f1f89139793da25be02b2","name":"aiddata.csv","type":"text/csv","lastModified":1792635966000,"size":8760387},{"id":"324aa7ca20aed219dd93179d95b4c83544157d2a12e424a28839fa033fea1238027ee81a07a5d8570b30ea37a73678e1ebf1b957716b2b3a640b7445a7ef8a5a","href":"https://static.observableusercontent.com/files/324aa7ca20aed219dd93179d95b4c83544157d2a12e424a28839fa033fea1238027ee81a07a5d8570b30ea37a73678e1ebf1b957716b2b3a640b7445a7ef8a5a","name":"world-countries.geojson","type":"application/geo+json","lastModified":1792635966000,"size":436089}] 38:{"id":"818ff9097a80ee8a","slug":"mini-project-1-geographic-financial-aid-due-oct-29th","title":"Mini-Project 1: Geographic Financial Aid (Due Oct. 29th)","thumbnail":"3a5031b50a01cff507e7547289a3b14d47ad67cc48f38e5fae48d7f3c37aa411","access_level":"public","create_time":"$D2026-10-21T20:12:15.459Z","update_time":"$D2026-10-21T21:38:50.410Z","view_time":null,"first_public_time":"$D2026-10-21T21:18:29.557Z","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":"ec4f177fe289becd","login":"zz10677","name":"Zhiqi Zhao","avatar_url":null,"tier":"starter_2024","bio":"","following":false},"version":261,"publish_version":261,"role":null,"authored":false,"authors":[{"type":"individual","id":"ffa59d7ff73f730c","login":"zz10677","name":"Zhiqi Zhao","avatar_url":null,"tier":null,"bio":"","following":false}],"members":[{"type":"team","id":"ec4f177fe289becd","login":"zz10677","name":"Zhiqi Zhao","avatar_url":null,"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":"import * as d3 from \"npm:d3@7\";\n\nconst raw = await FileAttachment(\"aiddata.csv\").csv();\nconst world = await FileAttachment(\"world-countries.geojson\").json();\n\ndisplay(raw.length);\ndisplay(world.features.length);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"### Data and sources\n\nI used the AidData file provided in the assignment. It has 98,540 records from 1973 to 2013. I processed the data in JavaScript in this notebook and kept all records, including one negative amount.\n\nThe maps use Natural Earth boundaries from [world-atlas](https://github.com/topojson/world-atlas). I converted the [original map file](https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json) to GeoJSON using the code below and matched its country names to the aid data.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"import {feature} from \"npm:topojson-client@3\";\n\nconst originalMap = await d3.json(\n \"https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json\"\n);\n\nconst convertedMap = feature(\n originalMap,\n originalMap.objects.countries\n);\n\ndisplay(convertedMap.features.length);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"const rows = raw.map(d => ({\n ...d,\n donor: d.donor.trim(),\n recipient: d.recipient.trim(),\n amount: Number(d.commitment_amount_usd_constant)\n}));\n\nconst donated = d3.rollup(\n rows,\n v => d3.sum(v, d => d.amount),\n d => d.donor\n);\n\nconst received = d3.rollup(\n rows,\n v => d3.sum(v, d => d.amount),\n d => d.recipient\n);\n\nconst countries = Array.from(\n d3.union(rows.map(d => d.donor), rows.map(d => d.recipient)),\n name => {\n const D = donated.get(name) || 0;\n const R = received.get(name) || 0;\n\n return {\n name,\n donated: D,\n received: R,\n balance: D + R ? (D - R) / (D + R) : 0\n };\n }\n);\n\ndisplay(countries.length);\ndisplay(countries.find(d => d.name === \"United States\"));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"$3e","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"$3f","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"$40","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"$41","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"const topPurposes = d3.rollups(\n rows,\n group => group.length,\n d => d.coalesced_purpose_name\n)\n .sort((a, b) => d3.descending(a[1], b[1]))\n .slice(0, 5);\n\nconst recipientCounts = d3.rollup(\n rows,\n group => group.length,\n d => d.recipient\n);\n\nconst purposeStats = new Map(\n topPurposes.map(([purpose]) => [\n purpose,\n d3.rollup(\n rows.filter(d => d.coalesced_purpose_name === purpose),\n group => ({\n count: group.length,\n amount: d3.sum(group, d => d.amount),\n share: group.length / recipientCounts.get(group[0].recipient)\n }),\n d => d.recipient\n )\n ])\n);\n\ndisplay(topPurposes);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"$42","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"$43","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W44","stdlib":"2"}} 33:null