3e:null 3f:["$","title",null,{"children":"Mini-Project 2 Final | Fariha Syed | Observable"}] 45:T68b,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. In 1.1, I used area charts because we're working with temporal data, and they are appropriate to have time on the X-axis. Initially, I use stacked area charts of the relative amounts each country donated/received. After our discussion in class, however, Professor Bertini recommended we use area charts and scale locally i.e. don't use relative amounts and use different axes for each country as appropriate. I had chosen to visualize relative amounts because I felt the scale would otherwise be dominated by America, Japan, and India, who donate (the former two) and receive (the latter) the most, but we decided that the actual magnitudes are more important for this question. In addition to the area charts, I chose to do a heat map (1.2) because small multiples area charts don't scale very well in this context. 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:Tfab,{ 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 row = d3 .scaleBand() .domain(d3.range(rows)) .range([0, visHeight]) .paddingInner(0.35); const column = d3 .scaleBand() .domain(d3.range(columns)) .range([0, visWidth]) .paddingInner(0.3); const x = d3 .scaleTime() .domain(d3.extent(aiddata.map(d => d.yearDate))) .range([0, column.bandwidth()]); const data = Object.fromEntries( dataByCountryByYearDate .slice() .sort((a, b) => d3.descending(d3.sum(a.years, d => d.net), d3.sum(b.years, d => d.net)) ) .map(d => { const donatedMax = d3.max(d.years, e => e.donated); const receivedMax = d3.max(d.years, e => e.received); const max = Math.max(donatedMax, receivedMax); const y = d3 .scaleLinear() .domain([-max, max]) .range([row.bandwidth(), 0]); const donate = { area: d3 .area() .x(d => x(d.year)) .y1(d => y(-d.donated)) .y0(d => y(0)) }; const receive = { area: d3 .area() .x(d => x(d.year)) .y1(d => y(d.received)) .y0(d => y(0)) }; d.donate = donate; d.receive = receive; return [d.country, { y: y, receive: receive, donate: donate }]; }) ); const dataByCountryByYearGrid = d3 .zip(dataByCountryByYearDate, grid) .map(([{ country, years }, { row, column }]) => ({ country, years, row, column })); const xAxis = d3 .axisBottom(x) .ticks(4) .tickFormat(d3.timeFormat('%Y')); 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('path') .attr('d', d => data[d.country].receive.area(d.years)) .attr('fill', purple); cells .append('path') .attr('d', d => data[d.country].donate.area(d.years)) .attr('fill', orange); cells.each(function(d) { const group = d3.select(this); const axis = d3 .axisLeft(data[d.country].y) .ticks(3) .tickFormat(d3.format('~s')) .tickSizeOuter(0); group.call(axis).call(g => g.selectAll('.domain').remove()); }); cells .append('rect') .attr('width', column.bandwidth()) .attr('height', row.bandwidth()) .attr('fill', 'none') .attr('stroke', lightgray); cells .append('line') .attr('x1', 0) .attr('x2', column.bandwidth()) .attr('y1', row.bandwidth() / 2) .attr('y2', row.bandwidth() / 2) .attr('stroke', lightgray); // cells .append('g') .call(xAxis) .attr('transform', `translate(0, ${row.bandwidth()})`) .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('text-anchor', 'start') .attr('dominant-baseline', 'baseline'); svg .append('text') .attr('x', visWidth / 2) .attr('y', 0) .attr('font-family', 'sans-serif') .attr('text-anchor', 'middle') .attr('dominant-baseline', 'hanging') .text('Amounts Donated and Received by Country from 1973-2013'); return svg.node(); }47:Tbbe,{ 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 Country for 1973-2013'); return svg.node(); }48:T557,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. Therefore, we should opt for visualizations that make it easy to do so. 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. Initially, for 2.2, I used a single stacked area chart to display all the purposes. However, after our discussion in class, small multiple area charts were recommended. Although using small multiples makes it a little difficult to compare between purposes, the single stacked area chart was grating on the eyes, so it's a worthwhile tradeoff. `49:Ta3c,{ 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 for 1973-2013'); return svg.node(); }4a:Tc0b,{ const margin = { top: 40, right: 20, bottom: 30, left: 30 }; const visWidth = width - margin.left - margin.right; const visHeight = 700 - margin.top - margin.bottom; const svg = d3 .create('svg') .attr('width', visWidth + margin.left + margin.right) .attr('height', visHeight + margin.top + margin.bottom); const g = svg .append("g") .attr('transform', `translate(${margin.left}, ${margin.top})`); const rows = 3; const columns = 3; const positions = d3.cross( d3.range(rows), d3.range(columns), (row, column) => ({ row, column }) ); const grid = d3 .zip(Array.from(dataByPurposeByYear), positions) .map(([{ purpose, years }, { row, column }]) => ({ purpose, years, row, column })); const row = d3 .scaleBand() .domain(d3.range(rows)) .range([0, visHeight]) .paddingInner(0.2); const column = d3 .scaleBand() .domain(d3.range(columns)) .range([0, visWidth]) .paddingInner(0.15); const x = d3 .scaleTime() .domain(d3.extent(aiddata.map(d => d.yearDate))) .range([0, column.bandwidth()]); const y = d3 .scaleLinear() .domain(purposeExtent) .nice() .range([row.bandwidth(), 0]); const xAxis = d3 .axisBottom(x) .ticks(8) .tickFormat(d3.timeFormat('%Y')); const yAxis = d3.axisLeft(y).ticks(4); const area = d3 .area() .x(d => x(d.year)) .y1(d => y(d.amount)) .y0(d => y(0)); const cells = g .append('g') .selectAll('g') .data(grid) .join('g') .attr('class', 'row') .attr('fill', d => purposeColor(d.purpose)) .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()) .append('text') .attr('fill', 'black') .attr('x', column.bandwidth() / 2) .attr('dy', 30) .attr('font-family', 'sans-serif') .attr('text-anchor', 'middle') .attr('dominant-baseline', 'baseline') .text('Year'); cells .append('g') .call(yAxis) .call(g => g.selectAll('.domain').remove()) .append('text') .attr('transform', `translate(-20, ${row.bandwidth() / 2}) rotate(-90)`) .attr('fill', 'black') .attr('font-family', 'sans-serif') .attr('text-anchor', 'middle') .attr('dominant-baseline', 'baseline') .text('Commitment Amount (billions)'); cells .append('text') .text(d => d.purpose) .attr('dy', 5) .attr('dx', -10) .attr('font-size', 10) .attr('fill', 'black') .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'baseline'); cells .append('path') .datum(d => d.years) .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('Amount Donated For Top 10 Purposes for 1973-2013'); return svg.node(); }4b:T649,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. Initially, I opted for the latter two. However, when reviewing our sketches, Professsor Bertini recommended against faceting because of how the data is distributed. Donations do not drastically change from year to year, so it was difficult to see which countries changed between the small multiples. Therefore, I'm only submitting the solution that removes the map metaphor. Color hue differentiates between continents, while color intensity encodes the relative amount of aid received by a country in a given year. The trends are much easier to comprehend, but we're not getting the full geographical information that we would from a map. `4c:Tc2d,{ 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 by Country for 1973-2013'); 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: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; }4f:[{"id":"55260abbc777c0a3b8fed19f3929dd822fef9d5118b53b76b2176d20782910e599eac919999ea8ee85a60b783fd37082574f6591fd46c0d70ddf9b00df71ce27","href":"https://static.observableusercontent.com/files/55260abbc777c0a3b8fed19f3929dd822fef9d5118b53b76b2176d20782910e599eac919999ea8ee85a60b783fd37082574f6591fd46c0d70ddf9b00df71ce27","name":"countries-50m.json","type":"application/json","lastModified":1618956890391.77,"size":4177662}] 43:{"id":"c23468126a360d73","slug":null,"title":"Mini-Project 2 Final","thumbnail":"121eb6a035995953954cd4b7368818c88c8c39bf68e00315a55fb7e8c568ce86","access_level":"public","create_time":"$D2021-04-20T22:14:50.391Z","update_time":"$D2021-04-23T18:50:34.658Z","view_time":null,"first_public_time":"$D2023-07-05T14:36:14.359Z","has_unpublished_edits":null,"fork":{"id":"77e730e756335d7c","slug":null,"title":"Mini-Project 2","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":6065,"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":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Mini-Project 2 Final","cells":[{"id":21,"value":"md`# Mini-Project 2 Final\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 Area Charts\n\n**Advantages**\n- Actual magnitudes\n- Easy to see changes in amounts donated/received in each country\n- Area more accurate than color intensity in encoding quantitative variables (see 1.2)\n\n**Disadvantages**\n- Large visualization - have to scroll to see everything\n- Scaled locally\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":5715,"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 between countries than 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- Compact visualization that will scale well if we choose to increase number of purposes\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- Small multiples makes it a little more difficult to compare between purposes, but using a single stacked area chart for all purposes was hideous\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5696,"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":5552,"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":4980,"value":"md`### 3.1 Heat Map\n**Advantages**\n- Easier to see and understand changes than small multiples map due to data distribution\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 maps\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":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":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":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":5499,"value":"purple = '#a783c9'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5500,"value":"orange = '#ffa04d'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5523,"value":"darkPurple = '#673e8e'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5525,"value":"darkOrange = '#cc5f00'","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'], [orange, purple])","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(\n dataByCountryByYearMap,\n ([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 : 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 }\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], [darkOrange, 'white', darkPurple])\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":5623,"value":"purposeExtent = d3.extent(purposeByYearHeatMap, d => d.amount)","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":5574,"value":"dataByPurposeByYear = {\n const arr = [];\n for (let i = 0; i < purposesArray.length; i++) {\n const obj = { purpose: purposesArray[i], years: [] };\n for (let j = 0; j < yearsArray.length; j++) {\n obj.years.push({\n year: new Date(yearsArray[j], 0, 1),\n purpose: purposesArray[i],\n amount: purposeByYear.filter(\n d => d.year.getFullYear() == yearsArray[j]\n )[0][purposesArray[i]]\n });\n }\n obj.years.sort((a, b) => d3.ascending(a.year, b.year));\n arr.push(obj);\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":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":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":"$4e","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":"$W4f","stdlib":"1"}} 44:"$43:body"