2c:null 2d:["$","title",null,{"children":"Mini-Project 2: Temporal Data Visualization | NYU | Observable"}] 32:T602,## 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 November 20 @ 11:59pm.

[NOTE]: Please make sure to Read ALL instructions carefully for each part of this assignment; the code should try to match exactly the requirements specified!

[NOTE]: 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:Tb55,## 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:** a) How does the amount donated vs. amount received change over time for each country?; b) Are there countries that mostly send or mostly receive and countries that have a similar amount of donations they receive and send?; c) Are there countries that change their role over time? That is, they used to mostly send donations and turn into mostly receiving donations and vice-versa?; d) Are there countries in which you can find a sudden increase ("peak") or a sudden decrease ("valley")? - **Visualization 2:** Focus on the top 10 "Coalesced Purposes" of donations (in terms of amount of disbursement across all countries and all time). What are the top 10 purposes of disbursements (in terms of total amount of disbursement) and how does their relative amount compare over time? E.g., are there purposes that tend to be prominent for a period of time and others that become more prominent during other periods? - **[Hint]**: looking at the graph one should be able to observe: “Ah! During these years donations were mostly about X but then there were way more donations about Y”. - **[Note]**: if the purpose is “UNSPECIFIED” it should be removed. - **Visualization 3:** Focusing exclusively on countries that receive donations, how do donations shift geographically over time? Do donations tend to be always in the same regions of the world over the years or they have been shifting over time? Can you build a visualization that shows the "history of donations" so that one can get a sense of which regions of the world have had more need for donations over the years? - **[Note 1]**: for this visualization you can, if you wish, use interaction (but you don’t have to). - **[Note 2]**: For this exercise you may want to review the lecture on geographical visualization in which we explain how you can visualize geographical data over time. - **[Note 3]**: if you want, you can aggregate data over a few years (say, group together data at 5 year intervals).

[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:T458,countryYearData = { // 1. Long format: one row per (country, year, role) const long = aiddata.flatMap(d => { const year = +d.yearInt; const amount = +d.amount || 0; if (!Number.isFinite(year) || !amount) return []; return [ { country: d.donor, year, sent: amount, received: 0 }, { country: d.recipient, year, sent: 0, received: amount } ]; }); // 2. Roll up by (country, year) const rolled = d3.rollups( long, v => { const sent = d3.sum(v, d => d.sent); const received = d3.sum(v, d => d.received); const net = sent - received; return { sent, received, net }; }, d => d.country, d => d.year ); // 3. Flatten to an array of { country, year, sent, received, net } const out = rolled.flatMap(([country, years]) => years.map(([year, vals]) => ({ country, year, sent: vals.sent, received: vals.received, net: vals.net })) ); // 4. Sort nicely out.sort( (a, b) => d3.ascending(a.country, b.country) || d3.ascending(a.year, b.year) ); return out; } 36:Tf40,chart = { const data = countryYearData; const width = 1200, height = 900; const margin = { top: 60, right: 100, bottom: 50, left: 80 }; const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]); const byCountry = d3.group(data, d => d.country); const topCountries = Array.from(byCountry, ([country, vals]) => ({ country, totalAbsNet: d3.sum(vals, d => Math.abs(d.net)) })) .sort((a, b) => d3.descending(a.totalAbsNet, b.totalAbsNet)) .slice(0, 6); const countries = Array.from(byCountry.keys()).sort(d3.ascending); const x = d3.scaleLinear() .domain(d3.extent(data, d => d.year)) .range([margin.left, width - margin.right]); const ymax = d3.max(data, d => Math.abs(d.net)); const y = d3.scaleSqrt() .domain([-ymax, ymax]) .range([height - margin.bottom, margin.top]); const color = d3.scaleOrdinal() .domain(countries) .range(d3.schemeDark2); const lineNet = d3.line() .x(d => x(d.year)) .y(d => y(d.net)) .defined(d => d.net != null && !isNaN(d.net)); svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).ticks(8).tickFormat(d3.format("d"))); function formatB(v) { return d3.format(".2s")(v).replace("G", "B"); } svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(8).tickFormat(formatB)); // zero line svg.append("line") .attr("x1", margin.left) .attr("x2", width - margin.right) .attr("y1", y(0)) .attr("y2", y(0)) .attr("stroke", "gray") .attr("stroke-dasharray", "4,4") .attr("opacity", 0.7); const linesG = svg.append("g") .attr("fill", "none"); const lineData = countries.map(country => ({ country, values: byCountry.get(country) .slice() .sort((a, b) => d3.ascending(a.year, b.year)) })); const lines = linesG.selectAll("path") .data(lineData) .join("path") .attr("class", "country-line") .attr("stroke", d => color(d.country)) .attr("stroke-width", 1.2) .attr("stroke-opacity", 0.35) .attr("d", d => lineNet(d.values)) .on("mouseover", function (event, d) { this.parentNode.appendChild(this); lines .attr("stroke-opacity", l => l.country === d.country ? 1 : 0.05) .attr("stroke-width", l => l.country === d.country ? 3 : 1); }) .on("mouseout", function () { lines .attr("stroke-opacity", 0.35) .attr("stroke-width", 1.2); }); lines.append("title") .text(d => d.country); const labelData = topCountries.map(d => { const vals = byCountry.get(d.country) .slice() .sort((a, b) => d3.ascending(a.year, b.year)); const last = vals[vals.length - 1]; return { country: d.country, year: last.year, net: last.net }; }); const labelG = svg.append("g") .attr("font-size", 12) .attr("text-anchor", "start"); labelG.selectAll("text") .data(labelData) .join("text") .attr("x", d => Math.min(x(d.year) + 4, width - margin.right + 2)) .attr("y", d => y(d.net)) .attr("alignment-baseline", "middle") .attr("opacity",1) .attr("fill", d => color(d.country)) .text(d => d.country) svg.append("text") .attr("x", width / 2) .attr("y", margin.top - 25) .attr("text-anchor", "middle") .attr("font-size", 18) .attr("font-weight", "bold") .text("Net Aid Over Time by Country (Donated – Received)"); svg.append("text") .attr("x", width / 2) .attr("y", height - 10) .attr("text-anchor", "middle") .text("Year"); svg.append("text") .attr("transform", "rotate(-90)") .attr("x", -(height / 2)) .attr("y", 20) .attr("text-anchor", "middle") .text("Net amount (USD)"); return svg.node(); } 37:T1154,tierNetChart = { const tier = selectedTier; const visibleCountries = tier === "All" ? Array.from(new Set(countryYearData.map(d => d.country))).sort(d3.ascending) : playerStats .filter(d => countryTier.get(d.country) === tier) .map(d => d.country); const visibleSet = new Set(visibleCountries); const data = countryYearData.filter(d => visibleSet.has(d.country)); const width = 1200, height = 1000; const margin = { top: 60, right: 140, bottom: 50, left: 80 }; const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]); // group only visible countries const byCountry = d3.group(data, d => d.country); // scales const x = d3.scaleLinear() .domain(d3.extent(data, d => d.year)) .range([margin.left, width - margin.right]); const ymax = d3.max(data, d => Math.abs(d.net)) || 1; const y = d3.scaleSqrt() // change to d3.scaleSymlog() if you want symlog .domain([-ymax, ymax]) .range([height - margin.bottom, margin.top]); // ---- continuous color scale (unlimited colors) ---- // stable ordering of countries const countriesOrdered = visibleCountries.slice().sort(d3.ascending); const countryIndex = new Map(countriesOrdered.map((c, i) => [c, i])); const color = d3.scaleSequential() .domain([0, countriesOrdered.length - 1]) .interpolator(d3.interpolateRainbow); // or interpolateViridis / Cubehelix / Turbo etc. const lineNet = d3.line() .x(d => x(d.year)) .y(d => y(d.net)) .defined(d => d.net != null && !isNaN(d.net)); // axes svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).ticks(8).tickFormat(d3.format("d"))); function formatB(v) { return d3.format(".2s")(v).replace("G", "B"); } svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(8).tickFormat(formatB)); // zero line svg.append("line") .attr("x1", margin.left) .attr("x2", width - margin.right) .attr("y1", y(0)) .attr("y2", y(0)) .attr("stroke", "gray") .attr("stroke-dasharray", "4,4") .attr("opacity", 0.7); // build series const lineData = visibleCountries.map(country => ({ country, values: (byCountry.get(country) || []) .slice() .sort((a, b) => d3.ascending(a.year, b.year)) })); const linesG = svg.append("g").attr("fill", "none"); const lines = linesG.selectAll("path") .data(lineData) .join("path") .attr("stroke", d => color(countryIndex.get(d.country))) .attr("stroke-width", 1.8) .attr("stroke-opacity", 0.6) .attr("d", d => lineNet(d.values)) .on("mouseover", function (event, d) { this.parentNode.appendChild(this); lines .attr("stroke-opacity", l => l.country === d.country ? 1 : 0.1) .attr("stroke-width", l => l.country === d.country ? 3 : 1); }) .on("mouseout", function () { lines .attr("stroke-opacity", 0.6) .attr("stroke-width", 1.8); }); lines.append("title").text(d => d.country); // title svg.append("text") .attr("x", width / 2) .attr("y", margin.top - 25) .attr("text-anchor", "middle") .attr("font-size", 18) .attr("font-weight", "bold") .text(`Net Aid Over Time – ${tier}`); // axis labels svg.append("text") .attr("x", width / 2) .attr("y", height - 10) .attr("text-anchor", "middle") .text("Year"); svg.append("text") .attr("transform", "rotate(-90)") .attr("x", -(height / 2)) .attr("y", 20) .attr("text-anchor", "middle") .text("Net amount (USD, donated – received)"); // legend const legend = svg.append("g") .attr("transform", `translate(${width - margin.right + 10}, ${margin.top})`) .attr("font-size", 11); legend.append("text") .attr("x", 0) .attr("y", -8) .attr("font-weight", "bold") .text("Shown countries"); countriesOrdered.forEach((c, i) => { const g = legend.append("g") .attr("transform", `translate(0, ${i * 18})`); g.append("line") .attr("x1", 0) .attr("x2", 18) .attr("y1", 6) .attr("y2", 6) .attr("stroke", color(countryIndex.get(c))) .attr("stroke-width", 2); g.append("text") .attr("x", 24) .attr("y", 10) .text(c); }); return svg.node(); } 38:T2e33,# How does the amount donated vs. amount received change over time for each country? Are there countries that mostly send or mostly receive and countries that have a similar amount of donations they receive and send? Are there countries that change their role over time? That is, they used to mostly send donations and turn into mostly receiving donations and vice-versa? Are there countries in which you can find a sudden increase ("peak") or a sudden decrease ("valley")? ## Chart Descriptions ### Chart 1 Description: This multi line chart plots net aid (donated – received) for every country, from 1973 to 2013. **Key features:** - Centered horizontal zero line distinguishes donors (above) from recipients (below). - Square-root scaling is used to preserve the relative pattern but to deal with extremely high outlier values that make visualisation difficult. - Hover interactivity highlights individual lines and gives precise country names via tooltips. It helps highlight lines in a graph that suffers from the 'spaghetti problem'. - Color coding assigns each country a unique stroke color. - Right-side labels identify the top few high-magnitude countries without requiring a legend. - This view gives a global, dense overview of every player’s behavior over time. ### Chart 2 Description: To address the spaghetti chart problem in the first chart, three filtered charts show: - Top players (largest absolute donors/receivers over the full period) - Medium players - Small players **Each chart:** - Uses the same x-axis (year) and y-axis (net aid, sqrt scaled) - Similar to previous chart mouse hover highlights a countries line chart and country name is visible via tooltips - Shows cleaner, less cluttered patterns - Allows clear identification of peaks, valleys, and trend shifts. - Includes a side legend listing only the countries visible in that tier - This lets us examine behavioural differences between countries of different “tiers”. ## Analysis and Interpretation - Top Players: >**Donators:** Countries such as Germany, the United States, and Japan are consistently the largest net donors, with donation values exceeding 2 billion USD at various points in time. All three countries show substantial increases in net donations between the mid-1980s and early 2000s, followed by noticeable declines afterward. - Japan experiences the most pronounced peaks. Its donations rise sharply in the mid-1990s, reaching an exceptional high between 1995 and 2000 before declining in the 2000s. - The United States shows two clear periods of elevated giving: one in the late 1970s to early 1980s, and a second major rise in the early to mid-1990s. - Germany also displays a strong spike in the early 1990s, coinciding with its reunification period, after which its donation levels gradually stabilize. By 2013, Germany and Japan still donate more than they did in 1973, showing an overall positive long-term trend. In contrast, the United States in 2013 donates roughly the same amount it did in the early 1970s, reflecting a long-term pattern that is more cyclical rather than steadily increasing. Other donators (donation values less than 2 billion) include countries such as the Netherlands, France, Canada and UK. The Netherlands is relatively stable with donations, facing a small decrease in overall donations in 30 years but has no sharp spikes.France has an increasing trend with a small peak in donations in the 2010s period. Between 1973 to 1990, the UK faces sharp downwards spikes especially in the 1980 to 1985 period where it becomes a net receiver as well. Canada sees a similar valley in the same period and in the 2000 to 2005 period. Kuwait is another country that starts as a donator but faces these downward spikes, however, it becomes a net receiver of donations post 1990 >**Receivers:** Consistent receivers include India, Brazil, Colombia, Thailand, South Africa, and Poland. India shows a long-term increase in total aid received, but without major year-to-year fluctuations. Colombia follows a similar pattern, receiving aid steadily with minimal variation over time. Brazil also exhibits a gradual long-term rise in aid but has a notable spike between 1990 and 1995, which aligns with the period when several major donor countries experienced peaks in their outward aid flows. Poland begins the period close to net-zero, but receives a substantial inflow of aid during 1990–1995, after which it gradually returns to near-zero levels post-2005. Thailand experiences a major spike in aid during the 1995–2000 period. South Africa only saw an increase in donations received over time. Korea is an especially interesting case: it receives substantial aid in the mid-1990s, but afterward its net values rise steadily. By 2003, it transitions from being a receiver to becoming a net donor, reflecting the country’s significant economic growth and development over these decades. - Medium Players: Countries in this category show more frequent movement across the zero line, oscillating between net-donor and net-receiver status more often than the top players, even though the magnitudes involved are generally smaller. Chile is one of the few consistent receivers that stays well in the negative range for most of the 30-year period, with noticeable spikes in aid between 1982–1987 and 1990–1995. Romania remains a net donor through the 1980s and 1990s, with donations increasing until around 2000, after which its net position steadily declines, eventually falling close to the zero line. A similar pattern is seen in Hungary and the Czech Republic, the latter becoming a clear net donor after 2003. Spain begins the period as a net receiver but transitions into a net donor after 1985, remaining relatively consistently positive thereafter. Taiwan oscillates around the zero line: it experiences sharp periods of being a receiver during 1977–1982 and 1995–2000, but becomes a net donor from 2003 onward, staying close to zero and indicating relatively balanced inflows and outflows. >Among the donors in this middle-tier group, many maintain their donor status overall but experience sharp temporary valleys or surges. Australia, for example, is predominantly a donor across the full period, but dips into the receiver range in the 1980s and again during 1990–1993, followed by a rapid surge in outbound aid around 1995 exhibiting dramatic swings within a short five-year time window. Norway shows less extreme shifts, but still has intermittent years where it becomes a net receiver, despite an overall increasing donation trend. Austria is also a net donor for most of the period but exhibits several brief dips into the receiver side (around three or four in total), though none occur after 2003. Other countries, such as Belgium, experience strong volatility early on, showing a sharp fall into negative territory followed by a rapid climb back into positive levels between 1975 and 1990. After this turbulent period, Belgium stabilizes and remains consistently on the donor side. - Small Players: Small Players: Volatility in this category is similar to that of Medium Players, however, most countries except the UAE start off as Net Receivers. The overall trend seems to be of Countries moving from becoming Receivers to Donors over time. The UAE starts as a donor but experiences an inflow of aid between 1977 to 2007 where it continues to remain a net receiver. Lithuania is one of the only countries that continues to remain a receiver. Every other country goes from being receivers, experiencing a steady increase and becoming net donors. Some interesting pattens include: Portugal which has a valley in the start but then sees steady increase in net position. Greece has a major increase in money received in 1990 post which it has a increasing slope, making it a donator post 2000. Qatar receives a major amount of money (big negative spike) between 1995 and 2000 post which it sees a big positive slope into the donor side in 2004. **Key Findings:** 1. Countries tend to move from Net Receivers → Net Donors as they industrialize or develop economically. This pattern is especially clear in: - Korea (rapid industrialisation) - Czech Republic, Hungary, Poland (post-communist economies integrating into the EU) - Portugal, Greece, Spain (Southern European economies with strong upward trajectories after the 1980s) - Qatar and other Gulf states (small population, resource wealth leads to rapid positive shift) 2. Persistent receivers tend to be large-population developing countries or countries with structural inequalities. This can be seen with countries such as India, Brazil, Colombia, Thailand, South Africa. 3. Countries that oscillate frequently possibly face economic shocks, political transitions, or regional crises. - Romania, Czech Republic, Hungary, Poland (major restructuring in political and economic environment post 1989) - Chile faced reforms in 1980s - Qatar possibly faced resource driven wealth changes. 4. Top Donors are mostly large, stable, high-income economies. This explains their overall stability as donors compared to medium players. This includes the US, Germany, Japan, UK, France, Canada. ## Comparison of Charts and Design Choices Since the goal of this question is to understand how values change over time, a multi-line time series chart is the most suitable visualization. Using net amounts (Donated – Received) provides a single, interpretable metric that makes it easy to compare whether a country is acting primarily as a donor or a receiver in any given year. The first chart visualizes all countries simultaneously, allowing users to observe broad global patterns, while the use of hover interactions makes it possible to isolate and closely examine the trajectory of any individual country without overwhelming the viewer. Highlighting major donor countries further improves clarity by making the most influential trends immediately identifiable. A square-root scale was used on the y-axis to reduce visual distortion caused by extremely large values. This approach preserves the visibility of major peaks in top donor nations while preventing the smaller countries from being flattened near zero which is a common issue when data spans several orders of magnitude. Overall, this combination of interaction, scaling, and multi-line encoding provides an effective balance between overview and detail, supporting both high-level comparison and close inspection of individual country trends. However, the original full multi-line chart contained so many overlapping trajectories that it suffered from the classic “spaghetti graph” problem,” making it difficult to distinguish individual countries. Because dozens of lines needed to be displayed simultaneously, the chart also required reusing colors, which further reduced clarity and made it harder to track individual countries across time. To address these issues, I grouped countries based on their overall activity patterns (Top Players, Medium Players, and Small Players). This grouping significantly reduces visual clutter and avoids color repetition, allowing each country within a group to be clearly distinguishable. Using the same axes and scale across all three grouped charts preserves comparability while enabling focused examination of countries with similar magnitudes or behaviors. This structure is far more effective for answering the assignment’s questions: role changes over time, donor vs. receiver behavior, and sharp peaks or valleys become immediately visible. In the grouped charts, transitions across the zero line and major fluctuations stand out clearly without interference from unrelated lines, making the overall analysis much more interpretable than a single, densely packed chart. 39:T1a57,chart_top10 = { const width = 1500; const height = 1000; const margin = { top: 40, right: 470, bottom: 50, left: 80 }; const purposeSet = new Set(); for (const row of byYearPurpose) { for (const k of Object.keys(row)) { if (k !== "year") purposeSet.add(k); } } const purposesWithTotal = Array.from(purposeSet, key => ({ key, total: d3.sum(byYearPurpose, d => +d[key] || 0) })); const purposes = purposesWithTotal .sort((a, b) => d3.descending(a.total, b.total)) .slice(0, 10) .map(d => d.key); const years = byYearPurpose.map(d => +d.year).sort(d3.ascending); const series = purposes.map(purpose => ({ key: purpose, values: byYearPurpose .map(d => ({ year: +d.year, value: +d[purpose] || 0 })) .sort((a, b) => d3.ascending(a.year, b.year)) })); function formatB(v) { return d3.format(".2s")(v).replace("G", "B"); } const allValues = series.flatMap(s => s.values.map(v => v.value)); const maxVal = d3.max(allValues); const formatValue = formatB; // SVG const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height); // Scales const x = d3.scaleLinear() .domain(d3.extent(years)) .range([margin.left, width - margin.right]); const y = d3.scaleSqrt() .domain([0, maxVal]) .range([height - margin.bottom, margin.top]); const color = d3.scaleOrdinal() .domain(purposes) .range(d3.schemeTableau10); // Axes const xAxis = d3.axisBottom(x) .ticks(15) .tickFormat(d3.format("d")); const yAxis = d3.axisLeft(y) .ticks(6) .tickFormat(formatValue); const xAxisG = svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(xAxis); xAxisG.selectAll("text") .style("font-size", "14px"); xAxisG.append("text") .attr("x", (width + margin.left - margin.right) / 2) .attr("y", 35) .attr("fill", "black") .attr("text-anchor", "middle") .attr("font-size", 16) .text("Year"); const yAxisG = svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(yAxis); yAxisG.selectAll("text") .style("font-size", "14px"); yAxisG.append("text") .attr("transform", "rotate(-90)") .attr("x", -(height - margin.top - margin.bottom) / 2) .attr("y", -50) .attr("fill", "black") .attr("text-anchor", "middle") .attr("font-size", 16) .text("Total disbursement (USD)"); const line = d3.line() .x(d => x(d.year)) .y(d => y(d.value)); svg.append("g") .attr("fill", "none") .attr("stroke-width", 1.8) .selectAll("path") .data(series) .join("path") .attr("stroke", d => color(d.key)) .attr("d", d => line(d.values)); svg.append("g") .selectAll("g") .data(series) .join("g") .attr("fill", d => color(d.key)) .selectAll("circle") .data(d => d.values) .join("circle") .attr("cx", d => x(d.year)) .attr("cy", d => y(d.value)) .attr("r", 2.5); // Legend const legend = svg.append("g") .attr("transform", `translate(${width - margin.right+10}, ${(height-margin.bottom-margin.top)/2})`) .attr("font-size", 14); const legendItem = legend.selectAll("g") .data(purposes) .join("g") .attr("transform", (d, i) => `translate(0, ${i * 18})`); legendItem.append("line") .attr("x1", 0) .attr("x2", 22) .attr("y1", 8) .attr("y2", 8) .attr("stroke-width", 3) .attr("stroke", d => color(d)); legendItem.append("text") .attr("x", 26) .attr("y", 10) .attr("dominant-baseline", "middle") .text(d => d); // Title svg.append("text") .attr("x", (width+margin.left-margin.right) / 2) .attr("y", margin.top - 15) .attr("text-anchor", "middle") .attr("font-size", 22) .attr("font-weight", "bold") .text("Top 10 Aid Purposes Over Time"); const overlay = svg.append("rect") .attr("x", margin.left) .attr("y", margin.top) .attr("width", width - margin.left - margin.right) .attr("height", height - margin.top - margin.bottom) .attr("fill", "transparent"); const hoverLine = svg.append("line") .attr("stroke", "#333") .attr("stroke-width", 1) .attr("y1", margin.top) .attr("y2", height - margin.bottom) .attr("visibility", "hidden"); const tooltip = svg.append("g") .attr("visibility", "hidden") .attr("pointer-events", "none"); tooltip.append("rect") .attr("fill", "white") .attr("rx", 4) .attr("width", 280) .attr("height", 200) .attr("opacity", 0.9); const tipText = tooltip.append("text") .attr("x", 10) .attr("y", 20) .attr("font-size", 14) .attr("fill", "#111"); const linePaths = svg.selectAll("path"); function breakLabel(label, maxLen = 20) { if (label.length <= maxLen) return [label]; const idx = label.lastIndexOf(" ", maxLen); if (idx === -1) return [label]; return [label.slice(0, idx), label.slice(idx + 1)]; } overlay.on("mousemove", function (event) { const [mouseX] = d3.pointer(event); const year = Math.round(x.invert(mouseX)); hoverLine.attr("x1", x(year)).attr("x2", x(year)).attr("visibility", "visible"); tooltip.attr("transform", `translate(${x(year) + 10}, ${margin.top})`) .attr("visibility", "visible"); let tooltipRows = []; for (const s of series) { const v = s.values.find(d => d.year === year); if (v) { tooltipRows.push({ key: s.key, value: v.value }); } } tooltipRows.sort((a, b) => d3.descending(a.value, b.value)); tipText.text(""); tipText.append("tspan") .attr("x", 10) .attr("y", 14) .attr("font-weight", "bold") .text(year); tooltipRows.forEach(row => { const parts = breakLabel(row.key); parts.forEach((part, j) => { tipText.append("tspan") .attr("x", 10) .attr("dy", j === 0 ? "1.2em" : "1.1em") .text( j === parts.length - 1 ? `${part}: ${formatValue(row.value)}` : part ); }); }); let closest = null; let minDist = Infinity; for (const s of series) { const v = s.values.find(d => d.year === year); if (!v) continue; const dist = Math.abs(y(v.value) - event.offsetY); if (dist < minDist) { minDist = dist; closest = s.key; } } linePaths.attr("stroke-width", d => d.key === closest ? 3.5 : 1.5 ); }); overlay.on("mouseleave", function () { hoverLine.attr("visibility", "hidden"); tooltip.attr("visibility", "hidden"); linePaths.attr("stroke-width", 1.8); }); return svg.node(); } 3a:Tfb0,heatmap_top10 = { const width = 1300; const height = 450; const margin = { top: 100, right: 90, bottom: 70, left: 250 }; const purposeSet = new Set(); for (const row of byYearPurpose) { for (const k of Object.keys(row)) { if (k !== "year") purposeSet.add(k); } } const purposesWithTotal = Array.from(purposeSet, key => ({ key, total: d3.sum(byYearPurpose, d => +d[key] || 0) })); const purposes = purposesWithTotal .sort((a, b) => d3.descending(a.total, b.total)) .slice(0, 10) .map(d => d.key); const years = Array.from( new Set(byYearPurpose.map(d => +d.year)) ).sort(d3.ascending); const cells = []; for (const row of byYearPurpose) { const y = +row.year; for (const p of purposes) { cells.push({ year: y, purpose: p, value: +row[p] || 0 }); } } function formatB(v) { return d3.format(".2s")(v).replace("G", "B"); } const formatValue = formatB; const maxVal = d3.max(cells, d => d.value); // svg const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height); // Scale const x = d3.scaleBand() .domain(years) .range([margin.left, width - margin.right]) .paddingInner(0.05); const y = d3.scaleBand() .domain(purposes) .range([margin.top, height - margin.bottom]) .paddingInner(0.05); const color = d3.scaleSequential(d3.interpolateBlues) .domain([0, Math.sqrt(maxVal)]); function colorValue(amount) { if (!amount || amount <= 0) return "#f5f5f5"; return color(Math.sqrt(amount)); } // Axes const xAxis = d3.axisBottom(x) .tickValues(years.filter((d, i) => i % 5 === 0)) .tickFormat(d3.format("d")); const yAxis = d3.axisLeft(y); svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(xAxis) .selectAll("text") .attr("transform", "rotate(-45)") .attr("text-anchor", "end") .style("font-size","12px"); svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(yAxis) .selectAll("text") .style("font-size","12px"); // Heatmap cells const cellG = svg.append("g"); cellG.selectAll("rect") .data(cells) .join("rect") .attr("x", d => x(d.year)) .attr("y", d => y(d.purpose)) .attr("width", x.bandwidth()) .attr("height", y.bandwidth()) .attr("fill", d => colorValue(d.value)) .append("title") .text(d => `${d.purpose} ${d.year}: ${formatValue(d.value)}` ); // Legend const legendWidth = 250; const legendHeight = 10; const legendX = width - margin.right - 220; const legendY = 20; const legendScale = d3.scaleLinear() .domain([0, maxVal]) .range([0, legendWidth]); const legendAxis = d3.axisBottom(legendScale) .ticks(5) .tickFormat(formatValue); const legendGroup = svg.append("g") .attr("transform", `translate(${legendX}, ${legendY})`); const nSteps = 100; const legendData = d3.range(nSteps).map(i => i / (nSteps - 1)); legendGroup.append("g") .selectAll("rect") .data(legendData) .join("rect") .attr("x", (d, i) => i * (legendWidth / nSteps)) .attr("y", 0) .attr("width", legendWidth / nSteps + 1) .attr("height", legendHeight) .attr("fill", d => colorValue(d * maxVal)); const legendAxisG = legendGroup.append("g") .attr("transform", `translate(0, ${legendHeight})`) .call(legendAxis); svg.append("text") .attr("x", legendX + legendWidth / 2) .attr("y", legendY - 5) .attr("text-anchor", "middle") .attr("font-size", 11) .text("Total disbursement (USD)"); // ----- 8. Title ----- svg.append("text") .attr("x", width / 2) .attr("y", margin.top - 15) .attr("text-anchor", "middle") .attr("font-size", 20) .attr("font-weight", "bold") .text("Top 10 Aid Purposes Over Time – Heatmap"); return svg.node(); } 3b:T12f1,# What are the top 10 purposes of disbursements (in terms of total amount of disbursement) and how does their relative amount compare over time? E.g., are there purposes that tend to be prominent for a period of time and others that become more prominent during other periods? ## Chart Descriptions **Chart 1** The multi line chart displays the yearly disbursement amounts for the Top 10 aid purposes. This again seemed like a natural choice given that we wanted to see a trend over time.Each purpose is represented by a separate line, enabling direct comparison of their magnitudes, peaks, and long-term trends. Hover interactions reveal the exact values of all purposes for any chosen year, ordered in by value. This shows the category with the highest disbursement every year. This chart also uses square root for scaling due to the data being of several orders of magnitude. **Chart 2** The heatmap provides a compact overview of how the intensity of each aid purpose changes over time. The chart uses a sequential blue gradient, therefore, darker cells highlight periods of high disbursement, while lighter cells represent years of lower importance for that purpose. Hovering on each cell allows a viewer to see the exact value of disbursement for that year. ## Analysis and Interpretation 1. Some categories are remain consistent across the years: Air transport is consistently one of the highest-funded categories throughout the entire timeline. It shows several strong peaks (early 1980s and early 2000s), and both the heatmap and line chart show it as one of the darkest and most prominent categories. Rail transport and Industrial development also maintain relatively high values across most years, suggesting long-term global investment in transportation infrastructure and economic capacity-building. 2. Some categories become prevalent periodically: Rescheduling and Refinancing shows one of the strongest spikes in the dataset (particularly in the early–mid 1990s) along with Import Support (becoming non-existent thereafter) They both appear as dark blocks in the heatmap and vertical spikes, suggesting a period of concentrated debt restructuring and import support requirements which can be linked to financial crises or major restructuring agreements in developing economies. Value of disbursements remain low Telecommunications, but sees brief spikes in the mid-1990s and early 2000s. 3. Some categories decline over time: Industrial Development and Telecommunications are prevalent pre-2000s but steadily decline post 2000 likely due to global development priorities shifting away from state-led industrialization and large telecom infrastructure projects. 4. Cyclic trends: Some categories show a cyclic trend, this includes Sectors not specified, Power Generation (Renewable) and Power Generation (Non-Renewable). These categories exhibit cyclical patterns because their funding depends heavily on global policy shifts, energy market cycles, and administrative classification practices. Renewable and non-renewable power generation rise and fall with global energy priorities, technological change, and commodity cycles, while “Sectors Not Specified” reflects fluctuations in how multi-sector or unallocated aid flows are reported. As a result, these purposes naturally show repeated increases and decreases rather than a single long-term trend. ## Comparison of Charts and Design Choices To analyze the top 10 aid purposes over time, I chose to a multi-line chart and a heatmap. The multi-line chart provides precise year-to-year trends and makes it easy to see long-term slopes, sharp peaks, or declines for each purpose. Hover interaction allows the user to inspect any particular year and view them in order of which category had the highest disbursement that year. A square-root scale was used to reduce distortion from extremely large values while still preserving detail among smaller categories. However, this chart also can be difficult to view especially in areas where the lines closely cluster. The heatmap, in contrast, provides a compact, overview of how each purpose behaves across the entire timeline. The sequential blue gradient makes it straightforward to identify “hot spots,” periods of sustained importance, and cyclic patterns that might be harder to detect in the line chart. This chart is especially effective because the question focuses on relative prominence over time rather than exact numerical values. The heatmap visually emphasizes when certain purposes become dominant and when they fade, allowing users to instantly compare periods without needing to trace individual line paths. As a result, the heatmap provides a clearer “big-picture” narrative and is more effective for answering the question of how the prominence of each aid purpose changes across decades.3c:Tb0e,chloropeth_chart = { const width = 1200; const height = 900; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height); const projection = d3.geoNaturalEarth1() .fitSize([width, height], geoJSON); const path = d3.geoPath(projection); const valuesForYear = aidByYear.get(year) ?? new Map(); const formatAmount = d3.format(",.0f"); const maxVal = d3.max(recipientYearTotals, d => d.totalAmount); const color = d3.scaleSequential(d3.interpolateBlues) .domain([0, Math.sqrt(maxVal)]); function colorValue(amount) { if (!amount || amount <= 0) return "#eee"; return color(Math.sqrt(amount)); } // Title svg.append("text") .attr("x", width / 2) .attr("y", 30) .attr("text-anchor", "middle") .attr("font-size", 26) .attr("font-weight", "bold") .text(`History of Donations: ${year}`); const countries = geoJSON.features; // Countries svg.append("g") .selectAll("path") .data(countries) .join("path") .attr("d", path) .attr("stroke", "#999") .attr("stroke-width", 0.5) .attr("fill", d => { const name = d.properties.SOVEREIGNT; const v = valuesForYear.get(name) || 0; return colorValue(v); }) .append("title") .text(d => { const name = d.properties.SOVEREIGNT; const v = valuesForYear.get(name) || 0; return v > 0 ? `${name}\nAid received: ${formatAmount(v)}` : `${name}\nNo data / no aid recorded`; }); // Legend const legendWidth = 300; const legendHeight = 10; const legendX = (width - legendWidth) / 2; const legendY = height - 100; function formatB(v) { return d3.format(".2s")(v).replace("G", "B"); } const legendScale = d3.scaleLinear() .domain([0, maxVal]) .range([legendX, legendX + legendWidth]); const legendAxis = d3.axisBottom(legendScale) .ticks(10) .tickFormat(formatB); const legend = svg.append("g") .attr("transform", `translate(0, ${legendY})`); const nSteps = 120; const legendData = d3.range(nSteps).map(i => i / (nSteps - 1)); legend.append("g") .selectAll("rect") .data(legendData) .join("rect") .attr("x", (d, i) => legendX + i * (legendWidth / nSteps)) .attr("y", 0) .attr("width", legendWidth / nSteps + 1) .attr("height", legendHeight) .attr("fill", d => colorValue(d * maxVal)); legend.append("g") .attr("transform", `translate(0, ${legendHeight})`) .call(legendAxis); legend.append("text") .attr("x", width / 2) .attr("y", legendHeight + 30) .attr("text-anchor", "middle") .attr("font-size", 11) .text("Total aid received"); return svg.node(); } 3d:Tfea,# How do donations shift geographically over time? Do donations tend to be always in the same regions of the world over the years or they have been shifting over time? Can you build a visualization that shows the "history of donations" so that one can get a sense of which regions of the world have had more need for donations over the years? ## Chart Description The visualization is an interactive choropleth map showing how much aid each country received in a selected year, using a slider to move across time. Countries are shaded on a sequential blue scale, where lighter shades represent low inflows of aid and darker shades represent higher aid amounts. The legend provides a numeric reference for the scale. Hovering on any country reveals the exact amount received that year. The world is displayed using a Natural Earth projection for geographic accuracy and readability. ## Analysis and Interpretation Across the entire time period, clear geographic patterns emerge in where aid is concentrated. In the early 1970s (e.g., 1973), most major recipients are located in Asia and South America, with countries such as India, Thailand, Brazil, Colombia, and Chile consistently appearing as prominent receivers. These regions show noticeable year-to-year variation: for instance, Brazil experiences a visible rise in aid around 1976–1977, while India’s aid level lightens by 1979, indicating a temporary decline. By 1980, there is a notable shift as more countries outside these core regions begin to appear as meaningful aid recipients. This includes several European nations (such as Denmark, France, and Spain), Canada in North America, and Australia in Oceania. Even Japan briefly appears as a receiver in the early 1980s. The map for 1981 shows an especially broad intensification, with many countries across multiple continents displaying darker shades, indicating larger inflows of aid during that year. After this surge, 1982 marks a decline, with lighter shading and the disappearance of several earlier recipients, particularly in Europe, Canada, and Australia. In the mid-1980s, Canada reappears intermittently (1984), although Europe generally remains sparsely represented as a receiver. Throughout this period, Asian and Latin American countries continue to remain the backbone of major aid recipients. By 1987, Africa begins to appear more distinctly as new, consistent recipient, expanding the geographic scope of aid. In 1989, European countries briefly re-emerge, with countries like Poland receiving notably high levels of aid—Poland, in particular, becomes one of the most prominent European recipients in the late 1980s and early 1990s. The year 1992 shows Poland at one of its darkest intensities, highlighting a major aid influx likely related to political and economic transitions during that time. During the 1990s and early 2000s, Canada and Australia continue to appear intermittently, often receiving aid in certain years. By the 2000s, most European countries disappear from the map entirely, reflecting declining aid inflow to that region as economies strengthened and transitioned out of aid dependence. In the 2010s, the pattern stabilizes as the major recipients largely return to the long-standing set of Asian and Latin American countries, with countries like India, Brazil, and Thailand remaining consistent just as they did in the beginning of the time-series. ## Design Choices A choropleth map is an effective way to visualize geographic patterns, and pairing it with an interactive year slider enables users to easily observe how the spatial distribution of aid changes over time, supporting a strong temporal narrative. The use of a sequential blue colour scale easily conveys the magnitude of aid inflows through color intensity, while the square-root transformation of values ensures that smaller amounts remain visible instead of being compressed into barely distinguishable light shades. This combination makes the map both informative and interpretable, even when the underlying data spans a wide numeric range.3e:[{"id":"55260abbc777c0a3b8fed19f3929dd822fef9d5118b53b76b2176d20782910e599eac919999ea8ee85a60b783fd37082574f6591fd46c0d70ddf9b00df71ce27","href":"https://static.observableusercontent.com/files/55260abbc777c0a3b8fed19f3929dd822fef9d5118b53b76b2176d20782910e599eac919999ea8ee85a60b783fd37082574f6591fd46c0d70ddf9b00df71ce27","name":"countries-50m.json","type":"application/json","lastModified":1763441591352.328,"size":4177662}] 30:{"id":"77cfe743b29f7528","slug":null,"title":"Mini-Project 2: Temporal Data Visualization","thumbnail":"07db4c93f0849bc6a0f9765bd90aa9bcead0927a9ffab2eedfc8212349025953","access_level":"public","create_time":"$D2025-11-18T04:53:11.352Z","update_time":"$D2025-11-21T04:40:17.935Z","view_time":null,"first_public_time":"$D2025-11-21T00:37:31.073Z","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":719,"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":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Mini-Project 2: Temporal Data Visualization","cells":[{"id":155,"value":"# Mini-Project 2: Temporal Data Visualization","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":162,"value":"import {css} from \"@rk2546/2025-infovis-cse_notebook-gallery\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"css","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":170,"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/77cfe743b29f7528\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":179,"value":"## About the Datasets","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":175,"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":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"},{"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":true,"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":143,"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":201,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"## Visualisation 1","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":254,"value":"### Chart 1","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":222,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"playerStats = {\n const byCountry = d3.group(countryYearData, d => d.country);\n\n return Array.from(byCountry, ([country, vals]) => ({\n country,\n totalAbsNet: d3.sum(vals, d => Math.abs(d.net)) \n }))\n .sort((a, b) => d3.descending(a.totalAbsNet, b.totalAbsNet)); \n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"countryTier = {\n const n = playerStats.length;\n const topCut = Math.floor(n / 3);\n const mediumCut = Math.floor((2 * n) / 3);\n\n const tiers = new Map();\n\n playerStats.forEach((d, i) => {\n let tier;\n if (i < topCut) tier = \"Top players\";\n else if (i < mediumCut) tier = \"Medium players\";\n else tier = \"Small players\";\n tiers.set(d.country, tier);\n });\n\n return tiers; // Map(country -> \"Top players\"/\"Medium players\"/\"Small players\")\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"### Chart 2","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":287,"value":"viewof selectedTier = Inputs.radio(\n [\"Top players\", \"Medium players\", \"Small players\", \"All\"],\n { label: \"Filter by player tier\", value: \"Top players\" }\n);\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"$38","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":309,"value":"## Visualisation 2","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":312,"value":"// 1. Remove UNSPECIFIED purposes\ncleaned = aiddata.filter(d => d.purpose !== \"UNSPECIFIED\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"totals = d3.rollups(\n cleaned,\n v => d3.sum(v, d => d.amount),\n d => d.purpose\n).map(([purpose, total]) => ({ purpose, total }));\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"top10 = totals\n .sort((a, b) => d3.descending(a.total, b.total))\n .slice(0, 10)\n .map(d => d.purpose);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"filteredTop10 = cleaned.filter(d => top10.includes(d.purpose));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"byYearPurpose = d3.rollups(\n filteredTop10,\n v => d3.sum(v, d => d.amount),\n d => d.yearInt,\n d => d.purpose\n).map(([year, purposeList]) => {\n const row = { year: +year };\n for (const [purpose, value] of purposeList) {\n const renamed = purpose === \"RESCHEDULING AND REFINANCING\"\n ? \"Rescheduling and Refinancing\"\n : purpose;\n row[renamed] = value;\n }\n return row;\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":496,"value":"### Chart 1: Line Chart with Tooltips","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":337,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":449,"value":"### Chart 2 - Heatmap","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":451,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":689,"value":"$3b","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":509,"value":"## Visualisation 3","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":512,"value":"recipientYearTotals = d3.rollups(\n aiddata,\n v => d3.sum(v, d => +d.amount), \n d => d.recipient, \n d => d.yearInt \n)\n.flatMap(([recipient, years]) =>\n years.map(([year, totalAmount]) => ({\n recipient,\n year: +year,\n totalAmount\n }))\n);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":523,"value":"aidByYear = d3.rollup(\n recipientYearTotals,\n v => new Map(v.map(d => [d.recipient, d.totalAmount])),\n d => d.year\n)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":562,"value":"aidValues = recipientYearTotals.map(d => d.totalAmount);\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":546,"value":"countries = geoJSON.features","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":514,"value":"years = d3.extent(recipientYearTotals, d => d.year)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":518,"value":"viewof year = Inputs.range(years, {\n step: 1,\n value: years[0],\n label: \"Year\",\n})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":531,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":711,"value":"$3d","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W3e","stdlib":"1","titling":"auto"}} 31:"$30:body"