function stacked_bar_chart_interactive(fullAidData, selectedRegion = "World", countryData) { const countries = countryData .filter(d => d.region === selectedRegion) .map(d => d.country); const filteredData = fullAidData.filter(d => countries.includes(d.country)); const thresholdPercent = 0.02; const sectorTotals = d3.rollups( filteredData, v => d3.sum(v, d => d.amount), d => d.sector ); const grandTotal = d3.sum(sectorTotals, d => d[1]); const smallSectors = new Set( sectorTotals.filter(([s, amt]) => amt / grandTotal < thresholdPercent).map(d => d[0]) ); const cleaned = filteredData.map(d => ({ year: d.year, amount: d.amount, sector: smallSectors.has(d.sector) ? "Other" : d.sector })); const filtered = cleaned.filter(d => d.year >= 2001 && d.year <= 2020); const sectorTotalsSorted = Array.from( d3.rollup(filtered, v => d3.sum(v, d => d.amount), d => d.sector) ).sort((a, b) => d3.descending(a[1], b[1])); const sectors = sectorTotalsSorted.map(d => d[0]); const years = Array.from(new Set(filtered.map(d => d.year))).sort((a, b) => a - b); const fullData = years.map(year => { const entry = { year }; const matching = filtered.filter(d => d.year === year); for (const sector of sectors) { entry[sector] = d3.sum(matching.filter(m => m.sector === sector), d => d.amount) || 0; } return entry; }); const stack = d3.stack().keys(sectors); const stackedSeries = stack(fullData); const width = 800; const height = 400; const margin = { top: 40, right: 100, bottom: 50, left: 40 }; const svg = d3.create("svg") .attr("width", width) .attr("height", height); const x = d3.scaleBand() .domain(fullData.map(d => d.year)) .range([margin.left, width - margin.right]) .padding(0.2); const y = d3.scaleLinear() .domain([0, d3.max(fullData, d => d3.sum(sectors, k => d[k]))]) .nice() .range([height - margin.bottom, margin.top]); const color = d3.scaleOrdinal() .domain(sectors) .range(d3.schemeDark2.concat(d3.schemeSet3)); const tooltip = d3.select("body").append("div") .style("position", "absolute") .style("padding", "6px 10px") .style("background", "white") .style("border", "1px solid #ccc") .style("font", "12px sans-serif") .style("pointer-events", "none") .style("opacity", 0); const barGroups = svg.append("g") .selectAll("g") .data(stackedSeries) .join("g") .attr("fill", d => color(d.key)); const bars = barGroups.selectAll("rect") .data(d => d.map(v => ({ ...v, key: d.key }))) .join("rect") .attr("x", d => x(d.data.year)) .attr("width", x.bandwidth()) .attr("y", y(0)) .attr("height", 0); bars.transition() .duration(800) .attr("y", d => y(d[1])) .attr("height", d => y(d[0]) - y(d[1])); bars.on("mouseover", function (event, d) { d3.select(this).style("stroke", "#000").style("stroke-width", 1.5); tooltip.style("opacity", 1) .html(`Sector: ${d.key}
Year: ${d.data.year}
Amount: ${d3.format("$,.1s")(d.data[d.key])}`); }) .on("mousemove", event => { tooltip.style("left", (event.pageX + 12) + "px") .style("top", (event.pageY - 28) + "px"); }) .on("mouseout", function () { d3.select(this).style("stroke", null); tooltip.style("opacity", 0); }); svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).tickFormat(d3.format("d"))); svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).tickFormat(d3.format(".2s"))); svg.append("text") .attr("x", width / 2) .attr("y", margin.top / 2) .attr("text-anchor", "middle") .style("font-size", "16px") .text(`U.S. Foreign Aid by Sector (${selectedRegion}, 2001–2020)`); return svg.node(); }