34:["$","title",null,{"children":"Mini-Project 2: Temporal Data Visualization (Due Nov. 12th) | Aman Mallik | Observable"}] 3c:Ta99,

[NOTE]

Please make sure to Read ALL instructions carefully for each part of this assignment!

1. Please **fork this notebook** for this mini-project. Ensure that the notebook is made either _public_ or _unlisted_ in the settings. 2. Complete each question to the best of your ability, clearly marking which visualization and/or written answer corresponds to which question asked. 3. Your coded solutions **must use D3**. Other visualization libraries (.e.g Vega-Lite) or other code languages (e.g. Python) are not allowed. - You are allowed to use functions and modules created by other creators. For example, you can use Mike Bostock's Color Legend notebook to create your legends. 4. You are free to modify any datasets mentioned in this project, or introduce new datasets if it helps you with any explanations or visualizations. For datasets originating from this dataset, you are free to modify them in any way as long as 1) the preprocessing is performed here in JavaScript, or 2) you preprocessed the dataset elsewhere (e.g. a Python notebook or Google Colab notebook via Python). - If you modified the dataset elsewhere, **please make sure to explicitly mention in your write-up where and how to access the code; preprocessing the dataset without a way for us to verify will lead to penalties on your score**. - If you are introducing a new dataset from elsewhere, **please make sure to explicitly mention how to access the dataset**. 5. Please adhere to our AI policy for the class, which is provided on our course syllabus: > _... you can use generative AI tools to do the assignments in this class. If you use an AI to guide you in completing an assignment, you must **disclose which parts were generated by the AI**. Remember that you are responsible for any errors or inaccuracies in AI-generated content, and you must be able to explain all submitted work._ 6. Submit the URL of this notebook on Brightspace by the listed due date. ### Submission Details This assignment is due **Nov. 12th @ 11:59pm**. This submission expects a URL to your notebook that is either public or unlisted. Please be aware that we will grade notebooks based on the version of the notebook we receive at the submission deadline. This means that if you decide to modify your notebooks after the deadline, your changes may not be considered while grading. This policy also applies to late submissions as well.3d:Tb68,Your goal is to create **3 independent visualizations of the same datasets**, each one with the intent of answering the questions stated below. For each numbered question, you should be able to 1) create a data visualization that answers **all** of the questions specified, 2) provide a written analysis that extrapolates from your visualization and answers **all** of the questions specified, and 3) provide a written description of your thought process and why you think your solution is *appropriate* and *effective*. These are the 3 visualizations you should create: - **Visualization #1 [25pts]:** 1. How does the amount donated vs. amount received change over time for each country? 2. Are there countries that mostly send or mostly receive and countries that have a similar amount of donations they receive and send? 3. 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? 4. Are there countries in which you can find a sudden increase ("peak") or a sudden decrease ("valley")? - **Visualization #2 [25pts]:** 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 [25pts]:** 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.

3e:T450,Your answers to each question are graded on the following qualities, with each question totaling up to **25 points**: - **[10pts]**: Does the visualization answer the questions posed in the exercise? - **[10pts]**: Does the written answer & discussion the questions posed in the exercise? - **[5pts]**: Is the visual representation clear? Does it have good aesthetics? If needed, you can review this notebook on clarity for reference. The questions above are a very useful tool for you to verify whether you are producing a good solution or not. As you go about solving this exercise you can use the questions above as an evaluation tool in two main ways: 1. 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. 2. 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.3f:T41e,const yearly = (() => { const rows = aiddata .map(d => ({ year: +d.year, donor: d.donor, recipient: d.recipient, amount: +d.commitment_amount_usd_constant })) .filter(d => Number.isFinite(d.year) && Number.isFinite(d.amount) && d.donor !== "NA" && d.recipient !== "NA" && d.donor !== d.recipient); const donated = d3.rollup(rows, v => d3.sum(v, d => d.amount), d => d.donor, d => d.year); const received = d3.rollup(rows, v => d3.sum(v, d => d.amount), d => d.recipient, d => d.year); const countries = Array.from(new Set([...donated.keys(), ...received.keys()])); const yearRange = d3.range(d3.min(rows, d => d.year), d3.max(rows, d => d.year) + 1); return countries.flatMap(country => yearRange.map(year => { const don = donated.get(country)?.get(year) ?? 0; const rec = received.get(country)?.get(year) ?? 0; return { country, year, donated: don, received: rec, net: don - rec, ratio: don + rec > 0 ? (don - rec) / (don + rec) : null }; })); })();40:T1456,const heat_rowH = 12; const heat_margin = {top: 50, right: 110, bottom: 20, left: 110}; const heat_width = 960; const heat_innerWidth = heat_width - heat_margin.left - heat_margin.right; const heat_innerHeight = totals.length * heat_rowH; const heat_height = heat_innerHeight + heat_margin.top + heat_margin.bottom; const heat_container = d3.create("svg") .attr("width", heat_width) .attr("height", heat_height); const heat_chart = heat_container.append("g") .attr("transform", `translate(${heat_margin.left}, ${heat_margin.top})`); const heat_x_scale = d3.scaleBand() .domain(years) .range([0, heat_innerWidth]) .paddingInner(0.04); const heat_y_scale = d3.scaleBand() .domain(totals.map(d => d.country)) .range([0, heat_innerHeight]) .paddingInner(0.08); const heat_hatch = heat_container.append("defs").append("pattern") .attr("id", "heat-hatch") .attr("width", 5) .attr("height", 5) .attr("patternUnits", "userSpaceOnUse") .attr("patternTransform", "rotate(45)"); heat_hatch.append("rect") .attr("width", 5) .attr("height", 5) .attr("fill", "#fff"); heat_hatch.append("line") .attr("x1", 0).attr("y1", 0).attr("x2", 0).attr("y2", 5) .attr("stroke", "#b5b5b5") .attr("stroke-width", 1.6); const heat_missing = "url(#heat-hatch)"; const heat_maxNet = d3.max(yearly, d => Math.abs(d.net)); const heat_color_scale = d3.scaleDivergingSymlog( d3.interpolateRgbBasis(["#b35806", "#f1a340", "#f7f7f7", "#67a9cf", "#2166ac"])) .constant(1e7) .domain([-heat_maxNet, 0, heat_maxNet]); heat_chart.append("rect") .attr("width", heat_innerWidth) .attr("height", heat_innerHeight) .attr("fill", "#fff"); heat_chart.selectAll("rect.cell") .data(yearly) .join("rect") .attr("class", "cell") .attr("x", d => heat_x_scale(d.year)) .attr("y", d => heat_y_scale(d.country)) .attr("width", heat_x_scale.bandwidth()) .attr("height", heat_y_scale.bandwidth()) .attr("fill", d => d.ratio === null ? heat_missing : heat_color_scale(d.net)) .attr("stroke", "#00000") .attr("stroke-width", 0.4) .append("title") .text(d => d.ratio === null ? `${d.country}, ${d.year}\nNo flows` : `${d.country}, ${d.year}\nDonated: ${customFormat(d.donated)}\nReceived: ${customFormat(d.received)}\nNet: ${signedFormat(d.net)}`); heat_chart.append("g") .call(d3.axisLeft(heat_y_scale).tickSize(0)) .call(g => g.select(".domain").remove()) .attr("font-family", "inherit") .attr("font-size", 9); heat_chart.append("g") .call(d3.axisTop(heat_x_scale).tickValues(years.filter(y => y % 5 === 0)).tickSize(3)) .call(g => g.select(".domain").remove()) .attr("font-family", "inherit"); heat_container.append("text") .attr("x", heat_margin.left) .attr("y", 18) .attr("font-size", 16) .attr("font-weight", "bold") .text("Net aid flow by country and year"); heat_container.append("text") .attr("x", heat_margin.left) .attr("y", 34) .attr("font-size", 11) .attr("fill", "#555") .text("Rows sorted from mostly donor to mostly recipient. Hatched = no flows that year. Hover a cell for amounts."); const heat_legendH = 220, heat_legendW = 14; const heat_legend_scale = d3.scaleSymlog() .constant(1e7) .domain([-heat_maxNet, heat_maxNet]) .range([heat_legendH, 0]); const heat_grad = heat_container.append("defs").append("linearGradient") .attr("id", "net-gradient-heat") .attr("x1", 0).attr("y1", 0).attr("x2", 0).attr("y2", 1); d3.range(0, 41).forEach(i => { const t = i / 40; heat_grad.append("stop") .attr("offset", `${t * 100}%`) .attr("stop-color", heat_color_scale(heat_legend_scale.invert(t * heat_legendH))); }); const heat_netTicks = [-1e10, -1e9, -1e8, -1e7, 0, 1e7, 1e8, 1e9, 1e10] .filter(v => Math.abs(v) <= heat_maxNet); const heat_legend = heat_chart.append("g") .attr("transform", `translate(${heat_innerWidth + 18}, 20)`); heat_legend.append("text") .attr("y", -22) .attr("font-size", 10) .attr("font-weight", "bold") .text("Net in year"); heat_legend.append("text") .attr("y", -10) .attr("font-size", 9) .text("(donated − received)"); heat_legend.append("rect") .attr("width", heat_legendW) .attr("height", heat_legendH) .attr("fill", "url(#net-gradient-heat)") .attr("stroke", "#999") .attr("stroke-width", 0.5); heat_legend.append("g") .attr("transform", `translate(${heat_legendW}, 0)`) .call(d3.axisRight(heat_legend_scale).tickValues(heat_netTicks).tickFormat(signedFormat)) .call(g => g.select(".domain").remove()) .attr("font-family", "inherit"); heat_legend.append("text").attr("y", heat_legendH + 16).attr("font-size", 9).attr("fill", "#2166ac").text("↑ net donor"); heat_legend.append("text").attr("y", heat_legendH + 28).attr("font-size", 9).attr("fill", "#b35806").text("↓ net recipient"); heat_legend.append("text").attr("y", heat_legendH + 40).attr("font-size", 9).attr("fill", "#777").text("(log scale)"); heat_legend.append("rect") .attr("y", heat_legendH + 52) .attr("width", 12) .attr("height", 12) .attr("fill", heat_missing) .attr("stroke", "#999") .attr("stroke-width", 0.5); heat_legend.append("text") .attr("x", 18) .attr("y", heat_legendH + 62) .attr("font-size", 9) .text("no flows");41:T8e1,# Visual Analysis for each Question ### Q1. How does the amount donated vs. amount received change over time for each country? Since the countries are arranged in descending order of normalized net ratio (donated-received)/(donated+received), the top of the chart highlights steady, long-term donors, while the bottom highlights steady recipients. In the middle, we can see countries transitioning over time, some moving from giving aid to receiving it, and others turning from recipients into active donors. Most countries maintain the stream of being consistent donators or receivers, although the exact amounts are difficult to analyze in this visualization, and will be better shown in the next one. ### Q2. Are there countries that mostly send or mostly receive and countries that have a similar amount of donations they receive and send? Countries like the Netherlands, Germany, Switzerland, and the United States and other western European countries mostly send aid. South-East Asian, South Asian, certain Middle Eastern and African countries like India, Brazil, Chile, Cyprus, South Africa and South Korea received aid for the most part. Certain countries like New Zealand, Liechtenstein, UAE, and Iceland (although it has limited data) generally receive as much as they send in aid for almost all the years. ### Q3. 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? S. Korea, Ireland and Spain started off as a net recipients of aid but ended up turning into a net donators. Czech Republic and Taiwan went from net recipient to neutral donators vs receivers. Kuwait started as a net donator, but started turning into a recipient for the most part around 1991. ### Q4. Are there countries in which you can find a sudden increase (“peak”) or a sudden decrease (“valley”)? Sudden peaks are not visible in this visualization. # Overall Design This graph is well suited to see trends across multiple countries as once, but lacks the precise data for each country. At a glance, we can see the performance of multiple countries and how their pattern of donating or receiving evolved without overwhelming the viewer with tons of information.42:T27bb,const geo_width = 960, geo_mapH = 520, geo_chartH = 220; const geo_margin = {top: 56, right: 30, bottom: 34, left: 60}; const geo_innerW = geo_width - geo_margin.left - geo_margin.right; const geo_innerH = geo_chartH - geo_margin.top - geo_margin.bottom; const geo_blue = "#2166ac", geo_orange = "#b35806"; const geo_container = d3.create("div") .style("font-family", "inherit"); const geo_features = geo_topojson.feature(geo_world, geo_world.objects.countries).features .filter(d => d.properties.name !== "Antarctica"); const geo_alias = { "United States": ["United States of America"], "Korea": ["South Korea"], "Slovak Republic": ["Slovakia"], "Czech Republic": ["Czechia"] }; const geo_findMatch = mapName => totals.find(t => t.country === mapName || geo_alias[t.country]?.includes(mapName)); geo_features.forEach(d => { d.aid = geo_findMatch(d.properties.name)?.country ?? null; }); const geo_microstates = [ {country: "Monaco", coords: [7.4246, 43.7384]}, {country: "Liechtenstein", coords: [9.5554, 47.1660]} ]; const geo_offMap = totals.map(t => t.country) .filter(n => !geo_features.some(d => d.aid === n) && !geo_microstates.some(m => m.country === n)); const geo_controls = geo_container.append("div") .style("margin", "0 0 6px 4px") .style("font-size", "13px"); geo_controls.append("span").text("Country: "); const geo_select = geo_controls.append("select"); geo_select.selectAll("option") .data(totals.slice().sort((a, b) => d3.ascending(a.country, b.country))) .join("option") .attr("value", d => d.country) .text(d => d.country + (geo_offMap.includes(d.country) ? " (not drawn on map)" : "")); const geo_map = geo_container.append("svg") .attr("width", geo_width) .attr("height", geo_mapH) .style("max-width", "100%") .style("height", "auto"); geo_map.append("text") .attr("x", geo_width / 2) .attr("y", 26) .attr("text-anchor", "middle") .attr("font-size", "18px") .attr("font-weight", "bold") .text("Overall net aid (donated − received), all years. Click a country."); const geo_projection = d3.geoNaturalEarth1() .fitExtent([[10, 40], [geo_width - 10, geo_mapH - 50]], {type: "FeatureCollection", features: geo_features}); const geo_path = d3.geoPath(geo_projection); const geo_nodata = "#e5e5e5"; const geo_netOf = country => totals.find(t => t.country === country)?.net; const geo_color_scale = d3.scaleDivergingSymlog( d3.interpolateRgbBasis(["#b35806", "#f1a340", "#fff7bc", "#67a9cf", "#2166ac"])) .constant(1e8) .domain([-d3.max(totals, d => Math.abs(d.net)), 0, d3.max(totals, d => Math.abs(d.net))]); geo_map.append("path") .datum({type: "Sphere"}) .attr("fill", "#90D5FF") .attr("stroke", "#d0d7de") .attr("stroke-width", 1) .attr("d", geo_path); const geo_paths = geo_map.append("g") .selectAll("path") .data(geo_features) .join("path") .attr("fill", d => d.aid ? geo_color_scale(geo_netOf(d.aid)) : geo_nodata) .attr("stroke", "#000000") .attr("stroke-width", 0.5) .attr("d", geo_path) .style("cursor", d => d.aid ? "pointer" : "default") .on("click", (event, d) => { if (d.aid) geo_pick(d.aid); }); geo_paths.append("title") .text(d => { const net = d.aid ? geo_netOf(d.aid) : undefined; return `${d.properties.name}\nNet Balance: ${net !== undefined ? signedFormat(net) : "No Data"}`; }); const geo_circles = geo_map.append("g") .selectAll("circle") .data(geo_microstates) .join("circle") .attr("cx", d => geo_projection(d.coords)[0]) .attr("cy", d => geo_projection(d.coords)[1]) .attr("r", 3) .attr("fill", d => geo_netOf(d.country) !== undefined ? geo_color_scale(geo_netOf(d.country)) : geo_nodata) .attr("stroke", "#000") .attr("stroke-width", 1) .style("cursor", "pointer") .on("click", (event, d) => geo_pick(d.country)); geo_circles.append("title") .text(d => `${d.country} (Microstate)\nNet Balance: ${geo_netOf(d.country) !== undefined ? signedFormat(geo_netOf(d.country)) : "No Data"}`); const geo_legendGroup = geo_map.append("g") .attr("transform", `translate(50, ${geo_mapH - 35})`); const geo_legendCategories = [ {label: "Net Donor (Donated > Received)", color: geo_color_scale(1e12)}, {label: "Balanced / Neutral", color: geo_color_scale(0)}, {label: "Net Recipient (Received > Donated)", color: geo_color_scale(-1e12)}, {label: "No Data / Unmapped", color: geo_nodata} ]; const geo_legendItem = geo_legendGroup.selectAll("g") .data(geo_legendCategories) .join("g") .attr("transform", (d, i) => `translate(${i * 220}, -10)`); geo_legendItem.append("rect") .attr("width", 15) .attr("height", 15) .attr("fill", d => d.color) .attr("stroke", "#333") .attr("stroke-width", 0.5); geo_legendItem.append("text") .attr("x", 20) .attr("y", 12) .attr("font-size", "11px") .attr("fill", "#333") .text(d => d.label); const geo_x_scale = d3.scaleLinear() .domain(d3.extent(years)) .range([0, geo_innerW]); function geo_createSingleChart(seriesConfig) { const svg = geo_container.append("svg") .attr("width", geo_width) .attr("height", geo_chartH); const chart = svg.append("g") .attr("transform", `translate(${geo_margin.left}, ${geo_margin.top})`); return { svg, chart, seriesConfig }; } const geo_donatedChartInfo = geo_createSingleChart({key: "donated", color: geo_blue, label: "Donated"}); const geo_receivedChartInfo = geo_createSingleChart({key: "received", color: geo_orange, label: "Received"}); function geo_drawSingle(info, country, rows) { const { svg, chart, seriesConfig } = info; const { key, color, label } = seriesConfig; const y_scale = d3.scaleLinear() .domain([0, d3.max(rows, d => d[key]) || 1]) .range([geo_innerH, 0]) .nice(); chart.selectAll("*").remove(); svg.selectAll("text.geo-title, text.geo-readout").remove(); chart.append("rect") .attr("width", geo_innerW).attr("height", geo_innerH).attr("fill", "#FAFAFA"); chart.append("g") .call(d3.axisLeft(y_scale).ticks(5).tickSize(-geo_innerW).tickFormat(customFormat)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").attr("stroke", "#e4e4e4")) .attr("font-family", "inherit"); chart.append("g") .attr("transform", `translate(0, ${geo_innerH})`) .call(d3.axisBottom(geo_x_scale).tickValues(years.filter(y => y % 5 === 0)).tickFormat(d3.format("d"))) .attr("font-family", "inherit"); svg.append("text").attr("class", "geo-title") .attr("x", 4).attr("y", 22) .attr("font-size", 16).attr("font-weight", "bold") .attr("fill", color) .text(`${country}: ${label}`); svg.append("text").attr("class", "geo-title") .attr("x", geo_width - geo_margin.right).attr("y", 22) .attr("text-anchor", "end") .attr("font-size", 10).attr("fill", "#555") .text("▲ peak ▼ valley (vs. prior 3-yr avg)"); chart.append("path") .attr("d", d3.area().x(d => geo_x_scale(d.year)).y0(y_scale(0)).y1(d => y_scale(d[key]))(rows)) .attr("fill", color).attr("fill-opacity", 0.1); chart.append("path") .attr("d", d3.line().x(d => geo_x_scale(d.year)).y(d => y_scale(d[key]))(rows)) .attr("fill", "none").attr("stroke", color).attr("stroke-width", 1.8); const found = extremes(rows.map(d => d[key]), years); found.peaks.forEach(p => { chart.append("path") .attr("d", d3.symbol(d3.symbolTriangle, 70)()) .attr("transform", `translate(${geo_x_scale(p.year)}, ${y_scale(p.v) - 9})`) .attr("fill", color) .append("title").text(`${country}: ${label} ${customFormat(p.prior)} → ${customFormat(p.v)} in ${p.year}`); chart.append("text") .attr("x", geo_x_scale(p.year)).attr("y", y_scale(p.v) - 18) .attr("text-anchor", "middle").attr("font-size", 10).attr("fill", color) .text(p.year); }); found.valleys.forEach(p => { chart.append("path") .attr("d", d3.symbol(d3.symbolTriangle, 70)()) .attr("transform", `translate(${geo_x_scale(p.year)}, ${y_scale(p.v) - 9}) rotate(180)`) .attr("fill", color) .append("title").text(`${country}: ${label} ${customFormat(p.prior)} → ${customFormat(p.v)} in ${p.year}`); chart.append("text") .attr("x", geo_x_scale(p.year)).attr("y", y_scale(p.v) - 18) .attr("text-anchor", "middle").attr("font-size", 10).attr("fill", color) .text(p.year); }); const guide = chart.append("line") .attr("y1", 0).attr("y2", geo_innerH) .attr("stroke", "#888").attr("stroke-dasharray", "3,3").style("display", "none"); const dot = chart.append("circle") .attr("r", 4).attr("fill", color).attr("stroke", "#fff").style("display", "none"); const readout = svg.append("text").attr("class", "geo-readout") .attr("x", geo_width - geo_margin.right).attr("y", 40) .attr("text-anchor", "end").attr("font-size", 12).attr("fill", "#222"); chart.append("rect") .attr("width", geo_innerW).attr("height", geo_innerH) .attr("fill", "none").attr("pointer-events", "all") .on("mousemove", event => { const [mx] = d3.pointer(event); const d = rows[d3.bisector(r => r.year).center(rows, Math.round(geo_x_scale.invert(mx)))]; guide.style("display", null).attr("x1", geo_x_scale(d.year)).attr("x2", geo_x_scale(d.year)); dot.style("display", null).attr("cx", geo_x_scale(d.year)).attr("cy", y_scale(d[key])); readout.text(`${d.year}: ${label} ${customFormat(d[key])}`); }) .on("mouseleave", () => { guide.style("display", "none"); dot.style("display", "none"); readout.text(""); }); } function geo_draw(country) { const rows = yearly.filter(d => d.country === country); geo_drawSingle(geo_donatedChartInfo, country, rows); geo_drawSingle(geo_receivedChartInfo, country, rows); } function geo_pick(country) { geo_select.property("value", country); geo_paths .attr("stroke-width", d => d.aid === country ? 2.2 : 0.5) .filter(d => d.aid === country).raise(); geo_circles .attr("stroke-width", d => d.country === country ? 3 : 1); geo_draw(country); } geo_select.on("change", event => geo_pick(event.target.value)); geo_pick(d3.greatest(totals, d => d.total).country);43:Ta67,# Visual Analysis for each Question ### Q1. How does the amount donated vs. amount received change over time for each country? Since the map and accompanying time-series charts let us view each country individually, we can observe the distinct trends of specific nations over time. Since we can't describe every country, let's look at the trends for America, Brazil, and Kuwait: * **America:** America consistently donates aid, but we can see three periods where donations were higher than average: 1979–1983, 1991–1995, and 1999–2003. America also abruptly requested/received aid in 2007 (\$104 million). * **Brazil:** Brazil received aid consistently too, but it had a peak in received aid around 1994 (\$2.8 billion). Unlike America, Brazil had an abrupt year of giving donations around 2010 (\$914k). * **Kuwait:** Kuwait had two massive spikes in donations around 1976 (\$206 million) and 1981 (almost \$300 million). However, around 1992, it received a massive amount of aid (\$7.4 billion), possibly following its liberation after the Gulf War. ### Q2. Are there countries that mostly send or mostly receive and countries that have a similar amount of donations they receive and send? & Q3. 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? Similar to the previous visualization, we can notice the trends and conclude the same countries either donate or receive across the year, or flip their status, however the first visualization makes it much more easier to see via flipping colors. ### Q4. Are there countries in which you can find a sudden increase (“peak”) or a sudden decrease (“valley”)? Yes. Unlike the heatmap, these individual time-series charts explicitly mark major inflection points ( ▲ peak and ▼ valley compared to prior 3-year averages). These peaks are mentioned in Q1. # Design Decisions I used the Natural Earth projection (d3.geoNaturalEarth1) because it keeps world landmass shapes and sizes balanced for a global view. For tiny microstates like Monaco and Liechtenstein that are too small to render as standard map paths, I used interactive coordinate circles so they aren't left out. I applied the same diverging color scale as the heatmap (blue for net donors, orange for net recipients) to keep the visual language consistent across the dashboard. Finally, I added click and hover features so you can view exact net balances and instantly update the companion time-series charts below, while having missing data as hashed countries to avoid confusing them with neural toned balanced countries. 44:T4c7,const purp_excluded = ["NA", "UNSPECIFIED"]; const purp_rows = aiddata .map(d => ({ year: +d.year, purpose: (d.coalesced_purpose_name ?? "").replace(/\s+/g, " ").trim(), amount: +d.commitment_amount_usd_constant })) .filter(d => Number.isFinite(d.year) && Number.isFinite(d.amount) && d.amount > 0 && d.purpose && !purp_excluded.includes(d.purpose.toUpperCase()) && !/^sectors?\s+not\s+specified/i.test(d.purpose)); const purp_totals = d3.rollups(purp_rows, v => d3.sum(v, d => d.amount), d => d.purpose) .sort((a, b) => d3.descending(a[1], b[1])) .slice(0, 10) .map(([purpose, total]) => ({purpose, total})); const purp_names = purp_totals.map(d => d.purpose); const purp_years = d3.range(d3.min(purp_rows, d => d.year), d3.max(purp_rows, d => d.year) + 1); const purp_byPY = d3.rollup( purp_rows.filter(d => purp_names.includes(d.purpose)), v => d3.sum(v, d => d.amount), d => d.purpose, d => d.year); const purp_sm = new Map(purp_names.map(n => [ n, purp_years.map(y => purp_byPY.get(n)?.get(y) ?? 0) .map((_, i, arr) => d3.mean(arr.slice(Math.max(0, i - 2), i + 3))) ])); const purp_peak = new Map(purp_names.map(n => [n, purp_years[d3.maxIndex(purp_sm.get(n))]]));45:T1df9,const purp_width = 960, purp_chartH = 400, purp_legendH = 120; const purp_margin = {top: 56, right: 30, bottom: 34, left: 60}; const purp_innerW = purp_width - purp_margin.left - purp_margin.right; const purp_innerH = purp_chartH - purp_margin.top - purp_margin.bottom; const purp_color = d3.scaleOrdinal().domain(purp_names).range(d3.schemeTableau10); const purp_active = new Set(purp_names.slice(0, 2)); let purp_hover = null; let purp_cache = []; const purp_container = d3.create("div").style("font-family", "inherit"); const purp_controls = purp_container.append("div").style("margin", "0 0 6px 4px").style("font-size", "13px"); purp_controls.append("span").text("Purposes: "); const purp_allBtn = purp_controls.append("button").text("Select all"); const purp_noneBtn = purp_controls.append("button").text("Clear all").style("margin-left", "6px"); const purp_svg = purp_container.append("svg") .attr("width", purp_width) .attr("height", purp_chartH + purp_legendH) .style("max-width", "100%").style("height", "auto"); purp_svg.append("text").attr("x", 4).attr("y", 22).attr("font-size", 16).attr("font-weight", "bold") .text("Top 10 aid purposes over time (5-year average, constant USD)"); purp_svg.append("text").attr("x", purp_width - purp_margin.right).attr("y", 22) .attr("text-anchor", "end").attr("font-size", 10).attr("fill", "#555") .text("▲ peak year of each purpose"); const purp_readout = purp_svg.append("text").attr("x", purp_width - purp_margin.right).attr("y", 40) .attr("text-anchor", "end").attr("font-size", 12).attr("fill", "#222"); const purp_chart = purp_svg.append("g").attr("transform", `translate(${purp_margin.left}, ${purp_margin.top})`); const purp_x_scale = d3.scaleLinear().domain(d3.extent(purp_years)).range([0, purp_innerW]); const purp_y_scale = d3.scaleLinear().range([purp_innerH, 0]); purp_chart.append("rect").attr("width", purp_innerW).attr("height", purp_innerH).attr("fill", "#FAFAFA"); const purp_yAxisG = purp_chart.append("g"); purp_chart.append("g") .attr("transform", `translate(0, ${purp_innerH})`) .call(d3.axisBottom(purp_x_scale).tickValues(purp_years.filter(y => y % 5 === 0)).tickFormat(d3.format("d"))); const purp_dataLayer = purp_chart.append("g"); const purp_peakLayer = purp_chart.append("g"); const purp_emptyMsg = purp_chart.append("text") .attr("x", purp_innerW / 2).attr("y", purp_innerH / 2) .attr("text-anchor", "middle").attr("font-size", 14).attr("fill", "#888") .text("Select at least one purpose"); const purp_guide = purp_chart.append("line") .attr("y1", 0).attr("y2", purp_innerH) .attr("stroke", "#888").attr("stroke-dasharray", "3,3").style("display", "none"); const purp_dots = purp_chart.append("g"); const purp_tip = purp_chart.append("g").style("display", "none"); const purp_area = d3.area().x((d, i) => purp_x_scale(purp_years[i])).y0(purp_innerH).y1(d => purp_y_scale(d)); const purp_line = d3.line().x((d, i) => purp_x_scale(purp_years[i])).y(d => purp_y_scale(d)); function purp_update() { const series = purp_names.filter(n => purp_active.has(n)).map(n => ({name: n, sm: purp_sm.get(n)})); purp_cache = series; purp_legendBoxes.attr("fill", d => purp_active.has(d) ? purp_color(d) : "#fff"); purp_legendTexts.attr("opacity", d => purp_active.has(d) ? 1 : 0.4); purp_emptyMsg.style("display", series.length ? "none" : null); purp_y_scale.domain([0, series.length ? d3.max(series, s => d3.max(s.sm)) : 1]).nice(); purp_yAxisG .call(d3.axisLeft(purp_y_scale).ticks(5).tickSize(-purp_innerW).tickFormat(customFormat)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").attr("stroke", "#e4e4e4")); purp_dataLayer.selectAll("*").remove(); purp_peakLayer.selectAll("*").remove(); series.forEach(s => { const col = purp_color(s.name); const dim = purp_hover && purp_hover !== s.name; purp_dataLayer.append("path") .attr("d", purp_area(s.sm)) .attr("fill", col).attr("fill-opacity", dim ? 0.02 : 0.1); purp_dataLayer.append("path") .attr("d", purp_line(s.sm)) .attr("fill", "none").attr("stroke", col) .attr("stroke-width", purp_hover === s.name ? 3 : 1.8) .attr("stroke-opacity", dim ? 0.2 : 1); const pk = d3.maxIndex(s.sm); purp_peakLayer.append("path") .attr("d", d3.symbol(d3.symbolTriangle, 70)()) .attr("transform", `translate(${purp_x_scale(purp_years[pk])}, ${purp_y_scale(s.sm[pk]) - 9})`) .attr("fill", col).attr("opacity", dim ? 0.2 : 1); purp_peakLayer.append("text") .attr("x", purp_x_scale(purp_years[pk])).attr("y", purp_y_scale(s.sm[pk]) - 18) .attr("text-anchor", "middle").attr("font-size", 10).attr("fill", col) .attr("opacity", dim ? 0.2 : 1) .text(purp_years[pk]); }); } const purp_legendGroup = purp_svg.append("g").attr("transform", `translate(${purp_margin.left}, ${purp_chartH + 4})`); const purp_legendItems = purp_legendGroup.selectAll("g") .data(purp_names).join("g") .attr("transform", (d, i) => `translate(${(i % 2) * 450}, ${Math.floor(i / 2) * 22})`) .style("cursor", "pointer") .on("click", (e, d) => { purp_active.has(d) ? purp_active.delete(d) : purp_active.add(d); purp_update(); }) .on("mouseenter", (e, d) => { purp_hover = d; purp_update(); }) .on("mouseleave", () => { purp_hover = null; purp_update(); }); const purp_legendBoxes = purp_legendItems.append("rect") .attr("width", 15).attr("height", 15).attr("stroke", d => purp_color(d)).attr("stroke-width", 2); const purp_legendTexts = purp_legendItems.append("text") .attr("x", 20).attr("y", 12).attr("font-size", "11px").attr("fill", "#333") .text(d => d); purp_chart.append("rect") .attr("width", purp_innerW).attr("height", purp_innerH) .attr("fill", "none").attr("pointer-events", "all") .on("mousemove", event => { if (!purp_cache.length) return; const [mx] = d3.pointer(event); const yr = Math.max(purp_years[0], Math.min(purp_years.at(-1), Math.round(purp_x_scale.invert(mx)))); const k = purp_years.indexOf(yr); const rows = purp_cache.map(s => ({name: s.name, v: s.sm[k]})).sort((a, b) => d3.descending(a.v, b.v)); purp_guide.style("display", null).attr("x1", purp_x_scale(yr)).attr("x2", purp_x_scale(yr)); purp_dots.selectAll("circle").data(rows, d => d.name).join("circle") .attr("r", 4).attr("fill", d => purp_color(d.name)).attr("stroke", "#fff") .attr("cx", purp_x_scale(yr)).attr("cy", d => purp_y_scale(d.v)); purp_readout.text(`${yr}: ${customFormat(d3.sum(rows, d => d.v))}`); const tx = purp_x_scale(yr) > purp_innerW / 2 ? purp_x_scale(yr) - 220 : purp_x_scale(yr) + 15; purp_tip.style("display", null).attr("transform", `translate(${tx}, 10)`).selectAll("*").remove(); purp_tip.append("rect").attr("width", 205).attr("height", 16 + rows.length * 16).attr("rx", 3) .attr("fill", "#fff").attr("fill-opacity", 0.9).attr("stroke", "#ccc"); rows.forEach((r, i) => { purp_tip.append("rect").attr("x", 8).attr("y", 8 + i * 16).attr("width", 10).attr("height", 10).attr("fill", purp_color(r.name)); purp_tip.append("text").attr("x", 24).attr("y", 17 + i * 16).attr("font-size", 11).attr("fill", "#333") .text(`${r.name.slice(0, 22)}: ${customFormat(r.v)}`); }); }) .on("mouseleave", () => { purp_guide.style("display", "none"); purp_dots.selectAll("circle").remove(); purp_tip.style("display", "none"); purp_readout.text(""); }); purp_allBtn.on("click", () => { purp_names.forEach(n => purp_active.add(n)); purp_update(); }); purp_noneBtn.on("click", () => { purp_active.clear(); purp_update(); }); purp_update();46:T8a7,# Visual Analysis The top 10 purposes of sending aid are: 1. Air transport 2. Rail transport 3. Industrial development 4. Power generation/non-renewable sources 5. Rescheduling and refinancing 6. Import support (capital goods) 7. Social/welfare services 8. Telecommunications 9. Power generation/renewable sources 10. Mineral/Metal prospection and exploration Looking at the chart over time (smoothed with a 5-year rolling average), we can clearly see distinct eras where certain aid purposes dominated before shifting to others. I have a few comparisons below: * **Air Transport vs. Rail Transport:** From the late 1970s through the early 2000s, **Air transport** received massive funding, peaking at over $3 billion around 2000 before dropping off around 2001 (no comments). Right as air transport declined, Rail transport took over, steadily climbing from the mid-2000s to peak at around $1.75 billion in 2012. * **Industrial Development & Non-Renewable Power:** Both of these sectors were prominent throughout the 1980s and 1990s. Industrial development peaked in 1992 (nearly $1.5 billion), while Power generation/non-renewable sources peaked shortly after in 1996 (around $1.1 billion). Both tapered off significantly after 2000. * **Rescheduling and refinancing** (peaking around $2.75 billion in 1991) and **Import support (capital goods)** (peaking around $1.55 billion in 1990) saw huge, concentrated spikes between 1988 and 1994, before dropping to nearly zero after 1995. Import support is contained entirely in the period when aid for Rescheduling and refinancing were trending. # Design Decisions I filtered out "UNSPECIFIED" and "NA" categories so the chart focuses exclusively on meaningful aid purposes. I used a 5-year rolling average to smooth out year-to-year noise, making it much easier to spot long-term shifts where one sector overtakes another over time. I added peak year markers for each purpose to instantly highlight historical highs, and included a clickable legend with toggle buttons so viewers can isolate specific categories without chart clutter. Finally, I paired a hover tooltip with a Tableau 10 categorical color scale to keep each aid purpose distinct and easy to read.47:T7c5,const rec_features = geo_topojson.feature(geo_world, geo_world.objects.countries).features .filter(d => d.properties.name !== "Antarctica"); const rec_alias = { "United States": ["United States of America"], "Korea": ["South Korea"], "Slovak Republic": ["Slovakia"], "Czech Republic": ["Czechia"] }; const rec_findMatch = mapName => totals.find(t => t.country === mapName || rec_alias[t.country]?.includes(mapName)); rec_features.forEach(d => { d.aid = rec_findMatch(d.properties.name)?.country ?? null; }); const rec_microstates = [ {country: "Monaco", coords: [7.4246, 43.7384]}, {country: "Liechtenstein", coords: [9.5554, 47.1660]} ]; const rec_recipients = new Set(totals.filter(t => t.received > 0).map(t => t.country)); const rec_offMap = Array.from(rec_recipients) .filter(n => !rec_features.some(d => d.aid === n) && !rec_microstates.some(m => m.country === n)); const rec_years = d3.range(d3.min(years), d3.max(years) + 1); const rec_grouped = d3.group(yearly.filter(d => d.received > 0), d => d.year); const rec_byPeriod = rec_years.map(year => { const vals = (rec_grouped.get(year) ?? []).map(d => ({country: d.country, amount: d.received})); const total = d3.sum(vals, d => d.amount); vals.forEach(d => { d.share = d.amount / total; }); return {year, label: `${year}`, vals, total, byCountry: new Map(vals.map(d => [d.country, d]))}; }); const rec_colors = ["#ffe6bf", "#fdd0a2", "#fdae6b", "#fd8d3c", "#e6550d", "#a63603"]; const rec_pool = { amount: rec_byPeriod.flatMap(p => p.vals.map(d => d.amount)).sort(d3.ascending), share: rec_byPeriod.flatMap(p => p.vals.map(d => d.share)).sort(d3.ascending) }; const rec_breaks = { amount: d3.range(1, 6).map(i => d3.quantile(rec_pool.amount, i / 6)), share: d3.range(1, 6).map(i => d3.quantile(rec_pool.share, i / 6)) }; const rec_scale = { amount: d3.scaleThreshold().domain(rec_breaks.amount).range(rec_colors), share: d3.scaleThreshold().domain(rec_breaks.share).range(rec_colors) };48:T2c0d,const rec_width = 960, rec_mapH = 520, rec_sliderH = 120; const rec_orange = "#b35806", rec_noAid = "#f2f2f2", rec_noData = "#e5e5e5"; const rec_state = {idx: 0, mode: "amount"}; const rec_fmt = { amount: d => "$" + customFormat(d), share: d => d3.format(d < 0.01 ? ".2%" : ".1%")(d) }; const rec_container = d3.create("div").style("font-family", "inherit"); const rec_controls = rec_container.append("div").style("margin", "0 0 6px 4px").style("font-size", "13px"); rec_controls.append("span").text("Color shows: "); const rec_select = rec_controls.append("select"); rec_select.selectAll("option") .data([ {v: "amount", t: "Aid received that year (same scale for all years)"}, {v: "share", t: "Share of all aid received that year (shows geographic shifts)"} ]) .join("option") .attr("value", d => d.v) .text(d => d.t); const rec_map = rec_container.append("svg").attr("width", rec_width).attr("height", rec_mapH) .style("max-width", "100%").style("height", "auto"); rec_map.append("defs").append("pattern") .attr("id", "rec-hatch").attr("width", 5).attr("height", 5) .attr("patternUnits", "userSpaceOnUse").attr("patternTransform", "rotate(45)") .append("line").attr("x1", 0).attr("y1", 0).attr("x2", 0).attr("y2", 5) .attr("stroke", "#555").attr("stroke-width", 1); const rec_title = rec_map.append("text").attr("x", rec_width / 2).attr("y", 26) .attr("text-anchor", "middle").attr("font-size", "18px").attr("font-weight", "bold"); const rec_projection = d3.geoNaturalEarth1() .fitExtent([[10, 40], [rec_width - 10, rec_mapH - 80]], {type: "FeatureCollection", features: rec_features}); const rec_path = d3.geoPath(rec_projection); rec_map.append("path").datum({type: "Sphere"}).attr("fill", "#90D5FF") .attr("stroke", "#d0d7de").attr("stroke-width", 1).attr("d", rec_path); const rec_paths = rec_map.append("g").selectAll("path") .data(rec_features).join("path") .attr("stroke", "#000").attr("stroke-width", 0.5).attr("d", rec_path) .on("mouseenter", e => d3.select(e.currentTarget).attr("stroke-width", 2)) .on("mouseleave", e => d3.select(e.currentTarget).attr("stroke-width", 0.5)); rec_paths.append("title"); const rec_hatchPaths = rec_map.append("g").attr("pointer-events", "none").selectAll("path") .data(rec_features).join("path").attr("fill", "url(#rec-hatch)").attr("d", rec_path); const rec_circles = rec_map.append("g").selectAll("circle") .data(rec_microstates).join("circle") .attr("cx", d => rec_projection(d.coords)[0]) .attr("cy", d => rec_projection(d.coords)[1]) .attr("r", 3).attr("stroke", "#000").attr("stroke-width", 1); rec_circles.append("title"); const rec_hatchCircles = rec_map.append("g").attr("pointer-events", "none").selectAll("circle") .data(rec_microstates).join("circle") .attr("cx", d => rec_projection(d.coords)[0]) .attr("cy", d => rec_projection(d.coords)[1]) .attr("r", 3).attr("fill", "url(#rec-hatch)"); const rec_legendGroup = rec_map.append("g").attr("transform", `translate(50, ${rec_mapH - 58})`); const rec_legendTitle = rec_legendGroup.append("text").attr("y", -6).attr("font-size", 11).attr("font-weight", "bold").attr("fill", "#333"); const rec_legendItem = rec_legendGroup.selectAll("g.cls").data(d3.range(6)).join("g") .attr("class", "cls").attr("transform", d => `translate(${d * 130}, 0)`); rec_legendItem.append("rect").attr("width", 15).attr("height", 15).attr("fill", d => rec_colors[d]).attr("stroke", "#333").attr("stroke-width", 0.5); const rec_legendLabel = rec_legendItem.append("text").attr("x", 20).attr("y", 12).attr("font-size", "11px").attr("fill", "#333"); const rec_legendExtra = rec_legendGroup.selectAll("g.extra").data([ {label: "No aid received this year", color: rec_noAid, hatch: false}, {label: "Never a recipient / no data", color: rec_noData, hatch: true} ]).join("g").attr("class", "extra").attr("transform", (d, i) => `translate(${i * 220}, 24)`); rec_legendExtra.append("rect").attr("width", 15).attr("height", 15).attr("fill", d => d.color).attr("stroke", "#333").attr("stroke-width", 0.5); rec_legendExtra.filter(d => d.hatch).append("rect").attr("width", 15).attr("height", 15).attr("fill", "url(#rec-hatch)").attr("stroke", "#333").attr("stroke-width", 0.5); rec_legendExtra.append("text").attr("x", 20).attr("y", 12).attr("font-size", "11px").attr("fill", "#333").text(d => d.label); const rec_slider = rec_container.append("svg").attr("width", rec_width).attr("height", rec_sliderH).style("max-width", "100%").style("height", "auto"); const rec_sx = d3.scalePoint().domain(d3.range(rec_years.length)).range([50, rec_width - 30]); const rec_step = rec_sx(1) - rec_sx(0); const rec_sy = d3.scaleLinear().domain([0, d3.max(rec_byPeriod, d => d.total)]).range([0, 46]); const rec_trackY = 76; rec_slider.append("text").attr("x", 4).attr("y", 14).attr("font-size", 10).attr("fill", "#555") .text("Bars: total aid received in each year. Drag handle or click bar to change year."); rec_slider.append("line").attr("x1", rec_sx(0)).attr("x2", rec_sx(rec_years.length - 1)) .attr("y1", rec_trackY).attr("y2", rec_trackY).attr("stroke", "#999").attr("stroke-width", 3).attr("stroke-linecap", "round"); const rec_bars = rec_slider.append("g").selectAll("rect").data(rec_byPeriod).join("rect") .attr("x", (d, i) => rec_sx(i) - rec_step * 0.35).attr("width", rec_step * 0.7) .attr("y", d => rec_trackY - 8 - rec_sy(d.total)).attr("height", d => rec_sy(d.total)) .attr("fill", "#cfcfcf").style("cursor", "pointer"); rec_bars.append("title").text(d => `${d.label}: ${customFormat(d.total)} received`); rec_slider.append("g").selectAll("text").data(rec_years.map((y, i) => ({y, i})).filter(d => d.y % 5 === 0)).join("text") .attr("x", d => rec_sx(d.i)).attr("y", rec_trackY + 24).attr("text-anchor", "middle").attr("font-size", 10).attr("fill", "#333").text(d => d.y); const rec_handle = rec_slider.append("circle").attr("cx", rec_sx(0)).attr("cy", rec_trackY).attr("r", 8) .attr("fill", rec_orange).attr("stroke", "#fff").attr("stroke-width", 2).style("cursor", "grab"); const rec_handleLabel = rec_slider.append("text").attr("x", rec_sx(0)).attr("y", rec_trackY + 42) .attr("text-anchor", "middle").attr("font-size", 12).attr("font-weight", "bold").attr("fill", rec_orange); const rec_listTitleSvg = rec_container.append("svg").attr("width", rec_width).attr("height", 34).style("max-width", "100%").style("height", "auto").style("margin-top", "6px"); const rec_listTitle = rec_listTitleSvg.append("text").attr("x", 4).attr("y", 24).attr("font-size", 16).attr("font-weight", "bold").attr("fill", rec_orange); const rec_listBox = rec_container.append("div").style("max-height", "420px").style("overflow-y", "auto").style("border", "1px solid #e4e4e4"); const rec_listSvg = rec_listBox.append("svg").attr("width", rec_width).style("max-width", "100%").style("height", "auto"); const rec_listChart = rec_listSvg.append("g").attr("transform", "translate(170, 6)"); function rec_colorOf(p, country) { const v = p.byCountry.get(country); return v ? rec_scale[rec_state.mode](v[rec_state.mode]) : rec_recipients.has(country) ? rec_noAid : rec_noData; } function rec_tipOf(p, name, country) { const v = p.byCountry.get(country); return v ? `${name} (${p.label})\nReceived: ${rec_fmt.amount(v.amount)}\nShare: ${rec_fmt.share(v.share)}` : `${name} (${p.label})\n${rec_recipients.has(country) ? "No aid received this year" : "No data"}`; } function rec_moveHandle(x, ms) { if (ms > 0) { rec_handle.transition().duration(ms).attr("cx", x); rec_handleLabel.transition().duration(ms).attr("x", x); } else { rec_handle.interrupt().attr("cx", x); rec_handleLabel.interrupt().attr("x", x); } } function rec_drawMap(p) { rec_paths.transition().duration(150).attr("fill", d => rec_colorOf(p, d.aid)); rec_paths.select("title").text(d => rec_tipOf(p, d.properties.name, d.aid)); rec_circles.transition().duration(150).attr("fill", d => rec_colorOf(p, d.country)); rec_circles.select("title").text(d => rec_tipOf(p, `${d.country} (Microstate)`, d.country)); rec_hatchPaths.attr("display", d => rec_recipients.has(d.aid) ? "none" : null); rec_hatchCircles.attr("display", d => rec_recipients.has(d.country) ? "none" : null); } function rec_drawLegend() { const mode = rec_state.mode; const b = rec_breaks[mode]; rec_legendTitle.text(mode === "amount" ? "Aid received (USD, 6 quantile classes)" : "Share of total aid (6 quantile classes)"); rec_legendLabel.text(d => d === 0 ? `< ${rec_fmt[mode](b[0])}` : d === 5 ? `≥ ${rec_fmt[mode](b[4])}` : `${rec_fmt[mode](b[d - 1])} – ${rec_fmt[mode](b[d])}`); } function rec_drawList(p) { const mode = rec_state.mode; const scale = rec_scale[mode]; const all = p.vals.slice().sort((a, c) => d3.descending(a[mode], c[mode])); const rowH = 16; const bx = d3.scaleLinear().domain([0, d3.max(all, d => d[mode]) || 1]).range([0, rec_width - 320]); const by = d3.scaleBand().domain(all.map(d => d.country)).range([0, all.length * rowH]).padding(0.15); rec_listTitle.text(`All ${all.length} recipients, ${p.label}`); rec_listSvg.attr("height", all.length * rowH + 12).attr("viewBox", `0 0 ${rec_width} ${all.length * rowH + 12}`); rec_listChart.selectAll("*").remove(); rec_listChart.selectAll("rect").data(all).join("rect") .attr("y", d => by(d.country)).attr("height", by.bandwidth()) .attr("width", d => bx(d[mode])).attr("fill", d => scale(d[mode])).attr("stroke", "#333").attr("stroke-width", 0.5); rec_listChart.selectAll("text.name").data(all).join("text").attr("class", "name") .attr("x", -8).attr("y", d => by(d.country) + by.bandwidth() / 2 + 4) .attr("text-anchor", "end").attr("font-size", 11).attr("fill", "#222").text(d => d.country); rec_listChart.selectAll("text.val").data(all).join("text").attr("class", "val") .attr("x", d => bx(d[mode]) + 6).attr("y", d => by(d.country) + by.bandwidth() / 2 + 4) .attr("font-size", 11).attr("fill", "#222") .text(d => mode === "amount" ? `${rec_fmt.amount(d.amount)} (${rec_fmt.share(d.share)})` : rec_fmt.share(d.share)); } function rec_draw() { const p = rec_byPeriod[rec_state.idx]; rec_title.text(`Aid received by country, ${p.label}`); rec_handleLabel.text(p.label); rec_bars.attr("fill", (d, i) => i === rec_state.idx ? rec_orange : "#cfcfcf"); rec_drawMap(p); rec_drawLegend(); rec_drawList(p); } function rec_pick(idx, ms) { rec_state.idx = idx; rec_moveHandle(rec_sx(idx), ms); rec_draw(); } rec_select.on("change", e => { rec_state.mode = e.target.value; rec_draw(); }); rec_bars.on("click", (e, d) => rec_pick(rec_byPeriod.indexOf(d), 250)); rec_slider.append("rect").attr("x", 30).attr("y", 20).attr("width", rec_width - 60).attr("height", rec_sliderH - 20) .attr("fill", "none").attr("pointer-events", "all").style("cursor", "pointer") .call(d3.drag().on("start drag", e => { const x = Math.max(rec_sx(0), Math.min(rec_sx(rec_years.length - 1), e.x)); rec_moveHandle(x, 0); const i = d3.minIndex(d3.range(rec_years.length), j => Math.abs(rec_sx(j) - x)); if (i !== rec_state.idx) { rec_state.idx = i; rec_draw(); } }).on("end", () => rec_moveHandle(rec_sx(rec_state.idx), 200))); rec_pick(0, 0);49:T83b,# Visual Analysis Geographic Stability vs. Shifts: When we look at how aid flows change over the years, we can see that countries are not permanently stuck in the same regional groups. While certain countries like India or Thailand tend to receive high amounts of aid for many decades, individual countries move up and down based on a multitude of reasons. We can notice across time that India, South America, South Africa, and certain Middle Eastern countries consistently receive aid. Other countries also require aid but fluctuations occur in amounts and timings. For about 2 decades (1980-2000s), many eastern European countries were also consistently requesting aid. Absolute Amount vs. Share Comparison: Amount mode: This view shows the total dollars given out, showcasin worldwide funding during major crises or big development pushes. Because of this overall growth, recent decades look much larger and more heavily funded than the 1970s. Share mode: This view looks at each country's percentage of the total yearly aid rather than the raw dollar amount. This helps us see true geographic shifts, showing how regions that used to receive most of the aid see their share shrink over time as global funding moves on to new priorities and different parts of the world. This view keeps funding levels meaningful without getting distorted by inflation. Design Decisions: I used the Natural Earth projection (d3.geoNaturalEarth1) for a balanced global view, adding interactive coordinate circles so tiny microstates aren't left out. To separate raw global funding growth from actual geographic shifts, I included a dropdown that lets users switch between absolute dollar amounts and proportional yearly shares, backed by a 6-class quantile orange color scale to handle extreme data skew. I also built a timeline slider and bar chart so viewers can easily scrub through years or click any period to instantly update the map and ranking list. Finally, I used a hatch pattern overlay with neutral background tones to clearly distinguish countries that never received aid from those with missing data.4a:[] 38:{"id":"38c56d409d695dc6","slug":"mini-project-2-temporal-data-visualization-due-nov-12th","title":"Mini-Project 2: Temporal Data Visualization (Due Nov. 12th)","thumbnail":"535487e70b84e6b1de0a613cd117fc773c1af07b09ab42dd979558cea83f61c8","access_level":"public","create_time":"$D2026-11-03T21:09:54.764Z","update_time":"$D2026-11-13T04:45:49.015Z","view_time":null,"first_public_time":"$D2026-11-13T04:46:07.709Z","has_unpublished_edits":null,"fork":{"id":"25807f4e14142959","slug":"2026-infovis-cse_project-2","title":"Mini-Project 2: Temporal Data Visualization (Due Nov. 12th)","owner":{"id":"3d6c0f5acd6a20a4","login":"rk2546","name":"rk2546"}},"stars":0,"starred":false,"owner":{"type":"team","id":"4904be97f2d3dbc9","login":"aman-mallik","name":"Aman Mallik","avatar_url":"https://avatars-next.observableusercontent.com/5b33cc65e1712fc4a1b703228cc8cc33c934147ae38ee483014e67e4f97560db","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":513,"publish_version":513,"role":null,"authored":false,"authors":[{"type":"individual","id":"b1bcad474d77519f","login":"aman-mallik","name":"Aman Mallik","avatar_url":"https://avatars-next.observableusercontent.com/5b33cc65e1712fc4a1b703228cc8cc33c934147ae38ee483014e67e4f97560db","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"4904be97f2d3dbc9","login":"aman-mallik","name":"Aman Mallik","avatar_url":"https://avatars-next.observableusercontent.com/5b33cc65e1712fc4a1b703228cc8cc33c934147ae38ee483014e67e4f97560db","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Mini-Project 2: Temporal Data Visualization (Due Nov. 12th)","cells":[{"id":155,"value":"# Mini-Project 2: Temporal Data Visualization (Due Nov. 12th)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":162,"value":"import { css } from \"@rk2546/infovis-cse-backend\";","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"css","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"---\n## Submission Instructions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"$3c","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":179,"value":"---\n## About the Datasets","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":181,"value":"We have **2** datasets that you must use for this project:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"### Aid Data, Revisited\n\nThis spreadsheet is a simplified and reduced version of the AidData dataset. This dataset describes commitment information for over 1.5 million development finance activities funded between 1947 and 2013. The simplified dataset contains the following columns:\n\n- **`aiddata_id`**: unique ID of the commitment\n- **`aiddata_2_id`**: secondary unique ID\n- **`year`**: year of the commitment\n- **`donor`**: country providing the financial resource\n- **`recipient`**: country receiving the financial resource\n- **`commitment_amount_usd_constant`**: the total amount of financial resources provided\n- **`coalesced_purpose_code`**: categorization ID for the stated purpose of the commitment\n- **`coalesced_purpose_name`**: the purpose of the commitment","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":32,"value":"### Country GeoData\n\nWe also have the GeoJSON data for countries, derived from data from Natural Earth. This GeoJSON is actually a TopoJSON that covers country boundaries at 1:50,000,000 scale.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":182,"value":"---\n## Questions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"$3d","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":183,"value":"---\n## Grading Criteria","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"$3e","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":186,"value":"\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"## Students' Workspace\n\n_From this point onward, you are free to modify the notebook in any way you see fit._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"# AI DISCLOSURE\n\nAI models (Gemini) was used for debugging only. All code logic, visualization design decisions, and writing is mine.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"# Visualization 1","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"const aiddata = await d3.csv(\"https://docs.google.com/spreadsheets/d/1YiuHdfZv_JZ-igOemKJMRaU8dkucfmHxOP6Od3FraW8/gviz/tq?tqx=out:csv&gid=1124214599\");","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"aiddata","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"const customFormat = d => {\n const formatted = d3.format(\"~s\")(d);\n return formatted.endsWith(\"G\") ? formatted.slice(0, -1) + \"B\" : formatted;\n};","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"const signedFormat = d => (d < 0 ? \"−\" : d > 0 ? \"+\" : \"\") + customFormat(Math.abs(d));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"$3f","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"const years = Array.from(new Set(yearly.map(d => d.year)));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"const totals = d3.rollups(\n yearly,\n v => ({donated: d3.sum(v, d => d.donated), received: d3.sum(v, d => d.received)}),\n d => d.country\n )\n .map(([country, t]) => ({\n country,\n donated: t.donated,\n received: t.received,\n net: t.donated - t.received,\n total: t.donated + t.received,\n ratio: (t.donated - t.received) / (t.donated + t.received)\n }))\n .sort((a, b) => d3.descending(a.ratio, b.ratio));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"const extremes = (vals, yrs, topPeaks = 3, topValleys = 2) => {\n const max = d3.max(vals), peaks = [], valleys = [];\n if (!(max > 0)) return {peaks, valleys};\n\n vals.forEach((v, i) => {\n if (i < 3) return;\n const prior = d3.mean(vals.slice(i - 3, i));\n const near = vals.slice(Math.max(0, i - 1), i + 2);\n if (v === d3.max(near) && v >= 0.15 * max && v >= 3 * prior) {\n peaks.push({year: yrs[i], v, prior});\n }\n if (v === d3.min(near) && prior >= 0.15 * max && v <= prior / 3) {\n valleys.push({year: yrs[i], v, prior});\n }\n });\n return {\n peaks: peaks.sort((a, b) => d3.descending(a.v - a.prior, b.v - b.prior)).slice(0, topPeaks),\n valleys: valleys.sort((a, b) => d3.descending(a.prior - a.v, b.prior - b.v)).slice(0, topValleys)\n };\n};","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"$40","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"heat_container.node()","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"$41","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"const geo_world = await d3.json(\"https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json\");","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"const geo_topojson = await import(\"https://cdn.jsdelivr.net/npm/topojson-client@3/+esm\");","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"$42","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"geo_container.node()","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"$43","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"# Visualization 2","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"$44","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"$45","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"purp_container.node()","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"$46","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"# Visualization 3","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"$47","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"rec_colors","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"$48","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"rec_container.node()","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"$49","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"■","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"2"}} 33:null