34:["$","title",null,{"children":"Mini-Project 2: Temporal Data Visualization (Due Nov. 12th) | Dheeraj Pakala | 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:T878,// ---------- Style (same as Mini-Project 1, from the class style guide) ---------- const grid_color = "#eeeeee"; const donor_color = "#4682b4"; // steelblue, the guide's default mark color const recipient_color = "#f28e2b"; // clean orange, not brown const donor_text = "#2f6190"; // darker versions for text, so it stays readable on white const recipient_text = "#c8620a"; const font = "sans-serif"; // The map file uses different names than the dataset for a few countries const name_fix = {"United States": "United States of America", "Korea": "South Korea", "Czech Republic": "Czechia", "Slovak Republic": "Slovakia"}; const geo_name = n => name_fix[n] || n; // 1000000000 -> "$1B" const fmt = v => d3.format("$.2~s")(v).replace("G", "B"); // Diverging color for net received: blue = net donor, orange = net recipient (symlog so small values stay visible) const net_interp = d3.interpolateRgbBasis(["#08519c", "#3182bd", "#9ecae1", "#f0f0f0", "#fdbe85", "#fd8d3c", "#d94801"]); // Missing data (country not in the dataset) = light gray hatch, so it is not confused with a pale "low" country const NO_DATA = "url(#no_data)"; const add_no_data_pattern = svg => { const p = svg.append("defs").append("pattern").attr("id", "no_data") .attr("width", 6).attr("height", 6).attr("patternUnits", "userSpaceOnUse").attr("patternTransform", "rotate(45)"); p.append("rect").attr("width", 6).attr("height", 6).attr("fill", "white"); p.append("line").attr("x1", 0).attr("y1", 0).attr("x2", 0).attr("y2", 6).attr("stroke", "#cccccc").attr("stroke-width", 2); }; // Small horizontal legend for a sequential scale: values are placed in a row of swatches const add_seq_legend = (g, color, values, label_fmt, swatch_w = 56) => { const items = g.selectAll("g.leg").data(values).enter().append("g").attr("class", "leg") .attr("transform", (d, j) => `translate(${j * (swatch_w + 4)}, 0)`); items.append("rect").attr("width", swatch_w).attr("height", 10).attr("fill", d => color(d)).attr("stroke", "#bbb").attr("stroke-width", 0.5); items.append("text").attr("y", 24).attr("font-size", 10).attr("font-family", font).text(d => label_fmt(d)); };40:T4e9,// For every country and year: how much it donated and how much it received const country_year = new Map(); const cy_cell = (name, y) => { if (!country_year.has(name)) country_year.set(name, new Map(years.map(yr => [yr, {donated: 0, received: 0}]))); return country_year.get(name).get(y); }; for (const d of data) { cy_cell(d.donor, d.year).donated += d.amount; cy_cell(d.recipient, d.year).received += d.amount; } const country_stats = [...country_year].map(([name, ys]) => { const rows = years.map(y => ({year: y, donated_usd: ys.get(y).donated, received_usd: ys.get(y).received, net_usd: ys.get(y).received - ys.get(y).donated, net: (ys.get(y).received - ys.get(y).donated) / 1e9})); const donated = d3.sum(ys.values(), r => r.donated); const received = d3.sum(ys.values(), r => r.received); return {name, rows, donated, received, volume: donated + received, total_net: received - donated}; }); // Totals in this table are rounded (2 significant digits); the written answers use more precise totals display(Inputs.table([...country_stats].sort((a, b) => b.volume - a.volume).map(d => ({country: d.name, "donated (rounded)": fmt(d.donated), "received (rounded)": fmt(d.received), "net (rounded)": fmt(d.total_net)})), {layout: "auto"}));41:Tdc9,// ---- Visualization 1a: donated vs. received per year (two lines per country, 20 biggest countries) ---- const v1a_countries = [...country_stats].sort((a, b) => b.volume - a.volume).slice(0, 20).sort((a, b) => a.total_net - b.total_net); const v1a_cols = 5, v1a_w = 236, v1a_h = 138, v1a_top = 62; const v1a_m = {top: 30, right: 8, bottom: 26, left: 40}; const v1a_rows = Math.ceil(v1a_countries.length / v1a_cols); const v1a_container = d3.create("svg") .attr("width", v1a_cols * v1a_w).attr("height", v1a_top + v1a_rows * v1a_h + 10) .attr("font-family", font); v1a_container.append("text").attr("x", 10).attr("y", 24).attr("font-weight", "bold").attr("font-size", 16) .text("Donated vs. Received per Year by Country, 1973-2013"); v1a_container.append("line").attr("x1", 10).attr("x2", 32).attr("y1", 44).attr("y2", 44).attr("stroke", donor_color).attr("stroke-width", 3); v1a_container.append("text").attr("x", 38).attr("y", 48).attr("font-size", 12).text("donated"); v1a_container.append("line").attr("x1", 110).attr("x2", 132).attr("y1", 44).attr("y2", 44).attr("stroke", recipient_color).attr("stroke-width", 3); v1a_container.append("text").attr("x", 138).attr("y", 48).attr("font-size", 12).text("received"); v1a_container.append("text").attr("x", 230).attr("y", 48).attr("font-size", 12).attr("fill", "#666") .text("Constant USD per year. Each panel has its own y-scale (labeled); panels are ordered from biggest net donor to biggest net recipient."); const v1a_x = d3.scaleLinear().domain([1973, 2013]).range([v1a_m.left, v1a_w - v1a_m.right]); v1a_countries.forEach((c, i) => { const mx = d3.max(c.rows, r => Math.max(r.donated_usd, r.received_usd)) || 1; const y = d3.scaleLinear().domain([0, mx]).range([v1a_h - v1a_m.bottom, v1a_m.top]); const g = v1a_container.append("g").attr("transform", `translate(${(i % v1a_cols) * v1a_w}, ${v1a_top + Math.floor(i / v1a_cols) * v1a_h})`); const line = key => d3.line().x(r => v1a_x(r.year)).y(r => y(r[key])).curve(d3.curveMonotoneX)(c.rows); g.append("line").attr("x1", v1a_m.left).attr("x2", v1a_w - v1a_m.right).attr("y1", y(0)).attr("y2", y(0)).attr("stroke", "#999").attr("stroke-width", 0.6); g.append("line").attr("x1", v1a_m.left).attr("x2", v1a_w - v1a_m.right).attr("y1", y(mx)).attr("y2", y(mx)).attr("stroke", grid_color); g.append("path").attr("d", line("donated_usd")).attr("fill", "none").attr("stroke", donor_color).attr("stroke-width", 1.6); g.append("path").attr("d", line("received_usd")).attr("fill", "none").attr("stroke", recipient_color).attr("stroke-width", 1.6); g.append("text").attr("x", v1a_m.left).attr("y", 14).attr("font-weight", "bold").attr("font-size", 12).text(c.name); g.append("text").attr("x", v1a_m.left - 4).attr("y", v1a_m.top + 3).attr("text-anchor", "end").attr("font-size", 10).attr("fill", "#666").text(fmt(mx)); g.append("text").attr("x", v1a_m.left - 4).attr("y", v1a_h - v1a_m.bottom + 3).attr("text-anchor", "end").attr("font-size", 10).attr("fill", "#666").text("$0"); for (const t of [1980, 2000]) g.append("text").attr("x", v1a_x(t)).attr("y", v1a_h - 3).attr("text-anchor", "middle").attr("font-size", 10).attr("fill", "#666").text(t); g.append("rect").attr("x", v1a_m.left).attr("y", v1a_m.top).attr("width", v1a_w - v1a_m.left - v1a_m.right).attr("height", v1a_h - v1a_m.top - v1a_m.bottom) .attr("fill", "transparent").append("title").text(`${c.name}\nDonated (1973-2013): ${fmt(c.donated)}\nReceived (1973-2013): ${fmt(c.received)}`); }); display(v1a_container.node());42:Tf1e,// ---- Visualization 1b: one small panel per country, NET received per year ---- // The 20 biggest countries (donated + received), ordered from biggest net donor to biggest net recipient const v1b_countries = [...country_stats].sort((a, b) => b.volume - a.volume).slice(0, 20).sort((a, b) => a.total_net - b.total_net); const v1b_cols = 5, v1b_w = 236, v1b_h = 138, v1b_top = 62; const v1b_m = {top: 32, right: 8, bottom: 28, left: 38}; const v1b_rows = Math.ceil(v1b_countries.length / v1b_cols); const v1b_container = d3.create("svg") .attr("width", v1b_cols * v1b_w).attr("height", v1b_top + v1b_rows * v1b_h + 10) .attr("font-family", font); v1b_container.append("text").attr("x", 10).attr("y", 24).attr("font-weight", "bold").attr("font-size", 16) .text("Net Received per Year by Country, 1973-2013 (billions of constant USD)"); v1b_container.append("rect").attr("x", 10).attr("y", 38).attr("width", 12).attr("height", 12).attr("fill", recipient_color); v1b_container.append("text").attr("x", 28).attr("y", 48).attr("font-size", 12).text("net recipient (received more than donated)"); v1b_container.append("rect").attr("x", 290).attr("y", 38).attr("width", 12).attr("height", 12).attr("fill", donor_color); v1b_container.append("text").attr("x", 308).attr("y", 48).attr("font-size", 12).text("net donor (donated more than received)"); v1b_container.append("text").attr("x", 560).attr("y", 48).attr("font-size", 12).attr("fill", "#666") .text("Each panel has its own y-scale (labeled). Circle = year of the biggest swing."); const v1b_x = d3.scaleLinear().domain([1973, 2013]).range([v1b_m.left, v1b_w - v1b_m.right]); v1b_countries.forEach((c, i) => { const mx = d3.max(c.rows, r => Math.abs(r.net)) || 1; const y = d3.scaleLinear().domain([-mx, mx]).range([v1b_h - v1b_m.bottom, v1b_m.top]); const g = v1b_container.append("g").attr("transform", `translate(${(i % v1b_cols) * v1b_w}, ${v1b_top + Math.floor(i / v1b_cols) * v1b_h})`); const area = f => d3.area().x(r => v1b_x(r.year)).y0(y(0)).y1(r => y(f(r.net))).curve(d3.curveMonotoneX)(c.rows); g.append("path").attr("d", area(v => Math.max(0, v))).attr("fill", recipient_color); g.append("path").attr("d", area(v => Math.min(0, v))).attr("fill", donor_color); g.append("line").attr("x1", v1b_m.left).attr("x2", v1b_w - v1b_m.right).attr("y1", y(0)).attr("y2", y(0)).attr("stroke", "#222").attr("stroke-width", 1); g.append("text").attr("x", v1b_m.left).attr("y", 14).attr("font-weight", "bold").attr("font-size", 12).text(c.name); g.append("text").attr("x", v1b_m.left - 4).attr("y", v1b_m.top + 3).attr("text-anchor", "end").attr("font-size", 10).attr("fill", "#666").text(`+${mx.toFixed(1)}`); g.append("text").attr("x", v1b_m.left - 4).attr("y", v1b_h - v1b_m.bottom).attr("text-anchor", "end").attr("font-size", 10).attr("fill", "#666").text(`-${mx.toFixed(1)}`); for (const t of [1980, 2000]) g.append("text").attr("x", v1b_x(t)).attr("y", v1b_h - 3).attr("text-anchor", "middle").attr("font-size", 10).attr("fill", "#666").text(t); // mark the biggest swing (peak or valley) const pk = d3.greatest(c.rows, r => Math.abs(r.net)); g.append("circle").attr("cx", v1b_x(pk.year)).attr("cy", y(pk.net)).attr("r", 2.8).attr("fill", "none").attr("stroke", "#222"); g.append("text").attr("x", Math.min(v1b_x(pk.year), v1b_w - 24)).attr("y", pk.net >= 0 ? y(pk.net) - 5 : y(pk.net) + 11) .attr("text-anchor", "middle").attr("font-size", 9).text(pk.year); g.append("rect").attr("x", v1b_m.left).attr("y", v1b_m.top).attr("width", v1b_w - v1b_m.left - v1b_m.right).attr("height", v1b_h - v1b_m.top - v1b_m.bottom) .attr("fill", "transparent").append("title").text(`${c.name}\nDonated: ${fmt(c.donated)}\nReceived: ${fmt(c.received)}\nBiggest swing: ${pk.year} (${pk.net >= 0 ? "+" : "-"}$${Math.abs(pk.net).toFixed(1)}B)`); }); display(v1b_container.node());43:Tbcb,// ---- Visualization 1c: heatmap of net received for ALL countries (rows) by year (columns) ---- const v1c_data = [...country_stats].sort((a, b) => a.total_net - b.total_net); // biggest net donors on top const v1c_cell = {w: 15, h: 14}; const v1c_dims = {margin_left: 130, margin_right: 160, margin_top: 80, margin_bottom: 20}; const v1c_max = d3.max(country_stats, c => d3.max(c.rows, r => Math.abs(r.net_usd))); const v1c_color = d3.scaleDivergingSymlog(net_interp).domain([-v1c_max, 0, v1c_max]).constant(1e8); const v1c_container = d3.create("svg") .attr("width", v1c_dims.margin_left + years.length * v1c_cell.w + v1c_dims.margin_right) .attr("height", v1c_dims.margin_top + v1c_data.length * v1c_cell.h + v1c_dims.margin_bottom) .attr("font-family", font); v1c_container.append("text").attr("x", 10).attr("y", 24).attr("font-weight", "bold").attr("font-size", 16) .text("Net Received by Country and Year, 1973-2013 (sorted by total net received)"); v1c_container.append("text").attr("x", 10).attr("y", 42).attr("font-size", 12).attr("fill", "#666") .text("Blue = net donor that year, orange = net recipient, light = about $0 (symlog color scale)"); const v1c_chart = v1c_container.append("g").attr("transform", `translate(${v1c_dims.margin_left}, ${v1c_dims.margin_top})`); v1c_data.forEach((c, i) => { v1c_chart.append("text").attr("x", -6).attr("y", i * v1c_cell.h + 11).attr("text-anchor", "end").attr("font-size", 11).text(c.name); v1c_chart.selectAll(`rect.row_${i}`).data(c.rows).enter().append("rect") .attr("class", `row_${i}`) .attr("x", r => (r.year - 1973) * v1c_cell.w).attr("y", i * v1c_cell.h) .attr("width", v1c_cell.w - 1).attr("height", v1c_cell.h - 1) .attr("fill", r => v1c_color(r.net_usd)) .append("title").text(r => `${c.name}, ${r.year}\nDonated: ${fmt(r.donated_usd)}\nReceived: ${fmt(r.received_usd)}\nNet received: ${r.net_usd >= 0 ? "+" : "-"}${fmt(Math.abs(r.net_usd))}`); }); // Year labels every 5 years years.filter(y => (y - 1973) % 5 === 0).forEach(y => { v1c_chart.append("text").attr("x", (y - 1973) * v1c_cell.w + v1c_cell.w / 2).attr("y", -8).attr("text-anchor", "middle").attr("font-size", 11).text(y); }); // Legend const v1c_legend_values = [-1e10, -1e9, -1e8, 0, 1e8, 1e9, 1e10]; const v1c_legend = v1c_container.append("g").attr("transform", `translate(${v1c_dims.margin_left + years.length * v1c_cell.w + 20}, ${v1c_dims.margin_top})`); v1c_legend.append("text").attr("font-weight", "bold").attr("font-size", 12).text("Net received"); v1c_legend.selectAll("g").data(v1c_legend_values).enter().append("g").attr("transform", (d, i) => `translate(0, ${12 + i * 18})`) .each(function(d) { const g = d3.select(this); g.append("rect").attr("width", 16).attr("height", 14).attr("fill", v1c_color(d)).attr("stroke", "#bbb").attr("stroke-width", 0.5); g.append("text").attr("x", 24).attr("y", 12).attr("font-size", 12).text(d === 0 ? "$0" : (d > 0 ? "+" : "-") + fmt(Math.abs(d))); }); display(v1c_container.node());44:T1413,// ---- Visualization 1d: total donated vs. total received, one dot per country ---- const v1d_dims = {width: 560, height: 480, margin_left: 80, margin_right: 260, margin_top: 60, margin_bottom: 60}; const v1d_max = d3.max(country_stats, d => Math.max(d.donated, d.received)) * 1.2; const v1d_ticks = [0, 1e8, 1e9, 1e10, 1e11]; // symlog scales because the totals go from $0 to over $100B const v1d_x = d3.scaleSymlog().constant(1e8).domain([0, v1d_max]).range([0, v1d_dims.width]); const v1d_y = d3.scaleSymlog().constant(1e8).domain([0, v1d_max]).range([v1d_dims.height, 0]); const v1d_r = d3.scaleSqrt().domain([0, d3.max(country_stats, d => d.volume)]).range([3.5, 12]); // "about balanced" = the net is less than 25% of the country's total volume const v1d_color = d => Math.abs(d.total_net) < 0.25 * d.volume ? "#999999" : (d.total_net < 0 ? donor_color : recipient_color); const v1d_container = d3.create("svg") .attr("width", v1d_dims.width + v1d_dims.margin_left + v1d_dims.margin_right) .attr("height", v1d_dims.height + v1d_dims.margin_top + v1d_dims.margin_bottom) .attr("font-family", font); const v1d_chart = v1d_container.append("g").attr("transform", `translate(${v1d_dims.margin_left}, ${v1d_dims.margin_top})`); // Light gray grid on a white background v1d_chart.selectAll("line.grid_x").data(v1d_ticks).enter().append("line") .attr("x1", d => v1d_x(d)).attr("x2", d => v1d_x(d)).attr("y1", 0).attr("y2", v1d_dims.height).attr("stroke", grid_color); v1d_chart.selectAll("line.grid_y").data(v1d_ticks).enter().append("line") .attr("x1", 0).attr("x2", v1d_dims.width).attr("y1", d => v1d_y(d)).attr("y2", d => v1d_y(d)).attr("stroke", grid_color); v1d_chart.append("g").attr("transform", `translate(0, ${v1d_dims.height})`).call(d3.axisBottom(v1d_x).tickValues(v1d_ticks).tickFormat(fmt)); v1d_chart.append("g").call(d3.axisLeft(v1d_y).tickValues(v1d_ticks).tickFormat(fmt)); // Line where donated = received v1d_chart.append("line").attr("x1", v1d_x(0)).attr("y1", v1d_y(0)).attr("x2", v1d_x(v1d_max)).attr("y2", v1d_y(v1d_max)) .attr("stroke", "#555").attr("stroke-dasharray", "5 4"); // Dots: color = who the country mostly is, size = total volume (donated + received) v1d_chart.selectAll("circle").data(country_stats).enter().append("circle") .attr("cx", d => v1d_x(d.received)).attr("cy", d => v1d_y(d.donated)).attr("r", d => v1d_r(d.volume)) .attr("fill", v1d_color).attr("fill-opacity", 0.8).attr("stroke", "#333").attr("stroke-width", 0.8) .append("title").text(d => `${d.name}\nDonated: ${fmt(d.donated)}\nReceived: ${fmt(d.received)}\nNet received: ${d.total_net >= 0 ? "+" : "-"}${fmt(Math.abs(d.total_net))}`); // Only label the 14 biggest countries so the labels do not overlap (the rest show on hover) const v1d_top = [...country_stats].sort((a, b) => b.volume - a.volume).slice(0, 14); // Countries that only receive sit on the x-axis, so their labels are rotated and staggered const v1d_flat = v1d_top.filter(d => d.donated < 1e7).sort((a, b) => a.received - b.received).map(d => d.name); v1d_chart.selectAll("text.country_label").data(v1d_top).enter().append("text") .attr("class", "country_label") .attr("transform", d => d.donated < 1e7 ? `translate(${v1d_x(d.received) + 2}, ${v1d_y(d.donated) - v1d_r(d.volume) - 4 - (v1d_flat.indexOf(d.name) % 3) * 15}) rotate(-35)` : `translate(${v1d_x(d.received) + v1d_r(d.volume) + 3}, ${v1d_y(d.donated) + 4})`) .attr("font-size", 11).text(d => d.name); // Titles, axis labels and legend v1d_container.append("text").attr("x", v1d_dims.margin_left + v1d_dims.width / 2).attr("y", 30).attr("text-anchor", "middle") .attr("font-weight", "bold").attr("font-size", 16).text("Total Donated vs. Total Received by Country, 1973-2013"); v1d_container.append("text").attr("x", v1d_dims.margin_left + v1d_dims.width / 2).attr("y", v1d_dims.margin_top + v1d_dims.height + 45) .attr("text-anchor", "middle").text("Total received (constant USD, symlog scale)"); v1d_container.append("text").attr("transform", `translate(20, ${v1d_dims.margin_top + v1d_dims.height / 2}) rotate(-90)`) .attr("text-anchor", "middle").text("Total donated (constant USD, symlog scale)"); const v1d_legend = v1d_container.append("g").attr("transform", `translate(${v1d_dims.margin_left + v1d_dims.width + 20}, ${v1d_dims.margin_top + 10})`); [[donor_color, "mostly donates"], [recipient_color, "mostly receives"], ["#999999", "about balanced (net < 25%)"]].forEach(([c, label], i) => { v1d_legend.append("circle").attr("cx", 7).attr("cy", i * 22 + 7).attr("r", 6).attr("fill", c).attr("stroke", "#333").attr("stroke-width", 0.8); v1d_legend.append("text").attr("x", 20).attr("y", i * 22 + 11).attr("font-size", 12).text(label); }); v1d_legend.append("text").attr("y", 86).attr("font-size", 11).attr("fill", donor_text).text("Above dashed line: donated more"); v1d_legend.append("text").attr("y", 102).attr("font-size", 11).attr("fill", recipient_text).text("Below dashed line: received more"); v1d_legend.append("text").attr("y", 124).attr("font-size", 11).attr("fill", "#666").text("Dot size = donated + received"); display(v1d_container.node());45:Ta70,const v1e_c = country_stats.find(d => d.name === v1e_country); const v1e_dims = {width: 600, height: 300, margin_left: 70, margin_right: 20, margin_top: 60, margin_bottom: 40}; const v1e_x = d3.scaleLinear().domain([1973, 2013]).range([0, v1e_dims.width]); const v1e_y = d3.scaleLinear().domain([0, d3.max(v1e_c.rows, r => Math.max(r.donated_usd, r.received_usd)) || 1]).nice().range([v1e_dims.height, 0]); const v1e_line = key => d3.line().x(r => v1e_x(r.year)).y(r => v1e_y(r[key])).curve(d3.curveMonotoneX)(v1e_c.rows); const v1e_container = d3.create("svg") .attr("width", v1e_dims.margin_left + v1e_dims.width + v1e_dims.margin_right) .attr("height", v1e_dims.margin_top + v1e_dims.height + v1e_dims.margin_bottom) .attr("font-family", font); const v1e_chart = v1e_container.append("g").attr("transform", `translate(${v1e_dims.margin_left}, ${v1e_dims.margin_top})`); v1e_chart.selectAll("line.grid").data(v1e_y.ticks(5)).enter().append("line") .attr("x1", 0).attr("x2", v1e_dims.width).attr("y1", d => v1e_y(d)).attr("y2", d => v1e_y(d)).attr("stroke", grid_color); v1e_chart.append("path").attr("d", v1e_line("donated_usd")).attr("fill", "none").attr("stroke", donor_color).attr("stroke-width", 2.2); v1e_chart.append("path").attr("d", v1e_line("received_usd")).attr("fill", "none").attr("stroke", recipient_color).attr("stroke-width", 2.2); v1e_chart.append("g").attr("transform", `translate(0, ${v1e_dims.height})`).call(d3.axisBottom(v1e_x).tickFormat(d3.format("d")).ticks(9)); v1e_chart.append("g").call(d3.axisLeft(v1e_y).ticks(5).tickFormat(fmt)); // Invisible bars so that hovering a year shows both amounts v1e_chart.selectAll("rect.hover").data(v1e_c.rows).enter().append("rect") .attr("x", r => v1e_x(r.year) - v1e_dims.width / 82).attr("width", v1e_dims.width / 41).attr("y", 0).attr("height", v1e_dims.height).attr("fill", "transparent") .append("title").text(r => `${v1e_c.name}, ${r.year}\nDonated: ${fmt(r.donated_usd)}\nReceived: ${fmt(r.received_usd)}`); v1e_container.append("text").attr("x", 10).attr("y", 26).attr("font-weight", "bold").attr("font-size", 16).text(`${v1e_c.name}: Donated vs. Received per Year`); v1e_container.append("line").attr("x1", 10).attr("x2", 32).attr("y1", 44).attr("y2", 44).attr("stroke", donor_color).attr("stroke-width", 3); v1e_container.append("text").attr("x", 38).attr("y", 48).attr("font-size", 12).text("donated"); v1e_container.append("line").attr("x1", 110).attr("x2", 132).attr("y1", 44).attr("y2", 44).attr("stroke", recipient_color).attr("stroke-width", 3); v1e_container.append("text").attr("x", 138).attr("y", 48).attr("font-size", 12).text("received"); display(v1e_container.node());46:T163e,### Answer #1 *Data note: amounts are commitments in constant USD, 1973-2013. The dataset has 47 countries: 42 donors and 45 recipients (so 40 are both). All figures below were checked against the data.* #### 1. How do donated and received amounts change over time for each country? Chart 1a draws two lines per country (donated in blue, received in orange). Three patterns appear: - **Big donors** have a high blue line and an orange line at about $0. The United States donated about $3.0B a year in the 1980s, $5.1B in the 1990s and $2.5B in the 2000s, and never received more than $0.1B in a year (2007). Japan went from about $2.0B to $4.6B to $2.5B a year, and Germany from $1.0B to $1.9B to $0.8B. So the big donors gave the most in the 1990s, with one-year spikes (US $11.4B in 1992, Japan $10.8B in 1997, Germany $8.6B in 1992). - **Big recipients** are the mirror image. India received about $3.3B a year in each of the three decades and never donated. Thailand received $1.1B, $2.5B and $0.8B a year, and Brazil $0.6B, $1.5B and $0.9B, so recipients also peaked in the 1990s. - **Countries with both lines** change more. Canada received almost nothing in most years but had one spike of $2.5B in 1981, while its donations stayed around $0.2B a year in the 1990s. Korea's received line falls from about $0.9B a year in the 1990s to $0.2B in the 2000s, and its donated line only starts in 2006 (up to $0.4B in 2013). Chart 1b shows the net (received minus donated) for the same 20 countries. Chart 1c shows the net for all 47 countries as a heatmap, which is easier to scan but hides how large the two flows are. Chart 1e is a menu to look at any one country. #### 2. Do some countries mostly send, mostly receive, or balance? Yes (chart 1d; the dashed line is donated = received). - **Mostly send:** the United States ($116.2B donated, $0.1B received), Japan ($114.2B, $2.1B), Germany ($47.2B, about $0 received), the United Kingdom ($23.7B, $1.0B) and most of Western and Northern Europe. Belgium, Denmark, Finland, Portugal, Sweden, Iceland, Liechtenstein, Monaco, the Netherlands and Switzerland each received less than $0.2B. The five biggest donors give 86% of all money donated. - **Mostly receive:** India ($134.0B received), Thailand ($49.0B), Brazil ($36.6B), Poland ($24.5B) and Korea ($25.3B received, $1.3B donated). India, South Africa, Romania, Latvia and Lithuania donated nothing. - **Balanced:** few and small. Australia is the closest ($2.4B donated, $2.6B received). Italy ($3.8B, $2.4B), Canada ($7.5B, $4.1B) and Saudi Arabia ($1.7B, $4.9B) are mixed. #### 3. Do countries change their role over time? A few do, but most sign changes are small. Korea is the clearest case: a net recipient in 32 years and a net donor in 8, with a peak of +$5.8B in 1999 (mostly from Japan), and from 2006 on a very small net donor (-$0.4B in 2013). Kuwait is a small net donor in most years of 1976-1989 (up to -$0.3B in 1981), then receives +$7.4B in 1992. Taiwan (23 net-recipient years, 7 net-donor) and the Czech Republic (15 and 7) also switch sign, only by small amounts. The countries with the largest flows never change role. #### 4. Are there peaks or valleys? Yes. In chart 1b the circled year is each country's biggest swing: a peak for a net recipient, a valley for a net donor. - Poland: +$9.1B in 1992, of which Germany gave $7.9B, almost all rescheduling and refinancing. It is near $0 by 2013. - Kuwait: +$7.4B in 1992, all from the United States, all import support (capital goods). - Thailand: +$6.4B in 1997, of which Japan gave $6.2B (about $5.0B general budget support). - Korea: +$5.8B in 1999 ($4.6B from Japan). The valleys of the donors are the same events seen from the other side: the US and Germany in 1992 match Kuwait and Poland, and Japan in 1997 matches Thailand. So the sudden changes are one donor sending one very large package to one recipient in one year, not a general trend. #### Why this design Chart 1a puts donated and received in the same small panel with the same colors everywhere (blue = donated, orange = received). Far-apart lines mean a one-direction country, and crossing lines mean a role change. Each panel has its own labeled y-scale because the United States (up to $11B a year) and Colombia (up to $1.9B) differ too much, so heights cannot be compared across panels. Panels are ordered from biggest net donor to biggest net recipient, so similar countries sit together. Chart 1b shows the net as an area around zero and circles the biggest swing, so peaks, valleys and role changes are easy to find. Chart 1c puts all 47 countries on one shared color scale. Chart 1d is a scatter plot because "mostly send, mostly receive or balanced" compares two totals: distance from the dashed line is the imbalance, color is the role and size is the volume. Chart 1e shows every country. #### Comparing my solutions | Chart | Advantages | Disadvantages | |---|---|---| | 1a lines | Shows both amounts over time, role changes and peaks | Only 20 countries; each panel has its own scale | | 1b net area | Zero crossings and biggest swings are very clear | Hides how large the flows are (donating $5B and receiving $5B looks like doing nothing) | | 1c heatmap | All countries on one scale; shared years (1992, 1997, 1999) show as vertical stripes | Color is harder to read than position; symlog compresses big values | | 1d scatter | Roles and clusters at a glance | No time axis; only 14 countries labeled; symlog makes exact values hard to read | | 1e picker | All 47 countries with both amounts | One country at a time | Best for each question: 1a for question 1, 1d for question 2, and 1b and 1c for questions 3 and 4.47:T1710,// ---- Visualization 2: top 10 purposes (stacked areas) ---- // The purpose names have case variants (for example "RESCHEDULING AND REFINANCING" and // "Rescheduling and refinancing"), so I group by the purpose CODE and use the most common name. const v2_unspecified = 99810; // "Sectors not specified" = the UNSPECIFIED purpose, removed as the assignment says const v2_name_raw = d3.rollup(data, v => d3.greatest(d3.rollups(v, g => g.length, d => d.purpose), d => d[1])[0], d => d.code); const v2_name = code => { const n = v2_name_raw.get(code); return n === n.toUpperCase() ? n[0] + n.slice(1).toLowerCase() : n; }; const v2_top10 = d3.rollups(data.filter(d => d.code !== v2_unspecified), v => d3.sum(v, d => d.amount), d => d.code) .sort((a, b) => d3.descending(a[1], b[1])).slice(0, 10); const v2_keys = v2_top10.map(d => d[0]); const v2_by_year = d3.rollup(data.filter(d => v2_keys.includes(d.code)), v => d3.sum(v, d => d.amount) / 1e9, d => d.year, d => d.code); const v2_color = d3.scaleOrdinal(v2_keys, d3.schemeTableau10); // Ranked bars: total commitments of each top-10 purpose (same colors as the stacked charts below) const v2_bar_dims = {width: 520, row_h: 26, margin_left: 300, margin_right: 80, margin_top: 50, margin_bottom: 10}; const v2_bar_x = d3.scaleLinear().domain([0, v2_top10[0][1]]).range([0, v2_bar_dims.width]); const v2_bar_container = d3.create("svg") .attr("width", v2_bar_dims.margin_left + v2_bar_dims.width + v2_bar_dims.margin_right) .attr("height", v2_bar_dims.margin_top + v2_top10.length * v2_bar_dims.row_h + v2_bar_dims.margin_bottom) .attr("font-family", font); v2_bar_container.append("text").attr("x", 10).attr("y", 26).attr("font-weight", "bold").attr("font-size", 16).text("Top 10 Purposes by Total Commitments, 1973-2013"); v2_bar_container.append("text").attr("x", 10).attr("y", 44).attr("font-size", 12).attr("fill", "#666").text("UNSPECIFIED removed. Total constant USD over all countries and all years."); v2_top10.forEach(([code, total], i) => { const yy = v2_bar_dims.margin_top + i * v2_bar_dims.row_h; v2_bar_container.append("text").attr("x", v2_bar_dims.margin_left - 8).attr("y", yy + 14).attr("text-anchor", "end").attr("font-size", 12).text(`${i + 1}. ${v2_name(code)}`); v2_bar_container.append("rect").attr("x", v2_bar_dims.margin_left).attr("y", yy).attr("width", v2_bar_x(total)).attr("height", v2_bar_dims.row_h - 8).attr("fill", v2_color(code)); v2_bar_container.append("text").attr("x", v2_bar_dims.margin_left + v2_bar_x(total) + 6).attr("y", yy + 14).attr("font-size", 11).attr("fill", "#444").text(fmt(total)); }); display(v2_bar_container.node()); const v2_chart = (offset, y_fmt, title, subtitle, note) => { const dims = {width: 640, height: 400, margin_left: 60, margin_right: 330, margin_top: 80, margin_bottom: 40}; const rows = years.map(y => [y, v2_by_year.get(y) || new Map()]); const series = d3.stack().keys(v2_keys).value((d, k) => d[1].get(k) || 0).offset(offset)(rows); const x = d3.scaleLinear().domain([1973, 2013]).range([0, dims.width]); const y = d3.scaleLinear().domain([0, d3.max(series, s => d3.max(s, d => d[1]))]).nice().range([dims.height, 0]); const area = d3.area().x((d, i) => x(years[i])).y0(d => y(d[0])).y1(d => y(d[1])); const container = d3.create("svg") .attr("width", dims.margin_left + dims.width + dims.margin_right) .attr("height", dims.margin_top + dims.height + dims.margin_bottom) .attr("font-family", font); container.append("text").attr("x", 10).attr("y", 26).attr("font-weight", "bold").attr("font-size", 16).text(title); container.append("text").attr("x", 10).attr("y", 46).attr("font-size", 12).attr("fill", "#666").text(subtitle); const chart = container.append("g").attr("transform", `translate(${dims.margin_left}, ${dims.margin_top})`); // Light gray grid on a white background chart.selectAll("line.grid").data(y.ticks(5)).enter().append("line") .attr("x1", 0).attr("x2", dims.width).attr("y1", d => y(d)).attr("y2", d => y(d)).attr("stroke", grid_color); chart.selectAll("path.layer").data(series).enter().append("path") .attr("class", "layer").attr("d", area).attr("fill", s => v2_color(s.key)) .attr("stroke", "white").attr("stroke-width", 0.4) .append("title").text(s => v2_name(s.key)); chart.append("g").attr("transform", `translate(0, ${dims.height})`).call(d3.axisBottom(x).tickFormat(d3.format("d")).ticks(9)); chart.append("g").call(d3.axisLeft(y).ticks(5).tickFormat(y_fmt)); if (note) { chart.append("line").attr("x1", x(note.year)).attr("x2", x(note.year)).attr("y1", -14).attr("y2", dims.height).attr("stroke", "#444").attr("stroke-dasharray", "3 3"); chart.append("text").attr("x", x(note.year) + 4).attr("y", -4).attr("font-size", 10).attr("fill", "#444").text(note.text); } // Legend in the same top-to-bottom order as the stack const legend = container.append("g").attr("transform", `translate(${dims.margin_left + dims.width + 24}, ${dims.margin_top})`); [...series].reverse().forEach((s, i) => { legend.append("rect").attr("y", i * 24).attr("width", 14).attr("height", 14).attr("fill", v2_color(s.key)); legend.append("text").attr("x", 22).attr("y", i * 24 + 12).attr("font-size", 12).text(v2_name(s.key)); }); return container.node(); }; // 2a: amounts per year display(v2_chart(d3.stackOffsetNone, v => `$${v}B`, "Top 10 Purposes: Commitments per Year, 1973-2013", "Billions of constant USD per year, UNSPECIFIED removed. Hover a band for the purpose name.", {year: 1992, text: "1992: Germany→Poland debt rescheduling, US→Kuwait import support"})); // 2b: share of the top-10 total in each year display(v2_chart(d3.stackOffsetExpand, d3.format(".0%"), "Top 10 Purposes: Share of Each Year's Top-10 Commitments", "Each year adds up to 100%, so this shows which purposes were prominent, not how much money was given.", null));48:Tdd9,### Answer #2 *Data note: the dataset has commitments, not confirmed disbursements, so I use commitment amounts as the measure. The UNSPECIFIED purpose ("Sectors not specified", code 99810) is removed. All figures below were checked against the data.* #### What are the top 10 purposes? By total amount, 1973-2013: 1. Air transport ($39.8B) 2. Rail transport ($20.8B) 3. Industrial development ($19.7B) 4. Rescheduling and refinancing ($18.0B) 5. Power generation/non-renewable sources ($16.3B) 6. Import support (capital goods) ($10.3B) 7. Social/welfare services ($9.5B) 8. Food aid/Food security programmes ($8.9B) 9. Water supply and sanitation, large systems ($8.8B) 10. Telecommunications ($8.7B) Together they are $160.8B, about 45% of the $358B with a stated purpose. Air and rail transport alone are about 38% of the top-10 total. #### Which purposes are prominent in which periods? Shares below are of the top-10 total (chart 2b): - **1973-1979:** food aid is the biggest (32%), then rescheduling and refinancing (23%) and import support (14%). Food aid peaks in 1981 ($1.1B) and fades after that. - **1980s:** air transport takes over (29%), followed by industrial development (18%) and non-renewable power (14%). - **1990s:** air transport is still first (26%). Rescheduling and refinancing (17%) is large mainly because of 1992, when it reached $8.3B (Germany to Poland: $7.9B), together with import support at $7.5B (US to Kuwait: $7.4B). Telecommunications peaks in 1996 ($1.0B), and air transport has its highest year in 1999 ($5.9B). - **2000s:** the mix changes. Air transport (31%), social/welfare services (23%) and rail transport (22%) lead, and water supply (11%) peaks in 2007 ($1.3B). Social/welfare services peaks in 2006 ($1.5B) and hardly appears before 2000. - **2010-2013:** rail transport is 77% of the top-10 total (peak in 2010: $2.8B), but the total is small ($9.2B over four years). In short: food aid and debt restructuring were prominent early, air transport and industrial development in the middle years, and social services and rail transport later. Two cautions: the 1992 spikes are single donor-recipient pairs, not trends, and the share chart hides how much money each year has, which is why chart 2a sits next to it. #### Why this design Stacked areas fit a few categories over a continuous time axis, because they show both the total and the parts. Chart 2a keeps a zero baseline, so heights are real amounts and the spikes (1992, 1999) are visible. Chart 2b scales each year to 100%, so a purpose that is small in dollars but important in its era (food aid in the 1970s, social services in the 2000s) is still visible. I grouped by purpose code, not name, because the same code appears with upper- and lower-case names, and I used one color per purpose with a legend in the same order as the stack. The ranked bar chart gives the exact ordering, which ten stacked bands do not. I avoided a streamgraph because a centered baseline makes amounts hard to read. #### Comparing my solutions - **Chart 2a (amounts).** Advantages: real dollars, and big years stand out. Disadvantages: the 1992 and 1999 spikes squash the early years, and the thin 1970s bands are hard to read. - **Chart 2b (shares).** Advantages: the order of purposes across eras is much easier to see, even in small early years. Disadvantages: it hides each year's size, and a one-year spike can look like a trend. 2b answers "which purposes were prominent when" best, and 2a checks that the story is backed by real amounts.49:Te7c,// ---- Visualization 3a: maps of received money, one per 5-year period (small multiples) ---- // 8 periods: 1973-77, 1978-82, ..., 2003-07, and 2008-13 (6 years, because the data ends in 2013). // So that the periods can be compared, the maps show the AVERAGE received per year. const bin_of = y => Math.min(7, Math.floor((y - 1973) / 5)); const bin_years = i => i < 7 ? 5 : 6; const bin_label = i => i < 7 ? `${1973 + 5 * i}-${1977 + 5 * i}` : "2008-2013"; const recv_by_bin = d3.rollup(data, v => d3.sum(v, d => d.amount), d => bin_of(d.year), d => geo_name(d.recipient)); const per_year_b = (i, name) => (recv_by_bin.get(i).get(name) || 0) / bin_years(i) / 1e9; const v3_max = d3.max(d3.range(8), i => d3.max([...recv_by_bin.get(i).keys()], name => per_year_b(i, name))); const v3_color = d3.scaleSequentialSymlog(t => d3.interpolateOranges(0.12 + 0.88 * t)).domain([0, v3_max]).constant(0.1); const draw_map = (g, w, h, fill_for, tip_for) => { const land = {type: "FeatureCollection", features: geo_data.features.filter(f => f.properties.NAME !== "Antarctica")}; const projection = d3.geoNaturalEarth1().fitExtent([[2, 2], [w - 2, h - 2]], land); const path = d3.geoPath(projection); g.selectAll("path").data(land.features).enter().append("path") .attr("d", path) .attr("fill", d => fill_for(d.properties.NAME)) .attr("stroke", "white") .attr("stroke-width", 0.4) .append("title").text(d => tip_for(d.properties.NAME)); // Very small countries (for example Luxembourg, Cyprus) get a dot so they stay visible const small_area = 20 * (w * h) / (960 * 500); const small = land.features.filter(f => path.area(f) < small_area && fill_for(f.properties.NAME) !== NO_DATA); g.selectAll("circle").data(small).enter().append("circle") .attr("transform", d => `translate(${path.centroid(d)})`) .attr("r", 3.2).attr("fill", d => fill_for(d.properties.NAME)) .attr("stroke", "#444").attr("stroke-width", 0.5) .append("title").text(d => tip_for(d.properties.NAME)); }; const v3a_w = 560, v3a_h = 285, v3a_top = 70; const v3a_container = d3.create("svg") .attr("width", 2 * v3a_w + 20).attr("height", v3a_top + 4 * (v3a_h + 26) + 50) .attr("font-family", font); add_no_data_pattern(v3a_container); v3a_container.append("text").attr("x", 10).attr("y", 24).attr("font-weight", "bold").attr("font-size", 16) .text("Where Recorded Commitments Were Received: Average per Year, by 5-Year Period"); v3a_container.append("text").attr("x", 10).attr("y", 44).attr("font-size", 12).attr("fill", "#666") .text("Same color scale on every map (symlog). Hover a country for its amount."); d3.range(8).forEach(i => { const g = v3a_container.append("g").attr("transform", `translate(${10 + (i % 2) * v3a_w}, ${v3a_top + Math.floor(i / 2) * (v3a_h + 26)})`); g.append("text").attr("y", 12).attr("font-weight", "bold").attr("font-size", 13).text(`${bin_label(i)} (${recv_by_bin.get(i).size} recipients)`); const map_g = g.append("g").attr("transform", "translate(0, 20)"); draw_map(map_g, v3a_w - 10, v3a_h, name => recv_by_bin.get(i).has(name) ? v3_color(per_year_b(i, name)) : NO_DATA, name => recv_by_bin.get(i).has(name) ? `${name} ${bin_label(i)}\nAverage received: $${per_year_b(i, name).toFixed(2)}B per year` : `${name}: no donations received in this period`); }); const v3a_legend = v3a_container.append("g").attr("transform", `translate(20, ${v3a_top + 4 * (v3a_h + 26) + 6})`); add_seq_legend(v3a_legend, v3_color, [0.05, 0.1, 0.5, 1, 2, 4], v => `$${v}B`); v3a_legend.append("text").attr("x", 6 * 60 + 10).attr("y", 9).attr("font-size", 11).text("per year (hatched = no donations received in that period)"); display(v3a_container.node());4a:Te75,// ---- Visualization 3b: share of received money by world region, per period ---- const region_of = new Map(geo_data.features.map(f => [f.properties.NAME, f.properties.REGION_UN])); const v3b_regions = ["Asia", "Americas", "Africa", "Europe", "Oceania"]; // Check: every recipient must have one of the five regions, otherwise its money would be missing from the bars const v3b_missing = [...new Set(data.map(d => geo_name(d.recipient)))].filter(n => !v3b_regions.includes(region_of.get(n))); display(`Recipients without a region: ${v3b_missing.length} of ${new Set(data.map(d => d.recipient)).size} recipients ${v3b_missing.length ? "(" + v3b_missing.join(", ") + ")" : ""}`); const v3b_colors = d3.scaleOrdinal(v3b_regions, ["#4e79a7", "#e15759", "#76b7b2", "#b07aa1", "#9c755f"]); const v3b_rows = d3.range(8).map(i => { const row = {period: bin_label(i)}; for (const r of v3b_regions) row[r] = 0; for (const [name, v] of recv_by_bin.get(i)) row[region_of.get(name)] += v; const total = d3.sum(recv_by_bin.get(i).values()); const [top_name, top_value] = d3.greatest([...recv_by_bin.get(i)], d => d[1]); return {...row, total, top_label: `${top_name} ${d3.format(".0%")(top_value / total)}`}; }); const v3b_dims = {width: 560, height: 330, margin_left: 90, margin_right: 180, margin_top: 80, margin_bottom: 70}; const v3b_x = d3.scaleLinear().domain([0, 1]).range([0, v3b_dims.width]); const v3b_y = d3.scaleBand().domain(v3b_rows.map(d => d.period)).range([0, v3b_dims.height]).padding(0.15); const v3b_series = d3.stack().keys(v3b_regions).offset(d3.stackOffsetExpand)(v3b_rows); const v3b_container = d3.create("svg") .attr("width", v3b_dims.margin_left + v3b_dims.width + v3b_dims.margin_right) .attr("height", v3b_dims.margin_top + v3b_dims.height + v3b_dims.margin_bottom) .attr("font-family", font); v3b_container.append("text").attr("x", 10).attr("y", 26).attr("font-weight", "bold").attr("font-size", 16).text("Share of Received Money by World Region, by Period"); v3b_container.append("text").attr("x", 10).attr("y", 46).attr("font-size", 12).attr("fill", "#666").text("Each bar is 100% of the money received in that period. Label at the right = biggest recipient country and its share."); const v3b_chart = v3b_container.append("g").attr("transform", `translate(${v3b_dims.margin_left}, ${v3b_dims.margin_top})`); v3b_chart.selectAll("g.layer").data(v3b_series).enter().append("g").attr("class", "layer").attr("fill", s => v3b_colors(s.key)) .selectAll("rect").data(s => s.map(d => ({key: s.key, d}))).enter().append("rect") .attr("x", e => v3b_x(e.d[0])).attr("width", e => v3b_x(e.d[1]) - v3b_x(e.d[0])) .attr("y", e => v3b_y(e.d.data.period)).attr("height", v3b_y.bandwidth()) .append("title").text(e => `${e.d.data.period}\n${e.key}: ${d3.format(".0%")(e.d[1] - e.d[0])}`); v3b_chart.append("g").call(d3.axisLeft(v3b_y).tickSize(0)).call(g => g.select(".domain").remove()); v3b_chart.append("g").attr("transform", `translate(0, ${v3b_dims.height})`).call(d3.axisBottom(v3b_x).ticks(5, "%")); v3b_chart.selectAll("text.top").data(v3b_rows).enter().append("text").attr("class", "top") .attr("x", v3b_dims.width + 8).attr("y", d => v3b_y(d.period) + v3b_y.bandwidth() / 2 + 4).attr("font-size", 11).text(d => d.top_label); const v3b_legend = v3b_container.append("g").attr("transform", `translate(${v3b_dims.margin_left}, ${v3b_dims.margin_top + v3b_dims.height + 34})`); v3b_regions.forEach((r, i) => { v3b_legend.append("rect").attr("x", i * 90).attr("width", 12).attr("height", 12).attr("fill", v3b_colors(r)); v3b_legend.append("text").attr("x", i * 90 + 18).attr("y", 11).attr("font-size", 12).text(r); }); display(v3b_container.node());4b:T1093,### Answer #3 *Data limits: the maps cover only the 45 countries that are recipients in the dataset (Europe 27, Asia 10, the Americas 5, Oceania 2, Africa 1, which is South Africa). Most of Africa, the Middle East and Central Asia are hatched on every map, which is a limit of the data, not a finding. Also, more commitments is not the same as more need: the amounts show what donors chose to commit, not where need was greatest. All figures below were checked against the data.* #### How do donations shift geographically over time? Both: there is a stable core and a shifting edge. The core is Asia, and India in particular. India is the biggest recipient in all 8 periods, with between 17% (1998-2002, when Thailand is level at 17%) and 59% (1973-77) of the money. Asia as a whole gets 55%-87% of recorded commitments in every period. The edge changes a lot: - **Europe:** 0% in 1973-77, 10% in 1978-82, a peak of 30% in 1988-92 (Poland $15.2B, India $18.0B, Kuwait $7.4B in that period), then 5% in 2003-07 and 0% in 2008-13 as Central and Eastern European countries stop receiving. - **The Americas:** from 13% in 1973-77 to 28% in 2008-13, led by Brazil ($6.6B) and Colombia ($6.4B) in the last period. - **Africa:** nothing in the first 15 years, then 1% (1988-92) growing to 13% in 2008-13, all of it South Africa (first money in 1987; $6.7B in 2008-13). - **Inside Asia:** Thailand is a top-3 recipient in five of eight periods (1973-87 and 1993-2002; $13.6B in 1993-97), and Korea is top-3 in 1973-87 and 1998-2002 but not later. In 2008-13 the top five are India ($25.8B), South Africa, Brazil, Colombia and Thailand ($3.3B). Concentration also changes: the top 3 recipients get 86% of the money in 1973-77, 48% in 1998-2002 (the most spread out period) and 78% in 2008-13, with India alone at 52%. #### Can the "history of donations" be seen, and which regions had the most need? Reading the eight maps from top-left to bottom-right gives that history. Dark areas start in South and Southeast Asia (1973-87), then Poland and Kuwait darken (1988-92), then South America and Southeast Asia (1993-2002), and finally South Africa, Brazil and Colombia (2003-2013), with India dark on every map. Caution: the number of recipients changes across periods (11 in 1973-77, 31 in 1978-82, 21 in 1983-87, 32 in 1998-2002, 17 in 2008-13), so part of the "shift" is which countries appear in the data, not changing needs. #### Overall conclusion Asia stays the largest recipient region throughout, mainly because of India. Europe is prominent in the late 1980s and early 1990s (driven by Poland) and then fades, while the Americas (13% to 28%) and Africa (0% to 13%, South Africa only) grow. These patterns describe where commitments were recorded for the countries in this dataset, not necessarily where needs were greatest. #### Why this design Maps answer "where". I used one map per period (small multiples) with the same color scale on all of them instead of a slider, so the whole history is visible at once and any two periods can be compared without remembering the previous one. I grouped years into 5-year periods (the last has 6 because data ends in 2013) and mapped the average per year so the longer period is not unfairly darker. The sequential orange symlog scale (orange = recipient, as in the other charts) keeps both India and small countries visible. Hatching marks countries with no donations received, so they are not confused with pale low values, and small countries get a dot. Chart 3b adds regional shares per period, because maps show shares poorly and the question is about regions. #### Comparing my solutions - **Chart 3a (eight maps).** Advantages: shows exactly where and who the neighbors are, with a shared scale. Disadvantages: takes much space, colors across maps are only approximately comparable, and Europe is small on a world map (hover tooltips, dots and chart 3b help). - **Chart 3b (regional share bars).** Advantages: shifts between regions read as bar lengths, and the top-recipient label shows concentration. Disadvantages: no geography inside a region (India and Thailand are both "Asia"), and a share can rise just because another fell. 3a is the main answer and 3b gives the numbers.4c:[{"id":"09040dddbda03374a466600047ccbc70c46e6853884eb725db2141c566ca1b78fb7cc935096e8d5468c21e8df215e73fc49cdaaf7e2f1f89139793da25be02b2","href":"https://static.observableusercontent.com/files/09040dddbda03374a466600047ccbc70c46e6853884eb725db2141c566ca1b78fb7cc935096e8d5468c21e8df215e73fc49cdaaf7e2f1f89139793da25be02b2","name":"aiddata-countries-only.csv","type":"text/csv","lastModified":1794523139440,"size":8760387},{"id":"55260abbc777c0a3b8fed19f3929dd822fef9d5118b53b76b2176d20782910e599eac919999ea8ee85a60b783fd37082574f6591fd46c0d70ddf9b00df71ce27","href":"https://static.observableusercontent.com/files/55260abbc777c0a3b8fed19f3929dd822fef9d5118b53b76b2176d20782910e599eac919999ea8ee85a60b783fd37082574f6591fd46c0d70ddf9b00df71ce27","name":"countries-50m.json","type":"application/json","lastModified":1794522662829,"size":4177662}] 38:{"id":"eda5e5c279f960c5","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-12T22:31:16.561Z","update_time":"$D2026-11-13T05:10:24.830Z","view_time":null,"first_public_time":"$D2026-11-13T03:19:47.880Z","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":"c7b9449253b32926","login":"dheeraj-pakala","name":"Dheeraj Pakala","avatar_url":"https://avatars-next.observableusercontent.com/8d828baefb1c8f578c6814fc98231b6688ce51e026b42e3d63d6d00b7bd91c68","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":425,"publish_version":425,"role":null,"authored":false,"authors":[{"type":"individual","id":"5c5b74a2ca519b75","login":"dheeraj-pakala","name":"Dheeraj Pakala","avatar_url":"https://avatars-next.observableusercontent.com/8d828baefb1c8f578c6814fc98231b6688ce51e026b42e3d63d6d00b7bd91c68","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"c7b9449253b32926","login":"dheeraj-pakala","name":"Dheeraj Pakala","avatar_url":"https://avatars-next.observableusercontent.com/8d828baefb1c8f578c6814fc98231b6688ce51e026b42e3d63d6d00b7bd91c68","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"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 data = (await FileAttachment(\"aiddata-countries-only.csv\").csv({typed: true}))\n .filter(d => d.commitment_amount_usd_constant > 0) // drops 1 row with a non-positive amount\n .map(d => ({\n year: d.year, donor: d.donor, recipient: d.recipient,\n amount: d.commitment_amount_usd_constant,\n code: d.coalesced_purpose_code, purpose: d.coalesced_purpose_name\n }))","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"const years = d3.range(1973, 2014)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"const geo_data = 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":199,"value":"### Helpers used by all the charts","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"$3f","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"### Totals per country and year (used by Visualization 1)","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"$40","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"## Visualization #1: How do donated and received amounts change over time, by country?","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"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":"$42","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"$43","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"$44","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"**Chart 1e: use the menu below to pick any of the 47 countries and see its donated and received amounts per year (hover a year for the exact values).**","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"// ---- Visualization 1e: pick any country and see its donated vs. received per year ----\nconst v1e_country = view(Inputs.select(country_stats.map(d => d.name).sort(d3.ascending), {label: \"Country\", value: \"India\"}));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"$45","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"$46","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"## Visualization #2: What are the top 10 purposes and how do they change over time?","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"$47","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"$48","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"## Visualization #3: How do donations shift geographically over time?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"$49","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"$4a","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"$4b","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"### AI Disclosure\n\nI used Claude as an AI assistant to review and improve the written answers for clarity and accuracy. It also helped me identify areas where the explanations and visualizations could be improved.\n\n\nAll data processing was done in JavaScript using the two course-provided datasets: `aiddata-countries-only.csv` and `countries-50m.json`. No external data sources were used. I reviewed the final work and checked that the written explanations matched the data.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"2"}} 33:null