2b:T65d,md`# Sankey circular deconstructed - part 2: manual scaling [My previous d3-sankey-circular deconstructed notebook](https://observablehq.com/@tomshanley/sankey-circular-deconstructed) trialled changes which allowed for virtual nodes to improve linking of nodes than spanned many columns; and the sorting of nodes. This notebook builds on those changes to introduce the use of d3.scaleLinear to size nodes and links. The current [d3-sankey](https://github.com/d3/d3-sankey) and [d3-sankey-circular](https://github.com/tomshanley/d3-sankey-circular) libraries use a padding value to determine how much space is available for the nodes' widths (which corresponds to the height of the nodes' rects), and then sets each nodes' height and their corresponding links based on their values. This means if a graph's nodes' values change over time, and we want to compare those sankeys, the nodes and links' sizes are not using a consistent scale. This notebook introduces the ability to specify a scale for the nodes heights - [see step 8](#8-manually-set-the-sankey-size). The layout will attempt to position the nodes within the available space, setting the padding between nodes as specified by the user. If necessary, the padding will be reduced, and if there is not enough space, the nodes will overlap or be pushed above/below the chart area. It is therefore up to the user to select a suitable scale. Also, the user has to set the proportion of space that is allocated in the margins of the chart for circular links If no scale is specified, the sankey will use the existing behaviour to scale nodes heights automatically. `2c:T1244,function adjustSankeySize(inputGraph) { let graph = clone(inputGraph); var columns = d3 .nest() .key(function(d) { return d.column; }) .sortKeys(d3.ascending) .entries(graph.nodes) .map(function(d) { return d.values; }); if (useManualScale) { graph.py = nodePadding; //calculate the widths of the links graph.ky = maxHeight / maxValue; graph.links.forEach(function(link) { link.width = yScale(link.value); }); //determine how much to scale down the chart, based on circular links var currentWidth = graph.x1 - graph.x0; var currentHeight = graph.y1 - graph.y0; let marginTopBottom = (currentHeight * circularLinkPortionTopBottom) / 2; let marginLeftRight = (currentWidth * circularLinkPortionLeftRight) / 2; graph.x0 = graph.x0 + marginLeftRight; graph.x1 = graph.x1 - marginLeftRight; graph.y0 = graph.y0 + marginTopBottom; graph.y1 = graph.y1 - marginTopBottom; var maxColumn = d3.max(graph.nodes, function(node) { return node.column; }); graph.nodes.forEach(function(node) { node.x0 = graph.x0 + node.column * ((graph.x1 - graph.x0 - nodeWidth) / maxColumn); node.x1 = node.x0 + nodeWidthFunction(node); //nodeWidth; }); } if (!useManualScale) { //override py if nodePadding has been set if (paddingRatio) { var padding = Infinity; columns.forEach(function(nodes) { var thisPadding = (sankeyExtent.y1 * paddingRatio) / (nodes.length + 1); padding = thisPadding < padding ? thisPadding : padding; }); graph.py = padding; } else { graph.py = nodePadding; } var ky = d3.min(columns, function(nodes) { return ( (sankeyExtent.y1 - sankeyExtent.y0 - (nodes.length - 1) * graph.py) / d3.sum(nodes, value) ); }); //calculate the widths of the links graph.ky = ky * scale; graph.links.forEach(function(link) { link.width = link.value * graph.ky; }); //determine how much to scale down the chart, based on circular links var totalTopLinksWidth = 0, totalBottomLinksWidth = 0, totalRightLinksWidth = 0, totalLeftLinksWidth = 0; var maxColumn = d3.max(graph.nodes, function(node) { return node.column; }); graph.links.forEach(function(link) { if (link.circular) { if (link.circularLinkType == 'top') { totalTopLinksWidth = totalTopLinksWidth + link.width; } else { totalBottomLinksWidth = totalBottomLinksWidth + link.width; } if (link.target.column == 0) { totalLeftLinksWidth = totalLeftLinksWidth + link.width; } if (link.source.column == maxColumn) { totalRightLinksWidth = totalRightLinksWidth + link.width; } } }); //account for radius of curves and padding between links totalTopLinksWidth = totalTopLinksWidth > 0 ? totalTopLinksWidth + verticalMargin + baseRadius : totalTopLinksWidth; totalBottomLinksWidth = totalBottomLinksWidth > 0 ? totalBottomLinksWidth + verticalMargin + baseRadius : totalBottomLinksWidth; totalRightLinksWidth = totalRightLinksWidth > 0 ? totalRightLinksWidth + verticalMargin + baseRadius : totalRightLinksWidth; totalLeftLinksWidth = totalLeftLinksWidth > 0 ? totalLeftLinksWidth + verticalMargin + baseRadius : totalLeftLinksWidth; var margin = { top: totalTopLinksWidth, bottom: totalBottomLinksWidth, left: totalLeftLinksWidth, right: totalRightLinksWidth }; var maxColumn = d3.max(graph.nodes, function(node) { return node.column; }); var currentWidth = graph.x1 - graph.x0; var currentHeight = graph.y1 - graph.y0; var newWidth = currentWidth + margin.right + margin.left; var newHeight = currentHeight + margin.top + margin.bottom; var scaleX = currentWidth / newWidth; var scaleY = currentHeight / newHeight; graph.x0 = graph.x0 * scaleX + margin.left; graph.x1 = margin.right == 0 ? graph.x1 : graph.x1 * scaleX; graph.y0 = graph.y0 * scaleY + margin.top; graph.y1 = graph.y1 * scaleY; graph.nodes.forEach(function(node) { node.x0 = graph.x0 + node.column * ((graph.x1 - graph.x0 - nodeWidth) / maxColumn); node.x1 = node.x0 + nodeWidthFunction(node); //nodeWidth; }); //re-calculate widths graph.ky = graph.ky * scaleY; graph.links.forEach(function(link) { link.width = link.value * graph.ky; }); } return graph; }2d:T634,viewof sankeyParameters = form(html``)2e:T75b,function identifyCircles(inputGraph) { let graph = clone(inputGraph); var circularLinkID = 0; if (sortNodes === null || sortNodes(graph.nodes[0]) === undefined) { // Building adjacency graph var adjList = []; for (var i = 0; i < graph.links.length; i++) { var link = graph.links[i]; var source = link.source.index; var target = link.target.index; if (!adjList[source]) adjList[source] = []; if (!adjList[target]) adjList[target] = []; // Add links if not already in set if (adjList[source].indexOf(target) === -1) adjList[source].push(target); } // Find all elementary circuits var cycles = findCircuits(adjList); // Sort by circuits length cycles.sort(function(a, b) { return a.length - b.length; }); var circularLinks = {}; for (i = 0; i < cycles.length; i++) { var cycle = cycles[i]; var last = cycle.slice(-2); if (!circularLinks[last[0]]) circularLinks[last[0]] = {}; circularLinks[last[0]][last[1]] = true; } graph.links.forEach(function(link) { var target = link.target.index; var source = link.source.index; // If self-linking or a back-edge if ( target === source || (circularLinks[source] && circularLinks[source][target]) ) { link.circular = true; link.circularLinkID = circularLinkID; circularLinkID = circularLinkID + 1; } else { link.circular = false; } }); } else { graph.links.forEach(function(link) { //if (link.source[sortNodes] < link.target[sortNodes]) { if (sortNodes(link.source) < sortNodes(link.target)) { link.circular = false; } else { link.circular = true; link.circularLinkID = circularLinkID; circularLinkID = circularLinkID + 1; } }); } return graph; }2f:T71f,// Assign a circular link type (top or bottom), based on: // - if the source/target node already has circular links, then use the same type // - if not, choose the type with fewer links function selectCircularLinkTypes(inputGraph) { let graph = clone(inputGraph); var numberOfTops = 0; var numberOfBottoms = 0; graph.links.forEach(function(link) { if (link.circular) { // if either souce or target has type already use that if (link.source.circularLinkType || link.target.circularLinkType) { // default to source type if available link.circularLinkType = link.source.circularLinkType ? link.source.circularLinkType : link.target.circularLinkType; } else { link.circularLinkType = numberOfTops < numberOfBottoms ? 'top' : 'bottom'; } if (link.circularLinkType == 'top') { numberOfTops = numberOfTops + 1; } else { numberOfBottoms = numberOfBottoms + 1; } graph.nodes.forEach(function(node) { if ( getNodeID(node, id) == getNodeID(link.source, id) || getNodeID(node, id) == getNodeID(link.target, id) ) { node.circularLinkType = link.circularLinkType; } }); } }); //correct self-linking links to be same direction as node graph.links.forEach(function(link) { if (link.circular) { //if both source and target node are same type, then link should have same type if (link.source.circularLinkType == link.target.circularLinkType) { link.circularLinkType = link.source.circularLinkType; } //if link is selflinking, then link should have same type as node if (selfLinking(link, id)) { link.circularLinkType = link.source.circularLinkType; } } }); return graph; }30:T756,// Iteratively assign the depth for each node. // Nodes are assigned the maximum depth of incoming neighbors plus one; // nodes with no incoming links are assigned depth zero, while // nodes with no outgoing links are assigned the maximum depth. function computeNodeDepths(inputGraph) { let graph = clone(inputGraph); var nodes, next, x; if (sortNodes != null && sortNodes(graph.nodes[0]) != undefined) { graph.nodes.sort(function(a, b) { return sortNodes(a) < sortNodes(b) ? -1 : 1; }); let c = 0; var currentSortIndex = sortNodes(graph.nodes[0]); graph.nodes.forEach(function(node) { c = sortNodes(node) == currentSortIndex ? c : c + 1; currentSortIndex = sortNodes(node) == currentSortIndex ? currentSortIndex : sortNodes(node); node.column = c; }); } for ( nodes = graph.nodes, next = [], x = 0; nodes.length; ++x, nodes = next, next = [] ) { nodes.forEach(function(node) { node.depth = x; node.sourceLinks.forEach(function(link) { if (next.indexOf(link.target) < 0 && !link.circular) { next.push(link.target); } }); }); } for ( nodes = graph.nodes, next = [], x = 0; nodes.length; ++x, nodes = next, next = [] ) { nodes.forEach(function(node) { node.height = x; node.targetLinks.forEach(function(link) { if (next.indexOf(link.source) < 0 && !link.circular) { next.push(link.source); } }); }); } //console.log(sortNodes(graph.nodes[0])); // assign column numbers, and get max value graph.nodes.forEach(function(node) { node.column = sortNodes == null || sortNodes(graph.nodes[0]) == undefined ? align(node, x) : node.column; //node.column = Math.floor(align.call(null, node, x)); }); return graph; }31:T110e,function createVirtualNodes(inputGraph) { let graph = clone(inputGraph); graph.replacedLinks = []; if (useVirtualRoutes) { let virtualNodeIndex = -1; let virtualLinkIndex = 0; let linksLength = graph.links.length; for (var linkIndex = 0; linkIndex < linksLength; linkIndex++) { var thisLink = graph.links[linkIndex]; /* console.log("+++++++++++++++++ "); console.log( thisLink.index + " - columns " + thisLink.source.column + " <-> " + thisLink.target.column ); */ //if the link spans more than 1 column, then replace it with virtual nodes and links if (thisLink.target.column - thisLink.source.column < 2) { thisLink.type = "normal"; } else { //console.log("NEEDS NEW VIRTUAL LINKS"); //console.log("link index: " + thisLink.index); thisLink.type = "replaced"; let totalToCreate = thisLink.target.column - thisLink.source.column - 1; //console.log("total nodes to create: " + totalToCreate); for (var n = 0; n < totalToCreate; n++) { let newNode = {}; //get the next index number virtualNodeIndex = virtualNodeIndex + 1; newNode.name = "virtualNode" + virtualNodeIndex; newNode.index = "v" + virtualNodeIndex; //console.log(" created node: " + newNode.name); newNode.sourceLinks = []; newNode.targetLinks = []; newNode.partOfCycle = false; newNode.value = thisLink.value; newNode.depth = thisLink.source.depth + (n + 1); newNode.height = thisLink.source.height - (n + 1); newNode.column = thisLink.source.column + (n + 1); newNode.virtual = true; newNode.replacedLink = thisLink.index; graph.nodes.push(newNode); let newLink = {}; let vMinus1 = virtualNodeIndex - 1; newLink.source = n == 0 ? thisLink.source : "virtualNode" + vMinus1; newLink.target = newNode.name; newLink.value = thisLink.value; newLink.index = "virtualLink" + virtualLinkIndex; virtualLinkIndex = virtualLinkIndex + 1; newLink.circular = false; newLink.type = "virtual"; newLink.parentLink = thisLink.index; //console.log(newLink); graph.links.push(newLink); } let lastLink = {}; lastLink.source = "virtualNode" + virtualNodeIndex; lastLink.target = thisLink.target; lastLink.value = thisLink.value; lastLink.index = "virtualLink" + virtualLinkIndex; virtualLinkIndex = virtualLinkIndex + 1; lastLink.circular = false; lastLink.type = "virtual"; lastLink.parentLink = thisLink.index; //console.log(lastLink); graph.links.push(lastLink); } } //console.log(graph.links); var nodeById = d3.map(graph.nodes, id); graph.links.forEach(function(link, i) { if (link.type == "virtual") { var source = link.source; var target = link.target; if ( (typeof source === "undefined" ? "undefined" : _typeof(source)) !== 'object' ) { //console.log(source); //console.log(find(nodeById, source)); source = link.source = find(nodeById, source); } if ( (typeof target === "undefined" ? "undefined" : _typeof(target)) !== 'object' ) { target = link.target = find(nodeById, target); } source.sourceLinks.push(link); target.targetLinks.push(link); } }); let l = graph.links.length; while (l--) { if (graph.links[l].type == "replaced") { let obj = clone(graph.links[l]); graph.links.splice(l, 1); graph.replacedLinks.push(obj); } } graph.nodes.forEach(function(node) { let sIndex = node.sourceLinks.length; while (sIndex--) { if (node.sourceLinks[sIndex].type == "replaced") { node.sourceLinks.splice(sIndex, 1); } } let tIndex = node.targetLinks.length; while (tIndex--) { if (node.targetLinks[tIndex].type == "replaced") { node.targetLinks.splice(tIndex, 1); } } }); } return graph; }32:Tcb1,// Assign nodes' breadths, and then shift nodes that overlap (resolveCollisions) function computeNodeBreadths(inputGraph) { let graph = clone(inputGraph); var columns = d3 .nest() .key(function(d) { return d.column; }) .sortKeys(d3.ascending) .entries(graph.nodes) .map(function(d) { return d.values; }); columns.forEach(function(nodes) { var nodesLength = nodes.length; let totalColumnValue = nodes.reduce(function(total, d) { return total + d.value; }, 0); let preferredTotalGap = graph.y1 - graph.y0 - totalColumnValue * graph.ky; nodes.sort(function(a, b) { if (a.circularLinkType == b.circularLinkType) { return ( numberOfNonSelfLinkingCycles(b, id) - numberOfNonSelfLinkingCycles(a, id) ); } else if ( a.circularLinkType == "top" && b.circularLinkType == "bottom" ) { return -1; } else if (a.circularLinkType == "top" && b.partOfCycle == false) { return -1; } else if (a.partOfCycle == false && b.circularLinkType == "bottom") { return -1; } }); if (setNodePositions) { let currentY = graph.y0; //console.log("preferredTotalGap " + preferredTotalGap); nodes.forEach(function(node, i) { if (nodes.length == 1) { node.y0 = sankeyExtent.y1 / 2 - node.value * graph.ky; node.y1 = node.y0 + node.value * graph.ky; } else { node.y0 = currentY; node.y1 = node.y0 + node.value * graph.ky; currentY = node.y1 + preferredTotalGap / (nodes.length - 1); } }); } else { nodes.forEach(function(node, i) { // if the node is in the last column, and is the only node in that column, put it in the centre if (node.depth == columns.length - 1 && nodesLength == 1) { node.y0 = graph.y1 / 2 - node.value * graph.ky; node.y1 = node.y0 + node.value * graph.ky; // if the node is in the first column, and is the only node in that column, put it in the centre } else if (node.depth == 0 && nodesLength == 1) { node.y0 = graph.y1 / 2 - node.value * graph.ky; node.y1 = node.y0 + node.value * graph.ky; } // if the node has a circular link else if (node.partOfCycle) { // if the node has no self links if (numberOfNonSelfLinkingCycles(node, id) == 0) { node.y0 = graph.y1 / 2 + i; node.y1 = node.y0 + node.value * graph.ky; } else if (node.circularLinkType == 'top') { node.y0 = graph.y0 + i; node.y1 = node.y0 + node.value * graph.ky; } else { node.y0 = graph.y1 - node.value * graph.ky - i; node.y1 = node.y0 + node.value * graph.ky; } } else { if (graph.y0.top == 0 || graph.y1.bottom == 0) { node.y0 = ((graph.y1 - graph.y0) / nodesLength) * i; node.y1 = node.y0 + node.value * graph.ky; } else { node.y0 = (graph.y1 - graph.y0) / 2 - nodesLength / 2 + i; node.y1 = node.y0 + node.value * graph.ky; } } }); } }); return graph; }33:Tbfb,function resolveCollisionsAndRelax(inputGraph) { let graph = clone(inputGraph); var columns = d3 .nest() .key(function(d) { return d.column; }) .sortKeys(d3.ascending) .entries(graph.nodes) .map(function(d) { return d.values; }); resolveCollisions(); for (var alpha = 1, n = iterations; n > 0; --n) { relaxLeftAndRight((alpha *= 0.99), id); resolveCollisions(); } // For each node in each column, check the node's vertical position in relation to its targets and sources vertical position // and shift up/down to be closer to the vertical middle of those targets and sources function relaxLeftAndRight(alpha, id) { var columnsLength = columns.length; columns.forEach(function(nodes) { var n = nodes.length; var depth = nodes[0].depth; nodes.forEach(function(node) { // check the node is not an orphan var nodeHeight; if (node.sourceLinks.length || node.targetLinks.length) { if (node.partOfCycle && numberOfNonSelfLinkingCycles(node, id) > 0); else if (depth == 0 && n == 1) { nodeHeight = node.y1 - node.y0; node.y0 = graph.y1 / 2 - nodeHeight / 2; node.y1 = graph.y1 / 2 + nodeHeight / 2; } else if (depth == columnsLength - 1 && n == 1) { nodeHeight = node.y1 - node.y0; node.y0 = graph.y1 / 2 - nodeHeight / 2; node.y1 = graph.y1 / 2 + nodeHeight / 2; } else { var avg = 0; var avgTargetY = d3.mean(node.sourceLinks, linkTargetCenter); var avgSourceY = d3.mean(node.targetLinks, linkSourceCenter); if (avgTargetY && avgSourceY) { avg = (avgTargetY + avgSourceY) / 2; } else { avg = avgTargetY || avgSourceY; } var dy = (avg - nodeCenter(node)) * alpha; // positive if it node needs to move down node.y0 += dy; node.y1 += dy; } } }); }); } // For each column, check if nodes are overlapping, and if so, shift up/down function resolveCollisions() { columns.forEach(function(nodes) { var node, dy, y = graph.y0, n = nodes.length, i; // Push any overlapping nodes down. nodes.sort(ascendingBreadth); for (i = 0; i < n; ++i) { node = nodes[i]; dy = y - node.y0; if (dy > 0) { node.y0 += dy; node.y1 += dy; } y = node.y1 + nodePadding; } // If the bottommost node goes outside the bounds, push it back up. dy = y - nodePadding - graph.y1; if (dy > 0) { (y = node.y0 -= dy), (node.y1 -= dy); // Push any overlapping nodes back up. for (i = n - 2; i >= 0; --i) { node = nodes[i]; dy = node.y1 + minNodePadding /*nodePadding*/ - y; if (dy > 0) (node.y0 -= dy), (node.y1 -= dy); y = node.y0; } } }); } return graph; }34:T43b,// Assign the links y0 and y1 based on source/target nodes position, // plus the link's relative position to other links to the same node function computeLinkBreadths(inputGraph) { let graph = clone(inputGraph); graph.nodes.forEach(function(node) { node.sourceLinks.sort(ascendingTargetBreadth); node.targetLinks.sort(ascendingSourceBreadth); }); graph.nodes.forEach(function(node) { var y0 = node.y0; var y1 = y0; // start from the bottom of the node for cycle links var y0cycle = node.y1; var y1cycle = y0cycle; node.sourceLinks.forEach(function(link) { if (link.circular) { link.y0 = y0cycle - link.width / 2; y0cycle = y0cycle - link.width; } else { link.y0 = y0 + link.width / 2; y0 += link.width; } }); node.targetLinks.forEach(function(link) { if (link.circular) { link.y1 = y1cycle - link.width / 2; y1cycle = y1cycle - link.width; } else { link.y1 = y1 + link.width / 2; y1 += link.width; } }); }); return graph; }35:T106c,// sort and set the links' y0 for each node function sortSourceLinks(inputGraph) { let graph = clone(inputGraph); graph.nodes.forEach(function(node) { // move any nodes up which are off the bottom if (node.y + (node.y1 - node.y0) > graph.y1) { node.y = node.y - (node.y + (node.y1 - node.y0) - graph.y1); } var nodesSourceLinks = graph.links.filter(function(l) { return getNodeID(l.source, id) == getNodeID(node, id); }); var nodeSourceLinksLength = nodesSourceLinks.length; // if more than 1 link then sort if (nodeSourceLinksLength > 1) { nodesSourceLinks.sort(function(link1, link2) { // if both are not circular... if (!link1.circular && !link2.circular) { // if the target nodes are the same column, then sort by the link's target y if (link1.target.column == link2.target.column) { return link1.y1 - link2.y1; } else if (!sameInclines(link1, link2)) { // if the links slope in different directions, then sort by the link's target y return link1.y1 - link2.y1; // if the links slope in same directions, then sort by any overlap } else { if (link1.target.column > link2.target.column) { var link2Adj = linkPerpendicularYToLinkTarget(link2, link1); return link1.y1 - link2Adj; } if (link2.target.column > link1.target.column) { var link1Adj = linkPerpendicularYToLinkTarget(link1, link2); return link1Adj - link2.y1; } } } // if only one is circular, the move top links up, or bottom links down if (link1.circular && !link2.circular) { return link1.circularLinkType == 'top' ? -1 : 1; } else if (link2.circular && !link1.circular) { return link2.circularLinkType == 'top' ? 1 : -1; } // if both links are circular... if (link1.circular && link2.circular) { // ...and they both loop the same way (both top) if ( link1.circularLinkType === link2.circularLinkType && link1.circularLinkType == 'top' ) { // ...and they both connect to a target with same column, then sort by the target's y if (link1.target.column === link2.target.column) { return link1.target.y1 - link2.target.y1; } else { // ...and they connect to different column targets, then sort by how far back they return link2.target.column - link1.target.column; } } else if ( link1.circularLinkType === link2.circularLinkType && link1.circularLinkType == 'bottom' ) { // ...and they both loop the same way (both bottom) // ...and they both connect to a target with same column, then sort by the target's y if (link1.target.column === link2.target.column) { return link2.target.y1 - link1.target.y1; } else { // ...and they connect to different column targets, then sort by how far back they return link1.target.column - link2.target.column; } } else { // ...and they loop around different ways, the move top up and bottom down return link1.circularLinkType == 'top' ? -1 : 1; } } }); } // update y0 for links var ySourceOffset = node.y0; nodesSourceLinks.forEach(function(link) { link.y0 = ySourceOffset + link.width / 2; ySourceOffset = ySourceOffset + link.width; }); // correct any circular bottom links so they are at the bottom of the node nodesSourceLinks.forEach(function(link, i) { if (link.circularLinkType == 'bottom') { var j = i + 1; var offsetFromBottom = 0; // sum the widths of any links that are below this link for (j; j < nodeSourceLinksLength; j++) { offsetFromBottom = offsetFromBottom + nodesSourceLinks[j].width; } link.y0 = node.y1 - offsetFromBottom - link.width / 2; } }); }); return graph; }36:Tf16,// sort and set the links' y1 for each node function sortTargetLinks(inputGraph) { let graph = clone(inputGraph); graph.nodes.forEach(function(node) { var nodesTargetLinks = graph.links.filter(function(l) { return getNodeID(l.target, id) == getNodeID(node, id); }); var nodesTargetLinksLength = nodesTargetLinks.length; if (nodesTargetLinksLength > 1) { nodesTargetLinks.sort(function(link1, link2) { // if both are not circular, the base on the source y position if (!link1.circular && !link2.circular) { if (link1.source.column == link2.source.column) { return link1.y0 - link2.y0; } else if (!sameInclines(link1, link2)) { return link1.y0 - link2.y0; } else { // get the angle of the link to the further source node (ie the smaller column) if (link2.source.column < link1.source.column) { var link2Adj = linkPerpendicularYToLinkSource(link2, link1); return link1.y0 - link2Adj; } if (link1.source.column < link2.source.column) { var link1Adj = linkPerpendicularYToLinkSource(link1, link2); return link1Adj - link2.y0; } } } // if only one is circular, the move top links up, or bottom links down if (link1.circular && !link2.circular) { return link1.circularLinkType == 'top' ? -1 : 1; } else if (link2.circular && !link1.circular) { return link2.circularLinkType == 'top' ? 1 : -1; } // if both links are circular... if (link1.circular && link2.circular) { // ...and they both loop the same way (both top) if ( link1.circularLinkType === link2.circularLinkType && link1.circularLinkType == 'top' ) { // ...and they both connect to a target with same column, then sort by the target's y if (link1.source.column === link2.source.column) { return link1.source.y1 - link2.source.y1; } else { // ...and they connect to different column targets, then sort by how far back they return link1.source.column - link2.source.column; } } else if ( link1.circularLinkType === link2.circularLinkType && link1.circularLinkType == 'bottom' ) { // ...and they both loop the same way (both bottom) // ...and they both connect to a target with same column, then sort by the target's y if (link1.source.column === link2.source.column) { return link1.source.y1 - link2.source.y1; } else { // ...and they connect to different column targets, then sort by how far back they return link2.source.column - link1.source.column; } } else { // ...and they loop around different ways, the move top up and bottom down return link1.circularLinkType == 'top' ? -1 : 1; } } }); } // update y1 for links var yTargetOffset = node.y0; nodesTargetLinks.forEach(function(link) { link.y1 = yTargetOffset + link.width / 2; yTargetOffset = yTargetOffset + link.width; }); // correct any circular bottom links so they are at the bottom of the node nodesTargetLinks.forEach(function(link, i) { if (link.circularLinkType == 'bottom') { var j = i + 1; var offsetFromBottom = 0; // sum the widths of any links that are below this link for (j; j < nodesTargetLinksLength; j++) { offsetFromBottom = offsetFromBottom + nodesTargetLinks[j].width; } link.y1 = node.y1 - offsetFromBottom - link.width / 2; } }); }); return graph; }37:Tf18,// Move any nodes that overlap links which span 2+ columns function resolveNodeLinkOverlaps(inputGraph) { let graph = clone(inputGraph); /* graph.links.forEach(function(link) { if (link.circular) { return; } if (link.target.column - link.source.column > 1) { var columnToTest = link.source.column + 1; var maxColumnToTest = link.target.column - 1; var i = 1; var numberOfColumnsToTest = maxColumnToTest - columnToTest + 1; for (i = 1; columnToTest <= maxColumnToTest; columnToTest++, i++) { graph.nodes.forEach(function(node) { if (node.column == columnToTest) { var t = i / (numberOfColumnsToTest + 1); // Find all the points of a cubic bezier curve in javascript // https://stackoverflow.com/questions/15397596/find-all-the-points-of-a-cubic-bezier-curve-in-javascript var B0_t = Math.pow(1 - t, 3); var B1_t = 3 * t * Math.pow(1 - t, 2); var B2_t = 3 * Math.pow(t, 2) * (1 - t); var B3_t = Math.pow(t, 3); var py_t = B0_t * link.y0 + B1_t * link.y0 + B2_t * link.y1 + B3_t * link.y1; var linkY0AtColumn = py_t - link.width / 2; var linkY1AtColumn = py_t + link.width / 2; var dy; // If top of link overlaps node, push node up if (linkY0AtColumn > node.y0 && linkY0AtColumn < node.y1) { dy = node.y1 - linkY0AtColumn + 10; dy = node.circularLinkType == 'bottom' ? dy : -dy; node = adjustNodeHeight(node, dy, graph.y0, graph.y1); // check if other nodes need to move up too graph.nodes.forEach(function(otherNode) { // don't need to check itself or nodes at different columns if ( getNodeID(otherNode, id) == getNodeID(node, id) || otherNode.column != node.column ) { return; } if (nodesOverlap(node, otherNode)) { adjustNodeHeight(otherNode, dy, graph.y0, graph.y1); } }); } else if (linkY1AtColumn > node.y0 && linkY1AtColumn < node.y1) { // If bottom of link overlaps node, push node down dy = linkY1AtColumn - node.y0 + 10; node = adjustNodeHeight(node, dy, graph.y0, graph.y1); // check if other nodes need to move down too graph.nodes.forEach(function(otherNode) { // don't need to check itself or nodes at different columns if ( getNodeID(otherNode, id) == getNodeID(node, id) || otherNode.column != node.column ) { return; } if (otherNode.y0 < node.y1 && otherNode.y1 > node.y1) { adjustNodeHeight(otherNode, dy, graph.y0, graph.y1); } }); } else if (linkY0AtColumn < node.y0 && linkY1AtColumn > node.y1) { // if link completely overlaps node dy = linkY1AtColumn - node.y0 + 10; node = adjustNodeHeight(node, dy, graph.y0, graph.y1); graph.nodes.forEach(function(otherNode) { // don't need to check itself or nodes at different columns if ( getNodeID(otherNode, id) == getNodeID(node, id) || otherNode.column != node.column ) { return; } if (otherNode.y0 < node.y1 && otherNode.y1 > node.y1) { adjustNodeHeight(otherNode, dy, graph.y0, graph.y1); } }); } } }); } } }); */ return graph; }38:T40c,function fillHeight(inputGraph) { let graph = clone(inputGraph); var nodes = graph.nodes; var links = graph.links; var top = false; var bottom = false; links.forEach(function(link) { if (link.circularLinkType == "top") { top = true; } else if (link.circularLinkType == "bottom") { bottom = true; } }); if (top == false || bottom == false) { var minY0 = d3.min(nodes, function(node) { return node.y0; }); var maxY1 = d3.max(nodes, function(node) { return node.y1; }); var currentHeight = maxY1 - minY0; var chartHeight = graph.y1 - graph.y0; var ratio = chartHeight / currentHeight; nodes.forEach(function(node) { var nodeHeight = (node.y1 - node.y0) * ratio; node.y0 = (node.y0 - minY0) * ratio; node.y1 = node.y0 + nodeHeight; }); links.forEach(function(link) { link.y0 = (link.y0 - minY0) * ratio; link.y1 = (link.y1 - minY0) * ratio; link.width = link.width * ratio; }); } return graph; }39:Tf28,function addVirtualPathData(inputGraph) { let graph = clone(inputGraph); graph.virtualLinks = []; graph.virtualNodes = []; graph.replacedLinks.forEach(function(replacedLink) { replacedLink.useVirtual = virtualLinkType == "virtual" ? true : false; let firstPath = true; for (let i = 0; i < graph.links.length; i++) { if (graph.links[i].parentLink == replacedLink.index) { if (firstPath) { replacedLink.y0 = graph.links[i].y0; replacedLink.x0 = graph.links[i].source.x1; replacedLink.width = graph.links[i].width; firstPath = false; } else { replacedLink.y1 = graph.links[i].y1; replacedLink.x1 = graph.links[i].target.x0; } } } if (virtualLinkType == "both") { let columnToTest = replacedLink.source.column + 1; let maxColumnToTest = replacedLink.target.column - 1; let i = 1; let numberOfColumnsToTest = maxColumnToTest - columnToTest + 1; for (i = 1; columnToTest <= maxColumnToTest; columnToTest++, i++) { graph.nodes.forEach(function(node) { if ( node.column == columnToTest && node.replacedLink != replacedLink.index ) { var t = i / (numberOfColumnsToTest + 1); // Find all the points of a cubic bezier curve in javascript // https://stackoverflow.com/questions/15397596/find-all-the-points-of-a-cubic-bezier-curve-in-javascript var B0_t = Math.pow(1 - t, 3); var B1_t = 3 * t * Math.pow(1 - t, 2); var B2_t = 3 * Math.pow(t, 2) * (1 - t); var B3_t = Math.pow(t, 3); var py_t = B0_t * replacedLink.y0 + B1_t * replacedLink.y0 + B2_t * replacedLink.y1 + B3_t * replacedLink.y1; var linkY0AtColumn = py_t - replacedLink.width / 2; var linkY1AtColumn = py_t + replacedLink.width / 2; if (linkY0AtColumn > node.y0 && linkY0AtColumn < node.y1) { replacedLink.useVirtual = true; } else if (linkY1AtColumn > node.y0 && linkY1AtColumn < node.y1) { replacedLink.useVirtual = true; } else if (linkY0AtColumn < node.y0 && linkY1AtColumn > node.y1) { replacedLink.useVirtual = true; } } }); } } }); //create d path string graph.replacedLinks.forEach(function(replacedLink) { //replacedLink.width = replacedLink.value * graph.ky; if (replacedLink.useVirtual) { let pathString = ""; let firstPath = true; for (let i = 0; i < graph.links.length; i++) { if (graph.links[i].parentLink == replacedLink.index) { if (firstPath) { pathString = pathString + graph.links[i].path; firstPath = false; } else { pathString = pathString + graph.links[i].path.replace("M", "L"); } } } replacedLink.path = pathString; } else { var normalPath = d3 .linkHorizontal() .source(function(d) { var x = d.x0; var y = d.y0; return [x, y]; }) .target(function(d) { var x = d.x1; var y = d.y1; return [x, y]; }); replacedLink.path = normalPath(replacedLink); } let copy = clone(replacedLink); graph.links.push(copy); }); let l = graph.links.length; while (l--) { if (graph.links[l].type == "virtual") { let obj = clone(graph.links[l]); graph.links.splice(l, 1); graph.virtualLinks.push(obj); } } let n = graph.nodes.length; while (n--) { if (graph.nodes[n].virtual) { let obj = clone(graph.nodes[n]); graph.nodes.splice(n, 1); graph.virtualNodes.push(obj); } } return graph; }3a:T1c92,// calculate the optimum path for a link to reduce overlaps function addCircularPathData(inputGraph) { let graph = clone(inputGraph); //var baseRadius = 10 var buffer = 5; //var verticalMargin = 25 var minY = d3.min(graph.links, function(link) { return link.source.y0; }); // create object for circular Path Data graph.links.forEach(function(link) { if (link.circular) { link.circularPathData = {}; } }); // calc vertical offsets per top/bottom links var topLinks = graph.links.filter(function(l) { return l.circularLinkType == 'top'; }); /* topLinks = */ calcVerticalBuffer(topLinks); var bottomLinks = graph.links.filter(function(l) { return l.circularLinkType == 'bottom'; }); /* bottomLinks = */ calcVerticalBuffer(bottomLinks); // add the base data for each link graph.links.forEach(function(link) { if (link.circular) { link.circularPathData.arcRadius = link.width + baseRadius; link.circularPathData.leftNodeBuffer = buffer; link.circularPathData.rightNodeBuffer = buffer; link.circularPathData.sourceWidth = link.source.x1 - link.source.x0; link.circularPathData.sourceX = link.source.x0 + link.circularPathData.sourceWidth; link.circularPathData.targetX = link.target.x0; link.circularPathData.sourceY = link.y0; link.circularPathData.targetY = link.y1; // for self linking paths, and that the only circular link in/out of that node if (selfLinking(link, id) && onlyCircularLink(link)) { link.circularPathData.leftSmallArcRadius = baseRadius + link.width / 2; link.circularPathData.leftLargeArcRadius = baseRadius + link.width / 2; link.circularPathData.rightSmallArcRadius = baseRadius + link.width / 2; link.circularPathData.rightLargeArcRadius = baseRadius + link.width / 2; if (link.circularLinkType == 'bottom') { link.circularPathData.verticalFullExtent = link.source.y1 + verticalMargin + link.circularPathData.verticalBuffer; link.circularPathData.verticalLeftInnerExtent = link.circularPathData.verticalFullExtent - link.circularPathData.leftLargeArcRadius; link.circularPathData.verticalRightInnerExtent = link.circularPathData.verticalFullExtent - link.circularPathData.rightLargeArcRadius; } else { // top links link.circularPathData.verticalFullExtent = link.source.y0 - verticalMargin - link.circularPathData.verticalBuffer; link.circularPathData.verticalLeftInnerExtent = link.circularPathData.verticalFullExtent + link.circularPathData.leftLargeArcRadius; link.circularPathData.verticalRightInnerExtent = link.circularPathData.verticalFullExtent + link.circularPathData.rightLargeArcRadius; } } else { // else calculate normally // add left extent coordinates, based on links with same source column and circularLink type var thisColumn = link.source.column; var thisCircularLinkType = link.circularLinkType; var sameColumnLinks = graph.links.filter(function(l) { return ( l.source.column == thisColumn && l.circularLinkType == thisCircularLinkType ); }); if (link.circularLinkType == 'bottom') { sameColumnLinks.sort(sortLinkSourceYDescending); } else { sameColumnLinks.sort(sortLinkSourceYAscending); } var radiusOffset = 0; sameColumnLinks.forEach(function(l, i) { if (l.circularLinkID == link.circularLinkID) { link.circularPathData.leftSmallArcRadius = baseRadius + link.width / 2 + radiusOffset; link.circularPathData.leftLargeArcRadius = baseRadius + link.width / 2 + i * circularLinkGap + radiusOffset; } radiusOffset = radiusOffset + l.width; }); // add right extent coordinates, based on links with same target column and circularLink type thisColumn = link.target.column; sameColumnLinks = graph.links.filter(function(l) { return ( l.target.column == thisColumn && l.circularLinkType == thisCircularLinkType ); }); if (link.circularLinkType == 'bottom') { sameColumnLinks.sort(sortLinkTargetYDescending); } else { sameColumnLinks.sort(sortLinkTargetYAscending); } radiusOffset = 0; sameColumnLinks.forEach(function(l, i) { if (l.circularLinkID == link.circularLinkID) { link.circularPathData.rightSmallArcRadius = baseRadius + link.width / 2 + radiusOffset; link.circularPathData.rightLargeArcRadius = baseRadius + link.width / 2 + i * circularLinkGap + radiusOffset; } radiusOffset = radiusOffset + l.width; }); // bottom links if (link.circularLinkType == 'bottom') { link.circularPathData.verticalFullExtent = Math.max(graph.y1, link.source.y1, link.target.y1) + verticalMargin + link.circularPathData.verticalBuffer; link.circularPathData.verticalLeftInnerExtent = link.circularPathData.verticalFullExtent - link.circularPathData.leftLargeArcRadius; link.circularPathData.verticalRightInnerExtent = link.circularPathData.verticalFullExtent - link.circularPathData.rightLargeArcRadius; } else { // top links link.circularPathData.verticalFullExtent = minY - verticalMargin - link.circularPathData.verticalBuffer; link.circularPathData.verticalLeftInnerExtent = link.circularPathData.verticalFullExtent + link.circularPathData.leftLargeArcRadius; link.circularPathData.verticalRightInnerExtent = link.circularPathData.verticalFullExtent + link.circularPathData.rightLargeArcRadius; } } // all links link.circularPathData.leftInnerExtent = link.circularPathData.sourceX + link.circularPathData.leftNodeBuffer; link.circularPathData.rightInnerExtent = link.circularPathData.targetX - link.circularPathData.rightNodeBuffer; link.circularPathData.leftFullExtent = link.circularPathData.sourceX + link.circularPathData.leftLargeArcRadius + link.circularPathData.leftNodeBuffer; link.circularPathData.rightFullExtent = link.circularPathData.targetX - link.circularPathData.rightLargeArcRadius - link.circularPathData.rightNodeBuffer; } if (link.circular) { link.path = createCircularPathString(link); } else { var normalPath = d3 .linkHorizontal() .source(function(d) { var x = d.source.x0 + (d.source.x1 - d.source.x0); var y = d.y0; return [x, y]; }) .target(function(d) { var x = d.target.x0; var y = d.y1; return [x, y]; }); link.path = normalPath(link); } }); return graph; }3b:T14b8,// create a d path using the addCircularPathData function createCircularPathString(link) { var pathString = ''; // 'pathData' is assigned a value but never used // var pathData = {} if (link.circularLinkType == 'top') { pathString = // start at the right of the source node 'M' + link.circularPathData.sourceX + ' ' + link.circularPathData.sourceY + ' ' + // line right to buffer point 'L' + link.circularPathData.leftInnerExtent + ' ' + link.circularPathData.sourceY + ' ' + // Arc around: Centre of arc X and //Centre of arc Y 'A' + link.circularPathData.leftLargeArcRadius + ' ' + link.circularPathData.leftSmallArcRadius + ' 0 0 0 ' + // End of arc X //End of arc Y link.circularPathData.leftFullExtent + ' ' + (link.circularPathData.sourceY - link.circularPathData.leftSmallArcRadius) + ' ' + // End of arc X // line up to buffer point 'L' + link.circularPathData.leftFullExtent + ' ' + link.circularPathData.verticalLeftInnerExtent + ' ' + // Arc around: Centre of arc X and //Centre of arc Y 'A' + link.circularPathData.leftLargeArcRadius + ' ' + link.circularPathData.leftLargeArcRadius + ' 0 0 0 ' + // End of arc X //End of arc Y link.circularPathData.leftInnerExtent + ' ' + link.circularPathData.verticalFullExtent + ' ' + // End of arc X // line left to buffer point 'L' + link.circularPathData.rightInnerExtent + ' ' + link.circularPathData.verticalFullExtent + ' ' + // Arc around: Centre of arc X and //Centre of arc Y 'A' + link.circularPathData.rightLargeArcRadius + ' ' + link.circularPathData.rightLargeArcRadius + ' 0 0 0 ' + // End of arc X //End of arc Y link.circularPathData.rightFullExtent + ' ' + link.circularPathData.verticalRightInnerExtent + ' ' + // End of arc X // line down 'L' + link.circularPathData.rightFullExtent + ' ' + (link.circularPathData.targetY - link.circularPathData.rightSmallArcRadius) + ' ' + // Arc around: Centre of arc X and //Centre of arc Y 'A' + link.circularPathData.rightLargeArcRadius + ' ' + link.circularPathData.rightSmallArcRadius + ' 0 0 0 ' + // End of arc X //End of arc Y link.circularPathData.rightInnerExtent + ' ' + link.circularPathData.targetY + ' ' + // End of arc X // line to end 'L' + link.circularPathData.targetX + ' ' + link.circularPathData.targetY; } else { // bottom path pathString = // start at the right of the source node 'M' + link.circularPathData.sourceX + ' ' + link.circularPathData.sourceY + ' ' + // line right to buffer point 'L' + link.circularPathData.leftInnerExtent + ' ' + link.circularPathData.sourceY + ' ' + // Arc around: Centre of arc X and //Centre of arc Y 'A' + link.circularPathData.leftLargeArcRadius + ' ' + link.circularPathData.leftSmallArcRadius + ' 0 0 1 ' + // End of arc X //End of arc Y link.circularPathData.leftFullExtent + ' ' + (link.circularPathData.sourceY + link.circularPathData.leftSmallArcRadius) + ' ' + // End of arc X // line down to buffer point 'L' + link.circularPathData.leftFullExtent + ' ' + link.circularPathData.verticalLeftInnerExtent + ' ' + // Arc around: Centre of arc X and //Centre of arc Y 'A' + link.circularPathData.leftLargeArcRadius + ' ' + link.circularPathData.leftLargeArcRadius + ' 0 0 1 ' + // End of arc X //End of arc Y link.circularPathData.leftInnerExtent + ' ' + link.circularPathData.verticalFullExtent + ' ' + // End of arc X // line left to buffer point 'L' + link.circularPathData.rightInnerExtent + ' ' + link.circularPathData.verticalFullExtent + ' ' + // Arc around: Centre of arc X and //Centre of arc Y 'A' + link.circularPathData.rightLargeArcRadius + ' ' + link.circularPathData.rightLargeArcRadius + ' 0 0 1 ' + // End of arc X //End of arc Y link.circularPathData.rightFullExtent + ' ' + link.circularPathData.verticalRightInnerExtent + ' ' + // End of arc X // line up 'L' + link.circularPathData.rightFullExtent + ' ' + (link.circularPathData.targetY + link.circularPathData.rightSmallArcRadius) + ' ' + // Arc around: Centre of arc X and //Centre of arc Y 'A' + link.circularPathData.rightLargeArcRadius + ' ' + link.circularPathData.rightSmallArcRadius + ' 0 0 1 ' + // End of arc X //End of arc Y link.circularPathData.rightInnerExtent + ' ' + link.circularPathData.targetY + ' ' + // End of arc X // line to end 'L' + link.circularPathData.targetX + ' ' + link.circularPathData.targetY; } return pathString; }3c:T17a9,drawSankey = function(graph) { let svg = d3 .create("svg") .attr("width", svgWidth + chartPadding + chartPadding) .attr("height", svgHeight + chartPadding + chartPadding); let g = svg .append("g") .attr("transform", "translate(" + chartPadding + "," + chartPadding + ")"); let linkG = g .append("g") .attr("class", "links") .attr("fill", "none") .attr("stroke-opacity", 0.2) .selectAll("path"); let nodeG = g .append("g") .attr("class", "nodes") .attr("font-family", "sans-serif") .attr("font-size", 10) .selectAll("g"); var node = nodeG .data(graph.nodes) .enter() .append("g"); node .append("rect") .attr("x", function(d) { return d.x0; }) .attr("y", function(d) { return d.y0; }) .attr("height", function(d) { return d.y1 - d.y0; }) .attr("width", function(d) { return d.x1 - d.x0; }) .style("fill", function(d) { return nodeColour(d.name); }) .style("stroke", "grey") .style("opacity", 0.5) .on("mouseover", function(d) { let thisName = d.name; node.selectAll("rect").style("opacity", function(d) { return highlightNodes(d, thisName); }); svg.selectAll(".sankey-link").style("opacity", function(l) { return l.source.name == thisName || l.target.name == thisName ? 1 : 0.3; }); node.selectAll("text").style("opacity", function(d) { return highlightNodes(d, thisName); }); }) .on("mouseout", function(d) { d3.selectAll("rect").style("opacity", 0.5); d3.selectAll(".sankey-link").style("opacity", 0.7); d3.selectAll("text").style("opacity", 1); }); node .append("text") .attr("x", function(d) { return (d.x0 + d.x1) / 2; }) .attr("y", function(d) { let y = d.y0 - 8; //y = y < graph.y0 ? d.y1 + 12 : y; return y; }) .attr("dy", "0.35em") .attr("text-anchor", "middle") .text(function(d) { return d.name; }); node.append("title").text(function(d) { return d.name + "\n" + d.value; }); var link = linkG .data(graph.links) .enter() .append("g"); link .filter(d => d.path) .append("path") .attr("class", "sankey-link") .attr("d", function(link) { return link.path; }) .style("stroke-width", function(d) { return Math.max(1, d.width); }) .style("mix-blend-mode", "multiply") .style("opacity", 0.7) .style("stroke", function(link, i) { if (link.circular) { return "red"; } else if (link.type == "virtual") { return "yellow"; } else if (link.type == "replaced") { return "blue"; } else { return nodeColour(link.source.name); } //return link.circular ? "red" : "black"; }); link.append("title").text(function(d) { return d.source.name + " → " + d.target.name + "\n Index: " + d.index; }); if (drawArrows) { let totalDashArrayLength = arrowLength + gapLength; var arrowsG = linkG .data(graph.links) .enter() .append("g") .attr("class", "g-arrow"); let arrows = arrowsG .append('path') .attr('d', arrowPath) .style('stroke-width', 1) .style('stroke', arrowColour) .style('stroke-dasharray', arrowLength + ',' + gapLength); arrows.each(function(arrow) { let thisPath = d3.select(this).node(); let parentG = d3.select(this.parentNode); let pathLength = thisPath.getTotalLength(); let numberOfArrows = Math.ceil(pathLength / totalDashArrayLength); // remove the last arrow head if it will overlap the target node if ( (numberOfArrows - 1) * totalDashArrayLength + (arrowLength + (arrowHeadSize + 1)) > pathLength ) { numberOfArrows = numberOfArrows - 1; } let arrowHeadData = d3.range(numberOfArrows).map(function(d, i) { let length = i * totalDashArrayLength + arrowLength; let point = thisPath.getPointAtLength(length); let previousPoint = thisPath.getPointAtLength(length - 2); 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; } } return { x: point.x, y: point.y, rotation: rotation }; }); let arrowHeads = parentG .selectAll('.arrow-heads') .data(arrowHeadData) .enter() .append('path') .attr('d', function(d) { return ( 'M' + d.x + ',' + (d.y - arrowHeadSize / 2) + ' ' + 'L' + (d.x + arrowHeadSize) + ',' + d.y + ' ' + 'L' + d.x + ',' + (d.y + arrowHeadSize / 2) ); }) .attr('class', 'arrow-head') .attr('transform', function(d) { return 'rotate(' + d.rotation + ',' + d.x + ',' + d.y + ')'; }) .style('fill', arrowColour); }); } function highlightNodes(node, name) { let opacity = 0.3; if (node.name == name) { opacity = 1; } node.sourceLinks.forEach(function(link) { if (link.target.name == name) { opacity = 1; } }); node.targetLinks.forEach(function(link) { if (link.source.name == name) { opacity = 1; } }); return opacity; } return svg.node(); }3d:Tc17,inputLinks = [ { source: "startA", target: "process8", value: 20, optimal: "yes" }, { source: "startA", target: "process5", value: 20, optimal: "yes" }, { source: "startA", target: "process6", value: 20, optimal: "yes" }, { source: "startB", target: "process1", value: 15, optimal: "yes" }, { source: "startB", target: "process5", value: 15, optimal: "yes" }, { source: "process1", target: "process4", value: 30, optimal: "yes" }, { source: "process4", target: "process1", value: 10, optimal: "yes" }, { source: "process2", target: "process7", value: 35, optimal: "yes" }, { source: "process1", target: "process3", value: 20, optimal: "yes" }, { source: "process5", target: "process1", value: 20, optimal: "yes" }, { source: "process6", target: "startA", value: 5, optimal: "yes" }, { source: "process4", target: "process2", value: 10, optimal: "yes" }, { source: "process6", target: "process8", value: 15, optimal: "yes" }, //{ "source": "process4", "target": "startB", "value": 5, "optimal": "yes" }, { source: "process3", target: "process2", value: 15, optimal: "yes" }, //{ "source": "process3", "target": "startB", "value": 5, "optimal": "yes" }, { source: "process15", target: "process13", value: 10, optimal: "yes" }, { source: "process13", target: "process9", value: 10, optimal: "yes" }, { source: "process7", target: "startB", value: 20, optimal: "yes" }, { source: "process8", target: "process1", value: 10, optimal: "yes" }, { source: "process8", target: "process16", value: 10, optimal: "yes" }, { source: "process16", target: "process9", value: 10, optimal: "yes" }, { source: "process8", target: "process11", value: 25, optimal: "yes" }, { source: "process11", target: "process10", value: 20, optimal: "yes" }, { source: "process4", target: "process12", value: 10, optimal: "yes" }, { source: "process12", target: "process11", value: 10, optimal: "yes" }, { source: "process7", target: "process15", value: 15, optimal: "yes" }, { source: "process15", target: "process14", value: 10, optimal: "yes" }, { source: "process10", target: "process13", value: 10, optimal: "yes" }, { source: "process10", target: "process16", value: 10, optimal: "yes" }, { source: "process14", target: "finishB", value: 10, optimal: "yes" }, { source: "process9", target: "finishA", value: 10, optimal: "yes" }, { source: "process16", target: "process8", value: 10, optimal: "yes" }, { source: "process9", target: "finishB", value: 10, optimal: "yes" }, { source: "process15", target: "finishB", value: 10, optimal: "yes" }, { source: "process15", target: "finishA", value: 10, optimal: "yes" }, { source: "process11", target: "process15", value: 25, optimal: "yes" }, { source: "process11", target: "process11", value: 5, optimal: "yes" }, { source: "finishA", target: "finishA", value: 15, optimal: "yes" }, { source: "finishB", target: "finishB", value: 15, optimal: "yes" }, { source: "process5", target: "process5", value: 10, optimal: "yes" }, { source: "finishB", target: "process14", value: 5, optimal: "yes" } ]3e:Ta41,data4 = ({ nodes: [ { name: "Oceans", sort: 1 }, { name: "Evaporation", sort: 2 }, { name: "Atmosphere", sort: 3 }, { name: "Condensation", sort: 4 }, { name: "Precipitation", sort: 5 }, { name: "Ice and snow", sort: 6 }, { name: "Infiltration", sort: 6 }, { name: "Seepage", sort: 7 }, { name: "Spring", sort: 7 }, { name: "Freshwater", sort: 7 }, { name: "Plants and animals", sort: 8 }, { name: "Sublimation", sort: 8 }, { name: "Groundwater flow", sort: 9 }, { name: "Groundwater storage", sort: 9 }, { name: "Surface runoff", sort: 10 }, { name: "Plant uptake", sort: 11 }, { name: "Evapotranspiration", sort: 12 } ], links: [ { source: "Oceans", target: "Evaporation", value: 4 }, { source: "Evaporation", target: "Condensation", value: 4 }, { source: "Condensation", target: "Atmosphere", value: 4 }, { source: "Atmosphere", target: "Precipitation", value: 4 }, { source: "Precipitation", target: "Ice and snow", value: 4 }, { source: "Precipitation", target: "Oceans", value: 4 }, { source: "Precipitation", target: "Surface runoff", value: 4 }, { source: "Ice and snow", target: "Infiltration", value: 4 }, { source: "Ice and snow", target: "Sublimation", value: 4 }, { source: "Sublimation", target: "Atmosphere", value: 4 }, { source: "Infiltration", target: "Groundwater flow", value: 4 }, { source: "Infiltration", target: "Groundwater storage", value: 4 }, { source: "Groundwater storage", target: "Oceans", value: 4 }, { source: "Groundwater flow", target: "Seepage", value: 4 }, { source: "Groundwater flow", target: "Spring", value: 4 }, { source: "Groundwater flow", target: "Plant uptake", value: 4 }, { source: "Groundwater flow", target: "Oceans", value: 4 }, { source: "Groundwater flow", target: "Freshwater", value: 4 }, { source: "Seepage", target: "Freshwater", value: 4 }, { source: "Spring", target: "Freshwater", value: 4 }, { source: "Freshwater", target: "Evaporation", value: 4 }, { source: "Freshwater", target: "Plants and animals", value: 4 }, { source: "Freshwater", target: "Seepage", value: 4 }, { source: "Plant uptake", target: "Plants and animals", value: 4 }, { source: "Plants and animals", target: "Freshwater", value: 4 }, { source: "Surface runoff", target: "Groundwater flow", value: 4 }, { source: "Plants and animals", target: "Evapotranspiration", value: 4 }, { source: "Evapotranspiration", target: "Atmosphere", value: 4 }, { source: "Freshwater", target: "Oceans", value: 4 } ] })3f:T8df,function input(config) { let { form, type = "text", attributes = {}, action, getValue, title, description, format, display, submit, options } = config; const wrapper = html`

`; if (!form) form = html``; Object.keys(attributes).forEach(key => { const val = attributes[key]; if (val != null) form.input.setAttribute(key, val); }); if (submit) form.append( html`` ); form.append( html`` ); if (title) form.prepend( html`

${title}

` ); /*if (description) form.append( html`

${description}

` );*/ if (format) format = typeof format === "function" ? format : d3.format(format); if (action) { action(form); } else { const verb = submit ? "onsubmit" : type == "button" ? "onclick" : type == "checkbox" || type == "radio" ? "onchange" : "oninput"; form[verb] = e => { e && e.preventDefault(); const value = getValue ? getValue(form.input) : form.input.value; if (form.output) { const out = display ? display(value) : format ? format(value) : value; if (out instanceof window.Element) { while (form.output.hasChildNodes()) { form.output.removeChild(form.output.lastChild); } form.output.append(out); } else { form.output.value = out; } } form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; if (verb !== "oninput") wrapper.oninput = e => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = e => e && e.preventDefault(); form[verb](); } while (form.childNodes.length) { wrapper.appendChild(form.childNodes[0]); } form.append(wrapper); return form; }40:T469,function checkbox(config = {}) { let { value: formValue, title, description, submit, options } = Array.isArray( config ) ? { options: config } : config; options = options.map(o => typeof o === "string" ? { value: o, label: o } : o ); const form = input({ type: "checkbox", title, description, submit, getValue: input => { if (input.length) return Array.prototype.filter .call(input, i => i.checked) .map(i => i.value); return input.checked ? input.value : false; }, form: html` ` }); form.output.remove(); return form; }41:T44b,function select(config = {}) { let { value: formValue, title, description, submit, multiple, size, options } = Array.isArray(config) ? { options: config } : config; options = options.map(o => typeof o === "object" ? o : { value: o, label: o } ); const form = input({ type: "select", title, description, submit, getValue: input => { const selected = Array.prototype.filter .call(input.options, i => i.selected) .map(i => i.value); return multiple ? selected : selected[0]; }, form: html` ` }); form.output.remove(); return form; }42:[{"id":"fdd40b2ef26b49fe621fc18ddd4552065120046361e28b6ca5a25f721b006c006da222e275a72a1518011995ff6aef467c7dbc3c12e13c8ae1a372131c54edf2","href":"https://static.observableusercontent.com/files/fdd40b2ef26b49fe621fc18ddd4552065120046361e28b6ca5a25f721b006c006da222e275a72a1518011995ff6aef467c7dbc3c12e13c8ae1a372131c54edf2","name":"wapo.csv","type":"text/csv","lastModified":1601931792524.751,"size":498}] 2a:{"title":"Sankey circular deconstructed - part 2: manual scaling","cells":[{"id":0,"value":"$2b","pinned":false,"hidden":false,"mode":"ojs"},{"id":669,"value":"md`## Updated Sankey Steps`","pinned":false,"hidden":false,"mode":"ojs"},{"id":803,"value":"md`### 1. Select base graph data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2008,"value":"viewof chooseData = form(html`

\n \n Choose an example data set:\n

\n data1 (complex)\n data2 (simple)\n data3 (lots of circular links)\n data4 (Water cycle)\n data5 (WAPO)\n \n

\n`)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2002,"value":"graph1 = {\n let graph = {};\n\n switch (chooseData.dataset) {\n case \"data1\":\n graph = data1;\n break;\n case \"data2\":\n graph = data2;\n break;\n case \"data3\":\n graph = data3;\n break;\n\n case \"data4\":\n graph = data4;\n break;\n\n case \"data_wapo\":\n graph = data_wapo;\n break;\n\n default:\n graph = data1;\n }\n\n (graph.x0 = sankeyExtent.x0),\n (graph.y0 = sankeyExtent.y0),\n (graph.x1 = sankeyExtent.x1),\n (graph.y1 = sankeyExtent.y1),\n (graph.py = 0);\n\n return graph;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1404,"value":"md`### 8. Manually set the Sankey size\n\nThe function will look to use d3.scaleLinear to set the size of the nodes and widths, and also set the area available for circular links, if the user has specified that the sankey will be sized manually.\n\nIf the user selects to not size the sankey manually, then function automaticlly readjusts sankeyCircular size if circular links are needed, and node x coordinates.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2223,"value":"useManualScale = sankeyParameters.manualScale","pinned":false,"hidden":false,"mode":"ojs"},{"id":2300,"value":"md`Get the max value of the nodes to use in the scaleLinear:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2214,"value":"maxValue = d3.max(graph7.nodes, d => d.value)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2304,"value":"md`If the user has selected useManualScale = true, then we need to set the maximum height of the node, and portion of the chart area to use for circular links:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2218,"value":"maxHeight = sankeyParameters.maxNodeWidth","pinned":false,"hidden":false,"mode":"ojs"},{"id":2226,"value":"circularLinkPortionTopBottom = sankeyParameters.circularLinkPortionTopBottom /\n 100","pinned":false,"hidden":false,"mode":"ojs"},{"id":2258,"value":"circularLinkPortionLeftRight = sankeyParameters.circularLinkPortionLeftRight /\n 100","pinned":false,"hidden":false,"mode":"ojs"},{"id":2305,"value":"md`Create the yScale, and the adjust the sankey size and set the size of the links:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2208,"value":"yScale = d3\n .scaleLinear()\n .domain([0, maxValue])\n .range([0, maxHeight])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1400,"value":"$2c","pinned":false,"hidden":false,"mode":"ojs"},{"id":1413,"value":"graph8 = adjustSankeySize(graph7)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2082,"value":"md` ## Final graph\n\nAfter the remaining steps are applied, here is the final chart. You can adjust the size of nodes, links and padding using the form below.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1682,"value":"drawSankey(graph12)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2027,"value":"md`#### Parameters`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2031,"value":"$2d","pinned":false,"hidden":false,"mode":"ojs"},{"id":1916,"value":"viewof virtualLinkType = select({\n title: \"Choose link type for long links:\",\n description:\n \"Choose whether to use just the virtual paths for long links, or just bezier curves, or a mixture of both, which are chosen based whether the bezier can be drawn without overlapping other nodes.\",\n options: [\"both\", \"bezier\", \"virtual\"],\n value: \"both\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2320,"value":"md`## Other steps in the process\n\nThese steps are unchanged from the previous notebook.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":810,"value":"md`### 2. Compute node links\n\nAssociate the nodes with their respective links, and vice versa.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":866,"value":"// Populate the sourceLinks and targetLinks for each node.\n// Also, if the source and target are not objects, assume they are indices.\nfunction computeNodeLinks(inputGraph) {\n let graph = clone(inputGraph);\n\n graph.nodes.forEach(function (node, i) {\n node.index = i;\n node.sourceLinks = [];\n node.targetLinks = [];\n });\n var nodeById = d3.map(graph.nodes, id);\n\n graph.links.forEach(function (link, i) {\n link.index = i;\n var source = link.source;\n var target = link.target;\n if (\n (typeof source === \"undefined\" ? \"undefined\" : _typeof(source)) !==\n \"object\"\n ) {\n source = link.source = find(nodeById, source);\n }\n if (\n (typeof target === \"undefined\" ? \"undefined\" : _typeof(target)) !==\n \"object\"\n ) {\n target = link.target = find(nodeById, target);\n }\n source.sourceLinks.push(link);\n target.targetLinks.push(link);\n });\n return graph;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1126,"value":"graph2 = computeNodeLinks(graph1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":811,"value":"md`### 3. Identify circular links\n\nDetermine which links result in a circular path in the graph.\n\nIf sortNodes is defined, then use the sort order of nodes to determine which links travel backwards in the graph.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":878,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs"},{"id":1153,"value":"graph3 = identifyCircles(graph2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1635,"value":"circularLinks = graph3.links.filter(function(link) {\n return link.circular;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":817,"value":"md`### 4. Select circular link types\n\nDetermine how the circular links will be drawn, either travelling back above the main chart (\"top\") or below the main chart (\"bottom\").`","pinned":false,"hidden":false,"mode":"ojs"},{"id":889,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":1157,"value":"graph4 = selectCircularLinkTypes(graph3)","pinned":false,"hidden":false,"mode":"ojs"},{"id":813,"value":"md`### 5. Compute node values and circular type\n\nSum the values of the links per node, and assign the circular type based on any circular links to/from the node.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":882,"value":"// Compute the value (size) and cycleness of each node by summing the associated links.\nfunction computeNodeValues(inputGraph) {\n let graph = clone(inputGraph);\n\n graph.nodes.forEach(function(node) {\n node.partOfCycle = false;\n node.value = Math.max(\n d3.sum(node.sourceLinks, value),\n d3.sum(node.targetLinks, value)\n );\n node.sourceLinks.forEach(function(link) {\n if (link.circular) {\n node.partOfCycle = true;\n node.circularLinkType = link.circularLinkType;\n }\n });\n node.targetLinks.forEach(function(link) {\n if (link.circular) {\n node.partOfCycle = true;\n node.circularLinkType = link.circularLinkType;\n }\n });\n });\n\n return graph;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1163,"value":"graph5 = computeNodeValues(graph4)","pinned":false,"hidden":false,"mode":"ojs"},{"id":815,"value":"md`### 6. Compute node depths\n\nCalculate the nodes' depth based on the incoming and outgoing links\n\nSets the nodes:\n- depth: the depth in the graph\n- column: the depth (0, 1, 2, etc), as is relates to visual position from left to right. If sortNodes is defined, then use the sort order of nodes to determine the column.\n- x0, x1: the x coordinates, as is relates to visual position from left to right`","pinned":false,"hidden":false,"mode":"ojs"},{"id":886,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1167,"value":"graph6 = computeNodeDepths(graph5)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1349,"value":"md`### 7. Add virtual nodes for longer links\n\nIf a link spans more than one column, then add virtual nodes which it links through so that the links don't overlap with other nodes.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1952,"value":"viewof object = form(html`

\n`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1551,"value":"useVirtualRoutes = object.createVirtualNodes","pinned":false,"hidden":false,"mode":"ojs"},{"id":1351,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1353,"value":"graph7 = createVirtualNodes(graph6)","pinned":false,"hidden":false,"mode":"ojs"},{"id":819,"value":"md`### 9. Compute node and link breadths\n\nCalculate the nodes' and links' vertical position within their respective column.\n\nAlso, if possible the virtual nodes and links so that they will create nice looking links.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":940,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1205,"value":"graph9a = computeNodeBreadths(graph8)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1267,"value":"drawSankey(graph9a)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1453,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1458,"value":"graph9b = resolveCollisionsAndRelax(graph9a)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1460,"value":"drawSankey(graph9b)","pinned":true,"hidden":false,"mode":"ojs"},{"id":970,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1207,"value":"graph9c = addCircularPathData(computeLinkBreadths(graph9b))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1265,"value":"drawSankey(graph9c)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1715,"value":"function straigtenVirtualNodes(inputGraph) {\n let graph = clone(inputGraph);\n\n graph.nodes.forEach(function(node) {\n if (node.virtual) {\n let nodeHeight = node.y1 - node.y0;\n let dy = 0;\n\n //if the node is linked to another virtual node, get the difference in y\n //select the node which precedes it first, else get the node after it\n if (node.targetLinks[0].source.virtual) {\n dy = node.targetLinks[0].source.y0 - node.y0;\n } else if (node.sourceLinks[0].target.virtual) {\n dy = node.sourceLinks[0].target.y0 - node.y0;\n }\n\n node.y0 = node.y0 + dy;\n node.y1 = node.y1 + dy;\n\n node.targetLinks.forEach(function(l) {\n l.y1 = l.y1 + dy;\n });\n\n node.sourceLinks.forEach(function(l) {\n l.y0 = l.y0 + dy;\n });\n }\n });\n\n return graph;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1716,"value":"graph9d = addCircularPathData(straigtenVirtualNodes(graph9c))","pinned":true,"hidden":false,"mode":"ojs"},{"id":2325,"value":"drawSankey(graph9d)","pinned":true,"hidden":false,"mode":"ojs"},{"id":821,"value":"md`### 10. Sort links\n\nSort links per node, based on the links' source/target nodes' breadths.\n\nThis step used to adjust nodes that overlap links that span 2+ columns, but the virtual links/nodes makes this step unecessary.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":976,"value":"linkSortingIterations = 5 //Possibly let user control this number, like the iterations over node placement","pinned":false,"hidden":false,"mode":"ojs"},{"id":1217,"value":"function sortLinks(inputGraph) {\n let g = clone(inputGraph);\n\n for (var iteration = 0; iteration < linkSortingIterations; iteration++) {\n g = sortSourceLinks(g);\n g = sortTargetLinks(g);\n g = resolveNodeLinkOverlaps(g);\n }\n\n return g;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1062,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1373,"value":"graph10a = addCircularPathData(sortSourceLinks(graph9d))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1375,"value":"drawSankey(graph10a)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1066,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1378,"value":"graph10b = addCircularPathData(sortTargetLinks(graph10a))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1381,"value":"drawSankey(graph10b)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1054,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":1293,"value":"graph10c = addCircularPathData(resolveNodeLinkOverlaps(graph10b))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1320,"value":"drawSankey(graph10c)","pinned":true,"hidden":false,"mode":"ojs"},{"id":851,"value":"md`### 11. Fill chart height\n\nAdjust node and link positions back to fill height of chart area if compressed`","pinned":false,"hidden":false,"mode":"ojs"},{"id":898,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":1229,"value":"graph11 = addCircularPathData(fillHeight(graph10c))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1232,"value":"drawSankey(graph11)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1653,"value":"md`### 12. Replace virtual links and nodes\n\nReinstate the links that were replaced by virtual links and nodes, creating the path d string using the positions of the virtual nodes. Then delete the virtual elements from the graph.\n\nSometimes the bezier curves from source to target node are fine (and probably better looking) as compared to the virtual paths. The function addVirtualPathData does check if a bezier can be drawn without overlapping other nodes, but where the virtual link overlaps nodes from other virtual links, then we may keep in the virtual path. The \\`\\`alwaysUseBezierForVirtual\\`\\` allows you to override the function.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1644,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":1659,"value":"graph12 = addVirtualPathData(graph11)","pinned":true,"hidden":false,"mode":"ojs"},{"id":724,"value":"md`## Sankey common functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1039,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":1044,"value":"// creates vertical buffer values per set of top/bottom links\nfunction calcVerticalBuffer(links) {\n links.sort(sortLinkColumnAscending);\n links.forEach(function(link, i) {\n var buffer = 0;\n\n if (selfLinking(link, id) && onlyCircularLink(link)) {\n link.circularPathData.verticalBuffer = buffer + link.width / 2;\n } else {\n var j = 0;\n for (j; j < i; j++) {\n if (circularLinksCross(links[i], links[j])) {\n var bufferOverThisLink =\n links[j].circularPathData.verticalBuffer +\n links[j].width / 2 +\n circularLinkGap;\n buffer = bufferOverThisLink > buffer ? bufferOverThisLink : buffer;\n }\n }\n\n link.circularPathData.verticalBuffer = buffer + link.width / 2;\n }\n });\n\n return links;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1047,"value":"// sort links based on the distance between the source and tartget node columns\n// if the same, then use Y position of the source node\nfunction sortLinkColumnAscending(link1, link2) {\n if (linkColumnDistance(link1) == linkColumnDistance(link2)) {\n return link1.circularLinkType == 'bottom'\n ? sortLinkSourceYDescending(link1, link2)\n : sortLinkSourceYAscending(link1, link2);\n } else {\n return linkColumnDistance(link2) - linkColumnDistance(link1);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1050,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":1747,"value":"function getNodePadding(node) {\n return node.virtual ? virtualNodePadding : nodePadding;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":788,"value":"// Return the default value for ID for node, d.index\nfunction defaultId(d) {\n return d.index;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":800,"value":"function getNodeID(node, id) {\n return id(node);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":757,"value":"// returns a function, using the parameter given to the sankey setting\nfunction constant(x) {\n return function() {\n return x;\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":734,"value":"// For a given link, return the target node's depth\nfunction targetDepth(d) {\n return d.target.depth;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":731,"value":"function value(d) {\n return d.virtual ? 0 : d.value;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":737,"value":"// return the vertical center of a node\nfunction nodeCenter(node) {\n return (node.y0 + node.y1) / 2;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":741,"value":"// The depth of a node when the nodeAlign (align) is set to 'left'\nfunction left(node) {\n return node.depth;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":746,"value":"// The depth of a node when the nodeAlign (align) is set to 'right'\n function right(node, n) {\n return n - 1 - node.height;\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":749,"value":"// The depth of a node when the nodeAlign (align) is set to 'justify'\n function justify(node, n) {\n return node.sourceLinks.length ? node.depth : n - 1;\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":744,"value":"// The depth of a node when the nodeAlign (align) is set to 'center'\nfunction center(node) {\n return node.targetLinks.length\n ? node.depth\n : node.sourceLinks.length\n ? d3.min(node.sourceLinks, targetDepth) - 1\n : 0;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":763,"value":"// sort links' breadth (ie top to bottom in a column), based on their source nodes' breadths\nfunction ascendingSourceBreadth(a, b) {\n return ascendingBreadth(a.source, b.source) || a.index - b.index;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":765,"value":"// sort links' breadth (ie top to bottom in a column), based on their target nodes' breadths\n function ascendingTargetBreadth(a, b) {\n return ascendingBreadth(a.target, b.target) || a.index - b.index;\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":768,"value":"// sort nodes' breadth (ie top to bottom in a column)\n// if both nodes have circular links, or both don't have circular links, then sort by the top (y0) of the node\n// else push nodes that have top circular links to the top, and nodes that have bottom circular links to the bottom\nfunction ascendingBreadth(a, b) {\n if (a.partOfCycle === b.partOfCycle) {\n return a.y0 - b.y0;\n } else {\n if (a.circularLinkType === 'top' || b.circularLinkType === 'bottom') {\n return -1;\n } else {\n return 1;\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":782,"value":"// return the vertical center of a link's source node\nfunction linkSourceCenter(link) {\n return nodeCenter(link.source);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":784,"value":"// return the vertical center of a link's target node\nfunction linkTargetCenter(link) {\n return nodeCenter(link.target);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":797,"value":"// Return the node from the collection that matches the provided ID, or throw an error if no match\nfunction find(nodeById, id) {\n var node = nodeById.get(id);\n if (!node) throw new Error('missing: ' + id);\n return node;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":754,"value":"findCircuits = ecdg && ecdg.hasOwnProperty('default') ? ecdg['default'] : ecdg","pinned":false,"hidden":false,"mode":"ojs"},{"id":760,"value":"_typeof = typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\"\n ? function(obj) {\n return typeof obj;\n }\n : function(obj) {\n return obj &&\n typeof Symbol === \"function\" &&\n obj.constructor === Symbol &&\n obj !== Symbol.prototype\n ? \"symbol\"\n : typeof obj;\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":791,"value":"// Return the default object the graph's nodes, graph.nodes\nfunction defaultNodes(graph) {\n return graph.nodes;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":793,"value":"// Return the default object the graph's nodes, graph.links\nfunction defaultLinks(graph) {\n return graph.links;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":892,"value":"// returns the slope of a link, from source to target\n// up => slopes up from source to target\n// down => slopes down from source to target\nfunction incline(link) {\n return link.y0 - link.y1 > 0 ? 'up' : 'down';\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":895,"value":"// check if link is self linking, ie links a node to the same node\nfunction selfLinking(link, id) {\n return getNodeID(link.source, id) == getNodeID(link.target, id);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":902,"value":"// test if links both slope up, or both slope down\nfunction sameInclines(link1, link2) {\n return incline(link1) == incline(link2);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":959,"value":"// Return the angle between a straight line between the source and target of the link, and the vertical plane of the node\nfunction linkAngle(link) {\n var adjacent = Math.abs(link.y1 - link.y0);\n var opposite = Math.abs(link.target.x0 - link.source.x1);\n\n return Math.atan(opposite / adjacent);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":962,"value":"// Return the number of circular links for node, not including self linking links\nfunction numberOfNonSelfLinkingCycles(node, id) {\n var sourceCount = 0;\n node.sourceLinks.forEach(function(l) {\n sourceCount =\n l.circular && !selfLinking(l, id) ? sourceCount + 1 : sourceCount;\n });\n\n var targetCount = 0;\n node.targetLinks.forEach(function(l) {\n targetCount =\n l.circular && !selfLinking(l, id) ? targetCount + 1 : targetCount;\n });\n\n return sourceCount + targetCount;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":983,"value":"// Check if two circular links potentially overlap\nfunction circularLinksCross(link1, link2) {\n if (link1.source.column < link2.target.column) {\n return false;\n } else if (link1.target.column > link2.source.column) {\n return false;\n } else {\n return true;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":987,"value":"function adjustNodeHeight(node, dy, sankeyY0, sankeyY1) {\n if (node.y0 + dy >= sankeyY0 && node.y1 + dy <= sankeyY1) {\n node.y0 = node.y0 + dy;\n node.y1 = node.y1 + dy;\n\n node.targetLinks.forEach(function(l) {\n l.y1 = l.y1 + dy;\n });\n\n node.sourceLinks.forEach(function(l) {\n l.y0 = l.y0 + dy;\n });\n }\n return node;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":990,"value":"// check if two nodes overlap\nfunction nodesOverlap(nodeA, nodeB) {\n // test if nodeA top partially overlaps nodeB\n if (nodeA.y0 > nodeB.y0 && nodeA.y0 < nodeB.y1) {\n return true;\n } else if (nodeA.y1 > nodeB.y0 && nodeA.y1 < nodeB.y1) {\n // test if nodeA bottom partially overlaps nodeB\n return true;\n } else if (nodeA.y0 < nodeB.y0 && nodeA.y1 > nodeB.y1) {\n // test if nodeA covers nodeB\n return true;\n } else {\n return false;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1001,"value":"function sortLinkSourceYAscending(link1, link2) {\n return link1.y0 - link2.y0;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1006,"value":"// sort descending links by their source vertical position, y0\n function sortLinkSourceYDescending(link1, link2) {\n return link2.y0 - link1.y0;\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":1009,"value":" // sort ascending links by their target vertical position, y1\n function sortLinkTargetYAscending(link1, link2) {\n return link1.y1 - link2.y1;\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":1012,"value":" // sort descending links by their target vertical position, y1\n function sortLinkTargetYDescending(link1, link2) {\n return link2.y1 - link1.y1;\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":1015,"value":" // return the distance between the link's target and source node, in terms of the nodes' column\n function linkColumnDistance(link) {\n return link.target.column - link.source.column;\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":1004,"value":"// return the distance between the link's target and source node, in terms of the nodes' X coordinate\nfunction linkXLength(link) {\n return link.target.x0 - link.source.x1;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1027,"value":"// Return the Y coordinate on the longerLink path * which is perpendicular shorterLink's source.\n// * approx, based on a straight line from target to source, when in fact the path is a bezier\nfunction linkPerpendicularYToLinkTarget(longerLink, shorterLink) {\n // get the angle for the longer link\n var angle = linkAngle(longerLink);\n\n // get the adjacent length to the other link's x position\n var heightFromY1ToPependicular = linkXLength(shorterLink) / Math.tan(angle);\n\n // add or subtract from longer link's original y1, depending on the slope\n var yPerpendicular =\n incline(longerLink) == 'up'\n ? longerLink.y1 - heightFromY1ToPependicular\n : longerLink.y1 + heightFromY1ToPependicular;\n\n return yPerpendicular;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1030,"value":"// Return the Y coordinate on the longerLink path * which is perpendicular shorterLink's source.\n// * approx, based on a straight line from target to source, when in fact the path is a bezier\nfunction linkPerpendicularYToLinkSource(longerLink, shorterLink) {\n // get the angle for the longer link\n var angle = linkAngle(longerLink);\n\n // get the adjacent length to the other link's x position\n var heightFromY1ToPependicular = linkXLength(shorterLink) / Math.tan(angle);\n\n // add or subtract from longer link1's original y1, depending on the slope\n var yPerpendicular =\n incline(longerLink) == 'up'\n ? longerLink.y1 + heightFromY1ToPependicular\n : longerLink.y1 - heightFromY1ToPependicular;\n\n return yPerpendicular;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1035,"value":"// Check if a circular link is the only circular link for both its source and target node\nfunction onlyCircularLink(link) {\n var nodeSourceLinks = link.source.sourceLinks;\n var sourceCount = 0;\n nodeSourceLinks.forEach(function(l) {\n sourceCount = l.circular ? sourceCount + 1 : sourceCount;\n });\n\n var nodeTargetLinks = link.target.targetLinks;\n var targetCount = 0;\n nodeTargetLinks.forEach(function(l) {\n targetCount = l.circular ? targetCount + 1 : targetCount;\n });\n\n if (sourceCount > 1 || targetCount > 1) {\n return false;\n } else {\n return true;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":678,"value":"md`## Sankey parameters`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1388,"value":"setNodePositions = false","pinned":false,"hidden":false,"mode":"ojs"},{"id":685,"value":"circularLinkGap = sankeyParameters.circularLinkGap","pinned":false,"hidden":false,"mode":"ojs"},{"id":870,"value":"id = function(d) {\n return d.name;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":713,"value":"sankeyExtent = ({\n x0: chartPadding,\n y0: chartPadding,\n x1: chartWidth + chartPadding,\n y1: chartHeight + chartPadding\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":682,"value":"nodePadding = sankeyParameters.nodePadding //ideal padding","pinned":false,"hidden":false,"mode":"ojs"},{"id":2150,"value":"minNodePadding = nodePadding //in case nodePadding is too wide, then resolve overlaps using the min","pinned":false,"hidden":false,"mode":"ojs"},{"id":1745,"value":"virtualNodePadding = 7","pinned":false,"hidden":false,"mode":"ojs"},{"id":707,"value":"paddingRatio = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":680,"value":"align = {\n if (sankeyParameters.align == \"left\") {\n return left;\n } else if (sankeyParameters.align == \"right\") {\n return right;\n } else if (sankeyParameters.align == \"center\") {\n return center;\n } else {\n return justify;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":704,"value":"iterations = 10","pinned":false,"hidden":false,"mode":"ojs"},{"id":709,"value":"sortNodes = sankeyParameters.sortNodes\n ? function(node) {\n return node.sort;\n }\n : null","pinned":false,"hidden":false,"mode":"ojs"},{"id":772,"value":"verticalMargin = 25","pinned":false,"hidden":false,"mode":"ojs"},{"id":777,"value":"scale = 0.3 //Possibly let user control this, although anything over 0.5 starts to get too cramped","pinned":false,"hidden":false,"mode":"ojs"},{"id":774,"value":"baseRadius = 10;","pinned":false,"hidden":false,"mode":"ojs"},{"id":1198,"value":"nodeWidth = sankeyParameters.nodeWidth // was named dx","pinned":false,"hidden":false,"mode":"ojs"},{"id":2184,"value":"function nodeWidthFunction(node) {\n /*let w = node.sort + 5;\n return isNaN(w) ? nodeWidth : w;*/\n return nodeWidth;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1122,"value":"nodeColour = d3 //d3.scaleSequential(d3.interpolateCool).domain([0, chartWidth])\n .scaleOrdinal()\n .domain([\n \"United States\",\n \"Kuwait\",\n \"Oman\",\n \"Russia\",\n \"United Arab Emirates\",\n \"Saudi Arabia\",\n \"India\"\n ])\n .range([\n \"Coral\",\n \"DarkSlateBlue\",\n \"ForestGreen\",\n \"SaddleBrown\",\n \"Brown\",\n \"DarkMagenta\",\n \"CornflowerBlue\"\n ])\n .unknown(\"BurlyWood\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1792,"value":"md`## Drawing functions and settings`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1098,"value":"$3c","pinned":true,"hidden":false,"mode":"ojs"},{"id":1809,"value":"drawArrows = sankeyParameters.showArrows","pinned":false,"hidden":false,"mode":"ojs"},{"id":1824,"value":"arrowColour = \"DarkSlateGrey\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1796,"value":"arrowLength = 10","pinned":false,"hidden":false,"mode":"ojs"},{"id":1798,"value":"gapLength = 70","pinned":false,"hidden":false,"mode":"ojs"},{"id":1803,"value":"arrowHeadSize = 4","pinned":false,"hidden":false,"mode":"ojs"},{"id":1804,"value":"arrowPath = function(link) {\n return link.path;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"md`## Dimensions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"svgWidth = d3.min([width, 1000])","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"svgHeight = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"chartPadding = 25","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":132,"value":"md`## JS libraries and functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"d3 = require(\"d3@5\", \"d3-array@1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":656,"value":"ecdg = require('https://bundle.run/elementary-circuits-directed-graph@1.2.0')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1135,"value":"clone = require('https://bundle.run/clone@2.1.2')","pinned":false,"hidden":false,"mode":"ojs"},{"id":2054,"value":"md`## Datasets`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1085,"value":"inputNodes = [\n { name: \"startA\" },\n { name: \"startB\" },\n { name: \"process1\" },\n { name: \"process2\" },\n { name: \"process3\" },\n { name: \"process4\" },\n { name: \"process5\" },\n { name: \"process6\" },\n { name: \"process7\" },\n { name: \"process8\" },\n { name: \"process9\" },\n { name: \"process10\" },\n { name: \"process11\" },\n { name: \"process12\" },\n { name: \"process13\" },\n { name: \"process14\" },\n { name: \"process15\" },\n { name: \"process16\" },\n { name: \"finishA\" },\n { name: \"finishB\" }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1086,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs"},{"id":2328,"value":"data_wapo = {\n const links = await FileAttachment(\"wapo.csv\").csv({ typed: true });\n const nodes = Array.from(\n new Set(links.flatMap(l => [l.source, l.target])),\n name => ({ name, category: name.replace(/ .*/, \"\") })\n );\n return { nodes, links, units: \"$bn\" };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1093,"value":"data1 = ({\n nodes: inputNodes,\n links: inputLinks\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1519,"value":"data2 = ({\n nodes: [\n { name: \"start\", sort: 2 },\n { name: \"middle\", sort: 1 },\n { name: \"middle2\", sort: 6 },\n { name: \"end\", sort: 0 }\n ],\n links: [\n { source: \"start\", target: \"middle\", value: 10 },\n { source: \"middle\", target: \"end\", value: 10 },\n { source: \"middle\", target: \"middle2\", value: 5 },\n { source: \"middle2\", target: \"end\", value: 10 },\n { source: \"start\", target: \"end\", value: 10 }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1862,"value":"data3 = ({\n nodes: [\n { name: \"node0\" },\n { name: \"node1\" },\n { name: \"node2\" },\n { name: \"node3\" },\n { name: \"node4\" },\n { name: \"node5\" },\n { name: \"node6\" }\n ],\n links: [\n { source: \"node0\", value: 1686813, target: \"node1\" },\n { source: \"node2\", value: 1083523, target: \"node1\" },\n { source: \"node3\", value: 1285005, target: \"node1\" },\n { source: \"node4\", value: 1485331, target: \"node1\" },\n { source: \"node0\", value: 63398, target: \"node2\" },\n { source: \"node1\", value: 63398, target: \"node2\" },\n { source: \"node0\", value: 618423, target: \"node3\" },\n { source: \"node1\", value: 502228, target: \"node3\" },\n { source: \"node1\", value: 1166311, target: \"node4\" },\n { source: \"node5\", value: 794704, target: \"node4\" },\n { source: \"node0\", value: 1166311, target: \"node4\" },\n { source: \"node3\", value: 794704, target: \"node4\" },\n { source: \"node6\", value: 794704, target: \"node4\" }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2108,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs"},{"id":1941,"value":"md`## Form input`","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs"},{"id":495,"value":"$40","pinned":false,"hidden":false,"mode":"ojs"},{"id":270,"value":"$41","pinned":false,"hidden":false,"mode":"ojs"},{"id":1947,"value":"import { form } from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W42","stdlib":"1","titling":"auto"}