2c:null 2d:["$","title",null,{"children":"Mini-Project 3 (Networks) | NYU | Observable"}] 32: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!`)}33: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 transaction34: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.

35:Tf79,chart = { const width = 800; const height = width; const innerRadius = Math.min(width, height) * 0.5 - 20; const outerRadius = innerRadius + 6; const data = mode === "Top 20 Donors" ? chordData_filtered : chordDataR_filtered; const names = mode === "Top 20 Donors" ? [...topDonors, ...recipients] : [...topRecipients, ...donors]; const index = new Map(names.map((name, i) => [name, i])); const N = names.length; const matrix = Array.from({ length: N }, () => new Array(N).fill(0)); for (const { source, target, value } of data) { matrix[index.get(source)][index.get(target)] += value; } // -- CHORD LAYOUT --- const chord = d3.chordDirected() .padAngle(12 / innerRadius) .sortSubgroups(d3.descending) .sortChords(d3.descending); const arc = d3.arc() .innerRadius(innerRadius) .outerRadius(outerRadius); const ribbon = d3.ribbonArrow() .radius(innerRadius - 0.5) .padAngle(1 / innerRadius); const color = i => d3.interpolateRainbow(i / names.length); const formatValue = d => d3.format(",.2f")(d*d / 1e9) + "B"; const margin = 80; const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [-width/2 - margin, -height/2 - margin, width + margin*2, height + margin*2]) .attr("style", "width: 100%; height: auto; font: 10px sans-serif;"); const chords = chord(matrix); const textId = DOM.uid("text"); svg.append("path") .attr("id", textId.id) .attr("fill", "none") .attr("d", d3.arc()({ outerRadius, startAngle: 0, endAngle: 2*Math.PI })); svg.append("g") .attr("fill-opacity", 0.75) .selectAll("path") .data(chords) .join("path") .attr("d", ribbon) .attr("fill", d => color(d.source.index)) .style("mix-blend-mode", "multiply") .append("title") .text(d => `${names[d.source.index]} → ${names[d.target.index]} ${formatValue(d.source.value)}` ); const g = svg.append("g") .selectAll("g") .data(chords.groups) .join("g"); g.append("path") .attr("d", arc) .attr("fill", d => color(d.index)) .attr("stroke", "#fff"); g.append("text") .attr("font-size", 11) .attr("text-anchor", "middle") .attr("alignment-baseline", "middle") .attr("dy", "0.1em") .attr("transform", d => { const angle = (d.startAngle + d.endAngle)/2; const r = outerRadius + 40; const x = Math.cos(angle - Math.PI/2) * r; const y = Math.sin(angle - Math.PI/2) * r; let rot = angle * 180 / Math.PI - 90; if (rot > 90) rot -= 180; return `translate(${x},${y}) rotate(${rot})`; }) .text(d => names[d.index]); g.append("text") .attr("font-size", 10) .attr("text-anchor", "middle") .attr("alignment-baseline", "middle") .attr("dy", "0.95em") // BELOW the name .attr("transform", d => { const angle = (d.startAngle + d.endAngle) / 2; const labelRadius = outerRadius + 40; const x = Math.cos(angle - Math.PI / 2) * labelRadius; const y = Math.sin(angle - Math.PI / 2) * labelRadius; let rotation = (angle * 180 / Math.PI) - 90; if (rotation > 90) rotation -= 180; return `translate(${x},${y}) rotate(${rotation})`; }) .text(d => { const name = names[d.index]; if (mode === "Top 20 Donors" && topDonors.has(name)) { const tot = donorTotalsMap.get(name); if (!tot) return ""; return tot >= 1e9 ? "Donated: " + d3.format(".2s")(tot / 1e9) + "B" : "Donated: " + d3.format(".2s")(tot / 1e6) + "M"; } if (mode === "Top 10 Receivers" && topRecipients.has(name)) { const tot = recipientTotalsMap.get(name); if (!tot) return ""; return tot >= 1e9 ? "Received: " + d3.format(".2s")(tot / 1e9) + "B" : "Received: " + d3.format(".2s")(tot / 1e6) + "M"; } return ""; }); return svg.node(); }36:T1258,## Visual Description To answer the question of how aid flows between countries, I created an interactive chord diagram that presents two complementary views: (1) sorted by the top 20 donors, and (2) sorted by the top 10 receivers. **Interpretation note:** The prompt specifies focusing on the top 20 global donors and top 10 global receivers. For clarity and readability, I chose to visualize only the aid flows that occur between these two sets. This means that if a top 20 donor gave a large amount of aid to a country outside the global top 10 receivers, that flow is intentionally excluded. Including all possible receiver countries makes the diagram far more complex and undermines interpretability. The result is a cleaner, more focused visualization of the “major players” in the aid network. - Each arc around the circle represents a country. - The chart uses a cyclical colour scheme to accomodate several countries with their own unique colour. It also creates some sort of order to read the chart (clockwise) - The donor and receiver sets are grouped on their respective sides to make patterns easier to trace. - Each ribbon connecting two arcs represents the total aggregated aid from a donor to a receiver. - To improve visibility for smaller flows, ribbon thickness is based on the square root of the original aid values. - A toggle allows viewers to switch perspectives (donor-first vs. receiver-first). - Tooltips provide exact numeric values when hovering over a ribbon. This diagram enables viewers to explore both the magnitude and the directionality of aid relationships within the subset of top donors and receivers. ## Analysis and Interpretation 1. **Who are the major donors and where do they donate the most?** The largest donors are: **USA (120B), Japan (110B), Germany (47B), UK (24B), France (15B).** These can be spotted pretty easily because the diagram is ordered by length of arcs. We can see where they donate to the most by the size of the ribbon. - USA has the largest donations to Colombia (17.1B), India(16.53B) and Brazil(13.55B). Since the USA’s total donation amount is 120B, this implies substantial assistance to countries outside the top 10 receiver set as well. - Japan makes the largest donations to India (48.83B), Poland (35.44B) and Brazil (10.41B). - Germany donates the most to India (18.02B), Poland (17.23B) and Brazil(4.06B). - UK makes most of it donations to India (19.92B out of 24B). - France is fairly split amongst several top 10 recipient countries: India (4.14B), Brazil (3.30B), Poland (2.01B) and South Africa (1.90B). These patterns reveal that high-income countries disproportionately support a small set of large, significant receivers. 2. **Who are the major receivers, and who funds them the most?** The biggest receivers are: **India (130B), Thailand(49B), Brazil(37B), Colombia(26B),Korea(25B)**. - India receives most of its funding from Japan (48.83B), UK (19.92B), Germany (18.02B) and the US (16.53B) (values same as above). It follows a multi-anchor structure i.e. receives funding from a few major countries. - Thailand receives funding from Japan (35.44B), US (6.5B), Germany(1.7B), Australia(1.16B) and France(1.05B). - Brazil receives major funding from US (13.55B), Japan (10.41B), Germany (4.06B), France (3.3B) and Italy (1.84B). - Colombia receives most of its funding from USA (17.1B), France (1.68B), Germany (1.41B), Japan (1.24B) and Spain (1.07B) - Korea receives major funding from Japan (13.03B) and USA (11.15B). Germany, France and Belgium make up a very small part of its remaining funding. From the above we can see that aid flows are highly concentrated, with a small set of powerful donor nations effectively shaping the donations of each receiver. ## Visualisation Choice and Effectiveness The question required showing relationships between donors and receivers simultaneously. A chord diagram meets this requirement well as it shows bidirectional relationships on a single circular layout. It allows the user to see total contribution volume easily through arc size and ordering. It also makes it pretty straightforward to answer “who gives the most?” and “who receives the most?” Overall this diagram is able to effectively point out patterns in aids between the top 20 Donors and Top 10 Receivers through the ribons and ribbon sizes. Overall, the diagram offers a clear, intuitive representation of aid flows between the world’s major donors and receivers. The use of square-root–scaled ribbons and grouping by donor/receiver further enhances interpretability, ensuring that large patterns and smaller contributions are both visible. 37:Td67,tree_chart = { const width = 1400; const dx = 40; const dy = 250; const data = mode_tree ==="Top 20 Donors" ? treeData : treeDataR; const root = d3.hierarchy(data); root.x0 = 0; root.y0 = 0; const tree = d3.tree().nodeSize([dx, dy]); const svg = d3.create("svg") .attr("width", width) .attr("height", 1200) .attr("style", "max-width: 100%; height: auto; font: 12px sans-serif;"); const mainGroup = svg.append("g") const gLink = mainGroup.append("g") .attr("fill", "none") .attr("stroke", "#999") .attr("stroke-opacity", 0.6) .attr("stroke-width", 1.5); const gNode = mainGroup.append("g") .attr("cursor", "pointer") .attr("pointer-events", "all"); const diagonal = d3.linkHorizontal() .x(d => d.y) .y(d => d.x); let i = 0; function collapseChildren(d) { if (d.children) { d.children.forEach(child => { if (child.children) { child._children = child.children; collapseChildren(child); child.children = null; } }); } } collapseChildren(root); function update(source) { tree(root); let left = root, right = root; root.eachBefore(d => { if (d.x < left.x) left = d; if (d.x > right.x) right = d; }); const height = right.x - left.x + dx * 4; svg.attr("height", height + dx * 4); const offsetY = -left.x + dx * 2; mainGroup.attr("transform", `translate(80, ${offsetY})`); const nodes = root.descendants(); const node = gNode.selectAll("g").data(nodes, d => d.id || (d.id = ++i)); const nodeEnter = node.enter().append("g") .attr("transform", d => `translate(${source.y0},${source.x0})`) .attr("fill-opacity", 0) .on("click", (event, d) => { d.children = d.children ? null : d._children; update(d); }); nodeEnter.append("circle") .attr("r", 5) .attr("fill", d => d._children ? "#555" : "#aaa"); nodeEnter.append("text") .attr("dy", "0.32em") .attr("x", d => d._children ? -10 : 10) .attr("text-anchor", d => d._children ? "end" : "start") .text(d => { const isLeaf = !d.children && !d._children; if (isLeaf) { const amt = d.data.amount; return `${d.data.name} — ${d3.format(",")(amt)}`; } return d.data.name; // donor or recipient }) .attr("stroke", "white") .attr("stroke-width", 3) .attr("paint-order", "stroke"); const nodeUpdate = nodeEnter.merge(node).transition().duration(300) .attr("transform", d => `translate(${d.y},${d.x})`) .attr("fill-opacity", 1); node.exit().transition().duration(250).remove() .attr("transform", d => `translate(${source.y},${source.x})`) .attr("fill-opacity", 0); const links = root.links(); const link = gLink.selectAll("path").data(links, d => d.target.id); link.enter().append("path") .attr("d", () => { const o = { x: source.x0, y: source.y0 }; return diagonal({ source: o, target: o }); }) .merge(link) .transition().duration(300) .attr("d", diagonal); link.exit().transition().duration(250).remove() .attr("d", d => { const o = { x: source.x, y: source.y }; return diagonal({ source: o, target: o }); }); root.eachBefore(d => { d.x0 = d.x; d.y0 = d.y; }); } update(root); return svg.node(); }38:T1687,## Visual Description This visualization presents a hierarchical tree beginning with the Top 20 Donors or Top 10 Receivers (view can be changed via the radio buttons). Here the data is preprocessed to only include the transactions relevant to the Top 5 purposes ( "Air transport", "Rail transport", "Industrial development", "Power generation/non-renewable sources", "RESCHEDULING AND REFINANCING") From each selected donor, the tree expands outward to show: 1. The donor’s top 10 receivers, and 2. The dominant purpose(s) of aid flowing between that donor and receiver, expressed as both a percentage and an absolute value. Likewise, when a receiver is selected as the root, the tree visualizes up to 20 donors (depending on availability), expanding into the five purpose categories. Each node is allowing users to drill down and examine: - which donor–receiver pairs are connected - which purposes they engage in - how each purpose contributes to the donor’s total aid package. This design makes the structure of aid “intent” (i.e., purpose) visible at a granular level. ## Analysis and Interpretation **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 when donating to another country?** These donors consistently channel their aid through one dominant purpose for each recipient. Examples include: Saudi Arabia - India → Rail Transport (100%) - Taiwan → Rail Transport (100%) - Thailand → Power Generation (100%) Kuwait - Thailand → Power Generation (100%) Norway - Brazil → Industrial Development (100%) Belgium - Poland → Rescheduling & Refinancing (100%) Spain - Thailand → Industrial Development (100%) Germany - Poland → Rescheduling & Refinancing (100%) Italy - India → Industrial Development (100%) - Thailand → Rail Transport (100%) Finland - India, Thailand, Poland → Industrial Development (100%) Canada - Colombia → Industrial Development (100%) Japan - Saudi Arabia, Taiwan → Industrial Development (100%) Korea - Brazil → Industrial Development (100%) Switzerland - All receivers → Industrial Development (100%) except Thailand → Power Generation France - Brazil → Rail Transport (100%) Sweden - Thailand → Industrial Development (100%) Denmark - India, Colombia → Industrial Development (100%) Netherlands - Colombia, Thailand → Industrial Development (100%) Austria - Brazil, Thailand, Saudi Arabia, Colombia → Either Industrial Development or Rail Transport (100%) These donors behave in a project-specific or sector-specific manner, allocating all resources toward one type of development goal for each receiver. Countries that donate using multiple purposes:These donors show more diversified purpose distributions, often splitting aid across 2–4 purposes. Kuwait - India → Industrial Development (46.77%) + Power Generation (53.23%) United States - Uses between 2 and 4 purposes depending on the receiver - Air transport often dominates, but rail transport, industrial development, and power generation also appear significantly Norway - For two of its receivers, aid is split across multiple purposes - Air transport is often the dominant category Belgium - For three receivers, contributions span multiple purposes] - No consistent dominance pattern — suggesting purpose variation by recipient needs Spain - For three receivers, donations span multiple purposes - Industrial development dominates except in India, where Air Transport is larger Germany - Uses multiple purposes for five countries - Industrial Development is the overarching category Italy - Multiple purposes for three receivers - Industrial Development and Air Transport appear most frequently Canada - Multiple purposes, mainly centered around Industrial Development Japan - Globally diverse donor but uses multiple purposes only for selected receivers - Dominant purposes: Industrial Development and Air Transport Australia - Multiple purposes - Rail Transport dominates for Thailand, Industrial Development for India Korea - Primarily Industrial Development, with small secondary purposes United Kingdom - All recipients receive aid through multiple purposes France - Multiple purposes for most recipients; no consistent dominant category Sweden - Multi-purpose donations for most receivers Denmark - Multi-purpose for Thailand; single-purpose for India and Colombia Netherlands - Multi-purpose for India; single-purpose for others Austria - Many purposes for India, dominated by Power Generation **Insights** 1. Large Western donors (US, UK, Germany, France) and Japan show multi-purpose behavior. These donors appear to support broader development agendas, possibly reflecting diversified strategies. 2. Industrial Development is the most common dominant purpose 3. Air Transport and Rail Transport also appear frequently, often as dominant purposes for donors with infrastructure-focused foreign aid 4. Rescheduling & Refinancing is highly concentrated among few countries ## Visualisation Choice and Effectiveness This tree visualization effectively captures not just who donates to whom, but also why and how much. By grouping purpose flows beneath each donor–receiver pair, the structure reveals: - the diversity (or lack thereof) of purposes - distinctions between targeted vs. diversified donors - heterogeneity in how receivers are supported - the overall imbalance between single-purpose and multi-purpose flows The hierarchical layout makes these patterns easy to trace and understand, especially when combined with expandable nodes and percentage. This makes it effective for answering the posed questions.39:Td9d,function chordChart({ data, names, width = 800 }) { const height = width; const innerRadius = Math.min(width, height) * 0.5 - 20; const outerRadius = innerRadius + 6; const index = new Map(names.map((name, i) => [name, i])); const N = names.length; const matrix = Array.from({ length: N }, () => Array(N).fill(0)); for (const { source, target, value } of data) { matrix[index.get(source)][index.get(target)] += value; } const chord = d3.chordDirected() .padAngle(12 / innerRadius) .sortSubgroups(d3.descending) .sortChords(d3.descending); const arc = d3.arc() .innerRadius(innerRadius) .outerRadius(outerRadius); const ribbon = d3.ribbonArrow() .radius(innerRadius - 0.5) .padAngle(1 / innerRadius); const color = i => d3.interpolateRainbow(i / names.length); const formatValue = d => d3.format(",.2f")(d * d / 1e9); const margin = 80; const totals = new Map(names.map(name => [name, 0])); for (const { source, value } of data) { totals.set(source, totals.get(source) + value); } const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr( "viewBox", [ -width / 2 - margin, -height / 2 - margin, width + margin * 2, height + margin * 2 ] ) .attr("style", "width: 100%; height: auto; font: 10px sans-serif;"); const chords = chord(matrix); const textId = DOM.uid("text"); svg.append("path") .attr("id", textId.id) .attr("fill", "none") .attr("d", d3.arc()({ outerRadius, startAngle: 0, endAngle: 2 * Math.PI })); svg.append("g") .attr("fill-opacity", 0.75) .selectAll("path") .data(chords) .join("path") .attr("d", ribbon) .attr("fill", d => color(d.source.index)) .style("mix-blend-mode", "multiply") .append("title") .text(d => `${names[d.source.index]} → ${names[d.target.index]} ${formatValue(d.source.value)}` ); const g = svg.append("g") .selectAll("g") .data(chords.groups) .join("g"); g.append("path") .attr("d", arc) .attr("fill", d => color(d.index)) .attr("stroke", "#fff"); g.append("text") .attr("font-size", 11) .attr("text-anchor", "middle") .attr("alignment-baseline", "middle") .attr("dy", "0.1em") .attr("transform", d => { const angle = (d.startAngle + d.endAngle) / 2; const r = outerRadius + 40; const x = Math.cos(angle - Math.PI / 2) * r; const y = Math.sin(angle - Math.PI / 2) * r; let rot = angle * 180 / Math.PI - 90; if (rot > 90) rot -= 180; return `translate(${x},${y}) rotate(${rot})`; }) .text(d => names[d.index]); g.append("text") .attr("font-size", 10) .attr("text-anchor", "middle") .attr("alignment-baseline", "middle") .attr("dy", "1.2em") .attr("transform", d => { const angle = (d.startAngle + d.endAngle) / 2; const labelRadius = outerRadius + 40; const x = Math.cos(angle - Math.PI / 2) * labelRadius; const y = Math.sin(angle - Math.PI / 2) * labelRadius; let rotation = (angle * 180 / Math.PI) - 90; if (rotation > 90) rotation -= 180; return `translate(${x},${y}) rotate(${rotation})`; }) .text(d => { const name = names[d.index]; const tot = totals.get(name); if (!tot || tot === 0) return ""; return tot >= 1e9 ? (tot / 1e9).toFixed(1) + "B" : (tot / 1e6).toFixed(1) + "M"; }); return svg.node(); }3a:T1a5c,## Visual Description This visualization is a chord diagram that changes dynamically based on a time slides that allows users to explore global aid flows between the Top 20 Donors and Top 10 Receivers across different years (This is the same interpretation as Q1 where we are only looking at transactions that pertain to donors that fall under the global top 20 donors and the global top 10 receivers). - Each arc on the circle represents a country. - Ribbon thickness encodes the amount donated from a donor to a receiver in that specific year. - Arcs with values highlights donor and receiver groups clearly. - The color encoding again creates a visual order (clockwise) This visualization enables a temporal analysis of who donates to whom, how strongly, and how these relationships evolve. ## Analysis and Interpretation **Early 1970s: Highly Concentrated Patterns Led by Japan and the United States** Across the earliest years (1973–1975), aid flows are dominated by Japan and the United States, with Japan often surpassing the US in total contributions. Consistent patterns in the early 70s: Japan → Korea, India, Thailand are the strongest flows. USA → Korea, India, Brazil, Colombia with Korea often the largest recipient. Most other donors (Canada, Sweden, Norway, Italy, France, UK) contribute almost exclusively to India in these years. UK, Sweden, and Norway act as small but steady donors to India. This period shows a strong Japan–Korea and Japan–India relationship, alongside a US–Korea and US–Latin America (Brazil, Colombia) connection. **Late 1970s: New Donors Appear** From 1976–1979, the network begins to widen: Kuwait and Saudi Arabia appear for the first time, donating to India, Thailand, and Brazil. Netherlands and Canada begin contributing to more than just India. UK occasionally increases contributions to India and Thailand. Japan continues to surpass the US in most years. USA still contributes heavily but becomes more variable—sometimes focusing more on Korea, sometimes India. Despite more donors entering the system, India remains the anchor receiver for nearly all donor countries. **Early 1980s: Large One-Off Spikes and Regional Patterns** The early 1980s (1980–1984) show more pronounced year-specific spikes: 1980: USA makes a very large donation to Korea (largest of the year). Japan also makes a major contribution to Korea. 1981: Japan again outpaces USA. 1982: USA gives a very large donation to Colombia; Japan’s largest contribution goes to Thailand. 1983–84: UK makes substantial contributions to India; Japan remains dominant, especially to Thailand and India. This phase shows Japan’s strong long-term commitment to Asian economies, especially India, Thailand, and Korea. **Mid-1980s: Major Structural Shifts** Around 1985–1990, there is a clear shift: Germany begins making extremely large donations to Poland, by far the largest flows for multiple years (1985, 1989, 1990). Sweden also sends significant donations to South Africa and India. Japan continues major flows to Thailand and Korea. USA maintains a focus on Colombia and Chile, depending on the year. Many smaller donors remain almost exclusively tied to India. This period introduces a Europe-focused pattern, with Poland becoming a major receiver. **Early 1990s: New Donors and Diversification** Between 1991 and 1994: Australia appears, donating to Thailand. Belgium donates to Poland. Japan remains dominant overall, with significant flows to India, Thailand, and Brazil. USA delivers the largest flow of 1992 to Kuwait. Donations in most other countries continue to fall mainly on India. In 1994, the USA becomes the largest donor again, focusing heavily on Brazil. During this period, donations diversify geographically, and more countries appear as donors in single or multiple years. **Mid-1990s: Brazil and Poland Dominate as Receivers** From 1995–1998: Italy appears donating to Brazil. Germany remains the largest donor in several years due to repeated large flows to Poland. Brazil and Poland jointly dominate as the major receivers in these years. Canada appears donating to Poland. Japan continues large flows to Thailand, India, and Brazil. This phase shows a shift away from India as the singular dominant receiver. **Late 1990s: Japan dominates** In 1997–1999: Japan again becomes the largest donor, often donating most heavily to Thailand, Korea, and India. USA makes large contributions to Saudi Arabia in 1999. Smaller donors remain concentrated on India. The Japan–Asia development links seem to remain prominent and consistent. **2000s: Increased Global Spread and More Balanced Networks** Around 2000–2006:South Africa becomes a new significant receiver, with many donors contributing in 2000. USA’s largest donation goes to Colombia in 2000 and remains focused on Colombia in many subsequent years. Japan continues to send its largest flows to India and occasionally Brazil or Thailand. Korea, as a donor, begins contributing to India. Compared to earlier decades, 2000s patterns are less centralized—top donors support multiple receivers each year. This reflects a more globally balanced aid structure. **Late 2000s: Secondary Donors become prominent** Between 2007–2011: Japan remains the largest donor overall, consistently sending its biggest flows to India. UK and Germany also appear as large donors to India in these years. Korea donates to India and Thailand. Norway and Spain appear as major donors to Brazil in 2009. USA maintains large recurring donations to Colombia. This period emphasizes: Stability in Japan→India Stability in USA→Colombia Increasing involvement of European donors **2012–2013: France Emerges as a donor** In 2012 and 2013: France makes unusually large donations to Brazil and South Africa (2012). Japan remains the dominant donor to India, often with the single largest contribution on the diagram. Korea reappears as a donor to India and Thailand. During these final years, France, Japan, and Korea stand out as the most active or impactful. ## Visualisation Choice and Effectiveness A time-varying chord diagram is effective because it clearly shows who donates to whom and how these relationships change over time. The circular layout makes bilateral flows easy to compare, and ribbon thickness intuitively represents donation amounts. The year slider allows for moving through the years and looking at shifts in donor behavior, spikes and even long-term stable relationships. Overall, this visualisation shows a multi-year network in an interactive format that highlights both consistent patterns and meaningful changes allowing us to explore evolution in global aid relationships. 3b:[{"id":"55260abbc777c0a3b8fed19f3929dd822fef9d5118b53b76b2176d20782910e599eac919999ea8ee85a60b783fd37082574f6591fd46c0d70ddf9b00df71ce27","href":"https://static.observableusercontent.com/files/55260abbc777c0a3b8fed19f3929dd822fef9d5118b53b76b2176d20782910e599eac919999ea8ee85a60b783fd37082574f6591fd46c0d70ddf9b00df71ce27","name":"countries-50m.json","type":"application/json","lastModified":1764009800755.553,"size":4177662},{"id":"2f821940274ec8bac13a15cea089c1d099bfb1cd4e3dc3addcfe9e76e45aabcde645b872010cdfc72ed92df008365ddac3a44f69d5792d62a5dd8520e7c8468e","href":"https://static.observableusercontent.com/files/2f821940274ec8bac13a15cea089c1d099bfb1cd4e3dc3addcfe9e76e45aabcde645b872010cdfc72ed92df008365ddac3a44f69d5792d62a5dd8520e7c8468e","name":"final_data.csv","type":"text/csv","lastModified":1765154971611.386,"size":8517914}] 30:{"id":"8ae8e0a7dfc63184","slug":null,"title":"Mini-Project 3 (Networks)","thumbnail":"c5da39fc3c3c188280fdfab268ad266799ea256710bf6bf3f17e5dac831d35da","access_level":"public","create_time":"$D2025-11-24T18:43:20.755Z","update_time":"$D2025-12-09T05:33:21.261Z","view_time":null,"first_public_time":"$D2025-11-24T18:43:20.755Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"9f0e7a056e171f1e","login":"nyu34","name":"NYU","avatar_url":"https://avatars-next.observableusercontent.com/2d4bc1e34109ca4a768a9988c04daf63bb3b75d51019c1264cf163e913a8562b","tier":"starter_2024"},"version":868,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"03df06c91a2bb0e9","login":"anushri-iyer","name":"Anushri Iyer","avatar_url":"https://avatars-next.observableusercontent.com/17802ee9d3daba50a72b15f0997290e6a630e2c752bc2c0f872a839f9ab5a4e3","tier":null}],"members":[{"type":"individual","id":"03df06c91a2bb0e9","login":"anushri-iyer","name":"Anushri Iyer","avatar_url":"https://avatars-next.observableusercontent.com/17802ee9d3daba50a72b15f0997290e6a630e2c752bc2c0f872a839f9ab5a4e3","tier":null,"role":"editor"},{"type":"team","id":"9f0e7a056e171f1e","login":"nyu34","name":"NYU","avatar_url":"https://avatars-next.observableusercontent.com/2d4bc1e34109ca4a768a9988c04daf63bb3b75d51019c1264cf163e913a8562b","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Mini-Project 3 (Networks)","cells":[{"id":115,"value":"md`# Mini-Project 3 (Networks)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":172,"value":"---\n\n#### [TO-DO]\n\nFill out the following submission details:\n\n* **Name:** Anushri Iyer;\n* **NetID:** ai2185;\n* **NOTEBOOK URL:** https://observablehq.com/d/8ae8e0a7dfc63184;\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":176,"value":"## About the Datasets","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":21,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":96,"value":"Inputs.table(aiddata)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"","database":"$undefined"},{"id":37,"value":"geoJSON = FileAttachment(\"countries-50m.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$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","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","output":"","database":"$undefined"},{"id":211,"value":"donorTotals = d3.rollups(\n aiddata,\n v => d3.sum(v, d => d.amount),\n d => d.donor\n)\n .map(([donor, total]) => ({ donor, total }))\n .sort((a, b) => d3.descending(a.total, b.total));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"topDonors = new Set(donorTotals.slice(0, 20).map(d => d.donor));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"t20donorTotals = donorTotals.filter(d=>topDonors.has(d.donor)).sort((a, b) => d3.descending(a.total, b.total));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"recipientTotals = d3.rollups(\n aiddata,\n v => d3.sum(v, d => d.amount),\n d => d.recipient\n)\n .map(([recipient, total]) => ({ recipient, total }))\n .sort((a, b) => d3.descending(a.total, b.total));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"topRecipients = new Set(recipientTotals.slice(0,10).map(d => d.recipient));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"recipientData = aiddata.filter(d =>\n topRecipients.has(d.recipient) &&\n topDonors.has(d.donor))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":669,"value":"donorData = aiddata.filter(d =>\n topRecipients.has(d.recipient) &&\n topDonors.has(d.donor))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"// Aggregate amounts for each donor → recipient pair\nflows = d3.rollups(\n donorData,\n v => d3.sum(v, d => d.amount),\n d => d.donor,\n d => d.recipient\n).flatMap(([donor, recipients]) =>\n recipients.map(([recipient, value]) => ({\n donor,\n recipient,\n value: Math.sqrt(value)\n }))\n);\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":433,"value":"r_flows = d3.rollups(\n recipientData,\n v => d3.sum(v, d => d.amount),\n d => d.recipient,\n d => d.donor\n).flatMap(([recipient, donors]) =>\n donors.map(([donor, value]) => ({\n recipient,\n donor,\n value: Math.sqrt(value)\n }))\n);\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"d3 = require(\"d3@7\", \"d3-sankey@0.12\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"allNodes = [\n ...Array.from(topDonors),\n ...Array.from(new Set(flows.map(d => d.recipient)))\n].map(name => name.trim()); ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"uniqueNodes = Array.from(new Set(allNodes));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"nodeIndex = new Map(uniqueNodes.map((name, i) => [name, i]));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"chordData = flows.map(d => ({\n source: d.donor,\n target: d.recipient,\n value: d.value\n}));\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":520,"value":"chordDataR = r_flows.map(d => ({\n source: d.donor,\n target: d.recipient,\n value: d.value\n}));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":533,"value":"chordDataR_filtered = chordDataR.filter(d =>\n !topRecipients.has(d.source) \n &&\n topRecipients.has(d.target) \n);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":537,"value":"chordData_filtered = chordData.filter(d=> topDonors.has(d.source)&&!topDonors.has(d.target))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"recipients = Array.from(new Set(chordData.map(d => d.target)))\n .filter(r => !topDonors.has(r));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":529,"value":"donors = Array.from(new Set(chordDataR.map(d => d.source)))\n .filter(r => !topRecipients.has(r));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":545,"value":"donorTotalsMap = new Map(donorTotals.map(d => [d.donor, d.total]));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":547,"value":"recipientTotalsMap = new Map(recipientTotals.map(d => [d.recipient, d.total]));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":418,"value":"## Visualisation 1\nCreate an overview of the relationships between countries so that it is possible to see who donates to whom and how much. \nThe 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? \nAnd conversely, who are the major receivers and which countries do they receive from the most and how much?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":422,"value":"viewof mode = Inputs.radio(\n [\"Top 20 Donors\", \"Top 10 Receivers\"],\n {value: \"Top 20 Donors\", label: \"Select Mode\"}\n)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":830,"value":"$36","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":451,"value":"purposeTotals = d3.rollups(\n aiddata,\n v => d3.sum(v, d => d.amount),\n d => d.purpose\n)\n .map(([purpose, total]) => ({ purpose, total }))\n .sort((a, b) => d3.descending(a.total, b.total));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":453,"value":"top5purpose = new Set(purposeTotals.slice(0,5).map(d=>d.purpose));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"purposeData = aiddata.filter(d=>top5purpose.has(d.purpose))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":458,"value":"top20donorsp = d3.rollups(\n purposeData,\n v=>d3.sum(v,d=>d.amount),\n d=> d.donor\n)\n.map(([donor, total]) => ({ donor, total }))\n .sort((a, b) => d3.descending(a.total, b.total));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"filtered_top20donors = new Set(top20donorsp.slice(0,20).map(d=>d.donor))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":469,"value":"filteredtop20purposeData = purposeData.filter(d=>filtered_top20donors.has(d.donor)&&filtered_top10recipient.has(d.recipient))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":471,"value":"roll = d3.rollups(\n filteredtop20purposeData,\n v => d3.sum(v, d => d.amount), \n d => d.donor,\n d => d.recipient,\n d => d.purpose\n);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":473,"value":"function rollToTree(roll) {\n return {\n name: \"Top 20 Donors\",\n children: roll.map(([donor, recipients]) => ({\n name: donor,\n children: recipients.map(([recipient, purposes]) => {\n\n // Compute total amount for donor → recipient pair\n const totalForRecipient = d3.sum(purposes, d => d[1]);\n\n return {\n name: recipient,\n children: purposes.map(([purpose, amount]) => ({\n name: purpose + \" (\" + d3.format(\".2%\")(amount / totalForRecipient) + \")\",\n amount: amount, // raw amount\n percentage: amount / totalForRecipient // numeric % (optional)\n }))\n };\n })\n }))\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":637,"value":"function rollToTreeR(roll) {\n return {\n name: \"Top 10 Recipients\",\n children: roll.map(([recipient, donors]) => ({\n name: recipient,\n children: donors.map(([donor, purposes]) => {\n\n // compute total amount from donor → recipient\n const totalForDonor = d3.sum(purposes, d => d[1]);\n\n return {\n name: donor,\n children: purposes.map(([purpose, amount]) => ({\n name: purpose + \" (\" + d3.format(\".2%\")(amount / totalForDonor) + \")\",\n amount: amount,\n percentage: amount / totalForDonor\n }))\n };\n })\n }))\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":615,"value":"top10recipientsp = d3.rollups(\n purposeData,\n v=>d3.sum(v,d=>d.amount),\n d=> d.recipient\n)\n.map(([recipient, total]) => ({ recipient, total }))\n .sort((a, b) => d3.descending(a.total, b.total));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":617,"value":"filtered_top10recipient = new Set(top10recipientsp.slice(0,10).map(d=>d.recipient))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":621,"value":"filteredtop10purposeData = purposeData.filter(d=>filtered_top10recipient.has(d.recipient)&&filtered_top20donors.has(d.donor))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":627,"value":"roll_r = d3.rollups(\n filteredtop10purposeData,\n v => d3.sum(v, d => d.amount), \n d => d.recipient,\n d => d.donor,\n d => d.purpose\n);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":630,"value":"treeData = rollToTree(roll);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"treeDataR = rollToTreeR(roll_r);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":445,"value":"## Visualisation 2\nConsidering 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.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":583,"value":"viewof mode_tree = Inputs.radio(\n [\"Top 20 Donors\", \"Top 10 Receivers\"],\n {value: \"Top 20 Donors\", label: \"Select Mode\"}\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":845,"value":"$38","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":660,"value":"## Visualisation 3\nFor 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)?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":691,"value":"dataByYear = d3.group(donorData, d => d.yearInt);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":696,"value":"donor = Array.from(topDonors).sort(d3.ascending);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":705,"value":"recipient = Array.from(topRecipients).sort(d3.ascending);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":708,"value":"donorIndex = new Map(donor.map((d, i) => [d, i]));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":701,"value":"recipientIndex = new Map(recipient.map((r, i) => [r, donors.length + i]));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":728,"value":"names = [...topDonors, ...topRecipients];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":715,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":718,"value":"viewof year = Inputs.range(\n d3.extent(donorData, d => d.yearInt),\n { step: 1, label: \"Year\" }\n);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":723,"value":"function chordDataForYear(year) {\n return donorData\n .filter(d => d.yearInt === year)\n .map(d => ({\n source: d.donor,\n target: d.recipient,\n value: d.amount\n }));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":736,"value":"dynamicChord = {\n const data = chordDataForYear(year);\n return chordChart({ data, names });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":852,"value":"$3a","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"md`-----------------\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":166,"value":"css","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"}],"files":"$W3b","stdlib":"1","titling":"auto"}} 31:"$30:body"