2b:null 2c:["$","title",null,{"children":"Untitled | Yuanpei Zhuang | Observable"}] 31:T49c,md ` #### What data I chose and why: The data was gathered from World Bank from 2000-2017, providing estimates of 2016 remittance movements between various countries. I want to contextualize the money flow with a map. https://www.kaggle.com/theworldbank/worldwide-economic-remittances

Reference code about map: https://observablehq.com/@nbremer/simplified-curved-earth-map Reference code about Arc(lab11): https://observablehq.com/d/92bc365f558d1c9f move on and move off

#### What innovations you did with the code : Highlight when mouse move on & off. Arc thickness. Contextualize data on map. #### what code changes you made or code you added I Combined map and arc together, and use thickness to show the money flow amount. I add interaction on the path too, instead of focusing the mouse on the tiny node! #### what you wanted to do but were not able to do. I do not find any geo data with the money data, so I have to type the node location by hand. When the locations are closed, The arc angle looks weird, I cannot make it less overlap yet. Cannot develop a switch yet, have to input the country id by hand, unfriendly to user. ` 32:T10b2,{ var graphid = 1 const svg = d3.select(DOM.svg(width, height)) .style("width", "100%") .style("height", "auto"); const g = svg.append("g") g.append("path") .datum(land) .attr("d", path) .attr("class", "land") .style("fill", land_color); // add node const nodes = g.selectAll("nodes") .data(grapharr[ graphid ].node) .enter().append("circle") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", 8) .attr("fill", "darkgrey") .attr("id", d => d.name); // create the node labels const nodeLabels= g.selectAll("nodeLabels") .data( grapharr[graphid].node ) .enter().append("text") .attr("x", d => d.x) .attr("y", d => (d.y + 15)) .attr("fill", "darkgrey") .attr("font-size", "12px") .style("text-anchor", "middle") .text(d => d.name); // create the amount labels const amountLables= g.selectAll("amountLabels") .data( grapharr[graphid].link ) .enter().append("text") .attr("x", d => getPosition(d.start).x) .attr("y", d => (getPosition(d.start).y + 30)) .attr("fill", "darkgrey") .attr("font-size", "9px") .style("text-anchor", "middle") .text(d => d.amount) //modified from lab 11 function buildArc (d) { // d.source and d.target are the locations in graphData.links // xScale takes a node name and finds its location on the x axis from 0 to width // So start is the location in pixels of the start of the arc var startX = getPosition(d.start).x; var startY = getPosition(d.start).y var endx = getPosition(d.end).x var endy = getPosition(d.end).y // This code builds up the SVG arc path element const arcPath = ['M', // start the path startX, startY, // declare the (x,y) of where to start 'A', // specify an eliptical curve (startX-endx)/2, ',', // xradius: height of arc is proportional to start - end (startY-endy)/2, // yradius 0, 0, ",", // rotation of ellipse is 0 along x and y; see arc url for details startX < startY ? 1: 0, // make all arcs curve above the nodes; see arc documentation endx, endy] // ** endpoint is CHINA .join(' '); // convert the bracketed array into a string d.target-d.source != 1 return arcPath; }; const paths = g.selectAll("arcs") .data( grapharr[graphid].link ) .enter().append("path") .attr("d", d => buildArc(d)) .style("fill", "none") // fill color for the paths .attr("stroke", "Red") .attr("opacity", "0.1") // path opacity .attr("stroke-width", d => (d.amount * 0.1)) .attr("id", d => d.Areas) .attr("amount", d => d.amount); //mouse move on nodes.on('mouseover', function(d) { // highlight the selected node d3.select(this).style("fill", "Red"); d3.select(this).style("r", 8); paths .style('opacity', function (arcd) { return arcd.name === d.name ? 0.5 : 0.1;}) amountLables .style('font-size', function (am) { return am.name === d.name ? 30 : 9;}); }); paths.on('mouseover', function(d) { // highlight the selected node d3.select(this).style("opacity", "0.5"); d3.select(this).style("font-size", "30"); nodes.style('fill', function (noded) { return noded.name === d.name ? "Red": "darkgrey";}) amountLables .style('font-size', function (am) { return am.name === d.name ? 30 : 9;}); }) paths.on('mouseout', function(d) { // highlight the selected node nodes.style("fill", "darkgrey"); nodes.style("r", "8"); paths.style('stroke', 'red'); paths.style('opacity', '0.1'); amountLables.style('font-size', 9); }) //move away nodes.on('mouseout', function (d) { nodes.style("fill", "darkgrey"); nodes.style("r", "8"); paths.style('stroke', 'red'); paths.style('opacity', '0.1'); amountLables.style('font-size', 9); }); return svg.node(); } 33:T42a,Areas = [ { "name": "Australia", "xmap": 820, "ymap": 306, "amount": 55 }, { "name": "China", "xmap": 720, "ymap": 121, }, { "name": "France", "xmap": 480, "ymap": 101, "amount": 185 }, { "name": "Germany", "xmap": 500, "ymap": 91, "amount": 57 }, { "name": "Hong Kong SAR, China", "xmap": 740, "ymap": 171, "amount": 3 }, { "name": "India", "xmap": 680, "ymap": 171, "amount": 58 }, { "name": "Indonesia", "xmap": 820, "ymap": 241, "amount": 109 }, { "name": "Japan", "xmap": 810, "ymap": 126, "amount": 246 }, { "name": "Russian Federation", "xmap": 600, "ymap": 71, "amount": 6 }, { "name": "South Africa", "xmap": 524, "ymap": 326, "amount": 1 }, { "name": "United States", "xmap": 250, "ymap": 121, "amount": 147 }, { "name": "Singapore", "xmap": 810, "ymap": 251, "amount": 147 }, ]34:[{"id":"1ff7cab90114d7f65be02156f03d9e49be4365b97cbe468b139a460c8910360c15e3e806b4cea17d37ef15cb8af33bee139f8ac2083ad0cc7fb6ac2bd7e605b2","href":"https://static.observableusercontent.com/files/1ff7cab90114d7f65be02156f03d9e49be4365b97cbe468b139a460c8910360c15e3e806b4cea17d37ef15cb8af33bee139f8ac2083ad0cc7fb6ac2bd7e605b2","name":"Copy of bilateral-remittance - bilateral-remittance-4.csv","type":"text/csv","lastModified":1589670587784.401,"size":246},{"id":"ea2a4e93e0029eeb923bf8cf6bc315d3d7c23fd41cba43745506b40d833cadf30adb51eedadd0dbed4be3a55b2bfe43944a2f669ba9b6bf1fc98da2dbad8905d","href":"https://static.observableusercontent.com/files/ea2a4e93e0029eeb923bf8cf6bc315d3d7c23fd41cba43745506b40d833cadf30adb51eedadd0dbed4be3a55b2bfe43944a2f669ba9b6bf1fc98da2dbad8905d","name":"Copy of bilateral-remittance - bilateral-remittance-3.csv","type":"text/csv","lastModified":1589664070362.908,"size":1644}] 2f:{"id":"946c42a03c875532","slug":"untitled/2","title":"","thumbnail":"51106957d900378c23cd4c13a406f5bccab45d1610d7f11b084e199e2bb57d70","access_level":"public","create_time":"$D2020-05-16T00:40:25.115Z","update_time":"$D2020-05-17T04:19:01.030Z","view_time":null,"first_public_time":"$D2020-05-17T02:58:57.750Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"7e51b8e6f343ea35","login":"yuanpei","name":"Yuanpei Zhuang","avatar_url":"https://avatars-next.observableusercontent.com/c92f8a501829ac8b1c8cb62dcb6f99e524e42651d4e417fced3d5cb2ae6ca47f","tier":"starter_2024"},"version":432,"publish_version":432,"role":null,"authored":false,"authors":[{"type":"individual","id":"7ce3f88b60ce2051","login":"yuanpei","name":"Yuanpei Zhuang","avatar_url":"https://avatars-next.observableusercontent.com/c92f8a501829ac8b1c8cb62dcb6f99e524e42651d4e417fced3d5cb2ae6ca47f","tier":null}],"members":[{"type":"individual","id":"7ce3f88b60ce2051","login":"yuanpei","name":"Yuanpei Zhuang","avatar_url":"https://avatars-next.observableusercontent.com/c92f8a501829ac8b1c8cb62dcb6f99e524e42651d4e417fced3d5cb2ae6ca47f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"$undefined","cells":[{"id":23,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"md `###

Where do people send money to?

\n\nSelect a country first， how？\n
\n

change the ID in 1st line of the code: - var graphid = the Area you want to look into

\nAustralia: 0, \nChina: 1, \nFrance: 2,\nGermany:3,\nHong Kong SAR, China: 4,\nIndia: 5, \nIndonesia: 6, \nJapan: 7, \nRussian Federation: 8, \nSingapore: 9,\nSouth Africa: 10, \nUnited States: 11\nUnit Million USD\n\nmove you mouse and touch any path or node you can see where the money go with detail`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"md` \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"projection = d3.geoNaturalEarth1()\n .fitExtent([[0, 0], [width, height]], { type: \"Sphere\" })\n .precision(0.1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"path = d3.geoPath()\n .projection(projection)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"height = width / 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"land = topojson.merge(world, world.objects.countries.geometries.filter(d => d.id !== \"010\"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"land_color = \"#F9E79F\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"topojson = require('topojson')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"world = d3.json('https://gist.githubusercontent.com/olemi/d4fb825df71c2939405e0017e360cd73/raw/d6f9f0e9e8bd33183454250bd8b808953869edd2/world-110m2.json') ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":402,"value":"map = {\n var result = {}\n Areas.forEach((e)=>{\n result[e.name]={x:e.xmap, y:e.ymap}\n })\n return result\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"rawdata = d3.csvParse(await FileAttachment(\"Copy of bilateral-remittance - bilateral-remittance-3.csv\").text(), d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"//allNodesNames = rawdata.columns.map(function(d){return d.name});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"rawdata2 = d3.csvParse(await FileAttachment(\"Copy of bilateral-remittance - bilateral-remittance-4.csv\").text(), d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"grapharr = {\n var grapharr = [] //one graph for each row\n rawdata.forEach((e)=>{\n var graph = {}\n var node = []\n var link = []\n var dbg = 0\n {\n var tmp = {name: e['']}\n if(getPosition(e[''])){\n tmp.x = getPosition(e['']).x\n tmp.y = getPosition(e['']).y\n }\n else{\n node.push(e[''])\n }\n node.push(tmp)\n }\n for(var key in e){\n if(key != ''){\n var tmp = {name: key}\n if(getPosition(key)==undefined)\n continue\n tmp.x = getPosition(key).x\n tmp.y = getPosition(key).y\n if(e[key]==0)\n continue\n \n node.push(tmp)\n link.push({start: key, end:e[''], amount:e[key], name:key})\n }\n }\n graph = {node,link}\n grapharr.push(graph)\n })\n return grapharr\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"getPosition = function(name){\n return map[name]\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"