34:["$","title",null,{"children":"Mini-Project 1: Geographic Financial Aid (Due Oct. 29th) | Dheeraj Pakala | 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:T1a35,// ---- Visualization 1a: scatter plot of received (x) vs. donated (y) ---- const v1_dims = {width: 640, height: 520, margin_left: 80, margin_right: 230, margin_top: 60, margin_bottom: 60}; const v1_max = d3.max(stats, d => Math.max(d.donated, d.received)) * 1.2; const v1_ticks = [0, 1e8, 2e8, 5e8, 1e9, 2e9, 5e9, 1e10, 2e10, 5e10, 1e11]; const v1_major = new Set([0, 1e8, 1e9, 1e10, 1e11]); // main values get a slightly darker grid line // 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})`); // Light gray grid on a white background: visible but does not dominate 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", d => v1_major.has(d) ? "#e2e2e2" : "#f3f3f3"); 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", d => v1_major.has(d) ? "#e2e2e2" : "#f3f3f3"); // Axes v1_chart.append("g") .attr("transform", `translate(0, ${v1_dims.height})`) .call(d3.axisBottom(v1_x).tickValues(v1_ticks).tickFormat(fmt)) .call(g => g.selectAll("text").attr("font-size", 10)); v1_chart.append("g") .call(d3.axisLeft(v1_y).tickValues(v1_ticks).tickFormat(fmt)) .call(g => g.selectAll("text").attr("font-size", 10)); // 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"); // Points, colored by net received (dark outline keeps near-balanced, pale points visible) 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", 6) .attr("fill", d => net_color(d.net)) .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)}`); // ---- Labels without overlap ---- // Label the 16 biggest countries (the rest show on hover). Biggest countries are placed first. const v1_top = [...stats] .sort((a, b) => Math.max(b.donated, b.received) - Math.max(a.donated, a.received)) .slice(0, 16); const char_w = 6.3, label_h = 12; // boxes that labels must not touch: every dot, then every label already placed const v1_boxes = stats.map(d => ({x: v1_x(d.received) - 7, y: v1_y(d.donated) - 7, w: 14, h: 14})); const hit = (a, b) => a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.y + a.h > b.y; // try positions around the dot: closest first (right, up-right, down-right, left, ...), then farther away const radii = [11, 20, 30, 42, 56, 72, 90, 110, 135]; const angles = [0, -35, 35, 180, -145, 145, -90, 90, -60, -120]; // degrees: 0 = right, negative = up const v1_labels = []; v1_top.forEach(d => { const px = v1_x(d.received), py = v1_y(d.donated); const w = d.name.length * char_w; let best = null; search: for (const r of radii) { for (const a of angles) { const rad = a * Math.PI / 180; const cx = Math.cos(rad), sy = Math.sin(rad); const tx = px + r * cx, ty = py + r * sy; const anchor = cx > 0.3 ? "start" : (cx < -0.3 ? "end" : "middle"); const bx = anchor === "start" ? tx : (anchor === "end" ? tx - w : tx - w / 2); const box = {x: bx - 2, y: ty - label_h, w: w + 4, h: label_h + 3}; // stay inside the plot area and above the x-axis if (box.x < 0 || box.x + box.w > v1_dims.width || box.y < 0 || box.y + box.h > v1_dims.height - 2) continue; if (v1_boxes.some(b => hit(box, b))) continue; best = {d, px, py, tx, ty, anchor, box, r, cx, sy}; break search; } } if (best) { v1_boxes.push(best.box); v1_labels.push(best); } }); // thin leader lines for labels that had to move away from their dot v1_chart.selectAll("line.leader").data(v1_labels.filter(l => l.r > 14)).enter().append("line") .attr("class", "leader") .attr("x1", l => l.px + 7 * l.cx).attr("y1", l => l.py + 7 * l.sy) .attr("x2", l => l.tx + (l.anchor === "start" ? -2 : (l.anchor === "end" ? 2 : 0))) .attr("y2", l => l.ty - 4) .attr("stroke", "#999").attr("stroke-width", 0.6); // labels, with a white outline so they stay readable over grid lines v1_chart.selectAll("text.country_label").data(v1_labels).enter().append("text") .attr("class", "country_label") .attr("x", l => l.tx).attr("y", l => l.ty) .attr("text-anchor", l => l.anchor) .attr("font-size", 11) .attr("stroke", "white").attr("stroke-width", 3).attr("paint-order", "stroke") .text(l => l.d.name); // Titles v1_container.append("text") .attr("x", v1_dims.margin_left + v1_dims.width / 2).attr("y", 30) .attr("text-anchor", "middle").attr("font-weight", "bold").attr("font-size", 16) .text("Total Donated vs. Total Received by Country, 1973-2013"); 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 (constant USD, 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 (constant USD, symlog scale)"); // Legend (drawn ONCE) 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());41:T1249,// ---- 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: 760, 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 = 0; // 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, 5e8, 1e9, 5e9, 1e10, 5e10, 1e11]; const v1b_major = new Set([1e8, 1e9, 1e10, 1e11]); // powers of ten get a slightly darker grid line // 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 const v1b_grid = v1b_ticks.flatMap(t => [{x: v1b_left(t), t}, {x: v1b_right(t), t}]); v1b_chart.selectAll("line.grid").data(v1b_grid).enter().append("line") .attr("x1", d => d.x).attr("x2", d => d.x).attr("y1", 0).attr("y2", v1b_dims.height) .attr("stroke", d => v1b_major.has(d.t) ? "#e2e2e2" : "#f3f3f3"); // 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)) .call(g => g.selectAll("text").attr("font-size", 10)); v1b_chart.append("g").call(d3.axisTop(v1b_right).tickValues(v1b_ticks).tickFormat(fmt)) .call(g => g.selectAll("text").attr("font-size", 10)); // 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_chart.append("line") .attr("x1", v1b_half).attr("x2", v1b_half).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:T101c,### 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. Because a symlog axis squeezes the large values together, I added extra ticks ($100M, $200M, $500M, $1B, $2B, $5B and so on) so the reader can estimate an amount, and I drew the main values ($1B, $10B, $100B) with a slightly darker grid line than the in-between ones. The grid is light gray so it does not compete with the points. I colored each point by its net balance (blue for donors, orange for recipients, a color-blind-safe pair) as a second cue. I labeled the 16 biggest countries, and the labels are placed so they do not overlap each other or the dots (a thin line connects a label to its dot when it had to move away); the other countries show their values 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 (the rest need hovering), and the symlog scale on both axes makes exact values harder to read, even with the extra ticks. **Chart 1b (donated/received bars).** It has two bars per country: donated to the left (blue) and received to the right (orange), meeting at a center line, on the same scale and sorted by net balance, with the biggest net donors at the top. Advantages: every country is labeled, the sorted order gives an exact ranking, the mirrored layout makes it easy to see which side is bigger for each country, and it is easy to look up one country. Disadvantages: the pattern across all countries is harder to see than in the scatter plot, there is no "equal" reference line, countries with $0 on one side have no bar there, 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:Tbd7,// ---- 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: pale yellow (small) to dark blue / dark red ($100B). Exactly $0 is drawn light gray instead. 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]; // one place that decides the fill: hatch = missing, light gray = $0, ramp color = everything else const v2b_fill = (key, n) => { if (!v2_by_name.has(n)) return NO_DATA; const v = v2_by_name.get(n)[key]; return v > 0 ? v2b_color[key](v) : lightgray; }; 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 => v2b_fill(key, n), 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: the $0 swatch is light gray, then the ramp, then the hatch for missing data const legend = panel.append("g").attr("transform", `translate(30, ${v2b_dims.height + 24})`); add_seq_legend(legend, v => v === 0 ? lightgray : v2b_color[key](v), 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:T10b9,### 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: on the "total donated" map (yellow to dark blue) the darkest countries are the United States, Japan, Germany, the United Kingdom and France, while on the "total received" map (yellow to dark red) the darkest countries are India, Thailand, Brazil, Colombia, Poland and South 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). The two volume maps make these contrasts easy to see: Germany is dark blue on the donated map and light gray (almost nothing received) on the received map, while Poland is the opposite. **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, with a light neutral color at $0), 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 the legend says the scale runs to ±$134B. Very small countries get a dot so they do not disappear, and the legend explains the dot. For the two volume maps I used a different color ramp for each side (yellow to dark blue for donated, yellow to dark red for received) on the same scale, so the blue map clearly means "donated" and the red map clearly means "received", and the dark end is easy to tell from the light end. These maps use three different looks for three different cases: a **gray hatch** means the country is not in the dataset, **plain light gray** means the country is in the dataset but has exactly $0 on that side (for example India on the donated map, or the Netherlands on the received map), and a **yellow-to-dark color** means it has a positive amount. This way a country with no data is never confused with a country that gave or received nothing. #### 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, shows which countries gave or received nothing at all (light gray), and makes neighbor comparisons (for example Germany vs. Poland) more direct. Disadvantages: it takes more space, the reader has to flip between two maps, and small European countries are still hard to see even with dots. 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:Teac,## Summary Write-up **AI Disclosure:** I used Claude (Anthropic) to get ideas, suggestions, and help review my code, visualizations, and written answers. I made changes based on the suggestions, checked the numbers against the CSV, and tested the code myself. **Data.** The course's `aiddata-countries-only.csv` (98,540 commitments, 1973-2013, 47 countries). Amounts are commitments in constant USD, so "donated" and "received" mean "committed to give" and "committed to receive". All preprocessing (grouping, summing, shares) is done in JavaScript/D3 in this notebook. Map outlines come from [world-atlas](https://github.com/topojson/world-atlas) (Natural Earth, 110m). ### Visualization 1: how countries compare in donating vs. receiving - **Charts:** a scatter plot (1a) of total received (x) against total donated (y), with a dashed "donated = received" line, and a mirrored bar chart (1b) with donated on the left and received on the right for 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, Poland and Colombia are the largest net recipients. Only a few countries sit near the line (Austria, Australia). The Gulf states both give and receive, but receive more. - **Why it works:** the scatter shows both totals at once, so "much more than" is the distance from the line. Symlog axes keep $0 countries visible, and extra ticks help read the values. The bars (1b) are better for looking up a single country. ### Visualization 2: geography - **Charts:** 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, Southern Africa and the Gulf. 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 the volume of each side, 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. I measure money in committed dollars, while the top five purposes are chosen by number of commitments. ### 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 show shares, not donor vs. recipient. On the donated/received maps and the purpose maps, light gray means "$0" and gray hatching means "not in the dataset", so the two are never confused. On the net map, $0 is the light neutral color in the middle of the diverging scale.4a:[{"id":"09040dddbda03374a466600047ccbc70c46e6853884eb725db2141c566ca1b78fb7cc935096e8d5468c21e8df215e73fc49cdaaf7e2f1f89139793da25be02b2","href":"https://static.observableusercontent.com/files/09040dddbda03374a466600047ccbc70c46e6853884eb725db2141c566ca1b78fb7cc935096e8d5468c21e8df215e73fc49cdaaf7e2f1f89139793da25be02b2","name":"aiddata-countries-only.csv","type":"text/csv","lastModified":1793303852021,"size":8760387}] 38:{"id":"afdd297a0e301750","slug":"mini-project-1-geographic-financial-aid-due-oct-29th","title":"Mini-Project 1: Geographic Financial Aid (Due Oct. 29th)","thumbnail":"2fc62c1ebffa2434372be36067dffe7b0a9f252f49e94b6d29fa37d987020446","access_level":"public","create_time":"$D2026-10-29T19:51:38.995Z","update_time":"$D2026-10-30T04:11:40.123Z","view_time":null,"first_public_time":"$D2026-10-30T00:09:48.578Z","has_unpublished_edits":null,"fork":{"id":"e6fcea972bfc4543","slug":"2026-infovis-cse_project-1","title":"Mini-Project 1: Geographic Financial Aid (Due Oct. 29th)","owner":{"id":"3d6c0f5acd6a20a4","login":"rk2546","name":"rk2546"}},"stars":0,"starred":false,"owner":{"type":"team","id":"c7b9449253b32926","login":"dheeraj-pakala","name":"Dheeraj Pakala","avatar_url":"https://avatars-next.observableusercontent.com/8d828baefb1c8f578c6814fc98231b6688ce51e026b42e3d63d6d00b7bd91c68","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":399,"publish_version":399,"role":null,"authored":false,"authors":[{"type":"individual","id":"5c5b74a2ca519b75","login":"dheeraj-pakala","name":"Dheeraj Pakala","avatar_url":"https://avatars-next.observableusercontent.com/8d828baefb1c8f578c6814fc98231b6688ce51e026b42e3d63d6d00b7bd91c68","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"c7b9449253b32926","login":"dheeraj-pakala","name":"Dheeraj Pakala","avatar_url":"https://avatars-next.observableusercontent.com/8d828baefb1c8f578c6814fc98231b6688ce51e026b42e3d63d6d00b7bd91c68","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"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).","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