2b:null 2c:["$","title",null,{"children":"Mini-Project 3 (Networks) | New York University | Observable"}] 31:T59f,## Submission Instructions: 1. You are free to either **fork this notebook** or **create your own notebook** for this mini-project. Ensure that: - The notebook is made _public_ in the settings. - That you include the following details inside of your submission at or near the top of the notebook: 1) _NetID_, 2) _Name_, and 3) _Notebook URL_. **You will get a ZERO if you do not include these details!** 2. Complete each question to the best of your ability, clearly marking which visualization and/or written answer corresponds to which question asked. - Your coded solutions **must use D3**. Other visualization libraries (.e.g Vega-Lite) 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](https://observablehq.com/@d3/color-legend) notebook to create your legends. 3. Export a `.tgz` of your completed notebook and upload it to the correct Assignment on Brightspace. This mini-project is due Dec. 4th @ 11:59pm. ${comment(html`Please make sure to Read ALL instructions carefully for each part of this assignment; the code should try to match exactly the requirements specified!`)} ${comment(html`Please make sure that your NOTEBOOK URL link correctly links to your noteook, alongside your Name and NetID, before submitting!`)}32:T4dd,### Aid Data, Revisited Here we load a simplified and reduced version of the AidData dataset. You are free to change this code as you wish. If you don't want to preprocess your data on Observable, then you can do the preprocessing using whatever languages or tools you'd like and then [upload](/@observablehq/file-attachments) your preprocessed data to Observable. If you take this approach, then you should delete the aiddata cell below so that you're not loading unnecessary data. The dataset contains the following columns: - yearDate: year of the commitment as a Date object - yearInt: year of the commitment as an integer - donor: country providing the financial resource - recipient: country receiving the financial resource - amount: the total amount of financial resources provided - purpose: the purpose of the transaction33:T964,## Questions Your goal is to create 3 independent visualizations of the same data set, 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:** Create an overview of the relationships between countries so that it is possible to see who donates to whom and how much. The main question one should be able to answer is: who are the major donors and to which countries do they donate the most and how much? And conversely, who are the major receivers and which countries do they receive from the most and how much? _We only care about the top 10 recipients and the top 20 donors (over the whole time) for this question._ - **Visualization 2:** Considering only the top 5 purposes of donation, how does the relationship between countries look like in terms of purposes? What composition (distribution) of purposes do the donations between each pair of countries have? Are there countries that donate to a given country using multiple purposes? Or do counties always donate using one single purpose when donating to another country?The same as the previous question, _we only care about the top 10 recipients and the top 20 donors here._ - **Visualization 3:** For this last exercise you have to extend the analysis above to see how the patterns of donations change over time. _Focusing again on the top 10 recipients and top 20 donors_ how do the patterns of donations (who donates to whom and how much) change over time? Are there sudden changes? Are there countries that always donate to other countries? Are there major shifts (say a country used to donate to a specific set of countries and then it changes to other countries)?

[Note]: It is okay to submit more than one solution 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.

34:T14a8,{ const width = 1200; const height = 800; const margin = {top: 20, right: 150, bottom: 20, left: 150}; const linkData = d3.rollup( filteredData, v => d3.sum(v, d => d.amount), d => d.donor, d => d.recipient ); const activeDonors = new Set(); const activeRecipients = new Set(); linkData.forEach((recipientMap, donor) => { activeDonors.add(donor); recipientMap.forEach((amount, recipient) => { if (amount > 0) { activeRecipients.add(recipient); } }); }); const donorNodes = Array.from(activeDonors).map(d => ({id: d, type: 'donor'})); const recipientNodes = Array.from(activeRecipients).map(d => ({id: d, type: 'recipient'})); const nodes = [...donorNodes, ...recipientNodes]; const nodeMap = new Map(nodes.map((n, i) => [n.id + '-' + n.type, i])); const links = []; linkData.forEach((recipientMap, donor) => { recipientMap.forEach((amount, recipient) => { if (amount > 0) { const sourceIndex = nodeMap.get(donor + '-donor'); const targetIndex = nodeMap.get(recipient + '-recipient'); if (sourceIndex !== undefined && targetIndex !== undefined) { links.push({ source: sourceIndex, target: targetIndex, value: amount, donor: donor, recipient: recipient }); } } }); }); const sankey = d3Sankey.sankey() .nodeId((d, i) => i) .nodeWidth(15) .nodePadding(10) .extent([[margin.left, margin.top], [width - margin.right, height - margin.bottom]]); const {nodes: sankeyNodes, links: sankeyLinks} = sankey({ nodes: nodes.map(d => Object.assign({}, d)), links: links.map(d => Object.assign({}, d)) }); const donorColor = d3.scaleOrdinal() .domain(Array.from(activeDonors)) .range(d3.schemeTableau10.concat(d3.schemePaired)); const recipientColor = d3.scaleOrdinal() .domain(Array.from(activeRecipients)) .range(d3.schemeSet3); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .style("max-width", "100%") .style("height", "auto"); const link = svg.append("g") .selectAll("path") .data(sankeyLinks) .join("path") .attr("d", d3Sankey.sankeyLinkHorizontal()) .attr("stroke", d => donorColor(d.donor)) .attr("stroke-width", d => Math.max(1, d.width)) .attr("fill", "none") .attr("opacity", 0.4) .on("mouseover", function(event, d) { d3.select(this).attr("opacity", 0.8); tooltip.style("display", "block") .html(` ${d.donor} → ${d.recipient}
Amount: $${d3.format(",.2s")(d.value)} `) .style("left", (event.pageX + 10) + "px") .style("top", (event.pageY - 10) + "px"); }) .on("mouseout", function() { d3.select(this).attr("opacity", 0.4); tooltip.style("display", "none"); }); const node = svg.append("g") .selectAll("rect") .data(sankeyNodes) .join("rect") .attr("x", d => d.x0) .attr("y", d => d.y0) .attr("height", d => d.y1 - d.y0) .attr("width", d => d.x1 - d.x0) .attr("fill", d => d.type === 'donor' ? donorColor(d.id) : recipientColor(d.id)) .attr("stroke", "#000") .attr("stroke-width", 0.5) .on("mouseover", function(event, d) { const totalValue = d.type === 'donor' ? d3.sum(sankeyLinks.filter(l => l.source === d), l => l.value) : d3.sum(sankeyLinks.filter(l => l.target === d), l => l.value); tooltip.style("display", "block") .html(` ${d.id}
${d.type === 'donor' ? 'Total Donated' : 'Total Received'}: $${d3.format(",.2s")(totalValue)} `) .style("left", (event.pageX + 10) + "px") .style("top", (event.pageY - 10) + "px"); }) .on("mouseout", function() { tooltip.style("display", "none"); }); svg.append("g") .selectAll("text") .data(sankeyNodes) .join("text") .attr("x", d => d.x0 < width / 2 ? d.x0 - 6 : d.x1 + 6) .attr("y", d => (d.y1 + d.y0) / 2) .attr("dy", "0.35em") .attr("text-anchor", d => d.x0 < width / 2 ? "end" : "start") .text(d => d.id) .style("font-size", "11px") .style("font-weight", "500"); svg.append("text") .attr("x", margin.left + 50) .attr("y", margin.top - 5) .attr("text-anchor", "middle") .style("font-size", "14px") .style("font-weight", "bold") .text("DONORS"); svg.append("text") .attr("x", width - margin.right - 50) .attr("y", margin.top - 5) .attr("text-anchor", "middle") .style("font-size", "14px") .style("font-weight", "bold") .text("RECIPIENTS"); const tooltip = d3.select("body") .append("div") .style("position", "absolute") .style("display", "none") .style("background", "white") .style("border", "1px solid #ddd") .style("border-radius", "4px") .style("padding", "10px") .style("font-size", "12px") .style("pointer-events", "none") .style("box-shadow", "0 2px 4px rgba(0,0,0,0.2)") .style("z-index", "1000"); return svg.node(); }35:T93c,--- ## Analysis: Visualization 1 - Overview of Donor-Recipient Relationships Looking at the Sankey diagram, we can clearly see the flow of aid money from donor countries (on the left) to recipient countries (on the right). **Major Donors:** Japan stands out as the biggest donor by far - you can see this from the huge green band coming from Japan. The United States comes in second, followed by Kuwait and the United Kingdom. What's interesting is that Germany, Netherlands, and several European countries also contribute significantly, though their donations are spread across many recipients which makes the flows look thinner. **Major Recipients:** India dominates the recipient side - it receives the largest amount of aid overall, and you can see thick flows coming to it from multiple donors, especially Japan and the United States. Thailand is the second biggest recipient, followed by Korea and Brazil. **Donation Patterns:** Japan seems to focus heavily on India and Thailand - the green flows are particularly thick going to these two countries. The United States (shown in pink/red) spreads its donations more evenly across all recipients, which shows a different strategy compared to Japan's more concentrated approach. One surprising finding is that some countries appear on both sides. For example, Korea appears as both a donor (though small) and a recipient. This suggests that aid relationships aren't always one-way, and some developing countries that receive aid also provide aid to other nations. The thickness of each flow tells us the amount - thicker means more money. From this, we can see that most of the aid money comes from just a few countries (Japan, US, UK, Germany) but gets distributed among the top 10 recipients fairly unevenly, with India getting by far the most. ### Why This Approach Works: The Sankey diagram is perfect for this question because it lets us see both the source and destination of aid at the same time. The width of the flows makes it easy to compare amounts visually - you don't need to read numbers to know that Japan gives more than Switzerland. The color coding helps track which donor is contributing to which recipient, making it easy to follow individual relationships. The bipartite layout (donors on one side, recipients on the other) makes the direction of aid flows immediately clear.36:T1a01,{ const width = 1000; const height = 1000; const innerRadius = Math.min(width, height) * 0.4; const outerRadius = innerRadius + 20; const purposeFilteredData = filteredData.filter(d => top5Purposes.includes(d.purpose)); const allCountries = Array.from(new Set([ ...topDonorsRecipients.topDonors, ...topDonorsRecipients.topRecipients ])).sort(); const countryIndex = new Map(allCountries.map((c, i) => [c, i])); const matrix = Array(allCountries.length).fill(0).map(() => Array(allCountries.length).fill(0).map(() => ({})) ); purposeFilteredData.forEach(d => { const donorIdx = countryIndex.get(d.donor); const recipientIdx = countryIndex.get(d.recipient); if (donorIdx !== undefined && recipientIdx !== undefined) { if (!matrix[donorIdx][recipientIdx][d.purpose]) { matrix[donorIdx][recipientIdx][d.purpose] = 0; } matrix[donorIdx][recipientIdx][d.purpose] += d.amount; } }); const simpleMatrix = matrix.map(row => row.map(cell => Object.values(cell).reduce((sum, val) => sum + val, 0) ) ); const chord = d3.chord() .padAngle(0.05) .sortSubgroups(d3.descending); const chords = chord(simpleMatrix); const purposeColor = d3.scaleOrdinal() .domain(top5Purposes) .range(d3.schemeCategory10); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [-width / 2, -height / 2, width, height]) .style("max-width", "100%") .style("height", "auto"); const arc = d3.arc() .innerRadius(innerRadius) .outerRadius(outerRadius); const ribbon = d3.ribbon() .radius(innerRadius); const group = svg.append("g") .selectAll("g") .data(chords.groups) .join("g"); group.append("path") .attr("fill", (d, i) => { const country = allCountries[i]; return topDonorsRecipients.topDonors.includes(country) ? "#6baed6" : "#fd8d3c"; }) .attr("stroke", "#fff") .attr("d", arc) .on("mouseover", function(event, d) { const country = allCountries[d.index]; tooltip.style("display", "block") .html(`${country}`) .style("left", (event.pageX + 10) + "px") .style("top", (event.pageY - 10) + "px"); }) .on("mouseout", function() { tooltip.style("display", "none"); }); group.append("text") .each(d => { d.angle = (d.startAngle + d.endAngle) / 2; }) .attr("dy", "0.35em") .attr("transform", d => ` rotate(${(d.angle * 180 / Math.PI - 90)}) translate(${outerRadius + 10}) ${d.angle > Math.PI ? "rotate(180)" : ""} `) .attr("text-anchor", d => d.angle > Math.PI ? "end" : "start") .text((d, i) => allCountries[i]) .style("font-size", "10px"); const ribbons = svg.append("g") .attr("fill-opacity", 0.7) .selectAll("path") .data(chords) .join("path") .attr("d", ribbon) .attr("fill", d => { const donor = allCountries[d.source.index]; const recipient = allCountries[d.target.index]; const donorIdx = countryIndex.get(donor); const recipientIdx = countryIndex.get(recipient); const purposes = matrix[donorIdx][recipientIdx]; const dominantPurpose = Object.entries(purposes) .sort((a, b) => b[1] - a[1])[0]; return dominantPurpose ? purposeColor(dominantPurpose[0]) : "#ccc"; }) .attr("stroke", "#000") .attr("stroke-width", 0.5) .on("mouseover", function(event, d) { const donor = allCountries[d.source.index]; const recipient = allCountries[d.target.index]; const donorIdx = countryIndex.get(donor); const recipientIdx = countryIndex.get(recipient); const purposes = matrix[donorIdx][recipientIdx]; let purposeBreakdown = Object.entries(purposes) .sort((a, b) => b[1] - a[1]) .map(([purpose, amount]) => `${purpose}: $${d3.format(",.2s")(amount)}`) .join("
"); tooltip.style("display", "block") .html(` ${donor} → ${recipient}
Total: $${d3.format(",.2s")(d.source.value)}

Purpose Breakdown:
${purposeBreakdown} `) .style("left", (event.pageX + 10) + "px") .style("top", (event.pageY - 10) + "px"); d3.select(this).attr("fill-opacity", 1); }) .on("mouseout", function() { tooltip.style("display", "none"); d3.select(this).attr("fill-opacity", 0.7); }); const legend = svg.append("g") .attr("transform", `translate(${-width/2 + 20}, ${-height/2 + 20})`); legend.append("text") .attr("x", 0) .attr("y", 0) .style("font-size", "14px") .style("font-weight", "bold") .text("Top 5 Purposes"); top5Purposes.forEach((purpose, i) => { const legendRow = legend.append("g") .attr("transform", `translate(0, ${20 + i * 25})`); legendRow.append("rect") .attr("width", 18) .attr("height", 18) .attr("fill", purposeColor(purpose)); legendRow.append("text") .attr("x", 24) .attr("y", 9) .attr("dy", "0.35em") .style("font-size", "11px") .text(purpose.length > 40 ? purpose.substring(0, 40) + "..." : purpose); }); const nodeLegend = svg.append("g") .attr("transform", `translate(${width/2 - 150}, ${-height/2 + 20})`); nodeLegend.append("text") .attr("x", 0) .attr("y", 0) .style("font-size", "14px") .style("font-weight", "bold") .text("Country Type"); nodeLegend.append("rect") .attr("y", 20) .attr("width", 18) .attr("height", 18) .attr("fill", "#6baed6"); nodeLegend.append("text") .attr("x", 24) .attr("y", 29) .attr("dy", "0.35em") .style("font-size", "11px") .text("Donor"); nodeLegend.append("rect") .attr("y", 45) .attr("width", 18) .attr("height", 18) .attr("fill", "#fd8d3c"); nodeLegend.append("text") .attr("x", 24) .attr("y", 54) .attr("dy", "0.35em") .style("font-size", "11px") .text("Recipient"); const tooltip = d3.select("body") .append("div") .style("position", "absolute") .style("display", "none") .style("background", "white") .style("border", "1px solid #ddd") .style("border-radius", "4px") .style("padding", "10px") .style("font-size", "12px") .style("pointer-events", "none") .style("box-shadow", "0 2px 4px rgba(0,0,0,0.2)") .style("z-index", "1000"); return svg.node(); }37:Ta54,--- ## Analysis: Visualization 2 - Donor-Recipient Relationships by Purpose The chord diagram shows how the top 5 purposes of aid are distributed in the relationships between donors and recipients. Each arc around the circle represents a country, and the ribbons connecting them show aid flows colored by their primary purpose. **Purpose Distribution:** From the legend, we can see the top 5 purposes are Air transport (blue), Rail transport (orange), Industrial development (green), Power generation/non-renewable sources (red), and Rescheduling and refinancing (purple). What immediately jumps out is that Germany has a massive purple section, meaning a huge portion of its aid goes toward rescheduling and refinancing - basically helping countries restructure their debts. **Single vs. Multiple Purposes:** Looking at the ribbons between country pairs, we can see that most donor-recipient relationships involve multiple purposes. For instance, if you follow the connections from the United States, you'll see ribbons of different colors going to different recipients - some blue (air transport), some green (industrial development), and so on. This tells us that donors don't just focus on one purpose when giving to a single country. However, some relationships are dominated by one purpose. The thick purple ribbon from Germany shows that for certain recipients, almost all of Germany's aid is for rescheduling and refinancing. Similarly, Japan's aid often shows up in blue (air transport) or green (industrial development). **Country-Specific Patterns:** India, being the largest recipient, receives aid for multiple purposes from different donors. You can see various colored ribbons connecting to India's arc, which means different donors prioritize different purposes when giving to India. Italy appears to focus heavily on one or two purposes (notice the concentration of orange in its connections). The outer arcs are colored based on whether the country is primarily a donor (blue) or recipient (orange), which makes it easy to distinguish roles at a glance. ### Why This Approach Works: The chord diagram is great for showing the complexity of multi-purpose aid relationships. Unlike a simple network diagram, it can display the composition of each relationship through color coding. The circular layout keeps everything compact even with many connections, and the arc sizes help us see the total volume each country is involved with. The purpose-based coloring of ribbons directly answers the question about whether countries use single or multiple purposes - we can literally see the mix of colors in each connection.38:T2820,{ const width = 1400; const height = 900; const margin = {top: 80, right: 20, bottom: 50, left: 20}; const minYear = d3.min(filteredData, d => d.yearInt); const maxYear = d3.max(filteredData, d => d.yearInt); const periods = []; for (let year = minYear; year <= maxYear; year += 5) { periods.push({ start: year, end: Math.min(year + 4, maxYear), label: `${year}-${Math.min(year + 4, maxYear)}` }); } let currentPeriod = 0; const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .style("max-width", "100%") .style("height", "auto"); const title = svg.append("text") .attr("x", width / 2) .attr("y", 30) .attr("text-anchor", "middle") .style("font-size", "20px") .style("font-weight", "bold"); const networkG = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); const networkWidth = width - margin.left - margin.right; const networkHeight = height - margin.top - margin.bottom - 60; const donorX = networkWidth * 0.2; const recipientX = networkWidth * 0.8; function updateVisualization(periodIndex) { const period = periods[periodIndex]; title.text(`Aid Flow Network: ${period.label}`); const periodData = filteredData.filter(d => d.yearInt >= period.start && d.yearInt <= period.end ); const linkData = d3.rollup( periodData, v => d3.sum(v, d => d.amount), d => d.donor, d => d.recipient ); const donorTotals = new Map(); const recipientTotals = new Map(); topDonorsRecipients.topDonors.forEach(donor => { let total = 0; if (linkData.has(donor)) { linkData.get(donor).forEach(amount => total += amount); } donorTotals.set(donor, total); }); topDonorsRecipients.topRecipients.forEach(recipient => { let total = 0; linkData.forEach(recipientMap => { if (recipientMap.has(recipient)) { total += recipientMap.get(recipient); } }); recipientTotals.set(recipient, total); }); const sortedDonors = topDonorsRecipients.topDonors .sort((a, b) => (donorTotals.get(b) || 0) - (donorTotals.get(a) || 0)); const sortedRecipients = topDonorsRecipients.topRecipients .sort((a, b) => (recipientTotals.get(b) || 0) - (recipientTotals.get(a) || 0)); const donorNodes = sortedDonors.map((donor, i) => ({ id: donor, x: donorX, y: (i + 0.5) * networkHeight / sortedDonors.length, total: donorTotals.get(donor) || 0, type: 'donor' })); const recipientNodes = sortedRecipients.map((recipient, i) => ({ id: recipient, x: recipientX, y: (i + 0.5) * networkHeight / sortedRecipients.length, total: recipientTotals.get(recipient) || 0, type: 'recipient' })); const allNodes = [...donorNodes, ...recipientNodes]; const links = []; linkData.forEach((recipientMap, donor) => { recipientMap.forEach((amount, recipient) => { if (amount > 0) { const source = allNodes.find(n => n.id === donor && n.type === 'donor'); const target = allNodes.find(n => n.id === recipient && n.type === 'recipient'); if (source && target) { links.push({ source, target, value: amount, donor, recipient }); } } }); }); const maxLinkValue = d3.max(links, d => d.value) || 1; const linkWidthScale = d3.scaleSqrt() .domain([0, maxLinkValue]) .range([1, 20]); const maxNodeValue = d3.max(allNodes, d => d.total) || 1; const nodeSizeScale = d3.scaleSqrt() .domain([0, maxNodeValue]) .range([5, 25]); const donorColor = d3.scaleOrdinal() .domain(sortedDonors) .range(d3.schemeTableau10.concat(d3.schemePaired)); const link = networkG.selectAll(".link") .data(links, d => `${d.donor}-${d.recipient}`); link.exit() .transition() .duration(500) .attr("opacity", 0) .remove(); const linkEnter = link.enter() .append("path") .attr("class", "link") .attr("fill", "none") .attr("stroke", d => donorColor(d.donor)) .attr("opacity", 0); linkEnter.merge(link) .transition() .duration(500) .attr("d", d => { const dx = d.target.x - d.source.x; const dy = d.target.y - d.source.y; return `M${d.source.x},${d.source.y}C${d.source.x + dx/2},${d.source.y} ${d.target.x - dx/2},${d.target.y} ${d.target.x},${d.target.y}`; }) .attr("stroke-width", d => linkWidthScale(d.value)) .attr("opacity", 0.4); linkEnter.merge(link) .on("mouseover", function(event, d) { d3.select(this).attr("opacity", 0.8).attr("stroke-width", linkWidthScale(d.value) * 1.5); tooltip.style("display", "block") .html(` ${d.donor} → ${d.recipient}
Amount: $${d3.format(",.2s")(d.value)}
Period: ${period.label} `) .style("left", (event.pageX + 10) + "px") .style("top", (event.pageY - 10) + "px"); }) .on("mouseout", function(event, d) { d3.select(this).attr("opacity", 0.4).attr("stroke-width", linkWidthScale(d.value)); tooltip.style("display", "none"); }); const node = networkG.selectAll(".node") .data(allNodes, d => d.id + d.type); node.exit() .transition() .duration(500) .attr("r", 0) .remove(); const nodeEnter = node.enter() .append("circle") .attr("class", "node") .attr("r", 0) .attr("cx", d => d.x) .attr("cy", d => d.y); nodeEnter.merge(node) .transition() .duration(500) .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", d => nodeSizeScale(d.total)) .attr("fill", d => d.type === 'donor' ? donorColor(d.id) : "#fd8d3c") .attr("stroke", "#fff") .attr("stroke-width", 2); nodeEnter.merge(node) .on("mouseover", function(event, d) { d3.select(this).attr("stroke", "#000").attr("stroke-width", 3); tooltip.style("display", "block") .html(` ${d.id}
${d.type === 'donor' ? 'Total Donated' : 'Total Received'}: $${d3.format(",.2s")(d.total)}
Period: ${period.label} `) .style("left", (event.pageX + 10) + "px") .style("top", (event.pageY - 10) + "px"); }) .on("mouseout", function() { d3.select(this).attr("stroke", "#fff").attr("stroke-width", 2); tooltip.style("display", "none"); }); const label = networkG.selectAll(".label") .data(allNodes, d => d.id + d.type); label.exit().remove(); const labelEnter = label.enter() .append("text") .attr("class", "label") .style("font-size", "11px") .style("font-weight", "500") .attr("opacity", 0); labelEnter.merge(label) .transition() .duration(500) .attr("x", d => d.type === 'donor' ? d.x - 30 : d.x + 30) .attr("y", d => d.y) .attr("dy", "0.35em") .attr("text-anchor", d => d.type === 'donor' ? "end" : "start") .text(d => d.id) .attr("opacity", 1); } const controlsG = svg.append("g") .attr("transform", `translate(${width/2}, ${height - 30})`); const prevButton = controlsG.append("g") .attr("transform", "translate(-150, 0)") .style("cursor", "pointer") .on("click", () => { if (currentPeriod > 0) { currentPeriod--; updateVisualization(currentPeriod); updateTimeline(); } }); prevButton.append("rect") .attr("width", 80) .attr("height", 30) .attr("rx", 5) .attr("fill", "#3182bd"); prevButton.append("text") .attr("x", 40) .attr("y", 15) .attr("text-anchor", "middle") .attr("dy", "0.35em") .attr("fill", "white") .style("font-size", "14px") .style("pointer-events", "none") .text("< Previous"); const nextButton = controlsG.append("g") .attr("transform", "translate(70, 0)") .style("cursor", "pointer") .on("click", () => { if (currentPeriod < periods.length - 1) { currentPeriod++; updateVisualization(currentPeriod); updateTimeline(); } }); nextButton.append("rect") .attr("width", 80) .attr("height", 30) .attr("rx", 5) .attr("fill", "#3182bd"); nextButton.append("text") .attr("x", 40) .attr("y", 15) .attr("text-anchor", "middle") .attr("dy", "0.35em") .attr("fill", "white") .style("font-size", "14px") .style("pointer-events", "none") .text("Next >"); const periodText = controlsG.append("text") .attr("x", 0) .attr("y", 15) .attr("text-anchor", "middle") .attr("dy", "0.35em") .style("font-size", "14px") .style("font-weight", "bold"); function updateTimeline() { periodText.text(`Period ${currentPeriod + 1} of ${periods.length}`); } svg.append("text") .attr("x", donorX + margin.left) .attr("y", margin.top - 20) .attr("text-anchor", "middle") .style("font-size", "16px") .style("font-weight", "bold") .text("DONORS"); svg.append("text") .attr("x", recipientX + margin.left) .attr("y", margin.top - 20) .attr("text-anchor", "middle") .style("font-size", "16px") .style("font-weight", "bold") .text("RECIPIENTS"); const tooltip = d3.select("body") .append("div") .style("position", "absolute") .style("display", "none") .style("background", "white") .style("border", "1px solid #ddd") .style("border-radius", "4px") .style("padding", "10px") .style("font-size", "12px") .style("pointer-events", "none") .style("box-shadow", "0 2px 4px rgba(0,0,0,0.2)") .style("z-index", "1000"); updateVisualization(currentPeriod); updateTimeline(); return svg.node(); }39:Td26,--- ## Analysis: Visualization 3 - Temporal Evolution of Donation Patterns The temporal visualization shows how aid patterns evolved from 1973 to 2013 across nine time periods. By clicking through the periods, we can spot major changes in who gives to whom and how much. **Consistent Patterns:** Some relationships remain stable throughout. Japan consistently appears as a major donor across all periods, and India is always a top recipient - notice how the large orange circle for India persists through every time period. The US also maintains its position as a major donor, though its relative importance compared to Japan shifts over time. **Sudden Changes:** There are definitely some dramatic shifts. In Period 4 (1988-1992), we see Poland suddenly becoming a much larger recipient - the flow lines to Poland become significantly thicker. This makes sense historically as this was right after the fall of communism in Poland, and Western countries rushed to provide aid to support the transition. Looking at Period 1 (1973-1977), Japan is the dominant donor. But by Period 2 (1978-1982), the United States takes over as the largest donor (notice how the US circle becomes bigger). This flip-flop between Japan and the US continues throughout the decades. **Countries Changing Recipients:** The temporal view reveals that donors do shift their focus over time. For example, in the early periods (1973-1987), we see strong flows from various donors to Brazil and Korea. But in later periods (2003 onwards), these flows thin out considerably while flows to Colombia and South Africa increase. This suggests that as some countries developed economically (like Korea and Brazil), aid shifted to other developing nations. **Emerging Trends:** Kuwait appears as both a small donor and recipient in early periods, but by the later periods (2008-2013), Kuwait's role as a recipient almost disappears. Similarly, Poland transitions from being a minimal recipient to a major one in the 1990s, then back to a smaller recipient by 2013. India's position as the top recipient is remarkably stable - across all nine periods, it maintains the largest recipient circle and receives thick flows from multiple donors. This consistency is striking compared to other recipients whose positions fluctuate. **Overall Evolution:** The network becomes more complex over time - early periods show fewer, thicker connections between fewer country pairs, while later periods show more connections but more distributed (thinner lines to more countries). This suggests that aid became more diversified over the decades, with donors spreading their resources across more recipients rather than concentrating on just a few. ### Why This Approach Works: The bipartite network layout with temporal controls is ideal for answering questions about change over time. By keeping the layout consistent (donors always on left, recipients on right) across time periods, it's easy to spot changes in flow thickness and node size. The interactive "Previous/Next" buttons let us step through time and see evolution clearly. The node sizes changing over time help us see which countries' roles grew or shrank, while the flow thickness shows shifting priorities. This makes it straightforward to identify both stable patterns (like Japan-India) and sudden changes (like Poland in the 1990s).3a:[{"id":"55260abbc777c0a3b8fed19f3929dd822fef9d5118b53b76b2176d20782910e599eac919999ea8ee85a60b783fd37082574f6591fd46c0d70ddf9b00df71ce27","href":"https://static.observableusercontent.com/files/55260abbc777c0a3b8fed19f3929dd822fef9d5118b53b76b2176d20782910e599eac919999ea8ee85a60b783fd37082574f6591fd46c0d70ddf9b00df71ce27","name":"countries-50m.json","type":"application/json","lastModified":1764726008682.284,"size":4177662}] 2f:{"id":"ca74882383363874","slug":null,"title":"Mini-Project 3 (Networks)","thumbnail":"c5da39fc3c3c188280fdfab268ad266799ea256710bf6bf3f17e5dac831d35da","access_level":"public","create_time":"$D2025-12-03T01:40:08.682Z","update_time":"$D2025-12-03T20:38:37.615Z","view_time":null,"first_public_time":"$D2025-12-03T20:38:17.039Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"3e0135dbcb9af4fe","login":"new-york-university21","name":"New York University","avatar_url":"https://avatars-next.observableusercontent.com/d97d076a94403ded92e5811f3b293e5a00e959f42fc5252221bd57904d711438","tier":"starter_2024","bio":""},"version":314,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"6b3b6472db850914","login":"sm12505","name":"Sm12505","avatar_url":"https://avatars-next.observableusercontent.com/25d7e16f268c88a291fc61a344dcc836598b5be17f4329fda0ef29d45aae18d2","tier":null,"bio":""}],"members":[{"type":"team","id":"3e0135dbcb9af4fe","login":"new-york-university21","name":"New York University","avatar_url":"https://avatars-next.observableusercontent.com/d97d076a94403ded92e5811f3b293e5a00e959f42fc5252221bd57904d711438","tier":"starter_2024","role":"editor"},{"type":"individual","id":"6b3b6472db850914","login":"sm12505","name":"Sm12505","avatar_url":"https://avatars-next.observableusercontent.com/25d7e16f268c88a291fc61a344dcc836598b5be17f4329fda0ef29d45aae18d2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Mini-Project 3 (Networks)","cells":[{"id":115,"value":"md`# Mini-Project 3 (Networks)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":172,"value":"---\n\n#### [TO-DO]\n\nFill out the following submission details:\n\n* **Name:** <Siddh Mandirwala>\n* **NetID:** <sm12505>\n* **NOTEBOOK URL:** <[NOTEBOOK URL](https://observablehq.com/d/ca74882383363874)>\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":176,"value":"## About the Datasets","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":21,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":96,"value":"Inputs.table(aiddata)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"aiddata = {\n const data = await d3.csv(googleSheetCsvUrl, row => ({\n yearDate: d3.timeParse('%Y')(row.year),\n yearInt: +row.year,\n donor: row.donor,\n recipient: row.recipient,\n amount: +row.commitment_amount_usd_constant,\n purpose: row.coalesced_purpose_name,\n }));\n \n data.columns = Object.keys(data[0]);\n \n return data;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"### Country GeoData\n\nNext we load GeoJSON data for countries. This file is derived from data from Natural Earth.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":37,"value":"geoJSON = FileAttachment(\"countries-50m.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":57,"value":"### Remember\n\nThe questions above are a very useful tool for you to verify whether you are producing a good solution or not. As you go about solving this exercise you can use the questions above as an 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.\n\nFurthermore, you should feel free to process and transform the data any way you deem relevant and use any tool you prefer for data processing. Data transformation does not necessarily have to be in JavaScript nor within Observable. It’s ok to pre-process the data and then load it in Observable if you prefer.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":129,"value":"### Grading Criteria\n\nYour 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](/@nyuvis/contextual-elements-aesthetics-and-clarity) for reference.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":274,"value":"topDonorsRecipients = {\n\n const donorTotals = d3.rollup(\n aiddata,\n v => d3.sum(v, d => d.amount),\n d => d.donor\n );\n \n const topDonors = Array.from(donorTotals, ([donor, amount]) => ({donor, amount}))\n .sort((a, b) => b.amount - a.amount)\n .slice(0, 20)\n .map(d => d.donor);\n \n\n const recipientTotals = d3.rollup(\n aiddata,\n v => d3.sum(v, d => d.amount),\n d => d.recipient\n );\n \n const topRecipients = Array.from(recipientTotals, ([recipient, amount]) => ({recipient, amount}))\n .sort((a, b) => b.amount - a.amount)\n .slice(0, 10)\n .map(d => d.recipient);\n \n return { topDonors, topRecipients, donorTotals, recipientTotals };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"filteredData = aiddata.filter(d => \n topDonorsRecipients.topDonors.includes(d.donor) && \n topDonorsRecipients.topRecipients.includes(d.recipient)\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"top5Purposes = {\n const purposeTotals = d3.rollup(\n aiddata,\n v => d3.sum(v, d => d.amount),\n d => d.purpose\n );\n \n return Array.from(purposeTotals, ([purpose, amount]) => ({purpose, amount}))\n .sort((a, b) => b.amount - a.amount)\n .slice(0, 5)\n .map(d => d.purpose);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"---\n## Visualization 1: Overview of Donor-Recipient Relationships\n\n**Question:** Who are the major donors and to which countries do they donate the most and how much? And conversely, who are the major receivers and which countries do they receive from the most and how much?\n\nThis visualization shows the flow of aid between the top 20 donors and top 10 recipients using a Sankey diagram.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":297,"value":"d3Sankey = require(\"d3-sankey@0.12\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":285,"value":"---\n## Visualization 2: Donor-Recipient Relationships by Purpose\n\n**Question:** What composition (distribution) of purposes do the donations between each pair of countries have? Are there countries that donate to a given country using multiple purposes? Or do countries always donate using one single purpose?\n\nThis visualization shows a chord diagram with purposes represented by different colors in the flows.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":287,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"$37","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":289,"value":"---\n## Visualization 3: Temporal Evolution of Donation Patterns\n\n**Question:** How do the patterns of donations (who donates to whom and how much) change over time? Are there sudden changes? Are there countries that always donate to other countries? Are there major shifts?\n\nThis visualization shows donation patterns across different time periods using an interactive timeline with network views.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":291,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"$39","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":312,"value":"---\n## Overall Summary\n\nThese three visualizations together tell a comprehensive story about international aid flows:\n\n- **Visualization 1** shows us the overall \"who gives to whom and how much\" - revealing that aid is concentrated among a few major donors (especially Japan and the US) and recipients (especially India).\n\n- **Visualization 2** reveals the complexity of purpose-based relationships - demonstrating that most donor-recipient pairs involve multiple purposes rather than single-purpose aid, though some countries like Germany focus heavily on specific purposes like debt rescheduling.\n\n- **Visualization 3** demonstrates how these patterns evolved over four decades - showing both remarkable consistency (Japan and India's relationship) and dramatic shifts (Poland's surge in the 1990s, the diversification of aid over time).\n\nTogether, they provide a complete picture of the international aid network from multiple angles: magnitude, composition, and temporal evolution.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"md`-----------------\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"import {css,comment} from \"@rk2546/2025-infovis-cse_notebook-gallery\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"css","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"googleSheetCsvUrl = 'https://docs.google.com/spreadsheets/d/1YiuHdfZv_JZ-igOemKJMRaU8dkucfmHxOP6Od3FraW8/gviz/tq?tqx=out:csv'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3a","stdlib":"1"}} 30:"$2f:body"