40:null 41:["$","title",null,{"children":"Mini-Project 3 (Network Visualization) | Kora Hughes | Observable"}] 47:T993,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 (*all of them are mandatory, i.e., there are no optional questions this time*): - **Visualization 1:** Create an overview of the relationships between countries so that it is possible to see who donates to whom and how much. The main question one should be able to answer is: who are the major donors and to which countries do they donate the most and how much? And conversely, who are the major receivers and which countries do they receive from the most and how much? We only care about the top 10 recipients and the top 20 donors (over the whole time) for this question. - **Visualization 2:** Considering only the top 5 purposes of donation, how does the relationship between countries look like in terms of purposes? What composition (distribution) of purposes do the donations between each pair of countries have? Are there countries that donate to a given country using multiple purposes? Or do counties always donate using one single purpose when donating to another country? The same as the previous question, we only care about the top 10 recipients and the top 20 donors here. - **Visualization 3:** For this last exercise you have to extend the analysis above to see how the patterns of donations change over time. Focusing again on the top 10 recipients and top 20 donors how do the patterns of donations (who donates to whom and how much) change over time? Are there sudden changes? Are there countries that always donate to other countries? Are there major shifts (say a country used to donate to a specific set of countries and then it changes to other countries)? For each visualization add a description of your thought process and why you think your solution is *appropriate* and *effective*. Note that it is fine to submit more than one solution for a given visualization problem if you think there are some competing solutions that work well (or that you need more than one visualization to answer the question). When you do that, make sure to compare the solutions by commenting on their advantages and disadvantages (or explain why you need a combination of different visualizations). `48:T6c1,{ // set up const svg = d3.create('svg') .attr('width', margin.width + margin.left + margin.right) .attr('height', margin.height + margin.top + margin.bottom); const g = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); // axes g.append("g").attr("transform", "translate(-10,0)").call(yAxis); g.append("g").call(xAxis); // add gray background and white grid const background = g.append('g'); // one gray rectangle the size of the matrix background.append('rect') .attr('width', margin.width) .attr('height', margin.height) .attr('fill', '#eeeeee'); // grid lines const xPaddingSize = x.step() * x.paddingInner(); const yPaddingSize = y.step() * y.paddingInner(); background.append('g') .selectAll('line') .data(dono_nodes.slice(1)) .join('line') .attr('x1', d => x(d.id) - xPaddingSize / 2) .attr('x2', d => x(d.id) - xPaddingSize / 2) .attr('y1', 0) .attr('y2', margin.height) .attr('stroke-width', xPaddingSize) .attr('stroke', 'white'); background.append('g') .selectAll('line') .data(dono_nodes.slice(1)) .join('line') .attr('y1', d => y(d.id) - yPaddingSize / 2) .attr('y2', d => y(d.id) - yPaddingSize / 2) .attr('x1', 0) .attr('x2', margin.width) .attr('stroke-width', yPaddingSize) .attr('stroke', 'white'); // draw squares g.append('g') .selectAll('g') .data(dono_links) .join('rect') .attr('x', d => x(d.target)) .attr('y', d => y(d.source)) .attr('width', x.bandwidth()) .attr('height', y.bandwidth()) .attr('fill', d => dono_color(d.weight)) return svg.node(); }49:T586,{ const visWidth = margin.width; const visHeight = margin.height; 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})`); // edge-lines const edges = g.append('g') .selectAll('line') .data(linksForce) .join('line') .attr('stroke', d=>purposeToColor(d.purpose)) .attr('fill', 'none') // .attr('x1', d => 200*top_purposes.indexOf(d.purpose)) // .attr('x2', d => 200*top_purposes.indexOf(d.purpose)) .attr('stroke-width', d=>lineWidth(d.weight)); // node groups const vertices = g.append('g') .selectAll('g') .data(nodesForce) .join('g') vertices.append('circle') .attr('r', 55) .attr('fill', "#e6e6e6") // d=>color_node(d.id) vertices.append('text') .attr('fill', 'black') .attr('dominant-baseline', 'middle') .attr('text-anchor', 'middle') .attr('font-family', 'sans-serif') .attr('font-size', '14') .text(d => d.id); edges.append('text') vertices .attr('transform', d => `translate(${d.x},${d.y})`) edges .attr("x1", d => d.source.x) .attr("y1", d => d.source.y) .attr("x2", d => d.target.x) .attr("y2", d => d.target.y); return svg.node(); }4a:T69d,{ // set up const svg = d3.create('svg') .attr('width', margin.width + margin.left + margin.right) .attr('height', margin.height + margin.top + margin.bottom); const g = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); // axes g.append("g").call(yAxis); g.append("g").call(xAxis); // add gray background and white grid const background = g.append('g'); // one gray rectangle the size of the matrix background.append('rect') .attr('width', margin.width) .attr('height', margin.height) .attr('fill', '#eeeeee'); // grid lines const xPaddingSize = x.step() * x.paddingInner(); const yPaddingSize = y.step() * y.paddingInner(); background.append('g') .selectAll('line') .data(dono_nodes.slice(1)) .join('line') .attr('x1', d => x(d.id) - xPaddingSize / 2) .attr('x2', d => x(d.id) - xPaddingSize / 2) .attr('y1', 0) .attr('y2', margin.height) .attr('stroke-width', xPaddingSize) .attr('stroke', 'white'); background.append('g') .selectAll('line') .data(dono_nodes.slice(1)) .join('line') .attr('y1', d => y(d.id) - yPaddingSize / 2) .attr('y2', d => y(d.id) - yPaddingSize / 2) .attr('x1', 0) .attr('x2', margin.width) .attr('stroke-width', yPaddingSize) .attr('stroke', 'white'); // draw squares g.append('g') .selectAll('g') .data(dono_links2) .join('rect') .attr('x', d => x(d.target)) .attr('y', d => y(d.source)) .attr('width', x.bandwidth()) .attr('height', y.bandwidth()) .attr('fill', d => dono_color2(d.weight)) return svg.node(); }4b:[{"id":"55260abbc777c0a3b8fed19f3929dd822fef9d5118b53b76b2176d20782910e599eac919999ea8ee85a60b783fd37082574f6591fd46c0d70ddf9b00df71ce27","href":"https://static.observableusercontent.com/files/55260abbc777c0a3b8fed19f3929dd822fef9d5118b53b76b2176d20782910e599eac919999ea8ee85a60b783fd37082574f6591fd46c0d70ddf9b00df71ce27","name":"countries-50m.json","type":"application/json","lastModified":1682334297035.717,"size":4177662}] 45:{"id":"4ebbf75b22054c69","slug":null,"title":"Mini-Project 3 (Network Visualization)","thumbnail":"3f7e52aee9bc1d8fb995de34bceed95f1187aeadc82d78d8b352e164ef7d04a0","access_level":"public","create_time":"$D2023-04-24T11:04:57.035Z","update_time":"$D2023-05-04T23:59:57.855Z","view_time":null,"first_public_time":"$D2023-04-24T11:04:57.035Z","has_unpublished_edits":null,"fork":{"id":"95e1a2c7cc7a773a","slug":"mini-project-3-network-visualization","title":"Mini-Project 3 (Network Visualization)","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":728,"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 3 (Network Visualization)","cells":[{"id":115,"value":"md`# Mini-Project 3 (Network Visualization)`","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":207,"value":"shortten = {\n const ret = {};\n for (let i = 0; i < countries.length; i++) {\n for (let j = 0; j < geoJSON.features.length; j++) {\n if (geoJSON.features[j].properties.NAME_LONG == countries[i]){\n ret[countries[i]] = geoJSON.features[j].properties.POSTAL;\n }\n // geoJSON.features[j].properties.NAME_LONG.includes(countries[i])\n }\n }\n // custom mapping for edge cases \n ret[\"Korea\"] = \"KR\";\n ret[\"Slovak Republic\"] = \"SK\"; // https://www.ncbi.nlm.nih.gov/books/NBK7249/\n return ret;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"unmapped_countries = {\n const ret = [];\n for (let i = 0; i < countries.length; i++) { \n if (Object.keys(shortten).includes(countries[i]) == false){\n ret.push(countries[i])\n }\n }\n return ret;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"shortten_has_dups = (new Set(Object.values(shortten))).size !== Object.values(shortten).length;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"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":169,"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":172,"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":449,"value":"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":176,"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":179,"value":"Visualization 1: Create an overview of the relationships between countries so that it is possible to see who donates to whom and how much. The main question one should be able to answer is: who are the major donors and to which countries do they donate the most and how much? And conversely, who are the major receivers and which countries do they receive from the most and how much? We only care about the top 10 recipients and the top 20 donors (over the whole time) for this question.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":141,"value":"sum_dono = {\n const places = {};\n for (let i = 0; i < countries.length; i++) {\n const total = d3.sum(aiddata.filter(d => d.donor == countries[i]), d => d.amount);\n places[countries[i]] = total;\n }\n return places; //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":411,"value":"sum_rec = {\n const places = {};\n for (let i = 0; i < countries.length; i++) {\n const total = d3.sum(aiddata.filter(d => d.recipient == countries[i]), d => d.amount);\n places[countries[i]] = total;\n }\n return places; //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":406,"value":"top_dono = Object.entries(sum_dono)\n .sort(([,a],[,b]) => b-a).slice(0, 20).map(d => d[0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"top_rec = Object.entries(sum_rec)\n .sort(([,a],[,b]) => b-a).slice(0, 10).map(d => d[0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":479,"value":"top_countries = {\n return Array.from(new Set( top_dono.concat(top_rec) ))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"sum_dono_ext = d3.extent(Object.values(sum_dono))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"dono_links = {\n const ret = [];\n for (let i = 0; i < top_countries.length; i++) {\n for (let j = 0; j < top_countries.length; j++) {\n const num = d3.sum(aiddata.filter(d => d.donor == top_countries[i] && d.recipient == top_countries[j]), d => d.amount);\n const entry = {'source': shortten[top_countries[i]], 'target': shortten[top_countries[j]], 'weight': num};\n if (num > 0){ // we dont need to save these weights\n ret.push(entry);\n }\n }\n }\n return ret.sort(function(x, y){ return d3.ascending(x.weight, y.weight); });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"dono_nodes = {\n const ret = [];\n for (let i = 0; i < top_countries.length; i++) {\n const entry = {'id': shortten[top_countries[i]], 'full_name': top_countries[i]};\n ret.push(entry);\n }\n return ret.sort(function(x, y){ return d3.descending(sum_dono[x.full_name], sum_dono[y.full_name]); });;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":471,"value":"rec_nodes = {\n const ret = [];\n for (let i = 0; i < top_rec.length; i++) {\n const entry = {'id': shortten[top_rec[i]], 'full_name': top_rec[i]};\n ret.push(entry);\n }\n return ret.sort(function(x, y){ return d3.descending(sum_rec[x.full_name], sum_rec[y.full_name]); });;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"dono_ext = [0, d3.max(dono_links.map(d => d.weight))]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"margin = ({top: 25, right: 0, bottom: 0, left: 100, width: 900, height: 850})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"dono_color = d3.scaleSequentialSqrt()\n .domain(dono_ext)\n .interpolator(d3.interpolateGreens)\n .unknown(\"#eeeeee\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"y = d3.scaleBand()\n .domain(dono_nodes.map(d => d.id))\n .range([0, margin.height])\n .paddingInner(0.1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"x = d3.scaleBand()\n .domain(rec_nodes.map(d => d.id))\n .range([0, margin.width])\n .paddingInner(0.1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"xAxis = g => g\n .call(d3.axisTop(x).tickSize(0))\n .call(g => g.selectAll(\".domain\").remove())\n .append(\"text\")\n .attr(\"x\", margin.width / 2)\n .attr(\"y\", -margin.top)\n .attr(\"fill\", \"black\")\n .attr(\"text-anchor\", \"middle\")\n .attr(\"dominant-baseline\", \"hanging\")\n .attr(\"font-size\", \"12px\")\n .text(\"Recipient\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"yAxis = g => g\n .call(d3.axisLeft(y).tickSize(0))\n .call(g => g.selectAll(\".domain\").remove())\n .append(\"text\")\n .attr(\"x\", -margin.left+25)\n .attr(\"y\", margin.height / 2)\n .attr(\"fill\", \"black\")\n .attr(\"dominant-baseline\", \"middle\")\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-size\", \"12px\")\n // .attr('transform', 'rotate(10)')\n .text(\"Donator\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":444,"value":"Explanation: Good overall. Its easy to see which relationships are responsible for the largest donations as well as which countries overall donated/got the most.\n\nAppropriate?: Adjacency matrix depicts all donator->recipient relationships neatly. Simple color scale allows the user intuitively tell which countries/donations are the biggest.\n\nEffective?: Sorting the rows from the largest total donations to smallest means finding the biggest donators is quite easy: same with recipients going left to right. Only focusing on the subset of top 20 donators and top 10 recipients makes the graph less dense with similar insights. Abbreviation of countries also allows for a more compact graph. The nonlinear color scale allows users to differentiate between slightly smaller donations a bit easier.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":298,"value":"legend({color: dono_color, title: \"Donations ($Billions USD)\", tickFormat: x => '$'+(x/1000000000)+'B'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"Visualization 2: Considering only the top 5 purposes of donation, how does the relationship between countries look like in terms of purposes? What composition (distribution) of purposes do the donations between each pair of countries have? Are there countries that donate to a given country using multiple purposes? Or do counties always donate using one single purpose when donating to another country? The same as the previous question, we only care about the top 10 recipients and the top 20 donors here.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":447,"value":"purpose_count = {\n const ret = [];\n for (let i = 0; i < purposes.length; i++) {\n const entry = {'purpose': purposes[i]};\n entry['count'] = aiddata.filter(d => d.purpose == purposes[i]).length;\n ret.push(entry);\n }\n return ret.sort(function(x, y){ return d3.descending(x.count, y.count); });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"top_purposes = purpose_count.slice(1,6).map(d => d.purpose) // skip the 1st cuz we dont care about 'no purpose'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"purposeToColor = d3.scaleOrdinal().domain(top_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":501,"value":"nodesForce = {\n const force = 0.1; //0.00001\n const centerx = margin.width/2;\n const centery = margin.height/2;\n const ret = [{id: input_country, index: 0, x: centerx, y: centery, vx: force, vy: force}];\n \n const temp_data = aiddata.filter(d => d.donor == input_country && top_rec.includes(d.recipient));\n let related_countries = Array.from(new Set( temp_data.map(d => d.recipient) ))\n const r = 375;\n const step = Math.floor(360 / related_countries.length);\n for (let i = 0; i < related_countries.length; i++) {\n const xloc = r * Math.cos(step*i * (Math.PI / 180));\n const yloc = r * Math.sin(step*i * (Math.PI / 180));\n // const vals = temp_data.filter(d => d.recipient == related_countries[i] && top_purposes.includes(d.purpose))\n const entry = {'id': related_countries[i], 'index': i+1, x:centerx+xloc, y:centery+yloc, vx: force, vy: force};\n ret.push(entry)\n }\n return ret;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":503,"value":"linksForce = {\n const ret = [];\n let source = {};\n for (let j = 0; j < nodesForce.length; j++) {\n if (nodesForce[j].id == input_country){\n source = nodesForce[j];\n }\n }\n \n for (let i = 0; i < top_purposes.length; i++) {\n for (let j = 0; j < nodesForce.length; j++) {\n if (nodesForce[j].id != input_country){\n const temp = aiddata.filter(d => d.donor == input_country && d.recipient == nodesForce[j].id\n && d.purpose == top_purposes[i]);\n const weight = d3.sum(temp, d => d.amount)\n if (weight > 0){\n ret.push({'source': source, 'target': nodesForce[j], 'weight': weight, 'index': i, 'purpose': top_purposes[i]});\n }\n }\n }\n }\n return ret\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":536,"value":"lineWidth = d3.scaleSqrt()\n .domain(d3.extent(linksForce, d=>d.weight))\n .range([3, 55])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"Explanation: We can clearly see the relationship of one country with its donation recipients on a per country basis. Honestly I spend a lot of time on this visualization and am kind of proud of it. With the top 10-25 recipients it looks quite nice and filled out. Though the line width isnt the most accurately perceivable measure, its good for comparisons as you can clearly see which purpose ranks above others per relationship.\n\nAppropriate?: Graph demonstrates intuitive connections. Dropdown allows for exploration across countries.\n\nEffective?: Color is easily distinguishable. Distribution of top 5 reasons is the focal point and is executed well.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":648,"value":"### Amount Donations Given from Selected Top 20 Donor Country Amongst the Top 10 Recipients Related to Top 5 reasons for donation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":486,"value":"viewof input_country = Inputs.select(top_dono, {label: \"Select Donor:\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":495,"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":490,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"Visualization 3: For this last exercise you have to extend the analysis above to see how the patterns of donations change over time. Focusing again on the top 10 recipients and top 20 donors how do the patterns of donations (who donates to whom and how much) change over time? Are there sudden changes? Are there countries that always donate to other countries? Are there major shifts (say a country used to donate to a specific set of countries and then it changes to other countries)?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":676,"value":"dono_links2 = {\n const ret = [];\n for (let i = 0; i < top_countries.length; i++) {\n for (let j = 0; j < top_countries.length; j++) {\n const num = d3.sum(aiddata.filter(d => d.donor == top_countries[i] && d.recipient == top_countries[j]\n && d.yearInt == input_year), d => d.amount);\n const entry = {'source': shortten[top_countries[i]], 'target': shortten[top_countries[j]], 'weight': num};\n if (num > 0){ // we dont need to save these weights\n ret.push(entry);\n }\n }\n }\n return ret.sort(function(x, y){ return d3.ascending(x.weight, y.weight); });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":714,"value":"dono_color2 = d3.scaleSequentialSqrt()\n .domain([0, d3.max(aiddata.map(d => d.amount))])\n .interpolator(d3.interpolateGreens)\n .unknown(\"#eeeeee\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"Explanation: similar to visualization 1 but with different scaling and a time slider\n\nAppropriate?: allows user to step through time states and observe the changes in donations in real time.\n\nEffective?: since the color scales with changes in donation amount, sudden changes in donations will appear to flicker as the user changes the time step. This is quite noticeable and therefore is effective at calling attention to large shifts in trends of donations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":666,"value":"viewof input_year = 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":673,"value":"legend({color: dono_color2, title: \"Donations ($Billions USD)\", tickFormat: x => '$'+(x/1000000000)+'B'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":671,"value":"$4a","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":"$W4b","stdlib":"1"}} 46:"$45:body"