29:null 2a:["$","title",null,{"children":"Mini-Project 3 (Networks) | Arshiya Sayyada | Observable"}] 2f:T855,{ const my_width = 1300; const my_height = 900; const svg = d3.create("svg") .attr("viewBox", [0, 0, my_width, my_height]); const {nodes, links} = sankey({ nodes: graph.nodes.map(d => Object.assign({}, d)), links: graph.links.map(d => Object.assign({}, d)) }); const width_scale = d3.scaleLinear().domain([0,amt_max]).range([0,88]) const color_scale = d3.scaleSequential().domain([0,amt_max]).interpolator(d3.interpolateBuGn) svg.append("g") .selectAll("rect") .data(nodes) .join("rect") .attr("x", d => d.x0) .attr("y", d => d.y0) .attr("height", d => d.y1 - d.y0) .attr("width", d => d.x1 - d.x0) .attr("fill", 'lightgrey') .append("title") .text(d => `${d.name}\n${d.value.toLocaleString()}`); svg.append("g") .attr("fill", "none") .selectAll("g") .data(links) .join("path") .attr("d", d3.sankeyLinkHorizontal()) .attr("stroke", d => color_scale(d.value))//d => color(d.names[0]))//d3.schemeAccent[0]) .attr("stroke-width", d => width_scale(d.value)) .style("mix-blend-mode", "multiply") .append("title") .text(d => `${d.names.join(" → ")}\n${d.value.toLocaleString()}`); svg.append("g") .style("font", "10px sans-serif") .selectAll("text") .data(nodes) .join("text") .attr("x", d => d.x0 < my_width / 2 ? d.x1 -18 : d.x0 +18) .attr("y", d => (d.y1 + d.y0) / 2) .attr("dy", "0.35em") .attr("text-anchor", d => d.x0 < my_width / 2 ? "end" : "start") .text(d => d.name) .append("tspan") .attr("fill-opacity", 0.7) .attr("x", d => d.x0 < my_width / 2 ? d.x1 -100 : d.x0 +80) .attr("text-anchor", d => d.x0 < my_width / 2 ? "end" : "start") //.attr("y", d => ((d.y1 + d.y0) / 2) +15) .text(d => ` ${'(' +d.value.toLocaleString()+')'}`); svg.append('text') .text("Aid Relationship between top 20 donors and top 10 recipients") .attr('x',(my_width/2) - 120) .attr('y',my_height - 60) .attr('font-size', 25) .attr('text-anchor', 'middle') return svg.node(); }30:T780,{ const svg = d3.create("svg") .attr("viewBox", [-width / 2, (-height / 2) +15, width, height]); const color_scale = d3.scaleSequential().domain([0,amt_max]).interpolator(d3.interpolateGreens) const chords = chord(matrix); const group = svg.append("g") .attr("font-size", 5) .attr("font-family", "sans-serif") .selectAll("g") .data(chords.groups) .join("g"); group.append("path") .attr("fill", 'lightgrey') .attr("d", arc); group.append("text") .each(d => (d.angle = (d.startAngle + d.endAngle) / 2)) .attr("dy", "0.35em") //.attr("font-size",) .attr("transform", d => ` rotate(${(d.angle * 180 / Math.PI - 90)}) translate(${outerRadius + 5}) ${d.angle > Math.PI ? "rotate(180)" : ""} `) .attr("text-anchor", d => d.angle > Math.PI ? "end" : null) .text(d => countries[d.index]); group.append("title") .text(d => `${countries[d.index]} ${(d3.sum(chords, c => (c.source.index === d.index) * c.source.value)).toLocaleString()} outgoing → ${(d3.sum(chords, c => (c.target.index === d.index) * c.source.value)).toLocaleString()} incoming ←`); svg.append("g") .attr("fill-opacity", 0.75) .selectAll("path") .data(chords) .join("path") .style("mix-blend-mode", "multiply") .attr("fill", d => color_scale(d.source.value)) .attr("d", ribbon) .append("title") .text(d => `${countries[d.source.index]} → ${countries[d.target.index]} ${d.source.value.toLocaleString()}`); svg.append('text') .text("Aid Relationship Between") .attr('x', 185) .attr('y', -170) .attr('font-size', 10) .attr('text-anchor', 'end') svg.append('text') .text("Top Donors And Recipients") .attr('x', 200) .attr('y', -155) .attr('font-size', 10) .attr('text-anchor', 'end') return svg.node(); }31:Td1a,{ const margin = {top: 80, right: 10, bottom: 40, left: 150}; const visWidth = 500 const visHeight = 500 const svg = d3.create('svg') .attr('width', visWidth + margin.left + margin.right) .attr('height', visHeight + margin.top + margin.bottom); const g = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); // create scales const y = d3.scaleBand() .domain(top_20_donors) .range([0, visHeight]) .paddingInner(1) .padding(0.1); const x = d3.scaleBand() .domain(top_10_recipients) .range([0, visWidth]) .paddingInner(1) .padding(0.05); const color_scale = d3.scaleSequentialSqrt() .domain([amt_max,0]) .interpolator(d3.interpolateViridis) // create and add axes const xAxis = d3.axisTop(x).tickSize(0); g.append("g") .call(xAxis) .call(g => g.selectAll(".domain").remove()) .selectAll("text") .attr("transform", "rotate(45)") .style("text-anchor", "end"); g.append("text") .attr("x", visWidth / 2) .attr("y", -80) .attr("fill", "black") .attr("text-anchor", "middle") .attr("dominant-baseline", "hanging") .text("Recipient Countries"); const yAxis = d3.axisLeft(y).tickSize(0); g.append("g") .call(yAxis) .call(g => g.selectAll(".domain").remove()) g.append("text") .attr("transform", `rotate(270)`) .attr("x", -300) .attr("y", -100) .attr("fill", "black") .attr("dominant-baseline", "middle") .attr("text-anchor", "start") .text("Donor Countries"); // add gray background and white grid const background = g.append('g'); background.append('rect') .attr('width', visWidth -2) .attr('height', visHeight -2) .attr('fill', 'whitesmoke'); const xPaddingSize = x.step() * x.paddingInner(); const yPaddingSize = y.step() * y.paddingInner(); background.selectAll('.vertical') .data(top_10_recipients) .join('line') .attr('class', 'vertical') .attr('x1', d => x(d) - xPaddingSize / 2) .attr('x2', d => x(d) - xPaddingSize / 2) .attr('y1', 0) .attr('y2', visHeight) .attr('stroke-width', xPaddingSize) .attr('stroke', 'white'); background.selectAll('.horizontal') .data(top_20_donors) .join('line') .attr('class', 'horizontal') .attr('y1', d => y(d) - yPaddingSize / 2) .attr('y2', d => y(d) - yPaddingSize / 2) .attr('x1', 0) .attr('x2', visWidth) .attr('stroke-width', yPaddingSize) .attr('stroke', 'white'); g.selectAll('.square') .data(chord_data) .join('rect') .attr('class', 'square') .attr('x', d => x(d.recipient)) .attr('y', d => y(d.donor)) .attr('width', x.bandwidth()) .attr('height', y.bandwidth()) //.attr('stroke', 'lightgrey') .attr('fill', d => color_scale(d.aid_amt)) .append("title") .text(d => `${d.donor} → ${d.recipient} ${d.aid_amt.toLocaleString()}`); svg.append('text') .text("Aid Relationship between top 20 donors and top 10 recipients") .attr('x',380) .attr('y',610) .attr('font-size', 20) .attr('text-anchor', 'middle') return svg.node(); }32:T1909,{ const margin = {top: 200, right: 0, bottom: 0, left: 100}; const visWidth = 1090 - margin.left - margin.right; const visHeight = 700 - margin.top - margin.bottom; const svg = d3.create('svg') .attr('width', visWidth + margin.left + margin.right) .attr('height', visHeight + margin.top + margin.bottom); const g = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); // create scales const x = d3.scaleBand() .domain(top_20_donors) .range([0, visWidth]) .paddingInner(1) .padding(0.05); const y = d3.scaleBand() .domain(top_10_recipients) .range([0, visHeight]) .paddingInner(1) .padding(0.05); const xAxis = d3.axisTop(x).tickSize(0); g.append("g") .call(xAxis) .call(g => g.selectAll(".domain").remove()) .selectAll("text") .attr("transform", "rotate(45)") .style("text-anchor", "end"); g.append("text") .attr("x", (visWidth / 2) + 180) .attr("y", -70) .attr("fill", "black") .attr("text-anchor", "middle") .attr("dominant-baseline", "hanging") .attr("font-family", "sans-serif") .text("Donor Countries"); const yAxis = d3.axisLeft(y).tickSize(0); g.append("g") .call(yAxis) .call(g => g.selectAll(".domain").remove()) g.append("text") .attr("transform", `rotate(270)`) .attr("x", -300) .attr("y", -80) .attr("fill", "black") .attr("dominant-baseline", "middle") .attr("text-anchor", "start") .attr("font-family", "sans-serif") .text("Recipient Countries"); // add gray background and white grid const background = g.append('g'); background.append('rect') .attr('width', visWidth -2) .attr('height', visHeight -2) .attr('fill', 'whitesmoke'); const xPaddingSize = x.step() * x.paddingInner(); const yPaddingSize = y.step() * y.paddingInner(); background.selectAll('.vertical') .data(top_20_donors) .join('line') .attr('class', 'vertical') .attr('x1', d => x(d) - xPaddingSize / 2) .attr('x2', d => x(d) - xPaddingSize / 2) .attr('y1', 0) .attr('y2', visHeight) .attr('stroke-width', xPaddingSize) .attr('stroke', 'white'); background.selectAll('.horizontal') .data(top_10_recipients) .join('line') .attr('class', 'horizontal') .attr('y1', d => y(d) - yPaddingSize / 2) .attr('y2', d => y(d) - yPaddingSize / 2) .attr('x1', 0) .attr('x2', visWidth) .attr('stroke-width', yPaddingSize) .attr('stroke', 'white'); g.append('text') .attr('x', visWidth/2) .attr('y', -150) .attr('font-size', '25px') .attr("text-anchor", "middle") .attr("dominant-baseline", "top") .attr("font-family", "sans-serif") .text("Purpose Based Aid Relationship Between Countries") const pieGroups = g.selectAll('.pieGroup') .data(matrix_pie) .join('g') .attr('class', 'pieGroup') .attr('transform', d => `translate(${x(d.donor) + x.bandwidth()/2},${y(d.recipient) + y.bandwidth()/2})`) .call(g => g.append("title").text(d => `${d.donor} → ${d.recipient} ${toCurrency(d.total)}`)); const hx = (x.bandwidth() / 2) -2 const extent_r = d3.extent(matrix_pie.map(d => d.total)) const r = d3.scaleLinear() .domain(extent_r) .range([hx / 3, hx]) const format = d3.format("($.2s") const circleInfo = [ {x:940, ra:r(extent_r[0]), t: format(extent_r[0])}, {x:970, ra:r((extent_r[0]+extent_r[1])/4), t: format((extent_r[0]+extent_r[1])/4)}, {x:1005, ra:r((extent_r[0]+extent_r[1])/2), t: format((extent_r[0]+extent_r[1])/2)}, {x:1050, ra:r(extent_r[1]), t: format(extent_r[1])} ] const circles = svg.selectAll('circle') .data(circleInfo) .join('g') .call(g => g.append('circle') .attr('fill', 'lightgrey') .attr('cx', d => d.x) .attr('cy', 90) .attr('r', d => d.ra)) circles.selectAll('text') .data(circleInfo) .join('text') .attr('x', d =>d.x) .attr('y', 125) .attr('text-anchor', 'middle') .attr('font-size',10) .attr("font-family", "sans-serif") .text(d => d.t); const pie = d => d3.arc() .innerRadius(0) .outerRadius(r(d.total)) .startAngle(d.pie.startAngle) .endAngle(d.pie.endAngle) const color = d3.scaleOrdinal(d3.schemeTableau10).domain(purposeNames); const pg = pieGroups.selectAll("g") .data(d => d3.pie()(d.values).map(p => ({pie: p, total: d.total}))) .join("g") const slice = pg.append("path") .attr("d", d => pie(d)()) .attr("opacity", 1) .attr("fill", (d, i) => color(purposeNames[i])); const pct = pg.append("text") .attr("text-anchor", "middle") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("fill", "black") .attr("transform", `translate(0,20)`) .attr("opacity", "0") .text(d => (d.pie.value / d.total * 100).toFixed(1) + "%"); svg.append("g").call(drawLegend).attr("transform",`translate(50)`); return svg.node(); var legend; function drawLegend(g) { legend = g.attr("transform", `translate(${width - margin.right},0)`) .selectAll("g") .data(purposeNames) .join("g") .attr("transform", (d, i) => i<3 ? `translate(${(i * 150)},80)`: `translate(${((i-3) * 250)},100)`) .call(g => g.append("rect") .attr("rx", 3).attr("ry", 3) .attr("width", 20).attr("height", 15) .attr("fill", d => color(d))) .call(g => g.append("text") .attr("dx", 25) .attr("dy", 3) .attr("alignment-baseline", "hanging") .attr("font-family", "sans-serif") .attr("font-size", 13) .text(d => d)) .on("mouseover", e => highlight(e)) .on("mouseout", () => highlight()); } function highlight(e) { const i = e ? legend.nodes().indexOf(e.currentTarget) : -1; slice.transition().duration(500).attr("opacity", (d, j) => i === -1 || j === i ? 1 : 0.3); pct.transition().duration(500) .attr("opacity", function(d, j) { if (j === i) { this.parentNode.parentNode.appendChild(this.parentNode); return 1; } else return 0; }); } }33:T16c1,{ const margin = {top: 125, right: 10, bottom: 0, left: 120}; const visWidth = 1100 - margin.left - margin.right; const visHeight = 600 - margin.top - margin.bottom; const svg = d3.create('svg') .attr('width', visWidth + margin.left + margin.right) .attr('height', visHeight + margin.top + margin.bottom); const g = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); // create scales const y = d3.scaleBand() .domain(top_10_recipients) .range([0, visHeight]) .paddingInner(1) .padding(0.1); const x = d3.scaleBand() .domain(top_20_donors) .range([0, visWidth]) //.paddingInner(1) .padding(0.1); const r_scale = d3.scaleSqrt() .domain([aid_extent[0], aid_extent[1]]) .range([4,(x.bandwidth()/2)-2]) const color_scale = d3.scaleSequentialSqrt() .domain([0,aid_extent[1]]) .interpolator(d3.interpolateYlOrRd) const format = d3.format("($.2s") const circleInfo = [ {x:935, ra:r_scale(aid_extent[0]), c:color_scale(aid_extent[0]), t: format(aid_extent[0])}, {x:968, ra:r_scale((aid_extent[0]+aid_extent[1])/16), c:color_scale((aid_extent[0]+aid_extent[1])/16), t: format((aid_extent[0]+aid_extent[1])/16)}, {x:1005, ra:r_scale((aid_extent[0]+aid_extent[1])/4), c:color_scale((aid_extent[0]+aid_extent[1])/4), t: format((aid_extent[0]+aid_extent[1])/4)}, {x:1050, ra:r_scale(aid_extent[1]), c:color_scale(aid_extent[1]), t: format(aid_extent[1])} ] const circles = svg.selectAll('circle') .data(circleInfo) .join('g') .call(g => g.append('circle') .attr('fill', d => d.c) .attr('cx', d => d.x) .attr('cy', 20) .attr('r', d => d.ra)) .attr('stroke', 'lightgrey') circles.selectAll('text') .data(circleInfo) .join('text') .attr('x', d =>d.x) .attr('y', 50) .attr('text-anchor', 'middle') .attr('font-size',10) .attr("font-family", "sans-serif") .attr("stroke", 'black') .attr("stroke-opacity", 0.1) .text(d => d.t); // add gray background and white grid const background = g.append('g'); background.append('rect') .attr('width', visWidth -4) .attr('height', visHeight -4) .attr('fill', 'whitesmoke'); const xPaddingSize = x.step() * x.paddingInner(); const yPaddingSize = y.step() * y.paddingInner(); background.selectAll('.vertical') .data(top_20_donors) .join('line') .attr('class', 'vertical') .attr('x1', d => x(d) - xPaddingSize / 2) .attr('x2', d => x(d) - xPaddingSize / 2) .attr('y1', 0) .attr('y2', visHeight) .attr('stroke-width', xPaddingSize) .attr('stroke', 'white'); background.selectAll('.horizontal') .data(top_10_recipients) .join('line') .attr('class', 'horizontal') .attr('y1', d => y(d) - yPaddingSize / 2) .attr('y2', d => y(d) - yPaddingSize / 2) .attr('x1', 0) .attr('x2', visWidth) .attr('stroke-width', yPaddingSize) .attr('stroke', 'white'); // create and add axes const xAxis = d3.axisTop(x).tickSize(0); g.append("g") .call(xAxis) .call(g => g.selectAll(".domain").remove()) .selectAll("text") .attr("transform", "rotate(45)") .style("text-anchor", "end"); g.append("text") .attr("x", visWidth / 2) .attr("y", -70) .attr("fill", "black") .attr("text-anchor", "middle") .attr("dominant-baseline", "hanging") .attr("font-family", "sans-serif") .text("Donor Countries"); const yAxis = d3.axisLeft(y).tickSize(0); g.append("g") .call(yAxis) .call(g => g.selectAll(".domain").remove()) g.append("text") .attr("transform", `rotate(270)`) .attr("x", -300) .attr("y", -80) .attr("fill", "black") .attr("dominant-baseline", "middle") .attr("text-anchor", "start") .attr("font-family", "sans-serif") .text("Recipient Countries"); g.append('text') .attr('x', visWidth/2) .attr('y', -100) .attr('font-size', '27px') .attr("text-anchor", "middle") .attr("dominant-baseline", "top") .attr("font-family", "sans-serif") .text("Pattern of Donations") g.append('text') .attr('x', 0) .attr('y',-90) .attr('font-size', '25px') .attr("text-anchor", "start") .attr("dominant-baseline", "top") .attr("font-family", "sans-serif") .text("Year : " + year) // draw points g.selectAll('.square') .data(selected_year_data) .join('rect') .attr('class', 'square') .attr('x', d => x(d.donor)) .attr('y', d => y(d.recipient)) .attr('width', x.bandwidth()) .attr('height', y.bandwidth()) .attr('stroke', 'lightgrey') .attr('fill', 'white') .append("title") .text(d => `${d.donor} → ${d.recipient} ${toCurrency(d.aid_amt)}`) // const cells = g.selectAll('.cell') // .data(timed_data) // .join('g') // .attr('class', 'cell') //.attr('transform', d => `translate(${col(d.col)}, ${row(d.row)})`); g.selectAll('.circle') .data(selected_year_data) .join('circle') .attr('transform', d => `translate(${x(d.donor) + x.bandwidth()/2},${y(d.recipient) + y.bandwidth()/2})`) .attr('class', 'circle') .attr('x', d => x(d.donor)) //+ x.bandwidth()/2) .attr('y', d => y(d.recipient)) //+ y.bandwidth()/2) .attr('r', d => r_scale(d.aid_amt)) .attr('stroke', 'lightgrey') .attr('fill', d => color_scale(d.aid_amt)) .append("title") .text(d => `${d.donor} → ${d.recipient} ${toCurrency(d.aid_amt)}`) return svg.node(); }34:T439,graph = { let index = -1; const nodes = []; const nodeByKey = new Map; const indexByKey = new Map; const links = []; for (const k of keys) { for (const d of chord_data) { const key = JSON.stringify([k, d[k]]); if (nodeByKey.has(key)) continue; const node = {name: d[k]}; nodes.push(node); nodeByKey.set(key, node); indexByKey.set(key, ++index); } } for (let i = 1; i < keys.length; ++i) { const a = keys[i - 1]; const b = keys[i]; const prefix = keys.slice(0, i + 1); const linkByKey = new Map; for (const d of chord_data) { const names = prefix.map(k => d[k]); const key = JSON.stringify(names); const value = d.aid_amt || 1; let link = linkByKey.get(key); if (link) { link.aid_amt += value; continue; } link = { source: indexByKey.get(JSON.stringify([a, d[a]])), target: indexByKey.get(JSON.stringify([b, d[b]])), names, value }; links.push(link); linkByKey.set(key, link); } } return {nodes, links}; }35:T5e9,matrix_data = { const filteredData = aiddata.filter(d => (top_10_recipients.includes(d.recipient)) && (top_20_donors.includes(d.donor)) && (topPurposesCodes.includes(d.coalesced_purpose_code))) const grouped = d3.rollup(filteredData, arr => d3.sum(arr, d => d.commitment_amount), d => d.donor, d => d.recipient, d => d.coalesced_purpose_code); const arrayForm = Array.from(grouped, ([donor, mapping]) => ({ //donor : donor, recipient_arr : Array.from(mapping, (([recipient, map]) => { map.set('donor', donor) map.set('recipient', recipient) map.set('total', d3.sum(map.values())); return Object.fromEntries(map) })) })); const final = [] for(var i=0; i ({ donor: d.donor, recipient: d.recipient, total: d.total, purpose_data: topPurposesCodes.map(b => ({purpose: b, amount: d[b]})) })) // const temp = arrayForm.map(d => d.recipient_arr); // const final = Array.from(arrayForm) return final_data }36:T5c4,timed_data = { const filteredData = aiddata.filter(d => (top_10_recipients.includes(d.recipient)) && (top_20_donors.includes(d.donor))) const grouped = d3.rollup(filteredData, arr => d3.sum(arr, d => d.commitment_amount), d => d.yearInt, d => d.donor, d => d.recipient) const arrayForm = Array.from(grouped, ([year, mapping]) => ({ year: year, data_arr: Array.from(mapping, ([donor, r_arr])=> ({ donor: donor, recipient_arr: Array.from(r_arr, ([recipient, aid_amt]) => ({recipient, aid_amt})).sort((a,b) => d3.descending(a.aid_amt,b.aid_amt)) })) })).sort((a,b)=>d3.ascending(a.year,b.year)) const final = [] for(var i=0; i d.year) return Array.from(temp, ([year, data]) => ({year, data})) }37:[{"id":"55260abbc777c0a3b8fed19f3929dd822fef9d5118b53b76b2176d20782910e599eac919999ea8ee85a60b783fd37082574f6591fd46c0d70ddf9b00df71ce27","href":"https://static.observableusercontent.com/files/55260abbc777c0a3b8fed19f3929dd822fef9d5118b53b76b2176d20782910e599eac919999ea8ee85a60b783fd37082574f6591fd46c0d70ddf9b00df71ce27","name":"countries-50m.json","type":"application/json","lastModified":1607341143219.303,"size":4177662}] 2d:{"id":"6377a80986d614d8","slug":"mini-project-3-networks","title":"Mini-Project 3 (Networks)","thumbnail":"5b6e3343a48c5c877d3ba35a5f5702ded7c3761b7978371d8699eecf2b87b42e","access_level":"public","create_time":"$D2020-12-07T11:39:03.219Z","update_time":"$D2020-12-14T14:03:21.984Z","view_time":null,"first_public_time":"$D2021-01-15T01:46:43.030Z","has_unpublished_edits":null,"fork":{"id":"b6d5dee427fe288b","slug":"mini-projects","title":"Mini-Project 1 (Geo)","owner":{"id":"c5bcb913b5b2fffd","login":"nyuvis","name":"EBVL"}},"stars":0,"starred":false,"owner":{"type":"team","id":"7c4ea0d376011f1d","login":"arshiyasayyada","name":"Arshiya Sayyada","avatar_url":"https://avatars-next.observableusercontent.com/07b7eec5431a5b8671dc627f979895e7464e30aa567d52245b59d32604c3c089","tier":"starter_2024"},"version":1714,"publish_version":1714,"role":null,"authored":false,"authors":[{"type":"individual","id":"65082206403c20a7","login":"arshiyasayyada","name":"Arshiya Sayyada","avatar_url":"https://avatars-next.observableusercontent.com/07b7eec5431a5b8671dc627f979895e7464e30aa567d52245b59d32604c3c089","tier":null}],"members":[{"type":"individual","id":"65082206403c20a7","login":"arshiyasayyada","name":"Arshiya Sayyada","avatar_url":"https://avatars-next.observableusercontent.com/07b7eec5431a5b8671dc627f979895e7464e30aa567d52245b59d32604c3c089","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Mini-Project 3 (Networks)","cells":[{"id":21,"value":"md`# Mini-Project 3 (Networks)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"md`----------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"md`## Visualization 1: \n- Create an overview of the relationships between countries so that it is possible to see who donates to whom and how much. \n- The main question one should be able to answer is: who are the major donors and to which countries do they donate the most and how much? And conversely, who are the major receivers and which countries do they receive from the most and how much? \n- We only care about the top 10 recipients and the top 20 donors (over the whole time) for this question.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1665,"value":"md`--------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1668,"value":"md`#### Thought Process:\n\nFor this visualization I have created three diagrams which all have their own pros and cons`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"md`-----------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":583,"value":"md`### Option 1:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":899,"value":"legend({\n color: d3.scaleSequential([0,amt_max],d3.interpolateBuGn),\n title: \"Amount Donated\",\n tickFormat: d3.format(\"($.2s\")\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1671,"value":"md`The first one is a tranditional Snakey Diagram. I've used both width and color to encode aid amount value and to reduce clutter. Hovering the mouse for 5 secs on the country bars shows the total amount that country donates or receives (depending on which side of the diagram it falls). Similarly hovering the mouse over the ribbons flowing between the sides will show the amount being transferred from one country to another for each country combination. Countries in this diagram are sorted alphabetically. \n\n#### Pros: \n- Intuitively our eyes go from left to right so by positioning donors on the left and recipients on the right we can use this intuitiveness to convey information about the flow of money.\n\n#### Cons:\n- Some countries are repeated on both donor and recipient lists. For these it's not easy to see both their overall aid trends`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"md`----------------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":586,"value":"md`### Option 2:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":975,"value":"legend({\n color: d3.scaleSequential([0,amt_max],d3.interpolateGreens),\n title: \"Amount Donated\",\n tickFormat: d3.format(\"($.2s\")\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1674,"value":"md`To overcome the cons of the snakey diagram, I tried out encoding the same information into a chord diagram. To indicate directionality I've used ribbons with an arrow at the end. Similar to the snakey diagram, both width and color are used to encode amount information. Hovering over the country bands shows the outgoing and incoming aid amount, whereas hovering over the ribbons shows the countries involved in the transaction and the amount sent. Countries are sorted alphabetically as this made the information appear clear and not cluttered.\n\n#### Pros:\n- Can see total country trends\n- Flow of aid money is preserved with directional arrows\n\n#### Cons:\n- The thinnest bands are not as clear and efforts to make them clear cluttered the diagram\n- Not the most intuitive for most people`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":679,"value":"md`----------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":680,"value":"md`### Option 3:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1141,"value":"legend({\n color: d3.scaleSequentialSqrt([amt_max,0], d3.interpolateViridis),\n title: \"Amount Donated (Sqrt Sclae)\",\n tickFormat: d3.format(\"($.2s\")\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":683,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1691,"value":"md`This led me to the third and the safest option, a matrix. Here I've used multi hue color scale to show the trends in aid amount exchanged between countries. Since color is the only channel used to encode this information in this diagram, I had to use a sqrt scale to show wider trends. Hovering over each cell shows the countries involved in the transcation, the flow of the transaction and the amount exchanged.\n\n#### Pros:\n- Intuitive, simple\n\n#### Cons:\n- The flow of aid money isn't as intuitive as the previous diagrams`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"md`---------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"md`## Visualization 2: \n- Considering only the top 5 purposes of donation, how does the relationship between countries look like in terms of purposes? \n- What composition (distribution) of purposes do the donations between each pair of countries have? \n- Are there countries that donate to a given country using multiple purposes? Or do counties always donate using one single purpose when donating to another country? \n- The same as the previous question, we only care about the top 10 recipients and the top 20 donors here.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1316,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1694,"value":"md`To show the distribution of aid for top 5 purposes between different countries, I've decided to use a matrix with pie charts. The size of the pie chart indicates the amount of aid money exchanged in total. The lower limit of the scale is set so that each pie chart is comfortably visible. A legend is included on the top right corner. Hovering on the pie charts for 5 secs displays the countries involved in the transcation and the total amount exchanged. The top 5 purposes are listed in a legend on the top left corner. Hovering on the legend categories in the legend, highlists the corresponding slice of the pie chart in all the charts so that we can see the trends for that particular purpose. The matrix is sorted in descending order on both axis. I've used these interactions to make information more accesible with respect to my design choice.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"md`--------------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"md`## [OPTIONAL] Visualization 3: \n- For this last exercise you have to extend the analysis above to see how the patterns of donations change over time. \n- Focusing again on the top 10 recipients and top 20 donors how do the patterns of donations (who donates to whom and how much) change over time? Are there sudden changes? \n- Are there countries that always donate to other countries? \n- Are there major shifts (say a country used to donate to a specific set of countries and then it changes to other countries)?\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":753,"value":"delay = 700","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":724,"value":"//viewof year = html``\nviewof year = Scrubber(timed_data.map(d =>d.year), {delay, loop: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":617,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1697,"value":"md`To show the pattern of donations I took inspiration from my visualization for the second question. Instead of pie charts of varying sizes, I now could just use varying size circles. Size and color of the circle are used to encode aid amount. The scale used is a sqrt scale to make the trends more apparant. A legend is included on the top right hand corner. The information for each year can be accessed by moving the slider for year. When stopped at a year, hovering over each cell, displays the countries involved in the transaction and the amount exchanged that year. To see a snapshot of trends over the years, we can also press the play button to go through the years automatically. To change the pace of the animation, you can change the value of the \"delay\" variable on top of the slider. Since the matrix rows and columns are sorted in descending order, changes in trends are most likely to pop up on the left hand side of the matrix.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"md`----------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"md`## Preprocessing:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"md`### General`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"top_20_donors = {\n const groupedByDonor = d3.rollup(aiddata, \n arr => d3.sum(arr, d => d.commitment_amount),\n d => d.donor);\n \n const countryWithDonationAmt = Array.from(groupedByDonor, ([country, donation_amt]) => ({country, donation_amt}));\n \n return countryWithDonationAmt.sort((a,b) => d3.descending(a.donation_amt, b.donation_amt))\n .slice(0,20)\n .map(d => d.country)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"top_10_recipients = {\n const groupedByRecipient = d3.rollup(aiddata, \n arr => d3.sum(arr, d => d.commitment_amount),\n d => d.recipient);\n \n const countryWithReceivedAmt = Array.from(groupedByRecipient, ([country, received_amt]) => ({country, received_amt}));\n \n return countryWithReceivedAmt.sort((a,b) => d3.descending(a.received_amt, b.received_amt))\n .slice(0,10)\n .map(d => d.country)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"codeToPurpose ={\n \n //create set of distinct inspectionID values\n const distinctIDs = new Set();\n aiddata.forEach(d => {\n distinctIDs.add(d.coalesced_purpose_code)\n });\n \n //using the distinct inspectionIDs set filter the data to remove multiple instances of the same inspectionIDs\n let tempData = aiddata.filter(d => {\n if(distinctIDs.has(d.coalesced_purpose_code)) {\n distinctIDs.delete(d.coalesced_purpose_code)\n return d;\n } })\n \n const final = Object.fromEntries(new Map(tempData.map(d => [d.coalesced_purpose_code, d.coalesced_purpose_name])))\n \n return final \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1317,"value":"toCurrency = num => d3.format(\"$,.2f\")(num)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"md`### Viz 1`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"chord_data = {\n const filteredData = aiddata.filter(d => (top_10_recipients.includes(d.recipient)) && (top_20_donors.includes(d.donor)))\n \n const grouped = d3.rollup(filteredData, \n arr => d3.sum(arr, d => d.commitment_amount),\n d => d.donor,\n d => d.recipient)\n \n const arrayForm = Array.from(grouped, ([donor, mapping]) => ({\n donor: donor,\n recipient_arr: Array.from(mapping, ([recipient, aid_amt])=>({recipient, aid_amt})).sort((a,b) => d3.descending(a.aid_amt,b.aid_amt))\n })).sort((a,b)=>d3.ascending(a.donor,b.donor))\n \n const final = []\n for(var i=0; i d.aid_amt)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"countries = Array.from(new Set(chord_data.flatMap(d => [d.donor, d.recipient]))).sort(d3.descending)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"matrix = {\n const index = new Map(countries.map((name, i) => [name, i]));\n const matrix = Array.from(index, () => new Array(countries.length).fill(0));\n for (const {donor, recipient, aid_amt} of chord_data) matrix[index.get(donor)][index.get(recipient)] += aid_amt;\n return matrix;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"chord = d3.chordDirected()\n .padAngle(5 / innerRadius)\n .sortSubgroups(d3.descending)\n .sortChords(d3.descending)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":952,"value":"chord(matrix)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"arc = d3.arc()\n .innerRadius(innerRadius)\n .outerRadius(outerRadius)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"ribbon = d3.ribbonArrow()\n .radius(innerRadius - 1)\n .padAngle(1 / innerRadius)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"formatValue = x => `${x.toFixed(0)}B`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"outerRadius = innerRadius + 5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"innerRadius = Math.min(width, height) * 0.5 - 60","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"height = width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"sankey = d3.sankey()\n .nodeSort(d3.ascending)\n .linkSort(null)\n .nodeWidth(15)\n .nodePadding(10)\n .extent([[170, 10], [900, 800]])\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":414,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"keys = [\"donor\",\"recipient\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"width = 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"md`### Viz 2`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1336,"value":"matrix_pie = {\n \n const temp = matrix_data;\n for(var i=0; i d.total)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"color = d3.scaleOrdinal()\n .domain(topPurposesCodes)\n .range(d3.schemeTableau10);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"topPurposesWithAmount = {\n const purposesMap = d3.rollup(aiddata,\n p => d3.sum(p, d=> d.commitment_amount),\n d => d.coalesced_purpose_code);\n const purposesArray = Array.from(purposesMap, ([purpose_code, total_amt]) => ({purpose_code, total_amt}));\n \n const topFive = purposesArray.slice()\n .sort((a,b) => d3.descending(a.total_amt,b.total_amt))\n .slice(0,5);\n return topFive\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"topPurposesCodes ={\n\n const temp = []\n \n for(let i=0; i codeToPurpose[d])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"md`### Viz 3`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":694,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":731,"value":"aid_extent = [d3.min(timed_data, d => d3.min(d.data, e => e.aid_amt)), d3.max(timed_data, d => d3.max(d.data, e => e.aid_amt))]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":723,"value":"selected_year_data = {\n const output = [];\n \n for(var i=0; i ({\n yearDate: d3.timeParse('%Y')(row.year),\n yearInt: +row.year,\n aiddata_id: row.aiddata_id,\n aiddata_2_id: row.aiddata_2_id,\n donor: row.donor,\n recipient: row.recipient,\n commitment_amount: +row.commitment_amount_usd_constant,\n coalesced_purpose_code: row.coalesced_purpose_code,\n coalesced_purpose_name: row.coalesced_purpose_name,\n})))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"geoJSON = FileAttachment(\"countries-50m.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"d3 = require('d3@6', \"d3-sankey@0.12\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"googleSheetCsvUrl = 'https://docs.google.com/spreadsheets/d/1YiuHdfZv_JZ-igOemKJMRaU8dkucfmHxOP6Od3FraW8/gviz/tq?tqx=out:csv'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":747,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"import {legend, swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 2e:"$2d:body"