25:["$","title",null,{"children":"Mini Project 3 | Prajwala Srivatsa | Observable"}] 49:T757,chart1 = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); var sankey3 = d3 .sankey() .nodeWidth(15) .nodeId(d => d.name) .nodePadding(10) .extent([[1, 1], [width - 1, height - 6]]); const { nodes, links } = sankey1(data1); svg .append("g") .attr("stroke", "#000") .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", color) .append("title") .text(d => `${d.name}\n${format(d.value)}`); const link = svg .append("g") .attr("fill", "none") .attr("stroke-opacity", 0.5) .selectAll("g") .data(links) .join("g") .style("mix-blend-mode", "multiply"); const gradient = link .append("linearGradient") .attr("id", d => (d.uid = DOM.uid("link")).id) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", d => d.source.x1) .attr("x2", d => d.target.x0); gradient .append("stop") .attr("offset", "0%") .attr("stop-color", d => color(d.source)); gradient .append("stop") .attr("offset", "100%") .attr("stop-color", d => color(d.target)); link .append("path") .attr("d", d3.sankeyLinkHorizontal()) .attr("stroke", d => d.uid) .attr("stroke-width", d => Math.max(1, d.width)); link .append("title") .text(d => `${d.source.name} → ${d.target.name}\n${format(d.value)}`); svg .append("g") .attr("font-family", "sans-serif") .attr("font-size", 10) .selectAll("text") .data(nodes) .join("text") .attr("x", d => (d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6)) .attr("y", d => (d.y1 + d.y0) / 2) .attr("dy", "0.35em") .attr("text-anchor", d => (d.x0 < width / 2 ? "start" : "end")) .text(d => d.name); return svg.node(); }4a:T4ee,top5purposeData = { let purposeData = {}; const allPurposeData = aiddata.reduce(function(acc, obj) { let key = obj['coalesced_purpose_code']; if (!purposeData[key]) { purposeData[key] = { purposeCode: +obj.coalesced_purpose_code, name: obj.coalesced_purpose_name, commitment_amount: 0 }; acc.push(purposeData[key]); } purposeData[key]["commitment_amount"] += +obj.commitment_amount; return acc; }, []); const top5PurposesData = allPurposeData .slice() .sort((a, b) => d3.descending(a.commitment_amount, b.commitment_amount)) .slice(0, 5); const top5PurposeCodes = top5PurposesData.map(d => d.purposeCode); const top5PurposeNames = top5PurposesData.map(d => d.name); // let colors = ["#80b1d3", "#b3de69", "#fb8072", "#ffed6f", "#9c755f"] // let colors = ["lightblue", "green", "red", "#ffa600", "brown"] let colors = ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#8c564b"]; let top5PurposesDataObj = {}; top5PurposesData.forEach(function(onePurposeData, index) { top5PurposesDataObj[onePurposeData.purposeCode] = { ...onePurposeData, ...{ color: colors[index] } }; }); return [top5PurposesDataObj, top5PurposeCodes, top5PurposeNames]; }4b:T699,donor_recipient_purposedata = { const top5purposeCodes = top5purposeData[1]; let donor_recipient_purpose = {}; const donor_recipient_purpose_data = aiddata.reduce(function(acc, obj) { if (top5purposeCodes.includes(+obj.coalesced_purpose_code)) { let key = obj.donor + '-' + obj.recipient + '-' + obj.coalesced_purpose_code; if (!donor_recipient_purpose[key]) { donor_recipient_purpose[key] = Object.assign( {}, { donor: obj.donor, recipient: obj.recipient, purpose: +obj.coalesced_purpose_code, totalAmount: +obj.commitment_amount } ); acc.push(donor_recipient_purpose[key]); } else { donor_recipient_purpose[key]["totalAmount"] += +obj.commitment_amount; } } return acc; }, []); let donor_recipient = {}; const donor_recipient_data = donor_recipient_purpose_data.reduce(function( acc, obj ) { let key = obj.donor + '-' + obj.recipient; let purpose_code = obj.purpose; let purpose_amt = obj.totalAmount; let obj_pur = {}; obj_pur["purpose_code"] = purpose_code; obj_pur["purpose_amt"] = purpose_amt; if (!donor_recipient[key]) { donor_recipient[key] = Object.assign( {}, { donor: obj.donor, recipient: obj.recipient, purpose: [obj_pur], totalAmount: obj.totalAmount } ); acc.push(donor_recipient[key]); } else { donor_recipient[key]["purpose"].push(obj_pur); donor_recipient[key]["totalAmount"] += +obj.totalAmount; } return acc; }, []); return donor_recipient_data; }4c:T478,viz2_data = { // Countries with their total donations const donationsRec = groupByType(donor_recipient_purposedata, 'donor'); // Countries with their total receivings const receivingRec = groupByType(donor_recipient_purposedata, 'recipient'); const top20Donations = donationsRec .sort((a, b) => d3.descending(a.amount, b.amount)) .slice(0, 20); const top20donationCountries = d3.map(top20Donations, d => d.node); const top10Receivings = receivingRec .sort((a, b) => d3.descending(a.amount, b.amount)) .slice(0, 10); const top10ReceivingsCountry = d3.map(top10Receivings, d => d.node); const max = d3.max(donor_recipient_purposedata, d => d.totalAmount); const min = d3.min(donor_recipient_purposedata, d => d.totalAmount); const donor_recipient_purposedata_top_countries = donor_recipient_purposedata.filter( d => top20donationCountries.includes(d.donor) && top10ReceivingsCountry.includes(d.recipient) ); return [ donor_recipient_purposedata_top_countries, top20Donations, top20donationCountries, top10Receivings, top10ReceivingsCountry, min, max ]; }4d:Tf61,{ let [ donor_recipient_purposedata, top20Donations, top20donationCountries, top10Receivings, top10ReceivingsCountry, min, max ] = viz2_data; const margin = { top: 120, right: 0, bottom: 120, left: 140 }, width = 950 - margin.left - margin.right, height = 1350 - margin.top - margin.bottom; const svg = d3 .create('svg') .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom); const g = svg .append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); let xScale = d3 .scalePoint() .domain(top10ReceivingsCountry) .range([width, 0]) .padding(0.5); let yScale = d3 .scalePoint() .domain(top20donationCountries) .range([0, height]) .padding(0.5); let rScale = d3 .scalePow() .exponent(0.5) .domain([min, max]) .range([15, 30]); top20donationCountries.forEach(country => { g.append("line") .style("stroke", "#e4e4e4") .style("stroke-dasharray", "3, 3") .attr("y1", yScale(country)) .attr("y2", yScale(country)) .attr("x1", 0) .attr("x2", width); }); top10ReceivingsCountry.forEach(country => { g.append("line") .style("stroke", "#e4e4e4") .style("stroke-dasharray", "3, 3") .attr("y1", height) .attr("y2", 0) .attr("x1", xScale(country)) .attr("x2", xScale(country)); }); let yAxis = d3.axisLeft(yScale); g.append("g") .attr("class", "y axis") .style("font-size", "15px") .call(yAxis); g.append("text") .attr("transform", "rotate(-90)") .attr("y", 0 - margin.left) .attr("x", 0 - height / 2) .attr("dy", "1em") .style("text-anchor", "middle") .style("font-size", "20px") .text("------- Top 20 Donors ----->"); let xAxis = d3.axisBottom(xScale); let xAxisTop = d3.axisTop(xScale); g.append("g") .attr("class", "x axis") .attr("transform", `translate(0, ${height})`) .style("font-size", "15px") .call(xAxis) .selectAll("text") .style("text-anchor", "end") .attr("dx", "-.8em") .attr("dy", ".15em") .attr("transform", "rotate(-45)"); g.append("g") .attr("class", "x axis") .attr("transform", `translate(0, 0)`) .style("font-size", "15px") .call(xAxisTop) .selectAll("text") .style("text-anchor", "start") .attr("dx", ".8em") .attr("dy", ".15em") .attr("transform", "rotate(-45)"); // text label for the x axis g.append("text") .attr( "transform", `translate(${width / 2}, ${height + margin.bottom - 30})` ) .style("text-anchor", "middle") .style("font-size", "20px") .text("------- Top 10 Recipients ----->"); g.append("text") .attr("transform", `translate(${width / 2}, ${-margin.top + 30})`) .style("text-anchor", "middle") .style("font-size", "20px") .text("------- Top 10 Recipients ----->"); let arc = d3 .arc() .innerRadius(0) .outerRadius(d => rScale(d.data.totalAmount)); let points = g .selectAll(".points") .data(donor_recipient_purposedata) .enter() .append("g") .attr("transform", function(d) { return "translate(" + [xScale(d.recipient), yScale(d.donor)] + ")"; }); // .attr("class", "pies"); // return points let pie = d3.pie().value(function(d) { return d.piValue; }); let pies = points .selectAll(".pies") .data(function(d) { let piData = []; d["purpose"].forEach(purpose => { let newObj = { purpose: top5purposeData[0][purpose.purpose_code], piValue: purpose.purpose_amt }; piData.push({ ...d, ...newObj }); }); return pie(piData); }) .enter() .append('g'); pies .append("path") .attr('d', arc) .style("opacity", 0.8) .attr("fill", (d, i) => d.data.purpose.color); return svg.node(); }4e:T756,chart = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); var sankey3 = d3 .sankey() .nodeWidth(15) .nodeId(d => d.name) .nodePadding(10) .extent([[1, 1], [width - 1, height - 6]]); const { nodes, links } = sankey1(data2); svg .append("g") .attr("stroke", "#000") .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", color) .append("title") .text(d => `${d.name}\n${format(d.value)}`); const link = svg .append("g") .attr("fill", "none") .attr("stroke-opacity", 0.5) .selectAll("g") .data(links) .join("g") .style("mix-blend-mode", "multiply"); const gradient = link .append("linearGradient") .attr("id", d => (d.uid = DOM.uid("link")).id) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", d => d.source.x1) .attr("x2", d => d.target.x0); gradient .append("stop") .attr("offset", "0%") .attr("stop-color", d => color(d.source)); gradient .append("stop") .attr("offset", "100%") .attr("stop-color", d => color(d.target)); link .append("path") .attr("d", d3.sankeyLinkHorizontal()) .attr("stroke", d => d.uid) .attr("stroke-width", d => Math.max(1, d.width)); link .append("title") .text(d => `${d.source.name} → ${d.target.name}\n${format(d.value)}`); svg .append("g") .attr("font-family", "sans-serif") .attr("font-size", 10) .selectAll("text") .data(nodes) .join("text") .attr("x", d => (d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6)) .attr("y", d => (d.y1 + d.y0) / 2) .attr("dy", "0.35em") .attr("text-anchor", d => (d.x0 < width / 2 ? "start" : "end")) .text(d => d.name); return svg.node(); }4f:T760,chart3a = { const svg = d3.create("svg").attr("viewBox", [0, 0, width3, height3]); var sankey3 = d3 .sankey() .nodeWidth(15) .nodeId(d => d.name) .nodePadding(10) .extent([[1, 1], [width3 - 1, height3 - 6]]); const { nodes, links } = sankey1(data_70); svg .append("g") .attr("stroke", "#000") .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", color) .append("title") .text(d => `${d.name}\n${format(d.value)}`); const link = svg .append("g") .attr("fill", "none") .attr("stroke-opacity", 0.5) .selectAll("g") .data(links) .join("g") .style("mix-blend-mode", "multiply"); const gradient = link .append("linearGradient") .attr("id", d => (d.uid = DOM.uid("link")).id) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", d => d.source.x1) .attr("x2", d => d.target.x0); gradient .append("stop") .attr("offset", "0%") .attr("stop-color", d => color(d.source)); gradient .append("stop") .attr("offset", "100%") .attr("stop-color", d => color(d.target)); link .append("path") .attr("d", d3.sankeyLinkHorizontal()) .attr("stroke", d => d.uid) .attr("stroke-width", d => Math.max(1, d.width)); link .append("title") .text(d => `${d.source.name} → ${d.target.name}\n${format(d.value)}`); svg .append("g") .attr("font-family", "sans-serif") .attr("font-size", 10) .selectAll("text") .data(nodes) .join("text") .attr("x", d => (d.x0 < width3 / 2 ? d.x1 + 6 : d.x0 - 6)) .attr("y", d => (d.y1 + d.y0) / 2) .attr("dy", "0.35em") .attr("text-anchor", d => (d.x0 < width3 / 2 ? "start" : "end")) .text(d => d.name); return svg.node(); }50:T760,chart3b = { const svg = d3.create("svg").attr("viewBox", [0, 0, width3, height3]); var sankey3 = d3 .sankey() .nodeWidth(15) .nodeId(d => d.name) .nodePadding(10) .extent([[1, 1], [width3 - 1, height3 - 6]]); const { nodes, links } = sankey1(data_80); svg .append("g") .attr("stroke", "#000") .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", color) .append("title") .text(d => `${d.name}\n${format(d.value)}`); const link = svg .append("g") .attr("fill", "none") .attr("stroke-opacity", 0.5) .selectAll("g") .data(links) .join("g") .style("mix-blend-mode", "multiply"); const gradient = link .append("linearGradient") .attr("id", d => (d.uid = DOM.uid("link")).id) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", d => d.source.x1) .attr("x2", d => d.target.x0); gradient .append("stop") .attr("offset", "0%") .attr("stop-color", d => color(d.source)); gradient .append("stop") .attr("offset", "100%") .attr("stop-color", d => color(d.target)); link .append("path") .attr("d", d3.sankeyLinkHorizontal()) .attr("stroke", d => d.uid) .attr("stroke-width", d => Math.max(1, d.width)); link .append("title") .text(d => `${d.source.name} → ${d.target.name}\n${format(d.value)}`); svg .append("g") .attr("font-family", "sans-serif") .attr("font-size", 10) .selectAll("text") .data(nodes) .join("text") .attr("x", d => (d.x0 < width3 / 2 ? d.x1 + 6 : d.x0 - 6)) .attr("y", d => (d.y1 + d.y0) / 2) .attr("dy", "0.35em") .attr("text-anchor", d => (d.x0 < width3 / 2 ? "start" : "end")) .text(d => d.name); return svg.node(); }51:T760,chart3c = { const svg = d3.create("svg").attr("viewBox", [0, 0, width3, height3]); var sankey3 = d3 .sankey() .nodeWidth(15) .nodeId(d => d.name) .nodePadding(10) .extent([[1, 1], [width3 - 1, height3 - 6]]); const { nodes, links } = sankey1(data_90); svg .append("g") .attr("stroke", "#000") .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", color) .append("title") .text(d => `${d.name}\n${format(d.value)}`); const link = svg .append("g") .attr("fill", "none") .attr("stroke-opacity", 0.5) .selectAll("g") .data(links) .join("g") .style("mix-blend-mode", "multiply"); const gradient = link .append("linearGradient") .attr("id", d => (d.uid = DOM.uid("link")).id) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", d => d.source.x1) .attr("x2", d => d.target.x0); gradient .append("stop") .attr("offset", "0%") .attr("stop-color", d => color(d.source)); gradient .append("stop") .attr("offset", "100%") .attr("stop-color", d => color(d.target)); link .append("path") .attr("d", d3.sankeyLinkHorizontal()) .attr("stroke", d => d.uid) .attr("stroke-width", d => Math.max(1, d.width)); link .append("title") .text(d => `${d.source.name} → ${d.target.name}\n${format(d.value)}`); svg .append("g") .attr("font-family", "sans-serif") .attr("font-size", 10) .selectAll("text") .data(nodes) .join("text") .attr("x", d => (d.x0 < width3 / 2 ? d.x1 + 6 : d.x0 - 6)) .attr("y", d => (d.y1 + d.y0) / 2) .attr("dy", "0.35em") .attr("text-anchor", d => (d.x0 < width3 / 2 ? "start" : "end")) .text(d => d.name); return svg.node(); }52:T762,chart3d = { const svg = d3.create("svg").attr("viewBox", [0, 0, width3, height3]); var sankey3 = d3 .sankey() .nodeWidth(15) .nodeId(d => d.name) .nodePadding(10) .extent([[1, 1], [width3 - 1, height3 - 6]]); const { nodes, links } = sankey1(data_2000); svg .append("g") .attr("stroke", "#000") .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", color) .append("title") .text(d => `${d.name}\n${format(d.value)}`); const link = svg .append("g") .attr("fill", "none") .attr("stroke-opacity", 0.5) .selectAll("g") .data(links) .join("g") .style("mix-blend-mode", "multiply"); const gradient = link .append("linearGradient") .attr("id", d => (d.uid = DOM.uid("link")).id) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", d => d.source.x1) .attr("x2", d => d.target.x0); gradient .append("stop") .attr("offset", "0%") .attr("stop-color", d => color(d.source)); gradient .append("stop") .attr("offset", "100%") .attr("stop-color", d => color(d.target)); link .append("path") .attr("d", d3.sankeyLinkHorizontal()) .attr("stroke", d => d.uid) .attr("stroke-width", d => Math.max(1, d.width)); link .append("title") .text(d => `${d.source.name} → ${d.target.name}\n${format(d.value)}`); svg .append("g") .attr("font-family", "sans-serif") .attr("font-size", 10) .selectAll("text") .data(nodes) .join("text") .attr("x", d => (d.x0 < width3 / 2 ? d.x1 + 6 : d.x0 - 6)) .attr("y", d => (d.y1 + d.y0) / 2) .attr("dy", "0.35em") .attr("text-anchor", d => (d.x0 < width3 / 2 ? "start" : "end")) .text(d => d.name); return svg.node(); }53:T762,chart3e = { const svg = d3.create("svg").attr("viewBox", [0, 0, width3, height3]); var sankey3 = d3 .sankey() .nodeWidth(15) .nodeId(d => d.name) .nodePadding(10) .extent([[1, 1], [width3 - 1, height3 - 6]]); const { nodes, links } = sankey1(data_2010); svg .append("g") .attr("stroke", "#000") .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", color) .append("title") .text(d => `${d.name}\n${format(d.value)}`); const link = svg .append("g") .attr("fill", "none") .attr("stroke-opacity", 0.5) .selectAll("g") .data(links) .join("g") .style("mix-blend-mode", "multiply"); const gradient = link .append("linearGradient") .attr("id", d => (d.uid = DOM.uid("link")).id) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", d => d.source.x1) .attr("x2", d => d.target.x0); gradient .append("stop") .attr("offset", "0%") .attr("stop-color", d => color(d.source)); gradient .append("stop") .attr("offset", "100%") .attr("stop-color", d => color(d.target)); link .append("path") .attr("d", d3.sankeyLinkHorizontal()) .attr("stroke", d => d.uid) .attr("stroke-width", d => Math.max(1, d.width)); link .append("title") .text(d => `${d.source.name} → ${d.target.name}\n${format(d.value)}`); svg .append("g") .attr("font-family", "sans-serif") .attr("font-size", 10) .selectAll("text") .data(nodes) .join("text") .attr("x", d => (d.x0 < width3 / 2 ? d.x1 + 6 : d.x0 - 6)) .attr("y", d => (d.y1 + d.y0) / 2) .attr("dy", "0.35em") .attr("text-anchor", d => (d.x0 < width3 / 2 ? "start" : "end")) .text(d => d.name); return svg.node(); }54:[{"id":"ab3e3a28e5415c4ea955d4c5e4829ee80ffddadb40cad7154230649d5f9d8da860e33ee19454b7e2f3d970d902b6f51670f2f91b94c6792327a72cbff0279271","href":"https://static.observableusercontent.com/files/ab3e3a28e5415c4ea955d4c5e4829ee80ffddadb40cad7154230649d5f9d8da860e33ee19454b7e2f3d970d902b6f51670f2f91b94c6792327a72cbff0279271","name":"data_90.csv","type":"text/csv","lastModified":1607292470608.086,"size":7038},{"id":"15b7ded2c1542f97faa0a6d91300c9faa9989f8aedc7f84e869a135658e490f92bbfcb0d3345d7a9771c148a582935940384fdcc1d329a166b96c9babc94767d","href":"https://static.observableusercontent.com/files/15b7ded2c1542f97faa0a6d91300c9faa9989f8aedc7f84e869a135658e490f92bbfcb0d3345d7a9771c148a582935940384fdcc1d329a166b96c9babc94767d","name":"data_2010.csv","type":"text/csv","lastModified":1607292470588.606,"size":5307},{"id":"f13f407f52cc21e50e5a991da63f5ec345c3b54e62c1fc680d7180f2220984d5cd38c069062220003118788d3ea3298fc36881315f1a400498d0cdaa7469d6b7","href":"https://static.observableusercontent.com/files/f13f407f52cc21e50e5a991da63f5ec345c3b54e62c1fc680d7180f2220984d5cd38c069062220003118788d3ea3298fc36881315f1a400498d0cdaa7469d6b7","name":"data_new@1.csv","type":"text/csv","lastModified":1607280803559.281,"size":8012},{"id":"95bd43b8b9b4f9b2eb5ce3a196926bf363227e2096c300416d6b9abf2f2e723339b4cb64f606ff55567c152bf28c5adef18557ad7e6c98c2da77fbea98b0ad49","href":"https://static.observableusercontent.com/files/95bd43b8b9b4f9b2eb5ce3a196926bf363227e2096c300416d6b9abf2f2e723339b4cb64f606ff55567c152bf28c5adef18557ad7e6c98c2da77fbea98b0ad49","name":"links@2.csv","type":"text/csv","lastModified":1607280982095.582,"size":5946},{"id":"17d5f4f5d5d93d052bc016655ee6fe4052d9ff7e6add22b0ab662ac68ce01171da95d8f445f44a12faeeb4a468db0256e0ea96b76b9839fae1b3d7508b00e636","href":"https://static.observableusercontent.com/files/17d5f4f5d5d93d052bc016655ee6fe4052d9ff7e6add22b0ab662ac68ce01171da95d8f445f44a12faeeb4a468db0256e0ea96b76b9839fae1b3d7508b00e636","name":"data_2000.csv","type":"text/csv","lastModified":1607292470598.265,"size":7703},{"id":"b5283445e099458109892dffe9dede380ee0c25487d00cef882f7d2d37382ee749a776cdfc8c60ffbd969ed63194eae053dde3f44bf9f4d27c95091ef5830d6c","href":"https://static.observableusercontent.com/files/b5283445e099458109892dffe9dede380ee0c25487d00cef882f7d2d37382ee749a776cdfc8c60ffbd969ed63194eae053dde3f44bf9f4d27c95091ef5830d6c","name":"data_70.csv","type":"text/csv","lastModified":1607292470609.511,"size":3694},{"id":"7f0154844a5204cfeba1f7e5a0422212af21eebdc94d9a97c52c5b6011c6aefb7aa2548a26b0a34eea1b2109b8b8b10c16d6a23cd9770248bfa436aa88c09d9a","href":"https://static.observableusercontent.com/files/7f0154844a5204cfeba1f7e5a0422212af21eebdc94d9a97c52c5b6011c6aefb7aa2548a26b0a34eea1b2109b8b8b10c16d6a23cd9770248bfa436aa88c09d9a","name":"data_80.csv","type":"text/csv","lastModified":1607292470606.524,"size":4771}] 29:{"id":"00360e063d287ab0","slug":null,"title":"Mini Project 3","thumbnail":"b73c2540675e99f2c298a22d04eab38709b0de325f2ac4f9610d89f40b18467f","access_level":"unlisted","create_time":"$D2020-12-06T01:59:01.134Z","update_time":"$D2021-01-30T00:45:37.872Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"8d52d64c428eea27","login":"prajwalasrivatsa","name":"Prajwala Srivatsa","avatar_url":"https://avatars-next.observableusercontent.com/44977f03133f6cf670ea4349e38f3e0e30eded786c848c2134249f4d88b9b53a","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":246,"publish_version":246,"role":null,"authored":false,"authors":[{"type":"individual","id":"0a575e3d1f615024","login":"prajwalasrivatsa","name":"Prajwala Srivatsa","avatar_url":"https://avatars-next.observableusercontent.com/44977f03133f6cf670ea4349e38f3e0e30eded786c848c2134249f4d88b9b53a","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"0a575e3d1f615024","login":"prajwalasrivatsa","name":"Prajwala Srivatsa","avatar_url":"https://avatars-next.observableusercontent.com/44977f03133f6cf670ea4349e38f3e0e30eded786c848c2134249f4d88b9b53a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Mini Project 3","cells":[{"id":79,"value":"md`# Mini Project 3`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"aiddata = await d3.csv(googleSheetCsvUrl, row => ({\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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"md`# Visualization 1`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"data1 = {\n const links = await FileAttachment(\"data_new@1.csv\").csv();\n const nodes = Array.from(\n new Set(links.flatMap(l => [l.source, l.target])),\n name => ({ name, category: name })\n );\n return { nodes, links, units: \"$\" };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"md`For this Visualization I chose a sankey diagram where I have on the left the source or donor countries and on the right I have the target or receiver countries. The width of each band going from a donor country to a recipient country represents the amount in USD moving between these countries.

\nOverall this representation is very effective to answer questions like ' who are the major donors and receivers?' as it is very easy to spot difference in bandwidth. It is also easy to see the connections from recipients back to donors to see who all do they receive from and how much compared to other donors.

\nSince these are the type of questions asked for visualization 1, I chose this representation.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"md`# Visualization 2 - New Approach`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"md`# Visualization 2`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3@6\", \"d3-sankey@0\", \"d3-array@1\", \"d3-collection@1\", \"d3-path@1\", \"d3-shape@1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"data2 = {\n const links = await FileAttachment(\"links@2.csv\").csv();\n const nodes = Array.from(\n new Set(links.flatMap(l => [l.source, l.target])),\n name => ({ name, category: name })\n );\n return { nodes, links, units: \"$\" };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"links1 = await FileAttachment(\"links@2.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"nodes1 = Array.from(\n new Set(links1.flatMap(l => [l.source, l.target])),\n name => ({ name, category: name })\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"links1.map(d => Object.assign({}, d))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"width = 954","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"height = 750","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"color = {\n const color = d3.scaleOrdinal(d3.schemeCategory10);\n return d => color(d.category === undefined ? d.name : d.category);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"format = {\n const format = d3.format(\",.0f\");\n return data2.units ? d => `${format(d)} ${data2.units}` : format;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"sankey1 = {\n var sankeyc = d3\n .sankey()\n .nodeId(d => d.name)\n .nodeWidth(15)\n .nodePadding(10)\n .extent([[1, 5], [width - 1, height - 5]]);\n return ({ nodes, links }) =>\n sankeyc({\n nodes: nodes.map(d => Object.assign({}, d)),\n links: links.map(d => Object.assign({}, d))\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"viewof edgeColor = \"path\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"viewof align = \"justify\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"sankey1(data2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"md`For this Visualization I chose a sankey diagram again where donor countries are on the left and recipient countries on the right and bridging the two are the purposes which indicate to what purpose and how much does each country donate/receive to/from. It is easy to see that Air Transport is top purpose and USA is the top donor to it. Similarly Japan is the top donor for Rail transport and India is it's largest receiver.

\nWe can also see that Germany donates to Brazil only for the purpose of Rescheduling and Refinancing`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"md`# Visualization 3`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"width3 = 954","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"height3 = 750","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"data_70 = {\n const links = await FileAttachment(\"data_70.csv\").csv();\n const nodes = Array.from(\n new Set(links.flatMap(l => [l.source, l.target])),\n name => ({ name, category: name })\n );\n return { nodes, links, units: \"$\" };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"data_80 = {\n const links = await FileAttachment(\"data_80.csv\").csv();\n const nodes = Array.from(\n new Set(links.flatMap(l => [l.source, l.target])),\n name => ({ name, category: name })\n );\n return { nodes, links, units: \"$\" };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"data_90 = {\n const links = await FileAttachment(\"data_90.csv\").csv();\n const nodes = Array.from(\n new Set(links.flatMap(l => [l.source, l.target])),\n name => ({ name, category: name })\n );\n return { nodes, links, units: \"$\" };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"data_2000 = {\n const links = await FileAttachment(\"data_2000.csv\").csv();\n const nodes = Array.from(\n new Set(links.flatMap(l => [l.source, l.target])),\n name => ({ name, category: name })\n );\n return { nodes, links, units: \"$\" };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"data_2010 = {\n const links = await FileAttachment(\"data_2010.csv\").csv();\n const nodes = Array.from(\n new Set(links.flatMap(l => [l.source, l.target])),\n name => ({ name, category: name })\n );\n return { nodes, links, units: \"$\" };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"md`For this visualization I sliced the data into decades and represented each decade as a sankey diagram.

\nWe can observe that \n1. India was the largest receiver in the 70's but reduced a great extent in the 90's. \n2. Netherlands donations to India are constantly reducing over the decades. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"md`### Donations during the 70's`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"md`### Donations during the 80's`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"$50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"md`### Donations during the 90's`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"$51","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"md`### Donations during the 2000's`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"$52","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"md`### Donations during the 2010's`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"$53","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"function groupByType(objectArray, property) {\n let helper = {};\n return objectArray.reduce(function(acc, obj) {\n let key = obj[property];\n if (!helper[key]) {\n helper[key] = Object.assign(\n {},\n {\n node: obj[property],\n amount: obj.totalAmount\n }\n );\n acc.push(helper[key]);\n } else {\n helper[key][\"amount\"] += obj.totalAmount;\n }\n\n return acc;\n }, []);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W54","stdlib":"1"}} 24:null