34:["$","title",null,{"children":"Mini-Project 2: Temporal Data Visualization (Due Nov. 12th) | Yathin Reddy Duvuru | 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:T69e,// Create the q1MapLegend - Generated w/ AI const q1MapLegendW = 180, q1MapLegendH = 12; const q1MapLegendX = q1VizDims.marginLeft + q1VizDims.width + 20; const q1MapLegendY = q1VizDims.marginTop + 20; // Gradient Sampled from Diverging Color Scale const q1Gradient = q1Plot.append("defs") .append("linearGradient") .attr("id", "q1-aid-gradient"); d3.range(0, 1.01, 0.1).forEach(t => { q1Gradient.append("stop") .attr("offset", `${t * 100}%`) .attr("stop-color", q1ColorScale(-1 + 2 * t)); }); const q1MapLegend = q1Plot.append("g") .attr("transform", `translate(${q1MapLegendX}, ${q1MapLegendY})`); q1MapLegend.append("text") .attr("y", -8) .attr("font-size", 12) .text("Normalized Aid Balance"); q1MapLegend.append("rect") .attr("width", q1MapLegendW) .attr("height", q1MapLegendH) .attr("fill", "url(#q1-aid-gradient)"); q1MapLegend.append("g") .attr("transform", `translate(0, ${q1MapLegendH})`) .call(d3.axisBottom(d3.scaleLinear().domain([-1, 1]).range([0, q1MapLegendW])) .tickValues([-1, -0.5, 0, 0.5, 1]) .tickFormat(d3.format(".1f"))) .call(g => g.select(".domain").remove()); q1MapLegend.append("text").attr("y", 40).attr("font-size", 10).text("← Net Receiver"); q1MapLegend.append("text").attr("y", 40).attr("x", q1MapLegendW).attr("text-anchor", "end") .attr("font-size", 10).text("Net Donor →"); // "No Data" swatch const q1NoData = q1MapLegend.append("g") .attr("transform", "translate(0, 55)"); q1NoData.append("rect") .attr("width", 16) .attr("height", 16) .attr("fill", "#8a8a8a") .attr("stroke", "#999"); q1NoData.append("text") .attr("x", 24) .attr("y", 12) .attr("font-size", 12) .text("No Data");40:T441,// Recolor Countries, Highlight the Selected Country and Update Title and Tooltips for the Selected Year - Generated w/ AI q1CountryShapes .attr("fill", d => { const balance = q1Lookup(d.properties.name, q1Year)?.balance; return balance == null ? "#8a8a8a" : q1ColorScale(balance); }) .attr("stroke", d => d.properties.name === q1Country ? "#ffd60a" : "#ffffff") .attr("stroke-width", d => d.properties.name === q1Country ? 2 : 0.6) .style("filter", d => d.properties.name === q1Country ? "drop-shadow(0 0 1px #000)" : null); q1CountryShapes.filter(d => d.properties.name === q1Country).raise(); q1CountryShapes .selectAll("title") .data(d => [d]) .join("title") .text(d => { const row = q1Lookup(d.properties.name, q1Year); if (!row || row.balance == null) return `${d.properties.name}\n${q1Year}: No Data`; return `${d.properties.name} (${q1Year})\nDonated: ${q1Usd(row.donated)}\nReceived: ${q1Usd(row.received)}\nNormalized Aid Balance: ${d3.format("+.2f")(row.balance)}`; }); q1MapTitle.text(`Normalized Aid Balance by Country, ${q1Year}`);41:T104c,// Create Linked Time Series for the Selected Country: Amounts (Top) and Normalized Aid Balance (Bottom) const q1LineDims = { width: 800, topHeight: 160, bottomHeight: 100, gap: 50, marginTop: 45, marginRight: 30, marginBottom: 40, marginLeft: 70, }; const q1LineView = (() => { const d = q1LineDims; const series = q1Series.get(q1Country); const innerH = d.topHeight + d.gap + d.bottomHeight; const svg = d3.create("svg") .attr("width", d.width + d.marginLeft + d.marginRight) .attr("height", innerH + d.marginTop + d.marginBottom); const g = svg.append("g").attr("transform", `translate(${d.marginLeft}, ${d.marginTop})`); svg.append("text") .attr("x", (d.width + d.marginLeft + d.marginRight) / 2) .attr("y", 22) .attr("text-anchor", "middle") .attr("font-weight", 500) .text(`${q1Country}: Donated vs. Received Over Time`); const x = d3.scaleLinear().domain(q1YearExtent).range([0, d.width]); // Symlog Scale (Linear Below ~$100K) so Small Amounts Stay Readable Next to Billions const maxAmount = d3.max(series, r => Math.max(r.donated, r.received)) || 1; const yAmount = d3.scaleSymlog() .constant(1e5) .domain([0, maxAmount]) .range([d.topHeight, 0]); // No $0 or Sub-$100K Ticks: they Collapse onto the Baseline (the Bottom of the Panel is $0) const yAmountTicks = d3.range(5, 12).map(e => 10 ** e).filter(v => v <= maxAmount); const yBalance = d3.scaleLinear() .domain([-1, 1]) .range([d.topHeight + d.gap + d.bottomHeight, d.topHeight + d.gap]); // Axes g.append("g").attr("transform", `translate(0, ${d.topHeight})`) .call(d3.axisBottom(x).tickFormat(d3.format("d"))); g.append("g").call(d3.axisLeft(yAmount).tickValues(yAmountTicks).tickFormat(d3.format("$.2s"))); g.append("g").attr("transform", `translate(0, ${d.topHeight + d.gap + d.bottomHeight})`) .call(d3.axisBottom(x).tickFormat(d3.format("d"))); g.append("g").call(d3.axisLeft(yBalance).tickValues([-1, 0, 1]).tickFormat(d3.format("+.0f"))); // Axis Labels g.append("text").attr("x", -d.marginLeft + 10).attr("y", -12).attr("font-size", 11) .text("Amount (constant USD, symlog scale)"); g.append("text").attr("x", -d.marginLeft + 10).attr("y", d.topHeight + d.gap - 12).attr("font-size", 11) .text("Normalized Aid Balance (+1 = Net Donor, -1 = Net Receiver)"); // Amount Lines const line = key => d3.line().x(r => x(r.year)).y(r => yAmount(r[key])); g.append("path").datum(series).attr("fill", "none").attr("stroke", "#2166ac").attr("stroke-width", 2) .attr("d", line("donated")); g.append("path").datum(series).attr("fill", "none").attr("stroke", "#b2182b").attr("stroke-width", 2) .attr("d", line("received")); // Legend Sits above the Panel, Right-Aligned on the Same Row as the Axis Label, so it Never Overlaps the Lines g.append("text").attr("x", d.width - 90).attr("y", -12).attr("text-anchor", "end").attr("font-size", 12).attr("fill", "#2166ac").text("● Donated"); g.append("text").attr("x", d.width).attr("y", -12).attr("text-anchor", "end").attr("font-size", 12).attr("fill", "#b2182b").text("● Received"); // Zero Reference Line g.append("line").attr("x1", 0).attr("x2", d.width).attr("y1", yBalance(0)).attr("y2", yBalance(0)) .attr("stroke", "#888").attr("stroke-dasharray", "4 3"); g.append("path").datum(series).attr("fill", "none").attr("stroke", "#555").attr("stroke-width", 1) .attr("d", d3.line().defined(r => r.balance != null).x(r => x(r.year)).y(r => yBalance(r.balance))); g.selectAll(".balance-dot") .data(series.filter(r => r.balance != null)) .join("circle") .attr("class", "balance-dot") .attr("cx", r => x(r.year)) .attr("cy", r => yBalance(r.balance)) .attr("r", 3) .attr("fill", r => q1ColorScale(r.balance)) .attr("stroke", "#555") .attr("stroke-width", 0.5) .append("title") .text(r => `${r.year}\nDonated: ${q1Usd(r.donated)}\nReceived: ${q1Usd(r.received)}\nNormalized Aid Balance: ${d3.format("+.2f")(r.balance)}`); // Selected Year Marker const marker = g.append("line") .attr("y1", 0) .attr("y2", innerH) .attr("stroke", "#111") .attr("stroke-width", 1) .attr("stroke-opacity", 0.6) .attr("pointer-events", "none"); return { svg, x, marker }; })(); 42:Tb45,### Q1.3 I decided to create two plots: a choropleth and a linked two-panel line chart. The choropleth helps the reader gauge how aid activity is distributed geographically while the line charts allow for a more direct comparison between the amount donated vs amount received for each country. The choropleth has an interactive slider through which the reader can change the year for which the data is being displayed. I used single-year bins because the provided data was granular enough to allow for a meaningful year-by-year comparison. I also included a play button that the reader can use to view the change over the entire time span of the data with a single click. The choropleth also has a zoom and a reset view capability to allow the reader to zoom into areas of interest or smaller countries that are hard to read from the top. The line charts make identifying countries that have sudden peaks and valleys easy (the symlog scale does compress the large spikes slightly). The Choropleth, specifically, reused a lot of the code/elements from Mini Project 1. I used a dark gray no data swatch for countries for which we don't have data during the selected year. I decided to use the Normalised Aid Balance (calculated as (Donated-Received)/(Donated+Received)) as a measure of each country's role (Net Donor or Net Receiver). The color scale chosen in a Diverging scale since the middle of the scale here is meaningful (countries with a balance in their aid activity) and a RdBu gradient as they have opposite hues. The reader can select a country to highlight it by clicking on it(the country's borders are colored yellow; intended for high contrast against the RdBu). The tooltips show the amount donated, amount received and Normalised aid balance for each country. The line charts are updated based on the highlighted country in the choropleth. The first line chart allows for a direct comparison between the donations and received aid over time (on the x-axis). Reusing the color scheme, the donations line is blue and the reception line is red. I use a Symmetric Logarithm scale for the y-axis (similar to Mini Project 1, due to the large range of the data while simultaneously not washing out the smaller values). The second line chart serves as a backup to the choropleth and allows for an easier reading of how a country's role changes over time (using the Normalised Aid Balance). While it sacrifices spatial context and at-a-glance cross-country comparisons, it enables a much clearer evaluation of individual countries. Finally, I added a vertical line that represents the current year selected in the time slider. Notes: 1. Dark Gray represents both countries with no aid activity in that year and a country absent from the dataset. 2. The Normalised Aid Balance formula used hides size. A country with $1 donated and nothing received is as dark blue as the US.43:T4b4,// Format Dollar Amounts (e.g. $1.23B); d3's SI Prefix "G" is Swapped for "B" (Billions) const q2Usd = d3.format("$.3s"); const q2Money = (value, format = q2Usd) => format(value).replace("G", "B"); // Create the Year Slider const q2YearInput = Inputs.range(q2YearExtent, { label: "Year", step: 1, value: 2000, width: 450 }); const q2Year = Generators.input(q2YearInput); // Create a Play/Pause Button that Advances the Year Slider - Generated w/ AI const q2PlayButton = (() => { const button = document.createElement("button"); button.textContent = "▶ Play"; let timer = null; const stop = () => { clearInterval(timer); timer = null; button.textContent = "▶ Play"; }; const setYear = year => { q2YearInput.value = year; q2YearInput.dispatchEvent(new Event("input", { bubbles: true })); }; button.onclick = () => { if (timer) return stop(); button.textContent = "⏸ Pause"; if (+q2YearInput.value >= q2YearExtent[1]) setYear(q2YearExtent[0]); timer = setInterval(() => { if (+q2YearInput.value >= q2YearExtent[1]) return stop(); setYear(+q2YearInput.value + 1); }, 500); }; invalidation.then(stop); return button; })();44:T4d7,// Create a Vertical Bar Chart Canvas with a Band Scale (Purposes) and a Fixed Symlog Scale (Amount, Shared by All Years) const q2VizDims = { width: 800, height: 360, marginTop: 50, marginRight: 30, marginBottom: 160, marginLeft: 80, }; const q2Plot = d3.create("svg") .attr("width", q2VizDims.width + q2VizDims.marginLeft + q2VizDims.marginRight) .attr("height", q2VizDims.height + q2VizDims.marginTop + q2VizDims.marginBottom); const q2Chart = q2Plot.append("g") .attr("transform", `translate(${q2VizDims.marginLeft}, ${q2VizDims.marginTop})`); const q2Title = q2Plot.append("text") .attr("x", (q2VizDims.width + q2VizDims.marginLeft + q2VizDims.marginRight) / 2) .attr("y", 25) .attr("text-anchor", "middle") .attr("font-weight", 500); const q2X = d3.scaleBand() .domain(q2Purposes) .range([0, q2VizDims.width]) .padding(0.2); // Symlog Scale (Linear Below ~$1M) so Small Years Stay Visible Next to Billions; Domain is Fixed across Years const q2MaxAmount = d3.max(q2Series.values(), rows => d3.max(rows, r => r.amount)) || 1; const q2Y = d3.scaleSymlog() .constant(1e6) .domain([0, q2MaxAmount]) .range([q2VizDims.height, 0]); const q2Color = d3.scaleOrdinal(q2Purposes, d3.schemeTableau10);45:T40b,// Draw Axes, Rotated Purpose Labels and Axis Title // No Sub-$1M Ticks: they Collapse onto the Baseline (the Bottom of the Axis is $0) const q2YTicks = d3.range(6, 13).map(e => 10 ** e).filter(v => v <= q2MaxAmount); q2Chart.append("g") .call(d3.axisLeft(q2Y).tickValues(q2YTicks).tickFormat(d => q2Money(d, d3.format("$.2s")))) .call(g => g.selectAll(".tick line").clone().attr("x2", q2VizDims.width).attr("stroke-opacity", 0.1)); q2Chart.append("line") .attr("x1", 0).attr("x2", q2VizDims.width) .attr("y1", q2VizDims.height).attr("y2", q2VizDims.height) .attr("stroke", "currentColor"); q2Chart.append("g") .selectAll("text") .data(q2Purposes) .join("text") .attr("transform", d => `translate(${q2X(d) + q2X.bandwidth() / 2}, ${q2VizDims.height + 12}) rotate(-40)`) .attr("text-anchor", "end") .attr("font-size", 11) .text(d => d); q2Chart.append("text") .attr("x", -q2VizDims.marginLeft + 10) .attr("y", -12) .attr("font-size", 11) .text("Amount in Selected Year (constant USD, symlog scale)");46:T6a9,### Q2.2 The mix changes a lot over time, and the share labels show it (shares are of the top-10 total for that year): 1970s: Aid is led by Industrial development (24% in 1973, 41% in 1979) and Import support for capital goods (36% and 35%). Several purposes, including Power generation, Rescheduling and Telecommunications in 1979, have no amount in some years. 1980s to early 1990s: The mix is more even. In 1985, Rescheduling and refinancing ($1.01B, 29%) and Industrial development (27%) lead, and Mineral/Metal prospection reaches 17%. In 1991 Industrial development leads (45%, $1.29B), followed by Mineral/Metal prospection (17%). Late 1990s: Air transport (29%, $1.61B in 1997) and Power generation/non-renewable sources (24%) lead. Industrial development has fallen to 14%, and Import support has no amount that year. 2000s onward: The mix concentrates in a few purposes. Rail transport grows from 26% (2003) to 62% (2009) and 77% ($2.25B, 2013). Social/welfare services is 28% in 2003 and 26% in 2009. Power generation/renewable sources reaches 9–11% by 2009–13. Industrial development, Air transport, Telecommunications and Mineral/Metal prospection fall to almost nothing (0.x% in the labels from 2009). So aid moves from industry and capital goods (1970s–early 1990s), to air transport and non-renewable power (late 1990s), to rail transport and social services (2000s–2010s). Mineral/Metal prospection was a meaningful 17% in the mid-1980s and early 1990s but is a non-factor after 2000. Rescheduling and refinancing appears only in some years (for example 1985) and is "None" in most others. Exact Numbers were Obtained using AI from Screenshots of the Plot for ease.47:T6e7,### Q2.3 For this question, I decided to create a simple vertical bar chart with the x-axis being the top ten purposes in terms of disbursements across all countries and all time and the Y-axis being the total disbursement amount in the selected year. I used a time slider (w/ a play button) to enable comparison of how these top ten purposes change over time. The data was binned by each year similar to Q1. Before I calculated the top-ten purposes, I excluded rows w/ UNSPECIFIED, SECTORS NOT SPECIFIED, Null or Empty values for the purpose. The y-axis and the left-to-right order of purposes are fixed for all years, and the order is the all-time rank. This is what allows us to compare bar heights between years. The Symmetric Logarithm scale choice for the Y-axis is the same as the earlier question (w/ a different constant). Each bar explicitly displays both the amount (rounded) and its relative percentage share of the top ten disbursements total in the selected year. While the bar colors are primarily decorative, they assist in distinguishing categories. Finally, gridlines align with each Y-axis tick position to provide quick visual anchors, making it easier to compare bars across the chart without referencing the axis every time. Drawback of Approach: Because the Y-axis is symlog, bar length is not proportional to the amount (a bar twice as tall is not twice the money). Bars remain rankable and comparable in order, but not in proportion. The labels and tooltips give the amounts and shares for ratio comparison. I chose symlog because amounts span several orders of magnitude, from billions to near zero in early years and for smaller purposes, and unlike a log scale it handles zeros. On a linear scale many bars would be imperceptibly small.48:T7a2,// UN M49 Sub-Regions for Every Recipient in the Dataset - Generated w/ AI // Source: UN Statistics Division M49 Standard, https://unstats.un.org/unsd/methodology/m49/ (Hand-Transcribed; Keys are Atlas Names) // Taiwan has no M49 Entry (the UN Lists it under China), so it is Placed in Eastern Asia const q3M49Regions = [ { code: 21, name: "Northern America", color: "#08519c", countries: ["Canada", "United States of America"] }, { code: 5, name: "South America", color: "#6baed6", countries: ["Brazil", "Chile", "Colombia"] }, { code: 155, name: "Western Europe", color: "#006d2c", countries: ["Austria", "Belgium", "France", "Germany", "Liechtenstein", "Luxembourg", "Switzerland"] }, { code: 154, name: "Northern Europe", color: "#41ab5d", countries: ["Denmark", "Estonia", "Finland", "Iceland", "Ireland", "Latvia", "Lithuania", "Norway", "Sweden", "United Kingdom"] }, { code: 39, name: "Southern Europe", color: "#a1d99b", countries: ["Greece", "Italy", "Portugal", "Slovenia", "Spain"] }, { code: 151, name: "Eastern Europe", color: "#2ca2a2", countries: ["Czechia", "Hungary", "Poland", "Romania", "Slovakia"] }, { code: 145, name: "Western Asia", color: "#a63603", countries: ["Cyprus", "Kuwait", "Qatar", "Saudi Arabia", "United Arab Emirates"] }, { code: 34, name: "Southern Asia", color: "#fd8d3c", countries: ["India"] }, { code: 30, name: "Eastern Asia", color: "#cb181d", countries: ["Japan", "South Korea", "Taiwan"] }, { code: 35, name: "South-eastern Asia", color: "#fb6a4a", countries: ["Thailand"] }, { code: 18, name: "Southern Africa", color: "#6a51a3", countries: ["South Africa"] }, { code: 53, name: "Australia and New Zealand", color: "#8c6d31", countries: ["Australia", "New Zealand"] } ]; const q3Regions = q3M49Regions.map(r => r.name); const q3RegionOf = new Map(q3M49Regions.flatMap(r => r.countries.map(c => [c, r.name]))); const q3RegionColor = new Map(q3M49Regions.map(r => [r.name, r.color]));49:T4e0,// Create the Small-Multiple Map Canvas, Panel Layout and Shared Sequential Symlog Color Scale const q3VizDims = { panelWidth: 240, panelHeight: 125, cols: 4, gapX: 12, gapY: 30, marginTop: 50, marginRight: 20, marginBottom: 75, marginLeft: 20, }; const q3PanelRows = Math.ceil(q3Bins.length / q3VizDims.cols); const q3InnerWidth = q3VizDims.cols * q3VizDims.panelWidth + (q3VizDims.cols - 1) * q3VizDims.gapX; const q3InnerHeight = q3PanelRows * q3VizDims.panelHeight + (q3PanelRows - 1) * q3VizDims.gapY; const q3Plot = d3.create("svg") .attr("width", q3InnerWidth + q3VizDims.marginLeft + q3VizDims.marginRight) .attr("height", q3InnerHeight + q3VizDims.marginTop + q3VizDims.marginBottom); const q3Chart = q3Plot.append("g"); q3Plot.append("text") .attr("x", (q3InnerWidth + q3VizDims.marginLeft + q3VizDims.marginRight) / 2) .attr("y", 25) .attr("text-anchor", "middle") .attr("font-weight", 500) .text("Average Annual Aid Received by Country, 5-Year Periods"); // Shared Color Scale for All Panels (Symlog: Linear Below ~$1M so Small Recipients Stay Visible next to Billions) const q3Color = d3.scaleSequentialSymlog(t => d3.interpolateYlOrRd(0.1 + 0.9 * t)) .constant(1e6) .domain([0, q3MaxAverage]);4a:T8e2,// Draw One Map Panel per Period: Fill by Average Annual Amount Received, Grey = Nothing Received const q3RecipientSet = new Set(q3Recipients); const q3Panels = q3Bins.map((bin, i) => { const col = i % q3VizDims.cols; const row = Math.floor(i / q3VizDims.cols); const panel = q3Chart.append("g") .attr("class", "q3-panel") .attr("transform", `translate(${q3VizDims.marginLeft + col * (q3VizDims.panelWidth + q3VizDims.gapX)}, ${q3VizDims.marginTop + row * (q3VizDims.panelHeight + q3VizDims.gapY)})`); // Clip the Zoomed Map to its Panel and Add a Transparent Rect so Dragging the Ocean Pans panel.append("clipPath") .attr("id", `q3-clip-${i}`) .append("rect") .attr("width", q3VizDims.panelWidth) .attr("height", q3VizDims.panelHeight); panel.append("rect") .attr("width", q3VizDims.panelWidth) .attr("height", q3VizDims.panelHeight) .attr("fill", "transparent"); const map = panel.append("g") .attr("clip-path", `url(#q3-clip-${i})`) .append("g") .attr("class", "q3-map"); panel.append("text") .attr("x", q3VizDims.panelWidth / 2) .attr("y", -8) .attr("text-anchor", "middle") .attr("font-size", 12) .attr("font-weight", 500) .text(`${bin.label}${bin.years !== q3BinWidth ? ` (${bin.years} yrs)` : ""}`); map.selectAll("path") .data(q3Features.map(feature => ({ name: feature.properties.name, feature, bin }))) .join("path") .attr("class", "country") .style("vector-effect", "non-scaling-stroke") .attr("d", d => q3Path(d.feature)) .attr("fill", d => { const average = q3BinAverage(d.name, bin); return average > 0 ? q3Color(average) : "#d9d9d9"; }) .attr("stroke", "#ffffff") .attr("stroke-width", 0.3) .append("title") .text(d => { if (!q3RecipientSet.has(d.name)) return `${d.name}\nNot a Recipient in the Dataset`; const average = q3BinAverage(d.name, bin); if (average === 0) return `${d.name} (${bin.label})\nNo Aid Received`; return `${d.name} (${bin.label})\nRegion: ${q3RegionOf.get(d.name)}\nAvg. Annual Received: ${q3Usd(average)}\nPeriod Total: ${q3Usd(q3BinTotals.get(d.name).get(bin.start))}`; }); return panel; }); const q3CountryShapes = q3Chart.selectAll("path.country");4b:T668,// Create the Shared Legend (Sequential Symlog Gradient) with a "No Data" Swatch const q3LegendW = 300, q3LegendH = 12; const q3LegendX = (q3InnerWidth + q3VizDims.marginLeft + q3VizDims.marginRight) / 2 - q3LegendW / 2 - 50; const q3LegendY = q3VizDims.marginTop + q3InnerHeight + 30; const q3LegendScale = d3.scaleSymlog().constant(1e6).domain([0, q3MaxAverage]).range([0, q3LegendW]); const q3Gradient = q3Plot.append("defs") .append("linearGradient") .attr("id", "q3-aid-gradient"); d3.range(0, 1.01, 0.05).forEach(t => { q3Gradient.append("stop") .attr("offset", `${t * 100}%`) .attr("stop-color", q3Color(q3LegendScale.invert(t * q3LegendW))); }); const q3Legend = q3Plot.append("g") .attr("transform", `translate(${q3LegendX}, ${q3LegendY})`); q3Legend.append("text") .attr("y", -8) .attr("font-size", 12) .text("Average Annual Aid Received (Constant USD, Symlog Scale)"); q3Legend.append("rect") .attr("width", q3LegendW) .attr("height", q3LegendH) .attr("fill", "url(#q3-aid-gradient)"); q3Legend.append("g") .attr("transform", `translate(0, ${q3LegendH})`) .call(d3.axisBottom(q3LegendScale) .tickValues(d3.range(6, 13).map(e => 10 ** e).filter(v => v <= q3MaxAverage)) .tickFormat(v => q3Usd(v, d3.format("$.1s")))) .call(g => g.select(".domain").remove()); const q3NoData = q3Legend.append("g") .attr("transform", `translate(${q3LegendW + 40}, -4)`); q3NoData.append("rect") .attr("width", 16) .attr("height", 16) .attr("fill", "#d9d9d9") .attr("stroke", "#999"); q3NoData.append("text") .attr("x", 24) .attr("y", 12) .attr("font-size", 12) .text("No Data");4c:Tfc0,// Create the Regional History Chart: Stacked Area of Aid Received by UN M49 Sub-Region per Year // Dashed Lines Mark the Map Period Boundaries; Click a Region (Layer or Legend) to Highlight it on the Maps const q3AreaChart = (() => { const d = { width: 800, height: 260, marginTop: 50, marginRight: 190, marginBottom: 40, marginLeft: 70 }; const absolute = q3Mode === "Absolute Amount"; const svg = d3.create("svg") .attr("width", d.width + d.marginLeft + d.marginRight) .attr("height", d.height + d.marginTop + d.marginBottom); const g = svg.append("g").attr("transform", `translate(${d.marginLeft}, ${d.marginTop})`); svg.append("text") .attr("x", (d.width + d.marginLeft + d.marginRight) / 2) .attr("y", 22) .attr("text-anchor", "middle") .attr("font-weight", 500) .text(`Aid Received by UN M49 Sub-Region, ${absolute ? "Absolute Amount" : "Share of Yearly Total"}`); const stacked = d3.stack() .keys(q3Regions) .offset(absolute ? d3.stackOffsetNone : d3.stackOffsetExpand)(q3RegionRows); const x = d3.scaleLinear().domain(q3YearExtent).range([0, d.width]); const y = d3.scaleLinear() .domain([0, absolute ? d3.max(stacked, s => d3.max(s, r => r[1])) : 1]) .range([d.height, 0]); const grandTotals = new Map(q3Regions.map(region => [region, d3.sum(q3RegionRows, r => r[region])])); const grandTotal = d3.sum(grandTotals.values()); const select = region => { q3RegionInput.value = q3Region === region ? "All Regions" : region; q3RegionInput.dispatchEvent(new Event("input", { bubbles: true })); }; const opacity = region => q3Region === "All Regions" || q3Region === region ? 1 : 0.2; // Axes g.append("g").attr("transform", `translate(0, ${d.height})`) .call(d3.axisBottom(x).tickFormat(d3.format("d"))); g.append("g") .call(d3.axisLeft(y).ticks(5).tickFormat(absolute ? v => (v === 0 ? "$0" : q3Usd(v, d3.format("$.2s"))) : d3.format(".0%"))); g.append("text").attr("x", -d.marginLeft + 10).attr("y", -12).attr("font-size", 11) .text(absolute ? "Aid Received per Year (Constant USD)" : "Share of Aid Received per Year"); // Period Boundaries and Labels (Match the Map Panels) q3Bins.forEach(bin => { if (bin.start !== q3YearExtent[0]) { g.append("line").attr("x1", x(bin.start)).attr("x2", x(bin.start)).attr("y1", 0).attr("y2", d.height) .attr("stroke", "#555").attr("stroke-dasharray", "3 3").attr("stroke-opacity", 0.6).attr("pointer-events", "none"); } g.append("text").attr("x", x((bin.start + bin.end) / 2)).attr("y", -3).attr("text-anchor", "middle") .attr("font-size", 10).attr("fill", "#555").text(bin.label); }); // Stacked Areas g.selectAll(".region-area") .data(stacked) .join("path") .attr("class", "region-area") .attr("fill", s => q3RegionColor.get(s.key)) .attr("opacity", s => opacity(s.key)) .attr("d", d3.area().x(r => x(r.data.year)).y0(r => y(r[0])).y1(r => y(r[1]))) .style("cursor", "pointer") .on("click", (event, s) => select(s.key)) .append("title") .text(s => { const peak = d3.greatest(q3RegionRows, r => r[s.key]); return `${s.key}\nTotal ${q3YearExtent[0]}–${q3YearExtent[1]}: ${q3Usd(grandTotals.get(s.key))}\nShare of All Aid Received: ${d3.format(".1%")(grandTotals.get(s.key) / grandTotal)}\nPeak Year: ${peak.year} (${q3Usd(peak[s.key])})`; }); // Legend (Top Row = Top Layer of the Stack) const legend = svg.append("g").attr("transform", `translate(${d.marginLeft + d.width + 20}, ${d.marginTop})`); [...q3Regions].reverse().forEach((region, i) => { const row = legend.append("g") .attr("transform", `translate(0, ${i * 19})`) .attr("opacity", opacity(region)) .style("cursor", "pointer") .on("click", () => select(region)); row.append("rect").attr("width", 12).attr("height", 12).attr("fill", q3RegionColor.get(region)); row.append("text").attr("x", 18).attr("y", 10).attr("font-size", 11).text(region); }); return svg.node(); })();4d:Tdb9,// Create Small Multiples of Aid Received per Year, One Area Chart per UN M49 Sub-Region // Every Region Sits on its Own Baseline so Small Regions Stay Readable; Dashed Lines Mark the Map Period Boundaries const q3RegionPanels = (() => { const d = { cols: 4, panelWidth: 150, panelHeight: 80, axisLeft: 44, gapX: 16, gapY: 46, marginTop: 85, marginRight: 20, marginBottom: 25, marginLeft: 10 }; const rows = Math.ceil(q3Regions.length / d.cols); const cellWidth = d.axisLeft + d.panelWidth + d.gapX; const width = d.marginLeft + d.cols * cellWidth - d.gapX + d.marginRight; const height = d.marginTop + rows * (d.panelHeight + d.gapY) - d.gapY + d.marginBottom; const shared = q3Scale === "Shared Y-Axis"; const svg = d3.create("svg").attr("width", width).attr("height", height); svg.append("text") .attr("x", width / 2) .attr("y", 22) .attr("text-anchor", "middle") .attr("font-weight", 500) .text(`Aid Received per Year by UN M49 Sub-Region, ${shared ? "Shared" : "Independent"} Y-Axis`); const x = d3.scaleLinear().domain(q3YearExtent).range([0, d.panelWidth]); const regionMax = new Map(q3Regions.map(region => [region, d3.max(q3RegionRows, r => r[region]) || 1])); const globalMax = d3.max(regionMax.values()); const select = region => { q3RegionInput.value = q3Region === region ? "All Regions" : region; q3RegionInput.dispatchEvent(new Event("input", { bubbles: true })); }; q3Regions.forEach((region, i) => { const g = svg.append("g") .attr("transform", `translate(${d.marginLeft + (i % d.cols) * cellWidth + d.axisLeft}, ${d.marginTop + Math.floor(i / d.cols) * (d.panelHeight + d.gapY)})`) .attr("opacity", q3Region === "All Regions" || q3Region === region ? 1 : 0.25) .style("cursor", "pointer") .on("click", () => select(region)); const y = d3.scaleLinear().domain([0, shared ? globalMax : regionMax.get(region)]).range([d.panelHeight, 0]); const peak = d3.greatest(q3RegionRows, r => r[region]); const total = d3.sum(q3RegionRows, r => r[region]); g.append("rect").attr("width", d.panelWidth).attr("height", d.panelHeight).attr("fill", "transparent"); q3Bins.slice(1).forEach(bin => { g.append("line").attr("x1", x(bin.start)).attr("x2", x(bin.start)).attr("y1", 0).attr("y2", d.panelHeight) .attr("stroke", "#555").attr("stroke-dasharray", "3 3").attr("stroke-opacity", 0.4).attr("pointer-events", "none"); }); g.append("path") .datum(q3RegionRows) .attr("fill", q3RegionColor.get(region)) .attr("d", d3.area().x(r => x(r.year)).y0(d.panelHeight).y1(r => y(r[region]))) .append("title") .text(`${region}\nTotal ${q3YearExtent[0]}–${q3YearExtent[1]}: ${q3Usd(total)}\nPeak Year: ${peak.year} (${q3Usd(peak[region])})`); g.append("g").attr("transform", `translate(0, ${d.panelHeight})`).attr("font-size", 9) .call(d3.axisBottom(x).tickValues([1980, 2000]).tickFormat(d3.format("d"))); g.append("g").attr("font-size", 9) .call(d3.axisLeft(y).ticks(3).tickFormat(v => (v === 0 ? "$0" : q3Usd(v, d3.format("$.2s"))))); g.append("rect").attr("y", -27).attr("width", 10).attr("height", 10).attr("fill", q3RegionColor.get(region)); g.append("text").attr("x", 15).attr("y", -18).attr("font-size", 12).attr("font-weight", 500).text(region); g.append("text").attr("y", -6).attr("font-size", 10).attr("fill", "#555") .text(`Peak: ${q3Usd(peak[region])} (${peak.year})`); }); return svg.node(); })();4e:T427,### Q3.2 Aid received is concentrated in a few sub-regions and shifts over time. Southern Asia and South America receive aid in every period, with the largest sustained totals (peaks of $5.39B in 2007 and $3.53B in 2012). Eastern Asia and South-eastern Asia also receive in most years until the early 2000s, with peaks in 1999 ($6.66B) and 1997 ($6.37B). Eastern Asia falls to near zero after about 2003, while South-eastern Asia keeps a smaller flow. Eastern Europe and Western Asia are the spikiest: Eastern Europe peaks at $9.71B in 1992 and is near zero before 1988 and after about 2004, and Western Asia peaks at $7.58B in 1992 and again in 1999, then falls away. Southern Africa starts receiving around 1988 and rises to $1.35B by 2013. The remaining sub-regions (Northern America, Northern, Western and Southern Europe, and Australia and New Zealand) receive little, in short blips, mostly around 1980–81. These findings reflect only the countries present in the dataset for each sub-region and cannot be considered a holistic pattern of the sub-region.4f:T9fd,### Q3.3 For this question, I decided to create two plots: a multi-choropleth and a stacked area chart. The choropleth uses a 5-Year bucket, with the last bucket having the outlying final year folded in to create a six-year bucket. As a result, for the absolute amount mode, we normalize by the number of years in the bucket (both area charts use single-year buckets). Rather than using a time slider for the choropleth here, a multi-plot choropleth allows the reader to get a sense of the "history of donations" directly without having to rely on moving a slider around and trying to remember what the plot looked like each time. A time slider would also work here but it is slightly less effective and asks more from the reader to gauge the history. I added a zoom feature that zooms each of the choropleths together to allow for closer inspection of specific countries (along with a reset view). The color scale is a Symmetric Logarithm with InterpolateYlOrRd (unidirectional gradient) since we are plotting the absolute amounts here which makes the diverging scales we used earlier inappropriate. While this plot gives the spatial information, since the question also asks for region-based pattern identification, I decided to use the UN M49 region codes (manually transcribed) to group each category into buckets by their geographical region. Using these groups, I then created a stacked area chart to allow a reader to quickly grasp how the donations have changed over time for each region. The reader can also select an region by clicking on its respective area to highlight the region in the multi-choropleth. Additionally, the reader can switch between absolute amounts and relative share of the total aid received in each year. However, I found that the area chart becomes impossible to read for a few regions because of how small their areas become. I had to use a linear scale since a stacked area chart only makes sense if equal heights mean equal dollars. Hence, I created an alternate visualisation - per region area charts w/ shared Y-axis, or independent Y-axis toggles. This visualisation asks more from the reader to be able to compare different regions at once. But it enables for a more easier read of how each region's aid received changes over time (especially in the independent Y-axis mode). The shared Y-axis mode shares the same problem as the stacked area chart but it does a better job of not completely washing out the regions with smaller areas. Finally, vertical dashed lines separate the year buckets in both area charts.50:[{"id":"09040dddbda03374a466600047ccbc70c46e6853884eb725db2141c566ca1b78fb7cc935096e8d5468c21e8df215e73fc49cdaaf7e2f1f89139793da25be02b2","href":"https://static.observableusercontent.com/files/09040dddbda03374a466600047ccbc70c46e6853884eb725db2141c566ca1b78fb7cc935096e8d5468c21e8df215e73fc49cdaaf7e2f1f89139793da25be02b2","name":"aiddata-countries-only - aiddata-countries-only.csv","type":"text/csv","lastModified":1793921471446,"size":8760387},{"id":"55260abbc777c0a3b8fed19f3929dd822fef9d5118b53b76b2176d20782910e599eac919999ea8ee85a60b783fd37082574f6591fd46c0d70ddf9b00df71ce27","href":"https://static.observableusercontent.com/files/55260abbc777c0a3b8fed19f3929dd822fef9d5118b53b76b2176d20782910e599eac919999ea8ee85a60b783fd37082574f6591fd46c0d70ddf9b00df71ce27","name":"countries-50m.json","type":"application/json","lastModified":1793982368728,"size":4177662}] 38:{"id":"e54e3b628829d1c9","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-05T23:21:00.831Z","update_time":"$D2026-11-09T01:23:31.431Z","view_time":null,"first_public_time":"$D2026-11-09T01:26:13.523Z","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":"e20480b7a2db9054","login":"yathin-reddy-duvuru","name":"Yathin Reddy Duvuru","avatar_url":"https://avatars-next.observableusercontent.com/5654f06e7bde7c486076fdfca380408ddedff916548794f20abaa0b78fb47d2a","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":544,"publish_version":544,"role":null,"authored":false,"authors":[{"type":"individual","id":"c2a9801d2d4c97e2","login":"yathin-reddy-duvuru","name":"Yathin Reddy Duvuru","avatar_url":"https://avatars-next.observableusercontent.com/5654f06e7bde7c486076fdfca380408ddedff916548794f20abaa0b78fb47d2a","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"e20480b7a2db9054","login":"yathin-reddy-duvuru","name":"Yathin Reddy Duvuru","avatar_url":"https://avatars-next.observableusercontent.com/5654f06e7bde7c486076fdfca380408ddedff916548794f20abaa0b78fb47d2a","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":185,"value":"// Hello world!","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"### Q1.1","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"// Load the Data from Downloaded File\nconst sourceData = FileAttachment(\"aiddata-countries-only - aiddata-countries-only.csv\").csv()","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"Inputs.table(sourceData)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"// Load World Atlas Geodata from Downloaded File(50m resolution includes Monaco and Liechtenstein)\nconst mapData = await FileAttachment(\"countries-50m.json\").json()\n\n// Expose the Country Name as properties.name for Joining with the Dataset\nconst countryFeatures = {\n type: \"FeatureCollection\",\n features: mapData.features.map(f => ({ ...f, properties: { ...f.properties, name: f.properties.NAME } }))\n}","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"// Alias Mapping for Dataset Country Names that Differ from World Atlas Names\nconst nameAliases = new Map([\n [\"Czech Republic\", \"Czechia\"],\n [\"Korea\", \"South Korea\"],\n [\"Slovak Republic\", \"Slovakia\"],\n [\"United States\", \"United States of America\"]\n ]);\n\nconst toAtlasName = name => nameAliases.get(name) ?? name;","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"// Clean Rows for Per-Year Aggregation\nconst q1Rows = sourceData\n .map(d => ({\n year: +d.year,\n donor: toAtlasName(d.donor),\n recipient: toAtlasName(d.recipient),\n amount: Number(d.commitment_amount_usd_constant) || 0\n }))\n .filter(d => Number.isFinite(d.year) && d.year > 0);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"Inputs.table(q1Rows, {\n format: {\n year: d => d.toString() //Formatting for Year\n }\n})","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"// Aggregate Donated and Received Amount per Country per Year (Single-Year Bins)\nconst q1Donated = d3.rollup(q1Rows, v => d3.sum(v, d => d.amount), d => d.donor, d => d.year);\nconst q1Received = d3.rollup(q1Rows, v => d3.sum(v, d => d.amount), d => d.recipient, d => d.year);\n\nconst q1YearExtent = d3.extent(q1Rows, d => d.year);\nconst q1Years = d3.range(q1YearExtent[0], q1YearExtent[1] + 1);\n\n// Create Set of All Unique Countries (Donated or Received) in the Aid Data\nconst q1Countries = Array.from(\n new Set([...q1Donated.keys(), ...q1Received.keys()])\n).filter(Boolean).sort(d3.ascending);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"// Build a Zero-Filled Yearly Series per Country with its Normalized Aid Balance - Generated w/ AI\n// Balance is null when a Country Neither Donated nor Received that Year\nconst q1Series = new Map(q1Countries.map(country => [\n country,\n q1Years.map(year => {\n const donated = q1Donated.get(country)?.get(year) ?? 0;\n const received = q1Received.get(country)?.get(year) ?? 0;\n const total = donated + received;\n\n return {\n year,\n donated,\n received,\n balance: total === 0 ? null : (donated - received) / total\n };\n })\n]));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"// Check for Dataset Country Names that Match no Map Shape (Should be Empty)\nconst q1AtlasNames = new Set(countryFeatures.features.map(d => d.properties.name));\n\ndisplay({ unmatchedData: q1Countries.filter(n => !q1AtlasNames.has(n)) });","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"// Look Up a Country's Record for a Given Year\nconst q1Lookup = (name, year) => q1Series.get(name)?.[year - q1YearExtent[0]];\n\n// Format Dollar Amounts (e.g. $1.23G)\nconst q1Usd = d3.format(\"$.3s\");","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"// Create the Year Slider\nconst q1YearInput = Inputs.range(q1YearExtent, { label: \"Year\", step: 1, value: 2000, width: 450 });\nconst q1Year = Generators.input(q1YearInput);\n\n// Create the Country Selector (Also Set by Clicking the Map)\nconst q1CountryInput = Inputs.select(q1Countries, { label: \"Country\", value: \"United States of America\" });\nconst q1Country = Generators.input(q1CountryInput);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"// Create a Play/Pause Button that Advances the Year Slider - Generated w/ AI\nconst q1PlayButton = (() => {\n const button = document.createElement(\"button\");\n button.textContent = \"▶ Play\";\n let timer = null;\n\n const stop = () => {\n clearInterval(timer);\n timer = null;\n button.textContent = \"▶ Play\";\n };\n\n const setYear = year => {\n q1YearInput.value = year;\n q1YearInput.dispatchEvent(new Event(\"input\", { bubbles: true }));\n };\n\n button.onclick = () => {\n if (timer) return stop();\n button.textContent = \"⏸ Pause\";\n if (+q1YearInput.value >= q1YearExtent[1]) setYear(q1YearExtent[0]);\n\n timer = setInterval(() => {\n if (+q1YearInput.value >= q1YearExtent[1]) return stop();\n setYear(+q1YearInput.value + 1);\n }, 500);\n };\n\n invalidation.then(stop);\n return button;\n})();","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"// Create a Choropleth Visualization using a geoNaturalEarth1 Projection\nconst q1VizDims = {\n width: 800,\n height: 400,\n marginTop: 50,\n marginRight: 220,\n marginBottom: 20,\n marginLeft: 20,\n};\n\nconst q1Plot = d3.create(\"svg\")\n .attr(\"width\", q1VizDims.width + q1VizDims.marginLeft + q1VizDims.marginRight)\n .attr(\"height\", q1VizDims.height + q1VizDims.marginTop + q1VizDims.marginBottom);\n\nconst q1Chart = q1Plot.append(\"g\")\n .attr(\"transform\", `translate(${q1VizDims.marginLeft}, ${q1VizDims.marginTop})`);\n\nconst q1MapTitle = q1Plot.append(\"text\")\n .attr(\"x\", (q1VizDims.width + q1VizDims.marginLeft + q1VizDims.marginRight) / 2)\n .attr(\"y\", 25)\n .attr(\"text-anchor\", \"middle\")\n .attr(\"font-weight\", 500);\n\n// Create a Diverging Color Scale (Blue = Net Donor, Red = Net Receiver)\nconst q1ColorScale = d3.scaleDiverging(d3.interpolateRdBu)\n .domain([-1, 0, 1]);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"// Create the Projection and the Path Object (Antarctica Excluded to Use the Space)\nconst q1Features = countryFeatures.features.filter(d => d.properties.name !== \"Antarctica\");\n\nconst q1Projection = d3.geoNaturalEarth1()\n .fitSize([q1VizDims.width, q1VizDims.height], { type: \"FeatureCollection\", features: q1Features });\n\nconst q1Path = d3.geoPath(q1Projection);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"// Draw Country Shapes (Click a Country to Select it)\nconst q1CountrySet = new Set(q1Countries);\n\nconst q1CountryShapes = q1Chart.selectAll(\".country\")\n .data(q1Features)\n .join(\"path\")\n .attr(\"class\", \"country\")\n .attr(\"d\", q1Path)\n .attr(\"fill\", \"#8a8a8a\")\n .style(\"cursor\", d => q1CountrySet.has(d.properties.name) ? \"pointer\" : \"default\")\n .on(\"click\", (event, d) => {\n if (!q1CountrySet.has(d.properties.name)) return;\n q1CountryInput.value = d.properties.name;\n q1CountryInput.dispatchEvent(new Event(\"input\", { bubbles: true }));\n });\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"$3f","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"$40","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"// Add Zoom and Pan to Q1 Map\nconst q1Zoom = d3.zoom()\n .scaleExtent([1, 8])\n .on(\"zoom\", event => {\n q1Chart.attr(\n \"transform\",\n `translate(${q1VizDims.marginLeft}, ${q1VizDims.marginTop}) ${event.transform}`\n );\n });\n\nq1Plot.call(q1Zoom);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"$41","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"// Move the Selected Year Marker\nq1LineView.marker\n .attr(\"x1\", q1LineView.x(q1Year))\n .attr(\"x2\", q1LineView.x(q1Year));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"// Create a Reset View Button that Animates the Map Back to its Original Zoom and Position - Generated w/ AI\nconst q1ResetButton = (() => {\n const button = document.createElement(\"button\");\n button.textContent = \"⟲ Reset View\";\n button.onclick = () => q1Plot.transition().duration(500).call(q1Zoom.transform, d3.zoomIdentity);\n return button;\n})();","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"//Generated w/ AI\nhtml`

${q1PlayButton}${q1YearInput}${q1CountryInput}${q1ResetButton}

`","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"q1Plot.node()","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"q1LineView.svg.node()","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"### Q1.2\n\nCountries such as the USA, Finland and Germany are consistently net donors while countries such as India, Brazil and Saudi Arabia are net receivers of aid. Additionally, these are also examples of countries that do not change their role over the entire time span of the dataset. Examples of countries that do are: Canada, Australia, Italy who alternate between being net donors and net receivers during the time span of the dataset.\n\nTaking the USA as an example, from the line charts, we can see that it has a sudden increase in aid received during 2007 where it received $105M in aid. Notably, this is the only year during the entire dataset time span that this country received any amount of aid. Another example is Australia, which alternates between being a net donor and a net receiver of aid (brief periods during which it receives a large amount of aid and none during the other periods).","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"$42","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"### Q2.1","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"// (\"Sectors not specified\" is how this CSV Labels Unspecified Purposes; no Row is Named Exactly \"UNSPECIFIED\")\nconst q2UnspecifiedNames = new Set([\"UNSPECIFIED\", \"SECTORS NOT SPECIFIED\"]);\nconst q2IsUnspecified = name => name == null || name.trim() === \"\" || q2UnspecifiedNames.has(name.trim().toUpperCase());\n\nconst q2Rows = sourceData\n .map(d => ({\n year: +d.year,\n purpose: d.coalesced_purpose_name,\n amount: Number(d.commitment_amount_usd_constant) || 0\n }))\n .filter(d => Number.isFinite(d.year) && d.year > 0 && !q2IsUnspecified(d.purpose));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"Inputs.table(q2Rows, {\n format: {\n year: d => d.toString()\n }\n})","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"// Rank Purposes by Total Amount Across All Countries and All Years and Keep the Top 10\nconst q2PurposeTotals = d3.rollup(q2Rows, v => d3.sum(v, d => d.amount), d => d.purpose);\n\nconst q2Top10 = Array.from(q2PurposeTotals, ([purpose, total]) => ({ purpose, total }))\n .sort((a, b) => d3.descending(a.total, b.total))\n .slice(0, 10);\n\nconst q2Purposes = q2Top10.map(d => d.purpose);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"// Build a Zero-Filled Series per Year (Single-Year Bins) for the Top 10 Purposes with Share of the Yearly Top-10 Total\nconst q2TopSet = new Set(q2Purposes);\nconst q2ByYear = d3.rollup(\n q2Rows.filter(d => q2TopSet.has(d.purpose)),\n v => d3.sum(v, d => d.amount),\n d => d.year,\n d => d.purpose\n);\n\nconst q2YearExtent = d3.extent(q2Rows, d => d.year);\nconst q2Years = d3.range(q2YearExtent[0], q2YearExtent[1] + 1);\n\nconst q2Series = new Map(q2Years.map(year => {\n const amounts = q2Purposes.map(purpose => q2ByYear.get(year)?.get(purpose) ?? 0);\n const total = d3.sum(amounts);\n\n return [year, q2Purposes.map((purpose, i) => ({\n year,\n purpose,\n amount: amounts[i],\n share: total === 0 ? 0 : amounts[i] / total\n }))];\n}));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"// Check which Purpose Names were Removed as Unspecified and the Resulting Top 10\ndisplay({\n removedNames: Array.from(new Set(sourceData.map(d => d.coalesced_purpose_name).filter(q2IsUnspecified))),\n otherNamesContainingUnspecified: Array.from(new Set(\n sourceData.map(d => d.coalesced_purpose_name).filter(n => !q2IsUnspecified(n) && /unspecified/i.test(n))\n )),\n top10: q2Top10\n});","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"$43","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"$44","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"$45","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"// Create the Bars and Value Labels\nconst q2Bars = q2Chart.append(\"g\")\n .selectAll(\"rect\")\n .data(q2Purposes)\n .join(\"rect\")\n .attr(\"x\", d => q2X(d))\n .attr(\"width\", q2X.bandwidth())\n .attr(\"y\", q2VizDims.height)\n .attr(\"height\", 0)\n .attr(\"fill\", d => q2Color(d));\n\nconst q2Labels = q2Chart.append(\"g\")\n .selectAll(\"text\")\n .data(q2Purposes)\n .join(\"text\")\n .attr(\"x\", d => q2X(d) + q2X.bandwidth() / 2)\n .attr(\"text-anchor\", \"middle\")\n .attr(\"font-size\", 10)\n .attr(\"pointer-events\", \"none\");","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"// Update Bars, Labels, Tooltips and Title for the Selected Year\nconst q2Current = new Map(q2Series.get(q2Year).map(r => [r.purpose, r]));\n\nq2Bars\n .transition()\n .duration(250)\n .attr(\"y\", d => q2Y(q2Current.get(d).amount))\n .attr(\"height\", d => q2VizDims.height - q2Y(q2Current.get(d).amount));\n\nq2Bars\n .selectAll(\"title\")\n .data(d => [d])\n .join(\"title\")\n .text(d => {\n const row = q2Current.get(d);\n return `${d} (${q2Year})\\nAmount: ${q2Money(row.amount)}\\nShare of Top-10 Total: ${d3.format(\".1%\")(row.share)}\\nAll-Time Total: ${q2Money(q2PurposeTotals.get(d))}`;\n });\n\nq2Labels\n .transition()\n .duration(250)\n .attr(\"y\", d => q2Y(q2Current.get(d).amount) - 4);\n\nq2Labels.text(d => {\n const row = q2Current.get(d);\n return row.amount === 0 ? \"None\" : `${q2Money(row.amount)} (${d3.format(\".0%\")(row.share)})`;\n});\n\nq2Title.text(`Top 10 Purposes by Total Disbursement, ${q2Year}`);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"html`

${q2PlayButton}${q2YearInput}

`","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"q2Plot.node()","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"q2Top10","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"$46","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"$47","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"### Q3.1","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"$48","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"// Clean Rows for Recipient Aggregation (Atlas Names, Numeric Year and Amount)\n// Rows with a Missing or Non-Numeric Year are Dropped\nconst q3Rows = sourceData\n .map(d => ({\n year: +d.year,\n recipient: toAtlasName(d.recipient),\n amount: Number(d.commitment_amount_usd_constant) || 0\n }))\n .filter(d => Number.isFinite(d.year) && d.year > 0 && d.recipient);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"// Build 5-Year Bins Starting at the First Year of Data; Last Window w/ Six Year is Folded Into Prior Window -\n// Since the Last Bin Differs in Length, so Maps Show the Average Annual Amount (Bin Total / Years in Bin)\nconst q3YearExtent = d3.extent(q3Rows, d => d.year);\nconst q3Years = d3.range(q3YearExtent[0], q3YearExtent[1] + 1);\nconst q3BinWidth = 5;\n\nconst q3Bins = (() => {\n const bins = d3.range(q3YearExtent[0], q3YearExtent[1] + 1, q3BinWidth)\n .map(start => ({ start, end: Math.min(start + q3BinWidth - 1, q3YearExtent[1]) }));\n\n const tail = bins[bins.length - 1];\n if (bins.length > 1 && tail.end - tail.start + 1 < q3BinWidth) {\n bins.pop();\n bins[bins.length - 1].end = tail.end;\n }\n\n return bins.map(b => ({\n ...b,\n years: b.end - b.start + 1,\n label: `${b.start}–${String(b.end).slice(-2)}`\n }));\n})();\n\nconst q3BinOf = year => q3Bins.find(b => year >= b.start && year <= b.end);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"// Aggregate Amount Received per Recipient per Bin, and per Region per Year (Zero-Filled) - Generated w/ AI\nconst q3Recipients = Array.from(new Set(q3Rows.map(d => d.recipient))).sort(d3.ascending);\n\nconst q3BinTotals = d3.rollup(q3Rows, v => d3.sum(v, d => d.amount), d => d.recipient, d => q3BinOf(d.year).start);\nconst q3BinAverage = (country, bin) => (q3BinTotals.get(country)?.get(bin.start) ?? 0) / bin.years;\n\nconst q3MaxAverage = d3.max(q3Recipients, c => d3.max(q3Bins, b => q3BinAverage(c, b))) || 1;\n\nconst q3RegionYearTotals = d3.rollup(q3Rows, v => d3.sum(v, d => d.amount), d => q3RegionOf.get(d.recipient), d => d.year);\n\nconst q3RegionRows = q3Years.map(year => {\n const row = { year };\n q3Regions.forEach(region => { row[region] = q3RegionYearTotals.get(region)?.get(year) ?? 0; });\n return row;\n});","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"// Check for Recipients that Match no Map Shape or no M49 Region (Both Should be Empty)\nconst q3AtlasNames = new Set(countryFeatures.features.map(d => d.properties.name));\n\ndisplay({\n unmatchedMapNames: q3Recipients.filter(n => !q3AtlasNames.has(n)),\n recipientsWithoutRegion: q3Recipients.filter(n => !q3RegionOf.has(n)),\n regionCountriesNotRecipients: Array.from(q3RegionOf.keys()).filter(n => !q3Recipients.includes(n))\n});","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"// Format Dollar Amounts (e.g. $1.23B); d3's SI Prefix \"G\" is Swapped for \"B\" (Billions)\nconst q3Usd = (value, format = d3.format(\"$.3s\")) => format(value).replace(\"G\", \"B\");","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"// Create the Region Highlight Selector (Also Set by Clicking the Regional Chart) and the Chart Mode Toggle\nconst q3RegionInput = Inputs.select([\"All Regions\", ...q3Regions], { label: \"Highlight Region\" });\nconst q3Region = Generators.input(q3RegionInput);\n\nconst q3ModeInput = Inputs.radio([\"Absolute Amount\", \"Share of Yearly Total\"], { label: \"Regional Chart\", value: \"Absolute Amount\" });\nconst q3Mode = Generators.input(q3ModeInput);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"$49","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"// Create the Projection and Path Object Shared by All Panels (Antarctica Excluded to Use the Space)\nconst q3Features = countryFeatures.features.filter(d => d.properties.name !== \"Antarctica\");\n\nconst q3Projection = d3.geoNaturalEarth1()\n .fitSize([q3VizDims.panelWidth, q3VizDims.panelHeight], { type: \"FeatureCollection\", features: q3Features });\n\nconst q3Path = d3.geoPath(q3Projection);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"$4a","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"$4b","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"// Highlight the Selected Region on Every Map (Other Countries Fade)\nconst q3InSelected = d => q3Region !== \"All Regions\" && q3RegionOf.get(d.name) === q3Region;\n\nq3CountryShapes\n .attr(\"opacity\", d => q3Region === \"All Regions\" || q3InSelected(d) ? 1 : 0.2)\n .attr(\"stroke\", d => q3InSelected(d) ? \"#111\" : \"#ffffff\")\n .attr(\"stroke-width\", d => q3InSelected(d) ? 0.9 : 0.3);\n\nq3CountryShapes.filter(q3InSelected).raise();","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"$4c","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"html`

${q3RegionInput}${q3ModeInput}${q3ResetButton}