3e:null 3f:["$","title",null,{"children":"Mini-Project 1 | Fariha Syed | Observable"}] 45:T4f2,md`## Visualization 1 How do the countries compare in terms of how much they receive and donate? Are there countries that donate much more than they receive or receive much more than they donate? Since we're dealing with countries, it's easy to jump to a visualization that uses maps. However, as we discussed during lecture, we shouldn't overuse maps. This question doesn't ask about a country's geographical information. Therefore, I opted not to use maps in any of my visualizations for this question. Since we're comparing quantitative amounts, bar charts are particularly appropriate and effective (1.2 and 1.3). However, I was afraid they wouldn't scale well with the number of countries in our data (about 45), which is why I also chose to do small multiples (1.1). When choosing what type of small multiple to do, I felt that bar charts wouldn't be particularly effective because, as we sese in 1.2 and 1.3, the y-axis scale is dominated by 3 countries. To allow for comparisons, I'd have to maintain the same scale, and we'd barely be able to see the countries that donate/receive less. Therefore, I chose pie charts, where the angle of each slice will relate the relative amounts, and the size of the pie chart itself will relate the actual magnitude. `46:T717,{ const margin = { top: 40, right: 10, bottom: 10, left: 10 }; const visWidth = 500 - margin.left - margin.right; const visHeight = 100 - 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 col = d3 .scaleBand() .domain(d3.range(6)) .range([0, visWidth]); const data = [ [ { type: 'donation', amount: 50, total: 1 }, { type: 'received', amount: 50, total: 1 } ], [ { type: 'donation', amount: 50, total: 5 }, { type: 'received', amount: 50, total: 5 } ], [ { type: 'donation', amount: 50, total: 25 }, { type: 'received', amount: 50, total: 25 } ], [ { type: 'donation', amount: 50, total: 50 }, { type: 'received', amount: 50, total: 50 } ], [ { type: 'donation', amount: 50, total: 100 }, { type: 'received', amount: 50, total: 100 } ], [ { type: 'donation', amount: 50, total: 125 }, { type: 'received', amount: 50, total: 125 } ] ]; const legend = g .append("g") .selectAll("g") .data(data) .join("g") .attr("transform", (d, i) => `translate(${col(i)}, 0)`); legend .selectAll('path') .data(d => pieSM(d)) .join('path') .attr('d', d => arcSM(d)) .attr('fill', d => color(d.data.type)); legend .append("text") .attr("font-family", "sans-serif") .attr("font-size", 12) .attr("dominant-baseline", "baseline") .text('text-anchor', 'middle') .attr('dx', -margin.left) .attr("dy", maxRadius + 15) .text(d => d[0].total + 'B'); return svg.node(); }47:T46c,{ const svg = d3 .create('svg') .attr('width', pieWidth + pieMargin.left + pieMargin.right) .attr('height', pieHeight + pieMargin.top + pieMargin.bottom); const g = svg .append('g') .attr('transform', `translate(${pieMargin.left}, ${pieMargin.top})`); g.append('text') .attr('x', (pieWidth - pieMargin.left * 2) / 2) .attr('y', -pieMargin.top) .attr('font-family', 'sans-serif') .attr('text-anchor', 'middle') .attr('dominant-baseline', 'hanging') .text(visualization1Title); const pieGroups = g .append('g') .selectAll('g') .data(aidDataWithGrid) .join('g') .attr('transform', d => `translate(${pieColumn(d.col)}, ${pieRow(d.row)})`); pieGroups .selectAll('path') .data(d => pieSM(d.amounts)) .join('path') .attr('d', d => arcSM(d)) .attr('fill', d => color(d.data.type)); pieGroups .append('text') .attr('font-size', '12px') .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'hanging') .attr('text-anchor', 'middle') .attr('y', maxRadius + 5) .text(d => d.country); return svg.node(); }48:T988,{ const margin = { top: 20, right: 0, bottom: 100, left: 50 }; const visWidth = width - margin.left - margin.right; const visHeight = 600 - margin.top - margin.bottom; const svg = d3 .create('svg') .attr('width', visWidth + margin.left + margin.right) .attr('height', visHeight + margin.top + margin.bottom); const g = svg .append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); 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(visualization1Title); const group = d3 .scaleBand() .domain(sortedCountries) .range([0, visWidth]) .padding(0.1); const y = d3 .scaleLinear() .domain(amountExtent) .nice() .range([visHeight, 0]); const x = d3 .scaleBand() .domain(['donation', 'received']) .range([0, group.bandwidth()]) .padding(0.2); const grid = g.append("g").attr("class", "grid"); grid .append("g") .selectAll("line") .data(y.ticks()) .join("line") .attr("stroke", lightgray) .attr("x1", 0) .attr("x2", visWidth) .attr("y1", d => 0.5 + y(d)) .attr("y2", d => 0.5 + y(d)); const xAxis = d3.axisBottom(group); const yAxis = d3.axisLeft(y).tickArguments([10, '$,B']); g.append('g') .attr('transform', `translate(0,${visHeight})`) .call(xAxis) .call(g => g.selectAll('.domain').remove()) .selectAll('text') .attr('dx', '1em') .attr("dy", -x.bandwidth()) .attr("transform", "rotate(90)") .attr('text-anchor', 'start') .attr('dominant-baseline', 'baseline'); g.append('g') .call(yAxis) .call(g => g.selectAll('.domain').remove()) .append('text') .attr('text-anchor', 'start') .attr('dominant-baseline', 'baseline') .attr('fill', 'black') .attr('x', 5) .attr('dy', -2) .text('Commitment Amount (billions)'); const groups = g .append('g') .selectAll('g') .data(aidDataSorted) .join('g') .attr('transform', d => `translate(${group(d.country)}, 0)`); groups .selectAll('rect') .data(d => d.amounts) .join('rect') .attr('fill', d => color(d.type)) .attr('y', d => y(d.amount)) .attr('height', d => visHeight - y(d.amount)) .attr('x', d => x(d.type)) .attr('width', x.bandwidth()); return svg.node(); }49:Ta44,{ const margin = { top: 30, right: 20, bottom: 30, left: 20 }; const visWidth = width - margin.left - margin.right; const visHeight = 650 - margin.top - margin.bottom; const svg = d3 .create('svg') .attr('width', visWidth + margin.left + margin.right) .attr('height', visHeight + margin.top + margin.bottom); const g = svg .append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); g.append('text') .attr('x', visWidth / 2) .attr('y', -margin.top) .attr('font-family', 'sans-serif') .attr('text-anchor', 'middle') .attr('dominant-baseline', 'hanging') .text(visualization1Title); const x = d3 .scaleLinear() .domain([-amountExtent[1], amountExtent[1]]) .nice() .range([-visWidth / 2, visWidth / 2]); const y = d3 .scaleBand() .domain(sortedCountries) .range([0, visHeight]) .padding(0.1); const grid = g.append("g").attr("class", "grid"); grid .append("g") .selectAll("line") .data(x.ticks()) .join("line") .attr("stroke", lightgray) .attr("x1", d => visWidth / 2 - x(d)) .attr("x2", d => visWidth / 2 - x(d)) .attr("y1", d => 0) .attr("y2", d => visHeight); grid .append("g") .selectAll("line") .data(x.ticks()) .join("line") .attr("stroke", lightgray) .attr("x1", d => 0.5 + x(d)) .attr("x2", d => 0.5 + x(d)) .attr("y1", d => 0) .attr("y2", d => visHeight); const groups = g .append('g') .selectAll('g') .data(aidDataSorted) .join('g') .attr('transform', d => `translate(0, ${y(d.country)})`); groups .selectAll('rect') .data(d => d.amounts) .join('rect') .attr('fill', d => color(d.type)) .attr('x', d => d.type == 'donation' ? visWidth / 2 - x(d.amount) : visWidth / 2 ) .attr('width', d => x(d.amount)) .attr('y', d => y(d.country)) .attr('height', y.bandwidth()); const xAxis = d3.axisBottom(x).tickArguments([10, '$,s']); const yAxis = d3.axisRight(y); g.append('g') .attr('transform', `translate(${visWidth / 2}, ${visHeight})`) .call(xAxis) .call(g => g.selectAll('.domain').remove()) .append('text') .attr('text-anchor', 'middle') .attr('dominant-baseline', 'hanging') .attr('fill', 'black') .attr('x', 0) .attr('y', 20) .text('Commitment Amount (billions)'); g.append('g') .call(yAxis) .attr('transform', `translate(${visWidth / 2}, 0)`) .call(g => g.selectAll('.domain').remove()) .selectAll('text') .attr('fill', (d, i) => (i >= 40 ? 'white' : 'black')); return svg.node(); }4a:T516,md`----------------- ## Visualization 2 Do the countries that mostly receive or mostly donate tend to cluster around specific geographical areas of the world? Are there neighboring countries that have radically different patterns in terms of how much they receive vs. how much they donate? Since the question asks about geographical information, maps are appropriate. With maps, we can encode quantitatve information in several ways, but the primary method is color intensity. However, color intensity can only encode one quantitative variable at a time, so I had to determine the net commitment amount for each country (2.2 and 2.3). If I wanted to encode both donation and received amounts, the best way would be to create small multiples of one of the types graphs in visualization 1 (2.1 and 2.4). Pie charts are better in this situation than bar charts for the same reasons mentioned above. In 2.3, I ran into a problem where countries that receive/donate smaller amounts--even if they mostly donated or mostly receieved--were close to white because their net commitment amount magnitude was so small. This is a problem in 2.2 as well, but less obvious because it affected small European countries. Therefore, I outlined countries that receive more in green and those that donate more in red. `4b:T452,{ const svg = d3 .create('svg') .attr('width', mapWidth + margin.left + margin.right) .attr('height', mapHeight + margin.bottom + margin.top); const g = svg .append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); g.selectAll('path') .data(geoJSON.features) .join('path') .attr('d', path) .attr('fill', lightgray) .attr('stroke', 'white'); g.append('path') .attr('d', path(mapOutline)) .attr('stroke', lightgray) .attr('fill', 'none'); g.append('text') .attr('x', mapWidth / 2) .attr('y', 0) .attr('font-family', 'sans-serif') .attr('text-anchor', 'middle') .attr('dominant-baseline', 'hanging') .text('Relative ' + visualization1Title); const groups = g .selectAll('g') .data(geoJSONCountries) .join('g') .attr('transform', d => `translate(${path.centroid(d)})`); groups .selectAll('path') .data(d => pie(aidDataMap.get(d.properties.NAME).amounts)) .join('path') .attr('d', arc(pieRadius)) .attr('fill', d => color(d.data.type)); return svg.node(); }4c:T406,{ const svg = d3 .create('svg') .attr('width', mapWidth + margin.left + margin.right) .attr('height', mapHeight + margin.top + margin.bottom); const g = svg .append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); g.selectAll('path') .data(geoJSON.features) .join('path') .attr('d', path) .attr('fill', '#f0f0f0') .attr('stroke', 'white'); g.append('path') .attr('d', path(mapOutline)) .attr('stroke', lightgray) .attr('fill', 'none'); g.selectAll('.border') .data(geoJSONCountries) .join('path') .attr('class', 'border') .attr('d', path) .attr('fill', d => differenceColor(difference(aidDataMap.get(d.properties.NAME).amounts)) ) .attr('stroke', d => 'white'); g.append('text') .attr('x', mapWidth / 2) .attr('y', -margin.top) .attr('font-family', 'sans-serif') .attr('text-anchor', 'middle') .attr('dominant-baseline', 'hanging') .text(visualization2Title); return svg.node(); }4d:T57f,{ const svg = d3 .create('svg') .attr('width', tileWidth) .attr('height', tileHeight); const cells = svg .selectAll('g') .data(aidDataTileAll) .join('g') .attr( 'transform', d => `translate(${column(d.coordinates[0])}, ${row(d.coordinates[1])})` ); cells .append('rect') .attr('width', column.bandwidth()) .attr('height', row.bandwidth()) .attr('fill', d => aidDataMap.has(d.name) ? differenceColor(difference(d.amounts)) : 'none' ) .attr('stroke', d => aidDataMap.has(d.name) ? difference(d.amounts) > 0 ? green : red : lightgray ); cells .append('text') .attr('font-size', 12) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .attr('text-anchor', 'middle') .attr('x', column.bandwidth() / 2) .attr('y', row.bandwidth() / 2) .text(d => d['alpha-2']) .attr('fill', d => aidDataMap.has(d.name) ? Math.abs(difference(d.amounts)) > 100 //d3.hsl(differenceColor(difference(d.amounts))).l < 0.5 ? 'white' : 'black' : lightgray ); svg .append('text') .attr('x', tileWidth / 2) .attr('y', 0) .attr('font-family', 'sans-serif') .attr('text-anchor', 'middle') .attr('dominant-baseline', 'hanging') .text(visualization2Title); return svg.node(); }4e:T5f5,{ const svg = d3 .create('svg') .attr('width', tileWidth) .attr('height', tileHeight); const cells = svg .selectAll('g') .data(aidDataTileAll) .join('g') .attr( 'transform', d => `translate(${column(d.coordinates[0])}, ${row(d.coordinates[1])})` ); cells .append('circle') .attr('r', cellSize / 2) .attr('cx', column.bandwidth() / 2) .attr('cy', row.bandwidth() / 2) .attr('fill', 'none') .attr('stroke', d => (aidDataMap.has(d.name) ? 'none' : lightgray)); const groups = cells .selectAll('g') .data(aidDataTileAll) .join('g'); groups .append('path') .data(d => (aidDataMap.has(d.name) ? pie(d.amounts) : 0)) .join('path') .attr('d', arc(cellSize / 2)) .attr('fill', d => color(d.data.type)) .attr( 'transform', d => `translate(${column.bandwidth() / 2}, ${row.bandwidth() / 2})` ); cells .append('text') .attr('font-size', 12) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .attr('text-anchor', 'middle') .attr('x', column.bandwidth() / 2) .attr('y', row.bandwidth() / 2) .text(d => d['alpha-2']) .attr('fill', d => (aidDataMap.has(d.name) ? 'white' : lightgray)); svg .append('text') .attr('x', tileWidth / 2) .attr('y', 0) .attr('font-family', 'sans-serif') .attr('text-anchor', 'middle') .attr('dominant-baseline', 'hanging') .text('Relative ' + visualization1Title); return svg.node(); }4f:T41c,md`----------------- ## Visualization 3 Are there any major differences in how the top 5 most frequent purposes of disbursements (across all countries) distribute geographically in terms of countries that receive donations? Are there countries that tend to receive more of certain types of donations than others? **Note:** It would be more interesting to look at the top 5 purposes locally, for each individual country but visualizing the results may be even harder. If you want to try out a solution for this harder case it would be nice to see it. This question is quite similar to that of visualization 2, and there are many parallels. First and foremost, since the questions asks about geographical information, we'll use maps. Secondly, we can draw parallels between the commitment types and purposes. However, we can't reduce purposes into a single variable like we did in visualization 2 with commitment types, so we'll have to stick with pie charts. Therefore, we can use the format of visualizations 2.1 and 2.4 to answer this question. `50:T4b9,{ const svg = d3 .create('svg') .attr('width', mapWidth + margin.left + margin.right) .attr('height', mapHeight + margin.top + margin.bottom); const g = svg .append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); g.selectAll('path') .data(geoJSON.features) .join('path') .attr('d', path) .attr('fill', lightgray) .attr('stroke', 'white'); g.append('path') .attr('d', path(mapOutline)) .attr('stroke', lightgray) .attr('fill', 'none'); const groups = g .selectAll('g') .data( geoJSONCountries.filter(d => recipientCountries.has(d.properties.NAME)) ) .join('g') .attr('transform', d => `translate(${path.centroid(d)})`); groups .selectAll('path') .data(d => purposePie(top5PurposesByCountryMap.get(d.properties.NAME).purposes) ) .join('path') .attr('d', arc(pieRadius)) .attr('fill', d => purposeColor(d.data.purpose)); svg .append('text') .attr('x', mapWidth / 2) .attr('y', 0) .attr('font-family', 'sans-serif') .attr('text-anchor', 'middle') .attr('dominant-baseline', 'hanging') .text(visualization3Title); return svg.node(); }51:T692,{ const svg = d3 .create('svg') .attr('width', tileWidth) .attr('height', tileHeight); const cells = svg .selectAll('g') .data(aidDataTileAll) .join('g') .attr( 'transform', d => `translate(${column(d.coordinates[0])}, ${row(d.coordinates[1])})` ); cells .append('circle') .attr('r', cellSize / 2) .attr('cx', column.bandwidth() / 2) .attr('cy', row.bandwidth() / 2) .attr('fill', 'none') .attr('stroke', d => lightgray); const groups = cells .selectAll('g') .data(top5PurposesTile) .join('g'); groups .append('path') .data(d => top5PurposesByCountryMap.has(d.name) ? purposePie(d.purposes) : 0 ) .join('path') .attr('d', arc(cellSize / 2)) .attr('fill', d => purposeColor(d.data.purpose)) .attr( 'transform', d => `translate(${column.bandwidth() / 2}, ${row.bandwidth() / 2})` ); cells .append('text') .attr('font-size', 12) .attr('font-family', 'sans-serif') .attr('dominant-baseline', 'middle') .attr('text-anchor', 'middle') .attr('x', column.bandwidth() / 2) .attr('y', row.bandwidth() / 2) .text(d => d['alpha-2']) .attr('fill', d => aidDataMap.has(d.name) ? top5PurposesByCountryMap.has(d.name) && top5PurposesByCountryMap.get(d.name).purposes.length > 0 ? 'white' : 'black' : lightgray ); svg .append('text') .attr('x', tileWidth / 2) .attr('y', 0) .attr('font-family', 'sans-serif') .attr('text-anchor', 'middle') .attr('dominant-baseline', 'hanging') .text(visualization3Title); return svg.node(); }52: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'); }53:[{"id":"55260abbc777c0a3b8fed19f3929dd822fef9d5118b53b76b2176d20782910e599eac919999ea8ee85a60b783fd37082574f6591fd46c0d70ddf9b00df71ce27","href":"https://static.observableusercontent.com/files/55260abbc777c0a3b8fed19f3929dd822fef9d5118b53b76b2176d20782910e599eac919999ea8ee85a60b783fd37082574f6591fd46c0d70ddf9b00df71ce27","name":"countries-50m.json","type":"application/json","lastModified":1617726530057.928,"size":4177662}] 43:{"id":"580b5cc6067ff142","slug":null,"title":"Mini-Project 1","thumbnail":"f51f2577a27c8422e58b4be7391dcbc535b283e776a497e36e7e6cf2b96dd6af","access_level":"public","create_time":"$D2021-04-06T16:28:50.057Z","update_time":"$D2021-06-25T04:28:01.131Z","view_time":null,"first_public_time":"$D2023-07-05T14:35:42.699Z","has_unpublished_edits":null,"fork":{"id":"b6d5dee427fe288b","slug":"mini-projects","title":"Mini-Project 1 (Geo)","owner":{"id":"c5bcb913b5b2fffd","login":"nyuvis","name":"EBVL"}},"stars":0,"starred":false,"owner":{"type":"team","id":"130c247dbd6add4a","login":"farihasyed","name":"Fariha Syed","avatar_url":"https://avatars-next.observableusercontent.com/ed23b4fb3a25635f7e5f8009e30a7d388130c282e9660c2fe7704aa6a89a4f09","tier":"starter_2024","bio":"","following":false},"version":4212,"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":{"id":"055db2b79d4de39d","slug":"mini-projects","title":"Mini Projects","owner":{"id":"130c247dbd6add4a","login":"farihasyed","name":"Fariha Syed"}},"type":"notebook","body":{"titling":"auto","title":"Mini-Project 1","cells":[{"id":21,"value":"md`# Mini-Project 1`","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":1544,"value":"md`### 1.1 Small Multiples with Pie Charts\n**Advantages**\n- Seeing magnitudes (size of pie chart corresponds to total amount of aid received and donated by a country) and relative amounts\n- Easier to compare relative amounts for a single country than in 1.2 and 1.3\n\n**Disadvantages**\n- Countries that donate/receive smaller actual amounts are harder to see\n- Size, in this context, is not most accurate channel to encode quantitative information\n- More difficult to compare magnitudes across countries than in 1.2 and 1.3\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1163,"value":"swatches({ color })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3904,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1547,"value":"md`### 1.2 Grouped Bar Chart\n\n**Advantages**\n- Easier to see actual amounts received and donated than in 1.1\n- Easier to compare magnitudes across countries than in 1.1\n\n**Disadvantages**\n- Scale dominated by 3 countries - India, United States, and Japan. Makes it difficult to visualize countries who have received/donated smaller amounts, even though they're the majority\n- More difficult to compare the relative amounts than in 1.1\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1167,"value":"swatches({ color })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1549,"value":"md`### 1.3 Horizontal Bar Chart\n\n**Advantages**\n- Using diverging scale and color to emphasize donation vs received \n- Easier to see actual amounts received and donated than in 1.1\n- Easier to compare magnitudes across countries than in 1.1\n\n**Disadvantages**\n- Scale dominated by 3 countries - India, United States, and Japan. Makes it difficult to visualize countries who have received/donated smaller amounts, even though they're the majority\n- Most difficult to compare the relative amounts out of all three visualizations because the bars are going in opposite directions\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1170,"value":"swatches({ color })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":444,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":656,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1553,"value":"md`### 2.1 Small Multiples and Maps\n\n**Advantages**\n- Pie charts convey both relative donation and received amounts, as opposed to 2.2 and 2.3, which use net commitment amounts\n\n**Disadvantages**\n- Since there are a lot of small countries grouped closely to each other in Europe, there's a lot of clutter from the pie charts. It's difficult to understand which pie chart represents which country. \n- The pie charts also overlap, so you're not even getting the full information\n- In addition, because of the small countries, the size of each pie chart end up being small. This makes it difficult to see\n- Presence of other countries may be distracting\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1173,"value":"swatches({ color })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":678,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1557,"value":"md`### 2.2 Chloropleth Map\n\n**Advantages**\n- No clutter or overlap as in 2.1\n- Easier to see because not limited by pie chart size as in 2.1\n\n**Disadvantages**\n- Color intensity not most accurate channel for quantitative variables\n- Sometimes difficult to see all the countries we're representing, particularly if their net commitment amount is close to 0\n- Presence of other countries may be distracting\n- Using net commitment amounts\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":819,"value":"legend({\n color: differenceColor,\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":811,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1761,"value":"md`### 2.3 Cartogram with Color Intensity\n\n**Advantages**\n- No clutter or overlap as in 2.1\n- Easier to see because not limited by pie chart size as in 2.1\n- Presence of other countries less distracting than in 2.1 and 2.2\n\n**Disadvantages**\n- Color intensity not most accurate channel for quantitative variables\n- Using net commitment amounts\n- Layout isn't as easily recognizable/geographically accurate; can recognize continents, but not regions within continents\n- ISO codes used to label countries may not be easily understood by English speakers e.g. CH for Switzerland\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2215,"value":"legend({\n color: differenceColor,\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":2042,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2387,"value":"md`### 2.4 Small Multiples in a Cartogram\n\n**Advantages**\n- No clutter or overlap as in 2.1\n- Easier to see as pie charts are larger than in 2.1\n- Pie charts convey both relative donation and received amounts, as opposed to 2.2 and 2.3, which use net commitment amounts\n- Presence of other countries less distracting than in 2.1 and 2.2\n\n**Disadvantages**\n- Layout isn't easily recognizable/geographically accurate; can recognize continents, but not regions within continents\n- ISO codes used to label countries may not be easily understood by English speakers e.g. CH for Switzerland\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3024,"value":"swatches({ color })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1826,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":657,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2292,"value":"md`### 3.1 Small Multiples on a Map\n\n**Advantages**\n- Using pie charts makes it easier to see relative frequencies of top 5 categories\n\n**Disadvantages**\n- Difficult to see which countries did not receive in any of the categories\n- Since there are a lot of small countries grouped closely to each other in Europe, there's a lot of clutter from the pie charts. It's difficult to understand which pie chart represents which country. \n- The pie charts also overlap, so you're not even getting the full information\n- In addition, because of the small countries, the size of each pie chart end up being small. This makes it difficult to see\n- Presence of other countries may be distracting\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1157,"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":1062,"value":"$50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2296,"value":"md`### 3.2 Small Multiples in a Cartogram\n\n**Advantages**\n- No clutter or overlap as in 3.1\n- Easier to see because not limited by pie chart size as in 3.1\n- Presence of other countries less distracting than in 3.1 \n- Easier to see which countries did receive in any of the categories\n\n**Disadvantages**\n- Layout isn't easily recognizable/geographically accurate; can recognize continents, but not regions within continents\n- ISO codes used to label countries may not be easily understood by English speakers e.g. CH for Switzerland`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2320,"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":2291,"value":"$51","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2427,"value":"md`-----------------\n## 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 ensure no mismatch between \\`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\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":4116,"value":"scale = 1000000000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3435,"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":3645,"value":"visualization1Title = 'Amounts Donated and Received by Country'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2437,"value":"md`To determine the complete set of countries present in the data, I created sets out of donor and recipient countries, and then combined them.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"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":2441,"value":"md`I created a map between each country's name and the amounts it has donated and/or received.` // I scaled the data into billions.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2572,"value":"aidDataMap = {\n const arr = Array.from(allCountries);\n const map = new Map();\n for (let i = 0; i < arr.length; i++) {\n const country = arr[i];\n const donation =\n d3.sum(\n aiddata_.filter(d => d.donor == country).map(d => d.commitment_amount)\n ) / scale;\n const received =\n d3.sum(\n aiddata_\n .filter(d => d.recipient == country)\n .map(d => d.commitment_amount)\n ) / scale;\n\n const obj = {\n country: country,\n amounts: [\n { type: 'donation', amount: donation, total: donation + received },\n { type: 'received', amount: received, total: donation + received }\n ]\n };\n map.set(country, obj);\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":155,"value":"aidData = Array.from(aidDataMap)\n .map(d => d[1])\n .sort(\n (a, b) =>\n a.amounts[0].total - b.amounts[0].total ||\n a.amounts[0].amount / a.amounts[0].total -\n b.amounts[0].amount / b.amounts[0].total\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2444,"value":"md`Determine extents to figure out domains for scales`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1339,"value":"donationExtent = d3.extent(aidData.map(d => d.amounts[0].amount))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1342,"value":"receivedExtent = d3.extent(aidData.map(d => d.amounts[1].amount))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1344,"value":"amountExtent = [\n Math.min(donationExtent[0], receivedExtent[0]),\n Math.max(donationExtent[1], receivedExtent[1])\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3844,"value":"totalAmountExtent = d3.extent(aidData.map(d => d.amounts[0].total))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2447,"value":"md`Colors to denote the categories each transaction fell into. Green is for receiving, and red is for donation.`","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(['donation', 'received'], [red, green])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2450,"value":"md`Data transformation for small multiples in 1.1`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"numRows = 6","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"numColumns = 8","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"gridPositions = d3.cross(\n d3.range(numRows),\n d3.range(numColumns),\n (row, col) => ({ row, col })\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"aidDataWithGrid = d3\n .zip(aidData, gridPositions)\n .map(([data, pos]) => ({ ...data, ...pos }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3909,"value":"pieMargin = ({ top: 65, right: 10, bottom: 0, left: 50 });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3913,"value":"pieWidth = 900 - pieMargin.left - pieMargin.right;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3919,"value":"pieHeight = 600 - pieMargin.top - pieMargin.bottom;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3922,"value":"pieRow = d3\n .scaleBand()\n .domain(d3.range(numRows))\n .range([0, pieHeight])\n .paddingInner(0.2);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3928,"value":"pieColumn = d3\n .scaleBand()\n .domain(d3.range(numColumns))\n .range([0, pieWidth]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3976,"value":"pieSM = d3\n .pie()\n .value(d => d.amount)\n .sort((a, b) => d3.ascending(a.type, b.type));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3977,"value":"arcSM = d3\n .arc()\n .innerRadius(0)\n .outerRadius(d => radius(d.data.total))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4054,"value":"minRadius = 5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3910,"value":"maxRadius = Math.min(pieRow.bandwidth(), pieColumn.bandwidth()) / 2;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3931,"value":"radius = d3\n .scaleSqrt()\n .domain(amountExtent)\n .range([minRadius, maxRadius])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2453,"value":"md`Sorted data by amount donated, then by amount received for bar graphs in 1.2 and 1.3`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1381,"value":"aidDataSorted = aidData\n .slice()\n .sort((a, b) =>\n a.amounts[1].amount < a.amounts[0].amount ||\n b.amounts[1].amount < b.amounts[0].amount\n ? b.amounts[0].amount - a.amounts[0].amount\n : a.amounts[1].amount - b.amounts[1].amount\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1393,"value":"sortedCountries = aidDataSorted.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":2430,"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":3659,"value":"visualization2Title = 'Net Commitment Amounts by Country'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2495,"value":"geoJSONCountries = geoJSON.features.filter(d =>\n allCountries.has(d.properties.NAME)\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1503,"value":"margin = ({ top: 5, right: 10, bottom: 5, left: 10 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1504,"value":"mapWidth = width - margin.left - margin.right","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1509,"value":"mapHeight = 545 - margin.top - margin.bottom","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1516,"value":"mapOutline = d3.geoGraticule().outline();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1518,"value":"projection = d3.geoEqualEarth().fitSize([mapWidth, mapHeight], geoJSON)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":823,"value":"difference = function(amounts) {\n return amounts[1].amount - amounts[0].amount;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":826,"value":"differenceExtent = d3.extent(\n d3.map(geoJSONCountries, d =>\n difference(aidDataMap.get(d.properties.NAME).amounts)\n )\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2605,"value":"maxDifference = d3.max(differenceExtent.map(d => Math.abs(d)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":812,"value":"differenceColor = d3\n .scaleDivergingSqrt()\n .domain([-maxDifference, 0, maxDifference])\n .range([red, 'white', green])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1571,"value":"pieRadius = 6","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2253,"value":"pie = d3.pie().value(d => d.amount);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2258,"value":"arc = function(radius) {\n return d3\n .arc()\n .innerRadius(0)\n .outerRadius(radius);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2548,"value":"md`For cartogram, download JSON file`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1764,"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":1878,"value":"md`Clean \\`tileCountries_\\` \n\n- Rename to match country names in \\`aidData\\`\n- Add countries Liechtenstein, Monaco, and Taiwan\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1767,"value":"$52","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2200,"value":"md`Combine \\`tileCountries\\` with \\`aidData\\`. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2137,"value":"aidDataTileAll = {\n const arr = tileCountries.slice();\n for (let i = 0; i < arr.length; i++) {\n if (aidDataMap.has(arr[i].name)) {\n arr[i].amounts = aidDataMap.get(arr[i].name).amounts;\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":1856,"value":"cellSize = 30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1837,"value":"numberOfRows = 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":1840,"value":"numberOfColumns = 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":1865,"value":"tileHeight = numberOfRows * cellSize","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1866,"value":"tileWidth = numberOfColumns * cellSize","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1827,"value":"row = d3\n .scaleBand()\n .domain(d3.range(numberOfRows))\n .range([0, tileHeight])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1829,"value":"column = d3\n .scaleBand()\n .domain(d3.range(numberOfColumns))\n .range([0, tileWidth])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1521,"value":"path = d3.geoPath().projection(projection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2433,"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":3641,"value":"visualization3Title = 'Relative Frequency of Top 5 Purposes Received by Country'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":966,"value":"top5Purposes = new Set(\n Array.from(\n d3.rollup(aiddata, v => v.length, d => d.coalesced_purpose_name),\n pair => ({ purpose: pair[0], num: pair[1] })\n )\n .filter(d => d.purpose != 'Sectors not specified')\n .sort((a, b) => d3.descending(a.num, b.num))\n .map(d => d.purpose)\n .slice(0, 5)\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1007,"value":"top5PurposesByCountry = Array.from(\n d3.rollup(\n aiddata,\n v => v.length,\n d => d.recipient,\n d => d.coalesced_purpose_name\n ),\n ([country, purpose_]) => {\n return {\n country: country,\n purposes: Array.from(purpose_, ([purpose, num]) => ({ purpose, num }))\n .filter(d => top5Purposes.has(d.purpose))\n .sort((a, b) => d3.descending(a.num, b.num))\n };\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1064,"value":"top5PurposesByCountryMap = {\n const map = new Map();\n for (let i = 0; i < top5PurposesByCountry.length; i++) {\n map.set(top5PurposesByCountry[i].country, top5PurposesByCountry[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":1124,"value":"purposeColor = d3\n .scaleOrdinal()\n .domain(top5Purposes)\n .range(d3.schemeTableau10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2333,"value":"purposePie = d3.pie().value(d => d.num)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2299,"value":"top5PurposesTile = {\n const arr = tileCountries.slice();\n for (let i = 0; i < arr.length; i++) {\n if (top5PurposesByCountryMap.has(arr[i].name)) {\n arr[i].purposes = top5PurposesByCountryMap.get(arr[i].name).purposes;\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":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":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"},{"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"}],"files":"$W53","stdlib":"1"}} 44:"$43:body"