30:Ta30,links = [ { source: "Europe", target: "Europe", value: 41 }, { source: "Europe", target: "Asia", value: 7.1 }, { source: "Europe", target: "Oceania", value: 3.1 }, { source: "Europe", target: "Africa", value: 1 }, { source: "Europe", target: "Latin America", value: 1.3 }, { source: "Europe", target: "North America", value: 7.6 }, { source: "Asia", target: "Europe", value: 20.5 }, { source: "Asia", target: "Asia", value: 63.3 }, { source: "Asia", target: "Oceania", value: 3.2 }, { source: "Asia", target: "Africa", value: 1.2 }, { source: "Asia", target: "Latin America", value: 0.3 }, { source: "Asia", target: "North America", value: 17.2 }, { source: "Oceania", target: "Europe", value: 0.4 }, { source: "Oceania", target: "Asia", value: 0.1 }, { source: "Oceania", target: "Oceania", value: 1.1 }, { source: "Oceania", target: "Africa", value: 0 }, { source: "Oceania", target: "Latin America", value: 0 }, { source: "Oceania", target: "North America", value: 0.3 }, { source: "Africa", target: "Europe", value: 9.3 }, { source: "Africa", target: "Asia", value: 4.4 }, { source: "Africa", target: "Oceania", value: 0.5 }, { source: "Africa", target: "Africa", value: 19.4 }, { source: "Africa", target: "Latin America", value: 0.1 }, { source: "Africa", target: "North America", value: 2.6 }, { source: "Latin America", target: "Europe", value: 4.6 }, { source: "Latin America", target: "Asia", value: 0.4 }, { source: "Latin America", target: "Oceania", value: 0.2 }, { source: "Latin America", target: "Africa", value: 0 }, { source: "Latin America", target: "Latin America", value: 6.1 }, { source: "Latin America", target: "North America", value: 26.4 }, { source: "North America", target: "Europe", value: 1 }, { source: "North America", target: "Asia", value: 0.5 }, { source: "North America", target: "Oceania", value: 0.2 }, { source: "North America", target: "Africa", value: 0.1 }, { source: "North America", target: "Latin America", value: 1.4 }, { source: "North America", target: "North America", value: 1.2 } ]31:T22e7,function createChordData(_nodes, _links, _width, _height) { let graph = { nodes: [], links: [] }; let n = _nodes.length; let maxI = n - 1; const rotate = rotateProportion; const chartRadius = Math.min(_width, _height) / 2 - 20; const pointRadius = 20; const selfLinkOffset = 30; const clockwiseLinksOffset = 40; const antiClockwiseLinksOffset = 20; const angleDegrees = 360 / n; const angleRadians = angleDegrees * (Math.PI / 180); const nodeAngleDegrees = 25; const nodeAngleRadians = nodeAngleDegrees * (Math.PI / 180); const cLinkGap = nodeAngleDegrees / ((n - 3) * 2 - 1); _nodes.forEach(function(d, i) { let node = {}; node.id = d.id; node.index = i; node.position = i + rotate; node.coord = d3.pointRadial(angleRadians * node.position, chartRadius); node.labelCoord = d3.pointRadial( angleRadians * node.position, chartRadius + selfLinkOffset + selfLinkRadius ); node.x = node.coord[0]; node.y = node.coord[1]; node.labelX = node.labelCoord[0]; node.labelY = node.labelCoord[1]; graph.nodes.push(node); }); _links.forEach(function(d) { let link = {}; link.source = d.source; link.sourceIndex = linkIndex(link.source); link.sourcePosition = linkPosition(link.source); link.target = d.target; link.targetIndex = linkIndex(link.target); link.targetPosition = linkPosition(link.target); link.value = d.value; if (isCentreLink(link.sourceIndex, link.targetIndex)) { let aS = 0; let sourceOffset = 0; let tS = 0; let targetOffset = 0; if (link.targetPosition < link.sourcePosition) { let i = (link.sourcePosition - link.targetPosition - 2) * 2; let start = angleDegrees * link.sourcePosition - nodeAngleDegrees / 2; sourceOffset = start + i * cLinkGap; let end = angleDegrees * link.targetPosition + nodeAngleDegrees / 2; targetOffset = end - i * cLinkGap; link.inner = Math.abs(link.sourcePosition - link.targetPosition) > n / 2 ? false : true; } else { let i = (link.targetPosition - link.sourcePosition - 2) * 2 + 1; let start = angleDegrees * link.sourcePosition + nodeAngleDegrees / 2; sourceOffset = start - i * cLinkGap; let end = angleDegrees * link.targetPosition - nodeAngleDegrees / 2; targetOffset = end + i * cLinkGap; link.inner = Math.abs(link.sourcePosition - link.targetPosition) > n / 2 ? true : false; } sourceOffset = sourceOffset < 0 ? sourceOffset + 360 : sourceOffset; aS = sourceOffset * (Math.PI / 180); link.sourceCoord = d3.pointRadial(aS, chartRadius); targetOffset = targetOffset < 0 ? targetOffset + 360 : targetOffset; tS = targetOffset * (Math.PI / 180); link.targetCoord = d3.pointRadial(tS, chartRadius); link.sourceX = link.sourceCoord[0]; link.sourceY = link.sourceCoord[1]; link.targetX = link.targetCoord[0]; link.targetY = link.targetCoord[1]; } graph.links.push(link); }); createPathData(graph.links); return graph; function createPathData(links) { links.forEach(function(link) { let x1 = 0; let y1 = 0; let x2 = 0; let y2 = 0; let path = ""; //self links if (link.sourcePosition == link.targetPosition) { link.type = "selfLink"; let i = link.sourcePosition + n / 2; let offset = 1; let centre = d3.pointRadial( angleRadians * link.sourcePosition, chartRadius + selfLinkRadius + selfLinkOffset ); let start = d3.pointRadial(angleRadians * i - offset, selfLinkRadius); let end = d3.pointRadial(angleRadians * i + offset, selfLinkRadius); x1 = centre[0] + start[0]; y1 = centre[1] + start[1]; x2 = centre[0] + end[0]; y2 = centre[1] + end[1]; path = "M " + x1 + " " + y1 + " A " + selfLinkRadius + " " + selfLinkRadius + " 0 1 0 " + x2 + " " + y2; } //anti-clockwise outer links else if ( link.sourceIndex - link.targetIndex === 1 || (link.sourceIndex === 0 && link.targetIndex === maxI) ) { link.type = "ac-outer"; let r = chartRadius + antiClockwiseLinksOffset; let offset = nodeAngleRadians / 2 + 0.05; let start = d3.pointRadial( angleRadians * link.sourcePosition - offset, r ); let end = d3.pointRadial( angleRadians * link.targetPosition + offset, r ); x1 = start[0]; x2 = end[0]; y1 = start[1]; y2 = end[1]; let sweep = link.targetPosition * angleDegrees < link.sourcePosition * angleDegrees ? "0" : "1"; sweep = link.targetIndex === maxI && link.sourceIndex == 0 ? "0" : sweep; path = "M" + x1 + "," + y1 + " " + "A" + chartRadius + " " + chartRadius + " 0 0 " + sweep + " " + x2 + " " + y2; } //clockwiseLinks else if ( link.targetIndex - link.sourceIndex === 1 || (link.sourceIndex === maxI && link.targetIndex === 0) ) { link.type = "c-outer"; let r = chartRadius + clockwiseLinksOffset; let offset = nodeAngleRadians / 2 + 0.05; let start = d3.pointRadial( angleRadians * link.sourcePosition + offset, r ); let end = d3.pointRadial( angleRadians * link.targetPosition - offset, r ); x1 = start[0]; x2 = end[0]; y1 = start[1]; y2 = end[1]; let sweep = link.targetPosition * angleDegrees < link.sourcePosition * angleDegrees ? "0" : "1"; sweep = link.targetIndex === 0 && link.sourceIndex == maxI ? "1" : sweep; path = "M" + x1 + "," + y1 + " " + "A" + chartRadius + " " + chartRadius + " 0 0 " + sweep + " " + x2 + " " + y2; } else { x1 = link.sourceX; y1 = link.sourceY; x2 = link.targetX; y2 = link.targetY; if (isOpposite(n, link.sourcePosition, link.targetPosition)) { link.type = "inner-opposite"; path = "M" + x1 + " " + y1 + " L" + x2 + " " + y2; } else { link.type = "inner-curve"; let distance = Math.abs(link.sourcePosition - link.targetPosition); let mid = 0; if (distance < n / 2) { mid = Math.min(link.sourcePosition, link.targetPosition) + distance / 2; } else { distance = n - Math.max(link.sourcePosition, link.targetPosition) + Math.min(link.sourcePosition, link.targetPosition); mid = Math.max(link.sourcePosition, link.targetPosition) + distance / 2; mid = mid == n ? 0 : mid; } let midAngleRadians = mid * angleDegrees * (Math.PI / 180); let opp = Math.abs(x1 - x2); let adj = Math.abs(y1 - y2); let hyp = triangleHypotenuse(opp, adj); let ratio = 1 - hyp / (chartRadius * 2); let r = ratio * chartRadius; r = link.inner ? r : r - (cLinkGap + 0); let cCoords = d3.pointRadial(midAngleRadians, r); let c = cCoords[0] + " " + cCoords[1]; path = "M" + x1 + " " + y1 + " Q " + c + " " + x2 + " " + y2; } } link.x1 = x1; link.x2 = x2; link.y1 = y1; link.y2 = y2; link.path = path; }); } function isOpposite(n, source, target) { if (n % 2 !== 0) { return false; } else { return Math.abs(source - target) == n / 2 ? true : false; } } function linkPosition(id) { let p = 0; graph.nodes.forEach(function(node) { if (id == node.id) { p = node.position; } }); return p; } function linkIndex(id) { let index = 0; graph.nodes.forEach(function(node) { if (id == node.id) { index = node.index; } }); return index; } function isCentreLink(source, target) { if (Math.abs(source - target) == 1) { return false; } else if (source == maxI && target == 0) { return false; } else if (target == maxI && source == 0) { return false; } else if (target == source) { return false; } else { return true; } } }32:Tdb9,chart = { let svg = d3 .create("svg") .attr("width", svgWidth) .attr("height", svgHeight); let chart = svg .append("g") .attr("transform", "translate(" + chartPadding + "," + chartPadding + ")"); let g = chart .append("g") .attr( "transform", "translate(" + chartWidth / 2 + "," + chartHeight / 2 + ")" ); let paths = g .selectAll(".link") .data(chartData.links) .enter() .append("g"); paths .append("path") .attr("d", function(d) { return d.path; }) .style("stroke-width", d => strokeWidth(d.value) + 3) .style("stroke", "white") .style("fill", "none"); let path = paths .append("path") .attr("d", function(d) { return d.path; }) .style("stroke-width", d => strokeWidth(d.value)) .style("fill", "none") .style("stroke", d => colour(d.source)); path.each(appendArrow); path.each(appendLinkLabel); let nodeLabels = g .selectAll(".overlay") .data(chartData.nodes) .enter() .append("g") .append("text") .text(d => d.id) .style("fill", "black") .style("text-anchor", "middle") .attr("x", d => d.labelX) .attr("y", d => d.labelY + 6); function appendLinkLabel(d) { let thisPath = d3.select(this).node(); let pathLength = thisPath.getTotalLength(); let point = thisPath.getPointAtLength(pathLength - 20); let parentG = d3.select(this.parentNode); let label = parentG .append("g") .attr("transform", "translate(" + point.x + "," + point.y + ")"); label .append("text") .style("fill", "white") .style("stroke", "white") .style("stroke-width", "5px") .style("text-anchor", "middle"); label .append("text") .style("fill", colour(d.source)) .style("stroke", "none") .style("text-anchor", "middle"); let text = d.value == 0 ? "" : roundValue(d.value); label .selectAll("text") .text(text) .attr("dy", "0.35em"); } function appendArrow(d, i) { let arrowHeadSize = strokeWidth(d.value) * arrowHeadProportion; let thisPath = d3.select(this).node(); let pathLength = thisPath.getTotalLength(); let point = thisPath.getPointAtLength(pathLength); let previousPoint = thisPath.getPointAtLength(pathLength - 1); let rotation = 0; if (point.y == previousPoint.y) { rotation = point.x < previousPoint.x ? 180 : 0; } else if (point.x == previousPoint.x) { rotation = point.y < previousPoint.y ? -90 : 90; } else { let adj = Math.abs(point.x - previousPoint.x); let opp = Math.abs(point.y - previousPoint.y); let angle = Math.atan(opp / adj) * (180 / Math.PI); if (point.x < previousPoint.x) { angle = angle + (90 - angle) * 2; } if (point.y < previousPoint.y) { rotation = -angle; } else { rotation = angle; } } let dString = "M" + point.x + "," + (point.y - arrowHeadSize / 2) + " L" + (point.x + arrowHeadSize / 2) + "," + point.y + " L" + point.x + "," + (point.y + arrowHeadSize / 2); let rotationString = "rotate(" + rotation + "," + point.x + "," + point.y + ")"; g.append("path") .attr("d", dString) .attr("class", "arrow-head") .attr("transform", rotationString) .style("stroke", colour(d.source)) .style("fill", colour(d.source)); } return svg.node(); }33:[] 2e:{"title":"Network flows","cells":[{"id":0,"value":"md`# Network flows`","pinned":true,"hidden":false,"mode":"ojs"},{"id":734,"value":"toc('h2', 'Contents')","pinned":false,"hidden":false,"mode":"ojs"},{"id":744,"value":"md`## Prepare the data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":667,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":747,"value":"nodes = createNodesFromLinks(links, \"id\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":663,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":682,"value":"chartData = createChordData(nodes, links, chartWidth, chartHeight)","pinned":false,"hidden":false,"mode":"ojs"},{"id":762,"value":"md`## Draw the chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":771,"value":"rotateProportion = 0.5","pinned":true,"hidden":false,"mode":"ojs"},{"id":777,"value":"selfLinkRadius = 60","pinned":true,"hidden":false,"mode":"ojs"},{"id":59,"value":"md`## Scales`","pinned":false,"hidden":false,"mode":"ojs"},{"id":677,"value":"colour = d3\n .scaleOrdinal()\n .domain(nodes.map(d => d.id)) //.range(['#1b9e77','#d95f02','#7570b3','#e7298a','#66a61e','#e6ab02'])\n .range([\"#eb978f\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":649,"value":"strokeWidth = d3\n .scaleLinear()\n .domain(d3.extent(links, d => d.value))\n .range([1, 20])","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"md`## Dimensions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"svgWidth = d3.min([width, 800])","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"svgHeight = svgWidth","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"chartPadding = 150","pinned":false,"hidden":false,"mode":"ojs"},{"id":635,"value":"chartHeight = svgHeight - chartPadding - chartPadding","pinned":false,"hidden":false,"mode":"ojs"},{"id":636,"value":"chartWidth = svgWidth - chartPadding - chartPadding","pinned":false,"hidden":false,"mode":"ojs"},{"id":727,"value":"arrowHeadProportion = 3","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"md`## JS libraries and functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":753,"value":"function createNodesFromLinks(links, identifier) {\n let allNodes = [];\n\n links.forEach(function(link) {\n allNodes.push(link.source);\n allNodes.push(link.target);\n });\n\n let distinctNodes = [...new Set(allNodes)];\n let nodesObjArray = [];\n\n distinctNodes.forEach(function(node) {\n let nodeObj = {};\n nodeObj[identifier] = node;\n nodesObjArray.push(nodeObj);\n });\n\n return nodesObjArray;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":787,"value":"import { triangleHypotenuse } from \"@tomshanley/triangle-functions\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":671,"value":"function roundValue(n) {\n n = Math.round(n * 10) / 10;\n return n;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"d3 = require(\"d3@5\", \"d3-array\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":732,"value":"import { toc } from \"@tomshanley/indented-toc\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}