2b:null 2c:["$","title",null,{"children":"Mini-Project 2: Temporal Data Visualization | New York University | Observable"}] 31: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!

32:T4dd,### Aid Data, Revisited Here we load a simplified and reduced version of the AidData dataset. You are free to change this code as you wish. If you don't want to preprocess your data on Observable, then you can do the preprocessing using whatever languages or tools you'd like and then [upload](/@observablehq/file-attachments) your preprocessed data to Observable. If you take this approach, then you should delete the aiddata cell below so that you're not loading unnecessary data. The dataset contains the following columns: - yearDate: year of the commitment as a Date object - yearInt: year of the commitment as an integer - donor: country providing the financial resource - recipient: country receiving the financial resource - amount: the total amount of financial resources provided - purpose: the purpose of the transaction33: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.

34:T110d,{ const sentByCountry = d3.rollup( aiddata, v => d3.sum(v, d => d.amount), d => standardizeCountryName(d.donor) ); const receivedByCountry = d3.rollup( aiddata, v => d3.sum(v, d => d.amount), d => standardizeCountryName(d.recipient) ); const allCountries = new Set([ ...Array.from(sentByCountry.keys()), ...Array.from(receivedByCountry.keys()) ]); const countryData = Array.from(allCountries).map(country => ({ country, sent: sentByCountry.get(country) || 0, received: receivedByCountry.get(country) || 0, total: (sentByCountry.get(country) || 0) + (receivedByCountry.get(country) || 0) })) .filter(d => d.total > 1e9) .sort((a, b) => b.total - a.total) .slice(0, 20); const margin = {top: 70, right: 30, bottom: 120, left: 90}; const width = 1100 - margin.left - margin.right; const height = 600 - margin.top - margin.bottom; const svg = d3.create("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .attr("viewBox", [0, 0, width + margin.left + margin.right, height + margin.top + margin.bottom]); const g = svg.append("g") .attr("transform", `translate(${margin.left},${margin.top})`); const x = d3.scaleBand() .domain(countryData.map(d => d.country)) .range([0, width]) .padding(0.25); const y = d3.scaleLinear() .domain([0, d3.max(countryData, d => Math.max(d.sent, d.received))]) .range([height, 0]) .nice(); g.append("g") .attr("class", "grid") .attr("opacity", 0.1) .call(d3.axisLeft(y) .tickSize(-width) .tickFormat("") ); const barWidth = x.bandwidth() / 2; g.selectAll(".bar-sent") .data(countryData) .join("rect") .attr("class", "bar-sent") .attr("x", d => x(d.country)) .attr("y", d => y(d.sent)) .attr("width", barWidth) .attr("height", d => height - y(d.sent)) .attr("fill", "#3182bd") .attr("opacity", 0.85) .append("title") .text(d => `${d.country}\nSent: $${(d.sent / 1e9).toFixed(2)}B`); g.selectAll(".bar-received") .data(countryData) .join("rect") .attr("class", "bar-received") .attr("x", d => x(d.country) + barWidth) .attr("y", d => y(d.received)) .attr("width", barWidth) .attr("height", d => height - y(d.received)) .attr("fill", "#e6550d") .attr("opacity", 0.85) .append("title") .text(d => `${d.country}\nReceived: $${(d.received / 1e9).toFixed(2)}B`); g.append("g") .attr("transform", `translate(0,${height})`) .call(d3.axisBottom(x)) .selectAll("text") .attr("transform", "rotate(-45)") .style("text-anchor", "end") .attr("dx", "-.8em") .attr("dy", ".15em") .style("font-size", "11px"); g.append("g") .call(d3.axisLeft(y) .ticks(8) .tickFormat(d => `$${(d / 1e9).toFixed(0)}B`)) .selectAll("text") .style("font-size", "11px"); svg.append("text") .attr("x", (width + margin.left + margin.right) / 2) .attr("y", 30) .attr("text-anchor", "middle") .style("font-size", "18px") .style("font-weight", "bold") .text("Total Aid Sent vs Received by Country (1973-2013)"); svg.append("text") .attr("x", (width + margin.left + margin.right) / 2) .attr("y", 52) .attr("text-anchor", "middle") .style("font-size", "12px") .style("fill", "#666") .text("Top 20 countries by total aid volume"); svg.append("text") .attr("transform", "rotate(-90)") .attr("x", -(margin.top + height / 2)) .attr("y", 25) .attr("text-anchor", "middle") .style("font-size", "13px") .text("Total Amount (USD)"); const legend = svg.append("g") .attr("transform", `translate(${margin.left + width - 150}, ${margin.top + 15})`); legend.append("rect") .attr("width", 18) .attr("height", 18) .attr("fill", "#3182bd") .attr("opacity", 0.85); legend.append("text") .attr("x", 24) .attr("y", 14) .style("font-size", "12px") .text("Sent"); legend.append("rect") .attr("x", 75) .attr("width", 18) .attr("height", 18) .attr("fill", "#e6550d") .attr("opacity", 0.85); legend.append("text") .attr("x", 99) .attr("y", 14) .style("font-size", "12px") .text("Received"); return svg.node(); }35:T527,Looking at the total aid sent versus received across countries from 1973-2013, several clear patterns emerge: Countries that mostly donate: - The United States and Japan are the dominant donors, each sending over $110B in aid with minimal amounts received - Germany sends about $47B with very little received, clearly positioning itself as a major donor nation - France, United Kingdom, Canada, and Netherlands also show strong donor profiles with sent amounts significantly exceeding received amounts Countries that mostly receive: - India stands out as the largest recipient with approximately $135B received and almost nothing sent - Thailand, Brazil, South Korea, Colombia, and Poland are all major recipients, each receiving $20-50B with minimal outgoing aid - South Africa has also received substantial aid (around $18B) with little sent Balanced countries: - Sweden and Italy show more balanced profiles where sent and received amounts are relatively similar, though both still lean toward being donors The visualization clearly shows that aid flows predominantly from wealthy developed nations (US, Japan, Germany) to developing nations in Asia, Latin America, and Africa. There's a clear divide between "donor countries" and "recipient countries" with very few countries playing both roles significantly.36:Tfa1,{ const sentByCountryYear = d3.rollup( aiddata, v => d3.sum(v, d => d.amount), d => standardizeCountryName(d.donor), d => d.yearInt ); const receivedByCountryYear = d3.rollup( aiddata, v => d3.sum(v, d => d.amount), d => standardizeCountryName(d.recipient), d => d.yearInt ); const allCountries = new Set([ ...Array.from(sentByCountryYear.keys()), ...Array.from(receivedByCountryYear.keys()) ]); const countryTotals = Array.from(allCountries).map(country => { const sent = sentByCountryYear.has(country) ? d3.sum(Array.from(sentByCountryYear.get(country).values())) : 0; const received = receivedByCountryYear.has(country) ? d3.sum(Array.from(receivedByCountryYear.get(country).values())) : 0; return { country, total: sent + received }; }) .sort((a, b) => b.total - a.total) .slice(0, 12); const topCountries = countryTotals.map(d => d.country); const years = d3.range(1973, 2014); const margin = {top: 35, right: 10, bottom: 30, left: 55}; const cellWidth = 270; const cellHeight = 170; const cols = 3; const rows = 4; const width = cols * cellWidth; const height = rows * cellHeight + 70; const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]); svg.append("text") .attr("x", width / 2) .attr("y", 25) .attr("text-anchor", "middle") .style("font-size", "18px") .style("font-weight", "bold") .text("Donations Over Time - Identifying Peaks, Valleys, and Role Changes"); svg.append("text") .attr("x", width / 2) .attr("y", 45) .attr("text-anchor", "middle") .style("font-size", "11px") .style("fill", "#666") .text("Blue = Sent | Orange = Received"); topCountries.forEach((country, i) => { const row = Math.floor(i / cols); const col = i % cols; const xOffset = col * cellWidth; const yOffset = row * cellHeight + 70; const g = svg.append("g") .attr("transform", `translate(${xOffset + margin.left}, ${yOffset + margin.top})`); const chartWidth = cellWidth - margin.left - margin.right; const chartHeight = cellHeight - margin.top - margin.bottom; const timeData = years.map(year => ({ year, sent: sentByCountryYear.get(country)?.get(year) || 0, received: receivedByCountryYear.get(country)?.get(year) || 0 })); const xScale = d3.scaleLinear() .domain(d3.extent(years)) .range([0, chartWidth]); const maxValue = d3.max(timeData, d => Math.max(d.sent, d.received)); const yScale = d3.scaleLinear() .domain([0, maxValue]) .range([chartHeight, 0]); const lineSent = d3.line() .x(d => xScale(d.year)) .y(d => yScale(d.sent)) .curve(d3.curveMonotoneX); const lineReceived = d3.line() .x(d => xScale(d.year)) .y(d => yScale(d.received)) .curve(d3.curveMonotoneX); g.append("path") .datum(timeData) .attr("fill", "none") .attr("stroke", "#3182bd") .attr("stroke-width", 2) .attr("d", lineSent); g.append("path") .datum(timeData) .attr("fill", "none") .attr("stroke", "#e6550d") .attr("stroke-width", 2) .attr("d", lineReceived); g.append("g") .attr("transform", `translate(0,${chartHeight})`) .call(d3.axisBottom(xScale) .ticks(5) .tickFormat(d3.format("d"))) .selectAll("text") .style("font-size", "8px"); g.append("g") .call(d3.axisLeft(yScale) .ticks(4) .tickFormat(d => `$${(d / 1e9).toFixed(1)}B`)) .selectAll("text") .style("font-size", "8px"); g.append("text") .attr("x", chartWidth / 2) .attr("y", -8) .attr("text-anchor", "middle") .style("font-size", "12px") .style("font-weight", "bold") .text(country); }); return svg.node(); }37:T7a3,Peaks and Valleys: - Poland shows the most dramatic peak around 1993, with received aid spiking to nearly $9B before dropping sharply. This likely corresponds to debt restructuring during Poland's post-communist transition - Thailand experienced a major peak around 2000, reaching about $6B in received aid, probably related to recovery from the 1997 Asian financial crisis - Brazil shows significant volatility with peaks around 2002-2003, fluctuating between $0.5B and $2.5B throughout the period - South Korea has a massive spike around 2005, reaching nearly $5B, but then drops to almost zero, showing a dramatic shift in aid needs - Germany had a notable spike around 1995 reaching $8B in sent aid, possibly related to European integration efforts Countries Changing Roles: - South Korea is the clearest example of role change - it received substantial aid (up to $5B) through the early 2000s but then transitions to sending more aid than receiving by 2010, reflecting its economic development - United Kingdom shows a shift from being somewhat balanced in the 1970s-1980s to becoming predominantly a donor nation by the 2000s - Japan transitions from receiving moderate amounts in the 1970s to becoming a major donor by the 1990s, though this shift started before our data period Consistent Patterns: - India maintains steady received aid throughout the entire period, consistently receiving $2-5B annually with very little variation in its recipient role - United States shows consistent donor behavior with the peak around 1990 ($10B sent) and generally maintaining $1-2B sent annually - Colombia and South Africa show increasing trends in received aid over time, with South Africa's aid steadily climbing from near zero in the 1980s to over $1B by 2010 The visualization effectively shows that while some countries maintain consistent roles, others experience dramatic shifts tied to economic crises, transitions, or development milestones.38:T1205,{ const purposeTotals = d3.rollup( aiddata.filter(d => d.purpose && d.purpose !== "Sectors not specified"), v => d3.sum(v, d => d.amount), d => d.purpose ); const top10Purposes = Array.from(purposeTotals.entries()) .sort((a, b) => b[1] - a[1]) .slice(0, 10) .map(d => d[0]); const purposeByYear = d3.rollup( aiddata.filter(d => top10Purposes.includes(d.purpose)), v => d3.sum(v, d => d.amount), d => d.yearInt, d => d.purpose ); const years = Array.from(purposeByYear.keys()).sort((a, b) => a - b); const stackData = years.map(year => { const yearData = { year }; const purposeMap = purposeByYear.get(year) || new Map(); top10Purposes.forEach(purpose => { yearData[purpose] = purposeMap.get(purpose) || 0; }); return yearData; }); const stack = d3.stack() .keys(top10Purposes) .order(d3.stackOrderNone) .offset(d3.stackOffsetNone); const series = stack(stackData); const margin = {top: 90, right: 280, bottom: 70, left: 90}; const width = 1200 - margin.left - margin.right; const height = 600 - margin.top - margin.bottom; const svg = d3.create("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .attr("viewBox", [0, 0, width + margin.left + margin.right, height + margin.top + margin.bottom]); const g = svg.append("g") .attr("transform", `translate(${margin.left},${margin.top})`); const x = d3.scaleLinear() .domain(d3.extent(years)) .range([0, width]); const y = d3.scaleLinear() .domain([0, d3.max(series, layer => d3.max(layer, d => d[1]))]) .range([height, 0]) .nice(); const color = d3.scaleOrdinal() .domain(top10Purposes) .range(d3.schemeTableau10); const area = d3.area() .x(d => x(d.data.year)) .y0(d => y(d[0])) .y1(d => y(d[1])) .curve(d3.curveBasis); g.selectAll(".layer") .data(series) .join("path") .attr("class", "layer") .attr("d", area) .attr("fill", d => color(d.key)) .attr("opacity", 0.8) .attr("stroke", "white") .attr("stroke-width", 0.5) .on("mouseover", function() { d3.select(this).attr("opacity", 1).attr("stroke-width", 1.5); }) .on("mouseout", function() { d3.select(this).attr("opacity", 0.8).attr("stroke-width", 0.5); }) .append("title") .text(d => d.key); g.append("g") .attr("transform", `translate(0,${height})`) .call(d3.axisBottom(x).tickFormat(d3.format("d"))) .selectAll("text") .style("font-size", "11px"); g.append("g") .call(d3.axisLeft(y) .ticks(8) .tickFormat(d => `$${(d / 1e9).toFixed(0)}B`)) .selectAll("text") .style("font-size", "11px"); svg.append("text") .attr("x", (width + margin.left + margin.right) / 2) .attr("y", 30) .attr("text-anchor", "middle") .style("font-size", "18px") .style("font-weight", "bold") .text("Top 10 Donation Purposes Over Time"); svg.append("text") .attr("x", (width + margin.left + margin.right) / 2) .attr("y", 52) .attr("text-anchor", "middle") .style("font-size", "12px") .style("fill", "#666") .text("Stacked area chart showing relative prominence of aid purposes"); svg.append("text") .attr("x", (width + margin.left + margin.right) / 2) .attr("y", height + margin.top + 55) .attr("text-anchor", "middle") .style("font-size", "13px") .text("Year"); svg.append("text") .attr("transform", "rotate(-90)") .attr("x", -(margin.top + height / 2)) .attr("y", 25) .attr("text-anchor", "middle") .style("font-size", "13px") .text("Total Aid Amount (USD)"); const legend = svg.append("g") .attr("transform", `translate(${margin.left + width + 20}, ${margin.top})`); legend.append("text") .attr("y", -10) .style("font-size", "12px") .style("font-weight", "bold") .text("Aid Purposes:"); top10Purposes.forEach((purpose, i) => { const row = legend.append("g") .attr("transform", `translate(0, ${i * 22})`); row.append("rect") .attr("width", 16) .attr("height", 16) .attr("fill", color(purpose)) .attr("opacity", 0.8); const textElem = row.append("text") .attr("x", 22) .attr("y", 13) .style("font-size", "10px"); if (purpose.length > 28) { textElem.text(purpose.substring(0, 28) + "..."); row.append("title").text(purpose); } else { textElem.text(purpose); } }); return svg.node(); }39:T7b8,The 1980s - Diversified Aid: - During the early 1980s, aid was relatively balanced across multiple purposes - Air transport (blue) was prominent, taking up roughly 40-50% of total aid - Industrial development (pink/red) and Power generation (teal) were also significant contributors - Total aid volume peaked around 1981 at approximately $7B The Early 1990s - The Import Support Surge: - Around 1993, there's a massive spike in total aid reaching approximately $16B - This spike is dominated by Import support/capital goods (yellow), which becomes the single largest category - RESCHEDULING AND REFINANCING (green) also becomes very prominent during this period, likely due to debt crises in developing nations - This reflects the economic restructuring happening globally after the Cold War Mid-1990s to Early 2000s - Air Transport Dominance: - From 1995-2003, Air transport (blue) becomes the overwhelming focus, representing about 50-60% of all aid - Total aid volume decreases to around $4-7B but remains focused on infrastructure development - This period emphasizes connectivity and transportation infrastructure in developing nations Late 2000s to Early 2010s - The Rail Transport Era: - Starting around 2008-2010, there's a dramatic shift toward Rail transport (orange) - By 2010-2013, Rail transport dominates the landscape, accounting for roughly 60-70% of all aid purposes - This likely reflects changing priorities toward sustainable transportation and possibly China's growing influence in infrastructure development - Total aid stabilizes around $3B but with much more concentrated focus Key Insight: The visualization clearly shows that aid purposes are not static - they shift dramatically based on global economic conditions, policy priorities, and development trends. We moved from diversified infrastructure support in the 1980s, through a debt crisis response in the early 1990s, to transportation-focused aid that evolved from air to rail by 2013.3a:T1aa2,{ const receivedByCountryPeriod = new Map(); aiddata.forEach(d => { if (d.recipient && d.amount > 0) { const country = standardizeCountryName(d.recipient); const period = Math.floor(d.yearInt / 5) * 5; if (!receivedByCountryPeriod.has(country)) { receivedByCountryPeriod.set(country, new Map()); } const periodMap = receivedByCountryPeriod.get(country); periodMap.set(period, (periodMap.get(period) || 0) + d.amount); } }); const allPeriods = new Set(); receivedByCountryPeriod.forEach(periods => { periods.forEach((amount, period) => allPeriods.add(period)); }); const timePeriods = Array.from(allPeriods).sort((a, b) => a - b); const width = 1100; const height = 650; const margin = {top: 110, right: 30, bottom: 60, left: 30}; const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]); const projection = d3.geoEqualEarth() .fitSize([width - margin.left - margin.right, height - margin.top - margin.bottom - 100], geoJSON); const path = d3.geoPath().projection(projection); const mapGroup = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); let maxAmount = 0; receivedByCountryPeriod.forEach(periods => { periods.forEach(amount => { maxAmount = Math.max(maxAmount, amount); }); }); const colorScale = d3.scaleSequentialLog(d3.interpolateYlOrRd) .domain([1e6, maxAmount]); const countries = mapGroup.selectAll("path") .data(geoJSON.features) .join("path") .attr("d", path) .attr("stroke", "#333") .attr("stroke-width", 0.5); let currentPeriodIndex = 0; function updateMap(periodIndex) { const period = timePeriods[periodIndex]; countries .transition() .duration(500) .attr("fill", d => { const countryName = d.properties.SOVEREIGNT || d.properties.NAME; const countryData = receivedByCountryPeriod.get(countryName); const amount = countryData ? countryData.get(period) || 0 : 0; return amount > 0 ? colorScale(amount) : "#f5f5f5"; }) .attr("opacity", d => { const countryName = d.properties.SOVEREIGNT || d.properties.NAME; const countryData = receivedByCountryPeriod.get(countryName); const amount = countryData ? countryData.get(period) || 0 : 0; return amount > 0 ? 1 : 0.3; }); periodLabel.text(`${period}-${period + 4}`); periodCounter.text(`Period ${periodIndex + 1} of ${timePeriods.length}`); } countries .on("mouseover", function(event, d) { d3.select(this) .attr("stroke", "#000") .attr("stroke-width", 2); }) .on("mouseout", function() { d3.select(this) .attr("stroke", "#333") .attr("stroke-width", 0.5); }) .append("title") .text(d => { const period = timePeriods[currentPeriodIndex]; const countryName = d.properties.SOVEREIGNT || d.properties.NAME; const countryData = receivedByCountryPeriod.get(countryName); const amount = countryData ? countryData.get(period) || 0 : 0; return `${countryName}\n${amount > 0 ? `$${(amount / 1e9).toFixed(2)}B` : 'No data'}`; }); svg.append("text") .attr("x", width / 2) .attr("y", 25) .attr("text-anchor", "middle") .style("font-size", "18px") .style("font-weight", "bold") .text("Geographic Shifts in Aid Distribution Over Time"); svg.append("text") .attr("x", width / 2) .attr("y", 47) .attr("text-anchor", "middle") .style("font-size", "12px") .style("fill", "#666") .text("Interactive map showing aid received by country across 5-year periods"); const periodLabel = svg.append("text") .attr("x", width / 2) .attr("y", 75) .attr("text-anchor", "middle") .style("font-size", "16px") .style("font-weight", "bold") .style("fill", "steelblue"); const periodCounter = svg.append("text") .attr("x", width / 2) .attr("y", 95) .attr("text-anchor", "middle") .style("font-size", "11px") .style("fill", "#666"); const controlsY = height - 85; const prevButton = svg.append("g") .attr("transform", `translate(${width / 2 - 90}, ${controlsY})`) .style("cursor", "pointer") .on("click", () => { if (currentPeriodIndex > 0) { currentPeriodIndex--; updateMap(currentPeriodIndex); } }); prevButton.append("rect") .attr("width", 75) .attr("height", 32) .attr("fill", "#3182bd") .attr("rx", 5); prevButton.append("text") .attr("x", 37.5) .attr("y", 21) .attr("text-anchor", "middle") .attr("fill", "white") .style("font-size", "14px") .style("pointer-events", "none") .text("< Prev"); const nextButton = svg.append("g") .attr("transform", `translate(${width / 2 + 15}, ${controlsY})`) .style("cursor", "pointer") .on("click", () => { if (currentPeriodIndex < timePeriods.length - 1) { currentPeriodIndex++; updateMap(currentPeriodIndex); } }); nextButton.append("rect") .attr("width", 75) .attr("height", 32) .attr("fill", "#3182bd") .attr("rx", 5); nextButton.append("text") .attr("x", 37.5) .attr("y", 21) .attr("text-anchor", "middle") .attr("fill", "white") .style("font-size", "14px") .style("pointer-events", "none") .text("Next >"); const legendWidth = 280; const legendHeight = 12; const legend = svg.append("g") .attr("transform", `translate(${width - legendWidth - 50}, ${height - 45})`); legend.append("text") .attr("x", legendWidth / 2) .attr("y", -8) .attr("text-anchor", "middle") .style("font-size", "10px") .style("font-weight", "bold") .text("Total Aid Received (USD)"); const legendScale = d3.scaleLog() .domain([1e6, maxAmount]) .range([0, legendWidth]); const legendAxis = d3.axisBottom(legendScale) .ticks(5, "$.2s"); const defs = svg.append("defs"); const gradient = defs.append("linearGradient") .attr("id", "legend-gradient"); d3.range(0, 1.05, 0.05).forEach(t => { gradient.append("stop") .attr("offset", `${t * 100}%`) .attr("stop-color", colorScale(1e6 * Math.pow(maxAmount / 1e6, t))); }); legend.append("rect") .attr("width", legendWidth) .attr("height", legendHeight) .style("fill", "url(#legend-gradient)") .attr("stroke", "#999") .attr("stroke-width", 0.5); legend.append("g") .attr("transform", `translate(0, ${legendHeight})`) .call(legendAxis) .selectAll("text") .style("font-size", "9px"); updateMap(currentPeriodIndex); return svg.node(); }3b:Taf5,Early Period (1970-1979): - Aid is heavily concentrated in South Asia, particularly India (dark red), and Southeast Asia (Thailand, Philippines in red/orange) - Brazil dominates South American aid flows (dark red) - Middle East shows some activity with Saudi Arabia receiving moderate amounts (yellow) - Africa receives relatively little aid during this period 1980s Expansion: - By 1980-1984, we see significant expansion with North America (Canada) appearing in red, showing recipient status - Europe starts receiving more aid, particularly Eastern European countries (orange) - Australia appears as a recipient (orange) - India and Brazil continue to dominate their respective regions - The geographic spread of aid becomes much broader Late 1980s: - Canada receives less aid while Eastern Europe intensifies - South Africa begins appearing as a recipient (orange) - The pattern suggests aid following political changes, particularly with the end of apartheid approaching in South Africa 1990s - Post-Cold War Redistribution: - The 1990-1994 period shows dramatic changes with Eastern European countries (particularly Poland) receiving massive amounts (dark red) - This reflects post-communist transition support - Australia receives substantial aid (orange) - Latin America (Brazil, Chile) remains consistently red Late 1990s to 2000s - Stabilization: - By 1995-2004, aid patterns stabilize with consistent focus on: - South Asia (India - always dark red) - Southeast Asia (Thailand, Vietnam, Myanmar in red/orange) - Latin America (Brazil remains prominent) - Middle East (Saudi Arabia, Iran showing yellow/orange) - Eastern Europe lightens considerably as these countries develop 2005-2014 - Modern Era: - Aid becomes more targeted and less geographically dispersed - United States appears as a recipient (orange) by 2005, likely for specific programs - Brazil continues receiving substantial aid (dark red) - India remains the consistent largest recipient throughout all periods - Africa remains relatively underfunded compared to other regions despite needs - Southeast Asia maintains moderate levels (Thailand, Myanmar, Vietnam in red) Key Geographic Insights: Consistency: India has been the single largest recipient across all time periods, never dropping below dark red coloring Shifting Priorities: Aid clearly followed geopolitical changes - Eastern Europe in the 1990s, increased Middle East focus in 2000s Regional Inequality: Africa notably receives less aid than Asia or Latin America throughout most periods Development Success: Countries like South Korea virtually disappear from the recipient map by 2010, showing successful development Concentration: Aid tends to concentrate in a few major recipients rather than spreading evenly across all developing nations3c:[{"id":"55260abbc777c0a3b8fed19f3929dd822fef9d5118b53b76b2176d20782910e599eac919999ea8ee85a60b783fd37082574f6591fd46c0d70ddf9b00df71ce27","href":"https://static.observableusercontent.com/files/55260abbc777c0a3b8fed19f3929dd822fef9d5118b53b76b2176d20782910e599eac919999ea8ee85a60b783fd37082574f6591fd46c0d70ddf9b00df71ce27","name":"countries-50m.json","type":"application/json","lastModified":1763677704922.438,"size":4177662}] 2f:{"id":"54451b3638465243","slug":null,"title":"Mini-Project 2: Temporal Data Visualization","thumbnail":"07db4c93f0849bc6a0f9765bd90aa9bcead0927a9ffab2eedfc8212349025953","access_level":"public","create_time":"$D2025-11-20T22:28:24.922Z","update_time":"$D2025-11-20T23:48:34.135Z","view_time":null,"first_public_time":"$D2025-11-20T23:48:22.059Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"3e0135dbcb9af4fe","login":"new-york-university21","name":"New York University","avatar_url":"https://avatars-next.observableusercontent.com/d97d076a94403ded92e5811f3b293e5a00e959f42fc5252221bd57904d711438","tier":"starter_2024","bio":""},"version":273,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"6b3b6472db850914","login":"sm12505","name":"Sm12505","avatar_url":"https://avatars-next.observableusercontent.com/25d7e16f268c88a291fc61a344dcc836598b5be17f4329fda0ef29d45aae18d2","tier":null,"bio":""}],"members":[{"type":"team","id":"3e0135dbcb9af4fe","login":"new-york-university21","name":"New York University","avatar_url":"https://avatars-next.observableusercontent.com/d97d076a94403ded92e5811f3b293e5a00e959f42fc5252221bd57904d711438","tier":"starter_2024","role":"editor"},{"type":"individual","id":"6b3b6472db850914","login":"sm12505","name":"Sm12505","avatar_url":"https://avatars-next.observableusercontent.com/25d7e16f268c88a291fc61a344dcc836598b5be17f4329fda0ef29d45aae18d2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Mini-Project 2: Temporal Data Visualization","cells":[{"id":155,"value":"# Mini-Project 2: Temporal Data Visualization","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"css","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":170,"value":"---\n\n#### [TO-DO]\n\nFill out the following submission details:\n\n* **Name:** <Siddh Mandirwala>\n* **NetID:** <sm12505>\n* **NOTEBOOK URL:** <[NOTEBOOK URL](https://observablehq.com/d/54451b3638465243)>\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":179,"value":"## About the Datasets","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":175,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":96,"value":"Inputs.table(aiddata)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"googleSheetCsvUrl = 'https://docs.google.com/spreadsheets/d/1YiuHdfZv_JZ-igOemKJMRaU8dkucfmHxOP6Od3FraW8/gviz/tq?tqx=out:csv'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"aiddata = {\n const data = await d3.csv(googleSheetCsvUrl, row => ({\n yearDate: d3.timeParse('%Y')(row.year),\n yearInt: +row.year,\n donor: row.donor,\n recipient: row.recipient,\n amount: +row.commitment_amount_usd_constant,\n purpose: row.coalesced_purpose_name,\n }));\n \n data.columns = Object.keys(data[0]);\n \n return data;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"### Country GeoData\n\nNext we load GeoJSON data for countries. This file is derived from data from Natural Earth.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":37,"value":"geoJSON = FileAttachment(\"countries-50m.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":57,"value":"### Remember\n\nThe questions above are a very useful tool for you to verify whether you are producing a good solution or not. As you go about solving this exercise you can use the questions above as an evaluation tool in two main ways:\n\n1. Verify that you can indeed answer the questions with your visualization. If you can’t fully answer the questions, it means your solution has some problems.\n2. Compare multiple solutions to the same problem and ask yourself: “which one makes it easier for me to answer these questions?”, where easier may mean, more accurately, with less effort or faster.\n\nFurthermore, you should feel free to process and transform the data any way you deem relevant and use any tool you prefer for data processing. Data transformation does not necessarily have to be in JavaScript nor within Observable. It’s ok to pre-process the data and then load it in Observable if you prefer.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":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","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":218,"value":"{\n const dataCountries = new Set();\n aiddata.forEach(d => {\n if (d.donor) dataCountries.add(d.donor);\n if (d.recipient) dataCountries.add(d.recipient);\n });\n \n const geoCountries = new Set(\n geoJSON.features.map(f => f.properties.SOVEREIGNT || f.properties.NAME)\n );\n \n const unmatched = Array.from(dataCountries).filter(c => !geoCountries.has(c));\n \n return {\n dataCountries: Array.from(dataCountries).sort(),\n geoCountries: Array.from(geoCountries).sort(),\n unmatchedCount: unmatched.length,\n unmatched: unmatched.sort()\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"countryNameMap = new Map([\n [\"Czech Republic\", \"Czechia\"],\n [\"Korea\", \"South Korea\"],\n [\"Slovak Republic\", \"Slovakia\"],\n [\"United States\", \"United States of America\"]\n])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"standardizeCountryName = function(name) {\n return countryNameMap.get(name) || name;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"## Visualization 1","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":203,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":215,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"$37","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":206,"value":"## Visualization 2","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":208,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"$39","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":210,"value":"## Visualization 3","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":225,"value":"$3a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"$3b","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W3c","stdlib":"1"}} 30:"$2f:body"