2d:null 2e:["$","title",null,{"children":"FINAL PROJECT | NIU ReDAV | Observable"}] 33:T46b,worldMap = Plot.plot({ width: 1000, height: 500, projection: { type: "mercator", domain: worldNoAntarctica }, color: { type: "ordinal", domain: [...transactionTypes], range: [ "#e41a1c", "#377eb8", "#4daf4a", "#984ea3" ], legend: true, label: "Dominant Transaction Type" }, marks: [ Plot.geo(worldNoAntarctica, { fill: d => { const rec = dominantByCountry.get(d.properties.name); return rec ? rec.transaction : "No data"; }, stroke: "white", strokeWidth: 0.5, title: d => { const rec = dominantByCountry.get(d.properties.name); return rec ? `${d.properties.name}\nTransaction: ${rec.transaction}\nAmount: $${rec.amount.toLocaleString()}` : `${d.properties.name}\nNo data`; }, pointerEvents: "visiblePainted" }), Plot.geo(worldNoAntarctica, { fill: "gray", opacity: 0.5, stroke: "white", strokeWidth: 0.5, title: d => `${d.properties.name}\nNo data`, filter: d => !dominantByCountry.has(d.properties.name) }) ] });34:Ta1c,function region_donut_chart(data, onClick) { const width = 500; const height = 400; const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("id", "region-pie"); const regionRollup = d3.rollup( data, v => d3.sum(v, d => d.amount), d => d.region ); const totalAmount = d3.sum(regionRollup.values()); const threshold = totalAmount * 0.03; const grouped = []; let otherAmount = 0; for (const [region, amount] of regionRollup.entries()) { if (amount < threshold) { otherAmount += amount; } else { grouped.push({ region, amount }); } } if (otherAmount > 0) grouped.push({ region: "Other", amount: otherAmount }); const color = d3.scaleOrdinal() .domain(grouped.map(d => d.region)) .range(d3.schemeTableau10); const pie = d3.pie().value(d => d.amount).sort(null); const arc = d3.arc().innerRadius(85).outerRadius(155); const g = svg.append("g") .attr("transform", `translate(${width / 2}, ${height / 2})`); const part = g.selectAll("g") .data(pie(grouped)) .join("g") .on("mouseover", function (event, d) { d3.select(this).raise().select("path") .attr("stroke", "black") .attr("stroke-width", 2); }) .on("mouseout", function () { if (!d3.select(this).classed("active")) { d3.select(this).select("path").attr("stroke", null); } }) .on("click", function (event, d) { g.selectAll("path").attr("stroke", null).attr("stroke-width", null); d3.select(this).select("path").attr("stroke", "black").attr("stroke-width", 2); if (onClick) onClick(d.data.region); }); part.append("path") .attr("d", arc) .attr("fill", d => color(d.data.region)) .append("title") .text(d => `${d.data.region}: $${d3.format(".2s")(d.data.amount)}`); const minAngle = 0.15; part.filter(d => d.endAngle - d.startAngle > minAngle) .append("text") .attr("transform", d => { const [x, y] = arc.centroid(d); const angle = (d.startAngle + d.endAngle) * 90 / Math.PI; return `translate(${x},${y}) rotate(${angle > 180 ? angle + 90 : angle - 90})`; }) .attr("text-anchor", "middle") .style("font-size", "11px") .style("pointer-events", "none") .selectAll("tspan") .data(d => { const label = d.data.region === "East Asia and Oceania" ? "East Asia" : d.data.region; return label.split(" "); }) .join("tspan") .attr("x", 0) .attr("dy", (d, i) => `${i === 0 ? 0 : 1.1}em`) .text(d => d); return svg.node(); } 35:Tfaf,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(); } 36:T419,line_chart = Plot.plot({ height: 300, width: 400, x: { label: "Year", ticks: [2000, 2005, 2010, 2015, 2020], grid: true }, y: { label: "Aid Amount (USD)", grid: true, tickFormat: d => formatAmount(d) }, color: { domain: regions, scheme: "Tableau10", legend: true }, marks: [ ...regions.map(region => Plot.line( grouped.filter(d => d.region === region) .sort((a, b) => d3.ascending(a.year, b.year)), { x: "year", y: "amount", stroke: "region", strokeWidth: 2, className: "line", title: d => `${d.region}\nYear: ${d.year}\nAmount: $${formatAmount(d.amount)}\n` }) ), Plot.dot(grouped, { x: "year", y: "amount", stroke: "region", fill: "region", r: 4, className: "dot", title: d => `${d.region}\nYear: ${d.year}\nAmount: $${formatAmount(d.amount)}` }), Plot.ruleX([2000, 2005, 2010, 2015, 2020], { stroke: "#ccc" }) ] }); 37:[{"id":"9078a1b0c4e167197460d42481605f18ff8229858438b5f037c17ba5d06908f533a8ef29bf51170599adb112746920cc63bbe676993a761ba3a7bb312af7e7ee","href":"https://static.observableusercontent.com/files/9078a1b0c4e167197460d42481605f18ff8229858438b5f037c17ba5d06908f533a8ef29bf51170599adb112746920cc63bbe676993a761ba3a7bb312af7e7ee","name":"Screenshot 2025-04-27 172214.png","type":"image/png","lastModified":1767109316545.385,"size":71243}] 31:{"id":"45b259b6c7eff673","slug":"final-project","title":"FINAL PROJECT","thumbnail":"f5851429bb346f560f90d7746dd2cf4cdc27d23058993750973cff926681cc40","access_level":"public","create_time":"$D2025-12-30T15:41:56.545Z","update_time":"$D2025-12-30T15:41:56.545Z","view_time":null,"first_public_time":"$D2025-12-30T15:42:33.449Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"6be90def0eaad608","login":"niu-redav","name":"NIU ReDAV","avatar_url":"https://avatars-next.observableusercontent.com/4f6116f4cf961cd7132568b8dbe99bfaa543dbb9ef5eca3152ed1f54f12d0e0b","tier":"pro_2024"},"version":245,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"93c3a50684bdc9b8","login":"z2024036","name":"Z2024036","avatar_url":"https://avatars-next.observableusercontent.com/10a39998c94662359ef19838cbec730913857e7f1117d11eb484c18a332c6315","tier":null}],"members":[{"type":"individual","id":"0290d485d6927639","login":"dakoop","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3db1688f30a1b05a38931e472a94cfdfe52090e6ecdd5fe4b5f9ed17708aebe4","tier":null,"role":"editor"},{"type":"team","id":"6be90def0eaad608","login":"niu-redav","name":"NIU ReDAV","avatar_url":"https://avatars-next.observableusercontent.com/4f6116f4cf961cd7132568b8dbe99bfaa543dbb9ef5eca3152ed1f54f12d0e0b","tier":"pro_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"FINAL PROJECT","cells":[{"id":0,"value":"# FINAL PROJECT\n- Anu Pallavi Sunkara(z2021592), Sai Sindhu Dandibhatla(z2024036)\n- CSCI 627 Data Visualization","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"

Tracing U.S. Foreign Aid: A Visual Story of Global Impact

It covers U.S. Foreign Aid from 2001 to 2020, showing for each country bounded by region in dollars.

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":236,"value":"screenshot20250427172214 = FileAttachment(\"Screenshot 2025-04-27 172214.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"## Tasks","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":165,"value":"1. Finding out the overall distribution of aid across different regions.\n \n2. How has aid been allocated across sectors each year for a selected region-highlighting which sector received the largest share, which years saw the highest and lowest totals, and the trends of each sector’s funding over time?\n \n3. How have aid volumes varied over time across all regions, and what trends emerge in each region’s funding levels?\n \n4. Which type of U.S. foreign-assistance transaction (Appropriated & Planned, Obligations, Disbursements or President's Budget Requests) has been in each country for a given year, and how has that spatial distribution shifted from 2001 through 2020?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":26,"value":"{\n const layout = html`\n

\n `;\n\n const donutDiv = layout.querySelector(\"#donut\");\n const barDiv = layout.querySelector(\"#bar\");\n const lineChartDiv = layout.querySelector(\"#line-chart\");\n\n const defaultRegion = \"East Asia\"; \n const initialBar = stacked_bar_chart_interactive(fullAidData, undefined, countryData);\n barDiv.appendChild(initialBar);\n\n const donut = region_donut_chart(countryData, region => {\n const barChart = stacked_bar_chart_interactive(fullAidData, region, countryData);\n barDiv.innerHTML = \"\"; \n barDiv.appendChild(barChart); \n });\n\n donutDiv.appendChild(donut); \n lineChartDiv.appendChild(line_chart);\n\n return layout;\n}\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"viewof year = Scrubber(years, {delay: 1000, value: \"2000\", autoplay: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"countryData = d3.csv(\"https://raw.githubusercontent.com/anu1210/USForeignAssistance/refs/heads/main/us_foreign_aid_country%20(2).csv\", d => ({\n country: d[\"Country Name\"],\n year: +d[\"Fiscal Year\"],\n amount: +d[\"current_amount\"],\n region: d[\"Region Name\"]\n }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":" sectorData = d3.csv(\"https://raw.githubusercontent.com/anu1210/USForeignAssistance/refs/heads/main/us_foreign_aid_dac_sector%20(1).csv\", d => ({\n sector: d[\"International Sector Name\"],\n year: +d[\"Fiscal Year\"],\n amount: +d[\"current_amount\"],\n internationalSectorName: d[\"International Sector Name\"]\n }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"fullAidData = d3.csv(\"https://raw.githubusercontent.com/anu1210/USForeignAssistance/refs/heads/main/us_foreign_aid_usg_sector.csv\", d => ({\n country: d[\"Country Name\"],\n sector: d[\"US Sector Name\"],\n year: +d[\"Fiscal Year\"],\n amount: +d[\"current_amount\"],\n code: d[\"Country Code\"],\n transaction: d[\"Transaction Type Name\"],\n const_amount: +d[\"constant_amount\"]\n})).then(data => data.filter(d => d.year && d.amount && d.country && d.sector));\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"regionData = {\n const regionByYear = d3.rollups(\n countryData,\n v => d3.sum(v, d => +d.amount),\n d => d.year,\n d => d.region\n );\n\n const result = [];\n for (let [year, regionList] of regionByYear) {\n for (let [region, amount] of regionList) {\n result.push({ year, region, amount });\n }\n }\n\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"world = await fetch(\"https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json\")\n .then(res => res.json())\n .then(data => topojson.feature(data, data.objects.countries));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"mutable selectedRegion = \"World\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"transactionTypes = Array.from(new Set(fullAidData.map(d => d.transaction)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"dominantByCountry = {\n const m = new Map();\n for (const d of fullAidData) {\n if (d.year === year) {\n const prev = m.get(d.country);\n if (!prev || d.amount > prev.amount) m.set(d.country, d);\n }\n }\n return m;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"worldNoAntarctica = (\n {\n type: \"FeatureCollection\",\n features: world.features.filter(d => d.properties.name !== \"Antarctica\")\n }\n)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"years = Array.from({length: 20}, (_, i) => 2001 +i)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"yearsOfInterest = new Set([2000, 2005, 2010, 2015, 2020]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"filtered = regionData.filter(d =>\n yearsOfInterest.has(d.year) && d.region && d.amount);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"grouped = Array.from(\n d3.rollup(\n filtered,\n v => d3.sum(v, d => d.amount),\n d => d.region,\n d => d.year\n ),\n ([region, yearMap]) =>\n Array.from(yearMap, ([year, amount]) => ({\n region: region,\n year: year,\n amount: amount\n }))\n).flat();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"regions = Array.from(new Set(grouped.map(d => d.region)));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"import {Plot} from \"@mkfreeman/plot-tooltip\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"function formatAmount(amount) {\n if (amount >= 1000000) {\n return (amount / 1000000).toFixed(1) + 'M'; // Millions\n } else if (amount >= 1000) {\n return (amount / 1000).toFixed(1) + 'K'; // Thousands\n } else {\n return amount.toLocaleString(); \n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 32:"$31:body"