25:["$","title",null,{"children":"Mini-Project 2 (Time) | Felipe de Oliveira | Observable"}] 49:Ta8b,md`## Questions Your goal is to create 3 independent visualizations of the same data set, each one with the intent of answering the questions stated below. For each numbered visualization, you should be able to create a data visualization that answers **all** of the questions specified. These are the 3 visualizations you should create: - **Visualization 1:** a) How does the amount donated vs. amount received change over time for each country?; b) Are there countries that mostly send or mostly receive and countries that have a similar amount of donations they receive and send?; c) 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?; d) Are there countries in which you can find a sudden increase ("peak") or a sudden decrease ("valley")? - **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? E.g., 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. - **[OPTIONAL] 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). For each visualization add a description of your thought process and why you think your solution is *appropriate* and *effective*. Note it is okay to submit more than one solution for a given visualization problem if you think there are some competing solutions that work well. When you do that, make sure to compare the solutions by commenting on their advantages and disadvantages. `4a:Tcd6,{ // the usual set up const margin = { top: 30, bottom: 20, right: 10, left: 30 }; const visWidth = width - margin.left - margin.right; const visHeight = 3500 - 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('font-family', 'sans-serif') .attr('transform', `translate(${margin.left}, ${margin.top})`); // title const format = d3.timeFormat('%Y'); function formatYear(d){ return String(d%100).padStart(2, '0') } g.append('text') .text(`Amounts donated minus amounts received, ${dateExtent[0]} - ${dateExtent[1]}`) function formatBillions(d) { return `${d / 1000000000} B`; } //add the col const col = d3.scaleBand() .domain(d3.range(numCols)) .range([0, visWidth]) .padding(0.1) //scales const row = d3.scaleBand() .domain(d3.range(numRows)) .range([0, visHeight]) .padding(0.2) const x = d3.scaleTime() .domain(dateExtent) .range([0, col.bandwidth()]) const y = d3.scaleLinear() .domain([min, max]) .range([row.bandwidth(), 0]) // add a group for each cell and position it according to its row and column const cells = g.selectAll('g') .data(netGrid) .join('g') .attr('transform', d => `translate(${col(d.col)}, ${row(d.row)})`); // add the area to each cell const area = d3.area() .x(d => x(d.date)) .y1(d => y(d.net_amount)) .y0(d=> y(0)) //cells.append('rect') // .attr('width', col.bandwidth()) // .attr('height', row.bandwidth()) // .attr('fill', 'white') // .attr('stroke', 'black'); cells.append('path') .attr('d', d => area(d.operations)) .attr('fill', 'steelblue') // add the state label to each cell cells.append('text') .attr('font-size', 12) .attr('dominant-baseline', 'middle') .attr('x', 5) .attr('y', -10) .text(d => d.Country) // Axes const xAxis = d3.axisBottom(x).tickFormat(formatYear) //.tickSizeOuter(0) //.ticks(4, "'%y") const yAxis = d3.axisLeft(y) .tickSizeOuter(0) .ticks(4) .tickFormat(formatBillions) // add x axes to each chart const xAxes = cells.append('g') // move it to the bottom .attr('transform', d => `translate(0,${row.bandwidth()})`) .call(xAxis) // remove the baseline .call(g => g.select('.domain').remove()) // change the tick color to gray .call(g => g.selectAll('line').attr('stroke', '#c0c0c0')); // remove tick labels from all charts except the ones at the bottom of the columns xAxes.filter((d, i) => i < net_data.length - numCols) .selectAll('text') .remove(); xAxes.filter((d, i) => i < net_data.length - numCols) .selectAll('line') .remove(); // add y axes to each chart const yAxes = cells.append('g') .call(yAxis) // remove the baseline .call(g => g.select('.domain').remove()) // change the tick color to gray .call(g => g.selectAll('line').attr('stroke', '#c0c0c0')); // remove tick labels from all charts except the first column yAxes.filter(d => d.col !== 0) .selectAll('text') .remove(); return svg.node(); }4b:T5d2,a) How does the amount donated vs. amount received change over time for each country? We can answer this question looking at a specific subplot. For example, we can say during a specific period, Poland received much more than donated. ![image.png](${await FileAttachment("image.png").url()}) b) Are there countries that mostly send or mostly receive and countries that have a similar amount of donations they receive and send?; Canada is an example of Country that donated and receveid in a comparable way. Sometimes it received more than donated, but not always. ![image@1.png](${await FileAttachment("image@1.png").url()}) U.S is an example of Country that donated much more than received and repeated the same pattern during all the analyzed period > ![image@2.png](${await FileAttachment("image@2.png").url()}) India is an example of Country that received much more than donated and repeated the same pattern during all the analyzed period ![image@3.png](${await FileAttachment("image@3.png").url()}) c) 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?; Yes, Canada is one of this countries. We can also point Kwait. ![image@4.png](${await FileAttachment("image@4.png").url()}) d) Are there countries in which you can find a sudden increase ("peak") or a sudden decrease ("valley")? Yes, Poland and Kwait are 2 examples of countries that show this pattern4c:Tce6,{ // the usual set up const margin = { top: 30, bottom: 20, right: 10, left: 30 }; const visWidth = width - margin.left - margin.right; const visHeight = 2000 - 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('font-family', 'sans-serif') .attr('transform', `translate(${margin.left}, ${margin.top})`); // title const format = d3.timeFormat('%Y'); function formatYear(d){ return String(d%100).padStart(2, '0') } g.append('text') .text(`Amounts donated by Purpose, ${dateExtent[0]} - ${dateExtent[1]}`) function formatBillions(d) { return `${d / 1000000000} B`; } //add the col const col = d3.scaleBand() .domain(d3.range(cols_2)) .range([0, visWidth]) .padding(0.1) //scales const row = d3.scaleBand() .domain(d3.range(rows_2)) .range([0, visHeight]) .padding(0.2) const x = d3.scaleTime() .domain(dateExtent) .range([0, col.bandwidth()]) const y = d3.scaleLinear() .domain([min_2, max_2]) .range([row.bandwidth(), 0]) // add a group for each cell and position it according to its row and column const cells = g.selectAll('g') .data(purposegrid) .join('g') .attr('transform', d => `translate(${col(d.col)}, ${row(d.row)})`); // add the area to each cell const area = d3.area() .x(d => x(d.date)) .y1(d => y(d.amount)) .y0(d=> y(0)) cells.append('rect') .attr('width', col.bandwidth()) .attr('height', row.bandwidth()) .attr('fill', 'white') .attr('stroke', 'black'); cells.append('path') .attr('d', d => area(d.operations)) .attr('fill', 'steelblue') // add the state label to each cell cells.append('text') .attr('font-size', 12) .attr('dominant-baseline', 'middle') .attr('x', 5) .attr('y', -10) .text(d => d.Purpose) // Axes const xAxis = d3.axisBottom(x).tickFormat(formatYear) //.tickSizeOuter(0) //.ticks(4, "'%y") const yAxis = d3.axisLeft(y) .tickSizeOuter(0) .ticks(4) .tickFormat(formatBillions) // add x axes to each chart const xAxes = cells.append('g') // move it to the bottom .attr('transform', d => `translate(0,${row.bandwidth()})`) .call(xAxis) // remove the baseline .call(g => g.select('.domain').remove()) // change the tick color to gray .call(g => g.selectAll('line').attr('stroke', '#c0c0c0')); // remove tick labels from all charts except the ones at the bottom of the columns //xAxes.filter((d, i) => i < purpose_aggregated_data.length - cols_2) // .selectAll('text') // .remove(); // xAxes.filter((d, i) => i < purpose_aggregated_data.length - cols_2) // .selectAll('line') // .remove(); // add y axes to each chart const yAxes = cells.append('g') .call(yAxis) // remove the baseline .call(g => g.select('.domain').remove()) // change the tick color to gray .call(g => g.selectAll('line').attr('stroke', '#c0c0c0')); // remove tick labels from all charts except the first column yAxes.filter(d => d.col !== 0) .selectAll('text') .remove(); return svg.node(); }4d:[{"id":"9501b86f87cf0d4a4f948279f83eeb9a6ef035f92f6c4d59fd27d20dd9ede008756bda925b77444b12be787bb7f5372621cea20dc02790cd57dc1a36e33fe04a","href":"https://static.observableusercontent.com/files/9501b86f87cf0d4a4f948279f83eeb9a6ef035f92f6c4d59fd27d20dd9ede008756bda925b77444b12be787bb7f5372621cea20dc02790cd57dc1a36e33fe04a","name":"image@5.png","type":"image/png","lastModified":1699822420620.449,"size":15803},{"id":"55260abbc777c0a3b8fed19f3929dd822fef9d5118b53b76b2176d20782910e599eac919999ea8ee85a60b783fd37082574f6591fd46c0d70ddf9b00df71ce27","href":"https://static.observableusercontent.com/files/55260abbc777c0a3b8fed19f3929dd822fef9d5118b53b76b2176d20782910e599eac919999ea8ee85a60b783fd37082574f6591fd46c0d70ddf9b00df71ce27","name":"countries-50m.json","type":"application/json","lastModified":1699550853622.07,"size":4177662},{"id":"aab8de6941e3225f8fac7d2a8c2bdd3a2ca2a26459985bd06c3bacd9bcdd5dca1b4e95b2ee0d97ee8688662a75984bc7c8f69df7efa731a2cf2a388cb841e23b","href":"https://static.observableusercontent.com/files/aab8de6941e3225f8fac7d2a8c2bdd3a2ca2a26459985bd06c3bacd9bcdd5dca1b4e95b2ee0d97ee8688662a75984bc7c8f69df7efa731a2cf2a388cb841e23b","name":"image.png","type":"image/png","lastModified":1699821399310.815,"size":3282},{"id":"268e20d3fcdb7991175573944f2767a83b35678d90b3f977814436fa4df1f340d02109e210cd2ca4909bfd25bcbfc2cb1a42a012b1bada30da1bec14129aadec","href":"https://static.observableusercontent.com/files/268e20d3fcdb7991175573944f2767a83b35678d90b3f977814436fa4df1f340d02109e210cd2ca4909bfd25bcbfc2cb1a42a012b1bada30da1bec14129aadec","name":"image@1.png","type":"image/png","lastModified":1699821529785.682,"size":3418},{"id":"98a4d835704e6d0e4565ca616151583feda0de9a72716ab589bc75c6db8fe06210f4f364b73b4725d45a65228324f58bf0988b052908d40e2906f8d51788e1b2","href":"https://static.observableusercontent.com/files/98a4d835704e6d0e4565ca616151583feda0de9a72716ab589bc75c6db8fe06210f4f364b73b4725d45a65228324f58bf0988b052908d40e2906f8d51788e1b2","name":"image@2.png","type":"image/png","lastModified":1699821533877.244,"size":5605},{"id":"811f28254c622f3d79f7a41f99a143680af4835449506dd1a44d8a5b9ab76d95fb8b4713167c556c48bc6e2c0774ed5feed6b00ec0bc744faa5251168ae2087c","href":"https://static.observableusercontent.com/files/811f28254c622f3d79f7a41f99a143680af4835449506dd1a44d8a5b9ab76d95fb8b4713167c556c48bc6e2c0774ed5feed6b00ec0bc744faa5251168ae2087c","name":"image@3.png","type":"image/png","lastModified":1699821538655.737,"size":5228},{"id":"1e9b964e9cf20884eda6cc5bbfa0beaa2e55bcf8e7f8084d948f7be982bd4d80506cb9825906e3e264d20acdbdda2bba11b7e683de4188df913d557f263bf9ef","href":"https://static.observableusercontent.com/files/1e9b964e9cf20884eda6cc5bbfa0beaa2e55bcf8e7f8084d948f7be982bd4d80506cb9825906e3e264d20acdbdda2bba11b7e683de4188df913d557f263bf9ef","name":"image@4.png","type":"image/png","lastModified":1699821732235.219,"size":15872},{"id":"392a11cc819522b609ebef144acd3c8feb909ddca99f9604cd3dc46bb3a230257e781cf69ad13984c7cdfeea5351aa6fb4cfc5c93c045ddcdef8c684dcefc2b8","href":"https://static.observableusercontent.com/files/392a11cc819522b609ebef144acd3c8feb909ddca99f9604cd3dc46bb3a230257e781cf69ad13984c7cdfeea5351aa6fb4cfc5c93c045ddcdef8c684dcefc2b8","name":"image@6.png","type":"image/png","lastModified":1699822487268.588,"size":24083}] 29:{"id":"ba4f4db73be711fc","slug":null,"title":"Mini-Project 2 (Time)","thumbnail":"374d585ddc08e101da3153bb67f0adab7fab242977d01ae55fedbda72c7168d7","access_level":"public","create_time":"$D2023-11-09T17:27:33.622Z","update_time":"$D2024-06-20T14:16:52.668Z","view_time":null,"first_public_time":"$D2023-11-09T17:27:33.622Z","has_unpublished_edits":null,"fork":{"id":"dffa564ec3228df0","slug":"mini-project-time","title":"Mini-Project 2 (Time)","owner":{"id":"15ca42c9e9f08862","login":"junyuanjun","name":"Jun Yuan"}},"stars":0,"starred":false,"owner":{"type":"team","id":"1a78fbf00465a7f5","login":"felipe-de-oliveira2","name":"Felipe de Oliveira","avatar_url":"https://avatars-next.observableusercontent.com/cfd4b874996c698c69541e4b6ec3977f5bd0597d91f973a71511e04520bd1ee4","tier":"starter_2024","bio":"","following":false},"version":430,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8f077c7655fde239","login":"felipe-de-oliveira2","name":"Felipe de Oliveira","avatar_url":"https://avatars-next.observableusercontent.com/cfd4b874996c698c69541e4b6ec3977f5bd0597d91f973a71511e04520bd1ee4","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"8f077c7655fde239","login":"felipe-de-oliveira2","name":"Felipe de Oliveira","avatar_url":"https://avatars-next.observableusercontent.com/cfd4b874996c698c69541e4b6ec3977f5bd0597d91f973a71511e04520bd1ee4","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 (Time)","cells":[{"id":115,"value":"md`# Mini-Project 2 (Time)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"md`## Data\n\nHere we load a [simplified and reduced version](https://docs.google.com/spreadsheets/d/1YiuHdfZv_JZ-igOemKJMRaU8dkucfmHxOP6Od3FraW8/) of the [AidData dataset](https://www.aiddata.org/data/aiddata-core-research-release-level-1-3-1). You are free to change this code as you wish. If you don't want to preprocess your data on Observable, then you can do the preprocessing using whatever languages or tools you'd like and then [upload](/@observablehq/file-attachments) your preprocessed data to Observable. If you take this approach, then you should delete the \\`aiddata\\` cell below so that you're not loading unnecessary data.\n\nThe dataset contains the following columns:\n- **yearDate**: year of the commitment as a Date object\n- **yearInt**: year of the commitment as an integer\n- **donor**: country providing the financial resource\n- **recipient**: country receiving the financial resource\n- **amount**: the total amount of financial resources provided\n- **purpose**: the purpose of the transaction`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"Inputs.table(aiddata)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"aiddata = {\n const data = await d3.csv(googleSheetCsvUrl, row => ({\n yearDate: d3.timeParse('%Y')(row.year),\n yearInt: +row.year,\n donor: row.donor,\n recipient: row.recipient,\n amount: +row.commitment_amount_usd_constant,\n purpose: row.coalesced_purpose_name,\n }));\n \n data.columns = Object.keys(data[0]);\n \n return data;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"md`Next we load GeoJSON data for countries. This file is derived from data from [Natural Earth](https://www.naturalearthdata.com).`","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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"md`### Remember\n\nThe questions above are a very useful tool for you to verify whether you are producing a good solution or not. As you go about solving this exercise you can use the questions above as an evaluation tool in two main ways:\n1. Verify that you can indeed answer the questions with your visualization. If you can’t fully answer the questions, it means your solution has some problems.\n2. Compare multiple solutions to the same problem and ask yourself: “which one makes it easier for me to answer these questions?”, where easier may mean, more accurately, with less effort or faster.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"md`## Instructions\n- Your coded solutions must use D3. Other visualization libraries are not allowed.\n- You should feel free to process and transform the data any way you deem relevant and use any tool you prefer for data processing. Data transformation does not necessarily have to be in JavaScript nor within Observable. It’s ok to pre-process the data and then load it in Observable if you prefer.\n- You can use Mike Bostock's [Color Legend](/@d3/color-legend) notebook to create your legends.`","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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"md`## Grading Criteria\n\nThe main parameters we will use for grading are the following:\n\n- Does the information extracted answer the questions posed in the exercise?\n- Does the visualization answer the questions posed in the exercise?\n- Is the visual representation clear? Does it have good aesthetics?\n - Review this [notebook on clarity](/@nyuvis/contextual-elements-aesthetics-and-clarity) for reference.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"# Visualization 1","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":389,"value":"## Plan\nInitially, I considered generating a line plot with the y-axis representing the \"net\" amount, defined as the difference between total donations and total receipts for a specific year. Due to the multitude of countries, I opted for a small multiples strategy to accommodate individual curves on separate graphs.\n\n## Processing the data \nI am looking to restructure the data into an array of objects organized by country. This is necessary as I plan to create individual plots for each country. For every country, I aim to retain a vector representing the \"net\" amount for that country per year. Here, \"net\" refers to the disparity between the total donations and total receipts for a specific year.\nSo my datastructure will be as the follow: \nnet_data = [ \n{Country: C1, Operations:Array} \n] \nwhere each Array of operations is an array of objects with keys year and amount.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":159,"value":"donors_data = d3.rollup(aiddata, v => d3.rollup(v, q =>d3.sum(q, d=>d.amount),d=>d.yearInt), d => d.donor)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"recipient_data = d3.rollup(aiddata, v => d3.rollup(v, q =>d3.sum(q, d=>d.amount),d=>d.yearInt), d => d.recipient)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"Countries = [... new Set([... new Set(aiddata.map(d=>d.recipient))].concat([... new Set(aiddata.map(d=>d.donor))]))]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"Years = [... new Set(aiddata.map(d=>d.yearInt)) ]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"net_data = {\n const Countries_net_array = []\n for (let index = 0; index < Countries.length; ++index) {\n const net_array_aux = []\n net_array_aux.push([\"Country\",Countries[index]])\n const operations_aux =[]\n var min = 0 \n var max = 0\n for (let year_index =0 ; year_index< Years.length; ++year_index){\n const amount_donated = donors_data?.get(Countries[index])?.get(Years[year_index]) ?? 0\n const amount_receveid = recipient_data.get(Countries[index])?.get(Years[year_index]) ?? 0\n const net = amount_donated - amount_receveid\n min = min < net ? min : net\n max = max > net ? max : net\n \n operations_aux.push({\"date\":Years[year_index],\"net_amount\":net})\n }\n net_array_aux.push([\"operations\",operations_aux.sort((a,b)=>d3.ascending(a.date,b.date))])\n net_array_aux.push([\"min\",min],[\"max\",max])\n Countries_net_array.push(Object.fromEntries(net_array_aux))\n }\n return Countries_net_array\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":410,"value":"I used 16 rows and 3 columns since we have 47 plots to display","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":216,"value":"numRows = 16\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"numCols = 3","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"grid = d3.cross(d3.range(numRows), d3.range(numCols), (row, col) => ({row, col}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"netGrid = d3.zip(net_data, grid)\n .map(([data, position]) => ({...data, ...position}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"dateExtent = d3.extent(net_data[0].operations, d => d.date)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"min = d3.min(net_data,d=>d.min)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"max = d3.max(net_data,d=>d.max)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"## Questions\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":288,"value":"$4b","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":294,"value":"# Visualization 2\n\n## Plan\nInitially, I considered generating a line plot with the y-axis representing the total amount. As we are analyzing 10 purposes at the same time, I opted for a small multiples strategy to accommodate individual curves on separate graphs.\n\n## Data processing \n\nAs the aproach is extremely similar, I processed the data in a similar way, but instead of grouping by country, I grouped by purpose","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":295,"value":"Purpose_data = d3.rollup(aiddata, v => d3.rollup(v, q =>d3.sum(q, d=>d.amount),d=>d.yearInt), d => d.purpose)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"sorted_purpose = d3.rollups(aiddata,v=>d3.sum(v,d=>d.amount),d=>d.purpose).slice().sort((a, b) => d3.descending(a[1], b[1]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"filtered_sorted_purpose = sorted_purpose.filter(d=>!(d[0] === \"Sectors not specified\"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"top_10_purposes = filtered_sorted_purpose.slice(0,10).map(d=>d[0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"top_10_purpose_data = new Map([...Purpose_data].filter(d=>top_10_purposes.includes(d[0])))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"purpose_aggregated_data = {\n const purpose_array = []\n for (let index = 0; index < top_10_purposes.length; ++index) {\n const array_aux = []\n array_aux.push([\"Purpose\",top_10_purposes[index]])\n const operations_aux =[]\n var min = 0 \n var max = 0\n for (let year_index =0 ; year_index< Years.length; ++year_index){\n const amount = top_10_purpose_data?.get(top_10_purposes[index])?.get(Years[year_index]) ?? 0\n min = min < amount ? min : amount\n max = max > amount ? max : amount\n \n \n operations_aux.push({\"date\":Years[year_index],\"amount\":amount})\n }\n array_aux.push([\"operations\",operations_aux.sort((a,b)=>d3.ascending(a.date,b.date))])\n array_aux.push([\"min\",min],[\"max\",max])\n purpose_array.push(Object.fromEntries(array_aux))\n }\n return purpose_array\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"min_2 = d3.min(purpose_aggregated_data.map(d=>d.min))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"max_2 = d3.max(purpose_aggregated_data.map(d=>d.max))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"cols_2 = 1\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"rows_2 = 10","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"grid_2 = d3.cross(d3.range(rows_2), d3.range(cols_2), (row, col) => ({row, col}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":362,"value":"purposegrid = d3.zip(purpose_aggregated_data, grid_2)\n .map(([data, position]) => ({...data, ...position}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"$4c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"## Questions \n\nThe suggested visualization allows us to compare the total amount donated for each purpose. For instance, in the 80s, contributions to Air Transport and Industrial Development were more prevalent than those for Rail Transport. However, around 2010, this trend shifted.\n![image@6.png](${await FileAttachment(\"image@6.png\").url()})","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","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@7')","pinned":true,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 24:null