34:["$","title",null,{"children":"Mini-Project 1: Geographic Financial Aid (Due Oct. 29th) | Anna Susan Cherian | 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:T48e,// Function to wrap a chart in a container and add a hover tooltip to the given elements function addTooltip(svgNode, elements, html) { const container = d3.create("div").style("position", "relative"); container.append(() => svgNode); const tip = container.append("div") .style("position", "absolute") .style("pointer-events", "none") .style("background", "white") .style("border", "1px solid #ccc") .style("border-radius", "4px") .style("padding", "6px 8px") .style("font", "12px sans-serif") .style("opacity", 0); elements .style("cursor", "pointer") .on("pointerenter", (event, d) => tip.style("opacity", 1).html(html(d))) .on("pointermove", event => { const [mx, my] = d3.pointer(event, container.node()); const tw = tip.node().offsetWidth, th = tip.node().offsetHeight; const bw = container.node().clientWidth, bh = container.node().clientHeight; tip.style("left", `${mx + 12 + tw > bw ? mx - 12 - tw : mx + 12}px`) .style("top", `${my + 12 + th > bh ? my - 12 - th : my + 12}px`); }) .on("pointerleave", () => tip.style("opacity", 0)); return container.node(); }3f:Te7c,// Dumbbell chart: countries that both donated and received function dumbbellChart() { const rows = scatterAll .filter(d => d.donated > 0 && d.received > 0) .sort((a, b) => (b.donated - b.received) - (a.donated - a.received)); const width = 900, rowH = 12; const margin = {top: 40, right: 40, bottom: 40, left: 170}; const height = rows.length * rowH + margin.top + margin.bottom; const x = d3.scaleLinear() .domain([0, d3.max(rows, d => Math.max(d.donated, d.received))]) .nice() .range([margin.left, width - margin.right]); const y = d3.scalePoint() .domain(rows.map(d => d.country)) .range([margin.top, height - margin.bottom]) .padding(0.5); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .style("font", "10px sans-serif"); // X axis with gridlines svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).ticks(6).tickFormat(fmt)) .call(g => g.selectAll(".tick line").clone() .attr("y2", -(height - margin.top - margin.bottom)) .attr("stroke-opacity", 0.1)); // Country names on the y-axis svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).tickSize(0).tickPadding(12)) .call(g => g.select(".domain").remove()); // One group per country const row = svg.append("g") .selectAll("g") .data(rows) .join("g"); // Line between the two dots row.append("line") .attr("x1", d => x(d.donated)) .attr("x2", d => x(d.received)) .attr("y1", d => y(d.country)) .attr("y2", d => y(d.country)) .attr("stroke", d => d.donated > d.received ? blue : orange) .attr("stroke-opacity", 0.4) .attr("stroke-width", 3) .attr("pointer-events", "none"); //Point for donated amount row.append("circle") .attr("cx", d => x(d.donated)) .attr("cy", d => y(d.country)) .attr("r", 3.5) .attr("fill", blue) .attr("pointer-events", "none"); //Point for received amount row.append("circle") .attr("cx", d => x(d.received)) .attr("cy", d => y(d.country)) .attr("r", 3.5) .attr("fill", orange) .attr("pointer-events", "none"); // Legend [["Donated", blue], ["Received", orange]].forEach(([label, color], i) => { const g = svg.append("g").attr("transform", `translate(${margin.left + i * 90},${margin.top - 20})`); g.append("circle").attr("r", 5).attr("cx", 5).attr("fill", color); g.append("text").attr("x", 15).attr("dy", "0.35em").text(label); }); // Invisible rectangle across the row, so the whole row can be hovered instead of just the dots to show tooltip row.append("rect") .attr("x", margin.left) .attr("y", d => y(d.country) - rowH / 2) .attr("width", width - margin.left - margin.right) .attr("height", rowH) .attr("fill", "transparent"); //the line being hovered on get highlighted row .on("pointerenter.highlight", function () { d3.select(this).select("line").attr("stroke-opacity", 1); d3.select(this).selectAll("circle").attr("r", 5); }) .on("pointerleave.highlight", function () { d3.select(this).select("line").attr("stroke-opacity", 0.4); d3.select(this).selectAll("circle").attr("r", 3.5); }); //adding tooltip return addTooltip(svg.node(), row, d => { const diff = d.donated - d.received; return `${d.country}
Donated: ${fmt(d.donated)}
Received: ${fmt(d.received)}
${diff >= 0 ? "Net donor" : "Net recipient"}: ${fmt(Math.abs(diff))} `; }); }40:Taae,// Bar chart: countries that only donated or only received function oneSidedChart() { const donorsOnly = scatterAll .filter(d => d.donated > 0 && d.received === 0) .sort((a, b) => b.donated - a.donated); const recipientsOnly = scatterAll .filter(d => d.received > 0 && d.donated === 0) .sort((a, b) => b.received - a.received); const nD = donorsOnly.length; const nR = recipientsOnly.length; const width = 900, rowH = 20, headerH = 30; const margin = {top: 20, right: 40, bottom: 40, left: 150}; const height = margin.top + 2 * headerH + (nD + nR) * rowH + margin.bottom; // Donor rows first, then recipient rows, each section below its own header const rows = [ ...donorsOnly.slice(0, nD).map((d, i) => ({ country: d.country, value: d.donated, type: "Donated", y: margin.top + headerH + i * rowH })), ...recipientsOnly.slice(0, nR).map((d, i) => ({ country: d.country, value: d.received, type: "Received", y: margin.top + 2 * headerH + (nD + i) * rowH })) ]; const x = d3.scaleLinear() .domain([0, d3.max(rows, d => d.value)]) .nice() .range([margin.left, width - margin.right]); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .style("font", "11px sans-serif"); // Section headers svg.append("text") .attr("x", margin.left) .attr("y", margin.top + headerH - 10) .attr("font-weight", "bold") .attr("fill", blue) .text(`Donated only`); svg.append("text") .attr("x", margin.left) .attr("y", margin.top + 2 * headerH + nD * rowH - 10) .attr("font-weight", "bold") .attr("fill", orange) .text(`Received only`); // Bars const bars = svg.append("g") .selectAll("rect") .data(rows) .join("rect") .attr("x", x(0)) .attr("y", d => d.y) .attr("width", d => x(d.value) - x(0)) .attr("height", rowH * 0.75) .attr("fill", d => d.type === "Donated" ? blue : orange); // Country names svg.append("g") .selectAll("text") .data(rows) .join("text") .attr("x", margin.left - 6) .attr("y", d => d.y + rowH * 0.375) .attr("dy", "0.35em") .attr("text-anchor", "end") .text(d => d.country); // X axis with gridlines svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).ticks(6).tickFormat(fmt)) .call(g => g.selectAll(".tick line").clone() .attr("y2", -(height - margin.top - margin.bottom)) .attr("stroke-opacity", 0.1)); // adding tooltip return addTooltip(svg.node(), bars, d => `${d.country}
${d.type}: ${fmt(d.value)}`); }41:T4c9,//manually setting countries to continents const continentOf = { "Australia": "Oceania", "New Zealand": "Oceania", "Canada": "North America", "United States": "North America", "Brazil": "South America", "Chile": "South America", "Colombia": "South America", "South Africa": "Africa", "India": "Asia", "Japan": "Asia", "Korea": "Asia", "Kuwait": "Asia", "Qatar": "Asia", "Saudi Arabia": "Asia", "Taiwan": "Asia", "Thailand": "Asia", "United Arab Emirates": "Asia", "Austria": "Europe", "Belgium": "Europe", "Cyprus": "Europe", "Czech Republic": "Europe", "Denmark": "Europe", "Estonia": "Europe", "Finland": "Europe", "France": "Europe", "Germany": "Europe", "Greece": "Europe", "Hungary": "Europe", "Iceland": "Europe", "Ireland": "Europe", "Italy": "Europe", "Latvia": "Europe", "Liechtenstein": "Europe", "Lithuania": "Europe", "Luxembourg": "Europe", "Monaco": "Europe", "Netherlands": "Europe", "Norway": "Europe", "Poland": "Europe", "Portugal": "Europe", "Romania": "Europe", "Slovak Republic": "Europe", "Slovenia": "Europe", "Spain": "Europe", "Sweden": "Europe", "Switzerland": "Europe", "United Kingdom": "Europe" };42:T703,//Figure 3 & 5: Total donated/received amount by continent - Key decides what to calculate function continentBarChart(key, title, color) { const rows = [...continentTotals].sort((a, b) => b[key] - a[key]); const width = 700, height = 400; const margin = {top: 20, right: 20, bottom: 30, left: 90}; const yMax = d3.max(continentTotals, d => Math.max(d.donated, d.received)); const x = d3.scaleBand() .domain(rows.map(d => d.continent)) .range([margin.left, width - margin.right]) .padding(0.3); const y = d3.scaleLinear() .domain([0, yMax]) .nice() .range([height - margin.bottom, margin.top]); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .style("font", "12px sans-serif"); svg.append("text") .attr("transform", "rotate(-90)") .attr("x", -(margin.top + height - margin.bottom) / 2) .attr("y", 18) .attr("text-anchor", "middle") .text("Amount (USD)"); svg.append("g") .selectAll("rect") .data(rows) .join("rect") .attr("x", d => x(d.continent)) .attr("y", d => y(d[key])) .attr("width", x.bandwidth()) .attr("height", d => y(0) - y(d[key])) .attr("fill", color); // Value labels on top of each bar svg.append("g") .selectAll("text") .data(rows) .join("text") .attr("x", d => x(d.continent) + x.bandwidth() / 2) .attr("y", d => y(d[key]) - 5) .attr("text-anchor", "middle") .text(d => fmt(d[key])); svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x)); svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(6).tickFormat(fmt)); return svg.node(); }43:Tb95,//Figure 4 & 6 & 9: Provide a continent and function will return a bar chart showing amounts that countries in that continent received and donated. function continentGivingReceivingChart(continent) { const sumAmount = v => d3.sum(v, d => d.commitment_amount_usd_constant); const donatedBy = d3.rollup(data, sumAmount, d => d.donor); const receivedBy = d3.rollup(data, sumAmount, d => d.recipient); const rows = Object.keys(continentOf) .filter(c => continentOf[c] === continent) .map(c => ({ country: c, donated: donatedBy.get(c) ?? 0, received: receivedBy.get(c) ?? 0 })) .sort((a, b) => b.donated - a.donated); const keys = ["donated", "received"]; const width = 900, height = 450; const margin = {top: 50, right: 20, bottom: 100, left: 90}; const x = d3.scaleBand() .domain(rows.map(d => d.country)) .range([margin.left, width - margin.right]) .paddingInner(0.2); //needed to place two bars within the same country const xSub = d3.scaleBand() .domain(keys) .range([0, x.bandwidth()]) .padding(0.05); const y = d3.scaleLinear() .domain([0, d3.max(rows, d => Math.max(d.donated, d.received))]) .nice() .range([height - margin.bottom, margin.top]); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .style("font", "12px sans-serif"); // Legend keys.forEach((key, i) => { const g = svg.append("g").attr("transform", `translate(${margin.left + i * 110},30)`); g.append("rect").attr("width", 12).attr("height", 12).attr("fill", color[key]); g.append("text").attr("x", 18).attr("y", 10).text(key === "donated" ? "Donated" : "Received"); }); // Bars svg.append("g") .selectAll("g") .data(rows) .join("g") .attr("transform", d => `translate(${x(d.country)},0)`) .selectAll("rect") .data(d => keys.map(key => ({key, value: d[key], country: d.country}))) .join("rect") .attr("x", d => xSub(d.key)) .attr("y", d => y(d.value)) .attr("width", xSub.bandwidth()) .attr("height", d => y(0) - y(d.value)) .attr("fill", d => color[d.key]) .append("title") .text(d => `${d.country}\n${d.key === "donated" ? "Donated" : "Received"}: ${fmt(d.value)}`); // X axis with rotated country names svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).tickSize(0).tickPadding(6)) .selectAll("text") .attr("transform", "rotate(-45)") .attr("text-anchor", "end"); // Y axis + title svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(6).tickFormat(fmt)); svg.append("text") .attr("transform", "rotate(-90)") .attr("x", -(margin.top + height - margin.bottom) / 2) .attr("y", 18) .attr("text-anchor", "middle") .text("Amount (constant USD)"); return svg.node(); }44:Tb12,//Figure 7: Shows how for each continent the top 5 reasons of donation are distributed function sectorByContinentChart(side) { const names = topSectors.map(d => d.sector); const fmt = d => d3.format("$.2s")(d).replace("G", "B"); const byContinent = d3.rollup( data.filter(d => names.includes(sectorOf(d)) && continentOf[d[side]]), sumAmount, d => continentOf[d[side]], sectorOf ); const continents = Array.from(byContinent.keys()) .sort((a, b) => d3.sum(byContinent.get(b).values()) - d3.sum(byContinent.get(a).values())); const width = 900, height = 400; const margin = {top: 20, right: 240, bottom: 40, left: 90}; const x = d3.scaleBand() .domain(continents) .range([margin.left, width - margin.right]) .paddingInner(0.2); //Allows to have 5 bands within a continent const xSub = d3.scaleBand() .domain(names) .range([0, x.bandwidth()]) .padding(0.05); const y = d3.scaleLinear() .domain([0, d3.max(byContinent.values(), m => d3.max(m.values()))]) .nice() .range([height - margin.bottom, margin.top]); const color = d3.scaleOrdinal(names, d3.schemeTableau10); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .style("font", "12px sans-serif"); // Bars svg.append("g") .selectAll("g") .data(continents) .join("g") .attr("transform", c => `translate(${x(c)},0)`) .selectAll("rect") .data(c => names.map(s => ({continent: c, sector: s, value: byContinent.get(c).get(s) ?? 0}))) .join("rect") .attr("x", d => xSub(d.sector)) .attr("y", d => y(d.value)) .attr("width", xSub.bandwidth()) .attr("height", d => y(0) - y(d.value)) .attr("fill", d => color(d.sector)) .append("title") .text(d => `${d.continent}\n${d.sector}: ${fmt(d.value)}`); // Axes svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x)); svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(6).tickFormat(fmt)) .call(g => g.selectAll(".tick line").clone() .attr("x2", width - margin.left - margin.right) .attr("stroke-opacity", 0.1)); svg.append("text") .attr("transform", "rotate(-90)") .attr("x", -(margin.top + height - margin.bottom) / 2) .attr("y", 18) .attr("text-anchor", "middle") .text("Amount (constant USD)"); // Legend on the right names.forEach((name, i) => { const g = svg.append("g") .attr("transform", `translate(${width - margin.right + 20},${margin.top + i * 22})`); g.append("rect").attr("width", 12).attr("height", 12).attr("fill", color(name)); g.append("text").attr("x", 18).attr("y", 10).text(name); }); return svg.node(); }45:Tebd,// Figure 8: Heatmap function sectorMixHeatmap() { const {cells, categories, continents, counts} = sectorMixData(); const pct = d3.format(".0%"); const fmt = d => d3.format("$.2s")(d).replace("G", "B"); const maxShare = d3.max(cells, d => d.share); const cell = 40; const margin = {top: 20, right: 110, bottom: 130, left: 190}; const width = margin.left + categories.length * cell + margin.right; const height = margin.top + continents.length * cell + margin.bottom; const gridBottom = margin.top + continents.length * cell; const x = d3.scaleBand() .domain(categories) .range([margin.left, width - margin.right]) .padding(0.05); const y = d3.scaleBand() .domain(continents) .range([margin.top, gridBottom]) .padding(0.05); const color = d3.scaleSequentialSqrt(d3.interpolateRgb("#fff7ef", "#f28e2b")) .domain([0, maxShare]); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .style("font", "12px sans-serif"); // Cells svg.append("g") .selectAll("rect") .data(cells) .join("rect") .attr("x", d => x(d.sector)) .attr("y", d => y(d.continent)) .attr("width", x.bandwidth()) .attr("height", y.bandwidth()) .attr("fill", d => color(d.share)) .append("title") .text(d => `${d.continent}\n${d.sector}\n${pct(d.share)} of received aid (${fmt(d.value)})`); // Sector names svg.append("g") .attr("transform", `translate(0,${gridBottom})`) .call(d3.axisBottom(x).tickSize(0).tickPadding(6)) .call(g => g.select(".domain").remove()) .selectAll("text") .attr("transform", "rotate(-45)") .attr("text-anchor", "end"); // Continent names svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).tickSize(0).tickPadding(6) .tickFormat(c => `${c}`)) .call(g => g.select(".domain").remove()); //% amounts within the cell svg.append("g") .selectAll("text") .data(cells) .join("text") .attr("x", d => x(d.sector) + x.bandwidth() / 2) .attr("y", d => y(d.continent) + y.bandwidth() / 2) .attr("dy", "0.35em") .attr("text-anchor", "middle") .attr("font-size", 10) .attr("fill", d => d.share > maxShare * 0.35 ? "white" : "#222") .attr("pointer-events", "none") .text(d => d.share >= 0.005 ? pct(d.share) : ""); // Color legend const legendW = 12; const legendH = gridBottom - margin.top; const legendX = width - margin.right + 20; const legendY = margin.top; // define color gradient for the legend svg.append("defs").append("linearGradient") .attr("id", "sector-grad") .attr("x1", "0%").attr("y1", "100%") .attr("x2", "0%").attr("y2", "0%") .selectAll("stop") .data(d3.range(0, 1.01, 0.1)) .join("stop") .attr("offset", t => `${t * 100}%`) .attr("stop-color", t => color(t * maxShare)); // draw the gradients rectangle with gradient svg.append("rect") .attr("x", legendX).attr("y", legendY) .attr("width", legendW).attr("height", legendH) .attr("fill", "url(#sector-grad)"); const legendScale = d3.scaleLinear() .domain([0, maxShare]) .range([legendY + legendH, legendY]); // ticks on the legend svg.append("g") .attr("transform", `translate(${legendX + legendW},0)`) .call(d3.axisRight(legendScale).ticks(5).tickFormat(pct).tickSize(4)) .call(g => g.select(".domain").remove()); //legend text svg.append("text") .attr("transform", `translate(${legendX + legendW + 50},${legendY + legendH / 2}) rotate(90)`) .attr("text-anchor", "middle") .text("Share of continent's received aid"); return svg.node(); }46:T920,// Function which returns countries which have provided debt relief to the provided continent function debtReliefRows(continent) { return data.filter(d => sectorOf(d) === "Debt relief" && continentOf[d.recipient] === continent); } //Figure 10: Shows which countries provided debt relief funds to the provided continent function debtReliefDonorChart(continent) { const rows = debtReliefRows(continent); const fmt = d => d3.format("$.2s")(d).replace("G", "B"); const byDonor = d3.rollups(rows, sumAmount, d => d.donor) .map(([donor, value]) => ({donor, value})) .sort((a, b) => b.value - a.value); const width = 700; const margin = {top: 20, right: 70, bottom: 40, left: 110}; const height = byDonor.length * 40 + margin.top + margin.bottom; const y = d3.scaleBand() .domain(byDonor.map(d => d.donor)) .range([margin.top, height - margin.bottom]) .padding(0.25); const x = d3.scaleLinear() .domain([0, d3.max(byDonor, d => d.value)]) .nice() .range([margin.left, width - margin.right]); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .style("font", "12px sans-serif"); svg.append("g") .selectAll("rect") .data(byDonor) .join("rect") .attr("x", x(0)) .attr("y", d => y(d.donor)) .attr("width", d => x(d.value) - x(0)) .attr("height", y.bandwidth()) .attr("fill", "#4e79a7"); // Value labels at the end of each bar svg.append("g") .selectAll("text") .data(byDonor) .join("text") .attr("x", d => x(d.value) + 5) .attr("y", d => y(d.donor) + y.bandwidth() / 2) .attr("dy", "0.35em") .text(d => fmt(d.value)); // place ticks on x-asix svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).ticks(5).tickFormat(fmt)); //Place the donor names on y-axis svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).tickSize(0).tickPadding(8)) .call(g => g.select(".domain").remove()); // X-axis title svg.append("text") .attr("x", (margin.left + width - margin.right) / 2) .attr("y", height - 5) .attr("text-anchor", "middle") .text("Debt relief provided (constant USD)"); return svg.node(); }47:T1279,function purposeMap(code) { const purpose = topFivePurposes.find(d => d.code === code).purpose; const amounts = purposeAmounts.received.get(code) ?? new Map(); const total = d3.sum(amounts.values()); const inDataGrey = "#c4c4c4"; // in the data, received nothing for this purpose const notInDataGrey = "#f0f0f0"; // not in the dataset const width = 960, height = 580; const projection = d3.geoNaturalEarth1().fitSize([width, height - 120], mapCountries); const path = d3.geoPath(projection); // Log color scale, shared by all five purposes by using the largest amount any country received const color = d3.scaleSequentialLog(d3.interpolateRgb("#fde3c8", orange)) .domain([1e6, purposeMapMax]) .clamp(true); const fillOf = f => { const c = dataNameOf.get(f); if (c && amounts.has(c)) return color(amounts.get(c)); if (c) return inDataGrey; return notInDataGrey; }; // Centre of a country's largest landmass (so e.g. France's dot isn't pulled toward French Guiana) const mainCentroid = f => { if (f.geometry.type !== "MultiPolygon") return path.centroid(f); const parts = f.geometry.coordinates.map(c => ({type: "Polygon", coordinates: c})); return path.centroid(d3.greatest(parts, p => d3.geoArea(p))); }; const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .style("font", "12px sans-serif"); // Heading: purpose, number of recipients, total svg.append("text") .attr("x", 10).attr("y", 20) .attr("font-weight", "bold") .text(`${purpose}: received by ${amounts.size} countries, total ${fmt(total)}`); // Second line: the three largest recipients and their share const largest = Array.from(amounts, ([c, v]) => ({c, v})).sort((a, b) => b.v - a.v).slice(0, 3); svg.append("text") .attr("x", 10).attr("y", 40) .attr("fill", "#555") .text(`Largest recipients: ${largest.map(d => `${d.c} ${d3.format(".0%")(d.v / total)}`).join(", ")}`); // Countries const g = svg.append("g").attr("transform", "translate(0,55)"); g.append("g") .selectAll("path") .data(mapCountries.features) .join("path") .attr("d", path) .attr("fill", fillOf) .attr("stroke", "white") .attr("stroke-width", 0.3); // A dot on every recipient to ensure small countries, if recipient, are visible g.append("g") .selectAll("circle") .data(Array.from(amounts.keys()).map(featureOf)) .join("circle") .attr("cx", f => mainCentroid(f)[0]) .attr("cy", f => mainCentroid(f)[1]) .attr("r", 3) .attr("fill", "#222") .attr("stroke", "white") .attr("stroke-width", 0.8); // Color legend: a gradient bar with dollar amounts const legendX = 10, legendY = height - 50, legendW = 260; const logMin = Math.log10(1e6), logMax = Math.log10(purposeMapMax); svg.append("defs").append("linearGradient") .attr("id", "purpose-grad") .selectAll("stop") .data(d3.range(0, 1.01, 0.1)) .join("stop") .attr("offset", t => `${t * 100}%`) .attr("stop-color", t => color(10 ** (logMin + t * (logMax - logMin)))); svg.append("rect") .attr("x", legendX).attr("y", legendY) .attr("width", legendW).attr("height", 10) .attr("fill", "url(#purpose-grad)"); const legendScale = d3.scaleLog().domain([1e6, purposeMapMax]).range([legendX, legendX + legendW]); svg.append("g") .attr("transform", `translate(0,${legendY + 10})`) .call(d3.axisBottom(legendScale) .tickValues([1e6, 1e7, 1e8, 1e9, 1e10].filter(v => v <= purposeMapMax)) .tickFormat(fmt) .tickSize(4)) .call(g => g.select(".domain").remove()); svg.append("text") .attr("x", legendX).attr("y", legendY - 6) .text("Amount received (USD)"); // Grey swatches [["In data, received nothing for this purpose", inDataGrey], ["Not in the dataset", notInDataGrey]] .forEach(([text, c], i) => { const lg = svg.append("g").attr("transform", `translate(${legendX + legendW + 40 + i * 280},${legendY})`); lg.append("rect").attr("width", 12).attr("height", 12).attr("fill", c) .attr("stroke", c === notInDataGrey ? "#ccc" : "none"); lg.append("text").attr("x", 18).attr("y", 10).text(text); }); // Tooltip on both the shapes and the dots const tipText = f => { const c = dataNameOf.get(f); if (!c) return `${f.properties.NAME}
Not in the dataset`; const v = amounts.get(c) ?? 0; return `${c}
${purpose}
Received: ${fmt(v)}${v > 0 ? ` (${d3.format(".0%")(v / total)} of total)` : ""}`; }; return addTooltip(svg.node(), svg.selectAll("path, circle"), tipText); }48:T567,The top 5 reasons for disbursements are Air transport, Rail transport, Industrial development, Rescheduling and refinancing and Power generation/non-renewable sources. Air transport disbursements are spread out throughout many countries in the world. Canada is particularly noticeable as it is normally a donor but it received a significant amount as donations for this purpose. Rail transport is distributed across multiple countries except those in North America. Industrial development has a distribution similar to Air Transport in general. When we take a closer look we can see that there are fewer countries in Europe that has received donations for this purpose and the amount received by the all the countries for Industrial development is much lower than that for Air transport. Rescheduling and refinancing is only received by very few countries namely, India, Thailand, Brazil, Chile, Poland and Slovenia. Poland has received the most donations for this purpose probably owing to the reasons mentioned earlier about how countries within Europe(here, mostly Germany) try to support other countries in the region to protect the European economy. Power generation/non-renewable sources donations are concentrated within South America, Europe and Asia. India leads as the recipient with the most donations for industrial development, power generation and rail transport.49:[{"id":"09040dddbda03374a466600047ccbc70c46e6853884eb725db2141c566ca1b78fb7cc935096e8d5468c21e8df215e73fc49cdaaf7e2f1f89139793da25be02b2","href":"https://static.observableusercontent.com/files/09040dddbda03374a466600047ccbc70c46e6853884eb725db2141c566ca1b78fb7cc935096e8d5468c21e8df215e73fc49cdaaf7e2f1f89139793da25be02b2","name":"aiddata.csv","type":"text/csv","lastModified":1792608280018,"size":8760387},{"id":"55260abbc777c0a3b8fed19f3929dd822fef9d5118b53b76b2176d20782910e599eac919999ea8ee85a60b783fd37082574f6591fd46c0d70ddf9b00df71ce27","href":"https://static.observableusercontent.com/files/55260abbc777c0a3b8fed19f3929dd822fef9d5118b53b76b2176d20782910e599eac919999ea8ee85a60b783fd37082574f6591fd46c0d70ddf9b00df71ce27","name":"countries-50m.json","type":"application/json","lastModified":1793719053175,"size":4177662}] 38:{"id":"af04c4fb156fb4cc","slug":"mini-project-1-geographic-financial-aid-due-oct-29th","title":"Mini-Project 1: Geographic Financial Aid (Due Oct. 29th)","thumbnail":"fe7cf0b7b97c34a1b943c35d6293b1eb9cb02833dac9dfabe9c7624b7fe7e7ae","access_level":"public","create_time":"$D2026-10-19T16:41:33.264Z","update_time":"$D2026-11-14T16:18:24.102Z","view_time":null,"first_public_time":"$D2026-11-14T16:16:07.865Z","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":"4cbc58ce267f40e2","login":"anna-susan-cherian","name":"Anna Susan Cherian","avatar_url":"https://avatars-next.observableusercontent.com/c883fb00ac6df01d1b5e1060aa50b3cee59a2574af04ad842e5f86f01a3d467e","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":969,"publish_version":969,"role":null,"authored":false,"authors":[{"type":"individual","id":"fd1467515fe18f91","login":"anna-susan-cherian","name":"Anna Susan Cherian","avatar_url":"https://avatars-next.observableusercontent.com/c883fb00ac6df01d1b5e1060aa50b3cee59a2574af04ad842e5f86f01a3d467e","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"4cbc58ce267f40e2","login":"anna-susan-cherian","name":"Anna Susan Cherian","avatar_url":"https://avatars-next.observableusercontent.com/c883fb00ac6df01d1b5e1060aa50b3cee59a2574af04ad842e5f86f01a3d467e","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Mini-Project 1: Geographic Financial Aid (Due Oct. 29th)","cells":[{"id":0,"value":"# Mini-Project 1: Geographic Financial Aid (Due Oct. 29th)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":27,"value":"import { css } from \"@rk2546/infovis-cse-backend\";","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"css","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"---\n## Submission Instructions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"$3c","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"---\n## About the Dataset","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":21,"value":"This spreadsheet is a simplified and reduced version of the AidData dataset. This dataset describes commitment information for over 1.5 million development finance activities funded between 1947 and 2013. The simplified dataset contains the following columns:\n\n- **`aiddata_id`**: unique ID of the commitment\n- **`aiddata_2_id`**: secondary unique ID\n- **`year`**: year of the commitment\n- **`donor`**: country providing the financial resource\n- **`recipient`**: country receiving the financial resource\n- **`commitment_amount_usd_constant`**: the total amount of financial resources provided\n- **`coalesced_purpose_code`**: categorization ID for the stated purpose of the commitment\n- **`coalesced_purpose_name`**: the purpose of the commitment","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":58,"value":"---\n## Questions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"$3d","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":60,"value":"---\n## Grading Criteria","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"Your answers to each question are graded on the following qualities, with each question totaling up to **25 points**:\n\n- **[10pts]**: Does the visualization answer the questions posed in the exercise?\n- **[10pts]**: Does the written answer & discussion the questions posed in the exercise?\n- **[5pts]**: Is the visual representation clear? Does it have good aesthetics? If needed, you can review this notebook on clarity for reference.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"The questions above are a very useful tool for you to verify whether you are producing a good solution or not. As you go about completing this project, you can use the questions above as a self-evaluation tool in two main ways:\n\n1. Verify that you can indeed answer the questions with your visualization. If you can’t fully answer the questions, it means your solution has some problems.\n2. Compare multiple solutions to the same problem and ask yourself: “which one makes it easier for me to answer these questions?”, where easier may mean, more accurately, with less effort or faster.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":65,"value":"---\n","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":195,"value":"**AI Usage:**\n\n1. I checked up how to write charts in such a way that I can simply display them in the analysis section instead of having big pieces of code (Found out that I could write them as functions and therefore all the graphs are in the form of functions which I call in my analysis section).\n\n2. For the tooltip for the graphs in Visualization #1. And for Fig 1, because I wanted to have both received only and donated only on one chart I wanted to know how to do it. In Fig 2, how to do the highlighting.\n\n3. Looked at how to have multiple bars for one category for the bar charts.\n\n4. Looked into how to create heat map and its gradient legend.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"// Hello world!\nconst name = \"Anna Susan Cherian\"\nconst netid = \"as21117\"","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"const data = await FileAttachment(\"aiddata.csv\").csv({typed: true});\nconst donors = new Set(data.map(d => d.donor).filter(d => d));\nconst recipients = new Set(data.map(d => d.recipient).filter(d => d));\n\ndisplay(`Number of donors: ${donors.size}`);\ndisplay(`Number of recipients: ${recipients.size}`);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"// creating mapping of donated_country -> amount_donated\nconst donated = d3.rollup(\n data,\n v => d3.sum(v, d => d.commitment_amount_usd_constant),\n d => d.donor\n);\n\n// creating mapping of received_country -> amount_received\nconst received = d3.rollup(\n data,\n v => d3.sum(v, d => d.commitment_amount_usd_constant),\n d => d.recipient\n);\n\n// an array of all countries that donated and received or only did one.\nconst allCountries = Array.from(new Set([...donated.keys(), ...received.keys()]));\n\n// creating a single table with country, donated amount and received amount.\nconst scatterAll = allCountries.map(country => ({\n country,\n donated: donated.get(country) ?? 0,\n received: received.get(country) ?? 0\n}));\n","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"//general function for adding caption for the graphs with the format 'Figure x. text'\nfunction withCaption(number, caption, chart) {\n const fig = d3.create(\"div\")\n .style(\"margin\", \"0\")\n .style(\"padding-bottom\", \"2px\");\n\n\n d3.select(chart).style(\"display\", \"block\");\n fig.append(() => chart);\n fig.append(\"div\")\n .style(\"text-align\", \"center\")\n .style(\"font\", \"15px sans-serif\")\n .style(\"margin-top\", \"4px\")\n .style(\"margin-bottom\", \"24px\")\n .html(`Figure ${number}. ${caption}`);\n\n return fig.node();\n}","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"const keys = [\"donated\", \"received\"];\n\n// Colors that will be used to show donation(blue) and received(orange)\nconst blue = \"#4e79a7\"; const orange = \"#f28e2b\";\n\nconst color = {donated: \"#4e79a7\", received: \"#f28e2b\"};\n\n// Formating for amounts\nconst fmt = d => d3.format(\"$.2s\")(d).replace(\"G\", \"B\");","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"## Visualization #1\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"$3e","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"$3f","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"$40","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"### Question\n\nHow do the countries compare in terms of how much they receive and donate? Are there countries that donate much more than they receive or receive much more than they donate?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"### Analysis","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"display(withCaption(1, \"Countries that only donated or only received\",\n oneSidedChart(20)));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"From Fig 1 we can see that only two countries have only donated and five countries have only received money.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"display(withCaption(2, \"Amount donated and received by countries (sorted from largest net donor to largest net recipient)\",\n dumbbellChart()));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"Among the countries that have donated as well as received (from Figure 2), more than half the countries have received more than they have donated. Within the graph we can see that among the major donors, US stands out as having the greatest gap between the amount they have donated and the amount received followed by Japan. Among the largely recipient countries, the gap between Thailand's received amount and donated amount is greater than any of the other countries. The received amount for any single country is much smaller than the total donated amount by the US.\n\n(**Note:** A linear scale was used instead of a log scale for the x-axis as the length of the line connecting the received and donated dots would be misleading in a log scale. A longer line could be misinterpreted as denoting a larger gap between donated amount and receipent amount when that is not the case.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"## Visualization #2","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"display([...allCountries].sort());","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"$41","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"const sumAmount = v => d3.sum(v, d => d.commitment_amount_usd_constant);\n\nconst donatedByContinent = d3.rollup(data, sumAmount, d => continentOf[d.donor]);\nconst receivedByContinent = d3.rollup(data, sumAmount, d => continentOf[d.recipient]);\n\nconst continentTotals = Array.from(new Set(Object.values(continentOf))).map(c => ({\n continent: c,\n donated: donatedByContinent.get(c) ?? 0,\n received: receivedByContinent.get(c) ?? 0\n}));\n\ndisplay(continentTotals);","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"$42","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"$43","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"### Question\n\nDo the countries that mostly receive or mostly donate tend to cluster around specific geographical areas of the world? Are there neighboring countries that have radically different patterns in terms of how much they receive vs. how much they donate?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"### Analysis","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"display(withCaption(3, \"Total amount donated by continent.\",\n continentBarChart(\"donated\", \"Total donated by continent\", \"#4e79a7\")));\n\ndisplay(withCaption(4, \"Total amount donated vs. received by countries in Asia\",continentGivingReceivingChart(\"Asia\")));","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":" Looking at the Figure 3 we can clearly see that most of the donations come from countries located in North America and Europe and substantial amount from Asia as well. However, if you dig deeper into the donations from Asia as shown in Fig 4 we see that the donations come mostly from Japan. This is consistent with the concept of the global north and global south. It is a framework which divides the countries of the world into more industralised and wealthy nations from the less-industralized or “developing” nations respectively. The global north comprises of North America, Europe, Oceania (which also has made donations but not as much as the other two) and parts of East Asia (mostly Japan).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"display(withCaption(5, \"Total amount received by continent.\",\n continentBarChart(\"received\", \"Total received by continent\", \"#f28e2b\")));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"As for countries that have mostly been recipients, from Figure 5 we can see that they are the ones mostly within the global south which includes countries in Asia, South America and Africa. We also see that the Europe has received a lot of monetary support as well. We take a closer look at this below.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"display(withCaption(6, \"Total amount donated vs. received by countries in Europe.\",continentGivingReceivingChart(\"Europe\")));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"From Figure 6, the neighboring countries of Germany and Poland display stark differences in borrowing and donating capacities. Germany is the top donator within Europe, while Poland has received the most. Similarly, within Asia, from Figure 4 we can see that the amount Japan has donated is exponentially higher than its neighboring countries such as Korea which has not only not donated as much as Japan but has received more than they have donated.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"## Visualization 3","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"display(`${new Set(data.map(d => d.coalesced_purpose_code)).size} unique purpose codes`);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"// Two-digit OECD sector prefix gives sector name\nconst sectorNames = {\n 11: \"Education\",\n 12: \"Health & population\", 13: \"Health & population\",\n 14: \"Water & sanitation\",\n 15: \"Government & civil society\", 42: \"Government & civil society\",\n 16: \"Other social services\",\n 21: \"Transport & communications\", 22: \"Transport & communications\",\n 23: \"Energy\",\n 24: \"Banking & business\", 25: \"Banking & business\",\n 31: \"Agriculture, industry & trade\", 32: \"Agriculture, industry & trade\", 33: \"Agriculture, industry & trade\",\n 41: \"Environment & multisector\", 43: \"Environment & multisector\",\n 51: \"Budget & food support\", 52: \"Budget & food support\", 53: \"Budget & food support\",\n 60: \"Debt relief\",\n 70: \"Humanitarian\", 72: \"Humanitarian\", 73: \"Humanitarian\", 74: \"Humanitarian\"\n};\n\n//function which will give the broad sector name (out of the 14 defined under sectorNames map) for that row's sector\nconst sectorOf = d => sectorNames[Math.floor(+d.coalesced_purpose_code / 1000)] ?? \"Other / unspecified\";","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"display(`After consolidating the different purposes we have ${new Set(data.map(sectorOf)).size} sectors (including \"Other / unspecified\")`);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"// Top 5 sectors by total amount (\"Other / unspecified\" excluded)\nconst topSectors = d3.rollups(data, sumAmount, sectorOf)\n .map(([sector, total]) => ({sector, total}))\n .filter(d => d.sector !== \"Other / unspecified\")\n .sort((a, b) => b.total - a.total)\n .slice(0, 5);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"$44","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"// Calculation for the heatmap\nfunction sectorMixData() {\n const rows = data.filter(d => continentOf[d.recipient]);\n const categories = [...new Set(Object.values(sectorNames)), \"Other / unspecified\"];\n\n const byContinent = d3.rollup(rows, sumAmount, d => continentOf[d.recipient], sectorOf);\n const counts = d3.rollup(rows, v => v.length, d => continentOf[d.recipient]);\n\n const cells = [];\n for (const [continent, m] of byContinent) {\n const total = d3.sum(m.values());\n for (const c of categories) {\n const value = m.get(c) ?? 0;\n cells.push({continent, sector: c, value, share: value / total});\n }\n }\n\n const continents = Array.from(byContinent.keys()).sort();\n return {cells, categories, continents, counts};\n}","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"$45","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"$46","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"### Additional Vizualization","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"const world = await FileAttachment(\"countries-50m.json\").json();","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"// Every year in the data, e.g. [1973, 1974, ..., 2013]\nconst allYears = d3.range(d3.min(data, d => d.year), d3.max(data, d => d.year) + 1);\n\n// country -> year -> total amount\nconst donatedByCountryYear = d3.rollup(data, sumAmount, d => d.donor, d => d.year);\nconst receivedByCountryYear = d3.rollup(data, sumAmount, d => d.recipient, d => d.year);\n\n// Amount for one country in one year (0 if nothing)\nconst amountIn = (map, country, year) => map.get(country)?.get(year) ?? 0;\n\n// Every country in the data (donors and recipients), alphabetical\nconst countryList = Array.from(new Set([...data.map(d => d.donor), ...data.map(d => d.recipient)])).sort();","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"// The two names that differ between the data and the map file\nconst geoNameAliases = {\"Korea\": \"Republic of Korea\", \"Slovak Republic\": \"Slovakia\"};\n\nconst mapCountries = world;\n\n// Map file name -> map shape\nconst featureByName = new Map(mapCountries.features.map(f => [f.properties.NAME_LONG, f]));\n\n// Your data's country name -> map shape, e.g. featureOf(\"Korea\") gives South Korea's shape\nconst featureOf = name => featureByName.get(geoNameAliases[name] ?? name);\n\n// Map shape -> your data's country name (only for countries in your data)\nconst dataNameOf = new Map(countryList.map(c => [featureOf(c), c]));\n\n// Check: should be an empty list\ndisplay(countryList.filter(c => !featureOf(c)));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"// Keep only rows with a specified purpose\nconst specifiedRows = data.filter(d => !/unspecified|not specified/i.test(d.coalesced_purpose_name));\n\n// Most common spelling of each purpose's name\nconst purposeNameOf = new Map(\n d3.rollups(\n specifiedRows,\n v => d3.greatest(d3.rollups(v, g => g.length, d => d.coalesced_purpose_name), d => d[1])[0],\n d => d.coalesced_purpose_code\n )\n);\n\n// Top 10 purposes by total amount, grouped by purpose code\nconst topTenPurposes = d3.rollups(specifiedRows, sumAmount, d => d.coalesced_purpose_code)\n .map(([code, total]) => ({code, purpose: purposeNameOf.get(code), total}))\n .sort((a, b) => b.total - a.total)\n .slice(0, 10);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"// Top 5 purposes (the first five of the top 10)\nconst topFivePurposes = topTenPurposes.slice(0, 5);\n\n// purpose code -> country -> amount, for recipients and for donors\nconst topFiveCodes = topFivePurposes.map(d => d.code);\nconst topFiveRows = specifiedRows.filter(d => topFiveCodes.includes(d.coalesced_purpose_code));\nconst purposeAmounts = {\n received: d3.rollup(topFiveRows, sumAmount, d => d.coalesced_purpose_code, d => d.recipient),\n donated: d3.rollup(topFiveRows, sumAmount, d => d.coalesced_purpose_code, d => d.donor)\n};\n\n// Largest amount any country has for any of the 5 purposes\nconst purposeMapMax = d3.max([\"received\", \"donated\"], side =>\n d3.max(purposeAmounts[side].values(), m => d3.max(m.values())));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"$47","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"## Question\n\nAre 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?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"## Analysis","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"**Note:** For the purpose of answering this question, the reasons for donation, which had 250 unique donation purposes initially is condensed down to to 14 broad areas of donation. The grouping was done using the OECD purpose code system where the initial few digits of code map to a broad scope while the entire code map to a specific section within that broad area.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"display(withCaption(7, \"Top 5 sectors by recipient continent.\",\n sectorByContinentChart(\"recipient\")));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"From Figure 7 we can see that almost all the continents received donations for 'Transport & communications'. Asia received the most donation for this, in fact, Asia received the most support for each of the categories shown except for debt relief. Europe received the most support in terms of debt relief.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"display(withCaption(8, \"Share of aid received by each continent, by sector.\",\n sectorMixHeatmap()));","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"Figure 8 gives a more expansive view with all the percentage of donation received for each of the 14 categories across the different continents. Africa, Asia and South America has received support for a mix of different reasons.\n\nWithin Africa the most donations have been made for 'Health & population', most likely for vaccines and medicine. As seen earlier from Figure 7 as well, Asia has received support for 'Transport & communications', likely for building up their infrastructure. Finally, South America has received nearly equal amounts for 'Transport & communications' and 'Agriculture, industry & trade'.\n\nWe see a considerable donation made to Oceania and North America towards 'Transport & communications' sector. Europe as mentioned earlier received the most support for debt relief. A deeper look at both these sectors are done below.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":" display(withCaption(9, \"Total amount donated vs. received by countries in Europe.\",continentGivingReceivingChart(\"North America\")));","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"Given that USA has been majorly a donor then a recipient, I wanted to take a look at which all countries received support within North America(NA). From Figure 9 we can see that Canada has received most, if not all of the donations within NA, so the 97% in Figure 8 for NA, was mostly towards Canada to build up their 'Transportation & communications' sector.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"display(withCaption(10, \"Donors of debt relief to European countries.\",\n debtReliefDonorChart(\"Europe\")));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"For Europe, most of their debt relief donation has come from within Europe itself with Germany being the top donor (from Fig 10). Since Europe has a shared European currency, it makes sense that most European countries have a shared interest in the debt of other countries within the region. A financial collapse will affect everyone in the region and thus, European countries might help each other out to keep the economy stable.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"### Additional Visualization","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"const mapPurposeCode = view(Inputs.radio(\n new Map(topFivePurposes.map(d => [d.purpose, d.code])),\n {label: \"Purpose\", value: topFivePurposes[0].code}\n));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"display(withCaption(10,\n `Recipient countries for ${topFivePurposes.find(d => d.code === mapPurposeCode).purpose.toLowerCase()}.`,\n purposeMap(mapPurposeCode)));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"$48","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"2"}} 33:null