40:null 41:["$","title",null,{"children":"Mini-Project 2 (Temporal Data) | Kora Hughes | Observable"}] 47: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. `48:T89e,{ const margin = {top: 10, right: 30, bottom: 20, left: 40}; const visWidth = width - margin.left - margin.right; const visHeight = 400 - margin.top - margin.bottom; const svg = d3.create('svg') .attr('width', visWidth + margin.left + margin.right) .attr('height', visHeight + margin.top + margin.bottom); const g = svg.append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); const x = d3.scaleLinear() .domain(timeExt) .range([0, visWidth]); const y = d3.scaleSqrt() // linear for signle .domain([0, maxPrice]).nice() .range([visHeight, 0]); const xAxis = d3.axisBottom(x).tickFormat(x => x).ticks(12); const yAxis = d3.axisLeft(y).tickFormat(x => '$'+(x/1000000000)+'B').ticks(6); g.append('g') .attr('transform', `translate(0,${visHeight})`) .call(xAxis); g.append('g') .call(yAxis) .call(g => g.selectAll('.domain').remove()) .append('text') .attr('text-anchor', 'start') .attr('dominant-baseline', 'middle') .attr('fill', 'black') .attr('x', 5) .attr('font-size', '20px') .text('Total Aid Given/Recieved for Australia ($billions)'); const line = d3.line() .x(d => x(d.year)) .y(d => y(d.value)); const line2 = d3.area() // extra for area look .x(d => x(d.year)) .y1(d => y(d.value)) .y0(d => y(0)); const dono_series = g.selectAll('.series') .data(sum_given_aid) .join('g') .attr('stroke', ([country, data]) => countryToColor(country)) .attr('class', 'series') .append('path') .datum(([country, data]) => data) .attr('fill', rygExt[0]) .attr("opacity", 0.8) .attr('stroke-width', 5) .attr('d', line); const rec_series = g.selectAll('.series') .data(sum_recieved_aid) .join('g') .attr('stroke', ([country, data]) => countryToColor(country)) .attr('class', 'series') .append('path') .datum(([country, data]) => data) .attr('fill', rygExt[1]) .attr("opacity", 0.8) .attr('stroke-width', 5) // .style("stroke-dasharray", ("3, 3")) .attr('d', line); return svg.node(); }49:T53a,This visualization is my favorite and is most appropriate because it allows you to roughly see the distribution of donations given and received. The graph is also effective for a number of reasons; aggregating the data to be yearly allows the user to focus on trends and the use of area allows us to better get a feel for the shape of each country, making those with particularly high donations given or received stand out. Also small quality changes like the y axis being exponential (helping readability of smaller values) and the x axis values only showing every other row (increasing readability and reducing clutter) makes the visualization more effective overall. Though the small-multiples view can make comparisons between some countries a bit harder, when it comes to questions relating to role-changing over time, peak/valley-identification, and majority received/donated, the simple shape is more than sufficient. Ex: we can identify that a country like Japan has spikes in donations given around the late 1990s but then drops off in 2000 whereas the US's donations given peak in the 2000s. We can also see that countries like India and Columbia almost entirely receive donations whereas a country like Saudi Arabia goes from a mix of giving & receiving donations to a role of exclusively receiving donations around the 1990s.4a:Ta4c,donated_recieved_graph = { // the usual set up const {visWidth, visHeight, margin} = dimensions; 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 g.append('text') .text("Donatations Given & Recieved per Country from " + timeExt[0] + " to " + timeExt[1]) // add a group for each cell and position it according to its row and column const cells = g.selectAll('g') .data(sum_aid_sm) .join('g') .attr('transform', (d, i) => { /* i is the current index */ // get the row index and column index for this cell const r = Math.floor(i / numCols); const c = i % numCols; // use the scales to get the x, y coordinates return `translate(${col(c)}, ${row(r)})`; }); // add the area to each cell cells.append('path') // given data .attr('d', d => given_area(d.data)) .attr("opacity", 0.8) .attr('fill', rygExt[0]); cells.append('path') // recieved data .attr('d', d => rec_area(d.data)) .attr("opacity", 0.8) .attr('fill', rygExt[1]); // add the state label to each cell cells.append('text') .attr('font-size', 10.5) .attr('dominant-baseline', 'middle') .attr('x', 5) .attr('y', y(20)-(visHeight/12)) .attr('transform', 'rotate(-10)') .text(d => d.country) // Axes // 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) => Math.floor(i/numCols)%2 == 0) // ((Math.floor(i/numCols)%2==0) ? i:i+1) % 2 == 0 .selectAll('text') .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, i) => i % numCols !== 0) .selectAll('text') .remove(); return svg.node(); }4b:T76b,{ const margin = {top: 30, right: 30, bottom: 20, left: 40}; const visWidth = width - margin.left - margin.right; const visHeight = 700 - margin.top - margin.bottom; const svg = d3.create('svg') .attr('width', visWidth + margin.left + margin.right) .attr('height', visHeight + margin.top + margin.bottom); svg.append("rect") .attr("width", "100%") .attr("height", "100%") .attr("fill", "grey") .attr("opacity", 0.1); const g = svg.append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); g.append('text') .attr("x", visWidth/3 - 110) .attr("y", 0) .attr("font-size", "25px") .text("Reasons were Donatations Made from " + timeExt[0] + " to " + timeExt[1]); const x = d3.scaleLinear() .domain(timeExt) .range([0, visWidth]); const y = d3.scaleSqrt() .domain([0, maxVal2]).nice() .range([visHeight, 0]); const xAxis = d3.axisBottom(x).tickFormat(x => x); const yAxis = d3.axisLeft(y).tickFormat(x => '$'+(x/1000000000)+'B'); g.append('g') .attr('transform', `translate(0,${visHeight})`) .call(xAxis); g.append('g') .call(yAxis) .call(g => g.selectAll('.domain').remove()) .append('text') .attr('text-anchor', 'start') .attr('dominant-baseline', 'middle') .attr('fill', 'black') .attr('x', 10) .text('Donation Amount ($billion)'); const line = d3.line() .x(d => x(d.year)) .y(d => y(d.value)); const series = g.selectAll('.series') .data(purpose_data2) .join('g') .attr('stroke', ([purpose, data]) => purposeToColor(purpose)) // this is where line color is set .attr('class', 'series') .append('path') .datum(([purpose, data]) => data) .attr('fill', 'none') .attr('stroke-width', 2) .attr('d', line); return svg.node(); }4c:T12ee,donated_purpose_graph = { // the usual set up const {visWidth, visHeight, margin} = dimensions; 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 g.append('text') .text("Reasons Donatations made per Country from " + timeExt[0] + " to " + timeExt[1]) // add a group for each cell and position it according to its row and column const cells = g.selectAll('g') .data(purpose_data) .join('g') .attr('transform', (d, i) => { /* i is the current index */ // get the row index and column index for this cell const r = Math.floor(i / numCols); const c = i % numCols; // use the scales to get the x, y coordinates return `translate(${col(c)}, ${row(r)})`; }); const line = d3.line() .x(d => x(d.year)) .y(d => y2(d.value)); // add the area to each cell // for(let j=0; j < purposes[j]; j++){ this doesnt work so im just gona hardcode the 10 const j = 0 cells.append('path') // given data .attr('d', d => line(d.data.filter(d => d.purpose == purposes[j]))) .attr('stroke', d => purposeToColor(purposes[j])) .attr('stroke-width', 2) .attr('fill', 'none'); const k = 1 cells.append('path') // given data .attr('d', d => line(d.data.filter(d => d.purpose == purposes[k]))) .attr('stroke', d => purposeToColor(purposes[k])) .attr('stroke-width', 2) .attr('fill', 'none'); const l = 2 cells.append('path') // given data .attr('d', d => line(d.data.filter(d => d.purpose == purposes[l]))) .attr('stroke', d => purposeToColor(purposes[l])) .attr('stroke-width', 2) .attr('fill', 'none'); const m = 3 cells.append('path') // given data .attr('d', d => line(d.data.filter(d => d.purpose == purposes[m]))) .attr('stroke', d => purposeToColor(purposes[m])) .attr('stroke-width', 2) .attr('fill', 'none'); const n = 4 cells.append('path') // given data .attr('d', d => line(d.data.filter(d => d.purpose == purposes[n]))) .attr('stroke', d => purposeToColor(purposes[n])) .attr('stroke-width', 2) .attr('fill', 'none'); const o = 5 cells.append('path') // given data .attr('d', d => line(d.data.filter(d => d.purpose == purposes[o]))) .attr('stroke', d => purposeToColor(purposes[o])) .attr('stroke-width', 2) .attr('fill', 'none'); const p = 6 cells.append('path') // given data .attr('d', d => line(d.data.filter(d => d.purpose == purposes[p]))) .attr('stroke', d => purposeToColor(purposes[p])) .attr('stroke-width', 2) .attr('fill', 'none'); const q = 7 cells.append('path') // given data .attr('d', d => line(d.data.filter(d => d.purpose == purposes[q]))) .attr('stroke', d => purposeToColor(purposes[q])) .attr('stroke-width', 2) .attr('fill', 'none'); const r = 8 cells.append('path') // given data .attr('d', d => line(d.data.filter(d => d.purpose == purposes[r]))) .attr('stroke', d => purposeToColor(purposes[r])) .attr('stroke-width', 2) .attr('fill', 'none'); const s = 9 cells.append('path') // given data .attr('d', d => line(d.data.filter(d => d.purpose == purposes[s]))) .attr('stroke', d => purposeToColor(purposes[s])) .attr('stroke-width', 2) .attr('fill', 'none'); // add the state label to each cell cells.append('text') .attr('font-size', 10.5) .attr('dominant-baseline', 'middle') .attr('x', 5) .attr('y', y2(20)-(visHeight/12)) .attr('transform', 'rotate(-10)') .text(d => d.country) // Axes // 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) => Math.floor(i/numCols)%2 == 0) // ((Math.floor(i/numCols)%2==0) ? i:i+1) % 2 == 0 .selectAll('text') .remove(); // add y axes to each chart const yAxes = cells.append('g') .call(y2Axis) // 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, i) => i % numCols !== 0) .selectAll('text') .remove(); return svg.node(); }4d:T43c,{ const margin = {top: 0, right: 0, bottom: 0, left: 0}; const visWidth = width - margin.left - margin.right; const visHeight = 800 - 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/3 - 20) .attr("y", 50) .attr("font-size", "30px") .text("History of Donatations Recieved (" + nowYear + ")"); // draw map const projection = d3.geoEqualEarth() // geoAlbers() .fitSize([visWidth, visHeight], geoJSON); const path = d3.geoPath().projection(projection); g.selectAll('.border') .data(geoJSON.features) .join('path') .attr('class', 'border') .attr('d', path) .attr('fill', d => countries.includes(d.properties.NAME_LONG) ? donoToColor(country_donos[d.properties.NAME_LONG]) : "#bfbfbf") .attr('stroke', 'white') return svg.node(); }4e:[{"id":"55260abbc777c0a3b8fed19f3929dd822fef9d5118b53b76b2176d20782910e599eac919999ea8ee85a60b783fd37082574f6591fd46c0d70ddf9b00df71ce27","href":"https://static.observableusercontent.com/files/55260abbc777c0a3b8fed19f3929dd822fef9d5118b53b76b2176d20782910e599eac919999ea8ee85a60b783fd37082574f6591fd46c0d70ddf9b00df71ce27","name":"countries-50m.json","type":"application/json","lastModified":1681457909902.827,"size":4177662}] 45:{"id":"c23ff3efbd270ccc","slug":null,"title":"Mini-Project 2 (Temporal Data)","thumbnail":"caf0138f922f95c6c95dab6fd4241e06ca77ca0b06f61954c4a1f0bcdb0bbb13","access_level":"public","create_time":"$D2023-04-14T07:38:29.902Z","update_time":"$D2023-04-15T13:35:45.136Z","view_time":null,"first_public_time":"$D2023-04-14T07:38:29.902Z","has_unpublished_edits":null,"fork":{"id":"edccd153ac3fa1c6","slug":"mini-project-2-temporal-data","title":"Mini-Project 2 (Temporal Data)","owner":{"id":"0bf1c981cc4de90c","login":"kroneml","name":"Michael Krone"}},"stars":0,"starred":false,"owner":{"type":"team","id":"9e2a470ceb9b6bbb","login":"korashughes","name":"Kora Hughes","avatar_url":"https://avatars-next.observableusercontent.com/86e4e94539f2d3129cd1607b6a151e83b4eb496e1cb994e673428bf3911f706e","tier":"starter_2024","bio":"","following":false},"version":860,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"72b77fbece4bf2a2","login":"korashughes","name":"Kora Hughes","avatar_url":"https://avatars-next.observableusercontent.com/86e4e94539f2d3129cd1607b6a151e83b4eb496e1cb994e673428bf3911f706e","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"72b77fbece4bf2a2","login":"korashughes","name":"Kora Hughes","avatar_url":"https://avatars-next.observableusercontent.com/86e4e94539f2d3129cd1607b6a151e83b4eb496e1cb994e673428bf3911f706e","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 (Temporal Data)","cells":[{"id":115,"value":"md`# Mini-Project 2 (Temporal Data)`","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":true,"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":161,"value":"donors = {\n return Array.from(new Set(\n aiddata.map( d => d.donor )\n )).sort()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"recipients = {\n return Array.from(new Set(\n aiddata.map( d => d.recipient )\n )).sort()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"country_ex = { // used for single-country visualization\n return Array.from(new Set( donors.concat(recipients) )).sort().slice(0, 1)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":490,"value":"countries = {\n return Array.from(new Set( donors.concat(recipients) )).sort()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"timeExt = d3.extent(aiddata.map(d => d.yearInt))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"$47","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":138,"value":"md`## Solutions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"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\")?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":211,"value":"sum_aid = {\n const places = {};\n for (let i = 0; i < country_ex.length; i++) {\n const entry = [];\n let given = 0;\n let recieved = 0;\n for (let j = timeExt[0]; j < timeExt[1]+1; j++){\n const new_entry = {};\n const curr_give = aiddata.filter(d => d.donor == countries[i] && d.yearInt == j);\n const curr_recieve = aiddata.filter(d => d.recipient == countries[i] && d.yearInt == j);\n given += d3.sum(curr_give, d => d.amount);\n recieved += d3.sum(curr_recieve, d => d.amount);\n new_entry['year'] = j;\n new_entry['given'] = given;\n new_entry['recieved'] = recieved;\n new_entry['country'] = countries[i];\n entry.push(new_entry);\n }\n places[\"\"+countries[i]] = entry;\n }\n return new Map(Object.entries(places));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"sum_given_aid = {\n const places = {};\n for (let i = 0; i < country_ex.length; i++) {\n const entry = [];\n let given = 0;\n for (let j = timeExt[0]; j < timeExt[1]+1; j++){\n const new_entry = {};\n const curr_give = aiddata.filter(d => d.donor == countries[i] && d.yearInt == j);\n given += d3.sum(curr_give, d => d.amount);\n new_entry['year'] = j;\n new_entry['value'] = given;\n new_entry['country'] = countries[i];\n entry.push(new_entry);\n }\n places[\"\"+countries[i]] = entry;\n }\n return new Map(Object.entries(places));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"sum_recieved_aid = {\n const places = {};\n for (let i = 0; i < country_ex.length; i++) {\n const entry = [];\n let recieved = 0;\n for (let j = timeExt[0]; j < timeExt[1]+1; j++){\n const new_entry = {};\n const curr_recieve = aiddata.filter(d => d.recipient == countries[i] && d.yearInt == j);\n recieved += d3.sum(curr_recieve, d => d.amount);\n new_entry['year'] = j;\n new_entry['value'] = recieved;\n new_entry['country'] = countries[i];\n entry.push(new_entry);\n }\n places[\"\"+countries[i]] = entry;\n }\n return new Map(Object.entries(places));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"maxPrice = {\n const vals = []\n for (const [country, data] of sum_aid) {\n vals.push(d3.max(data, d => d.given))\n vals.push(d3.max(data, d => d.recieved))\n }\n return d3.max(vals);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"countryToColor = d3.scaleOrdinal().domain(countries).range(d3.schemeTableau10);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"rygExt = [\"#c21d28\", \"#188d4a\"] // approx extent of d3.interpolateRdYlGn","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"posNeg = d3.scaleOrdinal([\"Donated\", \"Recieved\"], rygExt)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":558,"value":"If we only had to look at 1 country's distribution I think this would be ideal since you get a close look at the distribution over time and can easily compare the sum total donated over time. I ended up spending a lot of extra time creating a small-multiple's version in order to better answer the questions --> See next visualization","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":296,"value":"legend({color: posNeg, title: \"Color Key:\"})\n//swatches({color: countryToColor, title:\"Country\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"## Example of Graph to be shown per Country","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":200,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"sum_aid_sm = { // small multiples\n const places = [];\n for (let i = 0; i < countries.length; i++) {\n const entry = {'country': countries[i]};\n // let given = 0;\n // let recieved = 0;\n let data = []\n for (let j = timeExt[0]; j < timeExt[1]+1; j++){\n const new_entry = {'year': j};\n const curr_give = aiddata.filter(d => d.donor == countries[i] && d.yearInt == j);\n const curr_recieve = aiddata.filter(d => d.recipient == countries[i] && d.yearInt == j);\n const given = d3.sum(curr_give, d => d.amount);\n const recieved = d3.sum(curr_recieve, d => d.amount);\n new_entry['given'] = given;\n new_entry['recieved'] = recieved;\n new_entry['country'] = countries[i];\n data.push(new_entry);\n }\n entry['data'] = data;\n places.push(entry);\n }\n return places;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":505,"value":"true_maxPrice = {\n const vals = []\n for (let i = 0; i < sum_aid_sm.length; i++) {\n vals.push(sum_aid_sm[i].data.map(d => d.given));\n vals.push(sum_aid_sm[i].data.map(d => d.recieved));\n }\n return d3.max(d3.merge(vals));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"dimensions = {\n const margin = { top: 30, bottom: 20, right: 10, left: 30 };\n const visWidth = width - margin.left - margin.right;\n const visHeight = 1000 - margin.top - margin.bottom;\n \n return { margin, visWidth, visHeight };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"numCols = 6 // can experiment with this (will have to change location of country text to compensate tho)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"numRows = Math.ceil(countries.length / numCols)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":363,"value":"row = d3.scaleBand()\n .domain(d3.range(numRows))\n .range([0, dimensions.visHeight])\n .padding(0.22)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"col = d3.scaleBand()\n .domain(d3.range(numCols))\n .range([0, dimensions.visWidth])\n .padding(0.1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"y = d3.scaleSqrt()\n .domain([0, true_maxPrice])\n .range([row.bandwidth(), 0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"x = d3.scaleLinear()\n .domain(timeExt)\n .range([0, col.bandwidth()])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"given_area = d3.area()\n .x(d => x(d.year))\n .y1(d => y(d.given))\n .y0(d => y(0))\n // .defined(d => d.given !== '-')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":378,"value":"rec_area = d3.area()\n .x(d => x(d.year))\n .y1(d => y(d.recieved))\n .y0(d => y(0))\n // .defined(d => d.recieved !== '-')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":382,"value":"xAxis = d3.axisBottom(x)\n .tickSizeOuter(0)\n .tickFormat(x => x)\n .ticks(4)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"yAxis = d3.axisLeft(y)\n .tickSizeOuter(0)\n .tickFormat(x => '$'+(x/1000000000)+'B')\n .ticks(3)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":566,"value":"$49","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":434,"value":"legend({color: posNeg, title: \"Color Key:\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":602,"value":"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.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":608,"value":"purpose_count = {\n const vals = {}\n for (let i = 0; i < aiddata.length; i++) {\n if (aiddata[i].purpose in vals){\n vals[aiddata[i].purpose] += 1;\n }\n else{\n vals[aiddata[i].purpose] = 0;\n }\n }\n\n const ret = [];\n for (const [key, val] of Object.entries(vals)){\n ret.push({'purpose': key, 'count': val})\n }\n return ret.sort((a, b) => d3.descending(a.count, b.count));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":630,"value":"purposes = purpose_count.map(d => d.purpose).slice(1, 11) // we ignore 0 because 'unspecified' is less helpful for our purposes\n// purposes = {\n// return Array.from(new Set(\n// aiddata.map( d => d.purpose )\n// )).sort()\n// }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":638,"value":"purpose_data = {\n const vals = []\n for (let i = 0; i < countries.length; i++) {\n const entry = {'country': countries[i]};\n const data = [];\n for (let j = timeExt[0]; j < timeExt[1]+1; j++){\n for (let k = 0; k < purposes.length; k++){\n const temp = aiddata.filter(d => d.donor == countries[i] && d.yearInt == j && d.purpose == purposes[k])\n data.push({'year': j, 'purpose': purposes[k], 'value': d3.sum(temp.map(d => d.amount))})\n }\n }\n entry['data'] = data;\n vals.push(entry)\n }\n return vals.sort((a, b) => d3.descending(d3.sum(a.data.map(d => d.value)), d3.sum(b.data.map(d => d.value)))); //new Map(Object.entries(vals));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":703,"value":"purpose_data2 = {\n const vals = {}\n for (let i = 0; i < purposes.length; i++) {\n const data = [];\n for (let j = timeExt[0]; j < timeExt[1]+1; j++){\n const temp = aiddata.filter(d => d.yearInt == j && d.purpose == purposes[i])\n data.push({'purpose': purposes[i], 'year': j, 'value': d3.sum(temp.map(d => d.amount))})\n }\n vals[purposes[i]] = data\n }\n return new Map(Object.entries(vals));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":728,"value":"maxVal2 = {\n const vals = [];\n for(const [purpose, data] of purpose_data2.entries()){\n vals.push(data.map(d => d.value))\n }\n return d3.max(d3.merge(vals));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":711,"value":"purposeToColor = d3.scaleOrdinal().domain(purposes).range(d3.schemeSet3);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":745,"value":"Overall I think this visualization is quite very appropriate and decently affective. Line graphs are best for time series x quantitative data. Additionally the exponential scaling alongside the coloration makes it easier to decipher a given purpose's trend over time across all magnitudes, improving effectiveness. Ex; you can see how Industrial development is the most prominent reason for donation before the 2000s but was quickly replaced by Social/welfare services.\n\nThough it can get a little cluttered towards the bottom (average) with many overlapping lines, I think that this type of visualization is definitely best. Maybe only looking at 5 reasons at a time would be better.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":713,"value":"swatches({color: purposeToColor, title:\"Purposes:\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":708,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":725,"value":"maxVal = {\n const vals = []\n for(let i=0; i < purpose_data.length; i++){\n const temp = purpose_data[i].data.map(d => d.value);\n vals.push(d3.max(temp))\n }\n return d3.max(vals);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":663,"value":"y2 = d3.scaleSqrt()\n .domain([0, maxVal])\n .range([row.bandwidth(), 0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":670,"value":"y2Axis = d3.axisLeft(y2)\n .tickSizeOuter(0)\n .tickFormat(x => '$'+(x/1000000000)+'B')\n .ticks(3)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":701,"value":"Author's Note: I created this visualization thinking you wanted something per country, per time, not all time. It would be nice to get a little extra credit for it since it took a while but if not, I understand.\n\nI think this visualization is fairly appropriate. I think it's main strength is that it allows you to see which purposes for donations stand out more and account for a majority of the donations amongst the top 10 over time for every time step, per country. For example we can say that in the early 1990s Australia made a lot of Multisector aid donations or that Industrial Development and Social/Welfare services account for most of the US's reasons for donations. The exponential y axis scaling makes smaller trends a bit more identifiable and the ordering by total aid donated makes it really easy to tell which countries have a larger amount of donations attributed to the top 10 reasons: overall speaking towards the graph's effectiveness.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":649,"value":"swatches({color: purposeToColor, title:\"Purposes:\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":673,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":778,"value":"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).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":786,"value":"country_donos = {\n const res = {}\n for (let i=0; i < countries.length; i++){\n const temp = aiddata.filter(d => d.yearInt == nowYear && d.recipient == countries[i])\n res[countries[i]] = d3.sum(temp.map(d => d.amount));\n }\n return res;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":799,"value":"maxVal3 = d3.max(aiddata.map(d => d.amount))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":790,"value":"donoToColor = d3.scaleSequentialSqrt([0, maxVal3], d3.interpolateInferno)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":856,"value":"This visualization is appropriate since the presence of geographical data and the need to compare region proximity results in a geographical visualization being the most optimal. The interactive year-slider allows us to dynamically see the change in donations over time for each country as well as observe the general trends by region which increases effectiveness. One insight we might be able to see across the years is that while some countries tend to have constant donations most flicker in and out of donation amounts and no one region is consistent, especially with higher donation amounts.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":792,"value":"legend({color: donoToColor, title:\"Donations Recieved in USD\", ticks: 5, tickFormat: (d => '$'+(d/1000000000)+'B')});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":813,"value":"viewof nowYear = Inputs.range(timeExt, {step: 1, label: \"Year\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":808,"value":"$4d","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@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":"$W4e","stdlib":"1"}} 46:"$45:body"