34:["$","title",null,{"children":"Mini-Project 1: Geographic Financial Aid (Due Oct. 29th) | Shiyu Liu sl13528 | 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 **Oct. 29th @ 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:T698,Your goal is to create **3 independent visualizations of the same dataset**, 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]:** How do the countries compare in terms of how much they receive and donate? Are there countries that donate much more than they receive or receive much more than they donate? - **Visualization #2 [25pts]:** Do the countries that mostly receive or mostly donate tend to cluster around specific geographical areas of the world? Are there neighboring countries that have radically different patterns in terms of how much they receive vs. how much they donate? - **Visualization #3 [25pts]:** Are there any major differences in how the top 5 most frequent purposes of disbursements (across all countries) distribute geographically in terms of countries that receive donations? Are there countries that tend to receive more of certain types of donations than others?

[NOTE]

It is okay to submit more than one solution, plot, etc. 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:T698,Your goal is to create **3 independent visualizations of the same dataset**, 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]:** How do the countries compare in terms of how much they receive and donate? Are there countries that donate much more than they receive or receive much more than they donate? - **Visualization #2 [25pts]:** Do the countries that mostly receive or mostly donate tend to cluster around specific geographical areas of the world? Are there neighboring countries that have radically different patterns in terms of how much they receive vs. how much they donate? - **Visualization #3 [25pts]:** Are there any major differences in how the top 5 most frequent purposes of disbursements (across all countries) distribute geographically in terms of countries that receive donations? Are there countries that tend to receive more of certain types of donations than others?

[NOTE]

3f:Tac7,(() => { const W = 900, H = 600, m = {top:55,right:35,bottom:75,left:105}; const totals = new Map(); for (const d of data) { const v = +d.commitment_amount_usd_constant || 0; if (d.donor) { const t = totals.get(d.donor) || {country:d.donor,donated:0,received:0}; t.donated += v; totals.set(d.donor,t); } if (d.recipient) { const t = totals.get(d.recipient) || {country:d.recipient,donated:0,received:0}; t.received += v; totals.set(d.recipient,t); } } const pts = [...totals.values()].filter(d => d.donated > 0 || d.received > 0); const max = d3.max(pts,d => Math.max(d.donated,d.received)); const min = d3.min(pts.flatMap(d => [d.donated,d.received]).filter(v => v > 0)); const floor = min/2; const x = d3.scaleLog().domain([floor,max*1.2]).range([m.left,W-m.right]).nice(); const y = d3.scaleLog().domain([floor,max*1.2]).range([H-m.bottom,m.top]).nice(); const c = d3.scaleOrdinal().domain(["Receive more","Balanced","Donate more"]).range(["#2878b5","#777","#d95f02"]); const svg = d3.create("svg").attr("viewBox",[0,0,W,H]).attr("style","max-width:100%;height:auto;font:12px sans-serif"); const lo = Math.max(floor,x.domain()[0]), hi = Math.min(x.domain()[1],y.domain()[1]); svg.append("line").attr("x1",x(lo)).attr("y1",y(lo)).attr("x2",x(hi)).attr("y2",y(hi)).attr("stroke","#555").attr("stroke-dasharray","5,5"); svg.append("g").attr("transform","translate(0,"+(H-m.bottom)+")").call(d3.axisBottom(x).ticks(7,"~s").tickFormat(v=>"$"+d3.format(".2s")(v))); svg.append("g").attr("transform","translate("+m.left+",0)").call(d3.axisLeft(y).ticks(7,"~s").tickFormat(v=>"$"+d3.format(".2s")(v))); svg.append("text").attr("x",(m.left+W-m.right)/2).attr("y",H-25).attr("text-anchor","middle").text("Total received (constant USD, log scale)"); svg.append("text").attr("transform","rotate(-90)").attr("x",-(m.top+H-m.bottom)/2).attr("y",24).attr("text-anchor","middle").text("Total donated (constant USD, log scale)"); svg.append("text").attr("x",m.left).attr("y",28).attr("font-size",18).attr("font-weight","bold").text("Visualization #1: Country totals: donations vs. receipts"); svg.append("text").attr("x",W-m.right).attr("y",m.top+15).attr("text-anchor","end").attr("fill","#555").text("Dashed line = equal totals"); svg.append("g").selectAll("circle").data(pts).join("circle").attr("cx",d=>x(Math.max(d.received,floor))).attr("cy",d=>y(Math.max(d.donated,floor))).attr("r",5) .attr("fill",d=>d.donated>1.2*d.received?c("Donate more"):d.received>1.2*d.donated?c("Receive more"):c("Balanced")).attr("fill-opacity",.75).attr("stroke","white") .append("title").text(d=>d.country+" | Donated: $"+d3.format(",.0f")(d.donated)+" | Received: $"+d3.format(",.0f")(d.received)); return svg.node(); })()40:T544,### Visualization #1: Donations and Receipts by Country The x-axis shows each country’s total aid received, and the y-axis shows its total aid donated. Both axes use a logarithmic scale. Hover over a dot to see the country’s donation and receipt totals. The dashed diagonal represents equal donations and receipts. Countries above it donate more than they receive; countries below it receive more than they donate. Orange dots indicate countries that donate substantially more, while blue dots indicate countries that receive substantially more. Gray dots represent countries whose totals are within 20% of each other. **According to the graph:** **Countries that receive substantially more:** Brazil, Chile, Colombia, Cyprus, Czech Republic, Estonia, Greece, Hungary, Iceland, India, Ireland, Kuwait, Latvia, Liechtenstein, Lithuania, Luxembourg, New Zealand, Poland, Portugal, Qatar, Romania, Saudi Arabia, Slovak Republic, Slovenia, South Africa, Taiwan, Thailand, United Arab Emirates, and Korea. **Countries that donate substantially more:** Belgium, Canada, Denmark, Finland, France, Germany, Japan, Monaco, the Netherlands, Norway, Spain, Sweden, Switzerland, the United Kingdom, and the United States. **Near-balanced countries:** Australia and Austria. No countries have exactly equal donation and receipt totals in this dataset.41:Tfea,(async () => { const W = 1100, H = 560; const world = await d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson"); const totals = new Map(); const aliases = { "united states of america": "United States", "usa": "United States", "south korea": "Korea", "republic of korea": "Korea", "korea, republic of": "Korea", "slovakia": "Slovak Republic", "czechia": "Czech Republic" }; const key = name => (aliases[String(name).trim().toLowerCase()] || String(name).trim()).toLowerCase(); for (const row of data) { const amount = +row.commitment_amount_usd_constant || 0; if (row.donor) { const k = key(row.donor), t = totals.get(k) || {country: row.donor, donated: 0, received: 0}; t.donated += amount; totals.set(k, t); } if (row.recipient) { const k = key(row.recipient), t = totals.get(k) || {country: row.recipient, donated: 0, received: 0}; t.received += amount; totals.set(k, t); } } const balance = d => d && d.donated + d.received > 0 ? (d.donated - d.received) / (d.donated + d.received) : null; const color = d3.scaleLinear() .domain([-1, 0, 1]) .range(["#2166ac", "#f7f7f7", "#b2182b"]) .clamp(true); const svg = d3.create("svg") .attr("viewBox", [0, 0, W, H]) .attr("style", "max-width:100%;height:auto;font:13px sans-serif"); const projection = d3.geoNaturalEarth1().fitExtent([[12, 55], [760, H - 30]], world); const path = d3.geoPath(projection); const countryValue = feature => totals.get(key(feature.properties.name)); svg.append("text").attr("x", 12).attr("y", 30).attr("font-size", 19).attr("font-weight", "bold") .text("Visualization #2: Geographic patterns in aid flows"); svg.append("g").selectAll("path").data(world.features).join("path") .attr("d", path) .attr("fill", feature => { const d = countryValue(feature), r = balance(d); return r === null ? "#e5e7eb" : color(r); }) .attr("stroke", "white").attr("stroke-width", 0.55) .append("title").text(feature => { const d = countryValue(feature), r = balance(d); return d && r !== null ? feature.properties.name + " | Balance score: " + d3.format("+.2f")(r) + " | Donated: $" + d3.format(",.0f")(d.donated) + " | Received: $" + d3.format(",.0f")(d.received) : feature.properties.name + " | No aid amount recorded"; }); const defs = svg.append("defs"); const gradient = defs.append("linearGradient") .attr("id", "balance-gradient") .attr("x1", "0%").attr("y1", "100%") .attr("x2", "0%").attr("y2", "0%"); gradient.append("stop").attr("offset", "0%").attr("stop-color", color(-1)); gradient.append("stop").attr("offset", "50%").attr("stop-color", color(0)); gradient.append("stop").attr("offset", "100%").attr("stop-color", color(1)); const legend = svg.append("g").attr("transform", "translate(800,115)"); legend.append("text").attr("font-size", 16).attr("font-weight", "bold") .text("Donation–receipt balance"); legend.append("text").attr("y", 22).attr("font-size", 12).attr("fill", "#555") .text("(donated − received) / (donated + received)"); legend.append("rect").attr("x", 4).attr("y", 42).attr("width", 24).attr("height", 250) .attr("rx", 2).attr("fill", "url(#balance-gradient)"); const legendY = d3.scaleLinear().domain([-1, 1]).range([292, 42]); legend.append("g").attr("transform", "translate(36,0)") .call(d3.axisRight(legendY).tickValues([-1, 0, 1]) .tickFormat(v => v > 0 ? "+1" : v < 0 ? "−1" : "0")); legend.append("text").attr("x", 4).attr("y", 322).attr("font-size", 12) .text("Blue: receives more"); legend.append("text").attr("x", 4).attr("y", 342).attr("font-size", 12) .text("Red: donates more"); legend.append("rect").attr("x", 4).attr("y", 365).attr("width", 14).attr("height", 14) .attr("rx", 2).attr("fill", "#e5e7eb"); legend.append("text").attr("x", 25).attr("y", 377).attr("font-size", 12) .text("No aid amount recorded"); return svg.node(); })()42:Ta0e,### Visualization #2: Geographic Patterns in Aid Flows ### Geographic patterns and neighboring contrasts Among the countries represented in this dataset, recipient-leaning patterns appear in parts of Latin America (including Brazil, Chile, and Colombia), South and Southeast Asia (India and Thailand), the Gulf region (Kuwait, Qatar, Saudi Arabia, and the United Arab Emirates), and Central and Eastern Europe and the Baltics (including Poland, the Czech Republic, Hungary, Romania, Slovakia, Slovenia, Latvia, Lithuania, and Estonia). Donor-leaning patterns are common in the United States and Western and Northern Europe, including Germany, France, the United Kingdom, the Netherlands, Belgium, Switzerland, Norway, Sweden, Denmark, and Finland. East Asia is mixed: Japan is strongly donor-leaning, while Korea and Taiwan are recipient-leaning. Germany and Poland illustrate a sharp contrast between neighboring countries: Germany’s balance score is close to +1, while Poland’s is close to −1. Germany and the Czech Republic also show opposite patterns, with Germany strongly donor-leaning and the Czech Republic recipient-leaning. These examples show that nearby countries can occupy very different roles in the recorded aid flows. These are patterns among countries with recorded amounts in this dataset. Gray countries have no recorded aid amount and should not be interpreted as having received or donated zero. ### Design rationale For each country, I calculate the symmetric balance score **(donated − received) / (donated + received)**. It ranges from −1 to +1: −1 indicates only aid received, +1 indicates only aid donated, and 0 indicates equal totals. A continuous diverging color scale maps negative scores to blue, values near zero to a light neutral color, and positive scores to red; countries without recorded amounts are gray. This normalized score shows both the direction and relative strength of each country’s aid-flow balance, while the zero midpoint makes donor-leaning and recipient-leaning patterns easy to compare on the map. Hover over a country to see its score and donated and received totals. The score also makes relative differences easier to interpret: when donations are twice receipts, the score is +1/3; when receipts are twice donations, it is −1/3, giving equally strong imbalances equal magnitudes in opposite directions. Because it is normalized by the combined total, the score emphasizes relative balance rather than absolute dollar differences, which may be much larger for countries with larger aid totals.43:T1371,(async () => { const W = 1100, H = 560; const world = await d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson"); const aliases = { "united states of america": "United States", "usa": "United States", "south korea": "Korea", "republic of korea": "Korea", "korea, republic of": "Korea", "slovakia": "Slovak Republic", "czechia": "Czech Republic" }; const key = name => (aliases[String(name).trim().toLowerCase()] || String(name).trim()).toLowerCase(); const purposeMap = new Map(); for (const row of data) { const name = String(row.coalesced_purpose_name || "").trim(); if (!name) continue; const purpose = purposeMap.get(name) || {name, count: 0, byCountry: new Map()}; purpose.count += 1; if (row.recipient) { const k = key(row.recipient); const country = purpose.byCountry.get(k) || {name: row.recipient, count: 0, amount: 0}; country.count += 1; country.amount += +row.commitment_amount_usd_constant || 0; purpose.byCountry.set(k, country); } purposeMap.set(name, purpose); } const purposes = [...purposeMap.values()] .sort((a, b) => d3.descending(a.count, b.count) || d3.ascending(a.name, b.name)) .slice(0, 5); const maxCount = d3.max(purposes, p => d3.max([...p.byCountry.values()], d => d.count)) || 1; const countColor = n => d3.interpolateYlOrRd(Math.log1p(n) / Math.log1p(maxCount)); const root = document.createElement("div"); root.style.fontFamily = "sans-serif"; root.style.maxWidth = "100%"; const controls = d3.select(root).append("div").style("margin", "0 0 8px 12px"); controls.append("label").attr("for", "purpose-map-select").style("font-weight", "600") .text("Select one of the five most frequent purposes: "); const select = controls.append("select").attr("id", "purpose-map-select") .style("max-width", "min(620px, 90%)").style("padding", "5px"); select.selectAll("option").data(purposes).join("option") .attr("value", (d, i) => i) .text(d => d.name + " — " + d3.format(",")(d.count) + " commitments"); const svg = d3.create("svg").attr("viewBox", [0, 0, W, H]) .attr("style", "max-width:100%;height:auto;font:13px sans-serif"); root.appendChild(svg.node()); const projection = d3.geoNaturalEarth1().fitExtent([[12, 65], [760, H - 25]], world); const path = d3.geoPath(projection); function render() { const purpose = purposes[+select.property("value")]; svg.selectAll("*").remove(); svg.append("text").attr("x", 12).attr("y", 28).attr("font-size", 18).attr("font-weight", "bold") .text("Visualization #3A: Aid commitments by purpose and recipient"); svg.append("text").attr("x", 12).attr("y", 49).attr("font-size", 12).attr("fill", "#555") .text(purpose.name + " — " + d3.format(",")(purpose.count) + " commitments worldwide"); svg.append("g").selectAll("path").data(world.features).join("path") .attr("d", path) .attr("fill", feature => { const d = purpose.byCountry.get(key(feature.properties.name)); return d ? countColor(d.count) : "#e5e7eb"; }) .attr("stroke", "white").attr("stroke-width", 0.55) .append("title").text(feature => { const d = purpose.byCountry.get(key(feature.properties.name)); return d ? feature.properties.name + " | " + purpose.name + " | Commitments: " + d3.format(",")(d.count) + " | Total amount: $" + d3.format(",.0f")(d.amount) : feature.properties.name + " | No recipient records for this purpose"; }); const defs = svg.append("defs"); const gradient = defs.append("linearGradient").attr("id", "purpose-count-gradient") .attr("x1", "0%").attr("y1", "100%").attr("x2", "0%").attr("y2", "0%"); gradient.append("stop").attr("offset", "0%").attr("stop-color", countColor(0)); gradient.append("stop").attr("offset", "100%").attr("stop-color", countColor(maxCount)); const legend = svg.append("g").attr("transform", "translate(800,115)"); legend.append("text").attr("font-size", 16).attr("font-weight", "bold").text("Commitment count"); legend.append("rect").attr("x", 4).attr("y", 30).attr("width", 24).attr("height", 250) .attr("rx", 2).attr("fill", "url(#purpose-count-gradient)"); legend.append("text").attr("x", 39).attr("y", 40).attr("font-size", 12) .text(d3.format(",")(maxCount) + " (more commitments)"); legend.append("text").attr("x", 39).attr("y", 285).attr("font-size", 12).text("0"); legend.append("rect").attr("x", 4).attr("y", 315).attr("width", 14).attr("height", 14) .attr("rx", 2).attr("fill", "#e5e7eb"); legend.append("text").attr("x", 25).attr("y", 327).attr("font-size", 12).text("No records"); legend.append("text").attr("x", 4).attr("y", 358).attr("font-size", 11).attr("fill", "#555") .text("Same color scale for all five purposes"); } select.on("change", render); render(); return root; })()44:T1873,(() => { const aliases = { "united states of america": "United States", "usa": "United States", "south korea": "Korea", "republic of korea": "Korea", "korea, republic of": "Korea", "slovakia": "Slovak Republic", "czechia": "Czech Republic" }; const key = name => (aliases[String(name).trim().toLowerCase()] || String(name).trim()).toLowerCase(); const purposeMap = new Map(); for (const row of data) { const purpose = String(row.coalesced_purpose_name || "").trim(); if (!purpose) continue; const entry = purposeMap.get(purpose) || {name: purpose, count: 0, countries: new Map()}; entry.count += 1; if (row.recipient) { const k = key(row.recipient); const country = entry.countries.get(k) || {name: row.recipient, count: 0, amount: 0}; country.count += 1; country.amount += +row.commitment_amount_usd_constant || 0; entry.countries.set(k, country); } purposeMap.set(purpose, entry); } const purposes = [...purposeMap.values()] .sort((a, b) => d3.descending(a.count, b.count) || d3.ascending(a.name, b.name)) .slice(0, 5); const countriesByKey = new Map(); for (const purpose of purposes) { for (const [k, item] of purpose.countries) { const row = countriesByKey.get(k) || {name: item.name, total: 0}; row.total += item.amount; countriesByKey.set(k, row); } } const countries = [...countriesByKey.entries()] .map(([key, d]) => ({key, ...d})) .sort((a, b) => d3.descending(a.total, b.total) || d3.ascending(a.name, b.name)); const maxAmount = d3.max(purposes, p => d3.max([...p.countries.values()], d => d.amount)) || 1; const amountColor = d3.scaleSequential(d3.interpolateBlues).domain([0, Math.log1p(maxAmount)]); const labelW = 205, colW = 160, rowH = 23, headerH = 140; const W = labelW + colW * purposes.length + 20; const H = headerH + rowH * countries.length + 78; const root = document.createElement("div"); root.style.maxWidth = "100%"; root.style.maxHeight = "720px"; root.style.overflow = "auto"; root.style.border = "1px solid #ddd"; root.style.fontFamily = "sans-serif"; const svg = d3.select(root).append("svg") .attr("viewBox", [0, 0, W, H]) .attr("width", W).attr("height", H) .style("font", "12px sans-serif"); svg.append("text").attr("x", 12).attr("y", 24).attr("font-size", 18).attr("font-weight", "bold") .text("Visualization #3B: Recipient countries by aid purpose"); svg.append("text").attr("x", 12).attr("y", 45).attr("fill", "#555") .text("Top five purposes ranked by commitment record count; cell color shows total amount received."); function wrapWords(text, maxChars, maxLines) { const words = text.split(/\s+/); const lines = [""]; for (const word of words) { let last = lines.length - 1; if (lines[last] && (lines[last] + " " + word).length > maxChars) { if (lines.length === maxLines) { lines[last] = lines[last].slice(0, Math.max(0, maxChars - 1)) + "…"; return lines; } lines.push(word); } else { lines[last] += (lines[last] ? " " : "") + word; } } return lines; } const header = svg.append("g"); header.append("text").attr("x", 12).attr("y", headerH - 8).attr("font-weight", "bold").text("Recipient country"); purposes.forEach((purpose, i) => { const x = labelW + i * colW + colW / 2; const lines = wrapWords(purpose.name, 22, 3); const text = header.append("text").attr("x", x).attr("y", 78).attr("text-anchor", "middle") .attr("font-weight", "bold"); lines.forEach((line, j) => text.append("tspan").attr("x", x).attr("dy", j === 0 ? 0 : 14).text(line)); text.append("title").text(purpose.name + " — " + d3.format(",")(purpose.count) + " commitments"); header.append("text").attr("x", x).attr("y", 125).attr("text-anchor", "middle") .attr("font-size", 10).attr("fill", "#666").text(d3.format(",")(purpose.count) + " records"); }); const row = svg.append("g").selectAll("g.country-row").data(countries).join("g") .attr("class", "country-row") .attr("transform", (d, i) => "translate(0," + (headerH + i * rowH) + ")"); row.append("text").attr("x", labelW - 10).attr("y", rowH / 2 + 4).attr("text-anchor", "end") .text(d => d.name); row.each(function(country) { const group = d3.select(this); purposes.forEach((purpose, i) => { const cell = purpose.countries.get(country.key); group.append("rect").attr("x", labelW + i * colW + 3).attr("y", 2) .attr("width", colW - 6).attr("height", rowH - 4).attr("rx", 2) .attr("fill", cell ? amountColor(Math.log1p(cell.amount)) : "#e5e7eb") .attr("stroke", "white") .append("title").text(cell ? country.name + " | " + purpose.name + " | Amount: $" + d3.format(",.0f")(cell.amount) + " | Commitments: " + d3.format(",")(cell.count) : country.name + " | " + purpose.name + " | No recipient records"); }); }); const defs = svg.append("defs"); const gradient = defs.append("linearGradient").attr("id", "purpose-amount-gradient") .attr("x1", "0%").attr("y1", "0%").attr("x2", "100%").attr("y2", "0%"); gradient.append("stop").attr("offset", "0%").attr("stop-color", amountColor(0)); gradient.append("stop").attr("offset", "100%").attr("stop-color", amountColor(Math.log1p(maxAmount))); const legendY = headerH + rowH * countries.length + 35; svg.append("text").attr("x", 12).attr("y", legendY - 5).attr("font-weight", "bold").text("Total amount received (log color scale)"); svg.append("rect").attr("x", 250).attr("y", legendY - 19).attr("width", 230).attr("height", 14) .attr("rx", 2).attr("fill", "url(#purpose-amount-gradient)"); svg.append("text").attr("x", 250).attr("y", legendY + 12).attr("font-size", 11).text("$0"); svg.append("text").attr("x", 480).attr("y", legendY + 12).attr("font-size", 11).attr("text-anchor", "end") .text("$" + d3.format(".3s")(maxAmount)); svg.append("rect").attr("x", 520).attr("y", legendY - 19).attr("width", 14).attr("height", 14) .attr("rx", 2).attr("fill", "#e5e7eb"); svg.append("text").attr("x", 541).attr("y", legendY - 7).attr("font-size", 11).text("No records"); return root; })()45:T9af,## Visualization #3: Geographic Distribution of Aid by Purpose Ranked by commitment-record count, the five most frequent purpose categories are Sectors not specified(8,076 records), Social/welfare services(6,228), Strengthening civil society(5,600), Higher education(4,593), and Multisector aid(3,026). The maps show that recipient patterns vary by purpose, and the heatmap shows that countries do not receive the same mix of aid: some country–purpose combinations have much larger recorded amounts than others. Record frequency and total dollars are different measures—a country may receive many smaller commitments or fewer larger ones. ### Design 1: Purpose-specific choropleth map The first view is an interactive world map with a dropdown for the five purposes. For the selected purpose, each country’s color represents its number of commitment records; the tooltip also gives the total amount. I use the same color scale across all five selections so the map can be compared as the purpose changes. **Advantages:** The map preserves geographic context and makes regional clusters for one purpose easy to spot. The dropdown keeps the display focused and avoids putting five overlapping layers on one map. **Limitations:** Only one purpose is visible at a time, so comparisons rely on switching between views and remembering earlier patterns. Color represents record counts, not total dollars, and countries with no records for the selected purpose appear alike regardless of their aid in other categories. ### Design 2: Country–purpose heatmap The second view places recipient countries in rows and the five purposes in columns. Each cell’s color represents the total commitment amount for that country and purpose, using a logarithmic color scale; hovering reveals the amount and record count. **Advantages:** All five purposes can be compared side by side for each country, making it easier to see which types account for larger amounts in a country and how that mix differs across countries. The amount and record-count tooltip adds detail without crowding the cells with labels. **Limitations:** The table does not preserve geographic proximity, so regional clusters are less apparent than on the map. The logarithmic color scale is needed because amounts vary greatly, but it can make differences in dollar magnitude less intuitive. The view is also limited to the five most frequent purposes and countries with recipient records in those categories.46:[] 38:{"id":"8e3ff481af92fcee","slug":"mini-project-1-geographic-financial-aid-due-oct-29th","title":"Mini-Project 1: Geographic Financial Aid (Due Oct. 29th)","thumbnail":"6321fd92b621b63f4becd3cc8ec4c5cc910734166c3216e6b130de07eb4d8488","access_level":"public","create_time":"$D2026-10-28T16:49:32.721Z","update_time":"$D2026-10-29T20:36:37.051Z","view_time":null,"first_public_time":"$D2026-10-29T19:57:56.131Z","has_unpublished_edits":null,"fork":{"id":"e6fcea972bfc4543","slug":"2026-infovis-cse_project-1","title":"Mini-Project 1: Geographic Financial Aid (Due Oct. 29th)","owner":{"id":"3d6c0f5acd6a20a4","login":"rk2546","name":"rk2546"}},"stars":0,"starred":false,"owner":{"type":"team","id":"297e993e7c8475d0","login":"shiyu-liu-sl13528","name":"Shiyu Liu sl13528","avatar_url":"https://avatars-next.observableusercontent.com/195e0eb427e46230c6a1f18d5b7c8aad2da3de4c6b49aed58f3d405983c944b7","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":268,"publish_version":268,"role":null,"authored":false,"authors":[{"type":"individual","id":"83bb3b6afb1f144d","login":"shiyu-liu-sl13528","name":"Shiyu Liu sl13528","avatar_url":"https://avatars-next.observableusercontent.com/195e0eb427e46230c6a1f18d5b7c8aad2da3de4c6b49aed58f3d405983c944b7","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"297e993e7c8475d0","login":"shiyu-liu-sl13528","name":"Shiyu Liu sl13528","avatar_url":"https://avatars-next.observableusercontent.com/195e0eb427e46230c6a1f18d5b7c8aad2da3de4c6b49aed58f3d405983c944b7","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Mini-Project 1: Geographic Financial Aid (Due Oct. 29th)","cells":[{"id":0,"value":"# Mini-Project 1: Geographic Financial Aid (Due Oct. 29th)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":27,"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":34,"value":"css","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"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":32,"value":"$3c","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"---\n## About the Dataset","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":21,"value":"This 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":58,"value":"---\n## Questions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"$3d","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":66,"value":"$3e","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"data = d3.csv(\"https://docs.google.com/spreadsheets/d/1YiuHdfZv_JZ-igOemKJMRaU8dkucfmHxOP6Od3FraW8/export?format=csv&gid=1124214599\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"$3f","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"$40","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"$41","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"$42","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"$43","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"$44","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"$45","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"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":55,"value":"Your answers to each question are graded on the following qualities, with each question totaling up to **25 points**:\n\n- **[10pts]**: Does the visualization answer the questions posed in the exercise?\n- **[10pts]**: Does the written answer & discussion the questions posed in the exercise?\n- **[5pts]**: Is the visual representation clear? Does it have good aesthetics? If needed, you can review this notebook on clarity for reference.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"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 completing this project, you can use the questions above as a self-evaluation tool in two main ways:\n\n1. 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.\n2. 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.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":65,"value":"\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"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":56,"value":"// Hello world!","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"2"}} 33:null