34:["$","title",null,{"children":"Mini-Project 1: Geographic Financial Aid (Due Oct. 29th) | Dheeraj P | 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:Tc47,// ---------- Shared helpers: no question-specific colors in here ---------- const font = "sans-serif"; const lightgray = "#eeeeee"; // style guide: light gray for grids and "zero" cells const grid_color = "#eeeeee"; // The map file uses different names than the dataset for a few countries const name_fix = {"United States": "United States of America", "Korea": "South Korea", "Czech Republic": "Czechia", "Slovak Republic": "Slovakia"}; const geo_name = n => name_fix[n] || n; // 1000000000 -> "$1B" const fmt = v => d3.format("$.2~s")(v).replace("G", "B"); // Missing data (country not in the dataset) = light gray hatch, so it is not confused with a pale "zero" or "balanced" country const NO_DATA = "url(#no_data)"; const add_no_data_pattern = svg => { const p = svg.append("defs").append("pattern").attr("id", "no_data") .attr("width", 6).attr("height", 6).attr("patternUnits", "userSpaceOnUse").attr("patternTransform", "rotate(45)"); p.append("rect").attr("width", 6).attr("height", 6).attr("fill", "white"); p.append("line").attr("x1", 0).attr("y1", 0).attr("x2", 0).attr("y2", 6).attr("stroke", "#cccccc").attr("stroke-width", 2); }; // Small horizontal legend for a sequential scale: a row of swatches with labels const add_seq_legend = (g, color, values, label_fmt, swatch_w = 56) => { const items = g.selectAll("g.leg").data(values).enter().append("g").attr("class", "leg") .attr("transform", (d, j) => `translate(${j * (swatch_w + 4)}, 0)`); items.append("rect").attr("width", swatch_w).attr("height", 10).attr("fill", d => color(d)).attr("stroke", "#bbb").attr("stroke-width", 0.5); items.append("text").attr("y", 24).attr("font-size", 10).attr("font-family", font).text(d => label_fmt(d)); }; // Draws the world map inside group g. fill_for / tip_for take a map country name. // Borders are thin and white (style guide: no thick dark borders on choropleths). const draw_map = (g, w, h, fill_for, tip_for) => { const all_countries = topojson.feature(world, world.objects.countries); const land = {type: "FeatureCollection", features: all_countries.features.filter(f => f.properties.name !== "Antarctica")}; const projection = d3.geoNaturalEarth1().fitExtent([[2, 2], [w - 2, h - 2]], land); const path = d3.geoPath(projection); g.selectAll("path").data(land.features).enter().append("path") .attr("d", path) .attr("fill", d => fill_for(d.properties.name)) .attr("stroke", "white") .attr("stroke-width", 0.5) .append("title").text(d => tip_for(d.properties.name)); // Only the truly tiny countries (Luxembourg, Cyprus, Qatar, Kuwait, Slovenia) get a dot; the cutoff scales with map size const small_area = 20 * (w * h) / (960 * 500); const small = land.features.filter(f => path.area(f) < small_area && fill_for(f.properties.name) !== NO_DATA); g.selectAll("circle").data(small).enter().append("circle") .attr("transform", d => `translate(${path.centroid(d)})`) .attr("r", 2.8) .attr("fill", d => fill_for(d.properties.name)) .attr("stroke", "#444") .attr("stroke-width", 0.5) .append("title").text(d => tip_for(d.properties.name)); };3f:T8b0,// ---------- Questions 1 and 2 only: donor / recipient colors ---------- const donor_color = "#4682b4"; // steelblue (the style guide's default mark color) const recipient_color = "#f28e2b"; // orange const donor_text = "#2f6190"; // darker versions for text, so it stays readable on white const recipient_text = "#c8620a"; // Diverging color for net received, centered at $0 (symlog so small countries stay visible) const net_max = d3.max(stats, d => Math.abs(d.net)); const net_interp = d3.interpolateRgbBasis(["#08519c", "#3182bd", "#9ecae1", "#f0f0f0", "#fdbe85", "#fd8d3c", "#d94801"]); const net_color = d3.scaleDivergingSymlog(net_interp) .domain([-net_max, 0, net_max]) .constant(1e9); // Legend for the net color scale const net_legend_values = [-1e11, -1e10, -1e9, 0, 1e9, 1e10, 1e11]; const add_net_legend = (svg, x, y, show_no_data = false) => { const legend = svg.append("g").attr("transform", `translate(${x}, ${y})`).attr("font-family", font); legend.append("text").attr("font-weight", "bold").attr("font-size", 12).text("Net received"); legend.append("text").attr("y", 14).attr("font-size", 11).text("(orange = recipient, blue = donor)"); const items = legend.selectAll("g").data(net_legend_values).enter().append("g") .attr("transform", (d, i) => `translate(0, ${24 + i * 18})`); items.append("rect").attr("width", 16).attr("height", 14).attr("fill", d => net_color(d)).attr("stroke", "#bbb").attr("stroke-width", 0.5); items.append("text").attr("x", 24).attr("y", 12).attr("font-size", 12) .text(d => d === 0 ? "$0" : (d > 0 ? "+" : "") + fmt(d)); if (show_no_data) { const y0 = 24 + net_legend_values.length * 18 + 8; legend.append("rect").attr("y", y0).attr("width", 16).attr("height", 14).attr("fill", NO_DATA).attr("stroke", "#bbb").attr("stroke-width", 0.5); legend.append("text").attr("x", 24).attr("y", y0 + 12).attr("font-size", 12).text("country not in the dataset"); legend.append("circle").attr("cx", 8).attr("cy", y0 + 31).attr("r", 3).attr("fill", "#f0f0f0").attr("stroke", "#444").attr("stroke-width", 0.5); legend.append("text").attr("x", 24).attr("y", y0 + 34).attr("font-size", 12).text("dot = very small country"); } };40:T262f,// ---- Visualization 1a: scatter plot of received (x) vs. donated (y), every country labeled ---- const v1_dims = {width: 800, height: 680, margin_left: 80, margin_right: 230, margin_top: 70, margin_bottom: 60}; const v1_max = d3.max(stats, d => Math.max(d.donated, d.received)) * 1.2; const v1_ticks = [0, 1e8, 1e9, 1e10, 1e11]; // symlog scales because the values go from $0 to over $100B const v1_x = d3.scaleSymlog().constant(1e8).domain([0, v1_max]).range([0, v1_dims.width]); const v1_y = d3.scaleSymlog().constant(1e8).domain([0, v1_max]).range([v1_dims.height, 0]); const v1_container = d3.create("svg") .attr("width", v1_dims.width + v1_dims.margin_left + v1_dims.margin_right) .attr("height", v1_dims.height + v1_dims.margin_top + v1_dims.margin_bottom) .attr("font-family", font); const v1_chart = v1_container.append("g") .attr("transform", `translate(${v1_dims.margin_left}, ${v1_dims.margin_top})`); // Zones: faint blue above the diagonal (net donors), faint orange below it (net recipients) v1_chart.append("path").attr("d", `M0,0 L${v1_dims.width},0 L0,${v1_dims.height} Z`).attr("fill", donor_color).attr("opacity", 0.08); v1_chart.append("path").attr("d", `M${v1_dims.width},0 L${v1_dims.width},${v1_dims.height} L0,${v1_dims.height} Z`).attr("fill", recipient_color).attr("opacity", 0.1); // Light gray grid v1_chart.selectAll("line.grid_x").data(v1_ticks).enter().append("line") .attr("x1", d => v1_x(d)).attr("x2", d => v1_x(d)) .attr("y1", 0).attr("y2", v1_dims.height) .attr("stroke", grid_color); v1_chart.selectAll("line.grid_y").data(v1_ticks).enter().append("line") .attr("x1", 0).attr("x2", v1_dims.width) .attr("y1", d => v1_y(d)).attr("y2", d => v1_y(d)) .attr("stroke", grid_color); // Axes v1_chart.append("g") .attr("transform", `translate(0, ${v1_dims.height})`) .call(d3.axisBottom(v1_x).tickValues(v1_ticks).tickFormat(fmt)); v1_chart.append("g") .call(d3.axisLeft(v1_y).tickValues(v1_ticks).tickFormat(fmt)); // Line where donated = received v1_chart.append("line") .attr("x1", v1_x(0)).attr("y1", v1_y(0)) .attr("x2", v1_x(v1_max)).attr("y2", v1_y(v1_max)) .attr("stroke", "#555").attr("stroke-dasharray", "5 4"); // Zone labels written along the dashed line: donors just above it, recipients just below it const v1_angle = Math.atan2(v1_y(v1_max) - v1_y(0), v1_x(v1_max) - v1_x(0)); const v1_t = 0.97; const v1_lx = v1_x(0) + v1_t * (v1_x(v1_max) - v1_x(0)); const v1_ly = v1_y(0) + v1_t * (v1_y(v1_max) - v1_y(0)); const v1_zone = v1_chart.append("g") .attr("transform", `translate(${v1_lx}, ${v1_ly}) rotate(${v1_angle * 180 / Math.PI})`) .attr("font-size", 13).attr("font-weight", "bold").attr("text-anchor", "end"); v1_zone.append("text").attr("dy", -9).attr("fill", donor_text) .attr("stroke", "white").attr("stroke-width", 3).attr("paint-order", "stroke") .text("NET DONORS ↖ (above the line)"); v1_zone.append("text").attr("dy", 20).attr("fill", recipient_text) .attr("stroke", "white").attr("stroke-width", 3).attr("paint-order", "stroke") .text("(below the line) ↘ NET RECIPIENTS"); // ---------- Label placement: every country gets a name, and no two names overlap ---------- const lab_h = 11, char_w = 5.6, dot_r = 5.5; const W = v1_dims.width, H = v1_dims.height; const pts = stats.map(d => ({d, px: v1_x(d.received), py: v1_y(d.donated), w: d.name.length * char_w})); const hit = (a, b, pad = 1.5) => a.x0 < b.x1 + pad && a.x1 + pad > b.x0 && a.y0 < b.y1 + pad && a.y1 + pad > b.y0; const inside = b => b.x0 >= 2 && b.x1 <= W + 8 && b.y0 >= 0 && b.y1 <= H + 4; // things a label must not cover: every dot, and the two diagonal zone labels const obstacles = pts.map(p => ({x0: p.px - dot_r, y0: p.py - dot_r, x1: p.px + dot_r, y1: p.py + dot_r, owner: p})); const zone_lens = [[-9, 215], [20, 245]]; zone_lens.forEach(([dy, len]) => { for (let s = 0; s <= len; s += 8) { const cx = v1_lx - s * Math.cos(v1_angle) - dy * Math.sin(v1_angle); const cy = v1_ly - s * Math.sin(v1_angle) + dy * Math.cos(v1_angle); obstacles.push({x0: cx - 8, y0: cy - 8, x1: cx + 8, y1: cy + 8}); } }); const placed = []; // label boxes and leader lines already used const labels = []; // what to draw const unplaced = []; const free = (b, own, lead) => inside(b) && !obstacles.some(o => o.owner !== own && hit(b, o, 1)) && !obstacles.some(o => o.owner === own && hit(b, o, 0)) && !placed.some(o => hit(b, o)) && (!lead || (!placed.some(o => lead.x >= o.x0 - 1 && lead.x <= o.x1 + 1 && lead.y1 >= o.y0 && lead.y0 <= o.y1) && !obstacles.some(o => o.owner !== own && lead.x >= o.x0 && lead.x <= o.x1 && lead.y1 >= o.y0 && lead.y0 <= o.y1))); const importance = p => Math.max(p.d.donated, p.d.received); const on_axis = p => p.py > H - 14; // 1) Countries sitting on the x-axis (donated ~ $0) go first: stacked labels in lanes above the axis, joined to the dot by a thin vertical line. // Rightmost first, so every new label goes above the ones to its right and no line crosses a label. // (The line check stops just above the dots, so a neighbor's dot a few pixels away does not block it.) pts.filter(on_axis).sort((a, b) => b.px - a.px).forEach(p => { for (let k = 0; k < 45; k++) { const y0 = H - 24 - k * (lab_h + 2); for (const side of ["right", "left"]) { const x0 = side === "right" ? p.px + 4 : p.px - 4 - p.w; const b = {x0, y0, x1: x0 + p.w, y1: y0 + lab_h}; const lead = {x: p.px, y0: y0 + lab_h / 2, y1: H - dot_r - 8}; if (free(b, p, lead)) { placed.push(b, {x0: p.px - 0.5, x1: p.px + 0.5, y0: lead.y0, y1: H - dot_r - 8}); labels.push({p, box: b, leader: [p.px, p.py - dot_r, p.px, y0 + lab_h / 2], vertical: true}); return; } } } unplaced.push(p.d.name); }); // 2) All other countries: try 8 positions around the dot, then the same ring farther away (with a leader line) pts.filter(p => !on_axis(p)).sort((a, b) => importance(b) - importance(a)).forEach(p => { for (const extra of [0, 8, 16, 26, 38, 52]) { const r = dot_r + 4 + extra, hw = p.w / 2; const cands = [ {x0: p.px + r, y0: p.py - lab_h / 2}, {x0: p.px - r - p.w, y0: p.py - lab_h / 2}, {x0: p.px - hw, y0: p.py - r - lab_h}, {x0: p.px - hw, y0: p.py + r}, {x0: p.px + r * 0.7, y0: p.py - r * 0.7 - lab_h}, {x0: p.px - r * 0.7 - p.w, y0: p.py - r * 0.7 - lab_h}, {x0: p.px + r * 0.7, y0: p.py + r * 0.7}, {x0: p.px - r * 0.7 - p.w, y0: p.py + r * 0.7} ].map(c => ({...c, x1: c.x0 + p.w, y1: c.y0 + lab_h})); const ok = cands.find(c => free(c, p)); if (ok) { placed.push(ok); const cx = Math.max(ok.x0, Math.min(p.px, ok.x1)), cy = Math.max(ok.y0, Math.min(p.py, ok.y1)); labels.push({p, box: ok, leader: Math.hypot(cx - p.px, cy - p.py) > dot_r + 6 ? [p.px, p.py, cx, cy] : null, vertical: false}); return; } } unplaced.push(p.d.name); }); // leader lines first, then dots, then the names on top v1_chart.selectAll("line.leader").data(labels.filter(l => l.leader)).enter().append("line") .attr("class", "leader") .attr("x1", l => l.leader[0]).attr("y1", l => l.leader[1]).attr("x2", l => l.leader[2]).attr("y2", l => l.leader[3]) .attr("stroke", "#888").attr("stroke-width", 0.7); // Points, colored by net received v1_chart.selectAll("circle").data(stats).enter().append("circle") .attr("cx", d => v1_x(d.received)) .attr("cy", d => v1_y(d.donated)) .attr("r", dot_r) .attr("fill", d => net_color(d.net)) .attr("fill-opacity", 0.95) .attr("stroke", "#333") .attr("stroke-width", 0.8) .append("title").text(d => `${d.name}\nDonated: ${fmt(d.donated)}\nReceived: ${fmt(d.received)}\nNet received: ${fmt(d.net)}`); v1_chart.selectAll("text.country_label").data(labels).enter().append("text") .attr("class", "country_label") .attr("x", l => l.box.x0).attr("y", l => l.box.y1 - 2) .attr("font-size", 10.5).attr("fill", "#222") .attr("stroke", "white").attr("stroke-width", 2.5).attr("paint-order", "stroke") .text(l => l.p.d.name); // Title and subtitle v1_container.append("text") .attr("x", v1_dims.margin_left).attr("y", 26) .attr("font-weight", "bold").attr("font-size", 16) .text("A few countries give, a few receive, and almost none do both equally"); v1_container.append("text") .attr("x", v1_dims.margin_left).attr("y", 45) .attr("font-size", 12).attr("fill", "#555") .text("Total donated vs. total received per country, 1973-2013 (constant USD, all 47 countries labeled; hover for exact values)"); v1_container.append("text") .attr("x", v1_dims.margin_left + v1_dims.width / 2) .attr("y", v1_dims.margin_top + v1_dims.height + 45) .attr("text-anchor", "middle") .text("Total received (symlog scale)"); v1_container.append("text") .attr("transform", `translate(20, ${v1_dims.margin_top + v1_dims.height / 2}) rotate(-90)`) .attr("text-anchor", "middle") .text("Total donated (symlog scale)"); // Legend and a short explanation of the dashed line, in the right-hand column const v1_side_x = v1_dims.margin_left + v1_dims.width + 20; add_net_legend(v1_container, v1_side_x, v1_dims.margin_top + 20); v1_container.append("text").attr("x", v1_side_x).attr("y", v1_dims.margin_top + 200) .attr("font-size", 11).attr("fill", "#555").text("Dashed line: donated = received"); v1_container.append("text").attr("x", v1_side_x).attr("y", v1_dims.margin_top + 218) .attr("font-size", 11).attr("fill", donor_text).text("Above the line: donated more"); v1_container.append("text").attr("x", v1_side_x).attr("y", v1_dims.margin_top + 234) .attr("font-size", 11).attr("fill", recipient_text).text("Below the line: received more"); display(v1_container.node()); display({labeled: labels.length, total: stats.length, unplaced});41:T114c,// ---- Visualization 1b: donated (left) and received (right) for every country, sorted by net ---- const v1b_data = [...stats].sort((a, b) => a.net - b.net); // biggest net donors on top, biggest net recipients at the bottom const v1b_dims = {width: 640, height: v1b_data.length * 16, margin_left: 140, margin_right: 40, margin_top: 100, margin_bottom: 45}; const v1b_half = v1b_dims.width / 2; const v1b_gap = 80; // empty space in the middle so the two sets of axis numbers don't collide const v1b_max = d3.max(stats, d => Math.max(d.donated, d.received)) * 1.1; const v1b_ticks = [1e8, 1e9, 1e10, 1e11]; // same symlog scale on both sides, so the two bars of a country can be compared directly const v1b_right = d3.scaleSymlog().constant(1e8).domain([0, v1b_max]).range([v1b_half + v1b_gap / 2, v1b_dims.width]); const v1b_left = d3.scaleSymlog().constant(1e8).domain([0, v1b_max]).range([v1b_half - v1b_gap / 2, 0]); const v1b_y = d3.scaleBand().domain(v1b_data.map(d => d.name)).range([0, v1b_dims.height]).padding(0.2); const v1b_container = d3.create("svg") .attr("width", v1b_dims.width + v1b_dims.margin_left + v1b_dims.margin_right) .attr("height", v1b_dims.height + v1b_dims.margin_top + v1b_dims.margin_bottom) .attr("font-family", font); const v1b_chart = v1b_container.append("g") .attr("transform", `translate(${v1b_dims.margin_left}, ${v1b_dims.margin_top})`); // light grid v1b_chart.selectAll("line.grid").data(v1b_ticks.flatMap(t => [v1b_left(t), v1b_right(t)])).enter().append("line") .attr("x1", d => d).attr("x2", d => d).attr("y1", 0).attr("y2", v1b_dims.height).attr("stroke", grid_color); // axes on top (left side shows donated, right side shows received) v1b_chart.append("g").call(d3.axisTop(v1b_left).tickValues(v1b_ticks).tickFormat(fmt)); v1b_chart.append("g").call(d3.axisTop(v1b_right).tickValues(v1b_ticks).tickFormat(fmt)); // donated bars (left) v1b_chart.selectAll("rect.donated").data(v1b_data).enter().append("rect") .attr("class", "donated") .attr("x", d => v1b_left(d.donated)).attr("y", d => v1b_y(d.name)) .attr("width", d => (v1b_half - v1b_gap / 2) - v1b_left(d.donated)).attr("height", v1b_y.bandwidth()) .attr("fill", donor_color) .append("title").text(d => `${d.name}\nDonated: ${fmt(d.donated)}\nReceived: ${fmt(d.received)}\nNet received: ${fmt(d.net)}`); // received bars (right) v1b_chart.selectAll("rect.received").data(v1b_data).enter().append("rect") .attr("class", "received") .attr("x", v1b_half + v1b_gap / 2).attr("y", d => v1b_y(d.name)) .attr("width", d => v1b_right(d.received) - (v1b_half + v1b_gap / 2)).attr("height", v1b_y.bandwidth()) .attr("fill", recipient_color) .append("title").text(d => `${d.name}\nDonated: ${fmt(d.donated)}\nReceived: ${fmt(d.received)}\nNet received: ${fmt(d.net)}`); // country names on the far left v1b_chart.selectAll("text.name").data(v1b_data).enter().append("text") .attr("class", "name") .attr("x", -8).attr("y", d => v1b_y(d.name) + v1b_y.bandwidth() / 2 + 4) .attr("text-anchor", "end").attr("font-size", 11) .text(d => d.name); // baseline at the start of each side [v1b_half - v1b_gap / 2, v1b_half + v1b_gap / 2].forEach(x0 => { v1b_chart.append("line") .attr("x1", x0).attr("x2", x0).attr("y1", 0).attr("y2", v1b_dims.height) .attr("stroke", "#555"); }); // Title v1b_container.append("text") .attr("x", v1b_dims.margin_left + v1b_dims.width / 2).attr("y", 26) .attr("text-anchor", "middle").attr("font-weight", "bold").attr("font-size", 16) .text("Donated vs. Received by Country (sorted by net received)"); // Side labels (darker text colors so they are readable on white) v1b_container.append("text") .attr("x", v1b_dims.margin_left + v1b_half - v1b_gap / 2 - 8).attr("y", 56) .attr("text-anchor", "end").attr("fill", donor_text).attr("font-weight", "bold") .text("◀ total donated"); v1b_container.append("text") .attr("x", v1b_dims.margin_left + v1b_half + v1b_gap / 2 + 8).attr("y", 56) .attr("fill", recipient_text).attr("font-weight", "bold") .text("total received ▶"); // Scale note at the bottom, away from the title and the axis numbers v1b_container.append("text") .attr("x", v1b_dims.margin_left + v1b_dims.width / 2) .attr("y", v1b_dims.margin_top + v1b_dims.height + 32) .attr("text-anchor", "middle").attr("font-size", 11).attr("fill", "#555") .text("Symlog scale, constant USD"); display(v1b_container.node());42:Td65,### Answer #1 I made two charts for this question: **Chart 1a** (scatter plot) and **Chart 1b** (donated/received bars). I compare them at the end of this answer. #### How do the countries compare in terms of how much they receive and donate? My scatter plot puts how much each country received on the x-axis and how much it donated on the y-axis, and the dashed line marks where the two are equal. The amounts are very uneven. The United States ($116.2B) and Japan ($114.2B) give about 63% of all the money, and with Germany ($47.2B), the United Kingdom ($23.7B) and France ($15.5B) the top five donors give 86%. On the receiving side India alone got $134.0B (36% of everything), and India, Thailand ($49.0B) and Brazil ($36.6B) together got 60%. So the commitments are highly concentrated in a few donors and a few recipients. #### Are there countries that donate much more than they receive or receive much more than they donate? Yes, both. Countries that donate much more than they receive are the United States ($116.2B donated, $0.1B received), Germany, the Netherlands, Switzerland and Japan ($114.2B donated, only $2.1B received). Canada is a smaller net donor ($7.5B out, $4.1B in). Countries that receive much more than they donate are India, Thailand, Brazil, Colombia, Poland, South Africa, Chile, Romania and Hungary. India, South Africa and Romania donated nothing in this dataset, and the others donated only tiny amounts compared with what they received (for example Thailand donated $25 thousand and received $49.0B, and Brazil donated $1.1 million and received $36.6B). Korea is a bigger case: $25.3B received and $1.3B donated. Only a few countries are close to balanced, like Austria ($0.78B out, $0.77B in) and Australia ($2.45B out, $2.57B in). The Gulf countries do both (for example Saudi Arabia gave $1.7B and received $4.9B). #### Why this design I picked a scatter plot because it shows both amounts for every country at once, and the distance from the dashed line shows the imbalance directly. Since the values go from $0 to over $100B I used a symlog scale on both axes, because a normal log scale cannot show countries with $0 donated or received. I colored each point by its net balance (blue for donors, orange for recipients, a color-blind-safe pair) as a second cue, used a light gray grid so it does not compete with the points, and only labeled the 16 biggest countries so the labels do not overlap (the rest show on hover). #### Comparing my two solutions **Chart 1a (scatter plot).** Advantages: it shows both amounts for every country in one view, the imbalance is visible as distance from the dashed line, and it shows clusters (big donors, big recipients, balanced countries). Disadvantages: only the 16 biggest countries are labeled, and the symlog scale on both axes makes exact values harder to read. **Chart 1b (donated/received bars).** It has two bars per country (donated to the left, received to the right, same scale, sorted by net balance). Advantages: every country is labeled, the sorted order gives an exact ranking, and it is easy to look up one country. Disadvantages: the pattern across all countries is harder to see, there is no "equal" reference line, and because of the symlog scale bar lengths are not proportional to dollars. I think the scatter plot answers the question better, and the bar chart works as a companion for looking up individual countries.43:T54e,// ---- Visualization 2a: world map colored by net amount received ---- const v2_dims = {width: 960, height: 500, margin_top: 55}; const v2_by_name = new Map(stats.map(d => [geo_name(d.name), d])); const v2_container = d3.create("svg") .attr("width", v2_dims.width) .attr("height", v2_dims.height + v2_dims.margin_top) .attr("font-family", font); add_no_data_pattern(v2_container); draw_map( v2_container.append("g").attr("transform", `translate(0, ${v2_dims.margin_top})`), v2_dims.width, v2_dims.height, n => v2_by_name.has(n) ? net_color(v2_by_name.get(n).net) : NO_DATA, n => v2_by_name.has(n) ? `${n}\nDonated: ${fmt(v2_by_name.get(n).donated)}\nReceived: ${fmt(v2_by_name.get(n).received)}\nNet received: ${fmt(v2_by_name.get(n).net)}` : `${n}: not in this dataset` ); v2_container.append("text") .attr("x", v2_dims.width / 2).attr("y", 25) .attr("text-anchor", "middle").attr("font-weight", "bold").attr("font-size", 16) .text("Net Amount Received by Country, 1973-2013"); v2_container.append("text") .attr("x", v2_dims.width / 2).attr("y", 42) .attr("text-anchor", "middle").attr("font-size", 12).attr("fill", "#555") .text(`Gray hatch = country not in the dataset. Color scale runs to ±${fmt(net_max)} (India).`); add_net_legend(v2_container, 30, v2_dims.margin_top + 250, true); display(v2_container.node());44:Tab5,// ---- Visualization 2b: two maps, total donated (blue) and total received (orange), same scale ---- // The net map hides volume (a country can be near $0 net because it does both), so this shows each side separately. const v2b_dims = {width: 760, height: 380, cell_height: 450}; const v2b_max = d3.max(stats, d => Math.max(d.donated, d.received)); // Multi-hue ramps over almost the full range: pale yellow ($0) to dark blue / dark red ($100B) const v2b_color = { donated: d3.scaleSequentialSymlog(t => d3.interpolateYlGnBu(0.05 + 0.95 * t)).domain([0, v2b_max]).constant(1e8), received: d3.scaleSequentialSymlog(t => d3.interpolateYlOrRd(0.05 + 0.85 * t)).domain([0, v2b_max]).constant(1e8) }; const v2b_legend_values = [0, 1e8, 1e9, 1e10, 1e11]; const v2b_container = d3.create("svg") .attr("width", v2b_dims.width) .attr("height", v2b_dims.cell_height * 2 + 40) .attr("font-family", font); add_no_data_pattern(v2b_container); v2b_container.append("text") .attr("x", v2b_dims.width / 2).attr("y", 22) .attr("text-anchor", "middle").attr("font-weight", "bold").attr("font-size", 16) .text("Total Donated and Total Received by Country, 1973-2013 (same scale on both maps)"); ["donated", "received"].forEach((key, i) => { const panel = v2b_container.append("g").attr("transform", `translate(0, ${40 + i * v2b_dims.cell_height})`); panel.append("text").attr("x", 10).attr("y", 14).attr("font-weight", "bold") .attr("fill", key === "donated" ? donor_color : recipient_color) .text(key === "donated" ? "Total donated" : "Total received"); draw_map( panel.append("g").attr("transform", "translate(0, 20)"), v2b_dims.width, v2b_dims.height, n => v2_by_name.has(n) ? v2b_color[key](v2_by_name.get(n)[key]) : NO_DATA, n => v2_by_name.has(n) ? `${n}\nDonated: ${fmt(v2_by_name.get(n).donated)}\nReceived: ${fmt(v2_by_name.get(n).received)}` : `${n}: not in this dataset` ); // legend under each map, plus the hatch swatch for missing data const legend = panel.append("g").attr("transform", `translate(30, ${v2b_dims.height + 24})`); add_seq_legend(legend, v2b_color[key], v2b_legend_values, fmt, 48); legend.append("rect").attr("x", 5 * 52 + 20).attr("width", 48).attr("height", 10).attr("fill", NO_DATA).attr("stroke", "#bbb").attr("stroke-width", 0.5); legend.append("text").attr("x", 5 * 52 + 20).attr("y", 24).attr("font-size", 10).text("not in dataset"); legend.append("circle").attr("cx", 5 * 52 + 20 + 100).attr("cy", 5).attr("r", 3).attr("fill", "#fff").attr("stroke", "#444").attr("stroke-width", 0.5); legend.append("text").attr("x", 5 * 52 + 20 + 110).attr("y", 9).attr("font-size", 10).text("dot = very small country"); }); display(v2b_container.node());45:Tc51,### Answer #2 I made two charts for this question: **Chart 2a** (net map) and **Chart 2b** (donated and received maps). #### Do the countries that mostly receive or mostly donate tend to cluster around specific geographical areas of the world? Yes, the countries cluster by region. The net donors are in North America (the United States, and a much smaller Canada), Western and Northern Europe (Germany, the United Kingdom, France, the Netherlands, the Nordic countries, Switzerland, Belgium) and Japan. The net recipients are in South America (Brazil, Colombia, Chile), South and Southeast Asia (India, Thailand), Southern Africa (South Africa), Central and Eastern Europe (Poland, the Czech Republic, Hungary, Romania, Slovakia and the Baltic countries) and the Gulf (Kuwait +$6.4B, Saudi Arabia +$3.2B). The second pair of maps shows the same thing for each side separately: the blue "donated" map is dark only in the US, Japan and Western Europe, and the orange "received" map is dark only in South Asia, South America, Poland and Southern Africa. #### Are there neighboring countries that have radically different patterns in terms of how much they receive vs. how much they donate? Yes. Germany is a net donor of $47.2B but its neighbor Poland is a net recipient of $24.5B, and Austria is about $0 between Germany and Hungary (+$2.9B) or the Czech Republic (+$2.1B). In Asia, Japan is a net donor of $112B right next to Korea (+$24.0B) and Taiwan (+$3.3B). Finland (-$0.5B) is across the Baltic Sea from Estonia (+$0.25B) and Latvia (+$0.4B). **Important limitation.** These regional patterns are only about the 47 countries in the dataset. The gray-hatched countries (most of Africa, the Middle East and Central Asia) are missing from the data; they are not countries that gave or received nothing. Also, Monaco and Liechtenstein are too small to be drawn on the 110m map (both are about $0). #### Why this design I used world maps because the question is about geography, so the reader can see which countries touch each other. The first map uses one diverging color scale for the net amount (blue for donors, orange for recipients), which answers "mostly receive or mostly donate" directly. I used a symlog scale for the color so that both India (+$134B) and small countries like Luxembourg still show a visible color, and very small countries get a dot so they do not disappear. Countries missing from the dataset are drawn with a gray hatch (not a flat color) so they are not confused with a pale, nearly balanced country. #### Comparing my two solutions **Chart 2a (net map).** Advantage: one map and one color scale give a quick read of who is a donor and who is a recipient. Disadvantage: a country near $0 net could be doing nothing or doing both a lot, so it hides the volume. **Chart 2b (two maps).** Advantages: it shows the volume of each side on the same scale, which makes neighbor comparisons (for example Germany vs. Poland) more direct. Disadvantages: it takes more space and the reader has to flip between two maps. So the net map is better for a quick read and the two maps are better for the detail, and I kept both.46:Tcd8,// ---- Visualization 3a: one map per purpose (small multiples), SAME color scale on all maps ---- // Color = the share of that purpose's total money that went to each recipient, so maps are directly comparable. const v3_recipients = new Set(rows.map(r => geo_name(r.recipient))); const v3_amounts = d3.rollup(rows, v => d3.sum(v, d => d.amount), d => d.purpose, d => geo_name(d.recipient)); const v3_counts = d3.rollup(rows, v => v.length, d => d.purpose, d => geo_name(d.recipient)); const v3_totals = new Map(top_purposes.map(p => [p, d3.sum(v3_amounts.get(p).values())])); const v3_max_share = d3.max(top_purposes, p => d3.max(v3_amounts.get(p).values()) / v3_totals.get(p)); // Question 3's own color scale (Greens), independent of the blue/orange used in Questions 1 and 2 const v3_color = d3.scaleSequentialSqrt(t => d3.interpolateGreens(0.12 + 0.78 * t)).domain([0, v3_max_share]); const v3_dims = {panel_width: 470, panel_height: 250, cell_width: 490, cell_height: 330}; const v3_container = d3.create("svg") .attr("width", v3_dims.cell_width * 2) .attr("height", v3_dims.cell_height * 3 + 20) .attr("font-family", font); add_no_data_pattern(v3_container); v3_container.append("text") .attr("x", v3_dims.cell_width).attr("y", 25) .attr("text-anchor", "middle").attr("font-weight", "bold").attr("font-size", 16) .text("Where Each Purpose's Money Goes (share of that purpose's total, 1973-2013)"); top_purposes.forEach((p, i) => { const panel = v3_container.append("g") .attr("transform", `translate(${(i % 2) * v3_dims.cell_width + 10}, ${Math.floor(i / 2) * v3_dims.cell_height + 70})`); const amounts = v3_amounts.get(p); const total = v3_totals.get(p); const share_of = n => (amounts.get(n) || 0) / total; panel.append("text").attr("y", -8).attr("font-weight", "bold").attr("font-size", 13).text(`${i + 1}. ${p}`); draw_map( panel.append("g"), v3_dims.panel_width, v3_dims.panel_height, n => v3_recipients.has(n) ? (amounts.has(n) && share_of(n) > 0 ? v3_color(share_of(n)) : lightgray) : NO_DATA, n => `${n}\n${p}: ${fmt(amounts.get(n) || 0)} (${d3.format(".1%")(share_of(n))} of this purpose)\nCommitments: ${(v3_counts.get(p).get(n) || 0).toLocaleString()}` ); }); // Shared legend and notes in the empty sixth cell const v3_legend = v3_container.append("g").attr("transform", `translate(${v3_dims.cell_width + 20}, ${v3_dims.cell_height * 2 + 100})`); v3_legend.append("text").attr("font-weight", "bold").attr("font-size", 13).text("Share of that purpose's total money"); const v3_legend_g = v3_legend.append("g").attr("transform", "translate(0, 16)"); add_seq_legend(v3_legend_g, v3_color, [0, 0.02, 0.1, 0.25, 0.5, v3_max_share], d3.format(".0%"), 50); v3_legend.append("rect").attr("y", 62).attr("width", 16).attr("height", 12).attr("fill", lightgray).attr("stroke", "#bbb").attr("stroke-width", 0.5); v3_legend.append("text").attr("x", 24).attr("y", 73).attr("font-size", 12).text("in dataset, got nothing for this purpose"); v3_legend.append("rect").attr("y", 82).attr("width", 16).attr("height", 12).attr("fill", NO_DATA).attr("stroke", "#bbb").attr("stroke-width", 0.5); v3_legend.append("text").attr("x", 24).attr("y", 93).attr("font-size", 12).text("country not in the dataset"); display(v3_container.node());47:T10c3,// ---- Visualization 3b: share of each recipient's money that goes to each purpose ---- const hm_totals = d3.rollup(rows, v => d3.sum(v, d => d.amount), d => d.recipient); const hm_countries = Array.from(hm_totals).sort((a, b) => b[1] - a[1]).slice(0, 15).map(d => d[0]); // sorted by total received const hm_parts = d3.rollup(rows, v => d3.sum(v, d => d.amount), d => d.recipient, d => d.purpose); const hm_cells = []; hm_countries.forEach((c, r) => { top_purposes.forEach((p, k) => { hm_cells.push({country: c, purpose: p, row: r, col: k, share: (hm_parts.get(c).get(p) || 0) / hm_totals.get(c)}); }); }); // Square cells with the same gap on all sides const hm_size = 34, hm_gap = 3; const hm_dims = { width: top_purposes.length * (hm_size + hm_gap) - hm_gap, height: hm_countries.length * (hm_size + hm_gap) - hm_gap, margin_left: 120, margin_right: 190, margin_top: 150, margin_bottom: 10 }; const hm_max = d3.max(hm_cells, d => d.share); // Question 3's own heatmap color scale (Purples), independent of the maps and of Questions 1 and 2 const hm_color = d3.scaleSequentialSqrt(t => d3.interpolatePurples(0.1 + 0.8 * t)).domain([0, hm_max]); const hm_container = d3.create("svg") .attr("width", hm_dims.width + hm_dims.margin_left + hm_dims.margin_right) .attr("height", hm_dims.height + hm_dims.margin_top + hm_dims.margin_bottom) .attr("font-family", font); const hm_chart = hm_container.append("g") .attr("transform", `translate(${hm_dims.margin_left}, ${hm_dims.margin_top})`); const hm_cell = hm_chart.selectAll("g.cell").data(hm_cells).enter().append("g") .attr("class", "cell") .attr("transform", d => `translate(${d.col * (hm_size + hm_gap)}, ${d.row * (hm_size + hm_gap)})`); // light gray base so tiny and zero values do not disappear into the white background hm_cell.append("rect").attr("width", hm_size).attr("height", hm_size).attr("fill", lightgray); hm_cell.append("rect").attr("width", hm_size).attr("height", hm_size) .attr("fill", d => d.share > 0.0005 ? hm_color(d.share) : lightgray); // only print the values that are big enough to matter (everything else is in the hover text); white text on dark cells hm_cell.filter(d => d.share >= 0.05).append("text") .attr("x", hm_size / 2).attr("y", hm_size / 2 + 4) .attr("text-anchor", "middle").attr("font-size", 12).attr("font-weight", "bold") .attr("fill", d => d.share > hm_max * 0.35 ? "white" : "#222") .text(d => d3.format(".0%")(d.share)); hm_cell.append("title").text(d => `${d.country}, ${d.purpose}\n${d3.format(".1%")(d.share)} of everything ${d.country} received`); // Row and column labels hm_chart.selectAll("text.row_label").data(hm_countries).enter().append("text") .attr("class", "row_label") .attr("x", -8).attr("y", (d, i) => i * (hm_size + hm_gap) + hm_size / 2 + 4) .attr("text-anchor", "end").attr("font-size", 12).text(d => d); hm_chart.selectAll("text.col_label").data(top_purposes).enter().append("text") .attr("class", "col_label") .attr("transform", (d, i) => `translate(${i * (hm_size + hm_gap) + hm_size / 2}, -8) rotate(-45)`) .attr("font-size", 12).text(d => d); hm_container.append("text") .attr("x", 10).attr("y", 22) .attr("font-weight", "bold").attr("font-size", 16) .text("Share of Each Recipient's Total That Goes to Each Purpose"); hm_container.append("text") .attr("x", 10).attr("y", 40).attr("font-size", 11).attr("fill", "#555") .text("15 biggest recipients, sorted by total received. Values under 5% are shown on hover."); // Legend const hm_legend = hm_container.append("g").attr("transform", `translate(${hm_dims.margin_left + hm_dims.width + 40}, ${hm_dims.margin_top + 10})`); hm_legend.append("text").attr("font-weight", "bold").attr("font-size", 12).text("Share of recipient's total"); const hm_legend_items = hm_legend.selectAll("g").data([0, 0.01, 0.05, 0.1, 0.25, hm_max]).enter().append("g") .attr("transform", (d, i) => `translate(0, ${12 + i * 20})`); hm_legend_items.append("rect").attr("width", 16).attr("height", 14) .attr("fill", d => d > 0.0005 ? hm_color(d) : lightgray).attr("stroke", "#bbb").attr("stroke-width", 0.5); hm_legend_items.append("text").attr("x", 24).attr("y", 12).attr("font-size", 12) .text(d => d === 0 ? "0%" : d3.format(".0%")(d)); display(hm_container.node());48:T11dd,### Answer #3 I made two charts for this question: **Chart 3a** (one map per purpose) and **Chart 3b** (heatmap). They measure two different things: the maps show which countries receive the largest share of a purpose's money, while the heatmap shows how important each purpose is inside each recipient country's own total. #### 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? The five most frequent purposes (by number of commitments) are Sectors not specified (8,076), Social/ welfare services (6,228), Strengthening civil society (5,600), Higher education (4,593) and Multisector aid (3,026). On the maps, almost all of the money for every purpose goes to the same big recipients (India, Brazil, Thailand, Colombia and South Africa), while rich donor countries like the United States, Canada and Australia get very little. The purposes still differ in which of those countries dominates. India got 59% of "Sectors not specified" and 41% of "Multisector aid" (Thailand another 22%). Colombia got 70% of all "Social/ welfare services" money. "Strengthening civil society" is split between South Africa (30%), Colombia (26%) and India (22%). "Higher education" is the most evenly spread (India 25%, Brazil 17%, Thailand 16%, Colombia 11%, South Africa 11%). Because all maps use the same color scale, the darkest country on the social/ welfare map (Colombia) stands out right away, while the higher education map has no very dark country. #### Are there countries that tend to receive more of certain types of donations than others? Yes. The heatmap shows which countries put more of their own money into certain types: 25% of everything Colombia received went to social/ welfare services, compared to about 1% for Brazil, India and Thailand. Hungary has the highest share of multisector aid (7%) and South Africa has the highest shares for sectors not specified (5.5%) and civil society (4%). For most countries each of these five purposes is under 5% of what they received, because these purposes are frequent (many small commitments) but not big in dollars. Note that I measure "distribute" in committed dollars; the number of commitments would give a different picture because these five purposes are chosen by count. #### Why this design I used one map per purpose with the same projection and the same color scale (share of that purpose's total money), so the reader can compare where the color is and how dark it is across the five maps, and one shared legend is enough. I used share instead of dollars because the dollar totals are very different (for example $6.4B to the top recipient for social/ welfare services but only $0.7B for civil society), and a shared dollar scale would make the smaller purposes look empty. Missing countries have a gray hatch and countries that are in the data but got nothing for that purpose are plain light gray, so "zero" and "missing" are different. The heatmap answers the second question. It uses the share of each recipient's own total, so it shows each country's mix of purposes no matter how big the country is. Cells are squares with equal gaps and a gray base so small values stay visible, and I only print percentages of 5% or more to reduce clutter (the rest are on hover). I used green for the maps and purple for the heatmap, different from the blue and orange of Questions 1 and 2, because here the colors show a share and not donor versus recipient. I kept "Sectors not specified" because it is one of the five most frequent, but it is a catch-all category and not a real purpose, so I would be careful about reading too much into it. #### Comparing my two solutions The maps are good for seeing geography, like how almost everything lands in South America, South and Southeast Asia and South Africa, and they show the five purposes side by side on the same scale. Their problems are that they show share of a purpose, not how much of a country's own money it is, and small countries in Europe and the Gulf are hard to see even with dots. The heatmap is good for exact numbers and for comparing countries with each other, because every cell is a percentage of that country's own total, and it makes Colombia's 25% social/ welfare share easy to spot. Its problems are that it has no geography, and it only shows the 15 biggest recipients. Because of this I think the maps answer the first question better and the heatmap answers the second question better, so I kept both.49:Tce6,## Summary Write-up **Data & AI disclosure.** Data: the course's `aiddata-countries-only.csv` (a reduced version of the [AidData Core Research Release](https://www.aiddata.org/data/aiddata-core-research-release-level-1-3-1)). All preprocessing (grouping, summing, shares) is done in JavaScript/D3 in this notebook. Map outlines: [world-atlas](https://github.com/topojson/world-atlas) (Natural Earth, 110m). An AI assistant (Observable / Claude) helped revise code, colors and wording; I reviewed and ran everything and I am responsible for it. ### Visualization 1: how countries compare in donating vs. receiving - **Chart:** a scatter plot (1a) of total received (x) against total donated (y), with a dashed donated = received line and shaded "net donor" and "net recipient" zones. A paired-bar chart (1b) lists every country. - **Findings:** Giving and receiving are both very concentrated. The United States (~$116B) and Japan (~$114B) are the largest net donors, followed by Germany, the UK and France. India (~$134B received, $0 donated), Thailand, Brazil, Korea and Colombia are the largest net recipients. Only a few countries sit near the line (Austria, Australia, and the Gulf states, which both give and receive). - **Why it works:** the scatter shows both totals at once, so "much more than" is distance from the line. Symlog axes keep $0 countries visible. The bars (1b) are better for looking up a single country. ### Visualization 2: geography - **Chart:** a diverging map of net received (2a), and two maps of total donated and total received on one shared scale (2b). - **Findings:** Net donors cluster in North America, Western/Northern Europe and Japan. Net recipients cluster in South America, South/Southeast Asia, Central/Eastern Europe and Southern Africa. Neighbors with sharply different patterns include Germany vs. Poland, Japan vs. Korea, and Finland vs. Estonia. Hatched countries are not in the dataset (most of Africa and the Middle East), so the conclusions cover only the 47 countries present. - **Why it works:** a map makes neighbors visible. The net map gives a quick read, and the two-map version shows volume, which the net hides. ### Visualization 3: the five most frequent purposes - **Charts:** small-multiple maps (3a) with one **shared** color scale (each country's share of that purpose's total money), and a heatmap (3b) of each recipient's own purpose mix. - **Findings:** The same big recipients dominate every purpose, but the leader differs. India leads "Sectors not specified" and "Multisector aid", Colombia dominates "Social/welfare services", and "Strengthening civil society" is split between South Africa, Colombia and India. "Higher education" is the most evenly spread. In the heatmap, Colombia stands out with 25% of its aid going to social/welfare. - **Why it works:** the maps answer "where" and the heatmap answers "which countries favor which purpose". Because the maps share a scale, they can be compared directly. ### Color choices Blue (donor) and orange (recipient) is a color-blind-safe pair used for Questions 1 and 2. Question 3 uses green (maps) and purple (heatmap) because those colors encode shares, not donor vs. recipient. Light gray means "zero" and gray hatching means "not in the dataset", so the two are never confused.4a:[{"id":"09040dddbda03374a466600047ccbc70c46e6853884eb725db2141c566ca1b78fb7cc935096e8d5468c21e8df215e73fc49cdaaf7e2f1f89139793da25be02b2","href":"https://static.observableusercontent.com/files/09040dddbda03374a466600047ccbc70c46e6853884eb725db2141c566ca1b78fb7cc935096e8d5468c21e8df215e73fc49cdaaf7e2f1f89139793da25be02b2","name":"aiddata-countries-only.csv","type":"text/csv","lastModified":1793303852021,"size":8760387}] 38:{"id":"6fbff30159f86fd9","slug":"mini-project-1-geographic-financial-aid-due-oct-29th","title":"Mini-Project 1: Geographic Financial Aid (Due Oct. 29th)","thumbnail":"d8d90cfd1c78b61ce1c263acf742414afa06946b0725333b78c2970ac3c2b93f","access_level":"public","create_time":"$D2026-10-30T00:11:18.636Z","update_time":"$D2026-10-30T00:20:00.014Z","view_time":null,"first_public_time":"$D2026-10-30T00:21:57.946Z","has_unpublished_edits":null,"fork":{"id":"afdd297a0e301750","slug":"mini-project-1-geographic-financial-aid-due-oct-29th","title":"Mini-Project 1: Geographic Financial Aid (Due Oct. 29th)","owner":{"id":"c7b9449253b32926","login":"dheeraj-pakala","name":"Dheeraj Pakala"}},"stars":0,"starred":false,"owner":{"type":"team","id":"081737d4dd256c05","login":"dheeraj-p","name":"Dheeraj P","avatar_url":"https://avatars-next.observableusercontent.com/39a12d9cb7c3ed07b2484d371847a8eaf22ea092adc1f043cee1b3caed2b0310","tier":"free_2026","bio":"","followed_by_you":false,"follows_you":false},"version":386,"publish_version":386,"role":null,"authored":false,"authors":[{"type":"individual","id":"0cbb17f4fd13e711","login":"dheeraj-p","name":"Dheeraj P","avatar_url":"https://avatars-next.observableusercontent.com/39a12d9cb7c3ed07b2484d371847a8eaf22ea092adc1f043cee1b3caed2b0310","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"081737d4dd256c05","login":"dheeraj-p","name":"Dheeraj P","avatar_url":"https://avatars-next.observableusercontent.com/39a12d9cb7c3ed07b2484d371847a8eaf22ea092adc1f043cee1b3caed2b0310","tier":"free_2026","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"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":83,"value":"# Mini-Project 1: Geographic Financial Aid\n\n**Data:** `aiddata-countries-only.csv` (98,540 commitments from 1973 to 2013, 47 countries). All of the grouping and summing is done in this notebook with D3 (JavaScript). The only other dataset is the world map (`world-atlas`, Natural Earth, 110m), loaded from jsDelivr below. One commitment (Australia to Thailand, 2009) has a negative amount (-$55,619); I kept it because it is negligible. Monaco and Liechtenstein are in the data but are too small to appear on the 110m map (both are about $0).\n\n**AI disclosure:** I used Claude (Anthropic) to suggest revisions to colors and chart choices. I reviewed and ran all of it, checked the numbers against the CSV, and I can explain it.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"// Load the AidData CSV and keep only the columns we need\nconst rows = (await FileAttachment(\"aiddata-countries-only.csv\").csv({typed: true})).map(r => ({\n donor: r.donor,\n recipient: r.recipient,\n year: r.year,\n amount: r.commitment_amount_usd_constant,\n purpose: r.coalesced_purpose_name\n}));\ndisplay(Inputs.table(rows, {layout: \"auto\"}));","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"// World map (TopoJSON) and the topojson library\nconst world = await d3.json(\"https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json\");\nconst topojson = await import(\"https://cdn.jsdelivr.net/npm/topojson-client@3/+esm\");","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"// Total donated and received per country\nconst donated_by = d3.rollup(rows, v => d3.sum(v, d => d.amount), d => d.donor);\nconst received_by = d3.rollup(rows, v => d3.sum(v, d => d.amount), d => d.recipient);\nconst country_names = Array.from(new Set([...donated_by.keys(), ...received_by.keys()]));\n\nconst stats = country_names.map(name => ({\n name: name,\n donated: donated_by.get(name) || 0,\n received: received_by.get(name) || 0,\n net: (received_by.get(name) || 0) - (donated_by.get(name) || 0)\n}));\n\ndisplay(Inputs.table([...stats].sort((a, b) => b.donated - a.donated), {layout: \"auto\"}));","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"$3e","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"$3f","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"## Visualization #1: How do countries compare in what they receive and donate? Are there countries that donate much more than they receive or receive much more than they donate?\n\n**Chart 1a: Scatter plot** (main chart)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"$40","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"**Chart 1b: Donated vs. received bars** (companion chart for looking up single countries)","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"$41","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"$42","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"## Visualization #2: Where are the main receivers and donors? Are there neighboring countries with radically different patterns?\n\n**Chart 2a: Net amount received** (one map, quick read)","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"$43","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"$44","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"$45","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"## Visualization #3: Top 5 most frequent purposes, by recipient country","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"// Top 5 purposes by number of commitments\nconst purpose_counts = d3.rollups(rows, v => v.length, d => d.purpose)\n .sort((a, b) => b[1] - a[1])\n .slice(0, 5);\nconst top_purposes = purpose_counts.map(d => d[0]);\ndisplay(Inputs.table(purpose_counts.map(d => ({purpose: d[0], commitments: d[1]}))));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"$46","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"**Chart 3b: Heatmap of each recipient's mix of purposes** (how important each purpose is inside each country)","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"$47","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"$48","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"$49","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"2"}} 33:null