29:null 2a:["$","title",null,{"children":"Mini-Project 1 (Geo) | Arshiya Sayyada | Observable"}] 2f:Tfef,{ const margin = {top:50, left:10, right:10, bottom:0} const visWidth = 950 - margin.left - margin.right const visHeight = 900 - 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})`) const y_scale = d3.scaleBand() .domain(sortedCountries) .range([margin.top ,visHeight]) .padding(0.3) const donation_scale = d3.scaleLinear() .domain([0, donation_limit]) .range([visWidth/2 + 65, visWidth]) const received_scale = d3.scaleLinear() .domain([0, received_limit]) .range([visWidth/2 - 65, 0]) const donation_Axis = d3.axisTop(donation_scale) .ticks(5) //.tickValues([0,2000000000,6000000000,10000000000]) .tickFormat(d3.format("($.2s")); const received_Axis = d3.axisTop(received_scale) .ticks(5) //.tickValues([0,2000000000,6000000000,10000000000]) .tickFormat(d3.format("($.2s")); g.append('text') .text("Amounts Donated and Received Per Country") .attr('x', visWidth/2) .attr('y', 0) .attr('font-size', '20px') .attr("text-anchor", "middle") .attr("dominant-baseline", "top") .attr("font-family", "sans-serif") g.append('text') .text("Received") .attr('x', visWidth/4) .attr('y', 20) .attr('font-size', '12px') .attr("text-anchor", "middle") .attr("font-family", "sans-serif") g.append('text') .text("Donated") .attr('x', visWidth/2 + visWidth/4) .attr('y', 20) .attr('font-size', '12px') .attr("text-anchor", "middle") .attr("font-family", "sans-serif") g.append('g') .attr('transform', `translate(0,${margin.top})`) .call(donation_Axis) g.append('g') .attr('transform', `translate(0,${margin.top})`) .call(received_Axis) g.selectAll('.col') .data(countriesWithAmounts) .join('g') .append('text') .text(d => d.country) .attr('x', visWidth/2) .attr('y', d => y_scale(d.country) + 3) .attr('font-size', '12px') .attr("text-anchor", "middle") .attr("dominant-baseline", "hanging") .attr("font-family", "sans-serif") g.append("g") .selectAll("rect") .data(countriesWithAmounts) .join("rect") .attr("fill", 'green') .attr("x", visWidth/2 + 65) .attr("y", d => y_scale(d.country)) .attr("width", d => donation_scale(d.donation_amt) - (visWidth/2 + 65)) .attr("height", y_scale.bandwidth()); g.append("g") .selectAll("rect") .data(countriesWithAmounts) .join("rect") .attr("fill", '#d7191c') .attr("x", d => received_scale(d.received_amt)) .attr("y", d => y_scale(d.country)) .attr("width", d => (visWidth/2 -65) - received_scale(d.received_amt)) .attr("height", y_scale.bandwidth()); // g.append('line') // .attr('x1', visWidth/2) // .attr('y1', 0) // .attr('x2', visWidth/2) // .attr('y2', visHeight) // .attr('stroke', 'black') // .attr('stroke-opacity', 0.4) g.append('line') .attr('x1', visWidth/2 + 65) .attr('y1', 50) .attr('x2', visWidth/2 + 65) .attr('y2', visHeight) .attr('stroke', 'green') .attr('stroke-opacity', 0.3) g.append('line') .attr('x1', visWidth/2 - 65) .attr('y1', 50) .attr('x2', visWidth/2 - 65) .attr('y2', visHeight) .attr('stroke', 'red') .attr('stroke-opacity', 0.3) // g.append('line') // .attr('x1',0) // .attr('y1', 0) // .attr('x2', 0) // .attr('y2', visHeight) // .attr('stroke', 'red') // .attr('stroke-opacity',1) // g.append('line') // .attr('x1', visWidth) // .attr('y1', 0) // .attr('x2', visWidth) // .attr('y2', visHeight) // .attr('stroke', 'purple') // .attr('stroke-opacity',1) return svg.node() }30:T4ec,{ const margin = {top: 0, right: 0, bottom: 0, left: 0}; const visWidth = width - margin.left - margin.right; const visHeight = 1000 - 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})`); const projection = d3.geoMercator() .fitSize([visWidth, visHeight], geoJSON); const path = d3.geoPath().projection(projection); g.selectAll('.border') .data(geoJSON.features.filter(d => d.properties.NAME_LONG !== 'Antarctica')) .join('path') .attr('class', 'border') .attr('d', path) .attr('fill', d => uniqueCountries.includes(d.properties.NAME_LONG) ? color(countryToNetRate[d.properties.NAME_LONG]) : '#E8E8E8') .attr('stroke', 'black') .attr('stroke-opacity', 0.1) g.append('text') .text("Geographical Distribution of Net Aid Amount (Donated-Received)") .attr('x', visWidth/2) .attr('y', 750) .attr('font-size', '25px') .attr("text-anchor", "middle") .attr("dominant-baseline", "top") .attr("font-family", "sans-serif") return svg.node(); }31:T4624,///stackedExpand, 1, '.0%', 'Percent of Injured' { const margin = {top: 130, right: 0, bottom: 10, left: 120}; const visWidth = 950 - margin.left - margin.right; const visHeight = 1500 - 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})`); g.append('text') .attr('x', visWidth/2) .attr('y', -90) .attr('font-size', '25px') .attr("text-anchor", "middle") .attr("dominant-baseline", "top") .attr("font-family", "sans-serif") .text("Distribution of Top 5 Most Frequent Purposes Geographically") g.append('rect') .attr('fill', color_3(topPurposesCodes[0])) .attr('x', 0) .attr('y', -70) .attr('width', 12) .attr('height', 12) g.append('text') .text(codeToPurpose[topPurposesCodes[0]]) .attr('x', 15) .attr('y', -63) .attr('font-size', '12px') .attr("text-anchor", "start") .attr("dominant-baseline", "middle") .attr("font-family", "sans-serif") g.append('rect') .attr('fill', color_3(topPurposesCodes[1])) .attr('x', 100) .attr('y', -70) .attr('width', 12) .attr('height', 12) g.append('text') .text(codeToPurpose[topPurposesCodes[1]]) .attr('x', 115) .attr('y', -63) .attr('font-size', '12px') .attr("text-anchor", "start") .attr("dominant-baseline", "middle") .attr("font-family", "sans-serif") g.append('rect') .attr('fill', color_3(topPurposesCodes[2])) .attr('x', 200) .attr('y', -70) .attr('width', 12) .attr('height', 12) g.append('text') .text(codeToPurpose[topPurposesCodes[2]]) .attr('x', 215) .attr('y', -63) .attr('font-size', '12px') .attr("text-anchor", "start") .attr("dominant-baseline", "middle") .attr("font-family", "sans-serif") g.append('rect') .attr('fill', color_3(topPurposesCodes[3])) .attr('x', 360) .attr('y', -70) .attr('width', 12) .attr('height', 12) g.append('text') .text(codeToPurpose[topPurposesCodes[3]]) .attr('x', 375) .attr('y', -63) .attr('font-size', '12px') .attr("text-anchor", "start") .attr("dominant-baseline", "middle") .attr("font-family", "sans-serif") g.append('rect') .attr('fill', color_3(topPurposesCodes[4])) .attr('x', 560) .attr('y', -70) .attr('width', 12) .attr('height', 12) g.append('text') .text(codeToPurpose[topPurposesCodes[4]]) .attr('x', 575) .attr('y', -63) .attr('font-size', '12px') .attr("text-anchor", "start") .attr("dominant-baseline", "middle") .attr("font-family", "sans-serif") //REGION 1: g.append('rect') .attr('stroke','lightgrey') .attr('fill', 'none') .attr('x', -30) .attr('y', -30) .attr('width', visWidth+30) .attr('height', 240) g.append('text') .attr('x', visWidth/2) .attr('y', 230) .attr('font-size', '15px') .attr("text-anchor", "middle") .attr("dominant-baseline", "top") .attr("font-family", "sans-serif") .text("Northern Europe") const x1 = d3.scaleBand() .domain(R6_countries) .range([0, 200]) .padding(0.25) const y1 = d3.scaleLinear() .domain([0, 1]).nice() .range([70,visWidth-20]); g.selectAll('.series1') .data(R6_stackedExpand) .join('g') .attr('fill', d => color_3(d.key)) .attr('class', 'series') .selectAll('rect') .data(d => d) .join('rect') .attr('x', d => y1(d[0])) .attr('width', d => y1(d[1]) - y1(d[0])) .attr('y', d => x1(d.data.country)) .attr('height', x1.bandwidth()) .append('text') .text(d => d.region) .attr('x', d=> y1(d[1]) + 20) .attr('y', d => x1(d.data.country)) .attr('fill', 'black'); const xAxis1 = d3.axisTop(y1).tickFormat(d3.format('.0%')) const yAxis1 = d3.axisLeft(x1) //const continentAxis = d3.axisRight(continents) g.append('g') //.attr('transform', `translate(0,${visHeight})`) .call(xAxis1) //.call(g => g.selectAll('.domain').remove()); g.append("g") .attr('transform', `translate(70,0)`) .call(yAxis1) //.call(g => g.selectAll('.domain').remove()) //REGION 2: g.append('rect') .attr('stroke','lightgrey') .attr('fill', 'none') .attr('x', -30) .attr('y', 250) .attr('width', visWidth/2 +20) .attr('height', 240) g.append('text') .attr('x', visWidth/4) .attr('y', 510) .attr('font-size', '15px') .attr("text-anchor", "middle") .attr("dominant-baseline", "top") .attr("font-family", "sans-serif") .text("Eastern Europe") const x2 = d3.scaleBand() .domain(R5_countries) .range([280, 480]) .padding(0.25) const y2 = d3.scaleLinear() .domain([0, 1]).nice() .range([90,(visWidth/2)-30]); g.selectAll('.series1') .data(R5_stackedExpand) .join('g') .attr('fill', d => color_3(d.key)) .attr('class', 'series') .selectAll('rect') .data(d => d) .join('rect') .attr('x', d => y2(d[0])) .attr('width', d => y2(d[1]) - y2(d[0])) .attr('y', d => x2(d.data.country)) .attr('height', x2.bandwidth()) .append('text') .text(d => d.region) .attr('x', d=> y2(d[1]) + 20) .attr('y', d => x2(d.data.country)) .attr('fill', 'black'); const xAxis2 = d3.axisTop(y2).tickFormat(d3.format('.0%')) const yAxis2 = d3.axisLeft(x2) //const continentAxis = d3.axisRight(continents) g.append('g') .attr('transform', `translate(0,280)`) .call(xAxis2) //.call(g => g.selectAll('.domain').remove()); g.append("g") .attr('transform', `translate(90,0)`) .call(yAxis2) //.call(g => g.selectAll('.domain').remove()) //REGION 3: g.append('rect') .attr('stroke','lightgrey') .attr('fill', 'none') .attr('x', visWidth/2) .attr('y', 250) .attr('width', (visWidth/2)) .attr('height', 240) g.append('text') .attr('x', (visWidth/4)*3) .attr('y', 510) .attr('font-size', '15px') .attr("text-anchor", "middle") .attr("dominant-baseline", "top") .attr("font-family", "sans-serif") .text("Southern Europe") const x3 = d3.scaleBand() .domain(R7_countries) .range([280, 480]) .padding(0.25) const y3 = d3.scaleLinear() .domain([0, 1]).nice() .range([(visWidth/2)+60,visWidth-30]); g.selectAll('.series1') .data(R7_stackedExpand) .join('g') .attr('fill', d => color_3(d.key)) .attr('class', 'series') .selectAll('rect') .data(d => d) .join('rect') .attr('x', d => y3(d[0])) .attr('width', d => y3(d[1]) - y3(d[0])) .attr('y', d => x3(d.data.country)) .attr('height', x3.bandwidth()) .append('text') .text(d => d.region) .attr('x', d=> y3(d[1]) + 20) .attr('y', d => x3(d.data.country)) .attr('fill', 'black'); const xAxis3 = d3.axisTop(y3).tickFormat(d3.format('.0%')) const yAxis3 = d3.axisLeft(x3) //const continentAxis = d3.axisRight(continents) g.append('g') .attr('transform', `translate(0,280)`) .call(xAxis3) //.call(g => g.selectAll('.domain').remove()); g.append("g") .attr('transform', `translate(${(visWidth/2) + (margin.left/2)},0)`) .call(yAxis3) //.call(g => g.selectAll('.domain').remove()) //REGION 4: g.append('rect') .attr('stroke','lightgrey') .attr('fill', 'none') .attr('x', -30) .attr('y', 530) .attr('width', visWidth/2 +20) .attr('height', 240) g.append('text') .attr('x', visWidth/4) .attr('y', 790) .attr('font-size', '15px') .attr("text-anchor", "middle") .attr("dominant-baseline", "top") .attr("font-family", "sans-serif") .text("Western Europe") const x4 = d3.scaleBand() .domain(R8_countries) .range([560, 760]) .padding(0.25) const y4 = d3.scaleLinear() .domain([0, 1]).nice() .range([90,(visWidth/2)-30]); g.selectAll('.series1') .data(R8_stackedExpand) .join('g') .attr('fill', d => color_3(d.key)) .attr('class', 'series') .selectAll('rect') .data(d => d) .join('rect') .attr('x', d => y4(d[0])) .attr('width', d => y4(d[1]) - y4(d[0])) .attr('y', d => x4(d.data.country)) .attr('height', x4.bandwidth()) .append('text') .text(d => d.region) .attr('x', d=> y4(d[1]) + 20) .attr('y', d => x4(d.data.country)) .attr('fill', 'black'); const xAxis4 = d3.axisTop(y4).tickFormat(d3.format('.0%')) const yAxis4 = d3.axisLeft(x4) //const continentAxis = d3.axisRight(continents) g.append('g') .attr('transform', `translate(0,560)`) .call(xAxis4) //.call(g => g.selectAll('.domain').remove()); g.append("g") .attr('transform', `translate(90,0)`) .call(yAxis4) //.call(g => g.selectAll('.domain').remove()) //REGION 5: g.append('rect') .attr('stroke','lightgrey') .attr('fill', 'none') .attr('x', visWidth/2) .attr('y', 530) .attr('width', (visWidth/2)) .attr('height', 240) g.append('text') .attr('x', (visWidth/4)*3) .attr('y', 790) .attr('font-size', '15px') .attr("text-anchor", "middle") .attr("dominant-baseline", "top") .attr("font-family", "sans-serif") .text("Americas") const x5 = d3.scaleBand() .domain(R2_countries) .range([560, 760]) .padding(0.25) const y5 = d3.scaleLinear() .domain([0, 1]).nice() .range([(visWidth/2)+60,visWidth-30]); g.selectAll('.series1') .data(R2_stackedExpand) .join('g') .attr('fill', d => color_3(d.key)) .attr('class', 'series') .selectAll('rect') .data(d => d) .join('rect') .attr('x', d => y5(d[0])) .attr('width', d => y5(d[1]) - y5(d[0])) .attr('y', d => x5(d.data.country)) .attr('height', x5.bandwidth()) .append('text') .text(d => d.region) .attr('x', d=> y5(d[1]) + 20) .attr('y', d => x5(d.data.country)) .attr('fill', 'black'); const xAxis5 = d3.axisTop(y5).tickFormat(d3.format('.0%')) const yAxis5 = d3.axisLeft(x5) //const continentAxis = d3.axisRight(continents) g.append('g') .attr('transform', `translate(0,560)`) .call(xAxis5) //.call(g => g.selectAll('.domain').remove()); g.append("g") .attr('transform', `translate(${(visWidth/2) + (margin.left/2)},0)`) .call(yAxis5) //.call(g => g.selectAll('.domain').remove()) //REGION 6: g.append('rect') .attr('stroke','lightgrey') .attr('fill', 'none') .attr('x', -30) .attr('y', 810) .attr('width', visWidth/2 +20) .attr('height', 240) g.append('text') .attr('x', visWidth/4) .attr('y', 1070) .attr('font-size', '15px') .attr("text-anchor", "middle") .attr("dominant-baseline", "top") .attr("font-family", "sans-serif") .text("Western Asia") const x6 = d3.scaleBand() .domain(R3_countries) .range([840, 1040]) .padding(0.25) const y6 = d3.scaleLinear() .domain([0, 1]).nice() .range([90,(visWidth/2)-30]); g.selectAll('.series1') .data(R3_stackedExpand) .join('g') .attr('fill', d => color_3(d.key)) .attr('class', 'series') .selectAll('rect') .data(d => d) .join('rect') .attr('x', d => y6(d[0])) .attr('width', d => y6(d[1]) - y6(d[0])) .attr('y', d => x6(d.data.country)) .attr('height', x6.bandwidth()) .append('text') .text(d => d.region) .attr('x', d=> y6(d[1]) + 20) .attr('y', d => x6(d.data.country)) .attr('fill', 'black'); const xAxis6 = d3.axisTop(y6).tickFormat(d3.format('.0%')) const yAxis6 = d3.axisLeft(x6) //const continentAxis = d3.axisRight(continents) g.append('g') .attr('transform', `translate(0,840)`) .call(xAxis6) //.call(g => g.selectAll('.domain').remove()); g.append("g") .attr('transform', `translate(90,0)`) .call(yAxis6) //.call(g => g.selectAll('.domain').remove()) //REGION 7: g.append('rect') .attr('stroke','lightgrey') .attr('fill', 'none') .attr('x', visWidth/2) .attr('y', 810) .attr('width', (visWidth/2)) .attr('height', 240) g.append('text') .attr('x', (visWidth/4)*3) .attr('y', 1070) .attr('font-size', '15px') .attr("text-anchor", "middle") .attr("dominant-baseline", "top") .attr("font-family", "sans-serif") .text("Rest of Asia") const x7 = d3.scaleBand() .domain(R4_countries) .range([840, 1040]) .padding(0.25) const y7 = d3.scaleLinear() .domain([0, 1]).nice() .range([(visWidth/2)+60,visWidth-30]); g.selectAll('.series1') .data(R4_stackedExpand) .join('g') .attr('fill', d => color_3(d.key)) .attr('class', 'series') .selectAll('rect') .data(d => d) .join('rect') .attr('x', d => y7(d[0])) .attr('width', d => y7(d[1]) - y7(d[0])) .attr('y', d => x7(d.data.country)) .attr('height', x7.bandwidth()) .append('text') .text(d => d.region) .attr('x', d=> y7(d[1]) + 20) .attr('y', d => x7(d.data.country)) .attr('fill', 'black'); const xAxis7 = d3.axisTop(y7).tickFormat(d3.format('.0%')) const yAxis7 = d3.axisLeft(x7) //const continentAxis = d3.axisRight(continents) g.append('g') .attr('transform', `translate(0,840)`) .call(xAxis7) //.call(g => g.selectAll('.domain').remove()); g.append("g") .attr('transform', `translate(${(visWidth/2) + (margin.left/2)},0)`) .call(yAxis7) //.call(g => g.selectAll('.domain').remove()) //REGION 8: g.append('rect') .attr('stroke','lightgrey') .attr('fill', 'none') .attr('x', -30) .attr('y', 1090) .attr('width', visWidth/2 +20) .attr('height', 240) g.append('text') .attr('x', visWidth/4) .attr('y', 1350) .attr('font-size', '15px') .attr("text-anchor", "middle") .attr("dominant-baseline", "top") .attr("font-family", "sans-serif") .text("Africa/Australia/Oceania") const x8 = d3.scaleBand() .domain(R1_countries) .range([1120, 1320]) .padding(0.25) const y8 = d3.scaleLinear() .domain([0, 1]).nice() .range([90,(visWidth/2)-30]); g.selectAll('.series1') .data(R1_stackedExpand) .join('g') .attr('fill', d => color_3(d.key)) .attr('class', 'series') .selectAll('rect') .data(d => d) .join('rect') .attr('x', d => y8(d[0])) .attr('width', d => y8(d[1]) - y8(d[0])) .attr('y', d => x8(d.data.country)) .attr('height', x8.bandwidth()) .append('text') .text(d => d.region) .attr('x', d=> y8(d[1]) + 20) .attr('y', d => x8(d.data.country)) .attr('fill', 'black'); const xAxis8 = d3.axisTop(y8).tickFormat(d3.format('.0%')) const yAxis8 = d3.axisLeft(x8) //const continentAxis = d3.axisRight(continents) g.append('g') .attr('transform', `translate(0,1120)`) .call(xAxis8) //.call(g => g.selectAll('.domain').remove()); g.append("g") .attr('transform', `translate(90,0)`) .call(yAxis8) //.call(g => g.selectAll('.domain').remove()) // svg.append('svg') // .attr('x',10) // .attr('y',20) // .attr('width',500) // .attr('height',500) // .attr('xlink:href', stackedBar(R1_countries, R1_stackedExpand); // const x_r1 = d3.scaleBand() // .domain(R1_countries) // .range([0, visHeight/4]) // .padding(0.25) // const y = d3.scaleLinear() // .domain([0, 1]).nice() // .range([0,visWidth/2-margin.left]); // const series = g.selectAll('.series') // .data(R1_stackedExpand) // .join('g') // .attr('fill', d => color_3(d.key)) // .attr('class', 'series') // .selectAll('rect') // .data(d => d) // .join('rect') // .attr('x', d => y(d[0])) // .attr('width', d => y(d[1]) - y(d[0])) // .attr('y', d => x_r1(d.data.country)) // .attr('height', x_r1.bandwidth()) // .append('text') // .text(d => d.region) // .attr('x', d=> y(d[1]) + 20) // .attr('y', d => x_r1(d.data.country)) // .attr('fill', 'black'); // const xAxis = d3.axisTop(y).tickFormat(d3.format('.0%')) // const yAxis = d3.axisLeft(x_r1) // //const continentAxis = d3.axisRight(continents) // g.append('g') // //.attr('transform', `translate(0,${visHeight})`) // .call(xAxis) // .call(g => g.selectAll('.domain').remove()); // g.append("g") // .call(yAxis) // .call(g => g.selectAll('.domain').remove()) // .append('text') // .attr('fill', 'black') // .attr('x', -40) // .attr('y', visHeight / 2) // .text(d.country); // g.append("g") // .attr('transform', `translate(${visWidth-margin.right},0)`) // .call(continentAxis) // g.selectAll('.col') // .data(stackedExpand) // .join('g') // .append('text') // .text('a') // .attr('transform', "translate(200,100)rotate(180)") // .attr('x', visHeight + 20) // .attr('y',d => x(d.country)) // .attr('font-size', '5px') // .attr("text-anchor", "middle") // .attr("dominant-baseline", "hanging") // // .attr("font-family", "sans-serif") // g.append('line') // .attr('x1', -120) // .attr('y1', visHeight + 20) // .attr('x2', visWidth) // .attr('y2', visHeight + 20) // .attr('stroke', 'red') // .attr('stroke-opacity',1) return svg.node(); }32:Tc61,//referenced:http://www.silota.com/docs/recipes/sql-join-tutorial-javascript-examples.html countriesWithAmounts = { const groupedByDonor = d3.rollup(aiddata, arr => d3.sum(arr, d => d.commitment_amount), d => d.donor); const countryWithDonationAmt = Array.from(groupedByDonor, ([country, donation_amt]) => ({country, donation_amt})); const groupedByRecipient = d3.rollup(aiddata, arr => d3.sum(arr, d => d.commitment_amount), d => d.recipient); const countryWithReceivedAmt = Array.from(groupedByRecipient, ([country, received_amt]) => ({country, received_amt})); // clone articles, otherwise observable will reuse the variable let donationsCopy = countryWithDonationAmt.map(d => ({ ...d })); let receivedCopy = countryWithReceivedAmt.map(d => ({ ...d })); var results = []; for (var i=0; id3.descending(a.net_amt, b.net_amt)); const final = results.map(d => ({ 'country': d.country, 'donation_amt': d.donation_amt, 'received_amt': d.received_amt !== 0 ? -d.received_amt : 0, 'net_amt': d.net_amt })); return final }33:[{"id":"55260abbc777c0a3b8fed19f3929dd822fef9d5118b53b76b2176d20782910e599eac919999ea8ee85a60b783fd37082574f6591fd46c0d70ddf9b00df71ce27","href":"https://static.observableusercontent.com/files/55260abbc777c0a3b8fed19f3929dd822fef9d5118b53b76b2176d20782910e599eac919999ea8ee85a60b783fd37082574f6591fd46c0d70ddf9b00df71ce27","name":"countries-50m.json","type":"application/json","lastModified":1607293680035.924,"size":4177662},{"id":"5a4d4a63e91df4013dd46a3aeb1a85bf3afaa95d1159f3ce52607c7c8271c4795bfe755fe85fa6df9f99134408286817b167cc6b9d3c2244b97c41fa7d94af56","href":"https://static.observableusercontent.com/files/5a4d4a63e91df4013dd46a3aeb1a85bf3afaa95d1159f3ce52607c7c8271c4795bfe755fe85fa6df9f99134408286817b167cc6b9d3c2244b97c41fa7d94af56","name":"countryContinent.csv","type":"text/csv","lastModified":1607294236032.223,"size":16313}] 2d:{"id":"bd1989f0f3eb3ba9","slug":"mini-project-1-geo","title":"Mini-Project 1 (Geo)","thumbnail":"6932540e19b235aafdbcf49b9b2312e74eefe2127d6f767425769bc1285eb235","access_level":"public","create_time":"$D2020-12-06T22:28:00.035Z","update_time":"$D2021-02-23T03:33:41.470Z","view_time":null,"first_public_time":"$D2021-01-15T01:45:36.173Z","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":1186,"publish_version":1186,"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":3,"collection":null,"type":"notebook","body":{"title":"Mini-Project 1 (Geo)","cells":[{"id":21,"value":"md`# Mini-Project 1 (Geo)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1123,"value":"md`---------------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"md`## Visualization 1: \n- How do the countries compare in terms of how much they receive and donate? \n- Are there countries that donate much more than they receive or receive much more than they donate?\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1120,"value":"md`---------------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1126,"value":"md`**Viz 1:** I started out by figuring out the type of data I would need to visualize. For this viz, it was country names(categorical) and donation/received amount(quantitaive). After considering a couple of possibilities I landed on a diverging bar chart so that both received and donated amount for each country could be shown and compared at the same time. To make this visualization more effective, I color coded the donation and received amount bars, on top of sorting the countries in descending order of net amount (obtained by calculating donation_amt - received_amt)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1114,"value":"md`---------------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"md`## Visualization 2: \n- Do the countries that mostly receive or mostly donate tend to cluster around specific geographical areas of the world? \n- Are there neighboring countries that have radically different patterns in terms of how much they receive vs. how much they donate?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1117,"value":"md`---------------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"legend({\n color: color,\n title: \"Net Aid Amount\",\n tickFormat: \".2s\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1140,"value":"md`**Viz 2:** To show the distribution of donation vs received amount trends geographically, using a cloropleth map seemed like the best option. With this approach we can see the clustering of trends in areas. From the map obtained it is pretty evident that the northern half of the world mostly donates while the southern half mostly receives. We can also clearly see that India receives the most aid while the US and Japan donate the most. To make these trends easier to spot, the sequential color scale has been converted into a sqrt scale.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1108,"value":"md`---------------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"md`## [OPTIONAL / EXTRA POINTS] Visualization 3: \n- 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? \n- Are there countries that tend to receive more of certain types of donations than others? \n- Note: it would be more interesting to look at the top 5 purposes locally, for each individual country but visualizing the results may be even harder. If you want to try out a solution for this harder case it would be nice to see it.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1111,"value":"md`---------------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":842,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1145,"value":"md`**Viz 3:** After considering various alternatives to show the trends in 5 categories over geographical regions, I decided on a stacked bar approach with graphs sectioned by regions. The top 5 purposes of aid were obtained globally and the data was filtered to only include these records. Since the questions posed center around trends rather than actual values, I picked a percentage scale over a raw value scale (which failed to show the trends effectively due to outlier data). This approach leaves us with a lot of insights. For example, the only reason for aid(among top 5 reasons) in Western Europe was Air Transport. While Southern and Northern Europe also had significant aid given to them for Air Transport, Northern Europe in particular was also given significant aid for Industrial Development. Western Asia also shows significant trends for aid obtained for Industrial Development and Power generation/non-renewable sources.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1105,"value":"md`---------------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1085,"value":"md`\n## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"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","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":1102,"value":"md`---------------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"md`### Preprocessing`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"md`#### Viz 1`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"uniqueCountries = {\n const unique_countries = []\n for (let i = 0; i < aiddata.length; i++) {\n const currentRow = aiddata[i];\n \n if (!unique_countries.includes(currentRow.donor)) {\n unique_countries.push(currentRow.donor);\n }\n \n if (!unique_countries.includes(currentRow.recipient)) {\n unique_countries.push(currentRow.recipient);\n }\n \n }\n \n return unique_countries\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"sortedCountries = {\n const unique_countries = []\n for (let i = 0; i < countriesWithAmounts.length; i++) {\n const currentRow = countriesWithAmounts[i];\n \n if (!unique_countries.includes(currentRow.country)) {\n unique_countries.push(currentRow.country);\n }\n\n }\n \n return unique_countries\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"donation_limit = d3.max(countriesWithAmounts, d => d.donation_amt)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"received_limit = d3.min(countriesWithAmounts, d => d.received_amt)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1099,"value":"md`---------------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"md`#### Viz 2`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":406,"value":"countriesOnMapDataSet = geoJSON.features.map(d => d.properties.NAME_LONG).sort()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":410,"value":"countryNetCopy = {\n const countryNetCopy = countriesWithAmounts.slice();\n for(var i=0; i [d.country, d.net_amt])))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"net_extent = d3.extent(countryNetCopy, d => d.net_amt)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":391,"value":"color = d3.scaleLinear()\n .domain([net_extent[0],0,net_extent[1]])\n .range([\"#d73027\",\"#ffffbf\",\"#1a9850\"])\n//[\"#d7191c\",\"#fdae61\",\"#fdde6c\",\"#abd9e9\",\"#2c7bb6\"]\n//[\"#d73027\",\"#f46d43\",\"#fdae61\",\"#fee08b\",\"#ffffbf\",\"#d9ef8b\",\"#a6d96a\",\"#66bd63\",\"#1a9850\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1096,"value":"md`--------------------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"md`#### Viz 3`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"//dataset from kaggle : https://www.kaggle.com/statchaitya/country-to-continent\ncountryToContinentCSV = FileAttachment(\"countryContinent.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"countryToContinent = {\n const newMap = countryToContinentCSV.map(d=>({\n 'country': d.country,\n 'continent': d.continent,\n 'sub_region': d.sub_region\n }));\n \n const filteredMap = newMap.filter(d=> (d.continent!==null || d.sub_region!==null));\n \n return filteredMap\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"unmatched = {\n \n const countriesInDict = []; \n for(let i=0; i [d.country, d.continent])))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":631,"value":"mapCountryRegion = Object.fromEntries(new Map(finalCountryToContinent.map(d => [d.country, d.sub_region])))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"newUnmatched = {\n \n const countriesInDict = []; \n for(let i=0; i {\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 purposes = tempData.map(d=>({\n // 'pupose_code':d.coalesced_purpose_code,\n // 'purpose_name':d.coalesced_purpose_name}));\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":491,"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":494,"value":"topPurposesCodes ={\n\n const temp = []\n \n for(let i=0; i({\n 'country': d.recipient,\n 'amount': d.commitment_amount,\n 'purpose_code': d.coalesced_purpose_code}));\n const newMapFiltered = newMap.filter(d => topPurposesCodes.includes(d.purpose_code));\n return newMapFiltered\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":585,"value":"purposesByCountry = {\n const counts = d3.rollup(purposeData,\n amt => d3.sum(amt, c => c.amount),\n d => d.country,\n d => d.purpose_code);\n \n const temp = Array.from(counts, (([country, map]) => {\n map.set('total', d3.sum(map.values()));\n map.set('country', country)\n map.set('continent', mapCountryContinent[country])\n map.set('region', mapCountryRegion[country])\n return Object.fromEntries(map)\n }));\n \n return temp.sort((a,b) => d3.ascending(a.region,b.region))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":502,"value":"uniqueRegions = {\n //create set of distinct inspectionID values\n const distinctIDs = new Set();\n purposesByCountry.forEach(d => {\n distinctIDs.add(d.region)\n });\n \n //using the distinct inspectionIDs set filter the data to remove multiple instances of the same inspectionIDs\n let tempData = purposesByCountry.filter(d => {\n if(distinctIDs.has(d.region)) {\n distinctIDs.delete(d.region)\n return d;\n } })\n \n const regionsList = [];\n for(let i=0; i {\n distinctIDs.add(d.continent)\n });\n \n //using the distinct inspectionIDs set filter the data to remove multiple instances of the same inspectionIDs\n let tempData = purposesByCountry.filter(d => {\n if(distinctIDs.has(d.continent)) {\n distinctIDs.delete(d.continent)\n return d;\n } })\n \n const continentsList = [];\n for(let i=0; i (d.region === \"Australia and New Zealand\") || (d.region ===\"Southern Africa\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":782,"value":"R1_countries = R1_data.map(d => d.country)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":707,"value":"R2_data = purposesByCountry.filter(d => d.continent === \"Americas\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":785,"value":"R2_countries = R2_data.map(d => d.country)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":711,"value":"R3_data = purposesByCountry.filter(d => d.region === \"Western Asia\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":788,"value":"R3_countries = R3_data.map(d => d.country)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":714,"value":"R4_data = purposesByCountry.filter(d => (d.region === \"Eastern Asia\") || (d.region === \"South-Eastern Asia\") || (d.region === \"Southern Asia\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":791,"value":"R4_countries = R4_data.map(d => d.country)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":717,"value":"R5_data = purposesByCountry.filter(d => d.region === \"Eastern Europe\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":794,"value":"R5_countries = R5_data.map(d => d.country)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":723,"value":"R6_data = purposesByCountry.filter(d => d.region === \"Northern Europe\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":797,"value":"R6_countries = R6_data.map(d => d.country)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":726,"value":"R7_data = purposesByCountry.filter(d => d.region === \"Southern Europe\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":800,"value":"R7_countries = R7_data.map(d => d.country)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":730,"value":"R8_data = purposesByCountry.filter(d => d.region === \"Western Europe\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":803,"value":"R8_countries = R8_data.map(d => d.country)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":745,"value":"R1_stackedExpand = d3.stack()\n .keys(topPurposesCodes)\n .offset(d3.stackOffsetExpand)(R1_data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":748,"value":"R2_stackedExpand = d3.stack()\n .keys(topPurposesCodes)\n .offset(d3.stackOffsetExpand)(R2_data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":751,"value":"R3_stackedExpand = d3.stack()\n .keys(topPurposesCodes)\n .offset(d3.stackOffsetExpand)(R3_data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":754,"value":"R4_stackedExpand = d3.stack()\n .keys(topPurposesCodes)\n .offset(d3.stackOffsetExpand)(R4_data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":757,"value":"R5_stackedExpand = d3.stack()\n .keys(topPurposesCodes)\n .offset(d3.stackOffsetExpand)(R5_data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":759,"value":"R6_stackedExpand = d3.stack()\n .keys(topPurposesCodes)\n .offset(d3.stackOffsetExpand)(R6_data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":761,"value":"R7_stackedExpand = d3.stack()\n .keys(topPurposesCodes)\n .offset(d3.stackOffsetExpand)(R7_data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":763,"value":"R8_stackedExpand = d3.stack()\n .keys(topPurposesCodes)\n .offset(d3.stackOffsetExpand)(R8_data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":604,"value":"color_3 = d3.scaleOrdinal()\n .domain(topPurposesCodes)\n .range(d3.schemeTableau10);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"md`-----------------\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"d3 = require('d3@6')","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"},{"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"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2e:"$2d:body"