34:["$","title",null,{"children":"Mini-Project 2: Temporal Data Visualization (Due Nov. 12th) | Simranjeet Singh | 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:T533,function prepV1(aid) { const years = d3.range(1973, 2014); const amt = d => +d.commitment_amount_usd_constant; const sent = d3.rollup(aid, v => d3.sum(v, amt), d => d.donor, d => +d.year); const recv = d3.rollup(aid, v => d3.sum(v, amt), d => d.recipient, d => +d.year); const names = Array.from(new Set([...sent.keys(), ...recv.keys()])); return names.map(name => { const series = years.map(year => ({ year, sent: sent.get(name)?.get(year) ?? 0, received: recv.get(name)?.get(year) ?? 0 })); const totalSent = d3.sum(series, d => d.sent); const totalReceived = d3.sum(series, d => d.received); // A "peak" = a year at least 2.5x the average of its two neighbours, // worth > $1B and > 8% of that country's lifetime total in that direction. const peaks = []; for (const key of ["sent", "received"]) { const tot = key === "sent" ? totalSent : totalReceived; series.forEach((d, i) => { const nb = ((series[i - 1]?.[key] ?? 0) + (series[i + 1]?.[key] ?? 0)) / 2; if (d[key] > 1e9 && d[key] > 2.5 * nb && d[key] > 0.08 * tot) peaks.push({ key, year: d.year, value: d[key] }); }); } return { name, series, totalSent, totalReceived, peaks, balance: (totalSent - totalReceived) / (totalSent + totalReceived) }; }); }40:T1610,function drawV1(data, { width = 1100, scale = "Per-country scale" } = {}) { const sentColor = "#2b6cb0", recvColor = "#dd6b20"; const groups = [ { label: "Mostly DONORS — sent ≥ 2× what they received (balance > +0.33)", test: d => d.balance > 1 / 3 }, { label: "BALANCED — sent and received similar amounts (−0.33 … +0.33)", test: d => Math.abs(d.balance) <= 1 / 3 }, { label: "Mostly RECIPIENTS — received ≥ 2× what they sent (balance < −0.33)", test: d => d.balance < -1 / 3 } ].map(g => ({ ...g, items: data.filter(g.test).sort((a, b) => d3.descending(a.totalSent + a.totalReceived, b.totalSent + b.totalReceived)) })); const cols = width > 900 ? 6 : 4; const gap = 14, cellW = (width - gap * (cols - 1)) / cols, cellH = 92; const m = { top: 30, bottom: 14 }; const headerH = 34; const x = d3.scaleLinear().domain([1973, 2013]).range([2, cellW - 2]); const globalMax = d3.max(data, c => d3.max(c.series, d => Math.max(d.sent, d.received))); let yOff = 52; const layout = []; for (const g of groups) { layout.push({ type: "header", g, y: yOff }); yOff += headerH; g.items.forEach((c, i) => layout.push({ type: "panel", c, x: (i % cols) * (cellW + gap), y: yOff + Math.floor(i / cols) * (cellH + m.top + m.bottom) })); yOff += Math.ceil(g.items.length / cols) * (cellH + m.top + m.bottom) + 10; } const height = yOff + 10; const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]).attr("width", width) .attr("style", "max-width:100%;height:auto;font:11px system-ui, sans-serif;"); // legend const lg = svg.append("g").attr("transform", "translate(0,14)"); lg.append("rect").attr("width", 14).attr("height", 10).attr("fill", sentColor); lg.append("text").attr("x", 20).attr("y", 9).text("Amount DONATED (drawn above the axis)"); lg.append("rect").attr("x", 270).attr("width", 14).attr("height", 10).attr("fill", recvColor); lg.append("text").attr("x", 290).attr("y", 9).text("Amount RECEIVED (drawn below the axis)"); lg.append("circle").attr("cx", 552).attr("cy", 5).attr("r", 3.5).attr("fill", "white").attr("stroke", "#111").attr("stroke-width", 1.5); lg.append("text").attr("x", 560).attr("y", 9).text("= sudden peak (≥2.5× neighbouring years, > $1B)"); lg.append("text").attr("y", 30).attr("fill", "#555").text( scale === "Per-country scale" ? "Each panel has its own y-scale (max shown top-right) so the shape of every country's history is visible. x-axis: 1973 → 2013. Hover for yearly values." : "All panels share one y-scale, so heights are directly comparable across countries. x-axis: 1973 → 2013. Hover for yearly values."); for (const item of layout) { if (item.type === "header") { svg.append("text").attr("x", 0).attr("y", item.y + 22).attr("font-weight", 700).attr("font-size", 13).text(item.g.label); svg.append("line").attr("x1", 0).attr("x2", width).attr("y1", item.y + 28).attr("y2", item.y + 28).attr("stroke", "#ccc"); continue; } const c = item.c; const localMax = d3.max(c.series, d => Math.max(d.sent, d.received)) || 1; const yMax = scale === "Per-country scale" ? localMax : globalMax; const half = cellH / 2; const y = d3.scaleLinear().domain([0, yMax]).range([0, half - 7]); const g = svg.append("g").attr("transform", `translate(${item.x},${item.y + m.top})`); g.append("rect").attr("width", cellW).attr("height", cellH).attr("fill", "#fafafa"); g.append("text").attr("y", -16).attr("font-weight", 600).attr("font-size", 12).text(c.name); g.append("text").attr("y", -4).attr("fill", "#666").attr("font-size", 10) .text(`↑ ${fmtUSD(c.totalSent)} ↓ ${fmtUSD(c.totalReceived)}`); if (scale === "Per-country scale") g.append("text").attr("x", cellW).attr("y", -4).attr("text-anchor", "end").attr("fill", "#999").attr("font-size", 9) .text(`max ${fmtUSD(localMax)}/yr`); g.append("path").datum(c.series).attr("fill", sentColor) .attr("d", d3.area().x(d => x(d.year)).y0(half).y1(d => half - y(d.sent)).curve(d3.curveMonotoneX)); g.append("path").datum(c.series).attr("fill", recvColor) .attr("d", d3.area().x(d => x(d.year)).y0(half).y1(d => half + y(d.received)).curve(d3.curveMonotoneX)); g.append("line").attr("x1", 0).attr("x2", cellW).attr("y1", half).attr("y2", half).attr("stroke", "#333").attr("stroke-width", 0.6); // decade ticks for (const yr of [1980, 1990, 2000, 2010]) { g.append("line").attr("x1", x(yr)).attr("x2", x(yr)).attr("y1", half - 2).attr("y2", half + 2).attr("stroke", "#333").attr("stroke-width", 0.6); } for (const p of c.peaks) { const py = p.key === "sent" ? half - y(p.value) : half + y(p.value); g.append("circle").attr("cx", x(p.year)).attr("cy", py).attr("r", 3).attr("fill", "white").attr("stroke", "#111").attr("stroke-width", 1.5); g.append("text").attr("x", x(p.year) + (x(p.year) > cellW - 30 ? -5 : 5)) .attr("text-anchor", x(p.year) > cellW - 30 ? "end" : "start") .attr("y", Math.max(9, Math.min(cellH - 2, py + (p.key === "sent" ? 3 : 3)))) .attr("font-size", 9).attr("font-weight", 600).text(p.year); } // hover strips const step = x(1974) - x(1973); g.selectAll(".hov").data(c.series).join("rect") .attr("x", d => x(d.year) - step / 2).attr("width", step).attr("height", cellH).attr("fill", "transparent") .append("title").text(d => `${c.name} — ${d.year}\nDonated: ${fmtUSD(d.sent)}\nReceived: ${fmtUSD(d.received)}`); } // year labels under the very first panel only (as a key) return svg.node(); }41:Tafd,function drawV1Heatmap(data, { width = 1100 } = {}) { const periods = [1973, 1978, 1983, 1988, 1993, 1998, 2003, 2008]; const label = p => p === 2008 ? "2008–13" : `${p}–${String(p + 4).slice(2)}`; const bin = y => (y >= 2008 ? 2008 : 1973 + 5 * Math.floor((y - 1973) / 5)); const rows = data.map(c => { const cells = periods.map(p => { const ys = c.series.filter(d => bin(d.year) === p); const s = d3.sum(ys, d => d.sent), r = d3.sum(ys, d => d.received); return { p, s, r, net: s + r > 0 ? (s - r) / (s + r) : null, total: s + r }; }); return { ...c, cells }; }).sort((a, b) => d3.descending(a.balance, b.balance)); const m = { top: 70, left: 170, right: 20, bottom: 10 }; const cw = Math.min(90, (width - m.left - m.right) / periods.length), ch = 17; const height = m.top + rows.length * ch + m.bottom; const color = d3.scaleDiverging([-1, 0, 1], t => d3.interpolateRdBu(t)); // red = receives, blue = donates const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]).attr("width", width) .attr("style", "max-width:100%;height:auto;font:11px system-ui, sans-serif;"); // legend const lw = 240, lx = m.left; const defs = svg.append("defs").append("linearGradient").attr("id", "netgrad"); d3.range(0, 1.01, 0.1).forEach(t => defs.append("stop").attr("offset", t).attr("stop-color", color(-1 + 2 * t))); svg.append("rect").attr("x", lx).attr("y", 8).attr("width", lw).attr("height", 10).attr("fill", "url(#netgrad)"); svg.append("text").attr("x", lx).attr("y", 30).text("only receives"); svg.append("text").attr("x", lx + lw / 2).attr("y", 30).attr("text-anchor", "middle").text("balanced"); svg.append("text").attr("x", lx + lw).attr("y", 30).attr("text-anchor", "end").text("only donates"); svg.append("text").attr("x", lx + lw + 20).attr("y", 17).attr("fill", "#555") .text("Colour = (donated − received) / (donated + received) per 5-year period · grey = no activity · hover for amounts"); svg.append("g").selectAll("text").data(periods).join("text") .attr("x", (d, i) => m.left + i * cw + cw / 2).attr("y", m.top - 8).attr("text-anchor", "middle").attr("font-weight", 600).text(label); const row = svg.append("g").selectAll("g").data(rows).join("g").attr("transform", (d, i) => `translate(0,${m.top + i * ch})`); row.append("text").attr("x", m.left - 6).attr("y", ch / 2 + 4).attr("text-anchor", "end").text(d => d.name); row.selectAll("rect").data(d => d.cells.map(c => ({ ...c, name: d.name }))).join("rect") .attr("x", (d, i) => m.left + i * cw + 1).attr("width", cw - 2).attr("height", ch - 2) .attr("fill", d => d.net == null ? "#f2f2f2" : color(d.net)) .append("title").text(d => `${d.name}, ${label(d.p)}\nDonated: ${fmtUSD(d.s)}\nReceived: ${fmtUSD(d.r)}`); return svg.node(); }42:T13ad,function drawV2(v2, { width = 1100, mode = "Share of top-10 total (%)", resolution = "5-year periods" } = {}) { const { keys } = v2; const pretty = k => k === "RESCHEDULING AND REFINANCING" ? "Debt rescheduling & refinancing" : k; const color = d3.scaleOrdinal(keys, d3.schemeTableau10); const bin = y => (y >= 2008 ? 2008 : 1973 + 5 * Math.floor((y - 1973) / 5)); let data = v2.yearly; if (resolution !== "Yearly") { data = d3.rollups(v2.yearly, v => { const o = {}; for (const k of keys) o[k] = d3.sum(v, d => d[k]); return o; }, d => bin(d.year)).map(([year, o]) => ({ year, ...o })).sort((a, b) => a.year - b.year); } data = data.filter(d => d3.sum(keys, k => d[k]) > 0); const share = mode.startsWith("Share"); const series = d3.stack().keys(keys).offset(share ? d3.stackOffsetExpand : d3.stackOffsetNone)(data); const m = { top: 20, right: 270, bottom: 40, left: 60 }; const height = 520; const isBars = resolution !== "Yearly"; const x = isBars ? d3.scaleBand(data.map(d => d.year), [m.left, width - m.right]).padding(0.12) : d3.scaleLinear([1973, 2013], [m.left, width - m.right]); const y = d3.scaleLinear([0, share ? 1 : d3.max(series.at(-1), d => d[1])], [height - m.bottom, m.top]).nice(); const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]).attr("width", width) .attr("style", "max-width:100%;height:auto;font:11px system-ui, sans-serif;"); const tip = d => `${pretty(d.key)}`; if (isBars) { const label = p => p === 2008 ? "2008–13" : `${p}–${String(p + 4).slice(2)}`; svg.append("g").selectAll("g").data(series).join("g").attr("fill", d => color(d.key)) .selectAll("rect").data(D => D.map(d => ({ d, key: D.key }))).join("rect") .attr("x", ({ d }) => x(d.data.year)).attr("width", x.bandwidth()) .attr("y", ({ d }) => y(d[1])).attr("height", ({ d }) => Math.max(0, y(d[0]) - y(d[1]))) .attr("stroke", "white").attr("stroke-width", 0.5) .append("title").text(({ d, key }) => { const tot = d3.sum(keys, k => d.data[k]); return `${pretty(key)} — ${label(d.data.year)}\n${fmtUSD(d.data[key])} (${d3.format(".0%")(d.data[key] / tot)} of top-10)`; }); // in-bar % labels for big segments if (share) svg.append("g").selectAll("text").data(series.flatMap(D => D.map(d => ({ d, key: D.key }))).filter(({ d }) => d[1] - d[0] > 0.08)) .join("text").attr("x", ({ d }) => x(d.data.year) + x.bandwidth() / 2).attr("y", ({ d }) => y((d[0] + d[1]) / 2) + 4) .attr("text-anchor", "middle").attr("fill", "white").attr("font-weight", 700) .text(({ d }) => d3.format(".0%")(d[1] - d[0])); svg.append("g").attr("transform", `translate(0,${height - m.bottom})`).call(d3.axisBottom(x).tickFormat(label).tickSizeOuter(0)); } else { svg.append("g").selectAll("path").data(series).join("path") .attr("fill", d => color(d.key)).attr("stroke", "white").attr("stroke-width", 0.4) .attr("d", d3.area().x(d => x(d.data.year)).y0(d => y(d[0])).y1(d => y(d[1])).curve(d3.curveMonotoneX)) .append("title").text(tip); svg.append("g").attr("transform", `translate(0,${height - m.bottom})`).call(d3.axisBottom(x).tickFormat(d3.format("d")).ticks(width / 80).tickSizeOuter(0)); // invisible per-year hover columns with full breakdown const step = x(1974) - x(1973); svg.append("g").selectAll("rect").data(data).join("rect") .attr("x", d => x(d.year) - step / 2).attr("width", step).attr("y", m.top).attr("height", height - m.top - m.bottom) .attr("fill", "transparent") .append("title").text(d => { const tot = d3.sum(keys, k => d[k]); return `${d.year} — top-10 total ${fmtUSD(tot)}\n` + keys.slice().reverse() .map(k => `${pretty(k)}: ${fmtUSD(d[k])} (${d3.format(".0%")(d[k] / tot)})`).join("\n"); }); } svg.append("g").attr("transform", `translate(${m.left},0)`) .call(d3.axisLeft(y).ticks(8).tickFormat(share ? d3.format(".0%") : d => fmtUSD(d))) .call(g => g.select(".domain").remove()); svg.append("text").attr("x", m.left).attr("y", 12).attr("font-weight", 600) .text(share ? "Share of the top-10 purposes' combined commitments" : "Commitments to the top-10 purposes (constant USD)"); // right-hand legend in stack order (top of stack first), with all-time totals const totals = new Map(v2.top10); const leg = svg.append("g").attr("transform", `translate(${width - m.right + 16},${m.top + 10})`); keys.slice().reverse().forEach((k, i) => { const g = leg.append("g").attr("transform", `translate(0,${i * 44})`); g.append("rect").attr("width", 14).attr("height", 14).attr("fill", color(k)); g.append("text").attr("x", 20).attr("y", 11).attr("font-weight", 600).text(pretty(k).length > 38 ? pretty(k).slice(0, 37) + "…" : pretty(k)); g.append("text").attr("x", 20).attr("y", 25).attr("fill", "#666") .text(`${fmtUSD(totals.get(k))} all-time · weighted-mean year ${Math.round(v2.com.get(k))}`); }); return svg.node(); }43:T546,function prepV3(aid, countries) { const toGeoName = new Map([["Korea", "Republic of Korea"], ["Slovak Republic", "Slovakia"]]); const featureByName = new Map(countries.features.map(f => [f.properties.NAME_LONG, f])); const feat = name => featureByName.get(toGeoName.get(name) ?? name); const bin = y => (+y >= 2008 ? 2008 : 1973 + 5 * Math.floor((+y - 1973) / 5)); const periods = [1973, 1978, 1983, 1988, 1993, 1998, 2003, 2008]; const label = p => p === 2008 ? "2008–2013" : `${p}–${p + 4}`; const roll = d3.rollup(aid, v => d3.sum(v, d => +d.commitment_amount_usd_constant), d => bin(d.year), d => d.recipient); const unmatched = Array.from(new Set(aid.map(d => d.recipient))).filter(n => !feat(n)); const byPeriod = periods.map(p => { const recips = Array.from(roll.get(p) ?? [], ([name, value]) => ({ name, value, feature: feat(name) })) .filter(d => d.feature && d.value > 0) .map(d => ({ ...d, region: regionOf(d.feature.properties) })) .sort((a, b) => b.value - a.value); return { period: p, label: label(p), total: d3.sum(recips, d => d.value), recips }; }); const regions = ["Southern Asia", "South-Eastern Asia", "Eastern Asia", "Western Asia", "Eastern Europe", "South America", "Southern Africa", "Other (Europe, N. America, Oceania)"]; return { byPeriod, regions, unmatched }; }44:Te16,function drawV3Maps(v3, countries, { width = 1100 } = {}) { const world = { type: "FeatureCollection", features: countries.features.filter(f => f.properties.NAME_LONG !== "Antarctica" && f.properties.ADMIN !== "Antarctica") }; const cols = width > 800 ? 4 : 2; const gap = 10, mapW = (width - gap * (cols - 1)) / cols, mapH = mapW * 0.52, titleH = 34; const rows = Math.ceil(v3.byPeriod.length / cols); const legendH = 95; const height = rows * (mapH + titleH + gap) + legendH; const projection = d3.geoEqualEarth().fitSize([mapW, mapH], world); const path = d3.geoPath(projection); const maxV = d3.max(v3.byPeriod, p => d3.max(p.recips, d => d.value)); const r = d3.scaleSqrt([0, maxV], [0, mapW / 14]); const regionColor = d3.scaleOrdinal(v3.regions, [...d3.schemeTableau10.slice(0, 7), "#9e9e9e"]); const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]).attr("width", width) .attr("style", "max-width:100%;height:auto;font:11px system-ui, sans-serif;"); v3.byPeriod.forEach((p, i) => { const g = svg.append("g").attr("transform", `translate(${(i % cols) * (mapW + gap)},${Math.floor(i / cols) * (mapH + titleH + gap)})`); g.append("text").attr("y", 14).attr("font-weight", 700).attr("font-size", 13).text(p.label); g.append("text").attr("y", 28).attr("fill", "#555") .text(`${fmtUSD(p.total)} · ${p.recips.length} recipients · #1 ${p.recips[0].name} (${d3.format(".0%")(p.recips[0].value / p.total)})`); const mg = g.append("g").attr("transform", `translate(0,${titleH})`); mg.append("rect").attr("width", mapW).attr("height", mapH).attr("fill", "#f7fbff").attr("rx", 3); const recNames = new Set(p.recips.map(d => d.feature.properties.NAME_LONG)); mg.append("g").selectAll("path").data(world.features).join("path").attr("d", path) .attr("fill", f => recNames.has(f.properties.NAME_LONG) ? "#d9d9d9" : "#efefef") .attr("stroke", "white").attr("stroke-width", 0.3); mg.append("g").selectAll("circle").data(p.recips.slice().sort((a, b) => b.value - a.value)).join("circle") .attr("transform", d => `translate(${projection(d3.geoCentroid(d.feature))})`) .attr("r", d => r(d.value)).attr("fill", d => regionColor(d.region)).attr("fill-opacity", 0.75) .attr("stroke", "white").attr("stroke-width", 0.6) .append("title").text(d => `${d.name} (${d.region})\n${p.label}: ${fmtUSD(d.value)} received\n${d3.format(".0%")(d.value / p.total)} of all donations this period`); }); // size legend + colour legend const ly = rows * (mapH + titleH + gap) + 10; const sl = svg.append("g").attr("transform", `translate(10,${ly})`); sl.append("text").attr("y", 0).attr("font-weight", 600).text("Circle area = amount received in the period"); [1e9, 5e9, 20e9].forEach((v, i) => { const cx = 30 + i * 70; sl.append("circle").attr("cx", cx).attr("cy", 50 - r(v)).attr("r", r(v)).attr("fill", "none").attr("stroke", "#555"); sl.append("text").attr("x", cx).attr("y", 64).attr("text-anchor", "middle").text(fmtUSD(v)); }); const cl = svg.append("g").attr("transform", `translate(260,${ly})`); cl.append("text").attr("font-weight", 600).text("Colour = world region (UN sub-region, from the Natural Earth GeoJSON)"); v3.regions.forEach((reg, i) => { const gx = (i % 4) * Math.max(150, (width - 270) / 4), gy = 14 + Math.floor(i / 4) * 18; cl.append("circle").attr("cx", gx + 6).attr("cy", gy + 6).attr("r", 6).attr("fill", regionColor(reg)).attr("fill-opacity", 0.75); cl.append("text").attr("x", gx + 16).attr("y", gy + 10).text(reg); }); return svg.node(); }45:T8a9,function drawV3Regions(v3, { width = 1100 } = {}) { const regionColor = d3.scaleOrdinal(v3.regions, [...d3.schemeTableau10.slice(0, 7), "#9e9e9e"]); const data = v3.byPeriod.map(p => { const o = { label: p.label, total: p.total }; for (const reg of v3.regions) o[reg] = d3.sum(p.recips.filter(d => d.region === reg), d => d.value); return o; }); const series = d3.stack().keys(v3.regions).offset(d3.stackOffsetExpand)(data); const m = { top: 28, right: 20, bottom: 30, left: 80 }; const height = 330; const y = d3.scaleBand(data.map(d => d.label), [m.top, height - m.bottom]).padding(0.15); const x = d3.scaleLinear([0, 1], [m.left, width - m.right]); const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]).attr("width", width) .attr("style", "max-width:100%;height:auto;font:11px system-ui, sans-serif;"); svg.append("text").attr("x", m.left).attr("y", 14).attr("font-weight", 600) .text("Share of all donations received, by region of the recipient (each bar = 100% of that period)"); svg.append("g").selectAll("g").data(series).join("g").attr("fill", d => regionColor(d.key)) .selectAll("rect").data(D => D.map(d => ({ d, key: D.key }))).join("rect") .attr("y", ({ d }) => y(d.data.label)).attr("height", y.bandwidth()) .attr("x", ({ d }) => x(d[0])).attr("width", ({ d }) => Math.max(0, x(d[1]) - x(d[0]))) .attr("stroke", "white").attr("stroke-width", 0.6) .append("title").text(({ d, key }) => `${key}, ${d.data.label}\n${fmtUSD(d.data[key])} (${d3.format(".0%")(d[1] - d[0])})`); svg.append("g").selectAll("text").data(series.flatMap(D => D.map(d => ({ d, key: D.key }))).filter(({ d }) => d[1] - d[0] > 0.07)) .join("text").attr("x", ({ d }) => x((d[0] + d[1]) / 2)).attr("y", ({ d }) => y(d.data.label) + y.bandwidth() / 2 + 4) .attr("text-anchor", "middle").attr("fill", "white").attr("font-weight", 700).text(({ d }) => d3.format(".0%")(d[1] - d[0])); svg.append("g").attr("transform", `translate(${m.left},0)`).call(d3.axisLeft(y).tickSize(0)).call(g => g.select(".domain").remove()); svg.append("g").attr("transform", `translate(0,${height - m.bottom})`).call(d3.axisBottom(x).ticks(10, "%")); return svg.node(); }46:T1310,### Answers ### Used AI for this section ### Answers **Q1 — How do donated vs. received amounts change over time?** The big donors give in every period but unevenly: the **United States** ($116.2B donated in total) and **Japan** ($114.2B) dominate, followed by **Germany** ($47.2B), the **UK** ($23.7B) and **France** ($15.5B). US commitments are highest in 1993–2002 (about $24–25B per 5-year period) and then drop sharply (about $7–8B after 2003). Japan's grow steadily from $7B (1973–77) to $23B (1993–97) and stay high, so Japan is the largest donor after 2003. On the receiving side **India** receives in every single year and is by far the largest recipient ($134.0B), followed by **Thailand** ($49.0B), **Brazil** ($36.6B), **Colombia** ($25.5B), **Korea** ($25.3B) and **Poland** ($24.5B). Many recipients only appear for part of the period: most Eastern European countries (Poland, Czech Republic, the Baltics…) start receiving around 1988–92 and stop by the late 2000s; South Africa and Colombia grow in the 2000s. **Q2 — Mostly senders, mostly receivers, balanced?** Yes, the three groups in the chart answer this directly. - *Mostly donors:* United States, Japan, Germany, UK, France, Netherlands, Sweden, Norway, Denmark, Switzerland, Belgium, Spain, Finland, Monaco. Germany, the Netherlands and Switzerland never receive anything. - *Balanced:* **Austria** ($784M sent vs $770M received), **Australia** ($2.4B vs $2.6B), **Italy** ($3.8B vs $2.4B) and **Canada** ($7.5B vs $4.1B). Their receipts come in a few large spikes (e.g. Canada 1981) rather than as steady flows. - *Mostly recipients:* India, Thailand, Brazil, Colombia, South Africa, Chile, Poland and the other Eastern European countries receive and (almost) never donate. Korea, Kuwait and Saudi Arabia are also in this group overall but are role-changers (Q3). **Q3 — Countries that change role.** (Easiest to see in Solution 1b.) - **Korea:** a recipient from 1973 to 2002, then turns into a net donor from 2003 on (mainly to India, Brazil and Thailand). - **Kuwait and Saudi Arabia** do the opposite: both are donors from 1973 to 1987 (Saudi Arabia funds power, rail and port projects in India, Brazil, Taiwan and Korea), then become recipients. Saudi Arabia stops donating entirely after 1987 and receives in every period from 1988 on. Kuwait's donations shrink (from $667M in 1978–82 to $2M in 1998–2002) while its receipts grow, so it is a net recipient from 1988 to 2007. - **Gulf states that flip back and forth:** the UAE donates in 1973–77, receives through 2007 and is a (small) donor again in 2008–13. Qatar receives from 1988 to 2002 and is a net donor in 2003–07. - **Southern/peripheral Europe:** Spain, Portugal, Greece, Ireland, Finland and Iceland receive in the late 1970s–80s and become donors from the 1990s–2000s. Luxembourg follows the same pattern later: it receives in 1993–2002 and donates from 2003. - **New EU members:** the Czech Republic, Slovak Republic, Slovenia, Hungary and Poland receive from about 1988 to the mid-2000s and show small donations in 2008–13, after joining the EU. - **Taiwan** switches back and forth and is a net donor in 2008–13. - **Temporary flips among rich countries:** Canada, Italy, Austria and Australia are donors in most periods but net recipients in 1978–82, and Austria and Australia are again net recipients in 1993–2002. This is why they end up in the "balanced" group. **Q4 — Peaks and valleys.** The white dots show peaks (≥ 2.5× the average of the neighbouring years and > $1B). They mostly come in matched donor/recipient pairs, because one very large commitment shows up on both sides: - **1992 — US → Kuwait**, $7.4B of import support (capital goods) the year after the Gulf War. This is the US peak *and* the Kuwait peak. - **1992 — Germany → Poland**, $7.9B of debt rescheduling, followed by **1995**, $3.0B of debt forgiveness: the two Poland peaks and the Germany peak. - **1997 — Japan → Thailand**, $5.0B of general budget support during the Asian financial crisis: the Japan and Thailand peaks. - **1995 — Italy → Brazil**, $1.4B of debt relief: Italy's only large spike. - **1980 and 1999 — Korea:** in 1980 it receives $2.6B (mostly US power-generation and telecom finance), and in 1999 $5.8B (mostly Japanese policy/sector loans after the Asian crisis). - **1999 — Saudi Arabia** and **1981 — Canada** each receive a single large US air-transport commitment. *Valleys:* each of those peaks is followed by a sharp drop back to normal levels (e.g. Germany: $0.3B in 1991, $8.6B in 1992, $0.5B in 1993). Saudi Arabia's donations drop to zero after 1987, Kuwait's dwindle to almost nothing, and most Eastern European receipts end by 2008. Across the whole dataset 1992 is the biggest year ($26B committed), compared with $7–10B in a typical year.47:T717,### Design rationale & comparison of 1a vs 1b **Why mirrored small multiples (1a)?** The question is about *each* country, so small multiples give every country its own comparable panel instead of 47 tangled lines. Mirroring "donated" above and "received" below a shared baseline puts the two quantities on one axis without overlap, so the balance between them can be read at a glance. Grouping panels by role answers Q2 before you even read the values, and a shared x-axis across panels lets you line up events (e.g. the 1992 cluster). Blue and orange are a colour-blind-safe pair. Because amounts differ by three orders of magnitude, panels use a **per-country y-scale** by default (max shown in each panel) so that small countries' patterns are visible; the toggle switches to a **shared scale** to compare absolute size. Peak markers are computed by a rule, so they are not cherry-picked. **Why the heatmap (1b)?** The ratio (donated − received)/(donated + received) removes the scale problem completely and turns role into colour, which makes Q2 and especially Q3 almost instant: a row that turns from red to blue is a role change. | | 1a Mirrored small multiples | 1b Net-role heatmap | |---|---|---| | Q1 amounts over time | ✅ shows actual amounts and shapes | ❌ ratio only, no magnitudes (only on hover) | | Q2 sender / receiver / balanced | ✅ grouped explicitly | ✅ colour + sort order | | Q3 role change | ⚠️ visible, but small flows can be hidden by large ones in the same panel (e.g. Korea's post-2003 donations are thin next to its earlier receipts) | ✅ best: colour changes along a row | | Q4 peaks / valleys | ✅ best: spikes are obvious and marked | ❌ 5-year bins smooth peaks away | The two complement each other; 1a is the main answer, and 1b is the faster way to answer Q3.48:T547,--- # Visualization #2 — Top 10 purposes over time What are the top 10 purposes of disbursements (by total amount) and how does their relative amount compare over time? **Filtering.** Following the note, unspecified purposes were removed. There is no purpose literally named "UNSPECIFIED" in this file, so I removed every purpose whose name contains "unspecified" or "not specified". That matters for one category: **"Sectors not specified"** ($8.6B) would otherwise have been #10. The top 10 then is: | # | Purpose | Total (constant USD) | |---|---|---| | 1 | Air transport | $39.8B | | 2 | Rail transport | $20.5B | | 3 | Industrial development | $19.7B | | 4 | Power generation / non-renewable sources | $15.1B | | 5 | Rescheduling and refinancing (debt) | $14.8B | | 6 | Import support (capital goods) | $10.0B | | 7 | Social / welfare services | $9.2B | | 8 | Telecommunications | $8.6B | | 9 | Power generation / renewable sources | $8.6B | | 10 | Mineral / metal prospection and exploration | $8.2B | The chart is a 100% stacked bar per 5-year period (the last bar is 2008–2013). The layers are **ordered by each purpose's weighted-mean year**, so purposes that were important early sit at the bottom and later ones at the top, and the chart reads like a timeline. Use the controls to switch to yearly resolution or to absolute amounts.49:T798,### Answer ### Used AI for this section Yes. Each period is clearly dominated by different purposes: - **1973–77 — import support and industry.** Import support (capital goods) 30%, industrial development 25%, renewable power 18% (mostly Saudi- and Kuwaiti-funded projects in India), telecom 16%. - **1978–82 — the first air-transport era.** Air transport jumps to 39%, followed by non-renewable power (16%) and industry (15%). - **1983–87 — industry and resources.** Industrial development 22%, mineral/metal prospection 21% (its peak) and air transport 21%. - **1988–92 — debt and crisis finance.** **Debt rescheduling and refinancing takes 37%** (mainly Germany → Poland, 1992) and import support 21% (mainly the US → Kuwait package in 1992). This is the only period where debt is a leading purpose. - **1993–97 — infrastructure.** Air transport 35%, industry 21%, non-renewable power 19%. - **1998–2002 — peak air transport.** Air transport reaches **60%**. 94% of that comes from the US, mainly to Saudi Arabia, Korea and Taiwan. - **2003–07 — social spending.** **Social/welfare services become #1 with 44%**, about four-fifths of it (79%) US → Colombia, and rail rises to 25%. - **2008–13 — rail and renewables.** **Rail transport dominates with 69%** (mostly Japan → India, plus Japan → Thailand) and renewable power rises to 15%, while non-renewable power falls to 2%. In short: *"during the 1980s–90s donations were mostly about air transport, industry and fossil-fuel power, with a debt-relief burst around 1990–92; after 2003 there are far more donations to social services, then rail and renewable energy."* Industrial development, import support, telecom and mineral prospection practically disappear after 2002. The "Absolute" toggle adds context: the top 10 total is largest in 1988–92 ($38B), and the 2003–07 shift to social services happens while total volume is low ($9B).4a:T5a8,### Design rationale The question is about **relative** amounts over time, so the default view is **part-to-whole** (each bar = 100% of the top-10 commitments in that period). This answers "what were donations mostly about in period X?" directly, with percentage labels on the large segments. I used **5-year bins** (the same aggregation Note 3 allows for Viz 3) because single years are very spiky: one commitment can take up to 75% of a year's top-10 total (a 2012 rail commitment to India), which makes the yearly streamgraph noisy and hard to read. The **yearly** toggle is still available for finding the exact year of a change, and the **absolute** toggle shows how total volume changes, since 100% charts hide it. Ordering the stack by each purpose's weighted-mean year places "early" purposes at the bottom and "late" purposes at the top. The shift then reads as a diagonal movement from bottom to top across the chart, and the legend (same order, with totals and mean year) doubles as a summary. Colours come from Tableau10, a categorical palette with 10 distinguishable hues, one per purpose. Hovering a segment shows its exact amount and share. *Alternative considered:* a heatmap (purposes × periods, coloured by share) avoids the stacked-bar problem that only the bottom layer has a common baseline. It is harder to read as "share of a whole", though, and it loses the timeline-like reading, so I kept the stacked bars with labels.4b:T7ac,### Answer Donations are **anchored in South Asia (India) throughout**, but the rest of the map **shifts** over time: - **1973–77:** concentrated in Asia. Southern Asia (India) receives 59%, East Asia (Korea) 18% and South America 13%, spread over only 11 recipients. - **1978–87:** still Asia-centred (India + Thailand + Korea), with South America (Brazil, Colombia, Chile) growing to 16% by 1983–87. In 1978–82, 20% goes to "other", richer countries (Canada, the UK, Italy, Australia, Spain). - **1988–92 — the shift to Eastern Europe and the Gulf.** Eastern Europe jumps from almost nothing to **29%** (Poland's debt relief) and Western Asia to 13% (Kuwait after the Gulf War). India's share falls to 30%. - **1993–2002 — the most spread-out period.** South-East Asia (Thailand, 22% in 1993–97), South America (22–23%), East Asia (Korea/Taiwan, 17% in 1998–2002) and Eastern Europe all hold large shares. Southern Asia drops to its lowest level, 17% (1998–2002). - **2003–2013 — re-concentration in the Global South.** Eastern Europe, East Asia and the Gulf shrink to a few percent in 2003–07 and disappear by 2008–13 (several turn into donors, see Viz 1). Donations concentrate in **India (~51–52%)**, **South America (25–28%, mainly Colombia and Brazil)** and **Southern Africa (11–13%, South Africa)**. South Africa first appears as a small recipient in the late 1980s and grows steadily to become the third-largest region. So donations have **not** always been in the same regions. The constant is India, the #1 recipient country in every period (although in 1998–2002 South America as a region, at 23%, is larger than South Asia at 17%). Around it, need has moved **from East/South-East Asia (1970s–90s) → Eastern Europe and the Gulf (around 1990) → Latin America and Africa (2000s)**. The number of recipient countries also shrinks, from 32 in 1998–2002 to 17 in 2008–13, as former recipients graduate.4c:T638,### Design rationale - **Small multiples instead of an animated map.** The question is about *change*, and side-by-side maps let the eye compare periods directly, without having to remember the previous animation frame. Eight panels are enough to cover 40 years without clutter, and 5-year aggregation (Note 3) smooths the one-off spikes seen in Viz 1. - **Proportional circles instead of a choropleth.** A choropleth would encode amount with country *area*, so large countries (Brazil, Canada, Australia) would look important regardless of how much they receive, and small recipients (Taiwan, Kuwait, the Baltics) would be invisible. Circles at centroids encode amount with circle area alone (sqrt scale, shared across all periods, so circles are comparable between maps). - **Colour = region.** This turns "which regions" into something you can see before reading any labels: the map changes from blue/red/orange (Asia) to green (Eastern Europe) to yellow/purple (Latin America/Africa). Region labels come from the GeoJSON's UN sub-region attribute rather than a hand-made mapping. Sub-regions with very little money are merged into a grey "Other". - **Equal Earth projection** (equal-area), so the base map does not exaggerate high-latitude areas. - **The companion 100% bar chart** fixes the main weakness of maps (judging circle areas precisely) by giving the exact regional share in each period with the same colours. *Limitations:* overlapping circles in Europe are small and hard to separate (hover helps), and a circle at a centroid ignores *where inside* a country the money went.4d:[{"id":"55260abbc777c0a3b8fed19f3929dd822fef9d5118b53b76b2176d20782910e599eac919999ea8ee85a60b783fd37082574f6591fd46c0d70ddf9b00df71ce27","href":"https://static.observableusercontent.com/files/55260abbc777c0a3b8fed19f3929dd822fef9d5118b53b76b2176d20782910e599eac919999ea8ee85a60b783fd37082574f6591fd46c0d70ddf9b00df71ce27","name":"countries-50m.json","type":"application/json","lastModified":1794428696213,"size":4177662},{"id":"09040dddbda03374a466600047ccbc70c46e6853884eb725db2141c566ca1b78fb7cc935096e8d5468c21e8df215e73fc49cdaaf7e2f1f89139793da25be02b2","href":"https://static.observableusercontent.com/files/09040dddbda03374a466600047ccbc70c46e6853884eb725db2141c566ca1b78fb7cc935096e8d5468c21e8df215e73fc49cdaaf7e2f1f89139793da25be02b2","name":"aiddata-countries-only.csv","type":"text/csv","lastModified":1794428629514,"size":8760387}] 38:{"id":"07eaafbbf9e1bc04","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-11T20:20:59.517Z","update_time":"$D2026-11-12T17:57:53.999Z","view_time":null,"first_public_time":"$D2026-11-12T17:58:33.435Z","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":"228f91e0b55c41b6","login":"simranjeet-singh","name":"Simranjeet Singh","avatar_url":"https://avatars-next.observableusercontent.com/d58a259fbae2a8ccfde0f1b92afaafbaccb5706e866e3ac06b91e01a0db4142b","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":384,"publish_version":384,"role":null,"authored":false,"authors":[{"type":"individual","id":"eab21e992bb35bff","login":"simranjeet-singh","name":"Simranjeet Singh","avatar_url":"https://avatars-next.observableusercontent.com/d58a259fbae2a8ccfde0f1b92afaafbaccb5706e866e3ac06b91e01a0db4142b","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"228f91e0b55c41b6","login":"simranjeet-singh","name":"Simranjeet Singh","avatar_url":"https://avatars-next.observableusercontent.com/d58a259fbae2a8ccfde0f1b92afaafbaccb5706e866e3ac06b91e01a0db4142b","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":"const student_name = \"Simranjeet Singh\";\nconst student_netid = \"xs2797\";","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"const aid = await FileAttachment(\"aiddata-countries-only.csv\").csv({ typed: true });","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"const countries = await FileAttachment(\"countries-50m.json\").json();","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"function fmtUSD(v) {\n if (v >= 1e9) return \"$\" + d3.format(\".1f\")(v / 1e9) + \"B\";\n if (v >= 1e6) return \"$\" + d3.format(\".0f\")(v / 1e6) + \"M\";\n if (v >= 1e3) return \"$\" + d3.format(\".0f\")(v / 1e3) + \"K\";\n return \"$\" + d3.format(\".0f\")(v);\n}","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"$3f","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"$40","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"$41","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"function isUnspecified(name) {\n return !name || /unspecified|not specified/i.test(name);\n}","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"function prepV2(aid) {\n const amt = d => +d.commitment_amount_usd_constant;\n const valid = aid.filter(d => !isUnspecified(d.coalesced_purpose_name));\n const top10 = d3.rollups(valid, v => d3.sum(v, amt), d => d.coalesced_purpose_name)\n .sort((a, b) => d3.descending(a[1], b[1])).slice(0, 10);\n const keys = top10.map(d => d[0]);\n const rows = valid.filter(d => keys.includes(d.coalesced_purpose_name));\n const byYear = d3.rollup(rows, v => d3.sum(v, amt), d => +d.year, d => d.coalesced_purpose_name);\n const years = d3.range(1973, 2014);\n const yearly = years.map(year => {\n const o = { year };\n for (const k of keys) o[k] = byYear.get(year)?.get(k) ?? 0;\n return o;\n });\n // order purposes by their \"centre of mass\" year so the stack reads chronologically\n const com = new Map(keys.map(k => [k, d3.sum(yearly, d => d.year * d[k]) / d3.sum(yearly, d => d[k])]));\n const ordered = keys.slice().sort((a, b) => com.get(a) - com.get(b));\n return { top10, keys: ordered, yearly, com };\n}","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"$42","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"function regionOf(props) {\n const s = props.SUBREGION;\n const keep = [\"Southern Asia\", \"South-Eastern Asia\", \"Eastern Asia\", \"South America\", \"Eastern Europe\", \"Western Asia\", \"Southern Africa\"];\n return keep.includes(s) ? s : \"Other (Europe, N. America, Oceania)\";\n}","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"$43","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"$44","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"$45","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"---\n# Visualization #1 — Donated vs. received over time, per country\n\n1. How does the amount donated vs. amount received change over time for each country?\n2. Are there countries that mostly send or mostly receive, and countries with a similar amount?\n3. Are there countries that change their role over time?\n4. Are there countries with a sudden increase (\"peak\") or a sudden decrease (\"valley\")?\n\n**Solution 1a — mirrored small multiples.** One panel per country: donations are drawn *above* the axis in blue, receipts *below* it in orange, 1973 → 2013 left to right (tick marks at 1980, 1990, 2000, 2010). Panels are grouped by lifetime role and sorted by total volume. White dots mark automatically detected peaks. Hover any year for exact values.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"const v1Scale = view(Inputs.radio([\"Per-country scale\", \"Shared scale\"], { label: \"Y-axis\", value: \"Per-country scale\" }));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"const v1Data = prepV1(aid);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"display(drawV1(v1Data, { width: 1100, scale: v1Scale }));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"**Solution 1b — net-role heatmap.** Rows = countries (sorted from \"only donates\" to \"only receives\" over the whole period), columns = 5-year periods. Colour = (donated − received) / (donated + received) in that period: dark blue = pure donor, dark red = pure recipient, pale = balanced. A colour change along a row is a role change.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"display(drawV1Heatmap(v1Data, { width: 1100 }));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"$46","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"$47","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"$48","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"const v2Resolution = view(Inputs.radio([\"5-year periods\", \"Yearly\"], { label: \"Time resolution\", value: \"5-year periods\" }));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"const v2Mode = view(Inputs.radio([\"Share of top-10 total (%)\", \"Absolute amount (USD)\"], { label: \"Values\", value: \"Share of top-10 total (%)\" }));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"const v2Data = prepV2(aid);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"display(drawV2(v2Data, { width: 1100, mode: v2Mode, resolution: v2Resolution }));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"$49","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"$4a","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"---\n# Visualization #3 — The geography of donations over time\n\n*Focusing only on countries that receive donations, how do donations shift geographically over time?*\n\n**Solution:** small-multiple maps, one per 5-year period (2008–2013 is grouped into one 6-year panel so that 2013, the last year in the data, doesn't sit alone in a 1-year panel). Each recipient is a circle at its centroid: **area = amount received in that period** (on the same scale in every map), **colour = world sub-region** taken from the Natural Earth GeoJSON (`SUBREGION`). Countries that receive something in that period are shaded darker grey. Below the maps, a 100% bar per period gives the regional shares exactly. Hover circles or bars for values.\n\n*Preprocessing:* two names in AidData differ from the GeoJSON `NAME_LONG` field, so they are mapped explicitly: Korea → \"Republic of Korea\", Slovak Republic → \"Slovakia\". After that all 47 countries match (`v3Data.unmatched` is empty).","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"const v3Data = prepV3(aid, countries);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"display(drawV3Maps(v3Data, countries, { width: 1100 }));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"display(drawV3Regions(v3Data, { width: 1100 }));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"$4b","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"$4c","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"2"}} 33:null