34:["$","title",null,{"children":"Mini-Project 1: Geographic Financial Aid (Due Oct. 29th) | Darsh Shani | 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:Tb18,const aidSourceUrl = "https://docs.google.com/spreadsheets/d/1YiuHdfZv_JZ-igOemKJMRaU8dkucfmHxOP6Od3FraW8/export?format=csv&gid=1124214599"; // const aidRaw = await d3.csv(aidSourceUrl, d3.autoType); const aidRaw = await FileAttachment("aiddata-countries-only - aiddata-countries-only.csv").csv({typed: true}); // Parse missing values as missing, not as artificial zeros. const validMoney = v => v !== null && v !== undefined && String(v).trim() !== ""; const aidRows = aidRaw.map(d => ({ donor: String(d.donor ?? "").trim(), recipient: String(d.recipient ?? "").trim(), year: Number(d.year), amount: validMoney(d.commitment_amount_usd_constant) ? Number(d.commitment_amount_usd_constant) : NaN, purposeCode: String(d.coalesced_purpose_code ?? "").trim(), purposeName: String(d.coalesced_purpose_name ?? "").trim() })).filter(d => d.donor && d.recipient && Number.isFinite(d.amount)); // Preserve the six donor==recipient records instead of deleting source data. // Preserve negative adjustments as well; one is present in this sample. const donatedMap = d3.rollup(aidRows, v => d3.sum(v, d => d.amount), d => d.donor); const receivedMap = d3.rollup(aidRows, v => d3.sum(v, d => d.amount), d => d.recipient); const allCountries = [...new Set([...donatedMap.keys(), ...receivedMap.keys()])].sort(d3.ascending); const countryStats = allCountries.map(country => { const donated = donatedMap.get(country) ?? 0; const received = receivedMap.get(country) ?? 0; const volume = Math.abs(donated) + Math.abs(received); return { country, donated, received, net: donated - received, volume, balance: volume > 0 ? (donated - received) / volume : 0 }; }); const fmtMoney = value => { const a = Math.abs(value); const body = a >= 1e12 ? `$${(a / 1e12).toFixed(2)}T` : a >= 1e9 ? `$${(a / 1e9).toFixed(2)}B` : a >= 1e6 ? `$${(a / 1e6).toFixed(1)}M` : a >= 1e3 ? `$${(a / 1e3).toFixed(1)}K` : `$${a.toFixed(0)}`; return value < 0 ? `−${body}` : body; }; // Orange = net recipients; slate blue = net donors; light gray = balanced. const balanceColor = d3.scaleLinear() .domain([-1, 0, 1]) .range(["#D06B29", "#EBEFF2", "#235B99"]) .clamp(true); const audit = { rawRecords: aidRaw.length, retainedRecords: aidRows.length, countries: countryStats.length, yearRange: d3.extent(aidRows, d => d.year), selfCountryRecords: aidRows.filter(d => d.donor === d.recipient).length, negativeRecords: aidRows.filter(d => d.amount < 0).length, invalidOrMissingAmountRecords: aidRaw.length - aidRows.length, sumDonated: d3.sum(countryStats, d => d.donated), sumReceived: d3.sum(countryStats, d => d.received) }; display(audit); display(Inputs.table(countryStats.slice().sort((a, b) => b.volume - a.volume), { columns: ["country", "donated", "received", "net", "balance"] })); 3f:T905,const aidAtlas = await d3.json("https://cdn.jsdelivr.net/npm/world-atlas@2/countries-50m.json"); const aidWorldFeatures = topojson.feature(aidAtlas, aidAtlas.objects.countries).features; const aidWorld = {type: "FeatureCollection", features: aidWorldFeatures}; const countryAliases = new Map(Object.entries({ "United States": "United States of America", "Korea": "South Korea", "Korea, Republic of": "South Korea", "Slovak Republic": "Slovakia", "Czech Republic": "Czechia", "Viet Nam": "Vietnam", "Russian Federation": "Russia", "Bosnia and Herzegovina": "Bosnia and Herz.", "Central African Republic": "Central African Rep.", "Democratic Republic of the Congo": "Dem. Rep. Congo", "Congo, Democratic Republic of": "Dem. Rep. Congo", "Congo, Republic of": "Congo", "Cote d'Ivoire": "Côte d'Ivoire", "Dominican Republic": "Dominican Rep.", "Equatorial Guinea": "Eq. Guinea", "Lao PDR": "Laos", "Lao People's Democratic Republic": "Laos", "South Sudan": "S. Sudan", "Solomon Islands": "Solomon Is.", "Marshall Islands": "Marshall Is.", "Syrian Arab Republic": "Syria", "Iran, Islamic Republic of": "Iran", "Kyrgyz Republic": "Kyrgyzstan", "Macedonia, FYR": "North Macedonia", "Swaziland": "eSwatini", "Tanzania, United Republic of": "Tanzania", "Brunei Darussalam": "Brunei", "West Bank and Gaza Strip": "Palestine", "Bahamas, The": "Bahamas", "Gambia, The": "Gambia", "Yemen, Republic of": "Yemen", "Egypt, Arab Republic of": "Egypt" })); const atlasNameOf = name => countryAliases.get(name) ?? name; const aidByAtlasName = new Map(countryStats.map(d => [atlasNameOf(d.country), d])); const sourceCountryByAtlas = new Map(countryStats.map(d => [atlasNameOf(d.country), d.country])); const atlasNameSet = new Set(aidWorldFeatures.map(d => d.properties.name)); const unmatchedCountries = countryStats .filter(d => !atlasNameSet.has(atlasNameOf(d.country))) .map(d => ({source: d.country, attemptedMapName: atlasNameOf(d.country)})); const aliasCollisions = d3.rollups(countryStats, v => v.map(d => d.country), d => atlasNameOf(d.country)) .filter(([, countries]) => countries.length > 1); display({ mapCountriesMatched: countryStats.length - unmatchedCountries.length, mapCountriesUnmatched: unmatchedCountries, aliasCollisions }); 40:T1591,const visualization1 = (() => { const root = d3.create("div").style("font", "13px sans-serif"); root.append("h3").text("Visualization 1 — How much does each country donate versus receive?"); const W = 970, H = 570; const m = {top: 55, right: 55, bottom: 77, left: 98}; const minAmount = Math.min(0, d3.min(countryStats, d => Math.min(d.donated, d.received))); const maxAmount = d3.max(countryStats, d => Math.max(d.donated, d.received)) * 1.08; const x = d3.scaleSymlog().constant(1e7).domain([minAmount, maxAmount]).range([m.left, W-m.right]); const y = d3.scaleSymlog().constant(1e7).domain([minAmount, maxAmount]).range([H-m.bottom, m.top]); const rad = d3.scaleSqrt().domain([0, d3.max(countryStats, d => d.volume)]).range([4, 17]); const svg = root.append("svg").attr("viewBox", `0 0 ${W} ${H}`) .style("width", "100%").style("max-width", `${W}px`); svg.append("line").attr("x1", x(minAmount)).attr("y1", y(minAmount)) .attr("x2", x(maxAmount)).attr("y2", y(maxAmount)) .attr("stroke", "#6b7280").attr("stroke-dasharray", "6,4").attr("stroke-width", 1.6); const axisTicks = [ 0, 1e7, 1e8, 1e9, 1e10, 1e11 ].filter(v => v >= minAmount && v <= maxAmount); svg.append("g") .attr("transform", `translate(0,${H-m.bottom})`) .call( d3.axisBottom(x) .tickValues(axisTicks) .tickFormat(fmtMoney) ); svg.append("g") .attr("transform", `translate(${m.left},0)`) .call( d3.axisLeft(y) .tickValues(axisTicks) .tickFormat(fmtMoney) ); svg.append("g").selectAll("circle").data(countryStats).join("circle") .attr("cx", d => x(d.received)).attr("cy", d => y(d.donated)) .attr("r", d => rad(d.volume)).attr("fill", d => balanceColor(d.balance)) .attr("fill-opacity", .82).attr("stroke", "#243142").attr("stroke-width", .8) .append("title").text(d => `${d.country}\nDonated: ${fmtMoney(d.donated)}\nReceived: ${fmtMoney(d.received)}\nNet: ${fmtMoney(d.net)}`); const labelRows = countryStats.slice() .sort((a, b) => b.volume - a.volume) .slice(0, 6); svg.append("g").selectAll("text").data(labelRows).join("text") .attr("x", d => x(d.received)+rad(d.volume)+4) .attr("y", d => y(d.donated)-rad(d.volume)-3) .attr("font-size", 10).attr("fill", "#182b43").text(d => d.country); svg.append("text").attr("x", W/2).attr("y", 27).attr("font-size", 18) .attr("font-weight", "bold").attr("text-anchor", "middle") .text("Donated vs. received commitments by country"); svg.append("text").attr("x", W/2).attr("y", H-15).attr("text-anchor", "middle") .text("Amount received (constant USD, symlog)"); svg.append("text").attr("transform", "rotate(-90)") .attr("x", -H/2).attr("y", 21).attr("text-anchor", "middle") .text("Amount donated (constant USD, symlog)"); svg.append("text").attr("x", W-278).attr("y", 54).attr("fill", "#235B99") .text("Above diagonal: net donors"); svg.append("text").attr("x", W-278).attr("y", 72).attr("fill", "#C15C1E") .text("Below diagonal: net recipients"); root.append("h4").text("Alternative view: ranked donor/recipient balance"); const ranks = countryStats.slice().sort((a,b) => b.balance-a.balance || b.volume-a.volume); const RW = 960, RH = 85+ranks.length*24+55; const rx = d3.scaleLinear().domain([-1,1]).range([195,RW-120]); const ry = d3.scaleBand().domain(ranks.map(d=>d.country)) .range([80,RH-55]).padding(.24); const rsvg = root.append("svg").attr("viewBox", `0 0 ${RW} ${RH}`) .style("width", "100%").style("max-width", `${RW}px`); rsvg.append("line").attr("x1",rx(0)).attr("x2",rx(0)) .attr("y1",77).attr("y2",RH-50).attr("stroke","#8793a0").attr("stroke-dasharray","4 4"); rsvg.append("g").attr("transform",`translate(${195},0)`) .call(d3.axisLeft(ry).tickSize(0)).call(g=>g.select(".domain").remove()); rsvg.append("g").attr("transform",`translate(0,${RH-52})`) .call(d3.axisBottom(rx).tickValues([-1,-.5,0,.5,1])); rsvg.append("g").selectAll("circle").data(ranks).join("circle") .attr("cx",d=>rx(d.balance)).attr("cy",d=>ry(d.country)+ry.bandwidth()/2) .attr("r",d=>rad(d.volume)*.67+2).attr("fill",d=>balanceColor(d.balance)) .attr("stroke","#374151").attr("stroke-width",.7) .append("title").text(d=>`${d.country}\nDonated ${fmtMoney(d.donated)}\nReceived ${fmtMoney(d.received)}\nBalance ${d.balance.toFixed(3)}`); rsvg.append("text").attr("x",RW/2).attr("y",28).attr("font-weight","bold") .attr("font-size",18).attr("text-anchor","middle") .text("All countries ranked by donor–recipient balance"); rsvg.append("text").attr("x",rx(-1)).attr("y",55).attr("fill","#C15C1E") .text("−1: recipient only"); rsvg.append("text").attr("x",rx(1)).attr("y",55).attr("fill","#235B99") .attr("text-anchor","end").text("+1: donor only"); const topD = countryStats.slice().sort((a,b)=>b.donated-a.donated).slice(0,3); const topR = countryStats.slice().sort((a,b)=>b.received-a.received).slice(0,3); const stronglyDonor = countryStats.filter(d => d.donated > 10 * Math.max(0,d.received)); const stronglyRecipient = countryStats.filter(d => d.received > 10 * Math.max(0,d.donated)); return root.node(); })(); display(visualization1); 41:T1349,const visualization2 = (() => { const root = d3.create("div").style("font", "13px sans-serif"); root.append("h3").text("Visualization 2 — Geographic donor/recipient patterns"); root.append("span").text("Geographic focus: "); const picker = root.append("select").style("margin", "5px 0 12px 5px"); picker.selectAll("option").data(["World", "Europe"]).join("option") .attr("value",d=>d).text(d=>d); const W=980,H=575; const svg=root.append("svg").attr("viewBox",`0 0 ${W} ${H}`) .style("width","100%").style("max-width",`${W}px`); const pattern=svg.append("defs").append("pattern") .attr("id","aid1-missing").attr("patternUnits","userSpaceOnUse") .attr("width",6).attr("height",6).attr("patternTransform","rotate(45)"); pattern.append("rect").attr("width",6).attr("height",6).attr("fill","#f1f2f4"); pattern.append("path").attr("d","M0,0V6").attr("stroke","#c6ccd3"); const g=svg.append("g"); const title=svg.append("text").attr("x",W/2).attr("y",29) .attr("text-anchor","middle").attr("font-weight","bold").attr("font-size",18); function redraw(focus) { const projection = focus === "Europe" ? d3.geoMercator() .center([16, 53]) .scale(390) .translate([W / 2, H / 2 + 63]) .clipExtent([[0, 45], [W, H - 55]]) : d3.geoNaturalEarth1() .fitExtent([[18, 50], [W - 18, H - 65]], aidWorld); const path=d3.geoPath(projection); g.selectAll("path.country").data(aidWorldFeatures,d=>d.id).join("path") .attr("class","country").attr("d",path) .attr("fill",d=>{ const stats=aidByAtlasName.get(d.properties.name); return stats ? balanceColor(stats.balance) : "url(#aid1-missing)"; }) .attr("stroke","#8592a1").attr("stroke-width",.4) .selectAll("title").data(d=>[d]).join("title") .text(d=>{ const stats=aidByAtlasName.get(d.properties.name); return stats ? `${stats.country}\nDonated ${fmtMoney(stats.donated)}\nReceived ${fmtMoney(stats.received)}\nBalance ${stats.balance.toFixed(3)}` : `${d.properties.name}: not in the reduced dataset`; }); title.text(`${focus}: donor (blue) versus recipient (orange) balance`); } redraw("World"); picker.on("change",function(){redraw(this.value);}); const lg=svg.append("g").attr("transform",`translate(205,${H-35})`); lg.selectAll("rect").data(d3.range(101)).join("rect") .attr("x",i=>i*5.5).attr("y",0).attr("width",5.7).attr("height",13) .attr("fill",i=>balanceColor(-1+2*i/100)); [[0,"More received"],[277,"Balanced"],[555,"More donated"]].forEach(([x,txt])=>{ lg.append("text").attr("x",x).attr("y",29) .attr("text-anchor",x===0?"start":x===555?"end":"middle") .attr("font-size",11).text(txt); }); root.append("p").text("Hatched countries are absent from this reduced AidData file. A neutral-colored country is present in the file and roughly balanced; it is not the same as missing data. Hover for totals."); const geoms=aidAtlas.objects.countries.geometries; const adjacent=topojson.neighbors(geoms); const pairs=[]; adjacent.forEach((neighbors,i)=>{ const a=aidByAtlasName.get(geoms[i].properties?.name); if(!a) return; for(const j of neighbors){ if(j<=i) continue; const b=aidByAtlasName.get(geoms[j].properties?.name); if(b) pairs.push({a,b,gap:Math.abs(a.balance-b.balance)}); } }); const topPairs=pairs.sort((a,b)=>b.gap-a.gap).slice(0,12); root.append("h4").text("Largest differences between countries sharing a mapped border"); const BW=1040,BH=105+topPairs.length*36; const bx=d3.scaleLinear().domain([-1,1]).range([310,BW-160]); const bsvg=root.append("svg").attr("viewBox",`0 0 ${BW} ${BH}`) .style("width","100%").style("max-width",`${BW}px`); bsvg.append("line").attr("x1",bx(0)).attr("x2",bx(0)) .attr("y1",38).attr("y2",BH-38).attr("stroke","#7d8794").attr("stroke-dasharray","4 4"); topPairs.forEach((d,i)=>{ const cy=58+i*36; bsvg.append("line").attr("x1",bx(d.a.balance)).attr("x2",bx(d.b.balance)) .attr("y1",cy).attr("y2",cy).attr("stroke","#c8cdd4").attr("stroke-width",2); for(const e of [d.a,d.b]){ bsvg.append("circle").attr("cx",bx(e.balance)).attr("cy",cy) .attr("r",6).attr("stroke","#303843").attr("fill",balanceColor(e.balance)) .append("title").text(`${e.country}: ${e.balance.toFixed(3)}`); } bsvg.append("text").attr("x",5).attr("y",cy+4).attr("font-size",11) .text(`${d.a.country} ↔ ${d.b.country}`); bsvg.append("text").attr("x",BW-10).attr("y",cy+4) .attr("text-anchor","end").text(`Δ ${d.gap.toFixed(2)}`); }); bsvg.append("g").attr("transform",`translate(0,${BH-31})`) .call(d3.axisBottom(bx).tickValues([-1,-.5,0,.5,1])); if(!topPairs.length) root.append("p").text("No shared-border pairs found. Inspect the geography join audit."); return root.node(); })(); display(visualization2); 42:T6bd,// The same numeric purpose code can appear with several spelling/capitalization variants. // The assignment asks for the five most frequent purposes: rank by RECORD COUNT. const purposeGroups=d3.rollups( aidRows.filter(d=>d.purposeCode || d.purposeName), rows=>({ count:rows.length, amount:d3.sum(rows,d=>d.amount), label:d3.greatest( d3.rollups(rows,v=>v.length,d=>d.purposeName || "Unnamed purpose"), d=>d[1] )?.[0] ?? "Unnamed purpose" }), d=>d.purposeCode || `NO_CODE:${d.purposeName}` ).sort((a,b)=>d3.descending(a[1].count,b[1].count)); const topFivePurposes=purposeGroups.slice(0,5).map(([code,stats],i)=>({ rank:i+1, code, name:stats.label, count:stats.count, amount:stats.amount })); const purposeCodeSet=new Set(topFivePurposes.map(d=>d.code)); const purposeRows=aidRows.filter(d=>purposeCodeSet.has(d.purposeCode || `NO_CODE:${d.purposeName}`)); const purposeByRecipient=d3.rollup(purposeRows,v=>d3.sum(v,d=>d.amount), d=>d.recipient,d=>d.purposeCode || `NO_CODE:${d.purposeName}`); const purposeCountByRecipient=d3.rollup(purposeRows,v=>v.length, d=>d.recipient,d=>d.purposeCode || `NO_CODE:${d.purposeName}`); const getPurposeMoney=(country,code)=>purposeByRecipient.get(country)?.get(code) ?? 0; const getPurposeCount=(country,code)=>purposeCountByRecipient.get(country)?.get(code) ?? 0; const purposeCountries=[...new Set(aidRows.map(d=>d.recipient))].sort(d3.ascending); const topFiveMoneyCountry=country=>d3.sum(topFivePurposes,p=>getPurposeMoney(country,p.code)); const maxPurposeValue=d3.max(topFivePurposes,p=>d3.max(purposeCountries,c=>getPurposeMoney(c,p.code))); display(Inputs.table(topFivePurposes,{ columns:["rank","code","name","count","amount"] })); 43:T1acf,const visualization3=(()=>{ const root=d3.create("div").style("font","13px sans-serif"); root.append("h3").text("Visualization 3 — Where are the five most frequent aid purposes committed?"); const W=1060, pw=515, ph=280, top=82, stepY=350; const H=top+stepY*3+65; const svg=root.append("svg").attr("viewBox",`0 0 ${W} ${H}`) .style("width","100%").style("max-width",`${W}px`); const projection=d3.geoNaturalEarth1().fitExtent([[8,8],[pw-10,ph-12]],aidWorld); const path=d3.geoPath(projection); const color=d3.scaleSequentialLog() .domain([1,Math.max(2,maxPurposeValue)]) .interpolator(d3.interpolateYlGnBu).clamp(true); const pat=svg.append("defs").append("pattern") .attr("id","aid3-missing").attr("patternUnits","userSpaceOnUse") .attr("width",6).attr("height",6).attr("patternTransform","rotate(45)"); pat.append("rect").attr("width",6).attr("height",6).attr("fill","#f1f2f4"); pat.append("path").attr("d","M0,0V6").attr("stroke","#bec5cd"); svg.append("text").attr("x",W/2).attr("y",25).attr("font-size",18) .attr("font-weight","bold").attr("text-anchor","middle") .text("Geographic commitment amounts for the five most frequent purpose codes"); svg.append("text").attr("x",W/2).attr("y",48).attr("text-anchor","middle") .text("Shared log color scale: larger positive commitments = darker blue; hatch = missing country; white = $0"); topFivePurposes.forEach((p,i)=>{ const col=i%2, row=Math.floor(i/2); const g=svg.append("g").attr("transform",`translate(${col*(pw+20)},${top+row*stepY})`); g.append("text").attr("x",pw/2).attr("y",-12).attr("text-anchor","middle") .attr("font-size",13).attr("font-weight","bold") .text(`${i+1}. ${p.name} [${p.code}]`); g.selectAll("path").data(aidWorldFeatures,d=>d.id).join("path") .attr("d",path).attr("fill",f=>{ const country=sourceCountryByAtlas.get(f.properties.name); if(!country) return "url(#aid3-missing)"; const amount=getPurposeMoney(country,p.code); return amount>0 ? color(amount) : amount<0 ? "#CE614E" : "#ffffff"; }).attr("stroke","#9aa4af").attr("stroke-width",.4) .append("title").text(f=>{ const country=sourceCountryByAtlas.get(f.properties.name); return !country ? `${f.properties.name}: not included in sample` : `${country}\n${p.name} (${p.code})\n${fmtMoney(getPurposeMoney(country,p.code))}\n${getPurposeCount(country,p.code)} commitment records`; }); }); const key=svg.append("g").attr("transform",`translate(${pw+35},${top+2*stepY+55})`); key.append("text").attr("font-size",14).attr("font-weight","bold") .text("Common monetary scale for all five maps"); const axis=d3.scaleLog().domain([1,Math.max(2,maxPurposeValue)]).range([0,385]); key.selectAll("rect").data(d3.range(120)).join("rect") .attr("x",i=>i*(385/120)).attr("y",30).attr("width",385/120+1).attr("height",20) .attr("fill",i=>color(axis.invert(i*385/119))); const ticks=[1e3,1e5,1e7,1e9,1e11].filter(v=>v<=maxPurposeValue); key.append("g").attr("transform","translate(0,50)") .call(d3.axisBottom(axis).tickValues(ticks).tickFormat(fmtMoney)); key.append("text").attr("y",96).text("Red denotes a negative net adjustment, if present."); root.append("h4").text("Recipient × purpose heatmap (switch the denominator)"); root.append("span").text("Heatmap values: "); const select=root.append("select").style("margin","8px"); const options=[ {value:"row",label:"Within-recipient mix (rows sum to 100%)"}, {value:"column",label:"Where each purpose goes (columns sum to 100%)"} ]; select.selectAll("option").data(options).join("option") .attr("value",d=>d.value).text(d=>d.label); const countries=purposeCountries.filter(c=>topFiveMoneyCountry(c)>0) .sort((a,b)=>topFiveMoneyCountry(b)-topFiveMoneyCountry(a)); const CW=1080, left=180, topH=106, cellW=143, rowH=24; const CH=topH+countries.length*rowH+55; const hsvg=root.append("svg").attr("viewBox",`0 0 ${CW} ${CH}`) .style("width","100%").style("max-width",`${CW}px`); const hue=d3.scaleSequentialSqrt().domain([0,1]).interpolator(d3.interpolateBlues); const subtitle=hsvg.append("text").attr("x",CW/2).attr("y",30) .attr("text-anchor","middle").attr("font-size",14).attr("font-weight","bold"); topFivePurposes.forEach((p,i)=>hsvg.append("text") .attr("x",left+i*cellW+cellW/2).attr("y",topH-18) .attr("text-anchor","middle").attr("font-size",10) .text(p.name.length>20 ? p.name.slice(0,19)+"…" : p.name) .append("title").text(p.name)); const cells=[]; countries.forEach((country,ri)=>{ const yy=topH+ri*rowH; hsvg.append("text").attr("x",left-9).attr("y",yy+16) .attr("text-anchor","end").attr("font-size",11).text(country); hsvg.append("text").attr("x",left+5*cellW+7).attr("y",yy+16) .attr("font-size",11).text(fmtMoney(topFiveMoneyCountry(country))); topFivePurposes.forEach((p,pi)=>{ const amount=getPurposeMoney(country,p.code); const x=left+pi*cellW+1; const rect=hsvg.append("rect").attr("x",x).attr("y",yy+1) .attr("width",cellW-2).attr("height",rowH-2) .attr("stroke","#d8dee6").attr("stroke-width",.5); const label=hsvg.append("text").attr("x",x+(cellW-2)/2) .attr("y",yy+16).attr("text-anchor","middle") .attr("font-size",10).attr("pointer-events","none"); const tooltip=rect.append("title"); cells.push({country,p,amount,rect,label,tooltip}); }); }); const totalPerPurpose=new Map(topFivePurposes.map(p=>[ p.code, d3.sum(purposeCountries,c=>getPurposeMoney(c,p.code)) ])); function drawHeat(){ const mode=select.property("value"); subtitle.text(mode==="row"?"Share of this recipient's top-five purpose dollars":"Share of this purpose's total dollars across recipients"); for(const cell of cells){ const denom=mode==="row" ? topFiveMoneyCountry(cell.country) : totalPerPurpose.get(cell.p.code); const share=denom>0 ? cell.amount/denom : NaN; cell.rect.attr("fill",cell.amount<0?"#CE614E":cell.amount===0?"#f2f4f6":hue(Math.max(0,Math.min(1,share)))); cell.label.attr("fill",share>.47?"white":"#1e293b") .text(cell.amount>0 && Number.isFinite(share) ? d3.format(".0%")(share) : cell.amount<0 ? "neg." : "—"); cell.tooltip.text(`${cell.country}\n${cell.p.name}\n${fmtMoney(cell.amount)}\n${getPurposeCount(cell.country,cell.p.code)} records\n${Number.isFinite(share)?d3.format(".1%")(share):"n/a"} in selected mode`); } } select.on("change",drawHeat); drawHeat(); const strongest=topFivePurposes.map(p=>{ const winner=d3.greatest(purposeCountries,c=>getPurposeMoney(c,p.code)); return `${p.name}: ${winner} (${fmtMoney(getPurposeMoney(winner,p.code))})`; }); return root.node(); })(); display(visualization3); 44:T439,> ### Sources and limitations > - Source: reduced country-only version of AidData provided for NYU CS-GY 6313: https://docs.google.com/spreadsheets/d/1YiuHdfZv_JZ-igOemKJMRaU8dkucfmHxOP6Od3FraW8/edit > - Geographic shapes: Natural Earth boundaries packaged as World Atlas 50m TopoJSON: https://github.com/topojson/world-atlas > - All data cleaning, aggregation and geographic joins for the submitted figures are implemented in JavaScript cells above. > - **Interpretation:** These are commitments in constant USD, not verified disbursements. The reduced sample does not represent every country or all aid worldwide; values of zero are only within this file. Six donor=recipient records and the source's negative adjustment have been retained and checked. > > ### AI-use disclosure > I used ChatGPT (OpenAI) to assist with writing and reviewing the JavaScript data preparation, D3 visualizations, validation checks, and initial analysis and design explanations for this mini-project. I checked the code and its rendered results against the assignment requirements before submission.45:[{"id":"09040dddbda03374a466600047ccbc70c46e6853884eb725db2141c566ca1b78fb7cc935096e8d5468c21e8df215e73fc49cdaaf7e2f1f89139793da25be02b2","href":"https://static.observableusercontent.com/files/09040dddbda03374a466600047ccbc70c46e6853884eb725db2141c566ca1b78fb7cc935096e8d5468c21e8df215e73fc49cdaaf7e2f1f89139793da25be02b2","name":"aiddata-countries-only - aiddata-countries-only.csv","type":"text/csv","lastModified":1793317453236,"size":8760387}] 38:{"id":"6d6c87cd886ee88f","slug":"mini-project-1-geographic-financial-aid-due-oct-29th","title":"Mini-Project 1: Geographic Financial Aid (Due Oct. 29th)","thumbnail":"e5d5450a89f7a71007862d011da3ed1fc35e3bf962bbc680eb7fe9ddcebdcf27","access_level":"public","create_time":"$D2026-10-29T23:33:58.504Z","update_time":"$D2026-10-30T03:05:00.664Z","view_time":null,"first_public_time":"$D2026-10-30T02:25:04.410Z","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":"bc206b9b8872724f","login":"darsh-shani","name":"Darsh Shani","avatar_url":"https://avatars-next.observableusercontent.com/1ce79dd2cd6bf4e7444b60bab6abaa0ba4815aee224523a0075aebca4c95fcc4","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":310,"publish_version":310,"role":null,"authored":false,"authors":[{"type":"individual","id":"a7f0428c48da7341","login":"darsh-shani","name":"Darsh Shani","avatar_url":"https://avatars-next.observableusercontent.com/1ce79dd2cd6bf4e7444b60bab6abaa0ba4815aee224523a0075aebca4c95fcc4","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"bc206b9b8872724f","login":"darsh-shani","name":"Darsh Shani","avatar_url":"https://avatars-next.observableusercontent.com/1ce79dd2cd6bf4e7444b60bab6abaa0ba4815aee224523a0075aebca4c95fcc4","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":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":"import * as d3 from \"npm:d3@7\";","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"import * as topojson from \"npm:topojson-client@3\";","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"$3e","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"$3f","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"## Visualization 1 — Donors vs. Recipients\n\n**Research Question:** How do countries compare in terms of the financial aid they donate and receive? Are there countries that donate significantly more than they receive, or vice versa?","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"$40","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"### Analysis\n\nThe largest donors in this reduced sample are United States ($116.18B), Japan ($114.18B), Germany ($47.22B). The largest recipients are India ($133.98B), Thailand ($49.04B), Brazil ($36.61B). 12 countries donate at least ten times as much as they receive, while 20 receive at least ten times as much as they donate. Countries above the diagonal donate more than they receive; countries below it receive more than they donate. These rankings apply only to the provided sample.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"### Design Decisions\n\nEqual symlog axes allow direct comparison and keep zero commitments visible. The diagonal marks equal donated/received totals; circle size encodes total volume and color encodes normalized donor/recipient balance. The ranked alternative makes low-volume countries easier to compare, though it does not display raw dollar amounts as directly. Hover for exact amounts.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"## Visualization 2 — Geographic Patterns in Financial Aid\n\n**Research Question:** Do countries that primarily donate or receive financial aid cluster geographically? Are there neighboring countries with significantly different patterns of donating and receiving aid?","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"$41","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"### Analysis\n\nAmong 47 mapped neighboring-country pairs in the reduced sample, 32 (68%) have the same donor-versus-recipient balance sign. This describes local geographic similarity but does not prove a statistically significant geographic cluster. The largest neighboring contrast is Poland versus Germany, with a 2.00-point difference on the −1 to +1 scale. Use the World/Europe toggle to inspect broader patterns.\n","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"### Design Decisions\n\nA diverging choropleth centered at zero shows whether represented countries tend to donate or receive. The Europe zoom helps inspect small countries, while the ranked border comparisons quantify neighbor contrasts. Limitations: country area exaggerates large places, net balance does not show absolute aid volume, and adjacency can include overseas territories.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"$42","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"## Visualization 3 — Geographic Distribution of Aid Purposes\n\n**Research Question:** How are the five most frequent purposes of financial-aid commitments distributed geographically? Are certain recipient countries more concentrated in particular aid purposes than others?","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"$43","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"### Analysis\n\nThe five most frequent purpose codes, ranked by commitment RECORD COUNT, are Sectors not specified (8,140 records); Social/ welfare services (6,407 records); Strengthening civil society (5,805 records); Higher education (5,262 records); Multisector aid (3,028 records). Largest recipient by committed USD within each purpose: Sectors not specified: India ($5.07B); Social/ welfare services: Colombia ($6.45B); Strengthening civil society: South Africa ($771.3M); Higher education: India ($900.7M); Multisector aid: India ($1.96B). These are commitments in a reduced sample, not actual disbursements.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"### Design Decisions\n\n The five maps use one projection and one shared logarithmic dollar scale for comparable geographic magnitudes. The heatmap complements maps where small countries are hard to see. Row mode shows each country's mix across the five purposes; column mode shows the share of each purpose's commitments allocated to different recipients. Hatching separates countries not in the dataset from zero-positive-amount combinations. The maps also suffer from geographic area bias.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"const finalChecks = {\n rawRows: aidRaw.length,\n processedRows: aidRows.length,\n distinctCountries: allCountries.length,\n yearMinMax: d3.extent(aidRows,d=>d.year),\n selfRecords: aidRows.filter(d=>d.donor===d.recipient).length,\n negativeRecords: aidRows.filter(d=>d.amount<0).length,\n missingAmountRecords: aidRaw.filter(d=>!validMoney(d.commitment_amount_usd_constant)).length,\n donorRecipientTotalsMatch: Math.abs(d3.sum(countryStats,d=>d.donated)-d3.sum(countryStats,d=>d.received))<1,\n missingOnMap: unmatchedCountries,\n mapAliasCollisions: aliasCollisions,\n topFivePurposeCodes: topFivePurposes.map(p=>p.code),\n topFivePurposeNames: topFivePurposes.map(p=>p.name),\n allVisualizationsPresent: Boolean(visualization1 && visualization2 && visualization3)\n};\ndisplay(finalChecks);\n","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":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W45","stdlib":"2"}} 33:null