3e:null 3f:["$","title",null,{"children":"Mini-Project 2 | Fariha Syed | Observable"}] 45:T651,md`## Visualization 1 - How does the amount donated vs. amount received change over time for each country? - Are there countries that mostly send or mostly receive and countries that have a similar amount of donations they receive and send? - Are there countries that change their role over time? That is, they used to mostly send donations and turn into mostly receiving donations and vice-versa? - Are there countries in which you can find a sudden increase ("peak") or a sudden decrease ("valley")? Since the focus is on how each country changes and not changes between countries, we can use visualizations that don't have all the data in a single chart i.e. small multiples. Therefore, in 1.1, I used stacked area charts to illustrate the relative amounts received and donated by each country in relation to the total amount they receive and donate. I chose to visualize relative amounts because otherwise the scale would be dominated by America, Japan, and India, who donate (the former two) and receive (the latter) the most. This would make it difficult to see trends in the remaining countries. I chose to use stacked area charts because we're working with temporal data, and they are appropriate to have time on the X=axis. However, given the size of each area chart, small multiples don't scale very well in this context, considering we have about 45 countries. Therefore, I chose to also do a heat map (1.2), which scales better. However, since color intensity can only encode one quantitative variable at a time, I had to reduce the amounts received and donated to a single measure, the net amount. `46:Ta89,{ const margin = { top: 40, right: 20, bottom: 20, left: 40 }; const visWidth = width - 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 rows = 8; const columns = 6; const grid = d3.cross(d3.range(rows), d3.range(columns), (row, column) => ({ row, column })); const dataByCountryByYearGrid = d3 .zip(Array.from(dataByCountryByYearDate), grid) .map(([{ country, years }, { row, column }]) => ({ country, years, row, column })); const row = d3 .scaleBand() .domain(d3.range(rows)) .range([0, visHeight]) .paddingInner(0.4); const column = d3 .scaleBand() .domain(d3.range(columns)) .range([0, visWidth]) .paddingInner(0.25); const x = d3 .scaleTime() .domain(d3.extent(aiddata.map(d => d.yearDate))) .range([0, column.bandwidth()]); const y = d3 .scaleLinear() .domain([0, 1]) .nice() .range([row.bandwidth(), 0]); const xAxis = d3 .axisBottom(x) .ticks(4) .tickFormat(d3.timeFormat('%Y')); const yAxis = d3 .axisLeft(y) .ticks(2) .tickFormat(d3.format('.0%')); const area = d3 .area() .x(d => x(d.data.year)) .y1(d => y(d[1])) .y0(d => y(d[0])); const cells = g .append('g') .selectAll('g') .data(dataByCountryByYearGrid) .join('g') .attr('class', 'cell') .attr('transform', d => `translate(${column(d.column)}, ${row(d.row)})`); cells .append('g') .call(xAxis) .attr('transform', `translate(0,${row.bandwidth()})`) .call(g => g.selectAll('.domain').remove()); cells .append('g') .call(yAxis) .call(g => g.selectAll('.domain').remove()); cells .append('text') .text(d => d.country) .attr('dy', -5) .attr('font-size', 10) .attr('fill', 'black') .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'baseline'); const series = cells .append('g') .selectAll('g') .data(d => dataByCountryByYearStackedMap.get(d.country)) .join('g') .attr('fill', d => color(d.key)) .append('path') .attr('d', area); svg .append('text') .attr('x', visWidth / 2) .attr('y', 0) .attr('font-family', 'sans-serif') .attr('text-anchor', 'middle') .attr('dominant-baseline', 'hanging') .text('Relative Amounts Donated and Received by Each Country by Year'); return svg.node(); }47:Tbbd,{ const margin = { top: 50, right: 20, bottom: 0, left: 100 }; const cellSize = 14; const tileWidth = yearsArray.length * cellSize; const tileHeight = allCountriesArray.length * cellSize; const visWidth = tileWidth + margin.left + margin.right; const visHeight = tileHeight + 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 = d3 .scaleBand() .domain(dataByCountryByYear.map(d => d.country)) .range([0, visHeight]) .paddingInner(0.1); const x = d3 .scaleBand() .domain(yearsArray) .range([0, visWidth]) .paddingInner(0.1); const xAxis = d3.axisTop(x).tickSize(0); g.append("g") .call(xAxis) .call(g => g.selectAll(".domain").remove()) .selectAll('text') .attr("transform", `rotate(90) translate(-${margin.top / 2}, 0)`) .attr("text-anchor", "middle") .attr("dominant-baseline", "end") .attr('dy', 7) .attr('dx', 10) .append("text") .attr("x", visWidth / 2) .attr("y", 0) .attr("fill", "black") .attr("text-anchor", "start") .attr("dominant-baseline", "end") .text("Years"); const yAxis = d3.axisLeft(y).tickSize(0); g.append("g") .call(yAxis) .call(g => g.selectAll(".domain").remove()) .selectAll('text') .attr("text-anchor", "end") .attr('dx', -2); const background = g.append('g'); background .append('rect') .attr('width', visWidth) .attr('height', visHeight) .attr('fill', '#eeeeee'); const xPaddingSize = x.step() * x.paddingInner(); const yPaddingSize = y.step() * y.paddingInner(); background .append('g') .selectAll('line') .data(yearsArray) .join('line') .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', '#eeeeee'); background .append('g') .selectAll('line') .data(dataByCountryByYear.map(d => d.country)) .join('line') .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', '#eeeeee'); g.append('g') .selectAll('rect') .data(dataByCountryByYearHeatMap) .join('rect') .attr('x', d => x(d.year)) .attr('y', d => y(d.country)) .attr('width', x.bandwidth()) .attr('height', y.bandwidth()) .attr('fill', d => heatMapColor(d.net / scale)); g.append('text') .attr('x', visWidth / 2) .attr('y', -margin.top) .attr('font-family', 'sans-serif') .attr('text-anchor', 'middle') .attr('dominant-baseline', 'hanging') .text('Net Commitment Amounts by Each Country by Year'); return svg.node(); }48:T4ed,md`## Visualization 2 Focus on the top 10 “Coalesced Purposes” of donations (in terms of amount of disbursement across all countries and all time). - What are the top 10 purposes of disbursements (in terms of total amount of disbursement) and how does their relative amount compare over time? - Are there purposes that tend to be prominent for a period of time and others that become more prominent during other periods? **Hint:** Looking at the graph one should be able to observe: “Ah! During these years donations were mostly about X but then there were way more donations about Y”. Note: if the purpose is “UNSPECIFIED” it should be removed. Unlike in visualization 1, the main focus here is to compare between countries. Therefore, we should opt for visualizations that display all the data in one chart. Again, since we're working with temporal data (and creating noninteractive visualizations), time should be on the X axis. As we saw above, heat maps and stacked area charts are appropriate and effective for such purposes. I personally find the heat map to be quite aesthetically pleasing and easy to understand. The stacked area chart is grating on the eyes, but you can identify which purpose was the most frequent for each year. `49:Ta38,{ const margin = { top: 50, right: 20, bottom: 0, left: 190 }; const cellSize = 18.5; const tileWidth = yearsArray.length * cellSize; const tileHeight = purposes.size * cellSize; const visWidth = tileWidth + margin.left + margin.right; const visHeight = tileHeight + margin.top + margin.bottom; const svg = d3 .create('svg') .attr('width', visWidth) .attr('height', visHeight); const g = svg .append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); const y = d3 .scaleBand() .domain(top10Purposes.map(d => d.purpose)) .range([0, tileHeight]) .paddingInner(0.2); const x = d3 .scaleBand() .domain(yearsArray) .range([0, tileWidth]) .paddingInner(0.2); const xAxis = d3.axisTop(x).tickSize(0); g.append("g") .call(xAxis) .call(g => g.selectAll(".domain").remove()) .selectAll('text') .attr("transform", `translate(-5, -${margin.top / 3.5}) rotate(90)`) .attr("text-anchor", "middle") .attr("dominant-baseline", "end"); const yAxis = d3.axisLeft(y).tickSize(0); g.append("g") .call(yAxis) .call(g => g.selectAll(".domain").remove()); const background = g.append('g'); background .append('rect') .attr('width', tileWidth) .attr('height', tileHeight) .attr('fill', '#eeeeee'); const xPaddingSize = x.step() * x.paddingInner(); const yPaddingSize = y.step() * y.paddingInner(); background .append('g') .selectAll('line') .data(yearsArray) .join('line') .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 .append('g') .selectAll('line') .data(purposesArray) .join('line') .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('g') .selectAll('rect') .data(purposeByYearHeatMap) .join('rect') .attr('x', d => x(d.year)) .attr('y', d => y(d.purpose)) .attr('width', x.bandwidth()) .attr('height', y.bandwidth()) .attr('fill', d => purposeIntensity(d.proportion)); g.append('text') .attr('x', tileWidth / 2) .attr('y', -margin.top) .attr('font-family', 'sans-serif') .attr('text-anchor', 'middle') .attr('dominant-baseline', 'hanging') .text('Relative Amounts Donated For Top 10 Purposes Each Year'); return svg.node(); }4a:T707,{ const margin = { top: 30, right: 10, bottom: 30, left: 85 }; const visWidth = 900 - margin.left - margin.right; const visHeight = 500 - 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 x = d3 .scaleTime() .domain(d3.extent(aiddata.map(d => d.yearDate))) .range([0, visWidth]); const y = d3 .scaleLinear() .domain([0, 1]) .nice() .range([visHeight, 0]); const area = d3 .area() .x(d => x(d.data.year)) .y1(d => y(d[1])) .y0(d => y(d[0])); const xAxis = d3.axisBottom(x); const yAxis = d3.axisLeft(y).tickFormat(d3.format('.0%')); g.append('g') .attr('transform', `translate(0, ${visHeight})`) .call(xAxis) .call(g => g.selectAll('.domain').remove()) .append('text') .attr('fill', 'black') .attr('x', visWidth / 2) .attr('y', 30) .text('Year'); g.append('g') .call(yAxis) .call(g => g.selectAll('.domain').remove()) .append('text') .attr('fill', 'black') .attr('text-anchor', 'end') .attr('x', -30) .attr('y', visHeight / 2 - 10) .text('Percentage'); const series = g .append('g') .selectAll('g') .data(stackedPurposes) .join('g') .attr('fill', d => purposeColor(d.key)) .append('path') .attr('d', area); g.append('text') .attr('x', visWidth / 2) .attr('y', -margin.top) .attr('font-family', 'sans-serif') .attr('text-anchor', 'middle') .attr('dominant-baseline', 'hanging') .text('Relative Amounts Donated For Top 10 Purposes Each Year'); return svg.node(); }4b:T533,md`## Visualization 3 Focusing exclusively on countries that receive donations, - How do donations shift geographically over time? - Do donations tend to be always in the same regions of the world over the years or they have been shifting over time? - Can you build a visualization that shows the “history of donations” so that one can get a sense of which regions of the world have had more need for donations over the years? **Note 1:** For this visualization you can, if you wish, use interaction (but you don’t have to). **Note 2**: For this exercise you may want to review the lecture on geographical visualization in which we explain how you can visualize geographical data over time. **Note 3:** If you want you can aggregate data over a few years (say, group together data at 5 year intervals). Visualizing geographical data over time is tricky. The lecture offered a few techniques: interactivity, faceting, and removing the map metaphor. I opted for the latter two in 3.1 and 3.2, respectively. In 3.1, I use small multiples of cartograms, so we're still getting geographic information, but the trends are more difficult to follow. In 3.2, I use a heat map, but use color hue to differentiate between continents. The trends are easier to comprehend, but we're losing out on the geographic information. `4c:Tc33,{ const margin = { top: 50, right: 20, bottom: 0, left: 100 }; const cellSize = 14; const tileWidth = yearsArray.length * cellSize; const tileHeight = recipientCountriesOrdered.length * cellSize; const visWidth = tileWidth + margin.left + margin.right; const visHeight = tileHeight + 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 = d3 .scaleBand() .domain(recipientCountriesOrdered) .range([0, visHeight]) .paddingInner(0.2); const x = d3 .scaleBand() .domain(yearsArray) .range([0, visWidth]) .paddingInner(0.2); const xAxis = d3.axisTop(x).tickSize(0); g.append("g") .call(xAxis) .call(g => g.selectAll(".domain").remove()) .selectAll('text') .attr("transform", `rotate(90) translate(-${margin.top / 2}, 0)`) .attr("text-anchor", "middle") .attr("dominant-baseline", "end") .attr('dy', 7) .attr('dx', 10) .append("text") .attr("x", visWidth / 2) .attr("y", 0) .attr("fill", "black") .attr("text-anchor", "start") .attr("dominant-baseline", "end") .text("Years"); const yAxis = d3.axisLeft(y).tickSize(0); g.append("g") .call(yAxis) .call(g => g.selectAll(".domain").remove()) .selectAll('text') .attr("text-anchor", "end") .attr('dx', -2) .attr('fill', d => regionColor(recipientCountriesWithRegionsMap.get(d)[0].continent) ); const background = g.append('g'); background .append('rect') .attr('width', visWidth) .attr('height', visHeight) .attr('fill', '#eeeeee'); const xPaddingSize = x.step() * x.paddingInner(); const yPaddingSize = y.step() * y.paddingInner(); background .append('g') .selectAll('line') .data(yearsArray) .join('line') .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 .append('g') .selectAll('line') .data(recipientCountries) .join('line') .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('g') .selectAll('rect') .data(donationsByCountryByYear) .join('rect') .attr('x', d => x(d.year)) .attr('y', d => y(d.country)) .attr('width', x.bandwidth()) .attr('height', y.bandwidth()) .attr('fill', d => colorsMap.get(regionColor(d.region))(d.yearlyDonationProportion) ); g.append('text') .attr('x', visWidth / 2) .attr('y', -margin.top) .attr('font-family', 'sans-serif') .attr('text-anchor', 'middle') .attr('dominant-baseline', 'hanging') .text('Percentage of Aid Received Every Year By Country'); return svg.node(); }4d:T5a3,donationsByXYearsByCountryFunction = function(aggregate_) { const map = new Map(); for (let i = 0; i < yearsArray.length; i += aggregate_) { const arr = []; const countries = new Set(); let total = 0; for (let j = 0; j < aggregate_ && i + j < yearsArray.length; j++) { const year = donationsByYearByCountryMap.get(yearsArray[i + j]); total += year.total; const iterator = year.countries.keys(); for (let k = 0; k < year.countries.size; k++) { countries.add(iterator.next().value); } arr.push(year); } const countriesArray = Array.from(countries); const aggregate = new Map(); for (let j = 0; j < arr.length; j++) { for (let k = 0; k < countriesArray.length; k++) { if (arr[j].countries.has(countriesArray[k])) { if (aggregate.has(countriesArray[k])) { let newAmount = aggregate.get(countriesArray[k]).amount + arr[j].countries.get(countriesArray[k]).amount; const obj = { amount: newAmount, proportion: newAmount / total }; aggregate.set(countriesArray[k], obj); } else { aggregate.set( countriesArray[k], arr[j].countries.get(countriesArray[k]) ); } } } } map.set(yearsArray[i], { total: total, countries: aggregate }); } return map; }4e:T434,tileCountries = { const arr = tileCountries_.slice(); const uk = {}; for (let i = 0; i < tileCountries_.length; i++) { if (arr[i].name == 'United States of America') { arr[i].name = 'United States'; } if (arr[i].name == 'Great Britain and Northern Ireland') { uk.name = 'United Kingdom'; uk.coordinates = arr[i].coordinates; uk['alpha-2'] = 'UK'; // arr[i].name = 'United Kingdom'; // arr[i]['alpha-2'] = 'UK'; } if (arr[i].name == 'Antarctica') { arr[i].coordinates = [arr[i].coordinates[0], arr[i].coordinates[1] - 1]; } } const taiwan = { name: 'Taiwan', coordinates: [25, 11] }; taiwan['alpha-2'] = 'TW'; const liechtenstein = { name: 'Liechtenstein', coordinates: [14, 7] }; liechtenstein['alpha-2'] = 'LI'; const monaco = { name: 'Monaco', coordinates: [12, 7] }; monaco['alpha-2'] = 'MO'; arr.push(taiwan); arr.push(liechtenstein); arr.push(monaco); arr.push(uk); return arr.filter(d => d.name !== 'Great Britain and Northern Ireland'); }4f:Tc67,visualization3HeatMap = function(numRows, numColumns, cellSize, aggregate) { const tileWidth = numMapColumns * numColumns * cellSize; const tileHeight = numMapRows * numRows * cellSize; const margin = { top: 40, right: 20, bottom: 10, left: 2 }; const visWidth = tileWidth + margin.left + margin.right; const visHeight = tileHeight + margin.top + margin.bottom; const svg = d3 .create('svg') .attr('width', visWidth) .attr('height', visHeight); const g = svg .append("g") .attr('transform', `translate(${margin.left}, ${margin.top})`); const row = d3 .scaleBand() .domain(d3.range(numRows)) .range([0, tileHeight]) .paddingInner(0.1); const column = d3 .scaleBand() .domain(d3.range(numColumns)) .range([0, tileWidth]) .paddingInner(0.05); const mapRow = d3 .scaleBand() .domain(d3.range(numMapRows)) .range([0, row.bandwidth()]) .padding(0.01); const mapColumn = d3 .scaleBand() .domain(d3.range(numMapColumns)) .range([0, column.bandwidth()]) .padding(0.01); const grid = d3 .cross(d3.range(numRows), d3.range(numColumns), (row_, col_) => { return { row: row_, col: col_, year: aggregateYears.get(aggregate)[row_ * numColumns + col_], countries: row_ * numColumns + col_ < yearsArray.length ? tileCountriesWithYear[row_ * numColumns + col_] : tileCountries }; }) .slice(0, Math.ceil(yearsArray.length / aggregate)); const cells = g .append('g') .selectAll('g') .data(grid) .join('g') .attr('class', 'cell') .attr('transform', d => `translate(${column(d.col)}, ${row(d.row)})`); cells .append('rect') .attr('width', column.bandwidth()) .attr('height', row.bandwidth()) .attr('fill', 'white') .attr('stroke', lightgray); cells .append('text') .attr('font-size', 12) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'baseline') .attr('dy', -5) .attr('text-anchor', 'start') .text(d => d.year) .attr('fill', 'black'); const countries = cells .selectAll('g') .data(d => d.countries) .join('g') .attr( 'transform', d => `translate(${mapColumn(d.coordinates[0]) - 5}, ${mapRow( d.coordinates[1] ) - 5})` ); countries .append('rect') .attr('width', mapRow.bandwidth()) .attr('height', mapColumn.bandwidth()) .attr('fill', d => donationsByXYears .get(aggregate) .get(1973 + ((d.year % 1973) % aggregate) * aggregate) .countries.has(d.name) ? donationColor( donationsByXYears .get(aggregate) .get(1973 + ((d.year % 1973) % aggregate) * aggregate) .countries.get(d.name).proportion ) : 'none' ) .attr('stroke', lightgray); svg .append('text') .attr('x', visWidth / 2) .attr('y', 0) .attr('font-family', 'sans-serif') .attr('text-anchor', 'middle') .attr('dominant-baseline', 'hanging') .text(visualization3Title(aggregate)); return svg.node(); }50:T54e,colorsMap = { const map = new Map(); const domain = [0, 1]; const interpolate = function(interpolator) { return d3 .scaleSequentialSqrt() .domain(domain) .interpolator(interpolator); }; const getLightColor = function(color, lColor) { const colorHSL = d3.hsl(color); colorHSL.l = d3.hsl(lColor).l; return colorHSL; }; map.set(d3.schemeCategory10[0], interpolate(d3.interpolateBlues)); // map.set(d3.schemeCategory10[1], interpolate(d3.interpolateOranges)); map.set(d3.schemeCategory10[2], interpolate(d3.interpolateGreens)); // map.set(d3.schemeCategory10[3], interpolate(d3.interpolateReds)); map.set(d3.schemeCategory10[4], interpolate(d3.interpolatePurples)); const lightorange = getLightColor( d3.interpolateOranges(0), d3.interpolateBlues(0) ); map.set( d3.schemeCategory10[1], interpolate(d3.interpolateRgb(lightorange, d3.schemeCategory10[1])) ); const lightred = getLightColor(d3.interpolateReds(0), d3.interpolateBlues(0)); map.set( d3.schemeCategory10[3], interpolate(d3.interpolateRgb(lightred, d3.schemeCategory10[3])) ); const lightbrown = getLightColor( d3.interpolateOranges(0), d3.interpolateGreens(0) ); map.set( d3.schemeCategory10[5], interpolate(d3.interpolateRgb(lightbrown, d3.schemeCategory10[5])) ); return map; }51:[{"id":"55260abbc777c0a3b8fed19f3929dd822fef9d5118b53b76b2176d20782910e599eac919999ea8ee85a60b783fd37082574f6591fd46c0d70ddf9b00df71ce27","href":"https://static.observableusercontent.com/files/55260abbc777c0a3b8fed19f3929dd822fef9d5118b53b76b2176d20782910e599eac919999ea8ee85a60b783fd37082574f6591fd46c0d70ddf9b00df71ce27","name":"countries-50m.json","type":"application/json","lastModified":1618355837957.166,"size":4177662}] 43:{"id":"77e730e756335d7c","slug":null,"title":"Mini-Project 2","thumbnail":"87d6e5e4966513ad7b68bf5202cf0353ecdcd003a976ebe097497c8f7a073644","access_level":"public","create_time":"$D2021-04-13T23:17:17.957Z","update_time":"$D2021-04-20T22:16:24.020Z","view_time":null,"first_public_time":"$D2023-07-05T14:36:12.647Z","has_unpublished_edits":null,"fork":{"id":"580b5cc6067ff142","slug":null,"title":"Mini-Project 1","owner":{"id":"130c247dbd6add4a","login":"farihasyed","name":"Fariha Syed"}},"stars":0,"starred":false,"owner":{"type":"team","id":"130c247dbd6add4a","login":"farihasyed","name":"Fariha Syed","avatar_url":"https://avatars-next.observableusercontent.com/ed23b4fb3a25635f7e5f8009e30a7d388130c282e9660c2fe7704aa6a89a4f09","tier":"starter_2024","bio":"","following":false},"version":5555,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3bd922eb76d970ac","login":"farihasyed","name":"Fariha Syed","avatar_url":"https://avatars-next.observableusercontent.com/ed23b4fb3a25635f7e5f8009e30a7d388130c282e9660c2fe7704aa6a89a4f09","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"3bd922eb76d970ac","login":"farihasyed","name":"Fariha Syed","avatar_url":"https://avatars-next.observableusercontent.com/ed23b4fb3a25635f7e5f8009e30a7d388130c282e9660c2fe7704aa6a89a4f09","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Mini-Project 2","cells":[{"id":21,"value":"md`# Mini-Project 2\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"geoJSON_ = FileAttachment(\"countries-50m.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":906,"value":"md`Clean country names to match \\`aiddata\\` and \\`geoJSON\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":917,"value":"aiddata = {\n for (let i = 0; i < aiddata_.length; i++) {\n if (aiddata_[i].donor == 'United States of America') {\n aiddata_[i].donor = 'United States';\n } else if (aiddata_[i].donor == 'Korea') {\n aiddata_[i].donor = 'South Korea';\n } else if (aiddata_[i].donor == 'Slovak Republic') {\n aiddata_[i].donor = 'Slovakia';\n }\n if (aiddata_[i].recipient == 'United States of America') {\n aiddata_[i].recipient = 'United States';\n } else if (aiddata_[i].recipient == 'Korea') {\n aiddata_[i].recipient = 'South Korea';\n } else if (aiddata_[i].recipient == 'Slovak Republic') {\n aiddata_[i].recipient = 'Slovakia';\n }\n }\n return aiddata_;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":926,"value":"geoJSON = {\n for (let i = 0; i < geoJSON_.features.length; i++) {\n if (geoJSON_.features[i].properties.NAME == \"Czechia\") {\n geoJSON_.features[i].properties.NAME = 'Czech Republic';\n } else if (\n geoJSON_.features[i].properties.NAME == 'United States of America'\n ) {\n geoJSON_.features[i].properties.NAME = 'United States';\n }\n }\n return geoJSON_;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4399,"value":"md`### 1.1 Small Multiples Stacked Area Charts\n\n**Advantages**\n- Easy to compare relative amounts\n- Relative amounts instead of net amounts as in 1.2\n\n**Disadvantages**\n- Large visualization - fits without scrolling only if viewing in full screen\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4402,"value":"swatches({ color })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2659,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4396,"value":"md`### 1.2 Heat Map\n\n**Advantages**\n- Scales better than 1.1\n- Easier to compare countries than in 1.1\n\n**Disadvantages**\n- Net amount unlike 1.1\n- Color intensity not most accurate way to encode quantitative variables\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3297,"value":"legend({\n color: heatMapColor,\n title: \"Net Commitment Amount (billions)\",\n tickFormat: '$,s'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3206,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":656,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4393,"value":"md`### 2.1 Heat Map\n\n**Advantages**\n- Easier to compare between purposes than in 2.2\n- More aesthetically pleasing than 2.2\n\n**Disadvantages**\n- Color intensity not most accurate way to encode quantitative variables\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3604,"value":"legend({\n color: purposeIntensity,\n title: \"Percentage of Aid\",\n tickFormat: '%'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3379,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4390,"value":"md`### 2.2 Stacked Area Chart\n**Advantages**\n- Position more accurate than color intensity to encode quantitative variables (see 2.1)\n\n**Disadvantages**\n- Aesthetically unpleasing even though it gets the job done\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3411,"value":"swatches({ color: purposeColor })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3407,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":657,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4383,"value":"md`### 3.1 Small Multiples of Cartograms\n\n**Advantages**\n- Map encodes geographic information better than 3.2\n\n**Disadvantages**\n- Large visualization - fits without scrolling only if viewing in full screen\n- Layout isn't easily recognizable/geographically accurate; can recognize continents, but not regions within continents\n- Color intensity not most accurate way to encode quantitative variables\n- Since using small multiples, had to aggregate data into every 5 years\n- Harder to compare between countries than 3.2\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4654,"value":"legend({\n color: donationColor,\n title: \"Percentage of Aid\",\n tickFormat: '%'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4048,"value":"visualization3HeatMap(3, 3, 11, 5)\n// visualization3HeatMap(11, 4, 8, 1) every year\n// visualization3HeatMap(2, 3, 11, 10) every decade","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4980,"value":"md`### 3.2 Heat Map\n**Advantages**\n- Easier to see and understand changes than in 3.1\n- Heat maps scale better than small multiples\n\n**Disadvantages**\n- Color intensity not most accurate way to encode quantitative variables\n- Continents used to divide countries into geographical regions, but it would be more accurate to use subregions e.g. Cyprus and Japan are a part of the same continent, but they're very far apart, and therefore do not have much in common. However, there are many subregions, so then color hue wouldn't be the best way to encode them\n- Encoding geographical information via color hue not as effective as map in 3.1\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5288,"value":"swatches({ color: regionColor })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5048,"value":"legend({\n color: d3\n .scaleSequentialSqrt()\n .domain([0, 1])\n .interpolator(d3.interpolateGreys),\n title: \"Percentage of Aid\",\n tickFormat: '%'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4984,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5397,"value":"d3.interpolatePurples(1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4685,"value":"md`## Data Transformations`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2711,"value":"donorCountries = new Set(aiddata.map(d => d.donor))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"recipientCountries = new Set(aiddata.map(d => d.recipient))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"allCountries = {\n const set = new Set();\n for (const country of donorCountries) {\n if (typeof country === 'string' || country instanceof String) {\n set.add(country);\n }\n }\n\n for (const country of recipientCountries) {\n set.add(country);\n }\n return set;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2717,"value":"scale = 1000000000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2851,"value":"allCountriesArray = Array.from(allCountries)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2901,"value":"yearsArray = Array.from(years).sort()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4688,"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":790,"value":"green = d3.schemeTableau10[4]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":793,"value":"red = d3.schemeTableau10[2]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"color = d3.scaleOrdinal(['donated', 'received'], [red, green])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2863,"value":"dataByCountryByYearMap = {\n const map = new Map();\n for (let i = 0; i < allCountriesArray.length; i++) {\n const country = allCountriesArray[i];\n const donorTransactions = aiddata_.filter(d => d.donor == country);\n const recipientTransactions = aiddata_.filter(d => d.recipient == country);\n const yearMap = new Map();\n for (let j = 0; j < yearsArray.length; j++) {\n const year = yearsArray[j];\n const donated = d3.sum(\n donorTransactions.filter(d => d.yearInt == year),\n d => d.commitment_amount\n );\n const received = d3.sum(\n recipientTransactions.filter(d => d.yearInt == year),\n d => d.commitment_amount\n );\n yearMap.set(year, { donated: donated, received: received });\n }\n map.set(country, yearMap);\n }\n return map;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2913,"value":"dataByCountryByYearDate = Array.from(dataByCountryByYearMap, ([country, years]) => {\n return {\n country: country,\n years: Array.from(years, ([year, amounts]) => {\n return {\n year: new Date(year, 0, 1),\n country: country,\n donated: amounts.donated,\n received: amounts.received,\n total: amounts.donated + amounts.received,\n net:\n amounts.donated + amounts.received !== 0\n ? amounts.received - amounts.donated\n : null,\n netProportion:\n amounts.donated + amounts.received > 0\n ? (amounts.received - amounts.donated) /\n (amounts.donated + amounts.received)\n : null\n };\n })\n };\n}).sort(\n (a, b) =>\n d3.sum(b.years, d => d.netProportion) -\n d3.sum(a.years, d => d.netProportion)\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4336,"value":"dataByCountryByYear = Array.from(dataByCountryByYearMap, ([country, years]) => {\n return {\n country: country,\n years: Array.from(years, ([year, amounts]) => {\n return {\n year: year,\n country: country,\n donated: amounts.donated,\n received: amounts.received,\n total: amounts.donated + amounts.received,\n net:\n amounts.donated + amounts.received !== 0\n ? amounts.received - amounts.donated\n : 0,\n netProportion:\n amounts.donated + amounts.received > 0\n ? (amounts.received - amounts.donated) /\n (amounts.donated + amounts.received)\n : 0\n };\n })\n };\n}).sort(\n (a, b) =>\n d3.sum(b.years, d => d.netProportion) -\n d3.sum(a.years, d => d.netProportion)\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2924,"value":"dataByCountryByYearStacked = dataByCountryByYearDate.map(d =>\n d3\n .stack()\n .keys(['donated', 'received'])\n .offset(d3.stackOffsetExpand)(d.years)\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4299,"value":"years = new Set(aiddata_.map(d => d.yearDate.getFullYear()))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4327,"value":"yearDates = yearsArray.map(d => new Date(d, 0, 1))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3527,"value":"dataByCountryByYearStackedMap = {\n const map = new Map();\n for (let i = 0; i < dataByCountryByYearStacked.length; i++) {\n const country = dataByCountryByYearStacked[i][0][0].data.country;\n map.set(country, dataByCountryByYearStacked[i]);\n }\n return map;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3216,"value":"dataByCountryByYearHeatMap = dataByCountryByYear\n .map(d => d3.cross([d.country], d.years).map(d => d[1]))\n .flat()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3289,"value":"netExtent = d3.extent(dataByCountryByYearHeatMap, d => d.net)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3292,"value":"maxNet = d3.max(netExtent.map(d => Math.abs(d))) / scale","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3239,"value":"heatMapColor = d3\n .scaleDivergingSymlog([-maxNet, 0, maxNet], [red, 'white', green])\n .unknown('#eeeeee')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2427,"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":3327,"value":"top10Purposes = Array.from(\n d3.rollup(\n aiddata_,\n v => d3.sum(v, d => d.commitment_amount) / scale,\n d => d.coalesced_purpose_name\n ),\n ([purpose, count]) => ({ purpose, count })\n)\n .sort((a, b) => d3.descending(a.count, b.count))\n .filter(d => d.purpose != 'Sectors not specified')\n .slice(0, 10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3339,"value":"purposes = new Set(top10Purposes.map(d => d.purpose))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3371,"value":"purposesArray = Array.from(purposes)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3338,"value":"purposeByYearMap = d3.rollup(\n aiddata.filter(d => purposes.has(d.coalesced_purpose_name)),\n v => d3.sum(v, d => d.commitment_amount) / scale,\n d => d.yearInt,\n d => d.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":3366,"value":"purposeByYearHeatMap = {\n const arr = [];\n for (let i = 0; i < yearsArray.length; i++) {\n const year = yearsArray[i];\n const yearMap = purposeByYearMap.get(year);\n const yearArr = Array.from(yearMap, ([purpose, amount]) => ({\n purpose,\n amount\n }));\n const yearTotal = d3.sum(yearArr, d => d.amount);\n for (let j = 0; j < purposesArray.length; j++) {\n const purpose = purposesArray[j];\n const obj = { year: yearsArray[i], purpose: purpose };\n if (yearMap.has(purpose)) {\n obj.amount = yearMap.get(purpose);\n obj.proportion = obj.amount / yearTotal;\n } else {\n obj.amount = 0;\n obj.proportion = 0;\n }\n arr.push(obj);\n }\n }\n\n return arr;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3389,"value":"purposeIntensity = d3\n .scaleSequentialSqrt()\n .domain([0, 1])\n .interpolator(d3.interpolateBlues)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3402,"value":"purposeByYear = Array.from(purposeByYearMap, ([year, purposes_]) => {\n const obj = { year: new Date(year, 0, 1) };\n for (let i = 0; i < purposesArray.length; i++) {\n const purpose = purposesArray[i];\n if (!purposes.has(purpose)) {\n continue;\n }\n if (purposes_.has(purpose)) {\n obj[purpose] = purposes_.get(purpose);\n } else {\n obj[purpose] = 0;\n }\n }\n return obj;\n}).sort((a, b) => d3.ascending(a.year, b.year))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3397,"value":"stackedPurposes = d3\n .stack()\n .keys(purposes)\n .offset(d3.stackOffsetExpand)(purposeByYear)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3409,"value":"purposeColor = d3\n .scaleOrdinal()\n .domain(purposesArray)\n .range(d3.schemeCategory10)\n .unknown('#eeeeee')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4728,"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":3616,"value":"dataByYear = Array.from(\n d3.rollup(aiddata_, v => v, d => d.yearInt),\n ([year, transactions]) => ({\n year,\n transactions\n })\n).sort((a, b) => d3.ascending(a.year, b.year))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3650,"value":"donationsByYearByCountryMap = new Map(\n dataByYear.map(d => {\n const obj = {};\n obj.year = d.year;\n const map = d3.rollup(\n d.transactions,\n v => (d3.sum(v, f => f.commitment_amount) / scale) * 100,\n e => e.recipient\n );\n const arr = Array.from(map, ([country, amount]) => ({ country, amount }));\n obj.total =\n (d3.sum(d.transactions, d => d.commitment_amount) / scale) * 100;\n\n const newMap = new Map();\n for (let i = 0; i < arr.length; i++) {\n arr[i].proportion = arr[i].amount / obj.total;\n newMap.set(arr[i].country, {\n amount: arr[i].amount,\n proportion: arr[i].proportion\n });\n }\n obj.countries = newMap;\n\n return [d.year, obj];\n })\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4756,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4051,"value":"donationsByXYears = {\n const map = new Map();\n map.set(1, donationsByYearByCountryMap);\n map.set(5, donationsByXYearsByCountryFunction(5));\n map.set(7, donationsByXYearsByCountryFunction(10));\n map.set(10, donationsByXYearsByCountryFunction(10));\n return map;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3636,"value":"tileCountries_ = d3.json(\n 'https://raw.githubusercontent.com/mustafasaifee42/Tile-Grid-Map/master/Tile-Grid-Map-Cleaned.json'\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3638,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3813,"value":"tileCountriesWithYear = {\n let arr = [];\n for (let i = 0; i < yearsArray.length; i++) {\n let countries = tileCountries.map(a => Object.assign({}, a));\n for (let j = 0; j < countries.length; j++) {\n countries[j].year = yearsArray[i];\n }\n arr.push(countries);\n }\n return arr;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3683,"value":"donationColor = d3\n .scaleSequentialSqrt()\n .domain([0, 1])\n .interpolator(d3.interpolateBlues)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3664,"value":"numMapRows = d3.max(tileCountries, d => d.coordinates[1]) + 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3666,"value":"numMapColumns = d3.max(tileCountries, d => d.coordinates[0]) + 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4135,"value":"aggregateYearsFunction = function(aggregate){\n let year = 0;\n let arr = [];\n for (let i = 0; i < yearsArray.length; i += aggregate) {\n const label =\n i + aggregate - 1 < yearsArray.length\n ? yearsArray[i] + '-' + yearsArray[i + aggregate - 1]\n : yearsArray[i];\n arr.push(label);\n }\n return arr;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4742,"value":"aggregateYears = {\n const map = new Map();\n map.set(1, yearsArray);\n map.set(5, aggregateYearsFunction(5));\n map.set(7, aggregateYearsFunction(7));\n map.set(10, aggregateYearsFunction(10));\n return map;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4788,"value":"visualization3Title = function(aggregate) {\n return aggregate == 1\n ? 'Percentage of Aid Received Each Year by Country'\n : 'Percentage of Aid Received Every ' + aggregate + ' Years By Country';\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4795,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5120,"value":"recipientCountriesWithRegionsMap = d3.group(\n geoJSON.features\n .filter(d => recipientCountries.has(d.properties.NAME))\n .map(d => {\n return {\n country: d.properties.NAME,\n continent: d.properties.CONTINENT,\n UN_region: d.properties.REGION_UN,\n WB_region: d.properties.REGION_WB,\n region: d.properties.SUBREGION\n };\n }),\n d => d.country\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5011,"value":"donationsByCountryByYear = dataByCountryByYearHeatMap\n .filter(d => recipientCountries.has(d.country))\n .map(d => {\n d.yearlyDonationProportion =\n ((d.received / scale) * 100) / donationsByXYears.get(1).get(d.year).total;\n d.region = recipientCountriesWithRegionsMap.get(d.country)[0].continent;\n return d;\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5106,"value":"regions = new Set(donationsByCountryByYear.map(d => d.region))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5111,"value":"regionColor = d3\n .scaleOrdinal()\n .domain(regions)\n .range(d3.schemeCategory10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5236,"value":"regionsOrder = {\n const map = new Map();\n let iterator = regions.keys();\n for (let i = 0; i < regions.size; i++) {\n map.set(iterator.next().value, i);\n }\n return map;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5059,"value":"recipientCountriesOrdered = Array.from(\n d3.rollup(\n donationsByCountryByYear,\n v => d3.sum(v, d => d.yearlyDonationProportion),\n d => d.country\n ),\n ([country, proportion]) => ({ country, proportion })\n)\n .sort((a, b) =>\n d3.ascending(\n regionsOrder.get(\n recipientCountriesWithRegionsMap.get(a.country)[0].continent\n ),\n regionsOrder.get(\n recipientCountriesWithRegionsMap.get(b.country)[0].continent\n )\n )\n )\n .map(d => d.country)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5227,"value":"$50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"md`-----------------\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":685,"value":"lightgray = '#dcdcdc'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W51","stdlib":"1"}} 44:"$43:body"