40:null 41:["$","title",null,{"children":"Mini-Project 1 (Geo) | Kora Hughes | Observable"}] 47:T6da,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:** 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? - **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? - **[OPTIONAL / EXTRA POINTS] 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). 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:T427,Evaluation: I think my visualization is effective because it is easy to see which countries have donated more than they received (countries on the top) and simultaneously easy to see which country donated or received the most (most green vs. most red) as well as how their donated/received ratio compared to others (vertical order). Using a bar graph is also appropriate since we are projecting categorical vs. quantitative data (country vs. money). The exponential scaling of the X axis adds to the effectiveness by allowing the user to more easily see some of the smaller differences in total money donated and received without interfering with the absolute max or minimum donated/received values. Additionally the red-green color scale along with the data sorting allows the user to easily differentiate between donated and received. Though the overlapping bar format makes it so some countries like Australia's donated amount is a bit obscured, the slight horizontal separation and ordering of the bars further reveals which amount is greater than the other.49:T9e0,{ const margin = {top: 10, right: 20, bottom: 40, left: 150}; const visWidth = width - margin.left - margin.right; const visHeight = 875 - 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") // title .attr("x", visWidth / 2) .attr("y", -margin.top + 5) .attr("text-anchor", "middle") .attr("dominant-baseline", "hanging") .attr("font-family", "sans-serif") .attr("font-size", "18px") .text("Total Money Donated & Recieved from " + timeline + " ranked by Donated/Received"); // create scales const x = d3.scaleSqrt() .domain(recExt).nice() .range([0, visWidth]); const bardist = 2.5; const y = d3.scaleBand() .domain(total_aid.map(d => d.country)) .range([0, visHeight]) .padding(0.35 + bardist/10); // create and add axes const xAxis = d3.axisBottom(x).tickFormat(x => '$'+(x/1000000000)+'B').ticks(8); // d3.format(".2s") g.append("g") .attr("transform", `translate(0, ${visHeight})`) .call(xAxis) .call(g => g.select(".domain").remove()) .append("text") .attr("x", visWidth / 2) .attr("y", 40) .attr("fill", "black") .attr("text-anchor", "middle") .text("$ Amount in billion USD"); const yAxis = d3.axisLeft(y); g.append("g") .call(yAxis) // remove baseline from the axis .call(g => g.select(".domain").remove()); // draw bars g.append("g") .selectAll("rect") .data(total_aid) .join("rect") .attr("x", d => 0) .attr("y", d => y(d.country) + ((d.donated >= d.recieved) ? bardist : -bardist)) // Note: we draw the larger value before the smaller so it always appears behind .attr("width", d => x((d.donated >= d.recieved) ? d.donated : d.recieved)) .attr("height", d => y.bandwidth()) .attr("fill", d => rygExt[(d.donated >= d.recieved) ? 1:0]); g.append("g") .selectAll("rect") .data(total_aid) .join("rect") .attr("x", d => 0) .attr("y", d => y(d.country) + ((d.donated >= d.recieved) ? -bardist : bardist)) .attr("width", d => x((d.donated >= d.recieved) ? d.recieved : d.donated)) .attr("height", d => y.bandwidth()) .attr("fill", d => rygExt[(d.donated >= d.recieved) ? 0:1]); return svg.node(); }4a:Ta61,{ // set up const margin = {top: 50, right: 120, bottom: 50, left: 120}; const visWidth = 600; const visHeight = 600; 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})`); // add title g.append("text") .attr("x", visWidth / 2) .attr("y", -margin.top + 5) .attr("text-anchor", "middle") .attr("dominant-baseline", "hanging") .attr("font-family", "sans-serif") .attr("font-size", "16px") .text("Amount Donated vs. Amount Recieved from " + timeline + " in USD"); // create scales const x = d3.scaleSqrt() .domain(d3.extent(total_aid, d => d.recieved)).nice() .range([0, visWidth]); const y = d3.scaleSqrt() .domain(d3.extent(total_aid, d => d.donated)).nice() .range([visHeight, 0]); // create and add axes const xAxis = d3.axisBottom(x).tickFormat(x => '$'+(x/1000000000)+'B').ticks(8); g.append("g") // move to bottom of chart .attr("transform", `translate(0, ${visHeight})`) // add axis .call(xAxis) // remove baseline from axis .call(g => g.select(".domain").remove()) // add grid lines // refernces https://observablehq.com/@d3/connected-scatterplot .call(g => g.selectAll('.tick line') .clone() .attr('stroke', '#d3d3d3') .attr('y1', -visHeight) .attr('y2', 0)) // add title .append("text") .attr("x", visWidth / 2 - 10) .attr("y", 40) .attr("fill", "black") .attr("text-anchor", "middle") .text("Aid Recieved"); const yAxis = d3.axisLeft(y).tickFormat(x => '$'+(x/1000000000)+'B').ticks(8); g.append("g") // add axis .call(yAxis) // remove baseline from axis .call(g => g.select(".domain").remove()) // add grid lines // refernces https://observablehq.com/@d3/connected-scatterplot .call(g => g.selectAll('.tick line') .clone() .attr('stroke', '#d3d3d3') .attr('x1', 0) .attr('x2', visWidth)) // add title .append("text") .attr("x", -40) .attr("y", visHeight / 2) .attr("fill", "black") .attr("dominant-baseline", "middle") .text("Aid Donated"); // draw points g.append("g") .selectAll("circle") .data(total_aid) .join("circle") .attr("cx", d => x(d.recieved)) .attr("cy", d => y(d.donated)) .attr("fill", d => ratioToColor(d.ratio)) .attr("r", 3); return svg.node(); }4b:T4dc,{ const height = 900; // sets the margin of the svg element const margin = ({top: 0, right: 0, bottom: 0, left: 0}) const svg = d3.create('svg') .attr('width', width + margin.left + margin.right) .attr('height', height + margin.top + margin.bottom); // appends a group element to the svg element and sets the transform attribute const g = svg.append('g').attr('transform', `translate(${margin.left}, ${margin.top})`); const earth = d3.geoEqualEarth().fitSize([width, height], d3.geoGraticule().outline()); const path = d3.geoPath().projection(earth) g.append("text") .attr("x", width / 2) .attr("y", -margin.top + 100) .attr("text-anchor", "middle") .attr("dominant-baseline", "hanging") .attr("font-family", "sans-serif") .attr("font-size", "20px") .text("Ratio of Money Donated/Received per Country from " + timeline); g.selectAll('path') .data(geoJSON.features) .join('path') .attr('d', path) .attr('fill', d => (d.properties.NAME_LONG in nameToRatio) ? ratioToColor2(nameToRatio[d.properties.NAME_LONG]) : "grey") // Note: we want the countries not in this databse to be greyed out and less noticible .attr('stroke', 'white'); return svg.node(); }4c:T654,Evaluation: The multi-bar view shows the distribution of the top 5 reasons across country rather easily. For example we can observe that 'strengthening civil society' tends to either be one of the most frequent reasons for donations in a given country or one of the least frequent, generally replaced by 'welfare services' or 'material relief'. Outside of this, the distribution of the top 5 reasons seems general constant amongst all countries that have them barring some outliers that only received based on 'material relief' or stated different reasons than the top 5 entirely. Overall, the use of a bar graph to display categorical data (country) vs. quantitative data transaction count) is appropriate. The vertical layout of the bars adds space and increases readability. Also color scheme that is not too harsh to look at but still makes it easy to distinguish the most and least frequent reasons for receiving transactions. The peaks of the graph stand out allowing the user to see the reason with the highest number of transactions as well as the countries that did not donate with those reasons which is good for further comparison. On the flip side, I would separate it into 2 different graphs so that it wasn't so squished since there are many countries to look at. I also think that since the raw number of transactions received is less important, a visualization with some distribution-showing mark like a pie chart might been marginally easier to read so long as the visual retains the country information and shows some physical ordering or size of the mark to represent number of donations received. 4d:Tb7f,{ const margin = {top: 10, right: 0, bottom: 100, left: 60}; const visWidth = width - margin.left - margin.right; const visHeight = 900 - margin.top - margin.bottom; const svg = d3.create('svg') .attr('width', visWidth + margin.left + margin.right) .attr('height', visHeight + margin.top + margin.bottom); const g = svg.append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); const groupX = d3.scaleBand().domain(countries).range([0, visWidth]).padding(0.25); const y = d3.scaleSqrt().domain(purposeExt).range([visHeight, 0]).nice(); const x = d3.scaleBand().domain(most_common_purposes).range([0, groupX.bandwidth()]).padding(0.0); const xAxis = d3.axisBottom(groupX); const yAxis = d3.axisLeft(y).ticks(10); g.append("text") .attr("x", width / 2) .attr("y", -margin.top + 20) .attr("text-anchor", "middle") .attr("dominant-baseline", "hanging") .attr("font-family", "sans-serif") .attr("font-size", "20px") .text("Total Number of Donations Recieved per Country by Reason from " + timeline); g.append("text") .attr("x", visWidth / 2) .attr("y", visHeight + 85) .attr("fill", "black") .attr("text-anchor", "middle") .attr("font-size", "16px") .text("Country"); g.append("text") .attr("x", - 300) .attr("y", visHeight - 840) .attr("fill", "black") .attr("text-anchor", "middle") .attr("font-size", "14px") .attr('transform', 'rotate(-90)') .text("Number of Donations Recieved"); g.append('g') .attr('transform', `translate(0,${visHeight})`) .call(xAxis) .call(g => g.selectAll('.domain').remove()) .selectAll('text') .style('font-size', '12px') .attr('transform', 'rotate(-45)') .attr('text-anchor', 'end') .attr('dx', '-0.5em') .attr('dy', '0.5em'); g.append("g") .call(yAxis) .call(g => g.selectAll('.domain').remove()) .selectAll('line') .attr('stroke', 'lightgrey') .attr('stroke-dasharray', '2,2') .append('text') .attr('fill', 'black') .attr('text-anchor', 'start') .attr('dominant-baseline', 'hanging') .attr('font-weight', 'bold') .attr('y', -margin.top) .attr('x', -margin.left) .text('Countries\' Total Aid Donated By Purpose from' + timeline); const groups = g.append('g') .selectAll('g') .data(country_ranked_purposes) .join('g') .attr('transform', ([country, data]) => `translate(${groupX(country)},0)`); groups.selectAll('rect') .data(([country, data]) => data) .join('rect') .attr('fill', ([purpose, count]) => purposeToColor(purpose)) .attr('y', ([purpose, count]) => y(count)) .attr('height', ([purpose, count]) => visHeight - y(count)) .attr('x', ([purpose, count]) => x(purpose)) .attr('width', x.bandwidth()); return svg.node(); }4e:[{"id":"55260abbc777c0a3b8fed19f3929dd822fef9d5118b53b76b2176d20782910e599eac919999ea8ee85a60b783fd37082574f6591fd46c0d70ddf9b00df71ce27","href":"https://static.observableusercontent.com/files/55260abbc777c0a3b8fed19f3929dd822fef9d5118b53b76b2176d20782910e599eac919999ea8ee85a60b783fd37082574f6591fd46c0d70ddf9b00df71ce27","name":"countries-50m.json","type":"application/json","lastModified":1680504342665.72,"size":4177662}] 45:{"id":"1080166a563159d3","slug":null,"title":"Mini-Project 1 (Geo)","thumbnail":"374d585ddc08e101da3153bb67f0adab7fab242977d01ae55fedbda72c7168d7","access_level":"public","create_time":"$D2023-04-03T06:45:42.665Z","update_time":"$D2023-10-19T19:54:27.345Z","view_time":null,"first_public_time":"$D2023-04-03T06:45:42.665Z","has_unpublished_edits":null,"fork":{"id":"1d0627df67a1137c","slug":"mini-project-1-geo","title":"Mini-Project 1 (Geo)","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":794,"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 1 (Geo)","cells":[{"id":115,"value":"md`# Mini-Project 1 (Geo)`","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":777,"value":"long_names = {\n return Array.from(new Set(\n geoJSON['features'].map( entry => entry.properties[\"NAME_LONG\"] )\n )).sort()\n}","pinned":true,"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":163,"value":"donors = {\n return Array.from(new Set(\n aiddata.map( entry => entry.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":166,"value":"recipients = {\n return Array.from(new Set(\n aiddata.map( entry => entry.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":"countries = {\n return Array.from(new Set(\n donors.concat(recipients).map( entry => entry )\n )).sort()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"timeExt = d3.extent(aiddata, entry => entry.yearInt)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"timeline = timeExt[0] + \" to \" + timeExt[1]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"total_aid = {\n const result = [];\n for (let i = 0; i < countries.length; i++) {\n const entry = {};\n entry['country'] = countries[i];\n\n const donos = aiddata.filter(entry => entry.donor === countries[i]);\n const recieves = aiddata.filter(entry => entry.recipient === countries[i]);\n entry['donated'] = d3.sum(donos, entry => entry.amount); // round 3 decimal places\n entry['recieved'] = d3.sum(recieves, entry => entry.amount);\n const temp_ratio = entry['donated'] / entry['recieved'];\n entry['ratio'] = temp_ratio;\n // if (entry['recieved'] == 0 || temp_ratio >= 50){ // Note: 50 is an arbitraty cutoff for the sake of the visualizaiton\n // entry['ratio'] = 50; // larger than the max amt: 784828\n // }\n // else{\n // entry['ratio'] = temp_ratio;\n // }\n result.push(entry);\n }\n return result.sort(function(x, y){return d3.descending(x.ratio, y.ratio);});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"donoExt = d3.extent(total_aid, entry => entry.donated)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"recExt = d3.extent(total_aid, entry => entry.recieved)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"ratioExt = d3.extent(total_aid, entry => entry.ratio)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"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?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":391,"value":"$48","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":302,"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":291,"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":293,"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":276,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"Evaluation (Failed Attempt): I really wanted this graph to work because plotting amount donated vs. received would make seeing the distribution of the data a little more intuitive. However this method suffers from a host of problems. The distribution of the data made it so most of the points lie in the bottom left, defeating the purpose of showing this large distribution, even when using an exponential layout. Its also missing country information; this could be supplemented with on-hover objects but I opted to go a different route to save time and space. I think if I quantized the data into maybe quartiles and focused on the bottom left box and treated the rest as outliers, it could potentially work better.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":421,"value":"ratioToColor = d3.scaleDivergingSqrt([0, 1, 20], d3.interpolateRdYlGn) // [ratioExt[0], 1, ratioExt[1]]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"legend({color: ratioToColor, title: \"$ Donated per $ Received\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"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?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":406,"value":"nameToRatio = {\n const result = {};\n for (let i = 0; i < countries.length; i++) {\n result[countries[i]] = d3.sum(total_aid.filter(entry => entry.country === countries[i]), entry => entry.ratio);\n }\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":433,"value":"ratioToColor2 = ratioToColor//d3.scaleQuantile(Object.values(nameToRatio), d3.schemeRdYlGn[5]) // schemeSpectral?","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":788,"value":"ratioToColor2(nameToRatio[long_names[94]])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":534,"value":"Evaluation: Use of a the geo elements to create a map is appropriate since we are concerned with the proximity of the countries and use of the color channel to represent how much each country has donate or received is effective. Furthermore the diverging color scale allows the user to tell which countries have donated more than they've received (green) and vice versa (red). The use of a standard map builds off of the viewer's existing knowledge provides an intuitive, low-effort way to identify each country without the need to spell it out. By looking at the colored regions of this map, we can decipher relationships between different regions and those that are close. For example, we might be able to say that north american countries have all donated lots while some countries in the UK, like Germany, have surrounding countries that have received much more than donated (Poland), despite Germany itself donating lots.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":416,"value":"legend({color: ratioToColor2, title: \"Donations given per $1 Recieved:\", ticks: 6, tickFormat: (x => '$'+Math.round(x))})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"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).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":489,"value":"purposes = {\n return Array.from(new Set(\n aiddata.map( entry => entry.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":492,"value":"ranked_purposes = {\n const result = [];\n for (let i = 0; i < purposes.length; i++) {\n const entry = {};\n entry['purpose'] = purposes[i];\n entry['occurance'] = 0;\n for (let j = 0; j < aiddata.length; j++){\n if (aiddata[j].purpose == purposes[i]){\n entry['occurance'] += 1;\n }\n }\n // const temp = aiddata.filter(entry => entry.purpose === purposes[i]);\n // entry['occurance'] += d3.count(temp, d => d.purpose);\n result.push(entry);\n }\n return result.sort(function(x, y){return d3.descending(x.occurance, y.occurance);});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":506,"value":"most_common_purposes = ranked_purposes.slice(1,6).map(d => d.purpose)\n// 1st one is 'not specified' which I dont think is relevant for this case","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":547,"value":"country_ranked_purposes_obj = {\n const result = {};\n for (let i = 0; i < countries.length; i++) {\n const subresult = {};\n for (let j = 0; j < most_common_purposes.length; j++){\n subresult[most_common_purposes[j]] = 0;\n for (let k = 0; k < aiddata.length; k++){\n if (aiddata[k].recipient == countries[i] && aiddata[k].purpose == most_common_purposes[j]) {\n subresult[most_common_purposes[j]] += 1;\n }\n }\n }\n result[countries[i]] = subresult;//.sort(function(x, y){return d3.descending(Object.values(x), Object.values(y));});\n }\n return result;//.sort(function(x, y){return d3.descending(d3.sum(Object.values(x)), d3.sum(Object.values(y)));});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":642,"value":"country_ranked_purposes = {\n const result = new Map();\n for (let i = 0; i < countries.length; i++) {\n // const subresult = {};\n const subresult = new Map();\n for (let j = 0; j < most_common_purposes.length; j++){\n // subresult[most_common_purposes[j]] = 0;\n subresult.set(most_common_purposes[j], 0);\n for (let k = 0; k < aiddata.length; k++){\n if (aiddata[k].recipient == countries[i] && aiddata[k].purpose == most_common_purposes[j]) {\n // subresult[most_common_purposes[j]] += 1;\n subresult.set(most_common_purposes[j], subresult.get(most_common_purposes[j])+1);\n }\n }\n }\n result.set(countries[i], subresult);\n }\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":578,"value":"purposeExt = d3.extent(Object.values(country_ranked_purposes_obj).map(d => Object.values(d)).map(d => d3.max(d)))\n// long complex way of getting the max/min number of disbursmenets out of all countries for those top 5 purposes","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":589,"value":"purposeToColor = d3.scaleOrdinal(most_common_purposes, d3.schemePaired)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":708,"value":"$4c","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":594,"value":"swatches({color: purposeToColor, title:\"Top 5 Most Common Disbursement Categories:\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":629,"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"