34:["$","title",null,{"children":"Mini-Project 1: Geographic Financial Aid (Due Oct. 29th) | Simone Wang | 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:Td3f,var dims = { width: 500, height: 500, margin: 60 }; var chart_svg = d3.create("svg") .attr("width", dims.width + 2 * dims.margin) .attr("height", dims.height + 2 * dims.margin); var chart = chart_svg.append("g") .attr("transform", `translate(${dims.margin}, ${dims.margin})`) .attr("width", dims.width) .attr("height", dims.height); // Used to perfectly put the last domain ticks on the ends of the axes const next_power_of_ten = value => 10 ** Math.ceil(Math.log10(value)); var x_axis = d3.scaleSymlog() .constant(1000) .domain([0, next_power_of_ten(d3.max(Object.values(countries), d => d.donated))]) .range([0, dims.width]); var y_axis = d3.scaleSymlog() .constant(1000) .domain([0, next_power_of_ten(d3.max(Object.values(countries), d => d.received))]) .range([dims.height, 0]); // start ticks at the constant so 1, 10, 100 don't pile up near 0 function power_of_ten_ticks(scale) { const [min_value, max_value] = scale.domain(); const ticks = min_value <= 0 ? [0] : []; for (let power = scale.constant(); power <= max_value; power *= 10) { if (power >= min_value) ticks.push(power); } return ticks; } // 1500 → "1.5K", 2000000 → "2M", 3e9 → "3B" function format_abbreviated(value) { const suffixes = [[1e12, "T"], [1e9, "B"], [1e6, "M"], [1e3, "K"]]; for (const [threshold, suffix] of suffixes) { if (Math.abs(value) >= threshold) { return d3.format(".3~r")(value / threshold) + suffix; } } return d3.format(".3~r")(value); } chart.append("g") .attr("transform", `translate(0, ${dims.height})`) .call( d3.axisBottom(x_axis) .tickValues(power_of_ten_ticks(x_axis)) .tickFormat(format_abbreviated) ); chart.append("g") .call( d3.axisLeft(y_axis) .tickValues(power_of_ten_ticks(y_axis)) .tickFormat(format_abbreviated) ); chart.append("text") .attr("x", dims.width / 2) .attr("y", -20) .attr("font-weight", "bold") .attr("text-anchor", "middle") .text("Aid Donated vs. Received by Country (1973-2013)"); chart.append("text") .attr("x", dims.width / 2) .attr("y", dims.height + 40) .attr("text-anchor", "middle") .text("Aid Donated (USD)"); chart.append("text") .attr("transform", "rotate(-90)") .attr("x", -dims.height / 2) .attr("y", -40) .attr("text-anchor", "middle") .text("Aid Received (USD)"); chart.selectAll("circle.country") .data(Object.values(countries)) .enter() .append("circle") .attr("class", "country") .attr("fill", "#2347C8") .attr("stroke", "#2347C8") .attr("cx", d => x_axis(d.donated)) .attr("cy", d => y_axis(d.received)) .attr("r", 4) chart.selectAll("circle.country") .append("title") .text(d => `${d.name}\nDonated: ${format_abbreviated(d.donated)}\nReceived: ${format_abbreviated(d.received)}`); const diagonal_points = d3.range(0, 1.0001, 0.01) .map(t => x_axis.invert(t * dims.width)) .filter(value => value <= y_axis.domain()[1]); chart.insert("path", "circle") .datum(diagonal_points) .attr("d", d3.line(v => x_axis(v), v => y_axis(v))) .attr("fill", "none") .attr("stroke", "#999") .attr("stroke-dasharray", "4 4"); chart.append("text") .attr("transform", "rotate(-45)") .attr("font-size", 12) .attr("fill", "#767676") .attr("x", -200) .attr("y", dims.height - 130) .attr("text-anchor", "middle") .text("Donated = Received"); 3f:Tc3a,const map_dims = { width: 1000, height: 580, legend_height: 70 } const legend_dims = { width: 300, x: 20, y: map_dims.height - 45 } const no_data_color = "url(#no-data-pattern)"; const balance_color = d3.scaleDiverging(d3.interpolateRdBu) .domain([-1, 0, 1]); const balance = d => (d.donated - d.received) / (d.donated + d.received); const has_data = d => d && d.donated + d.received > 0; const projection = d3.geoNaturalEarth1() .fitSize([map_dims.width, map_dims.height - map_dims.legend_height], countries_topojson); const path = d3.geoPath(projection); const map_svg = d3.create("svg") .attr("width", map_dims.width) .attr("height", map_dims.height) map_svg.append("g") .selectAll("path") .data(countries_topojson.features) .join("path") .attr("d", path) .attr("fill", f => { const country = countries[f.properties.name]; return has_data(country) ? balance_color(balance(country)) : no_data_color; }) .attr("stroke", "white") .attr("stroke-width", 0.5) .append("title") .text(f => { const name = f.properties.name; const country = countries[name]; return has_data(country) ? `${name}\nDonated: ${format_abbreviated(country.donated)}\nReceived: ${format_abbreviated(country.received)}\nBalance: ${balance(country).toFixed(2)}` : `${name}\nNo data`; }); const no_data_pattern = map_svg.append("defs") .append("pattern") .attr("id", "no-data-pattern") .attr("width", 6) .attr("height", 6) .attr("patternUnits", "userSpaceOnUse") .attr("patternTransform", "rotate(45)"); no_data_pattern.append("rect") .attr("width", 6) .attr("height", 6) .attr("fill", "#f4f4f4"); no_data_pattern.append("line") .attr("x1", 0) .attr("y1", 0) .attr("x2", 0) .attr("y2", 6) .attr("stroke", "#cfcfcf") .attr("stroke-width", 1.5); const legend_gradient = map_svg.append("defs") .append("linearGradient") .attr("id", "balance-gradient"); d3.range(0, 1.0001, 0.1).forEach(t => legend_gradient.append("stop") .attr("offset", t) .attr("stop-color", balance_color(t * 2 - 1)) ); const legend = map_svg.append("g") .attr("transform", `translate(${legend_dims.x}, ${legend_dims.y})`); legend.append("rect") .attr("width", legend_dims.width) .attr("height", 10) .attr("fill", "url(#balance-gradient)"); legend.append("g") .attr("transform", "translate(0, 10)") .call(d3.axisBottom(d3.scaleLinear([-1, 1], [0, legend_dims.width])).ticks(5)) .call(g => g.select(".domain").remove()); legend.append("text") .attr("y", -6) .attr("font-size", 11) .text("Mostly receives"); legend.append("text") .attr("x", legend_dims.width) .attr("y", -6) .attr("font-size", 11) .attr("text-anchor", "end") .text("Mostly donates"); const no_data_legend = map_svg.append("g") .attr("transform", `translate(${legend_dims.x + legend_dims.width + 40}, ${legend_dims.y})`); no_data_legend.append("rect") .attr("width", 10) .attr("height", 10) .attr("fill", no_data_color); no_data_legend.append("text") .attr("x", 16) .attr("y", 9) .attr("font-size", 11) .text("No data");40:T105f,const maps_dims = { map_width: 320, map_height: 170, title_height: 24, columns: 3, rows: Math.ceil(top_5_purposes.length / 3) }; const maps_features = countries_topojson.features.filter(f => f.properties.name !== "Antarctica"); const maps_amounts = []; recipient_purpose_amount.forEach(by_purpose => by_purpose.forEach(amount => { if (amount > 0) maps_amounts.push(amount); }) ); const amount_color = d3.scaleSequentialLog(d3.extent(maps_amounts), d3.interpolateYlGnBu); const maps_projection = d3.geoNaturalEarth1() .fitSize([maps_dims.map_width - 10, maps_dims.map_height], { type: "FeatureCollection", features: maps_features }); const maps_path = d3.geoPath(maps_projection); const maps_svg = d3.create("svg") .attr("width", maps_dims.columns * maps_dims.map_width) .attr("height", maps_dims.rows * (maps_dims.map_height + maps_dims.title_height) + 10); const maps_defs = maps_svg.append("defs"); const maps_pattern = maps_defs.append("pattern") .attr("id", "no-data-pattern-3") .attr("width", 6) .attr("height", 6) .attr("patternUnits", "userSpaceOnUse") .attr("patternTransform", "rotate(45)"); maps_pattern.append("rect") .attr("width", 6) .attr("height", 6) .attr("fill", "#f4f4f4"); maps_pattern.append("line") .attr("x1", 0) .attr("y1", 0) .attr("x2", 0) .attr("y2", 6) .attr("stroke", "#cfcfcf") .attr("stroke-width", 1.5); top_5_purposes.forEach((purpose, i) => { const map_x = (i % maps_dims.columns) * maps_dims.map_width; const map_y = Math.floor(i / maps_dims.columns) * (maps_dims.map_height + maps_dims.title_height); const map_group = maps_svg.append("g") .attr("transform", `translate(${map_x}, ${map_y})`); map_group.append("text") .attr("x", maps_dims.map_width / 2) .attr("y", 16) .attr("text-anchor", "middle") .attr("font-size", 12) .attr("font-weight", "bold") .text(`${purpose.name} (${purpose.count})`); map_group.append("g") .attr("transform", `translate(5, ${maps_dims.title_height})`) .selectAll("path") .data(maps_features) .enter() .append("path") .attr("d", maps_path) .attr("fill", f => { const amount = amount_of(f.properties.name, purpose.name); return amount > 0 ? amount_color(amount) : "url(#no-data-pattern-3)"; }) .attr("stroke", "white") .attr("stroke-width", 0.3) .append("title") .text(f => { const amount = amount_of(f.properties.name, purpose.name); return amount > 0 ? `${f.properties.name}\nReceived: ${format_abbreviated(amount)}` : `${f.properties.name}\nNo data`; }); }); const maps_legend_dims = { x: 2 * maps_dims.map_width + 30, y: maps_dims.map_height + maps_dims.title_height + 60, width: 260 }; const amount_log_domain = amount_color.domain().map(Math.log10); const maps_legend_gradient = maps_defs.append("linearGradient") .attr("id", "amount-gradient"); d3.range(0, 1.0001, 0.1).forEach(t => maps_legend_gradient.append("stop") .attr("offset", t) .attr("stop-color", amount_color(10 ** (amount_log_domain[0] + t * (amount_log_domain[1] - amount_log_domain[0])))) ); const maps_legend = maps_svg.append("g") .attr("transform", `translate(${maps_legend_dims.x}, ${maps_legend_dims.y})`); maps_legend.append("text") .attr("y", -8) .attr("font-size", 11) .text("Amount Received (USD)"); maps_legend.append("rect") .attr("width", maps_legend_dims.width) .attr("height", 10) .attr("fill", "url(#amount-gradient)"); const maps_legend_ticks = d3.range(Math.ceil(amount_log_domain[0]), amount_log_domain[1] + 0.0001, 2) .map(p => 10 ** p); maps_legend.append("g") .attr("transform", "translate(0, 10)") .call(d3.axisBottom(d3.scaleLog(amount_color.domain(), [0, maps_legend_dims.width])) .tickValues(maps_legend_ticks) .tickFormat(format_abbreviated)) .call(g => g.select(".domain").remove()); maps_legend.append("rect") .attr("y", 45) .attr("width", 10) .attr("height", 10) .attr("fill", "url(#no-data-pattern-3)"); maps_legend.append("text") .attr("x", 16) .attr("y", 54) .attr("font-size", 11) .text("No data");41:[{"id":"09040dddbda03374a466600047ccbc70c46e6853884eb725db2141c566ca1b78fb7cc935096e8d5468c21e8df215e73fc49cdaaf7e2f1f89139793da25be02b2","href":"https://static.observableusercontent.com/files/09040dddbda03374a466600047ccbc70c46e6853884eb725db2141c566ca1b78fb7cc935096e8d5468c21e8df215e73fc49cdaaf7e2f1f89139793da25be02b2","name":"aiddata.csv","type":"text/csv","lastModified":1792696696724,"size":8760387},{"id":"a15fcdb98b8ed4b7115e835aa6557473d6a85d03f15feb6ec4ddec625c1c7c8d7b5231dbcf3044bdf6c0800ced5143d92b1c4e431d4f5726af8dd22f82c00a1a","href":"https://static.observableusercontent.com/files/a15fcdb98b8ed4b7115e835aa6557473d6a85d03f15feb6ec4ddec625c1c7c8d7b5231dbcf3044bdf6c0800ced5143d92b1c4e431d4f5726af8dd22f82c00a1a","name":"image.png","type":"image/png","lastModified":1793064382837,"size":100304}] 38:{"id":"4b6a92785f6e18fc","slug":"mini-project-1-geographic-financial-aid-due-oct-29th","title":"Mini-Project 1: Geographic Financial Aid (Due Oct. 29th)","thumbnail":"3926ee5b7c736474f1201e8b877cebd63d745ea9ed43fbb38e3bd45c97c547ea","access_level":"public","create_time":"$D2026-10-22T19:10:04.506Z","update_time":"$D2026-10-29T02:30:12.240Z","view_time":null,"first_public_time":"$D2026-10-29T01:56:11.235Z","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":1,"starred":false,"owner":{"type":"team","id":"f69902d3b40eb164","login":"simone-wang-nyu","name":"Simone Wang","avatar_url":"https://avatars-next.observableusercontent.com/b6eff45e5e70c638ea72ba770b415bbe9c83d07de24b0c626be5df9c9e823393","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":1095,"publish_version":1095,"role":null,"authored":false,"authors":[{"type":"individual","id":"3b9bfe1236286fab","login":"simone-wang-nyu","name":"Simone Wang","avatar_url":"https://avatars-next.observableusercontent.com/b6eff45e5e70c638ea72ba770b415bbe9c83d07de24b0c626be5df9c9e823393","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"f69902d3b40eb164","login":"simone-wang-nyu","name":"Simone Wang","avatar_url":"https://avatars-next.observableusercontent.com/b6eff45e5e70c638ea72ba770b415bbe9c83d07de24b0c626be5df9c9e823393","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 data = FileAttachment(\"aiddata.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"Inputs.table(data.splice(0, 10))","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"---\n## Visualization #1","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"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?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"**Idea**: Display a scatter plot with x-axis as amount donated and y-axis the amount received. Put a tooltip on each circle to display its country's name.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"

Data Aggregation

Loop data, mark every country from the attributes donor and recipient, and initialize their donated and received amount to 0.
Loop data again, for each country in the attributes donor and recipient, add commitment_amount_usd_constant to their respective counter.

Country Rename

For Visualization #2, using world-atlas map there are country names discrepancy with data, requiring a renaming map.

As we can already see from the tables alone, there are countries with huge gap in amount donated and received. For instance, Netherlands donated $8.9 billions while receiving none, and India has received $133 billions while donating 0.

Comments

Using scaleSymlog (instead of scaleLog) to handle domain starting from 0.

AI Disclosure

Used Claude to distribute the ticks evenly with power_of_ten_ticks and format_abbreviated. ScaleSymlog per se clustered all the ticks by the ends of the axes.
Used Claude to put the diagonal line.

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"---\n\n### Visualization #2","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"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?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"**Idea:** Draw a world map and use a divergent color scale based on a normalized ratio donated/received of each country.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"const world = await d3.json(\"https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json\");\n\nconst countries_topojson = topojson.feature(world, world.objects.countries);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"display(map_svg.node());","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"**Why use a map?** The question asked to compare the amount donated/received based on specific geographical areas. I initially thought of grouping the countries by continent but it wouldn't answer the 2nd question about the difference between NEIGHBORING countries, meaning that visually a map is needed.\n\n**Takeaway:** It seems like most of countries that donate more than they receive are in North America and West Europe, with the exception of Japan. Whereas, countries that mostly receive are scattered in South America, South Africa, East Europe and South Asia.\nAbout the gaps in neighboring countries, West and East Europe have huge gaps in balance, especially Germany which shares the border with Poland and Czechia.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"$3f","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"

AI Disclosure

Used Claude to understand why USA was not colored.
Used Claude to get ideas on how to effectively distinguish \"no data\" countries with countries that has near 0 balance due to low contrast (for instance, Australia has -0.03 balance value). Ultimately the solution given is to give a strip pattern.

Data Aggregation

Loop data and count how many commitments each coalesced_purpose_name has.
Sort the purposes by count in descending order and keep the first 5.
Filter data to keep only the commitments with one of the top 5 purposes.

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"const purpose_count = new Map();\ndata.forEach(row => {\n const purpose = row.coalesced_purpose_name;\n purpose_count.set(purpose, (purpose_count.get(purpose) ?? 0) + 1);\n});\n\nconst top_5_purposes = Array.from(purpose_count, ([name, count]) => ({ name, count }))\n .sort((a, b) => b.count - a.count)\n .slice(0, 5);\n\nconst top_5_names = new Set(top_5_purposes.map(purpose => purpose.name));\nconst top_5_data = data.filter(row => top_5_names.has(row.coalesced_purpose_name));\n\ndisplay(Inputs.table(top_5_purposes));","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"const recipient_purpose_amount = new Map();\ntop_5_data.forEach(row => {\n const country = rename(row.recipient);\n const purpose = row.coalesced_purpose_name;\n const amount = +row.commitment_amount_usd_constant || 0;\n if (!recipient_purpose_amount.has(country)) recipient_purpose_amount.set(country, new Map());\n const by_purpose = recipient_purpose_amount.get(country);\n by_purpose.set(purpose, (by_purpose.get(purpose) ?? 0) + amount);\n});\n\nconst amount_of = (country, purpose) => recipient_purpose_amount.get(country)?.get(purpose) ?? 0;","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"display(maps_svg.node());","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"**Why 5 maps?** I initially thought of using a single map with a select field to display a selected \"donation purpose\". However this display one purpose at a time and it's not very effective when viewing the differences of countries by purpose. So I chose to display all 5 of them in a grid as it is more effective.\n\n**Takeaway:** The most frequent donation purpose is \"Sectors not specified\" and probably due to the clustering of purposes which are either highly specific or very vague so they can all grouped in the same group. All 5 maps seem to have the same countries overall (Brazil, Chile, East Europe, India, South Africa, Saudi Arabia, Thailand). These same countries are also the one which receive more than they donate, having a \"balance\" close to -1. An exception is USA which in top 5 only appears in \"Social / Welfare Services\" and \"Higher Education\".","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"$40","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"

AI Disclosure

Used Claude to set the map grid and the ticks for the legend.