34:["$","title",null,{"children":"Mini-Project 2: Temporal Data Visualization (Due Nov. 12th) | Shalini Gupta | 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:T3d35, vis1 = { // VISUALIZATION 1: GLOBAL AID FLOWS // Uses the existing aiddata cell. const blue = "#2563eb"; const orange = "#ea580c"; const gray = "#64748b"; const data = aiddata.filter(d => Number.isFinite(d.yearInt) && Number.isFinite(d.amount) && d.amount >= 0 ); const minYear = d3.min(data, d => d.yearInt); const maxYear = d3.max(data, d => d.yearInt); const years = d3.range(minYear, maxYear + 1); // 1. Aggregate donations by country and year const byCountry = new Map(); function add(country, year, type, amount) { if (!country || !String(country).trim()) return; if (!byCountry.has(country)) { byCountry.set(country, new Map()); } const annual = byCountry.get(country); if (!annual.has(year)) { annual.set(year, {year, sent: 0, received: 0}); } annual.get(year)[type] += amount; } for (const d of data) { add(d.donor, d.yearInt, "sent", d.amount); add(d.recipient, d.yearInt, "received", d.amount); } // 2. Create country summaries const countries = Array.from(byCountry, ([country, map]) => { const series = years.map(year => map.get(year) || {year, sent: 0, received: 0} ); const sent = d3.sum(series, d => d.sent); const received = d3.sum(series, d => d.received); const total = sent + received; const balance = total ? (sent - received) / total : 0; const role = balance > 0.2 ? "Mostly Donor" : balance < -0.2 ? "Mostly Recipient" : "Relatively Balanced"; return { country, series, sent, received, total, balance, role }; }).sort((a, b) => b.total - a.total); const countryMap = new Map( countries.map(d => [d.country, d]) ); const formatMoney = v => { const sign = v < 0 ? "-" : ""; const a = Math.abs(v); if (a >= 1e12) return sign + "$" + (a / 1e12).toFixed(2) + "T"; if (a >= 1e9) return sign + "$" + (a / 1e9).toFixed(2) + "B"; if (a >= 1e6) return sign + "$" + (a / 1e6).toFixed(2) + "M"; return sign + "$" + d3.format(",.0f")(a); }; const root = d3.create("div") .style("font-family", "Arial, sans-serif") .style("max-width", "1100px") .style("background", "#ffffff") .style("padding", "22px") .style("color", "#1e293b"); root.append("h2") .style("margin", "0 0 8px") .style("font-size", "27px") .text("Global Aid Flows Over Time"); root.append("p") .style("color", gray) .style("font-size", "14px") .text( `Country-level aid commitments, ${minYear}-${maxYear}. ` + "Compare donors, recipients, and changes over time." ); // 3. Global classification summary const counts = { donor: countries.filter(d => d.role === "Mostly Donor").length, recipient: countries.filter(d => d.role === "Mostly Recipient").length, balanced: countries.filter(d => d.role === "Relatively Balanced").length }; const stats = root.append("div") .style("display", "grid") .style("grid-template-columns", "repeat(3, 1fr)") .style("gap", "12px") .style("margin", "24px 0"); [ ["Mostly Donors", counts.donor, blue], ["Mostly Recipients", counts.recipient, orange], ["Relatively Balanced", counts.balanced, "#64748b"] ].forEach(([label, value, color]) => { const card = stats.append("div") .style("background", "#f8fafc") .style("border", "1px solid #e2e8f0") .style("border-radius", "8px") .style("padding", "15px"); card.append("div") .style("font-size", "27px") .style("font-weight", "bold") .style("color", color) .text(value); card.append("div") .style("font-size", "12px") .text(label); }); // 4. Country overview root.append("h3") .style("margin-top", "26px") .text("1. Global Donor vs. Recipient Overview"); root.append("p") .style("font-size", "13px") .style("color", gray) .text( "Top 24 countries by total aid activity. " + "Bars show the proportion of aid sent versus received. " + "Click a country to inspect its timeline." ); const overview = countries.slice(0, 24); const ow = 1000; const rowHeight = 27; const oh = overview.length * rowHeight + 65; const center = 565; const barHalf = 290; const osvg = root.append("svg") .attr("viewBox", `0 0 ${ow} ${oh}`) .style("width", "100%") .style("height", "auto"); osvg.append("text") .attr("x", center - 125) .attr("y", 20) .attr("text-anchor", "middle") .attr("fill", orange) .attr("font-size", 13) .text("Mostly Receiving"); osvg.append("text") .attr("x", center + 125) .attr("y", 20) .attr("text-anchor", "middle") .attr("fill", blue) .attr("font-size", 13) .text("Mostly Sending"); osvg.append("line") .attr("x1", center).attr("x2", center) .attr("y1", 33).attr("y2", oh - 12) .attr("stroke", "#94a3b8") .attr("stroke-dasharray", "4,4"); const rows = osvg.selectAll(".country-row") .data(overview) .join("g") .attr("class", "country-row") .attr("transform", (d, i) => `translate(0,${45 + i * rowHeight})` ) .style("cursor", "pointer"); rows.append("rect") .attr("x", 0).attr("y", -3) .attr("width", ow).attr("height", rowHeight) .attr("fill", (d, i) => i % 2 ? "#f8fafc" : "#ffffff" ); rows.append("text") .attr("x", 12).attr("y", 13) .attr("font-size", 12) .attr("fill", "#334155") .text(d => d.country.length > 29 ? d.country.slice(0, 28) + "…" : d.country); rows.append("rect") .attr("x", d => center + Math.min(0, d.balance) * barHalf) .attr("y", 1) .attr("width", d => Math.abs(d.balance) * barHalf) .attr("height", 15) .attr("rx", 2) .attr("fill", d => d.balance >= 0 ? blue : orange); rows.append("text") .attr("x", 900).attr("y", 13) .attr("font-size", 11) .attr("fill", gray) .text(d => formatMoney(d.total)); rows.append("title") .text(d => `${d.country}\nSent: ${formatMoney(d.sent)}` + `\nReceived: ${formatMoney(d.received)}\n${d.role}` ); // 5. Individual country timeline root.append("h3") .style("margin-top", "30px") .text("2. Country-Level Aid Timeline"); const controls = root.append("div") .style("display", "flex") .style("align-items", "center") .style("gap", "12px") .style("flex-wrap", "wrap") .style("margin", "16px 0"); controls.append("label") .style("font-weight", "bold") .text("Select Country:"); const select = controls.append("select") .style("padding", "10px") .style("border", "1px solid #cbd5e1") .style("border-radius", "6px") .style("background", "white"); select.selectAll("option") .data(countries.slice().sort((a,b) => d3.ascending(a.country, b.country) )) .join("option") .attr("value", d => d.country) .text(d => d.country); // Quick examples for exploring each type const examples = root.append("div") .style("display", "flex") .style("gap", "8px") .style("flex-wrap", "wrap") .style("margin-bottom", "14px"); for (const role of [ "Mostly Donor", "Mostly Recipient", "Relatively Balanced" ]) { const example = countries.find(d => d.role === role); if (!example) continue; examples.append("button") .style("padding", "7px 10px") .style("border", "1px solid #cbd5e1") .style("border-radius", "5px") .style("background", "#f8fafc") .style("cursor", "pointer") .style("font-size", "12px") .text(`${role}: ${example.country}`) .on("click", () => choose(example.country)); } const legend = root.append("div") .style("display", "flex") .style("gap", "22px") .style("margin", "16px 0"); [["Aid Sent", blue], ["Aid Received", orange]] .forEach(([name, color]) => { const item = legend.append("span"); item.append("span") .style("display", "inline-block") .style("width", "14px") .style("height", "4px") .style("background", color) .style("vertical-align", "middle") .style("margin-right", "7px"); item.append("span").text(name); }); const width = 1000, height = 440; const m = {top: 30, right: 55, bottom: 55, left: 95}; const w = width - m.left - m.right; const h = height - m.top - m.bottom; const svg = root.append("svg") .attr("viewBox", `0 0 ${width} ${height}`) .style("width", "100%") .style("height", "auto"); const g = svg.append("g") .attr("transform", `translate(${m.left},${m.top})`); const x = d3.scaleLinear() .domain([minYear, maxYear]) .range([0, w]); const y = d3.scaleLinear().range([h, 0]); const grid = g.append("g"); const xAxis = g.append("g") .attr("transform", `translate(0,${h})`); const yAxis = g.append("g"); const sentLine = g.append("path") .attr("fill", "none") .attr("stroke", blue) .attr("stroke-width", 2.5) .attr("stroke-linejoin", "round"); const receivedLine = g.append("path") .attr("fill", "none") .attr("stroke", orange) .attr("stroke-width", 2.5) .attr("stroke-linejoin", "round"); const markers = g.append("g"); svg.append("text") .attr("x", 20).attr("y", height / 2) .attr("transform", `rotate(-90,20,${height / 2})`) .attr("text-anchor", "middle") .attr("font-size", 13) .text("Annual Aid Commitments (USD)"); svg.append("text") .attr("x", width / 2).attr("y", height - 8) .attr("text-anchor", "middle") .attr("font-size", 13) .text("Year"); // 6. Insights root.append("h3") .style("margin-top", "22px") .text("3. Country Insights & Historical Changes"); const insight = root.append("div") .style("background", "#f8fafc") .style("border", "1px solid #e2e8f0") .style("border-radius", "9px") .style("padding", "18px") .style("font-size", "14px") .style("line-height", "1.8"); const footnote = root.append("p") .style("font-size", "12px") .style("color", gray) .style("margin-top", "18px") .text( "Method: Aid is aggregated by commitment year. " + "Countries are classified by their cumulative net " + "aid share: above +20% donor, below -20% recipient, " + "otherwise relatively balanced. Annual role changes " + "compare consecutive active years. Peaks and valleys " + "refer to the largest consecutive-year changes in " + "combined sent and received commitments. " + "These data represent commitments, not necessarily " + "funds actually disbursed." ); function choose(country) { select.property("value", country); update(country); } function update(country) { const c = countryMap.get(country); if (!c) return; const s = c.series; const ymax = d3.max(s, d => Math.max(d.sent, d.received) ) || 1; y.domain([0, ymax]).nice(); xAxis.call( d3.axisBottom(x) .ticks(9) .tickFormat(d3.format("d")) ); yAxis.call( d3.axisLeft(y) .ticks(6) .tickFormat(d3.format("~s")) ); grid.call( d3.axisLeft(y) .tickSize(-w) .tickFormat("") .ticks(6) ); grid.select(".domain").remove(); grid.selectAll("line") .attr("stroke", "#e2e8f0"); const line = type => d3.line() .x(d => x(d.year)) .y(d => y(d[type]))(s); sentLine.attr("d", line("sent")); receivedLine.attr("d", line("received")); markers.selectAll("*").remove(); // Mark each recorded annual value with a tooltip for (const [type, color] of [ ["sent", blue], ["received", orange] ]) { markers.selectAll(`circle.${type}`) .data(s.filter(d => d[type] > 0)) .join("circle") .attr("class", type) .attr("cx", d => x(d.year)) .attr("cy", d => y(d[type])) .attr("r", 3) .attr("fill", color) .append("title") .text(d => `${d.year}: ${type === "sent" ? "Sent" : "Received"} ` + formatMoney(d[type]) ); } // Detect year-to-year changes const changes = s.slice(1).map((d, i) => { const prev = s[i]; return { year: d.year, previous: prev.year, change: (d.sent + d.received) - (prev.sent + prev.received), value: d.sent + d.received }; }); const activeChanges = changes.filter(d => d.value > 0 || (s.find(v => v.year === d.previous)?.sent || 0) > 0 || (s.find(v => v.year === d.previous)?.received || 0) > 0 ); const largestRise = d3.greatest( activeChanges, d => d.change ); const largestFall = d3.least( activeChanges, d => d.change ); // Detect role changes across consecutive active years const roleFor = d => d.sent > d.received ? "Donor" : d.received > d.sent ? "Recipient" : "Balanced"; const switches = []; for (let i = 1; i < s.length; i++) { const prev = s[i - 1]; const curr = s[i]; const prevTotal = prev.sent + prev.received; const currTotal = curr.sent + curr.received; if (prevTotal === 0 || currTotal === 0) continue; const before = roleFor(prev); const after = roleFor(curr); if (before !== "Balanced" && after !== "Balanced" && before !== after) { switches.push({ year: curr.year, before, after }); } } const switchText = switches.length ? switches.slice(0, 12) .map(d => `${d.year}: ${d.before} → ${d.after}`) .join("; ") + (switches.length > 12 ? "; …" : "") : "No direct annual role reversal detected."; insight.selectAll("*").remove(); insight.append("h3") .style("margin", "0 0 8px") .text(country); const facts = [ ["Overall classification", c.role], ["Total aid sent", formatMoney(c.sent)], ["Total aid received", formatMoney(c.received)], ["Net aid (sent minus received)", formatMoney(c.sent - c.received)], ["Largest annual increase", largestRise && largestRise.change > 0 ? `${largestRise.previous}–${largestRise.year}: ` + `+${formatMoney(largestRise.change)}` : "No positive annual change"], ["Largest annual decrease", largestFall && largestFall.change < 0 ? `${largestFall.previous}–${largestFall.year}: ` + formatMoney(largestFall.change) : "No negative annual change"], ["Direct annual role reversals", switches.length], ["Role reversal years", switchText] ]; for (const [name, value] of facts) { const p = insight.append("div"); p.append("strong").text(name + ": "); p.append("span").text(value); } // Highlight role-reversal years in purple markers.selectAll(".switch-marker") .data(switches) .join("line") .attr("class", "switch-marker") .attr("x1", d => x(d.year)) .attr("x2", d => x(d.year)) .attr("y1", 0) .attr("y2", h) .attr("stroke", "#9333ea") .attr("stroke-width", 1.2) .attr("stroke-dasharray", "5,5") .attr("opacity", 0.65) .append("title") .text(d => `${d.year}: ${d.before} to ${d.after}` ); } rows.on("click", (event, d) => choose(d.country)); select.on("change", function() { update(this.value); }); // Initial country: highest total aid activity choose(countries[0].country); return root.node(); } 40:Td65,### Visualization #1: Global Aid Flows Over Time **1. How does aid sent versus received change over time?** The visualization examines aid commitments across 47 countries between 1973 and 2013. The results reveal considerable differences in how countries participate in international aid. Some consistently provide more assistance than they receive, while others primarily receive aid. Annual commitments also fluctuate significantly, indicating that aid flows do not necessarily follow consistent trends. **2. Which countries are predominantly donors, recipients, or relatively balanced?** The dataset contains 16 predominantly donor countries, 29 predominantly recipient countries, and 2 relatively balanced countries. The United States ($116.28B), Japan ($116.26B), and Germany ($47.22B) are among the prominent donors. India ($133.98B), Thailand ($49.04B), and Brazil ($36.61B) are prominent recipients. Australia provides an interesting example of a relatively balanced country, with approximately $2.45B in outgoing commitments and $2.57B in incoming commitments. **3. Do countries change their roles over time?** Yes. Australia's aid flows show 8 direct annual donor-recipient reversals, occurring in 1980, 1982, 1992, 1996, 1998, 1999, 2002, and 2003. For example, Australia changed from predominantly sending aid to receiving more aid in 1980 and returned to being a net sender in 1982. This demonstrates that a country's role can fluctuate even when its cumulative amounts of aid sent and received are relatively balanced. However, these reversals represent annual changes in the dataset rather than necessarily permanent shifts in national aid policy. **4. Are there sudden peaks and valleys?** Yes. India experienced a substantial increase of approximately $2.77B between 1993 and 1994, following a decrease of approximately $4.01B between 1992 and 1993. Australia provides another example. Its largest year-over-year increase occurred between 1980 and 1981 (+$688.29M), immediately followed by its largest decrease between 1981 and 1982 (−$753.02M). These fluctuations illustrate how the volume of recorded aid commitments can change sharply between consecutive years. ### Visualization Design Rationale I adopted an interactive overview-and-detail dashboard to support comparisons across countries while preserving the ability to investigate individual histories. The diverging bar chart classifies countries according to whether they primarily send or receive aid. Blue represents outgoing aid, while orange represents incoming aid. The same colors are maintained throughout the timeline, ensuring visual consistency. The country-level line chart makes it possible to compare changes in aid sent and received over time. Purple dashed vertical markers highlight years in which the country's annual role changes between donor and recipient. Finally, the country insights panel provides exact values for cumulative aid, net commitments, annual changes, and role reversals. This complements the graphical representation and supports more precise comparisons. **Limitations:** The dataset contains financial commitments rather than confirmed disbursements. Countries are classified using a ±20% cumulative net-aid-share threshold, and annual role changes do not necessarily indicate sustained policy shifts. The overview bars represent relative net aid shares rather than absolute dollar amounts.41:T2871, vis2 = { // Visualization #2: Aid Purposes Over Time // Interactive stacked area chart with purpose and mode filters const data = aiddata.filter(d => Number.isFinite(d.yearInt) && Number.isFinite(d.amount) && d.amount >= 0 && d.purpose && String(d.purpose).trim().toUpperCase() !== "UNSPECIFIED" ); const purposeName = d => String(d.purpose).trim(); const top10 = d3.rollups( data, v => d3.sum(v, d => d.amount), purposeName ) .sort((a, b) => b[1] - a[1]) .slice(0, 10); const purposes = top10.map(d => d[0]); const purposeSet = new Set(purposes); const years = d3.range( d3.min(data, d => d.yearInt), d3.max(data, d => d.yearInt) + 1 ); const grouped = d3.rollup( data.filter(d => purposeSet.has(purposeName(d))), v => d3.sum(v, d => d.amount), d => d.yearInt, purposeName ); const annual = years.map(year => { const row = {year}; for (const p of purposes) { row[p] = grouped.get(year)?.get(p) || 0; } row.total = d3.sum(purposes, p => row[p]); return row; }); const palette = [ "#2563eb", "#f97316", "#16a34a", "#dc2626", "#8b5cf6", "#8b5e4a", "#ec4899", "#64748b", "#ca8a04", "#06b6d4" ]; const color = d3.scaleOrdinal() .domain(purposes) .range(palette); const money = v => { if (v >= 1e9) return `$${(v / 1e9).toFixed(2)}B`; if (v >= 1e6) return `$${(v / 1e6).toFixed(2)}M`; return `$${d3.format(",.0f")(v)}`; }; const root = d3.create("div") .style("font-family", "Arial, sans-serif") .style("max-width", "1150px") .style("background", "#fff") .style("color", "#1e293b") .style("padding", "22px"); root.append("h2") .style("font-size", "27px") .style("margin", "0 0 8px") .text("Top 10 Aid Purposes Over Time"); root.append("p") .style("color", "#64748b") .style("font-size", "14px") .text( "Explore the changing scale and relative importance " + "of international aid commitments, 1973–2013." ); // Controls const controls = root.append("div") .style("display", "flex") .style("gap", "25px") .style("flex-wrap", "wrap") .style("align-items", "center") .style("margin", "22px 0"); const purposeControl = controls.append("div"); purposeControl.append("label") .style("display", "block") .style("font-size", "13px") .style("font-weight", "bold") .style("margin-bottom", "7px") .text("Aid Purpose"); const purposeSelect = purposeControl.append("select") .style("padding", "10px") .style("width", "320px") .style("max-width", "100%") .style("border", "1px solid #cbd5e1") .style("border-radius", "6px"); purposeSelect.selectAll("option") .data(["All Purposes", ...purposes]) .join("option") .attr("value", d => d) .text(d => d); const modeControl = controls.append("div"); modeControl.append("label") .style("display", "block") .style("font-size", "13px") .style("font-weight", "bold") .style("margin-bottom", "7px") .text("View Mode"); const modeSelect = modeControl.append("select") .style("padding", "10px") .style("border", "1px solid #cbd5e1") .style("border-radius", "6px"); modeSelect.selectAll("option") .data([ {label: "Absolute Amount ($)", value: "absolute"}, {label: "Relative Share (%)", value: "relative"} ]) .join("option") .attr("value", d => d.value) .text(d => d.label); // Chart const width = 1050; const height = 480; const margin = { top: 30, right: 20, bottom: 60, left: 95 }; const w = width - margin.left - margin.right; const h = height - margin.top - margin.bottom; const svg = root.append("svg") .attr("viewBox", `0 0 ${width} ${height}`) .style("width", "100%") .style("height", "auto"); const g = svg.append("g") .attr("transform", `translate(${margin.left},${margin.top})`); const x = d3.scaleLinear() .domain(d3.extent(years)) .range([0, w]); const y = d3.scaleLinear().range([h, 0]); const grid = g.append("g"); const paths = g.append("g"); const xAxis = g.append("g") .attr("transform", `translate(0,${h})`) .call( d3.axisBottom(x) .ticks(10) .tickFormat(d3.format("d")) ); const yAxis = g.append("g"); const yLabel = svg.append("text") .attr("x", 20) .attr("y", height / 2) .attr("text-anchor", "middle") .attr("transform", `rotate(-90,20,${height / 2})`) .attr("font-size", 13); svg.append("text") .attr("x", width / 2) .attr("y", height - 10) .attr("text-anchor", "middle") .text("Year"); // Legend const legend = root.append("div") .style("display", "grid") .style("grid-template-columns", "repeat(auto-fit, minmax(230px, 1fr))") .style("gap", "11px") .style("margin", "20px 0"); purposes.forEach(p => { const item = legend.append("div") .style("display", "flex") .style("align-items", "center") .style("gap", "9px") .style("font-size", "12px"); item.append("span") .style("width", "13px") .style("height", "13px") .style("flex-shrink", "0") .style("background", color(p)); item.append("span").text(p); }); // Inspect years const information = root.append("div") .style("padding", "16px") .style("background", "#f1f5f9") .style("border-radius", "8px") .style("margin", "15px 0"); const guide = g.append("line") .attr("y1", 0) .attr("y2", h) .attr("stroke", "#334155") .attr("stroke-dasharray", "5,5") .style("pointer-events", "none") .style("display", "none"); function showYear(year) { const row = annual.find(d => d.year === year); if (!row) return; const choice = purposeSelect.property("value"); information.selectAll("*").remove(); information.append("h3") .style("margin", "0 0 10px") .text(`Year ${year} — Total: ${money(row.total)}`); const ranked = purposes.map(p => ({ name: p, amount: row[p], share: row.total ? row[p] / row.total : 0 })).sort((a, b) => b.amount - a.amount); const shown = choice === "All Purposes" ? ranked.slice(0, 5) : ranked.filter(d => d.name === choice); if (!row.total) { information.append("p") .text("No recorded top-ten commitments this year."); return; } for (const d of shown) { const item = information.append("div") .style("display", "flex") .style("align-items", "center") .style("gap", "9px") .style("margin", "6px 0") .style("font-size", "13px"); item.append("span") .style("width", "11px") .style("height", "11px") .style("background", color(d.name)); item.append("span") .text( `${d.name}: ${money(d.amount)} ` + `(${(d.share * 100).toFixed(1)}%)` ); } } const stack = d3.stack().keys(purposes); const stacked = stack(annual); const maxTotal = d3.max(annual, d => d.total) || 1; let inspectionYear = years[Math.floor(years.length / 2)]; function update() { const choice = purposeSelect.property("value"); const mode = modeSelect.property("value"); // Prepare values as dollars or shares of top-ten total. const rows = annual.map(d => { const result = {year: d.year}; for (const p of purposes) { result[p] = mode === "relative" ? (d.total ? d[p] / d.total : 0) : d[p]; } return result; }); const all = choice === "All Purposes"; const keys = all ? purposes : [choice]; const maxValue = mode === "relative" ? 1 : all ? maxTotal : d3.max(annual, d => d[choice]) || 1; y.domain([0, maxValue]).nice(); const layers = d3.stack() .keys(keys)(rows); const area = d3.area() .x(d => x(d.data.year)) .y0(d => y(d[0])) .y1(d => y(d[1])); paths.selectAll("path") .data(layers, d => d.key) .join( enter => enter.append("path"), update => update, exit => exit.remove() ) .attr("d", area) .attr("fill", d => color(d.key)) .attr("stroke", "#ffffff") .attr("stroke-width", 0.5) .attr("opacity", 0.95); yAxis.call( d3.axisLeft(y) .ticks(6) .tickFormat( mode === "relative" ? d3.format(".0%") : d3.format("~s") ) ); grid.call( d3.axisLeft(y) .ticks(6) .tickSize(-w) .tickFormat("") ); grid.select(".domain").remove(); grid.selectAll("line") .attr("stroke", "#e2e8f0"); yLabel.text( mode === "relative" ? "Share of Top 10 Commitments" : "Annual Aid Commitments (USD)" ); // Ensure the data appears above the grid. paths.raise(); guide.raise(); showYear(inspectionYear); } // Transparent hover overlay g.append("rect") .attr("width", w) .attr("height", h) .attr("fill", "transparent") .style("cursor", "crosshair") .on("mousemove", function(event) { const [mx] = d3.pointer(event, this); const year = Math.max( years[0], Math.min( years[years.length - 1], Math.round(x.invert(mx)) ) ); inspectionYear = year; guide .attr("x1", x(year)) .attr("x2", x(year)) .style("display", null); showYear(year); }) .on("mouseleave", () => { guide.style("display", "none"); }); purposeSelect.on("change", update); modeSelect.on("change", update); // Start with the stacked dollar-amount chart modeSelect.property("value", "absolute"); purposeSelect.property("value", "All Purposes"); update(); root.append("p") .style("font-size", "12px") .style("color", "#64748b") .style("margin-top", "20px") .text( "Source: Supplied AidData subset. The top ten categories " + "are selected by cumulative commitments, excluding " + "UNSPECIFIED. Relative shares use the total of these " + "ten categories as the denominator. Amounts represent " + "financial commitments, not confirmed disbursements." ); return root.node(); } 42:Ta6c,### Visualization #2: Changing Aid Priorities Over Time **1. What are the top 10 purposes of aid commitments?** The visualization identifies the ten largest aid purposes based on cumulative financial commitments across all countries and years in the supplied dataset, excluding the category labeled "UNSPECIFIED." Air transport ranks first with approximately $39.81 billion, followed by rail transport ($20.50 billion) and industrial development ($19.74 billion). Other major purposes include non-renewable power generation ($15.13 billion), rescheduling and refinancing ($14.80 billion), import support ($9.96 billion), social and welfare services ($9.21 billion), telecommunications ($8.63 billion), renewable power generation ($8.62 billion), and sectors not specified ($8.55 billion). **2. How does their relative importance change over time?** The normalized stacked area chart reveals that the relative importance of different aid purposes fluctuates substantially between 1973 and 2013. Air transport is particularly prominent during several periods in the 1980s and 1990s. In 1993, it represents approximately 41.5% of commitments among the top ten purposes, followed by industrial development at 33%. The chart also suggests a shift toward rail transport in the later years, particularly after the mid-2000s, when it occupies a substantial proportion of the total. These changes demonstrate that aid commitments are not consistently concentrated in the same purposes. Instead, the distribution varies across time, with certain sectors becoming more prominent during specific periods. **3. Visualization design rationale** I selected a 100% stacked area chart because the primary objective is to compare the relative importance of aid purposes over time rather than only their absolute values. Each year's commitments across the ten selected categories are normalized to 100%, making changes in their relative proportions easier to observe. Distinct colors identify the different purposes, and the ranking above the chart provides the cumulative financial totals needed to understand their overall importance. The interactive year-inspection feature allows users to examine exact percentages and commitment amounts for individual years, complementing the broader temporal patterns visible in the chart. **Limitations:** Normalization can make a purpose appear dominant even in a year with relatively little total funding. The chart includes only the ten largest purposes across the entire period, not necessarily the ten largest in every individual year. Additionally, the source records financial commitments rather than verified disbursements.43:T33e6, vis3 = { // Visualization #3: Geographic Shifts in Aid // Interactive D3 choropleth, 5-year periods const topojson = await import( "https://cdn.jsdelivr.net/npm/topojson-client@3/+esm" ); const world = await d3.json( "https://cdn.jsdelivr.net/npm/world-atlas@2/countries-50m.json" ); const features = topojson.feature( world, world.objects.countries ).features; // Normalize country names between the two datasets. const aliases = { "korea": "south korea", "republic of korea": "south korea", "korea rep": "south korea", "korea republic of": "south korea", "south korea": "south korea", "russian federation": "russia", "viet nam": "vietnam", "czech republic": "czechia", "slovak republic": "slovakia", "turkiye": "turkey", "türkiye": "turkey", "iran islamic republic of": "iran", "egypt arab republic": "egypt", "egypt arab rep": "egypt", "congo democratic republic of": "democratic republic of the congo", "congo dem rep": "democratic republic of the congo", "dr congo": "democratic republic of the congo", "dem rep congo": "democratic republic of the congo", "congo republic of": "republic of the congo", "ivory coast": "cote divoire", "cote d'ivoire": "cote divoire", "côte d'ivoire": "cote divoire", "united states of america": "united states", "usa": "united states", "uk": "united kingdom", "lao pdr": "laos", "lao peoples democratic republic": "laos", "syrian arab republic": "syria", "tanzania united republic of": "tanzania", "bolivia plurinational state of": "bolivia", "venezuela bolivarian republic of": "venezuela", "brunei darussalam": "brunei", "macedonia": "north macedonia", "burma": "myanmar", "eswatini": "swaziland", "swaziland": "swaziland" }; function normalize(name) { let n = String(name || "") .toLowerCase() .normalize("NFD") .replace(/[\u0300-\u036f]/g, "") .replace(/&/g, "and") .replace(/[^a-z0-9]+/g, " ") .trim() .replace(/\s+/g, " "); return aliases[n] || n; } const valid = aiddata.filter(d => d.recipient && Number.isFinite(d.yearInt) && Number.isFinite(d.amount) && d.amount >= 0 ); const firstYear = d3.min(valid, d => d.yearInt); const lastYear = d3.max(valid, d => d.yearInt); // Five-year intervals, retaining any partial final interval. const periods = []; for (let start = firstYear; start <= lastYear; start += 5) { const end = Math.min(start + 4, lastYear); periods.push({ start, end, label: `${start}–${end}` }); } const countryNames = new Map(); const totals = new Map(); const allTotals = new Map(); for (const d of valid) { const name = normalize(d.recipient); if (!name) continue; countryNames.set(name, d.recipient); allTotals.set( name, (allTotals.get(name) || 0) + d.amount ); const period = periods.find(p => d.yearInt >= p.start && d.yearInt <= p.end ); if (!period) continue; if (!totals.has(period.label)) { totals.set(period.label, new Map()); } const map = totals.get(period.label); map.set(name, (map.get(name) || 0) + d.amount); } const nameForFeature = f => normalize(f.properties.name); const geographicNames = new Set( features.map(nameForFeature) ); // Use a constant color scale across every period. const maxAmount = d3.max( Array.from(totals.values()), map => d3.max(Array.from(map.values())) ) || 1; const color = d3.scaleSequentialSqrt( [0, maxAmount], d3.interpolateBlues ); const money = v => { if (v >= 1e12) return `$${(v / 1e12).toFixed(2)}T`; if (v >= 1e9) return `$${(v / 1e9).toFixed(2)}B`; if (v >= 1e6) return `$${(v / 1e6).toFixed(2)}M`; return `$${d3.format(",.0f")(v)}`; }; const root = d3.create("div") .style("font-family", "Arial, sans-serif") .style("max-width", "1150px") .style("padding", "22px") .style("background", "white") .style("color", "#1e293b"); root.append("h2") .style("font-size", "27px") .style("margin", "0 0 8px") .text("The Changing Geography of Global Aid"); root.append("p") .style("font-size", "14px") .style("color", "#64748b") .text( `Explore how aid recipients shift geographically ` + `between ${firstYear} and ${lastYear}. ` + "Darker countries received larger commitments." ); // Period control const controls = root.append("div") .style("display", "flex") .style("align-items", "center") .style("gap", "15px") .style("flex-wrap", "wrap") .style("margin", "22px 0"); controls.append("label") .style("font-weight", "bold") .text("Select Period:"); const select = controls.append("select") .style("padding", "10px 16px") .style("border", "1px solid #cbd5e1") .style("border-radius", "6px"); select.selectAll("option") .data(periods) .join("option") .attr("value", d => d.label) .text(d => d.label); // Summary cards const cards = root.append("div") .style("display", "grid") .style("grid-template-columns", "repeat(3,1fr)") .style("gap", "12px") .style("margin-bottom", "20px"); const cardValues = []; for (const label of [ "Total Aid Received", "Recipient Countries", "Largest Recipient" ]) { const card = cards.append("div") .style("padding", "15px") .style("background", "#f8fafc") .style("border", "1px solid #e2e8f0") .style("border-radius", "8px"); card.append("div") .style("font-size", "12px") .style("color", "#64748b") .text(label); const value = card.append("div") .style("font-size", "21px") .style("font-weight", "bold") .style("margin-top", "7px"); cardValues.push(value); } // World map const width = 1080; const height = 550; const svg = root.append("svg") .attr("viewBox", `0 0 ${width} ${height}`) .style("width", "100%") .style("height", "auto") .style("background", "#f8fbff") .style("border-radius", "9px"); const projection = d3.geoNaturalEarth1() .fitExtent( [[15, 15], [width - 15, height - 15]], {type: "Sphere"} ); const path = d3.geoPath(projection); svg.append("path") .datum({type: "Sphere"}) .attr("d", path) .attr("fill", "#eff6ff"); const countryPaths = svg.append("g") .selectAll("path") .data(features) .join("path") .attr("d", path) .attr("stroke", "#ffffff") .attr("stroke-width", 0.5) .style("cursor", "pointer"); const tooltip = root.append("div") .style("background", "#eff6ff") .style("padding", "14px") .style("margin", "12px 0") .style("border-radius", "8px") .style("font-size", "13px") .text("Hover over a country to inspect its aid receipts."); // Color scale legend root.append("h4") .style("margin", "15px 0 8px") .text("Aid Received (USD)"); const legendSvg = root.append("svg") .attr("viewBox", "0 0 560 60") .style("width", "min(100%, 560px)"); const defs = legendSvg.append("defs"); const gradient = defs.append("linearGradient") .attr("id", "aid-map-gradient"); for (let i = 0; i <= 20; i++) { gradient.append("stop") .attr("offset", `${i * 5}%`) .attr("stop-color", color(maxAmount * i / 20)); } legendSvg.append("rect") .attr("x", 5).attr("y", 5) .attr("width", 540).attr("height", 16) .attr("rx", 3) .attr("fill", "url(#aid-map-gradient)"); const legendLabels = [ [0, "0"], [0.25, money(maxAmount * 0.25)], [0.5, money(maxAmount * 0.5)], [0.75, money(maxAmount * 0.75)], [1, money(maxAmount)] ]; legendSvg.selectAll("text") .data(legendLabels) .join("text") .attr("x", d => 5 + d[0] * 540) .attr("y", 42) .attr("text-anchor", d => d[0] === 0 ? "start" : d[0] === 1 ? "end" : "middle" ) .attr("font-size", 11) .attr("fill", "#475569") .text(d => d[1]); root.append("p") .style("font-size", "12px") .style("color", "#64748b") .text( "Light gray = no matched recorded aid receipts. " + "Darker blue = larger cumulative aid commitments " + "during the selected period." ); // Ranking root.append("h3") .style("margin-top", "28px") .text("Top 10 Recipient Countries"); const ranking = root.append("div") .style("margin", "12px 0 24px"); // Snapshot across periods root.append("h3") .text("How the Leading Recipients Change"); const history = root.append("div") .style("display", "grid") .style("grid-template-columns", "repeat(auto-fit, minmax(160px, 1fr))") .style("gap", "10px"); for (const p of periods) { const ranked = Array.from( totals.get(p.label) || new Map() ).sort((a, b) => b[1] - a[1]); const item = history.append("div") .style("background", "#f8fafc") .style("border", "1px solid #e2e8f0") .style("border-radius", "7px") .style("padding", "12px"); item.append("strong") .style("display", "block") .style("margin-bottom", "8px") .text(p.label); for (const [name, amount] of ranked.slice(0, 3)) { item.append("div") .style("font-size", "12px") .style("margin", "5px 0") .text( `${countryNames.get(name) || name}: ${money(amount)}` ); } } const unmatched = Array.from(allTotals) .filter(([name]) => !geographicNames.has(name)) .sort((a, b) => b[1] - a[1]); const unmatchedTotal = d3.sum(unmatched, d => d[1]); const allReceived = d3.sum( Array.from(allTotals.values()) ); const coverage = root.append("p") .style("font-size", "12px") .style("color", "#64748b") .style("margin-top", "17px"); coverage.text( `Geographic matching: ${allTotals.size - unmatched.length} ` + `of ${allTotals.size} recipient names matched to map countries. ` + `${money(unmatchedTotal)} of ${money(allReceived)} ` + "in commitments could not be assigned to a map polygon. " + (unmatched.length ? "Unmatched names: " + unmatched.slice(0, 12) .map(d => countryNames.get(d[0]) || d[0]) .join(", ") + (unmatched.length > 12 ? ", …" : "") : "") ); function update(periodLabel) { const amounts = totals.get(periodLabel) || new Map(); const ranked = Array.from(amounts) .sort((a, b) => b[1] - a[1]); const total = d3.sum(ranked, d => d[1]); cardValues[0].text(money(total)); cardValues[1].text( ranked.filter(d => d[1] > 0).length ); cardValues[2].text( ranked.length ? countryNames.get(ranked[0][0]) || ranked[0][0] : "None" ); countryPaths .attr("fill", d => { const amount = amounts.get(nameForFeature(d)) || 0; return amount > 0 ? color(amount) : "#e5e7eb"; }) .on("mouseenter", function(event, d) { const name = nameForFeature(d); const amount = amounts.get(name) || 0; d3.select(this) .attr("stroke", "#1e293b") .attr("stroke-width", 1.5) .raise(); tooltip.text( `${d.properties.name} — ${periodLabel}: ` + (amount > 0 ? money(amount) + " in recorded commitments" : "No matched recorded commitments") ); }) .on("mouseleave", function() { d3.select(this) .attr("stroke", "#ffffff") .attr("stroke-width", 0.5); }); ranking.selectAll("*").remove(); const maxRank = ranked.length ? ranked[0][1] : 1; ranked.slice(0, 10).forEach(([name, amount], i) => { const item = ranking.append("div") .style("display", "grid") .style("grid-template-columns", "185px 1fr 100px") .style("gap", "12px") .style("align-items", "center") .style("margin", "10px 0") .style("font-size", "12px"); item.append("span").text( `${i + 1}. ${countryNames.get(name) || name}` ); const track = item.append("div") .style("height", "16px") .style("background", "#eff6ff") .style("border-radius", "3px"); track.append("div") .style("height", "100%") .style("width", `${100 * amount / maxRank}%`) .style("background", "#2563eb") .style("border-radius", "3px"); item.append("strong") .style("text-align", "right") .text(money(amount)); }); } select.on("change", function() { update(this.value); }); select.property("value", periods[0].label); update(periods[0].label); root.append("p") .style("font-size", "12px") .style("color", "#64748b") .style("margin-top", "20px") .text( "Method: Aid commitments are summed by recipient " + "country and five-year period. The color scale is " + "fixed across periods to enable consistent comparisons. " + "The final interval may contain fewer than five years. " + "Commitments do not necessarily measure actual need " + "or confirmed disbursements." ); return root.node(); } 44:Tfe6,### Visualization #3: Geographic Shifts in Global Aid **1. How does the geographical distribution of aid change over time?** The visualization examines how international aid commitments were distributed geographically between 1973 and 2013. By grouping commitments into five-year intervals, the map reveals both consistent recipient countries and changes in the geographic concentration of aid. India remains the largest recipient throughout the observed period. However, other prominent recipients change considerably, demonstrating that the geographic distribution of aid commitments is not completely static. **2. Do the same regions consistently receive aid, or does the distribution shift?** The results reveal a combination of geographic continuity and change. During 1973–1987, major recipients are concentrated in Asia. India, Korea, and Thailand consistently appear among the three largest recipients. Between 1988 and 1992, the composition changes. Poland ($15.16 billion) and Kuwait ($7.45 billion) become major recipients alongside India ($17.97 billion), indicating a shift toward Eastern Europe and the Middle East. Between 1993 and 1997, Brazil becomes a prominent recipient, receiving approximately $10.04 billion, while India and Thailand remain important. During 2003–2007, Colombia ($5.51 billion) and South Africa ($4.00 billion) join India ($18.37 billion) as the three largest recipients. The geographic distribution in 2008–2012 also highlights South America, with Brazil ($5.88 billion) and Colombia ($5.36 billion) ranking behind India ($21.20 billion). These changes suggest that while some recipient countries consistently account for large volumes of aid, the geographic distribution of other major commitments evolves over time. **3. What does the history of donations reveal?** The historical comparison indicates that major aid commitments do not remain exclusively concentrated in one region. Asia maintains a strong presence throughout the dataset, particularly through India's consistently high commitments. However, countries in Eastern Europe, the Middle East, South America, and Africa become prominent during different periods. For example, the emergence of Poland and Kuwait as major recipients in 1988–1992 contrasts with the prominence of Colombia and South Africa in 2003–2007. These patterns demonstrate how the geographic concentration of recorded financial commitments changes across decades. However, the visualization should not be interpreted as a direct measure of humanitarian need, because development finance commitments can reflect economic, political, and institutional priorities. ### Visualization Design Rationale I selected an interactive choropleth map because the primary objective is to investigate geographic patterns and their evolution over time. Countries are shaded according to the total financial commitments received during the selected period. Darker blue represents larger amounts, while light gray indicates countries without matched recorded commitments for that period. A consistent color scale is maintained across every time interval, allowing users to compare funding levels without changes in color encoding. The five-year aggregation reduces annual fluctuations and makes longer-term geographic patterns easier to identify. The interactive period selector lets users examine different historical intervals, while the top-ten ranking provides exact numerical comparisons that may be difficult to estimate from map colors alone. Finally, the historical summary cards display the leading recipients in each period, making temporal comparisons possible without repeatedly switching the map selection. **Limitations:** The visualization measures recorded aid commitments rather than confirmed disbursements or actual development needs. Geographic aggregation at the country level can hide differences within countries. Additionally, the final period contains only 2013 and should not be directly compared with full five-year periods based on total amount alone.45:[{"id":"09040dddbda03374a466600047ccbc70c46e6853884eb725db2141c566ca1b78fb7cc935096e8d5468c21e8df215e73fc49cdaaf7e2f1f89139793da25be02b2","href":"https://static.observableusercontent.com/files/09040dddbda03374a466600047ccbc70c46e6853884eb725db2141c566ca1b78fb7cc935096e8d5468c21e8df215e73fc49cdaaf7e2f1f89139793da25be02b2","name":"aiddata-countries-only - aiddata-countries-only.csv","type":"text/csv","lastModified":1794443128313,"size":8760387}] 38:{"id":"7e925a49050bc62a","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-12T00:22:32.185Z","update_time":"$D2026-11-12T22:46:58.059Z","view_time":null,"first_public_time":"$D2026-11-12T22:47:03.712Z","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":"57979a561d1d4c1a","login":"shalini-gupta","name":"Shalini Gupta","avatar_url":"https://avatars-next.observableusercontent.com/94a4c374cf3a97c928da7369c41f18f34216070f9b0bdbf6f3fdeb946c6bcb47","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":308,"publish_version":308,"role":null,"authored":false,"authors":[{"type":"individual","id":"2ecf6220b7a82c80","login":"shalini-gupta","name":"Shalini Gupta","avatar_url":"https://avatars-next.observableusercontent.com/94a4c374cf3a97c928da7369c41f18f34216070f9b0bdbf6f3fdeb946c6bcb47","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"57979a561d1d4c1a","login":"shalini-gupta","name":"Shalini Gupta","avatar_url":"https://avatars-next.observableusercontent.com/94a4c374cf3a97c928da7369c41f18f34216070f9b0bdbf6f3fdeb946c6bcb47","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":187,"value":"\naiddata = {\n const data = await FileAttachment(\n \"aiddata-countries-only - aiddata-countries-only.csv\"\n ).csv({typed: true});\n\n return data.map(row => ({\n yearDate: d3.timeParse(\"%Y\")(String(row.year)),\n yearInt: +row.year,\n donor: row.donor,\n recipient: row.recipient,\n amount: +row.commitment_amount_usd_constant,\n purpose: row.coalesced_purpose_name\n }));\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"$3f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"$40","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"$41","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"$42","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"$43","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"$44","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W45","stdlib":"2"}} 33:null