34:["$","title",null,{"children":"Mini-Project 1: Geographic Financial Aid (Due Oct. 29th) | Yathin Reddy Duvuru | 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:T414,// Create a Scatter Plot Visualization const q1VizDims = { width: 800, height: 350, marginTop: 50, marginRight: 250, marginBottom: 50, marginLeft: 100, pointRadius: 5 }; // Custom formatting function replacing 'G' with 'B' for Billions const formatCurrency = d => { if (d === 0) return "$0"; return "$" + d3.format("~s")(d).replace("G", "B"); }; // Get the Max Amount Donated/Received to Have Same Scales const maxAmount = d3.max( countryTotals, d => Math.max( d["Aggregate Donations Amount"], d["Aggregate Received Amount"] ) ); // Define clean logarithmic tick values (e.g., $1M, $100M, $10B, $100B) const customTicks = [0, 1e6, 1e7, 1e8, 1e9, 1e10, 1e11, 1e12].filter(d => d <= maxAmount); const q1Plot = d3.create("svg") .attr("width", q1VizDims.width + q1VizDims.marginLeft + q1VizDims.marginRight) .attr("height", q1VizDims.height + q1VizDims.marginTop + q1VizDims.marginBottom); const q1Chart = q1Plot.append("g") .attr("transform", `translate(${q1VizDims.marginLeft},${q1VizDims.marginTop})`); 3f:T571,//Create a HTML Element Tooltip - Generated w/ AI const chartContainer = d3.create("div") .style("position", "relative"); const tooltip = chartContainer.append("div") .style("position", "absolute") .style("opacity", 0) .style("background-color", "#333") .style("color", "white") .style("padding", "8px 12px") .style("border-radius", "5px") .style("font-size", "12px") .style("pointer-events", "none"); chartContainer.node().appendChild(q1Plot.node()); q1ScatterDataPoints .on("mouseover", function(event, d) { tooltip .style("opacity", 0.95); d3.select(this) .attr("stroke", "black") .attr("stroke-width", 1.5); }) .on("mousemove", function(event, d) { const donated = d["Aggregate Donations Amount"]; const received = d["Aggregate Received Amount"]; const net = d["Net Aid Amount"]; const [mouseX, mouseY] = d3.pointer(event, chartContainer.node()); tooltip .html(` ${d["Country Name"]}
Donated: $${d3.format(",.0f")(donated)}
Received: $${d3.format(",.0f")(received)}
Net Aid: $${d3.format(",.0f")(net)} `) .style("left", `${mouseX + 12}px`) .style("top", `${mouseY - 20}px`); }) .on("mouseleave", function(event, d) { tooltip .style("opacity", 0); d3.select(this) .attr("stroke", "none"); }); 40:T739,### Q1.3 - Write Up I used a Symmetric Logarithmic scale for the X and Y-axis. Initially, I tried a linear scale but this resulted in most of the points clustering on the axes making the chart hard to read and wasted the space on the chart. I used Symmetric Logarithm over Logarithm because of the large range in values for the aid amounts, as it acts as a linear scale below a specified constant (Here, I specified 1e6 for the constant by trying out different values) and as a logarithmic scale elsewhere (this was important as we have several zero values in both axes). For the domain of the scales, I used a max total amount b/w aggregation donations and aggregate reception columns so that we would have the same scale for both axes, which makes it possible to draw a diagonal line representing equal aggregate donations and equal aggregate amounts received. This diagonal line makes it easier to gauge on a glance whether a country is a net donor or a net receiver and to what magnitude. I added a brief legend for this line to be safe denoting what it represents. Finally, I added a tooltip as a HTML div element as it gives me greater flexibility in styling the tooltip that shows up. As a result, the final output is a HTML with the plot/chart SVG and the tooltip div embedded in it. I generated the tooltip w/ AI for styling purposes. The tooltip displays the aggregate donation amount, aggregate amount received, as well as the net aid (Total amount donated - Total amount received). I also had to make minor cosmetic changes such as defining the tick values myself because the automatically generated tick values by D3 for the scale chosen was not uniform. I chose a set of custom ticks that is more intuitive and evenly spaced. I also had to create a formatting function to replace the the G with B standing for billions in the ticks.41:T4ce,### External Geographic Dataset: World Atlas For Visualizations #2 and #3, I used the **World Atlas** dataset to obtain the geographic boundaries of countries for constructing choropleth maps. - **Source:** [World Atlas (world-atlas npm package)](https://github.com/topojson/world-atlas) - **Dataset URL:** https://cdn.jsdelivr.net/npm/world-atlas@2/countries-50m.json - **Format:** TopoJSON - **Resolution:** 1:50 million (50m) - **Purpose:** To obtain country boundaries and geographic shapes for rendering the choropleth visualizations. The dataset was loaded directly into Observable using `d3.json()`. I then used `topojson.feature()` to convert the TopoJSON country geometries into GeoJSON features compatible with D3's geographic path generator. I selected the 50m resolution dataset instead of the coarser 110m version because it provides greater geographic detail and includes smaller countries relevant to this analysis, such as Monaco and Liechtenstein. Since some country names differed between the AidData dataset and World Atlas, I created an alias mapping to standardize country names before joining the financial aid data with the geographic features. The same geographic dataset is reused in both Q2 and Q3.42:T6b8,// Create the q2MapLegend - Generated w/ AI const q2MapLegendW = 180, q2MapLegendH = 12; const q2MapLegendX = q2VizDims.marginLeft + q2VizDims.width + 30; const q2MapLegendY = q2VizDims.marginTop + 20; // Gradient Sampled from Diverging Color Scale const grad = q2Plot.append("defs") .append("linearGradient") .attr("id", "aid-gradient"); d3.range(0, 1.01, 0.1).forEach(t => { grad.append("stop") .attr("offset", `${t * 100}%`) .attr("stop-color", q2ColorScale(-1 + 2 * t)); }); const q2MapLegend = q2Plot.append("g") .attr("transform", `translate(${q2MapLegendX}, ${q2MapLegendY})`); q2MapLegend.append("text") .attr("y", -8) .attr("font-size", 12) .text("Normalized Aid Balance"); q2MapLegend.append("rect") .attr("width", q2MapLegendW) .attr("height", q2MapLegendH) .attr("fill", "url(#aid-gradient)"); const q2MapLegendScale = d3.scaleLinear() .domain([-1, 1]) .range([0, q2MapLegendW]); q2MapLegend.append("g") .attr("transform", `translate(0, ${q2MapLegendH})`) .call(d3.axisBottom(q2MapLegendScale) .tickValues([-1, -0.5, 0, 0.5, 1]) .tickFormat(d3.format(".1f"))) .call(g => g.select(".domain").remove()); // "No Data" swatch const noData = q2MapLegend.append("g") .attr("transform", "translate(0, 50)"); noData.append("rect") .attr("width", 16) .attr("height", 16) .attr("fill", "#d9d9d9") .attr("stroke", "#999"); noData.append("text") .attr("x", 24) .attr("y", 12) .attr("font-size", 12) .text("No Data"); q2MapLegend.append("text").attr("y", 40).attr("font-size", 10).text("← Net Receiver"); q2MapLegend.append("text").attr("y", 40).attr("x", q2MapLegendW).attr("text-anchor", "end") .attr("font-size", 10).text("Net Donor →");43:T4af,### Q2.2 - Write Up Q - 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? The countries that tend to mostly donate are present in North America and Europe (along w/ Japan) while the countries that mostly receive aid are in South America, the Middle East, South Africa, India and Thailand. In terms of neighboring countries that have radically different patterns of aid this can be seen in Europe where there is a stark difference between Eastern Europe and Western Europe. Eastern Europe, specifically, countries such as Greece, Romania, Hungary, and Poland are net receivers of aid, whereas Western European countries such as Spain, France, the UK, and Germany are net donors of aid. This difference is also quite strong in terms of magnitude (they lie on the extreme ends of the Normalized Aid Balance scale). Additionally, Portugal and Ireland, which technically lie in Western Europe are actually net receivers of aid in contrast to their neighboring counterparts such as UK, France, and Spain44:T9a6,### Q2.3 - Write Up For this question, I decided to create a choropleth visualization. To begin I needed geodata for the country shapes to be drawn as paths. I got this data from an external world-atlas data at a 50m resolution. I needed this resolution because the higher 110m resolution did not have a couple of countries from our data set, specifically Liechtenstein and Monaco. I used the geodata to draw the country shapes as well as the borders for the countries. Then I constructed a metric titled the normalized aid balance, which is a normalized value that represents if a country is a net donor or a net receiver (as it is not advised to plot absolute values in a choropleth as extreme outliers could warp the scale dramatically and make the plot hard to read). The formula: (Donated - Received)/(Donated + Received). There is a limitation with this approach that I would like to mention: A normalized balance of +1 can describe a country that donated a relatively small amount and received nothing, or one that donated billions and received nothing. I used the Geo Natural Earth 1 projection because it is a visually appealing projection without the strong visual bias toward high-latitude countries introduced by Mercator. Its curved boundaries and compact global layout also make it well suited for displaying the entire world in a single choropleth map. I also ran into an issue where the country names from the provided data set had a few rows where the names were mismatched with the country names from the geodata that I imported (for example US versus United States of America), so I had to create an alias mapping for these mismatched country names so we plot the colors accurately. I created a gradient scale legend representing what the colors mean as well as a no data swatch for all the countries that we do not have data for in the provided aid data set. I created a diverging color scale because the center value was important in this case as it represented a country that had an equilibrium between aid donated and aid received. I also used the interpolateRdBu gradient because I could represent the net receivers with the red, the net donors with the blue and the gradient would continuously decrease towards white representing the donors who had a balance between aid donated and received from either side. I also added a zoom capability so that the user can zoom in to regions of interest to better be able to compare smaller countries.45:T792,// Create Legend - Generated w/ AI const legendW = 180; const legendH = 12; const legendX = q3VizDims.marginLeft + q3VizDims.width + 30; const legendY = q3VizDims.marginTop + 20; // Create Gradient Definition (Only Once) const gradient = q3Plot.selectAll("defs.q3-defs") .data([null]) .join("defs") .attr("class", "q3-defs") .selectAll("linearGradient") .data([null]) .join("linearGradient") .attr("id", "q3-gradient"); // Create Gradient Stops gradient.selectAll("stop") .data(d3.range(0, 1.001, 0.01)) .join("stop") .attr("offset", d => `${d * 100}%`); // Create Legend Group (Only Once) const legend = q3Plot.selectAll("g.q3-legend") .data([null]) .join("g") .attr("class", "q3-legend") .attr("transform", `translate(${legendX}, ${legendY})`); // Create Legend Title (Only Once) const legendTitle = legend.selectAll("text.legend-title") .data([null]) .join("text") .attr("class", "legend-title") .attr("y", -8) .attr("font-size", 12); // Create Gradient Rectangle (Only Once) legend.selectAll("rect.legend-gradient") .data([null]) .join("rect") .attr("class", "legend-gradient") .attr("width", legendW) .attr("height", legendH) .attr("fill", "url(#q3-gradient)"); // Create Legend Axis Group (Only Once) const legendAxis = legend.selectAll("g.legend-axis") .data([null]) .join("g") .attr("class", "legend-axis") .attr("transform", `translate(0, ${legendH})`); // Create No Data Group (Only Once) const noData = legend.selectAll("g.no-data") .data([null]) .join("g") .attr("class", "no-data") .attr("transform", "translate(0, 55)"); // No Data Rectangle noData.selectAll("rect") .data([null]) .join("rect") .attr("width", 16) .attr("height", 16) .attr("fill", "#d9d9d9") .attr("stroke", "#999"); // No Data Label noData.selectAll("text") .data([null]) .join("text") .attr("x", 24) .attr("y", 12) .attr("font-size", 12) .text("No Data");46:Ta46,// Dynamically Color in Countries, Update Chart Title, Legend and Tool Tips (w/ Transitions) // Get Commitment Amounts for Selected Purpose const amounts = purposeMap.get(selectedPurpose); // Create Chart Title q3Plot.selectAll(".q3-title") .data([selectedPurpose]) .join("text") .attr("class", "q3-title") .attr("x", (q3VizDims.width + q3VizDims.marginLeft + q3VizDims.marginRight) / 2) .attr("y", 25) .attr("text-anchor", "middle") .attr("font-weight", 500) .text(d => `Aid Commitments by Recipient Country: ${d}`); // Update Country Colors q3Shape .interrupt() .transition() .duration(750) .attr("fill", d => { const country = d.properties.name; const amount = amounts.get(country); if (amount == null) return "#d9d9d9"; if (selectedMeasure === "Absolute Commitment (USD)") { return q3ColorScale(amount); } const totalAid = totalAidByCountry.get(country); if (totalAid == null || totalAid <= 0) return "#d9d9d9"; const percentage = (amount / totalAid) * 100; return q3ColorScale(percentage); }); // Update Tooltips q3Shape.select("title") .text(d => { const country = d.properties.name; const amount = amounts.get(country); const totalAid = totalAidByCountry.get(country); if (amount == null) { return `${country}\nNo Data`; } const percentage = totalAid > 0 ? (amount / totalAid) * 100 : null; return `${country} Purpose: ${selectedPurpose} Commitment: ${d3.format("$,.0f")(amount)} Share of Country's Aid: ${ percentage == null ? "N/A" : percentage > 0 && percentage < 0.01 ? "<0.01%" : d3.format(".2f")(percentage) + "%" }`; }); // Update Legend Title legendTitle.text( selectedMeasure === "Absolute Commitment (USD)" ? "Total Commitment (USD)" : "Share of Country's Total Aid (%)" ); // Determine Current Maximum const currentMax = selectedMeasure === "Absolute Commitment (USD)" ? maxCommitment : 100; // Update Gradient Colors gradient.selectAll("stop") .attr("stop-color", function() { const t = +d3.select(this).attr("offset").replace("%", "") / 100; return q3ColorScale(t * currentMax); }); // Update Legend Axis const updatedLegendScale = d3.scaleLinear() .domain([0, currentMax]) .range([0, legendW]); legendAxis .call( d3.axisBottom(updatedLegendScale) .ticks(4) .tickFormat( selectedMeasure === "Absolute Commitment (USD)" ? d3.format(".2s") : d => `${d3.format(".1f")(d)}%` ) ) .call(g => g.select(".domain").remove());47:T4ab,### Q3.2 - Write Up 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? The countries that receive donations appear to receive donations for each of the top five purposes, meaning that they have a good mix of aid received across these purposes. There appears to be no strong geographical differentiation of aid based on purpose. There are exceptions such as Germany where it receives all of its aid for the purpose of social welfare services.The share of aid that a country receives for a particular purpose, as a percentage of the total aid it receives, varies across countries and purposes. For example, Germany receives 100% of its aid for the purpose of social and welfare services while in the case of Brazil it is 1.1% of the total aid it receives. Another example is Switzerland, where material relief assistance and services aid account for 86.4% of the total aid it receives. As a counterpoint, the portion of aid that India receives for the same purpose is 0.2%.48:Tc46,### Q3.3 - Write Up For this question I decided to create an interactive multi-choropleth map that allows the user to switch between each of the top five purposes as well as choosing to display between absolute commitments and commitments as a share of the country's total aid. This allows the user to get the answer to both questions in the same visualization. I reused a lot of the code from Q2 as it was also a choropleth. The limitation of this approach is that the dropdown enables comparison, but users must remember the appearance of one map while viewing another. To begin with, I used multiple roll-ups. The first roll-up was used to get the top five purposes for disbursements based on frequency. I accounted for Null purpose and sectors not specified entries among the purpose column so that we get meaningful results in the choropleth (I filtered out the rows containing these specific values). Next, I used another rollup to aggregate the amount received per country for each of these top 5 (specified) purposes and another roll-up to get the total aid across all purposes for each country (used to calculate the portion of aid they received for a particular purpose as a percentage of the total aid they receive). Then, I created a nested mapping between the commitment amount, country and purpose that lets us look up commitment and purpose by passing in a country and purpose. I reused the code from Q2 to to draw the country shapes and borders. For the color scale I used a sequential square root scale. Initially, I tried a sequential scale, but the issue is that a lot of values were towards the lower end of the scale causing the chart to become hard to read because a lot of the countries had lighter colors the sequential square root scale spreads out the colors in the color scale a little bit more so the lower values have a little bit more color and that should help with differentiation. I used the interpolateBlues for the absolute commitments choropleth and the interpolateOrRd gradient for the normalized choropleth, both of these are linear gradients so they effectively communicate increasing/decreasing values. I reached for interpolateOrRd for the normalized choropleth because I found that I needed more differentiation between the lower values and interpolateBlues even with the sequential square root scale was not enough. I tried a Virdis color scale, but that actually made the chart harder to read as it could not immediately communicate a sense of linear increase/decrease at a glance and it rather looked like a bunch of discrete categories. I used the same color scale across all the purposes as it was important to be able to compare the different purposes and choosing a separate scale for each purposes would render it impossible. Finally, I used transitions so that the user has a smoother experience when they are switching from the buttons. I dynamically colored in the countries, updated the chart title, the legend and the tooltip using the select methods. I also added a zoom capability so that the user can zoom in to regions of interest to better be able to compare smaller countries.49:[{"id":"09040dddbda03374a466600047ccbc70c46e6853884eb725db2141c566ca1b78fb7cc935096e8d5468c21e8df215e73fc49cdaaf7e2f1f89139793da25be02b2","href":"https://static.observableusercontent.com/files/09040dddbda03374a466600047ccbc70c46e6853884eb725db2141c566ca1b78fb7cc935096e8d5468c21e8df215e73fc49cdaaf7e2f1f89139793da25be02b2","name":"aiddata-countries-only - aiddata-countries-only.csv","type":"text/csv","lastModified":1792686073655,"size":8760387}] 38:{"id":"4a45034ac1bbfbf1","slug":"mini-project-1-geographic-financial-aid-due-oct-29th","title":"Mini-Project 1: Geographic Financial Aid (Due Oct. 29th)","thumbnail":"f842c13882a0aa45a1719429e5c07d2bc393f1618c96089b33b853e145d03fd2","access_level":"public","create_time":"$D2026-10-22T16:19:09.330Z","update_time":"$D2026-10-25T17:11:06.663Z","view_time":null,"first_public_time":"$D2026-10-25T17:09:10.718Z","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":"e20480b7a2db9054","login":"yathin-reddy-duvuru","name":"Yathin Reddy Duvuru","avatar_url":"https://avatars-next.observableusercontent.com/5654f06e7bde7c486076fdfca380408ddedff916548794f20abaa0b78fb47d2a","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":551,"publish_version":551,"role":null,"authored":false,"authors":[{"type":"individual","id":"c2a9801d2d4c97e2","login":"yathin-reddy-duvuru","name":"Yathin Reddy Duvuru","avatar_url":"https://avatars-next.observableusercontent.com/5654f06e7bde7c486076fdfca380408ddedff916548794f20abaa0b78fb47d2a","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"e20480b7a2db9054","login":"yathin-reddy-duvuru","name":"Yathin Reddy Duvuru","avatar_url":"https://avatars-next.observableusercontent.com/5654f06e7bde7c486076fdfca380408ddedff916548794f20abaa0b78fb47d2a","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":"// Hello world!","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"### Q1.1","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"// Load the Data\nconst sourceData = 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":68,"value":"Inputs.table(sourceData)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"// Use d3 Rollup to Aggregate Donated and Recieved Amount per Country\n// NaN or Missing Values are replaced with Zero\nconst donationsByCountry = d3.rollup(\n sourceData,\n v => d3.sum(v, d => Number(d.commitment_amount_usd_constant) || 0),\n d => d.donor\n)\n\nconst receivedByCountry = d3.rollup(\n sourceData,\n v => d3.sum(v, d => Number(d.commitment_amount_usd_constant) || 0),\n d => d.recipient\n)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"// Get Unique Set of Countries (w/ Null or Undefined Country names removed using filter)\nconst allCountries = Array.from(\n new Set([...donationsByCountry.keys(), ...receivedByCountry.keys()])\n).filter(Boolean)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"// Combine into Final Country Aggregate Dataset\nconst countryTotals = allCountries.map(d => {\n const donated = donationsByCountry.get(d) || 0;\n const received = receivedByCountry.get(d) || 0;\n\n return {\n \"Country Name\": d,\n \"Aggregate Donations Amount\": donated,\n \"Aggregate Received Amount\": received,\n \"Net Aid Amount\": donated - received\n };\n});","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"Inputs.table(countryTotals)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"$3e","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"// Use Symlog for both scales\n// (linear when values are below the constant specified and logarithmic otherwise)\n\nconst q1xScatterScale = d3.scaleSymlog()\n .domain([0, maxAmount])\n .range([0, q1VizDims.width])\n .constant(1e6);\n\nconst q1xScatterAxis = q1Chart.append(\"g\")\n .attr(\"transform\", `translate(0, ${q1VizDims.height})`)\n .call(\n d3.axisBottom(q1xScatterScale)\n .tickValues(customTicks)\n .tickFormat(formatCurrency)\n );\n\nconst q1yScatterScale = d3.scaleSymlog()\n .domain([0, maxAmount])\n .range([q1VizDims.height, 0])\n .constant(1e6);\n\nconst q1yScatterAxis = q1Chart.append(\"g\")\n .call(\n d3.axisLeft(q1yScatterScale)\n .tickValues(customTicks)\n .tickFormat(formatCurrency)\n );","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"// Diagonal Line Representing Equal Donations and Reception Amounts\nconst q1ScatterDiagonalLine = q1Chart.append(\"line\")\n .attr(\"x1\", q1xScatterScale(0))\n .attr(\"y1\", q1yScatterScale(0))\n .attr(\"x2\", q1xScatterScale(maxAmount))\n .attr(\"y2\", q1yScatterScale(maxAmount))\n .attr(\"stroke\", \"gray\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"stroke-dasharray\", \"5,5\")\n .attr(\"opacity\", 0.8);\n\nconst q1ScatterDataPoints = q1Chart.selectAll(\"circle\")\n .data(countryTotals)\n .enter()\n .append(\"circle\")\n .attr(\"cx\", d => q1xScatterScale(d[\"Aggregate Donations Amount\"]))\n .attr(\"cy\", d => q1yScatterScale(d[\"Aggregate Received Amount\"]))\n .attr(\"r\", q1VizDims.pointRadius)\n .attr(\"fill\", \"steelblue\");","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"const q1xScatterTitle = q1Chart.append(\"text\")\n .attr(\"x\", q1VizDims.width/2)\n .attr(\"y\", q1VizDims.height + (q1VizDims.marginLeft / 2))\n .attr(\"text-anchor\", \"middle\")\n .text(\"Total Amount Donated\");\n\nconst q1yScatterTitle = q1Chart.append(\"text\")\n .attr(\"transform\", \"rotate(-90)\")\n .attr(\"x\", -(q1VizDims.height/2))\n .attr(\"y\", -(q1VizDims.marginLeft/2) - 10)\n .attr(\"text-anchor\", \"middle\")\n .text(\"Total Amount Recieved\");\n\nconst q1ScatterChartTitle = q1Plot.append(\"text\")\n .attr(\"x\", (q1VizDims.width + q1VizDims.marginLeft + q1VizDims.marginRight) / 2)\n .attr(\"y\", 25)\n .attr(\"text-anchor\", \"middle\")\n .attr(\"font-weight\", 500)\n .text(\"Amount Donated vs Amount Recieved (by Countries)\");","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"// Create the q1ScatterLegend\nconst q1ScatterLegend = q1Chart.append(\"g\")\n .attr(\"transform\", `translate(${q1VizDims.width + 20}, 30)`);\n\nq1ScatterLegend.append(\"line\")\n .attr(\"x1\", 0)\n .attr(\"x2\", 35)\n .attr(\"y1\", 0)\n .attr(\"y2\", 0)\n .attr(\"stroke\", \"#888\")\n .attr(\"stroke-width\", 2)\n .attr(\"stroke-dasharray\", \"5,5\");\n\nq1ScatterLegend.append(\"text\")\n .attr(\"x\", 45)\n .attr(\"y\", 4)\n .attr(\"font-size\", \"12px\")\n .text(\"Equal Donations & Receptions\");","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"$3f","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"chartContainer.node()","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"### Q1.2 - Write Up\nQ - 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?\n\nA - The countries that donate much more than they receive lie on or close the x-axis of the chart. Specifically, Monaco, Germany, Netherlands, and Switzerland donate orders of magnitude more in terms of aid than they receive. Monaco and Netherlands in particular received zero dollars in aid.\n\nSimilarly, countries such as India, Brazil and Thailand (to name a few), receive far more in aid than they donate. Countries such as India, South Africa, Romania are the extreme cases where they donated zero dollars in aid while receiving large amounts of aid.\n\nIn general, countries which lie below the diagonal line representing equal donations and receptions donate more than they receive and vice versa. The further they are from this diagonal line, the more skewed this relationship is.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"$40","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"### Q2.1","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"$41","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"const mapData = await d3.json(\"https://cdn.jsdelivr.net/npm/world-atlas@2/countries-50m.json\")\n\nconst countryFeatures = topojson.feature(mapData, mapData.objects.countries)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"// Construct a Normalized Aid Measure that Captures if a Country Mostly Donates or Mostly Recieves\n\nconst countryTotalsNormalized = countryTotals.map(d => ({\n ...d,\n \"Normalized Aid Balance\":\n (d[\"Aggregate Donations Amount\"] + d[\"Aggregate Received Amount\"]) === 0\n ? null\n : d[\"Net Aid Amount\"] /\n (d[\"Aggregate Donations Amount\"] + d[\"Aggregate Received Amount\"])\n}));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"Inputs.table(countryTotalsNormalized)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"// Create a Choloropleth Visualization using a geoNaturalEarth1 Projection\nconst q2VizDims = {\n width: 800,\n height: 350,\n marginTop: 50,\n marginRight: 250,\n marginBottom: 50,\n marginLeft: 100,\n};\n\nconst q2Plot = d3.create(\"svg\")\n .attr(\"width\", q2VizDims.width + q2VizDims.marginLeft + q2VizDims.marginRight)\n .attr(\"height\", q2VizDims.height + q2VizDims.marginTop + q2VizDims.marginBottom);\n\nconst q2Chart = q2Plot.append(\"g\")\n .attr(\"transform\", `translate(${q2VizDims.marginLeft}, ${q2VizDims.marginTop})`);\n\nconst q2ChartTitle = q2Plot.append(\"text\")\n .attr(\"x\", (q2VizDims.width + q2VizDims.marginLeft + q2VizDims.marginRight) / 2)\n .attr(\"y\", 25)\n .attr(\"text-anchor\", \"middle\")\n .attr(\"font-weight\", 500)\n .text(\"Normalized Aid \");\n\n// Create a Diverging Color Scale\nconst q2ColorScale = d3.scaleDiverging(d3.interpolateRdBu)\n .domain([-1, 0, 1]);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"// Create the Projection and the Path Object\nconst projection = d3.geoNaturalEarth1()\n .fitSize([q2VizDims.width, q2VizDims.height], countryFeatures);\n\nconst path = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"// Draw Country Shapes\nconst q2CountryShapes = q2Chart.selectAll(\".country\")\n .data(countryFeatures.features)\n .enter()\n .append(\"path\")\n .attr(\"class\", \"country\")\n .attr(\"d\", path)\n .attr(\"fill\", \"#d9d9d9\");\n\n// Draw Country Borders\nconst borders = topojson.mesh(mapData,mapData.objects.countries, (a, b) => a !== b);\n\nconst countryBorders = q2Chart.append(\"path\")\n .datum(borders)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"#ffffff\")\n .attr(\"stroke-width\", 0.6)\n .attr(\"d\", path);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"// Check for Mismatched Country Names b/w Provided Dataset and GeoData\nconst atlasNames = new Set(countryFeatures.features.map(d => d.properties.name));\nconst dataNames = new Set(countryTotalsNormalized.map(d => d[\"Country Name\"]));\n\n// In your dataset but not matching any map shape\nconst unmatchedData = [...dataNames].filter(n => !atlasNames.has(n)).sort();\n\n// On the map but with no data\nconst unmatchedAtlas = [...atlasNames].filter(n => !dataNames.has(n)).sort();\n\ndisplay({ unmatchedData, unmatchedAtlas });","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"// Create an Alias Mapping for Mismatched Country Names\nconst nameAliases = new Map([\n [\"Czech Republic\", \"Czechia\"],\n [\"Korea\", \"South Korea\"],\n [\"Slovak Republic\", \"Slovakia\"],\n [\"United States\", \"United States of America\"]\n]);\n\nconst toAtlasName = name => nameAliases.get(name) ?? name;\n\n// Create Lookup Table b/w Country Name and Normalized Aid Balance\nconst aidBalanceByCountry = new Map(\n countryTotalsNormalized.map(d => [\n toAtlasName(d[\"Country Name\"]),\n d[\"Normalized Aid Balance\"]\n ])\n);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"// Color Existing Country Shapes\nq2CountryShapes\n .attr(\"fill\", d => {\n const balance = aidBalanceByCountry.get(d.properties.name);\n\n return balance == null\n ? \"#d9d9d9\"\n : q2ColorScale(balance);\n });","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"$42","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"// Add Tooltips to Country Shapes\nq2CountryShapes\n .selectAll(\"title\")\n .data(d => [d])\n .join(\"title\")\n .text(d => {\n const balance = aidBalanceByCountry.get(d.properties.name);\n\n return `${d.properties.name}\\nNormalized Aid Balance: ${\n balance == null ? \"No Data\" : d3.format(\".3f\")(balance)\n }`;\n });","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"q2Plot.node()","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"// Add Zoom and Pan to Q2 - Generated w/ AI\nconst q2Zoom = d3.zoom()\n .scaleExtent([1, 8])\n .on(\"zoom\", event => {\n q2Chart.attr(\n \"transform\",\n `translate(${q2VizDims.marginLeft}, ${q2VizDims.marginTop}) ${event.transform}`\n );\n });\n\nq2Plot.call(q2Zoom);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"$43","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"$44","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"### Q3.1","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"// Aggregate by Purpose Name and Get Top 5 Purposes for Disbursements\n// Remove the Null Purpose and Sectors Not Specified Entries in this to Get Meaningful Results Downstream\nconst top5Purposes = d3.rollups(\n sourceData.filter(d => d.coalesced_purpose_name != null && d.coalesced_purpose_name !== \"Sectors not specified\" && d.coalesced_purpose_name !== \"\"),\n v => v.length,\n d => d.coalesced_purpose_name\n)\n.sort((a, b) => b[1] - a[1])\n.slice(0, 5)\n.map(d => d[0]);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"// Debug Table for Top 5 Logic\nconst top5PurposesTable = d3.rollups(\n sourceData.filter(d =>\n d.coalesced_purpose_name != null &&\n d.coalesced_purpose_name !== \"\" &&\n d.coalesced_purpose_name !== \"Sectors not specified\"\n ),\n v => v.length,\n d => d.coalesced_purpose_name\n)\n.sort((a, b) => b[1] - a[1])\n.slice(0, 5)\n.map(([purpose, count], i) => ({\n Rank: i + 1,\n Purpose: purpose,\n Frequency: count\n}));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"Inputs.table(top5PurposesTable)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"// Use Another Rollup to Aggregate Amount Received Per Country for Each of the Top 5 Purposes\nconst purposeByCountry = d3.rollups(\n sourceData.filter(d =>\n top5Purposes.includes(d.coalesced_purpose_name)\n ),\n v => d3.sum(v, d => +d.commitment_amount_usd_constant),\n d => d.coalesced_purpose_name,\n d => toAtlasName(d.recipient)\n);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"// Another Rollup to Get Total Aid Across All Purposes for Each Country\nconst totalAidByCountry = d3.rollup(\n sourceData,\n v => d3.sum(v, d => +d.commitment_amount_usd_constant),\n d => toAtlasName(d.recipient)\n);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"// Create a Nested Mapping b/w Commitment Amount, Country and Purpose - Generated w/ AI\nconst purposeMap = new Map(\n purposeByCountry.map(([purpose, countries]) => [\n purpose,\n new Map(countries)\n ])\n);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"// Create a Drop Down to Change Aid Purpose\nconst purposeDropdown = Inputs.select(top5Purposes, {\n label: \"Select Aid Purpose\",\n value: top5Purposes[0]\n});\n\nconst selectedPurpose = Generators.input(purposeDropdown);\n\n// Create a Drop Down to Switch Between Showing Absolute Commitment and Total Aid Received Normalized Commitment for Each Purpose\nconst measureDropdown = Inputs.select(\n [\"Absolute Commitment (USD)\", \"Share of Country's Total Aid (%)\"],\n {\n label: \"Select Measurement\",\n value: \"Absolute Commitment (USD)\"\n }\n);\n\nconst selectedMeasure = Generators.input(measureDropdown);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"const q3VizDims = {\n width: 800,\n height: 350,\n marginTop: 50,\n marginRight: 250,\n marginBottom: 50,\n marginLeft: 100\n };\n\n// Create a Multi Choropleth Visualization\n const q3Plot = d3.create(\"svg\")\n .attr(\"width\", q3VizDims.width + q3VizDims.marginLeft + q3VizDims.marginRight)\n .attr(\"height\", q3VizDims.height + q3VizDims.marginTop + q3VizDims.marginBottom);\n\n const q3Chart = q3Plot.append(\"g\")\n .attr(\"transform\", `translate(${q3VizDims.marginLeft}, ${q3VizDims.marginTop})`);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"// Get Commitment Amounts for Selected Purpose\n const selectedCountryAmounts = purposeMap.get(selectedPurpose);\n\n// Find Maximum Commitment Across All Five Purposes\nconst maxCommitment = d3.max(\n purposeByCountry.flatMap(d => d[1].map(c => c[1]))\n );\n\n// Use Different Color Scales for Different Selections\nconst q3ColorScale = selectedMeasure === \"Absolute Commitment (USD)\"\n ? d3.scaleSequentialSqrt(d3.interpolateBlues)\n .domain([0, maxCommitment])\n : d3.scaleSequentialSqrt(d3.interpolateOrRd)\n .domain([0, 100]);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"const q3Projection = d3.geoNaturalEarth1()\n .fitSize([q3VizDims.width, q3VizDims.height], countryFeatures);\n\nconst q3Path = d3.geoPath(q3Projection);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"// Draw Country Shapes\nconst q3Shape = q3Chart.selectAll(\".country\")\n .data(countryFeatures.features)\n .enter()\n .append(\"path\")\n .attr(\"class\", \"country\")\n .attr(\"d\", q3Path)\n .attr(\"fill\", \"#d9d9d9\");\n\n// Add Tooltip\nq3Shape.append(\"title\");","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"$45","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"$46","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"display(purposeDropdown);\ndisplay(measureDropdown)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"q3Plot.node()","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"// Add Zoom and Pan to Q3 - Generated w/ AI\nconst q3Zoom = d3.zoom()\n .scaleExtent([1, 8])\n .on(\"zoom\", event => {\n q3Chart.attr(\n \"transform\",\n `translate(${q3VizDims.marginLeft}, ${q3VizDims.marginTop}) ${event.transform}`\n );\n });\n\nq3Plot.call(q3Zoom);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"$47","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"$48","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"2"}} 33:null