25:["$","title",null,{"children":"Mini-Project 3 (Network Visualization) | Richard Fu | Observable"}] 49: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). `4a:T5a0,nodesForce = { var out = new Array var center = new Object( {'id': d_input, 'index': 0, 'x': 400, 'y': 400, 'vx': 0.00001, 'vy': 0.00001, }) out.push(center) for (let i = 0; i < purposesToCountry.length; i++){ switch(i){ case 0: var obj = new Object({ 'id': purposesToCountry[i].recipient, 'index': i+1, 'x':300, 'y':300, 'vx': 0.00001, 'vy':0.00001, }) break; case 1: var obj = new Object({ 'id': purposesToCountry[i].recipient, 'index': i+1, 'x': 550, 'y':300, 'vx': 0.00001, 'vy':0.00001, }) break; case 2: var obj = new Object({ 'id': purposesToCountry[i].recipient, 'index': i+1, 'x': 550, 'y':450, 'vx': 0.00001, 'vy':0.00001, }) break; case 3: var obj = new Object({ 'id': purposesToCountry[i].recipient, 'index': i+1, 'x': 400, 'y':550, 'vx': 0.00001, 'vy':0.00001, }) break; case 4: var obj = new Object({ 'id': purposesToCountry[i].recipient, 'index': i+1, 'x': 350, 'y': 650, 'vx': 0.00001, 'vy':0.00001, }) break; } out.push(obj) } return out }4b:T685,{ // set up const margin = {top: 5, right: 5, bottom: 5, left: 5}; const visWidth = 1000 - margin.left - margin.right; const visHeight = 1000 - 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 nodeRadius = 45; // create the simulation of the forces // see the d3-force documentation for more detail about all of the forces that can be added // add lines for edges, we don't need to set their positions yet const edges = g.append('g') .selectAll('line') .data(linksForce) .join('line') .attr('stroke', d=>color_purpose(d.purpose)) .attr('fill', 'none') .attr('stroke-width', d=>lineWidth(d.weight)); // add a group for each node, we don't need to set their positions yet const vertices = g.append('g') .selectAll('g') .data(nodesForce) .join('g') vertices.append('circle') .attr('r', nodeRadius) .attr('fill', 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', '12') .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(); }4c:T5b0,t_nodesForce = { var out = new Array var center = new Object( {'id': t_d_input, 'index': 0, 'x': 400, 'y': 400, 'vx': 0.00001, 'vy': 0.00001, }) out.push(center) for (let i = 0; i < t_purposesToCountry.length; i++){ switch(i){ case 0: var obj = new Object({ 'id': t_purposesToCountry[i].recipient, 'index': i+1, 'x':300, 'y':300, 'vx': 0.00001, 'vy':0.00001, }) break; case 1: var obj = new Object({ 'id': t_purposesToCountry[i].recipient, 'index': i+1, 'x': 550, 'y':300, 'vx': 0.00001, 'vy':0.00001, }) break; case 2: var obj = new Object({ 'id': t_purposesToCountry[i].recipient, 'index': i+1, 'x': 550, 'y':450, 'vx': 0.00001, 'vy':0.00001, }) break; case 3: var obj = new Object({ 'id': t_purposesToCountry[i].recipient, 'index': i+1, 'x': 400, 'y':550, 'vx': 0.00001, 'vy':0.00001, }) break; case 4: var obj = new Object({ 'id': t_purposesToCountry[i].recipient, 'index': i+1, 'x': 350, 'y': 650, 'vx': 0.00001, 'vy':0.00001, }) break; } out.push(obj) } return out }4d:T68d,{ // set up const margin = {top: 5, right: 5, bottom: 5, left: 5}; const visWidth = 1000 - margin.left - margin.right; const visHeight = 1000 - 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 nodeRadius = 45; // create the simulation of the forces // see the d3-force documentation for more detail about all of the forces that can be added // add lines for edges, we don't need to set their positions yet const edges = g.append('g') .selectAll('line') .data(t_linksForce) .join('line') .attr('stroke', d=>color_purpose(d.purpose)) .attr('fill', 'none') .attr('stroke-width', d=>t_lineWidth(d.weight)); // add a group for each node, we don't need to set their positions yet const vertices = g.append('g') .selectAll('g') .data(t_nodesForce) .join('g') vertices.append('circle') .attr('r', nodeRadius) .attr('fill', d=>t_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', '12') .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(); }4e:T830,// Copyright 2021, Observable Inc. // Released under the ISC license. // https://observablehq.com/@d3/color-legend function Swatches(color, { columns = null, format, unknown: formatUnknown, swatchSize = 15, swatchWidth = swatchSize, swatchHeight = swatchSize, marginLeft = 0 } = {}) { const id = `-swatches-${Math.random().toString(16).slice(2)}`; const unknown = formatUnknown == null ? undefined : color.unknown(); const unknowns = unknown == null || unknown === d3.scaleImplicit ? [] : [unknown]; const domain = color.domain().concat(unknowns); if (format === undefined) format = x => x === unknown ? formatUnknown : x; function entity(character) { return `&#${character.charCodeAt(0).toString()};`; } if (columns !== null) return htl.html`

${domain.map(value => { const label = `${format(value)}`; return htl.html`

${label}

`; })}

`; return htl.html`

${domain.map(value => htl.html`${format(value)}`)}

`; }4f:Taa0,//copied from Mike Bostock's Scrubber implementation - with a few modifications to fit the code function Scrubber(values, { format = value => value, initial = 0, delay = null, autoplay = true, loop = true, loopDelay = null, alternate = false } = {}) { values = Array.from(values); const form = html``; let frame = null; let timer = null; let interval = null; let direction = 1; function start() { form.b.textContent = "Pause"; if (delay === null) frame = requestAnimationFrame(tick); else interval = setInterval(tick, delay); } function stop() { form.b.textContent = "Play"; if (frame !== null) cancelAnimationFrame(frame), frame = null; if (timer !== null) clearTimeout(timer), timer = null; if (interval !== null) clearInterval(interval), interval = null; } function running() { return frame !== null || timer !== null || interval !== null; } function tick() { if (form.i.valueAsNumber === (direction > 0 ? values.length - 1 : direction < 0 ? 0 : NaN)) { if (!loop) return stop(); if (alternate) direction = -direction; if (loopDelay !== null) { if (frame !== null) cancelAnimationFrame(frame), frame = null; if (interval !== null) clearInterval(interval), interval = null; timer = setTimeout(() => (step(), start()), loopDelay); return; } } if (delay === null) frame = requestAnimationFrame(tick); step(); } function step() { form.i.valueAsNumber = (form.i.valueAsNumber + direction + values.length) % values.length; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); } form.i.oninput = event => { if (event && event.isTrusted && running()) stop(); form.value = values[form.i.valueAsNumber]; form.o.value = format(form.value, form.i.valueAsNumber, values); }; form.b.onclick = () => { if (running()) return stop(); direction = alternate && form.i.valueAsNumber === values.length - 1 ? -1 : 1; form.i.valueAsNumber = (form.i.valueAsNumber + direction) % values.length; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); start(); }; form.i.oninput(); if (autoplay) start(); else stop(); Inputs.disposal(form).then(stop); return form; }50:[{"id":"55260abbc777c0a3b8fed19f3929dd822fef9d5118b53b76b2176d20782910e599eac919999ea8ee85a60b783fd37082574f6591fd46c0d70ddf9b00df71ce27","href":"https://static.observableusercontent.com/files/55260abbc777c0a3b8fed19f3929dd822fef9d5118b53b76b2176d20782910e599eac919999ea8ee85a60b783fd37082574f6591fd46c0d70ddf9b00df71ce27","name":"countries-50m.json","type":"application/json","lastModified":1682320976512.419,"size":4177662}] 29:{"id":"45c053da6e080b7e","slug":null,"title":"Mini-Project 3 (Network Visualization)","thumbnail":"3f7e52aee9bc1d8fb995de34bceed95f1187aeadc82d78d8b352e164ef7d04a0","access_level":"public","create_time":"$D2023-04-24T07:22:56.512Z","update_time":"$D2023-04-28T06:42:09.134Z","view_time":null,"first_public_time":"$D2023-04-24T07:22:56.512Z","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":"f20a617e5ad34e39","login":"rjf9225","name":"Richard Fu","avatar_url":"https://avatars-next.observableusercontent.com/05cc71b64a7e2c70386d6fb495a12747ccfb51091e42b766225dec019241af59","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":842,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e1c56a8af8a5a3d1","login":"rjf9225","name":"Richard Fu","avatar_url":"https://avatars-next.observableusercontent.com/05cc71b64a7e2c70386d6fb495a12747ccfb51091e42b766225dec019241af59","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"e1c56a8af8a5a3d1","login":"rjf9225","name":"Richard Fu","avatar_url":"https://avatars-next.observableusercontent.com/05cc71b64a7e2c70386d6fb495a12747ccfb51091e42b766225dec019241af59","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":119,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"md`### Remember\n\nThe questions above are a very useful tool for you to verify whether you are producing a good solution or not. As you go about solving this exercise you can use the questions above as an evaluation tool in two main ways:\n1. Verify that you can indeed answer the questions with your visualization. If you can’t fully answer the questions, it means your solution has some problems.\n2. Compare multiple solutions to the same problem and ask yourself: “which one makes it easier for me to answer these questions?”, where easier may mean, more accurately, with less effort or faster.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"md`## Instructions\n- Your coded solutions must use D3. Other visualization libraries are not allowed.\n- You should feel free to process and transform the data any way you deem relevant and use any tool you prefer for data processing. Data transformation does not necessarily have to be in JavaScript nor within Observable. It’s ok to pre-process the data and then load it in Observable if you prefer.\n- You can use Mike Bostock's [Color Legend](/@d3/color-legend) notebook to create your legends.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"import {legend, swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"md`## Grading Criteria\n\nThe main parameters we will use for grading are the following:\n\n- Does the information extracted answer the questions posed in the exercise?\n- Does the visualization answer the questions posed in the exercise?\n- Is the visual representation clear? Does it have good aesthetics?\n - Review this [notebook on clarity](/@nyuvis/contextual-elements-aesthetics-and-clarity) for reference.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":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":342,"value":"## Question 1\n\nHere we will use an adjacency matrix with sequential color mapping to show how donor countries distribute their donations to recipient countries. We can see that the largest donor countries, US and Japan have very different donation distributions - while the US tends to donate to many countries, Japan focuses typically on India and Thailand. All other countries have a relatively insignificant total donation to each other country, however, the United Kingdom also stands out as focusing on donations to India.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":167,"value":"donated = new Map([...d3.rollup(aiddata, v => d3.sum(v, d => d.amount), d => d.donor)].sort((a,b)=>b[1]-a[1]).slice(0,20))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"received = new Map([...d3.rollup(aiddata, v => d3.sum(v, d => d.amount), d => d.recipient)].sort((a,b)=>b[1]-a[1]).slice(0,10))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"top_donors = [...donated.keys()]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"top_receivers = [...received.keys()]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"filtered_dataset = aiddata.filter(d=>{\n if (top_donors.includes(d.donor) && top_receivers.includes(d.recipient)){\n return true\n }\n else{\n return false\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"flat_ds = [...d3.rollup(filtered_dataset, v=> d3.sum(v, d=>d.amount), d=>d.donor, d=>d.recipient)].flatMap(([k1, v1]) => [...v1].map(([k2, v2]) => ({donor: k1, recipient: k2, amount: v2})))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"nodes = {\n var arr = new Array\n var nodesList = new Array\n for (const e of flat_ds){\n \n var donor = e.donor\n var rec = e.recipient\n\n if (!nodesList.includes(donor)){\n var d = new Object({'id': donor})\n arr.push(d)\n nodesList.push(donor)\n }\n\n if (!nodesList.includes(rec)){\n var r = new Object({'id': rec})\n arr.push(r)\n nodesList.push(rec)\n }\n\n }\n\n return arr\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"margin = ({top: 70, right: 0, bottom: 0, left: 75})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"visWidth = 1050","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"visHeight = 1000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"extent = d3.extent(flat_ds, d=>d.amount/1e6)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"color = d3.scaleSequential()\n .domain(extent)\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":227,"value":"y = d3.scaleBand()\n .domain(nodes.map(d => d.id))\n .range([0, visHeight])\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":230,"value":"x = d3.scaleBand()\n .domain(nodes.map(d => d.id))\n .range([0, visWidth])\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":243,"value":"linkToWeight = new Map(flat_ds.map(link => [`${link.donor}-${link.recipient}`, link.amount]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"nodeIds = nodes.map(d => d.id)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"allLinks = d3.cross(nodeIds, nodeIds, (donor, recipient) => ({\n donor,\n recipient,\n // if this link isn't in the linkToWeight map, then set the weight to null \n amount: linkToWeight.get(`${donor}-${recipient}`) ?? null,\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"xAxis = g => g\n .call(d3.axisTop(x).tickSize(0))\n .call(g => g.selectAll(\".domain\").remove())\n .append(\"text\")\n .attr(\"x\", visWidth/2)\n .attr(\"y\", -margin.top)\n .attr(\"fill\", \"black\")\n .attr(\"text-anchor\", \"middle\")\n .attr(\"dominant-baseline\", \"hanging\")\n .text(\"Recipient\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"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)\n .attr(\"y\", visHeight / 2)\n .attr(\"fill\", \"black\")\n .attr(\"dominant-baseline\", \"middle\")\n .attr(\"text-anchor\", \"start\")\n .text(\"Donor\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"legend({\n color: color,\n title: 'Net Donor/Recipient Countries ($MM)'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"{\n // set up\n\n const svg = d3.create('svg')\n .attr('width', visWidth + margin.left + margin.right)\n .attr('height', visHeight + margin.top + margin.bottom);\n\n const g = svg.append(\"g\")\n .attr(\"transform\", `translate(${margin.left}, ${margin.top})`);\n \n // axes\n \n g.append(\"g\").call(yAxis);\n g.append(\"g\")\n .attr(\"transform\", `translate(${margin.right+10}, ${-margin.top + 35})`)\n .call(xAxis)\n .selectAll(\"text\") \n \n //.style(\"text-anchor\", \"end\")\n .attr(\"transform\", \"rotate(-65)\");\n \n // draw square in each cell\n \n g.append('g')\n .selectAll('rect')\n .data(allLinks)\n .join('rect')\n .attr('class', 'square')\n .attr('x', d => x(d.recipient))\n .attr('y', d => y(d.donor))\n .attr('width', x.bandwidth())\n .attr('height', y.bandwidth())\n .attr('fill', d => color(d.amount/1e6));\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"## Question 2\n\nHere we'll use a hub network to illustrate the total donations from a specified country to another. The thickness of the lines indicate the amount donated based on purpose.\n\nWe consider the top purposes for donation, Air Transport, Rail Transport, Industrial Development, Refinancing, and Power generation over all donations within the top 20 donors and top 10 recipients.\n\nThe recipients are the satellite nodes in the hub and the donor is the center node.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":370,"value":"ds = d3.rollup(filtered_dataset.map(d=>({\n 'donor' : d.donor,\n 'recipient': d.recipient,\n 'amount': d.amount,\n 'purpose': d.purpose\n})), v=>d3.sum(v, d=>d.amount), d=>d.donor, d=>d.recipient, d=>d.purpose)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":419,"value":"top_purposes = d3.sort([...d3.rollup(filtered_dataset, v=>d3.sum(v,d=>d.amount), d=>d.purpose)], (a,b)=>b[1]-a[1]).slice(0,5).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":400,"value":"purpose_ds = [...ds].flatMap(([k1, v1]) => [...v1].flatMap(([k2, v2]) => [...v2].map(([k3, v3]) => ({donor: k1, recipient: k2, purpose: k3, amount: v3}))))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"purposesToCountry = d3.filter(purpose_ds, d=>(d.donor == d_input && top_purposes.includes(d.purpose) && d.recipient == r_input))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":482,"value":"linksForce = {\n var out = new Array\n\n var center = nodesForce[0] \n \n for (let i = 0; id.weight))\n .range([2, 20])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":694,"value":"color_node = d3.scaleOrdinal([d_input, r_input], d3.schemeDark2)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":535,"value":"color_purpose = d3.scaleOrdinal(top_purposes, d3.schemeCategory10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":630,"value":"viewof d_input= Inputs.select(top_donors, {value: \"steelblue\", label: \"Select Donor\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":632,"value":"viewof r_input= Inputs.select(top_receivers, {value: \"steelblue\", label: \"Select Recipient\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":655,"value":"Swatches(color_purpose)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":572,"value":"Swatches(color_node)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":704,"value":"## Question 3\n\nHere we apply the previous question but filter based on the time and use an animated slider so we can see how the donation purposes have varied over time for any two specified countries.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":738,"value":"dates = Array.from({length: 132}, (_, i) => {\n const date = new Date(1980, 0, 1);\n date.setMonth(i*3);\n return date;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":725,"value":"time_filtered_dataset = d3.filter(filtered_dataset, d=>{\n var cur_date = new Date(d.yearDate)\n var thresh_date = new Date(date)\n if (cur_date < thresh_date){\n return true\n }\n return false\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":784,"value":"t_ds = d3.rollup(time_filtered_dataset.map(d=>({\n 'donor' : d.donor,\n 'recipient': d.recipient,\n 'amount': d.amount,\n 'purpose': d.purpose\n})), v=>d3.sum(v, d=>d.amount), d=>d.donor, d=>d.recipient, d=>d.purpose)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":786,"value":"t_purpose_ds = [...t_ds].flatMap(([k1, v1]) => [...v1].flatMap(([k2, v2]) => [...v2].map(([k3, v3]) => ({donor: k1, recipient: k2, purpose: k3, amount: v3}))))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":796,"value":"t_purposesToCountry = d3.sort(d3.filter(t_purpose_ds, d=>(d.donor == t_d_input && top_purposes.includes(d.purpose) && d.recipient == t_r_input)), p=>p.purpose)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":788,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":794,"value":"t_linksForce = {\n var out = new Array\n\n var center = t_nodesForce[0] \n \n for (let i = 0; id.weight))\n .range([2, 20])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":805,"value":"viewof t_d_input= Inputs.select(top_donors, {value: \"steelblue\", label: \"Select Donor\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":807,"value":"viewof t_r_input= Inputs.select(top_receivers, {value: \"steelblue\", label: \"Select Donor\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":816,"value":"Swatches(color_purpose)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":818,"value":"Swatches(t_color_node)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":828,"value":"viewof date = Scrubber(dates, {\n autoplay: false,\n format: date => date.toLocaleString(\"en\", {year: \"numeric\", month: \"numeric\"}),\n delay: 50,\n loop: false,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":822,"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"},{"id":568,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":760,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W50","stdlib":"1"}} 24:null