34:["$","title",null,{"children":"Mini-Project 2: Temporal Data Visualization (Due Nov. 12th) | Yabo Wang | 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:T1f20,chart1 = { const [minYear, maxYear] = d3.extent(raw_aiddata, d => +d.year); const years = d3.range(minYear, maxYear + 1); const countryMap = new Map(); raw_aiddata.forEach(d => { const yr = +d.year; const amt = +d.commitment_amount_usd_constant || 0; if (amt <= 0) return; if (d.donor) { if (!countryMap.has(d.donor)) { countryMap.set(d.donor, { country: d.donor, totalDonated: 0, totalReceived: 0, byYear: new Map() }); } const c = countryMap.get(d.donor); c.totalDonated += amt; if (!c.byYear.has(yr)) c.byYear.set(yr, { donated: 0, received: 0 }); c.byYear.get(yr).donated += amt; } if (d.recipient) { if (!countryMap.has(d.recipient)) { countryMap.set(d.recipient, { country: d.recipient, totalDonated: 0, totalReceived: 0, byYear: new Map() }); } const c = countryMap.get(d.recipient); c.totalReceived += amt; if (!c.byYear.has(yr)) c.byYear.set(yr, { donated: 0, received: 0 }); c.byYear.get(yr).received += amt; } }); const countriesData = Array.from(countryMap.values()).map(c => { const maxAnnual = d3.max(Array.from(c.byYear.values()), v => Math.max(v.donated, v.received)) || 1; const netRatio = (c.totalDonated - c.totalReceived) / (c.totalDonated + c.totalReceived); return { ...c, maxAnnual, netRatio }; }).sort((a, b) => d3.descending(a.netRatio, b.netRatio) || d3.descending(a.totalDonated + a.totalReceived, b.totalDonated + b.totalReceived)); const rowHeight = 26; const margin = { top: 115, right: 205, bottom: 45, left: 165 }; const width = 1060; const height = countriesData.length * rowHeight + margin.top + margin.bottom; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .style("font-family", "sans-serif") .style("background", "#ffffff"); const x = d3.scaleBand() .domain(years) .range([margin.left, width - margin.right]) .padding(0.12); const yCountry = d3.scaleBand() .domain(countriesData.map(d => d.country)) .range([margin.top, height - margin.bottom]) .padding(0.1); svg.append("text") .attr("x", margin.left) .attr("y", 24) .attr("font-size", "16px") .attr("font-weight", "bold") .text(`Visualization #1: Donated vs. Received Aid Over Time for All ${countriesData.length} Countries (${minYear}–${maxYear})`); svg.append("text") .attr("x", margin.left) .attr("y", 44) .attr("font-size", "11.5px") .attr("fill", "#444") .text("Row-normalized linear scales (100% height = country's peak year; non-zero bars have a 0.8px minimum height for visibility)."); const legend = svg.append("g").attr("transform", `translate(${margin.left}, 58)`); legend.append("rect").attr("x", 0).attr("y", 0).attr("width", 12).attr("height", 12).attr("fill", "#1f77b4"); legend.append("text").attr("x", 18).attr("y", 10).attr("font-size", "12px").attr("font-weight", "500").text("Donated (Upward from center baseline)"); legend.append("rect").attr("x", 260).attr("y", 0).attr("width", 12).attr("height", 12).attr("fill", "#d62728"); legend.append("text").attr("x", 278).attr("y", 10).attr("font-size", "12px").attr("font-weight", "500").text("Received (Downward from center baseline)"); svg.append("text") .attr("x", width - margin.right + 12) .attr("y", margin.top - 18) .attr("font-size", "11px") .attr("font-weight", "bold") .text("Role Split"); svg.append("text") .attr("x", width - 10) .attr("y", margin.top - 18) .attr("text-anchor", "end") .attr("font-size", "11px") .attr("font-weight", "bold") .text("Peak / Total"); const tickYears = years.filter(y => y % 5 === 0); svg.append("g") .attr("transform", `translate(0, ${margin.top - 4})`) .call(d3.axisTop(x).tickValues(tickYears)) .call(g => g.select(".domain").remove()); svg.append("g") .attr("transform", `translate(0, ${height - margin.bottom + 4})`) .call(d3.axisBottom(x).tickValues(tickYears)) .call(g => g.select(".domain").remove()); const rows = svg.selectAll(".country-row") .data(countriesData) .join("g") .attr("class", "country-row") .attr("transform", d => `translate(0, ${yCountry(d.country)})`); rows.append("rect") .attr("x", margin.left) .attr("y", 0) .attr("width", width - margin.left - margin.right) .attr("height", yCountry.bandwidth()) .attr("fill", (d, i) => i % 2 === 0 ? "#f8fafc" : "#ffffff"); tickYears.forEach(yr => { rows.append("line") .attr("x1", x(yr) + x.bandwidth() / 2) .attr("x2", x(yr) + x.bandwidth() / 2) .attr("y1", 0) .attr("y2", yCountry.bandwidth()) .attr("stroke", "#e2e8f0") .attr("stroke-dasharray", "2,2") .attr("stroke-width", 0.7); }); rows.append("line") .attr("x1", margin.left) .attr("x2", width - margin.right) .attr("y1", yCountry.bandwidth() / 2) .attr("y2", yCountry.bandwidth() / 2) .attr("stroke", "#cbd5e1") .attr("stroke-width", 0.7); rows.append("text") .attr("x", margin.left - 8) .attr("y", yCountry.bandwidth() / 2 + 4) .attr("text-anchor", "end") .attr("font-size", "11px") .attr("font-weight", "500") .text(d => d.country); const splitBarWidth = 70; rows.append("rect") .attr("x", width - margin.right + 12) .attr("y", yCountry.bandwidth() / 2 - 4) .attr("width", d => splitBarWidth * (d.totalDonated / (d.totalDonated + d.totalReceived))) .attr("height", 8) .attr("fill", "#1f77b4") .append("title") .text(d => `Donated: $${d3.format(",.0f")(d.totalDonated)} (${d3.format(".1%")(d.totalDonated / (d.totalDonated + d.totalReceived))})`); rows.append("rect") .attr("x", d => width - margin.right + 12 + splitBarWidth * (d.totalDonated / (d.totalDonated + d.totalReceived))) .attr("y", yCountry.bandwidth() / 2 - 4) .attr("width", d => splitBarWidth * (d.totalReceived / (d.totalDonated + d.totalReceived))) .attr("height", 8) .attr("fill", "#d62728") .append("title") .text(d => `Received: $${d3.format(",.0f")(d.totalReceived)} (${d3.format(".1%")(d.totalReceived / (d.totalDonated + d.totalReceived))})`); rows.append("text") .attr("x", width - 10) .attr("y", yCountry.bandwidth() / 2 + 3.5) .attr("text-anchor", "end") .attr("font-size", "9.5px") .attr("fill", "#475569") .text(d => `$${d3.format(".2s")(d.maxAnnual).replace("G", "B")} / $${d3.format(".2s")(d.totalDonated + d.totalReceived).replace("G", "B")}`); rows.each(function(countryObj) { const group = d3.select(this); const midY = yCountry.bandwidth() / 2; const yRow = d3.scaleLinear() .domain([0, countryObj.maxAnnual]) .range([0, midY - 1.5]); years.forEach(yr => { const yrData = countryObj.byYear.get(yr); if (!yrData) return; if (yrData.donated > 0) { const h = Math.max(0.8, yRow(yrData.donated)); group.append("rect") .attr("x", x(yr)) .attr("y", midY - h) .attr("width", x.bandwidth()) .attr("height", h) .attr("fill", "#1f77b4") .append("title") .text(`${countryObj.country} (${yr})\nDonated: $${d3.format(",.0f")(yrData.donated)}`); } if (yrData.received > 0) { const h = Math.max(0.8, yRow(yrData.received)); group.append("rect") .attr("x", x(yr)) .attr("y", midY) .attr("width", x.bandwidth()) .attr("height", h) .attr("fill", "#d62728") .append("title") .text(`${countryObj.country} (${yr})\nReceived: $${d3.format(",.0f")(yrData.received)}`); } }); }); svg.append("text") .attr("x", (margin.left + width - margin.right) / 2) .attr("y", height - 8) .attr("text-anchor", "middle") .attr("font-size", "12px") .attr("font-weight", "bold") .text("Commitment Year"); return svg.node(); }40:T15c6,chart1b = { const [minYear, maxYear] = d3.extent(raw_aiddata, d => +d.year); const years = d3.range(minYear, maxYear + 1); const countryMap = new Map(); raw_aiddata.forEach(d => { const yr = +d.year; const amt = +d.commitment_amount_usd_constant || 0; if (amt <= 0) return; [["donated", d.donor], ["received", d.recipient]].forEach(([role, name]) => { if (!name) return; if (!countryMap.has(name)) { countryMap.set(name, { country: name, totalDonated: 0, totalReceived: 0, byYear: new Map() }); } const c = countryMap.get(name); if (role === "donated") c.totalDonated += amt; else c.totalReceived += amt; if (!c.byYear.has(yr)) c.byYear.set(yr, { donated: 0, received: 0 }); c.byYear.get(yr)[role] += amt; }); }); const netRole = v => (v.donated - v.received) / (v.donated + v.received); const countriesData = Array.from(countryMap.values()).map(c => { const roles = Array.from(c.byYear.values(), netRole); return { ...c, netRatio: (c.totalDonated - c.totalReceived) / (c.totalDonated + c.totalReceived), donorYears: roles.filter(r => r > 0).length, recipientYears: roles.filter(r => r < 0).length }; }).sort((a, b) => d3.descending(a.netRatio, b.netRatio) || d3.descending(a.totalDonated + a.totalReceived, b.totalDonated + b.totalReceived)); const rowHeight = 15; const margin = { top: 118, right: 205, bottom: 40, left: 165 }; const width = 1060; const height = countriesData.length * rowHeight + margin.top + margin.bottom; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .style("font-family", "sans-serif") .style("background", "#ffffff"); const x = d3.scaleBand() .domain(years) .range([margin.left, width - margin.right]) .padding(0.12); const y = d3.scaleBand() .domain(countriesData.map(d => d.country)) .range([margin.top, height - margin.bottom]) .padding(0.12); const color = d3.scaleDiverging([-1, 0, 1], d3.interpolateRdBu); svg.append("text") .attr("x", margin.left) .attr("y", 24) .attr("font-size", "16px") .attr("font-weight", "bold") .text("Visualization #1 (companion view): Net Role of Each Country in Each Year"); svg.append("text") .attr("x", margin.left) .attr("y", 44) .attr("font-size", "11.5px") .attr("fill", "#444") .text("Cell colour = (donated − received) / (donated + received) in that year, regardless of amount. No cell = no activity. Same row order as the bar chart."); const legendWidth = 260; const gradient = svg.append("defs").append("linearGradient").attr("id", "net-role-gradient"); d3.range(0, 1.001, 0.05).forEach(t => { gradient.append("stop").attr("offset", `${t * 100}%`).attr("stop-color", d3.interpolateRdBu(t)); }); const legend = svg.append("g").attr("transform", `translate(${margin.left}, 58)`); legend.append("rect") .attr("width", legendWidth) .attr("height", 10) .attr("fill", "url(#net-role-gradient)") .attr("stroke", "#94a3b8") .attr("stroke-width", 0.5); legend.append("text").attr("x", 0).attr("y", 23).attr("font-size", "10.5px").text("only receives (−1)"); legend.append("text").attr("x", legendWidth / 2).attr("y", 23).attr("font-size", "10.5px").attr("text-anchor", "middle").text("balanced (0)"); legend.append("text").attr("x", legendWidth).attr("y", 23).attr("font-size", "10.5px").attr("text-anchor", "end").text("only donates (+1)"); svg.append("text") .attr("x", width - margin.right + 12) .attr("y", margin.top - 18) .attr("font-size", "11px") .attr("font-weight", "bold") .text("Years as net donor / net recipient"); const tickYears = years.filter(yr => yr % 5 === 0); svg.append("g") .attr("transform", `translate(0, ${margin.top - 4})`) .call(d3.axisTop(x).tickValues(tickYears)) .call(g => g.select(".domain").remove()); svg.append("g") .attr("transform", `translate(0, ${height - margin.bottom + 4})`) .call(d3.axisBottom(x).tickValues(tickYears)) .call(g => g.select(".domain").remove()); const rows = svg.selectAll(".role-row") .data(countriesData) .join("g") .attr("class", "role-row") .attr("transform", d => `translate(0, ${y(d.country)})`); rows.append("rect") .attr("x", margin.left) .attr("y", 0) .attr("width", width - margin.left - margin.right) .attr("height", y.bandwidth()) .attr("fill", "#f1f5f9"); rows.append("text") .attr("x", margin.left - 8) .attr("y", y.bandwidth() / 2 + 3.5) .attr("text-anchor", "end") .attr("font-size", "10.5px") .text(d => d.country); rows.append("text") .attr("x", width - margin.right + 12) .attr("y", y.bandwidth() / 2 + 3.5) .attr("font-size", "9.5px") .attr("fill", "#475569") .text(d => `${d.donorYears} donor / ${d.recipientYears} recipient`); // One cell per country-year that has any activity rows.selectAll(".cell") .data(d => Array.from(d.byYear, ([year, v]) => ({ country: d.country, year, ...v, role: netRole(v) }))) .join("rect") .attr("class", "cell") .attr("x", d => x(d.year)) .attr("y", 0) .attr("width", x.bandwidth()) .attr("height", y.bandwidth()) .attr("fill", d => color(d.role)) .attr("stroke", "#94a3b8") .attr("stroke-width", 0.4) .append("title") .text(d => `${d.country} (${d.year})\nDonated: $${d3.format(",.0f")(d.donated)}\nReceived: $${d3.format(",.0f")(d.received)}\nNet role: ${d3.format("+.2f")(d.role)}`); return svg.node(); }41:Tf21,### Visualization #1 — Written answer **1. How do donated vs. received amounts change over time?** Each row is one country: blue bars above the baseline are donations, red bars below are aid received. The largest donors (United States, Japan, Germany, France, United Kingdom, Netherlands, Sweden, Switzerland) donate in every year from 1973 to 2013, and India, Thailand, Brazil, Colombia and Chile receive in every year. Two time patterns stand out: a column of one-off red bars in 1980–81 for many high-income countries (e.g., Canada $2.54B, Italy $0.89B, Australia $0.75B), and Central/Eastern European countries (e.g., Poland, Hungary, Czech Republic) receiving mainly between 1989 and 2004. **2. Mostly send, mostly receive, or balanced?** (Role Split bar.) The top twelve rows, from the Netherlands to Belgium, donate more than 90% of their total volume (the Netherlands and Monaco never receive). At the bottom, India, South Africa, Romania, Lithuania and Latvia never donate, and Poland ($24.5B received vs. $0.4M donated), Brazil, Colombia, Thailand and Korea (95% received) are almost pure recipients. The balanced cases are Austria ($0.78B donated vs. $0.77B received) and Australia ($2.45B vs. $2.57B), followed by Italy (62% donated) and Canada (65%). **3. Role changes?** Recipient → donor: Korea receives every year from 1973 to 2004 and donates only from 2006; Spain receives in 1980–82 and donates from 1989; Greece receives until 1991 and donates from 2002. Donor → recipient: Saudi Arabia donates only in 1977–87 and later only receives (peak $2.72B in 1999); Kuwait donates mainly in 1976–89 and then receives $7.41B in 1992. **4. Peaks and valleys?** Peaks: in 1992 Poland ($9.14B) and Kuwait ($7.41B, after $0.01B in 1991) peak as recipients while the United States ($11.4B) and Germany ($8.55B) peak as donors; in 1997 Thailand ($6.37B) peaks as recipient and Japan ($10.8B) as donor; Korea ($5.78B) and Saudi Arabia ($2.72B) peak in 1999, and Canada in 1981 ($2.54B). Valleys: Korea falls to $0.01B in 1998, between $1.02B in 1997 and $5.78B in 1999; India's lowest year is 2000 ($1.14B), between $4.79B in 1997 and $5.39B in 2007; aid to Poland, Hungary, the Czech Republic and the Slovak Republic almost stops after 2004–05. **Design rationale.** One row per country keeps all 47 countries in a single view. Direction (up/down) and colour encode the two roles, so a role change reads as a switch from red to blue. Rows are sorted by the share of volume donated, so question 2 can be read from the order, and the Role Split bar shows it explicitly. Each row uses its own linear scale (100% = that country's peak year) because a shared scale would flatten every country except the largest; the Peak / Total column restores absolute amounts. Trade-offs: bar heights are not comparable across rows; one extreme year compresses the rest of its row (e.g., Germany's 1992 peak is $8.55B of a $47B total); and non-zero bars have a 0.8px minimum height, so tiny flows such as Poland's $0.4M of donations stay visible but look larger than they are. **Companion heatmap.** Because each row of the bar chart is scaled to its peak year, small flows shrink to hairlines and a role change can be hard to see — Korea's donations after 2006 are at most 7% of its 1999 peak. The heatmap therefore ignores amounts and colours each country-year only by its net role, (donated − received) / (donated + received), so a role change appears as a colour flip: Korea is red through 2004 and blue from 2006, Spain is red in 1980–82 and blue from 1989, and Kuwait is mostly blue in 1976–89 and mostly red from 1991. The two views are complementary: the bars answer questions 1 and 4 (amounts, peaks and valleys), the heatmap questions 2 and 3 (roles and role changes). Its cost is that a very small flow colours a cell as strongly as a large one.42:T1447,chart2a = { const normalizePurpose = (name) => { const s = (name || "").trim().toLowerCase(); return s.charAt(0).toUpperCase() + s.slice(1); }; const filtered = raw_aiddata.filter(d => { if (!d.coalesced_purpose_name) return false; const upper = d.coalesced_purpose_name.trim().toUpperCase(); return upper !== "UNSPECIFIED" && upper !== "SECTORS NOT SPECIFIED" && +d.year >= 1973 && +d.year <= 2013; }); const purposeTotals = d3.rollup( filtered, v => d3.sum(v, d => +d.commitment_amount_usd_constant || 0), d => normalizePurpose(d.coalesced_purpose_name) ); const top10List = Array.from(purposeTotals, ([purpose, total]) => ({ purpose, total })) .sort((a, b) => d3.descending(a.total, b.total)) .slice(0, 10); const top10Names = top10List.map(d => d.purpose); const top10Set = new Set(top10Names); const years = d3.range(1973, 2014); const yearMap = new Map(years.map(y => { const obj = { year: y }; top10Names.forEach(p => obj[p] = 0); return [y, obj]; })); filtered.forEach(d => { const pName = normalizePurpose(d.coalesced_purpose_name); if (top10Set.has(pName)) { const yr = +d.year; if (yearMap.has(yr)) { yearMap.get(yr)[pName] += (+d.commitment_amount_usd_constant || 0); } } }); const timeData = Array.from(yearMap.values()); const stackRelative = d3.stack() .keys([...top10Names].reverse()) .offset(d3.stackOffsetExpand)(timeData); const width = 1040; const height = 580; const margin = { top: 75, right: 420, bottom: 55, left: 68 }; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .style("font-family", "sans-serif") .style("background", "#fff"); const color = d3.scaleOrdinal() .domain(top10Names) .range(d3.schemeTableau10); svg.append("text") .attr("x", margin.left) .attr("y", 25) .attr("font-size", "16px") .attr("font-weight", "bold") .text("Visualization #2 (Solution A): Relative Share Within Top 10 Purposes & Total Disbursement (1973–2013)"); svg.append("text") .attr("x", margin.left) .attr("y", 45) .attr("font-size", "11.5px") .attr("fill", "#555") .text("Left: 100% Stacked Area (Share among Top 10, Rank #1 at top) | Right: Cumulative USD Constant (All case variants merged)"); const x = d3.scaleLinear() .domain([1973, 2013]) .range([margin.left, width - margin.right]); const y = d3.scaleLinear() .domain([0, 1]) .range([height - margin.bottom, margin.top]); const area = d3.area() .x(d => x(d.data.year)) .y0(d => y(d[0])) .y1(d => y(d[1])) .curve(d3.curveMonotoneX); svg.append("g") .selectAll("path") .data(stackRelative) .join("path") .attr("fill", d => color(d.key)) .attr("d", area) .attr("stroke", "#fff") .attr("stroke-width", 0.5) .append("title") .text(d => d.key); svg.append("g") .attr("transform", `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(x).ticks(10).tickFormat(d3.format("d"))); svg.append("text") .attr("x", (margin.left + width - margin.right) / 2) .attr("y", height - 15) .attr("text-anchor", "middle") .attr("font-size", "12px") .attr("font-weight", "bold") .text("Commitment Year"); svg.append("g") .attr("transform", `translate(${margin.left}, 0)`) .call(d3.axisLeft(y).ticks(10, "%")); svg.append("text") .attr("transform", "rotate(-90)") .attr("x", -(margin.top + height - margin.bottom) / 2) .attr("y", 20) .attr("text-anchor", "middle") .attr("font-size", "12px") .attr("font-weight", "bold") .text("Relative Share Among Top 10 Purposes (%)"); const rightLeft = width - margin.right + 30; const rightWidth = margin.right - 45; const yBar = d3.scaleBand() .domain(top10Names) .range([margin.top, height - margin.bottom]) .paddingInner(0.42) .paddingOuter(0.1); const xBar = d3.scaleLinear() .domain([0, d3.max(top10List, d => d.total)]) .range([0, rightWidth - 105]); const barGroup = svg.append("g") .attr("transform", `translate(${rightLeft}, 0)`); barGroup.append("text") .attr("x", 0) .attr("y", margin.top - 14) .attr("font-size", "12px") .attr("font-weight", "bold") .text("Top 10 Purposes (Total USD Constant)"); const bars = barGroup.selectAll(".bar-item") .data(top10List) .join("g") .attr("transform", d => `translate(0, ${yBar(d.purpose)})`); bars.append("rect") .attr("x", 0) .attr("y", 0) .attr("width", d => xBar(d.total)) .attr("height", yBar.bandwidth()) .attr("fill", d => color(d.purpose)) .attr("rx", 2); bars.append("text") .attr("x", 2) .attr("y", -5) .attr("font-size", "11px") .attr("font-weight", "600") .attr("fill", "#1e293b") .text((d, i) => `${i + 1}. ${d.purpose}`); bars.append("text") .attr("x", d => xBar(d.total) + 6) .attr("y", yBar.bandwidth() / 2 + 4) .attr("font-size", "10.5px") .attr("font-weight", "500") .attr("fill", "#334155") .text(d => `$${d3.format(".3s")(d.total).replace("G", "B")}`); return svg.node(); }43:T12c3,chart2b = { const normalizePurpose = (name) => { const s = (name || "").trim().toLowerCase(); return s.charAt(0).toUpperCase() + s.slice(1); }; const filtered = raw_aiddata.filter(d => { if (!d.coalesced_purpose_name) return false; const upper = d.coalesced_purpose_name.trim().toUpperCase(); return upper !== "UNSPECIFIED" && upper !== "SECTORS NOT SPECIFIED" && +d.year >= 1973 && +d.year <= 2013; }); const purposeTotals = d3.rollup( filtered, v => d3.sum(v, d => +d.commitment_amount_usd_constant || 0), d => normalizePurpose(d.coalesced_purpose_name) ); const top10Names = Array.from(purposeTotals, ([purpose, total]) => ({ purpose, total })) .sort((a, b) => d3.descending(a.total, b.total)) .slice(0, 10) .map(d => d.purpose); const top10Set = new Set(top10Names); const years = d3.range(1973, 2014); const byYearTotal = d3.rollup( filtered.filter(d => top10Set.has(normalizePurpose(d.coalesced_purpose_name))), v => d3.sum(v, d => +d.commitment_amount_usd_constant || 0), d => +d.year ); const byPurposeYear = d3.rollup( filtered.filter(d => top10Set.has(normalizePurpose(d.coalesced_purpose_name))), v => d3.sum(v, d => +d.commitment_amount_usd_constant || 0), d => normalizePurpose(d.coalesced_purpose_name), d => +d.year ); const series = top10Names.map(purpose => { const pMap = byPurposeYear.get(purpose) || new Map(); return { purpose, values: years.map(yr => { const tot = byYearTotal.get(yr) || 1; const val = pMap.get(yr) || 0; return { year: yr, share: val / tot, amount: val }; }) }; }); const maxShare = d3.max(series, s => d3.max(s.values, v => v.share)) || 0.9; const rowHeight = 48; const margin = { top: 65, right: 55, bottom: 45, left: 275 }; const width = 1040; const height = top10Names.length * rowHeight + margin.top + margin.bottom; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .style("font-family", "sans-serif") .style("background", "#fff"); const color = d3.scaleOrdinal().domain(top10Names).range(d3.schemeTableau10); const x = d3.scaleLinear().domain([1973, 2013]).range([margin.left, width - margin.right]); const yRow = d3.scaleBand().domain(top10Names).range([margin.top, height - margin.bottom]).padding(0.18); const yShare = d3.scaleLinear().domain([0, maxShare]).nice().range([yRow.bandwidth(), 0]); svg.append("text") .attr("x", margin.left) .attr("y", 25) .attr("font-size", "16px") .attr("font-weight", "bold") .text("Visualization #2 (Solution B): Faceted Area Small Multiples of Annual Share (1973–2013)"); svg.append("text") .attr("x", margin.left) .attr("y", 45) .attr("font-size", "12px") .attr("fill", "#555") .text(`Each purpose rests on its own flat zero-baseline (shared 0%–${d3.format(".0%")(yShare.domain()[1])} vertical scale shown on right), preventing middle-layer distortion.`); svg.append("g") .attr("transform", `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(x).ticks(10).tickFormat(d3.format("d"))); const rows = svg.selectAll(".purpose-row") .data(series) .join("g") .attr("transform", d => `translate(0, ${yRow(d.purpose)})`); rows.append("rect") .attr("x", margin.left) .attr("y", 0) .attr("width", width - margin.left - margin.right) .attr("height", yRow.bandwidth()) .attr("fill", "#f8fafc"); rows.each(function() { d3.select(this).append("g") .attr("transform", `translate(${width - margin.right}, 0)`) .call(d3.axisRight(yShare).tickValues([yShare.domain()[1] / 2, yShare.domain()[1]]).tickFormat(d3.format(".0%")).tickSize(3)) .call(g => g.select(".domain").attr("stroke", "#cbd5e1")) .call(g => g.selectAll("text").attr("font-size", "8.5px").attr("fill", "#64748b")); }); rows.append("text") .attr("x", margin.left - 10) .attr("y", yRow.bandwidth() / 2 + 4) .attr("text-anchor", "end") .attr("font-size", "11px") .attr("font-weight", "600") .attr("fill", "#1e293b") .text((d, i) => `${i + 1}. ${d.purpose}`); const area = d3.area() .x(d => x(d.year)) .y0(yRow.bandwidth()) .y1(d => yShare(d.share)) .curve(d3.curveMonotoneX); rows.append("path") .attr("d", d => area(d.values)) .attr("fill", d => color(d.purpose)) .attr("fill-opacity", 0.85) .attr("stroke", d => color(d.purpose)) .attr("stroke-width", 1.2); svg.append("text") .attr("x", margin.left + (width - margin.left - margin.right) / 2) .attr("y", height - 6) .attr("text-anchor", "middle") .attr("font-size", "12px") .attr("font-weight", "bold") .text("Commitment Year"); return svg.node(); }44:Ta3f,### Visualization #2 — Written answer **Data note.** No purpose is literally named "UNSPECIFIED"; the closest category, "Sectors not specified", is excluded. Many purposes appear twice with different capitalisation (e.g., "RAIL TRANSPORT" and "Rail transport"), so names are merged case-insensitively before ranking. After merging, "Sectors not specified" ($8.56B) would rank 11th, so excluding it does not change the top 10. The simplified dataset covers 1973–2013 (the full AidData starts in 1947), so the 1973–2013 year filter in the code does not drop any rows. **What are the top 10 purposes?** By total amount (bars on the right of Solution A): Air transport $39.8B, Rail transport $20.8B, Industrial development $19.7B, Rescheduling and refinancing $18.0B, Power generation/non-renewable sources $15.1B, Import support (capital goods) $10.3B, Social/ welfare services $9.21B, Telecommunications $8.68B, General budget support $8.63B, Power generation/renewable sources $8.62B. **How do their relative amounts compare over time?** Different purposes dominate different periods (shares of the yearly top-10 total): - 1973–79: Rescheduling and refinancing (29%; 60% in 1975), followed by Import support and Industrial development (17% each). - 1980–84: Air transport (41%; 60% in 1981). - 1985–94: Rescheduling and refinancing again (29% in 1985–89, 26% in 1990–94); it has no records after 1996. - 1995–98: General budget support (25%; 49% in 1997). - 1999–2002: Air transport (61%; 71% in 2002), then almost nothing after 2005. - 2003–07: Social/ welfare services (42%; 68% in 2007). - 2008–13: Rail transport (69%; 84% in 2010). **Design rationale and comparison.** The question is about relative amounts, so both solutions plot each purpose's share of the yearly top-10 total; the ranked bars give the absolute totals and act as the colour legend. - *Solution A (100% stacked area)* shows the whole composition at once, so take-overs such as Air transport in 1999–2002 or Rail transport after 2008 are obvious. Its weakness is that only the top and bottom layers have a flat baseline, so middle layers are hard to read precisely. Yearly values are kept rather than merged into 5-year bins, so that single-year peaks such as 1975 or 2010 remain visible; the price is a jagged picture. - *Solution B (one row per purpose, shared 0–90% scale)* gives each purpose its own baseline, so the timing and height of every peak can be read directly; the cost is that the part-to-whole picture is lost. A is better for the overall story and B for reading individual purposes, so I include both.45:T1188,chart3 = { const nameFix = { "United States": "United States of America", "Korea": "South Korea", "Slovak Republic": "Slovakia", "Czech Republic": "Czechia" }; const periods = [ { label: "1973–1978 (6 yrs)", start: 1973, end: 1978 }, { label: "1979–1983 (5 yrs)", start: 1979, end: 1983 }, { label: "1984–1988 (5 yrs)", start: 1984, end: 1988 }, { label: "1989–1993 (5 yrs)", start: 1989, end: 1993 }, { label: "1994–1998 (5 yrs)", start: 1994, end: 1998 }, { label: "1999–2003 (5 yrs)", start: 1999, end: 2003 }, { label: "2004–2008 (5 yrs)", start: 2004, end: 2008 }, { label: "2009–2013 (5 yrs)", start: 2009, end: 2013 } ]; const periodData = periods.map(p => { const map = new Map(); raw_aiddata.forEach(d => { const yr = +d.year; if (yr >= p.start && yr <= p.end && d.recipient) { const normName = nameFix[d.recipient] || d.recipient; const amt = +d.commitment_amount_usd_constant || 0; if (amt > 0) map.set(normName, (map.get(normName) || 0) + amt); } }); return { ...p, values: map }; }); const allPositiveValues = []; periodData.forEach(p => { for (const val of p.values.values()) { if (val > 0) allPositiveValues.push(val); } }); const maxAid = d3.max(allPositiveValues) || 1e10; const colorScale = d3.scaleSequentialLog(d3.interpolateYlOrRd) .domain([1e6, maxAid]) .clamp(true); const cols = 2; const rows = 4; const mapWidth = 500; const mapHeight = 245; const margin = { top: 115, right: 20, bottom: 25, left: 20 }; const width = cols * mapWidth + margin.left + margin.right; const height = rows * mapHeight + margin.top + margin.bottom; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .style("font-family", "sans-serif") .style("background", "#ffffff"); svg.append("text") .attr("x", margin.left) .attr("y", 26) .attr("font-size", "16px") .attr("font-weight", "bold") .text("Visualization #3: Geographical History of Received Donations Across 8 Chronological Periods (1973–2013)"); svg.append("text") .attr("x", margin.left) .attr("y", 46) .attr("font-size", "12px") .attr("fill", "#555") .text("Eight periods (the first covers 6 years, the rest 5). Shared log colour scale; grey = no aid recorded in that period (the dataset covers only 47 countries)."); const d3Legend = Legend(colorScale, { title: "Total Aid Received per Period (Constant USD, Log Scale)", width: 420, tickValues: d3.range(6, Math.log10(maxAid)).map(e => 10 ** e), tickFormat: d => (d === 1e6 ? "≤" : "") + "$" + d3.format("~s")(d).replace("G", "B") }); svg.append("g") .attr("transform", `translate(${margin.left}, 54)`) .append(() => d3Legend); const projection = d3.geoNaturalEarth1() .fitSize([mapWidth - 16, mapHeight - 34], countriesGeo); const path = d3.geoPath().projection(projection); periodData.forEach((p, idx) => { const col = idx % cols; const row = Math.floor(idx / cols); const xOffset = margin.left + col * mapWidth; const yOffset = margin.top + row * mapHeight; const g = svg.append("g") .attr("transform", `translate(${xOffset}, ${yOffset})`); g.append("rect") .attr("x", 4) .attr("y", 4) .attr("width", mapWidth - 8) .attr("height", mapHeight - 8) .attr("fill", "#f8fafc") .attr("stroke", "#cbd5e1") .attr("rx", 4); g.append("text") .attr("x", mapWidth / 2) .attr("y", 22) .attr("text-anchor", "middle") .attr("font-size", "13px") .attr("font-weight", "bold") .attr("fill", "#0f172a") .text(p.label); const mapG = g.append("g").attr("transform", `translate(8, 28)`); mapG.selectAll("path") .data(countriesGeo.features) .join("path") .attr("d", path) .attr("fill", feature => { const cName = feature.properties.name || feature.properties.ADMIN; const val = p.values.get(cName); return val && val > 0 ? colorScale(val) : "#e2e8f0"; }) .attr("stroke", "#ffffff") .attr("stroke-width", 0.4) .append("title") .text(feature => { const cName = feature.properties.name || feature.properties.ADMIN; const val = p.values.get(cName) || 0; return `${cName} (${p.label})\nReceived: $${d3.format(",.0f")(val)}`; }); }); return svg.node(); }46:T169d,chart3b = { const periods = [ { label: "1973–1978 (6 yrs)", start: 1973, end: 1978 }, { label: "1979–1983 (5 yrs)", start: 1979, end: 1983 }, { label: "1984–1988 (5 yrs)", start: 1984, end: 1988 }, { label: "1989–1993 (5 yrs)", start: 1989, end: 1993 }, { label: "1994–1998 (5 yrs)", start: 1994, end: 1998 }, { label: "1999–2003 (5 yrs)", start: 1999, end: 2003 }, { label: "2004–2008 (5 yrs)", start: 2004, end: 2008 }, { label: "2009–2013 (5 yrs)", start: 2009, end: 2013 } ]; const regionOf = { "India": "South Asia", "Thailand": "East & Southeast Asia", "Korea": "East & Southeast Asia", "Taiwan": "East & Southeast Asia", "Japan": "East & Southeast Asia", "Brazil": "South America", "Colombia": "South America", "Chile": "South America", "Poland": "Central & Eastern Europe", "Romania": "Central & Eastern Europe", "Hungary": "Central & Eastern Europe", "Czech Republic": "Central & Eastern Europe", "Slovak Republic": "Central & Eastern Europe", "Slovenia": "Central & Eastern Europe", "Estonia": "Central & Eastern Europe", "Latvia": "Central & Eastern Europe", "Lithuania": "Central & Eastern Europe", "Kuwait": "Middle East", "Saudi Arabia": "Middle East", "Qatar": "Middle East", "United Arab Emirates": "Middle East", "South Africa": "Africa", "Canada": "North America & Oceania", "United States": "North America & Oceania", "Australia": "North America & Oceania", "New Zealand": "North America & Oceania" }; const regionFor = name => regionOf[name] || "Western Europe"; const regionOrder = ["South Asia", "East & Southeast Asia", "South America", "Central & Eastern Europe", "Middle East", "Africa", "North America & Oceania", "Western Europe"]; const data = periods.map(p => { const totals = d3.rollup( raw_aiddata.filter(d => d.recipient && +d.year >= p.start && +d.year <= p.end), v => d3.sum(v, d => +d.commitment_amount_usd_constant || 0), d => d.recipient ); const top = Array.from(totals, ([country, total]) => ({ country, total, region: regionFor(country) })) .sort((a, b) => d3.descending(a.total, b.total)) .slice(0, 5); return { ...p, top, periodTotal: d3.sum(totals.values()) }; }); const fmt = v => "$" + d3.format(".3s")(v).replace("G", "B"); const usedRegions = regionOrder.filter(r => data.some(p => p.top.some(d => d.region === r))); const color = d3.scaleOrdinal().domain(regionOrder).range(d3.schemeTableau10); const cols = 2; const panelWidth = 500; const panelHeight = 118; const margin = { top: 92, right: 20, bottom: 10, left: 20 }; const width = cols * panelWidth + margin.left + margin.right; const height = Math.ceil(periods.length / cols) * panelHeight + margin.top + margin.bottom; const labelWidth = 112; const barStep = 16; const x = d3.scaleLinear() .domain([0, d3.max(data, p => d3.max(p.top, d => d.total))]) .range([0, panelWidth - labelWidth - 90]); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .style("font-family", "sans-serif") .style("background", "#ffffff"); svg.append("text") .attr("x", margin.left) .attr("y", 26) .attr("font-size", "16px") .attr("font-weight", "bold") .text("Visualization #3 (companion view): Top 5 Recipients in Each Period"); svg.append("text") .attr("x", margin.left) .attr("y", 46) .attr("font-size", "12px") .attr("fill", "#555") .text("Same periods as the maps. Bar length = total received in the period (constant USD), on one linear scale shared by all panels; colour = region."); let legendX = margin.left; usedRegions.forEach(r => { const g = svg.append("g").attr("transform", `translate(${legendX}, 60)`); g.append("rect").attr("width", 12).attr("height", 12).attr("fill", color(r)); g.append("text").attr("x", 17).attr("y", 10).attr("font-size", "11.5px").text(r); legendX += 17 + r.length * 6.4 + 18; }); const panels = svg.selectAll(".period-panel") .data(data) .join("g") .attr("class", "period-panel") .attr("transform", (d, i) => `translate(${margin.left + (i % cols) * panelWidth}, ${margin.top + Math.floor(i / cols) * panelHeight})`); panels.append("rect") .attr("x", 4) .attr("y", 2) .attr("width", panelWidth - 8) .attr("height", panelHeight - 6) .attr("fill", "#f8fafc") .attr("stroke", "#cbd5e1") .attr("rx", 4); panels.append("text") .attr("x", 14) .attr("y", 20) .attr("font-size", "12.5px") .attr("font-weight", "bold") .attr("fill", "#0f172a") .text(d => d.label); panels.append("text") .attr("x", panelWidth - 14) .attr("y", 20) .attr("text-anchor", "end") .attr("font-size", "11px") .attr("fill", "#64748b") .text(d => `all recipients: ${fmt(d.periodTotal)}`); const bars = panels.selectAll(".bar-row") .data(d => d.top.map(t => ({ ...t, period: d.label }))) .join("g") .attr("class", "bar-row") .attr("transform", (d, i) => `translate(0, ${30 + i * barStep})`); bars.append("text") .attr("x", labelWidth - 6) .attr("y", 10) .attr("text-anchor", "end") .attr("font-size", "11px") .text(d => d.country); bars.append("rect") .attr("x", labelWidth) .attr("y", 0) .attr("width", d => x(d.total)) .attr("height", 12) .attr("fill", d => color(d.region)) .append("title") .text(d => `${d.country} (${d.period})\nReceived: $${d3.format(",.0f")(d.total)}\nRegion: ${d.region}`); bars.append("text") .attr("x", d => labelWidth + x(d.total) + 5) .attr("y", 10) .attr("font-size", "10.5px") .attr("fill", "#334155") .text(d => fmt(d.total)); return svg.node(); }47:Tcc2,### Visualization #3 — Written answer **Reading the map.** Most of the world is grey because the dataset contains only 47 countries (45 of them recipients), so grey does not mean a country received no aid in reality. The map file is the course's countries-50m.json from the Drive link, used as provided. **Do donations stay in the same regions or shift?** Both. There is a stable core: India, Thailand, Brazil, Colombia and Chile are shaded in all eight panels, and India is among the darkest in every one ($10–21B per period). Around this core the map changes clearly: - High-income recipients: absent in 1973–78, they appear in most later panels — most strongly in 1979–83 (Canada $3.2B, Australia, Japan and much of Western Europe), again with Canada and Australia in 1999–2003 and the United States in 2004–08 — and all but disappear in 2009–13. - Central and Eastern Europe lights up in 1989–2003 (Poland alone receives $15.5B in 1989–93) and is almost entirely grey again by 2009–13. - Middle East: Kuwait's darkest panel is 1989–93 ($7.41B in 1992); Saudi Arabia's is 1999–2003 ($3.4B). - South Africa, the only African recipient in the data, appears in 1984–88 and stays to the end. - Korea is shaded through 2004–08 and grey afterwards. **Which regions have had more need over the years?** The companion bar chart ranks the five largest recipients of each period. India (South Asia) is first in seven of the eight periods — in 1989–93 Poland is level with it at $15.5B — and in the last two periods it receives three to four times as much as the runner-up ($20.8B vs. Colombia's $5.62B in 2004–08; $20.7B vs. Brazil's $6.00B in 2009–13). East/Southeast Asia (Thailand, Korea) and South America (Brazil, Colombia) are in the top five of every period. Other regions enter only temporarily: Canada in 1979–83, Kuwait in 1989–93, Poland in 1989–98; South Africa enters in 1994–98 and is third in both final periods. By 2009–13 only India, Thailand, Brazil, Colombia, Chile and South Africa remain strongly shaded on the map. **Design rationale.** Eight small-multiple maps (one 6-year and seven 5-year periods) show the history side by side, so periods can be compared directly instead of relying on memory, as a slider or animation would require. All maps share one logarithmic colour scale because period totals range from under $1M to about $21B; on a linear scale only the largest recipients would be visible. Trade-offs: the log scale cannot rank countries of the same order of magnitude, and a choropleth favours large countries — in 1979–83 Canada ($3.2B) looks more prominent than India ($13.8B). The companion bar chart covers this weakness: it uses bar length on a single linear scale, so amounts are directly comparable within and across periods, and colour shows region (my own grouping of the recipients). Its cost is that it shows only five countries per period, so the two views are meant to be read together: the maps for where, the bars for how much. Antarctica is removed and a 2×4 grid is used to draw each map as large as possible; the smallest recipients (e.g., Cyprus, Kuwait, the Baltic states) still cover only a few pixels, so their amounts are best read from the tooltips.48:[{"id":"09040dddbda03374a466600047ccbc70c46e6853884eb725db2141c566ca1b78fb7cc935096e8d5468c21e8df215e73fc49cdaaf7e2f1f89139793da25be02b2","href":"https://static.observableusercontent.com/files/09040dddbda03374a466600047ccbc70c46e6853884eb725db2141c566ca1b78fb7cc935096e8d5468c21e8df215e73fc49cdaaf7e2f1f89139793da25be02b2","name":"aiddata-countries-only.csv","type":"text/csv","lastModified":1794425671479,"size":8760387},{"id":"55260abbc777c0a3b8fed19f3929dd822fef9d5118b53b76b2176d20782910e599eac919999ea8ee85a60b783fd37082574f6591fd46c0d70ddf9b00df71ce27","href":"https://static.observableusercontent.com/files/55260abbc777c0a3b8fed19f3929dd822fef9d5118b53b76b2176d20782910e599eac919999ea8ee85a60b783fd37082574f6591fd46c0d70ddf9b00df71ce27","name":"countries-50m.json","type":"application/json","lastModified":1794425717151,"size":4177662}] 38:{"id":"70110923367ca481","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-11T03:56:50.024Z","update_time":"$D2026-11-12T04:07:09.430Z","view_time":null,"first_public_time":"$D2026-11-11T20:09:14.502Z","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":"95b845878324a756","login":"yabo-wang","name":"Yabo Wang","avatar_url":"https://avatars-next.observableusercontent.com/de0fd0b7a43eaf569dd0c8ef61518874f46c0e852b5b80af8f3864798950c687","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":360,"publish_version":360,"role":null,"authored":false,"authors":[{"type":"individual","id":"8e1cd5bbb0dcf43e","login":"yabo-wang","name":"Yabo Wang","avatar_url":"https://avatars-next.observableusercontent.com/de0fd0b7a43eaf569dd0c8ef61518874f46c0e852b5b80af8f3864798950c687","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"95b845878324a756","login":"yabo-wang","name":"Yabo Wang","avatar_url":"https://avatars-next.observableusercontent.com/de0fd0b7a43eaf569dd0c8ef61518874f46c0e852b5b80af8f3864798950c687","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":"import {Legend, Swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"raw_aiddata = FileAttachment(\"aiddata-countries-only.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"worldRaw = FileAttachment(\"countries-50m.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"countriesGeo = {\n return {\n ...worldRaw,\n features: worldRaw.features.filter(d => d.properties.name !== \"Antarctica\" && d.properties.ADMIN !== \"Antarctica\")\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"$3f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"$40","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"$41","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"$42","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"$43","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"$44","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"$45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"$47","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"**AI use disclosure.** I wrote the first version of the D3 code myself. Claude reviewed it, checked the numbers against the dataset, and provided code fixes (purpose-name merging, the colour-legend ticks, the map-loading cell). For the written answers, Claude revised my draft: it corrected factual errors against the dataset and rewrote the text into the final condensed wording. I ran the notebook and checked the charts.Later revisions (grey-area note, answer placement, Chart 1 gridlines, Chart 3b) followed Claude’s review; Claude wrote the “Commitment Year” axis label added to Chart 2b.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W48","stdlib":"2"}} 33:null