32:T673,basicChart = { let graph = clone(graph1); const svg = d3 .create("svg") .attr("width", svgWidth) .attr("height", svgHeight); let backgroundRect = svg .append('rect') .attr("x", 0) .attr("y", 0) .attr("width", svgWidth) .attr("height", svgWidth) .style("fill", bkdColour); let g = svg .append("g") .attr("transform", "translate(" + chartPadding + "," + chartPadding + ")"); let rects = g .selectAll("rect") .data(graph.nodes) .join("rect") .attr("x", d => d.x0) .attr("y", d => d.y0) .attr("height", nodeHeight) .attr("width", nodeWidth) .style("stroke", bkdColour) .style("fill", mainColour); const link = g .append("g") .selectAll("g") .data(graph.links) .join("g") .append("path") .attr("fill", function(d) { return "none"; }) .style("opacity", 0.5) .attr("stroke-width", function(d) { return d.width; }) .style("stroke", mainColour) .attr("d", d3.sankeyLinkHorizontal()); let labels = g .append("g") .attr("font-family", "sans-serif") .attr("font-size", 10) .selectAll("text") .data(graph.nodes) .join("text") .attr("x", function(d) { if (d.exit == "top" || d.exit == "bottom") { d.cx = d.x0 + (d.x1 - d.x0) / 2; } else { d.cx = d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6; } return d.cx; }) .attr("y", function(d) { d.cy = (d.y1 + d.y0) / 2; return d.cy; }) .attr("dy", "0.35em") .attr("text-anchor", d => (d.x0 < width / 2 ? "start" : "end")) .text(d => d.name); return svg.node(); }33:Tad3,function recalculateNodeCoordinates(inputGraph) { let graph = clone(inputGraph); let throughLineY = 0; let firstThroughLine = true; let maxHeight = d3.max(graph.nodes, d => d.height); let maxDepth = d3.max(graph.nodes, d => d.depth); graph.nodes.forEach(function(node) { if ( ((node.sourceLinks.length > 0 && node.targetLinks.length > 0) || node.depth == maxDepth) && node.depth >= throughlineStart ) { node.throughLine = true; if (firstThroughLine) { firstThroughLine = false; node.targetLinks.forEach(function(link) { if (link.source.targetLinks.length > 0) { updateNodeY(node, link.y0 - link.y1); } }); } else { node.targetLinks.forEach(function(link) { if (link.source.throughLine) { let diff = link.y0 - link.y1; updateNodeY(node, link.y0 - link.y1); } }); } } if (node.sourceLinks.length == 0 && node.depth != maxDepth) { let columnWidth = node.x0 - node.targetLinks[0].source.x1; let yOffset = 0; if (node.top) { node.exit = "top"; yOffset = chartPadding + node.targetLinks[0].source.y0; } else { node.exit = "bottom"; let multiplier = node.targetLinks[0].source.y1 - (node.targetLinks[0].y0 + node.targetLinks[0].width / 2); let gap = multiplier * bottomGapX; yOffset = chartPadding + chartHeight - node.targetLinks[0].y0 - dx / 2 + gap; } node.x0 = node.x0 - columnWidth + yOffset; node.x1 = node.x0 + (node.y1 - node.y0); if (node.top) { node.y0 = -chartPadding; } else { node.y0 = chartHeight + chartPadding - dx; } node.y1 = node.y0 + dx; } if (node.targetLinks.length == 0 && node.height < maxHeight) { node.middleEntry = true; let diff = node.sourceLinks[0].target.y0 - chartPadding - node.y0; updateNodeY(node, diff); node.x0 = node.sourceLinks[0].target.x0 - chartPadding; node.x1 = node.x0 + (node.y1 - node.y0); node.y1 = node.y0 + dx; } node.cx = (node.x1 + node.x0) / 2; node.cy = (node.y1 + node.y0) / 2; if (node.middleEntry || node.top) { node.labelX = node.cx; node.labelY = node.y1 - 3; node.labelAlign = "start"; } else if (node.depth == 0) { node.labelX = node.cx; node.labelY = node.cy; node.labelAlign = "middle"; } else if (node.exit == "bottom") { node.labelX = node.cx; node.labelY = node.y0 + 3; node.labelAlign = "end"; } else { node.labelX = node.cx; node.labelY = node.y0 - 3; node.labelAlign = "start"; } }); return graph; }34:T81f,function calculatePathData(inputGraph) { let graph = clone(inputGraph); graph.links.forEach(function(link) { if (link.width >= largeValueThreshold) { link.large = true; link.target.large = true; } if (link.target.exit == "top") { link.x1 = link.target.x0 + link.width / 2; link.y1 = dx - chartPadding; link.path = "M " + link.source.x1 + " " + link.source.y0 + " " + "Q " + link.target.x0 + " " + link.source.y0 + " " + link.target.x0 + " " + link.y1 + " " + "L " + (link.target.x0 + link.width) + " " + link.y1 + " " + "Q " + (link.target.x0 + link.width) + " " + (link.y0 + link.width / 2) + " " + link.source.x1 + " " + (link.y0 + link.width / 2) + " " + link.source.x1 + " " + link.source.y1 + " z"; } else if (link.target.exit == "bottom") { link.x1 = link.target.x0 + link.width / 2; link.y1 = chartHeight + chartPadding - dx; let xLength = link.x1 - link.source.x1; let yLength = link.y1 - link.y0; let xLineLength = xLength - yLength; link.path = "M " + link.source.x1 + " " + link.y0 + " " + "L " + (link.source.x1 + xLineLength) + " " + link.y0 + " " + "Q " + link.x1 + " " + link.y0 + " " + link.x1 + " " + link.y1; } else if (link.source.middleEntry) { link.x0 = link.source.x0 + link.width / 2; link.y0 = link.source.y1; link.x1 = link.target.x0; link.path = "M " + link.x0 + " " + link.y0 + " " + "Q " + link.x0 + " " + link.y1 + " " + link.x1 + " " + link.y1; } else { link.path = sankeyLink(link); } }); return graph; }35:Td1b,chart = { let graph = clone(graph3); const svg = d3 .create("svg") .attr("width", svgWidth) .attr("height", svgHeight); let backgroundRect = svg .append('rect') .attr("x", 0) .attr("y", 0) .attr("width", svgWidth) .attr("height", svgWidth) .style("fill", bkdColour); let defs = svg.append("defs"); let hash = defs .append("pattern") .attr("id", "hash") .attr("width", 6) .attr("height", 8) .attr("patternUnits", "userSpaceOnUse") .attr("patternTransform", "rotate(135)"); hash .append("rect") .attr("width", 3) .attr("height", 8) .attr("fill", mainColour); let gradientStart = defs .append("linearGradient") .attr("id", "linearStart") .attr("x1", 0) .attr("y1", 0) .attr("x2", "100%") .attr("y2", 0); let gradientBottom = defs .append("linearGradient") .attr("id", "linearBottom") .attr("x1", 0) .attr("y1", 0) .attr("x2", 0) .attr("y2", "100%"); let gradientMiddle = defs .append("linearGradient") .attr("id", "linearMiddle") .attr("x1", 0) .attr("y1", 0) .attr("x2", 0) .attr("y2", "100%"); gradientStart .append("stop") .attr("offset", "0%") .attr("stop-color", bkdColour); gradientStart .append("stop") .attr("offset", "100%") .attr("stop-color", mainColour); gradientBottom .append("stop") .attr("offset", "0%") .attr("stop-color", mainColour); gradientBottom .append("stop") .attr("offset", "50%") .attr("stop-color", mainColour); gradientBottom .append("stop") .attr("offset", "100%") .attr("stop-color", bkdColour); gradientMiddle .append("stop") .attr("offset", "0%") .attr("stop-color", bkdColour); gradientMiddle .append("stop") .attr("offset", "50%") .attr("stop-color", mainColour); gradientMiddle .append("stop") .attr("offset", "100%") .attr("stop-color", mainColour); let g = svg .append("g") .attr("transform", "translate(" + chartPadding + "," + chartPadding + ")"); let rects = g .selectAll("rect") .data(graph.nodes) .join("rect") .attr("x", d => d.x0) .attr("y", d => d.y0) .attr("height", nodeHeight) .attr("width", nodeWidth) .style("stroke", bkdColour) .style("fill", nodeFill); const link = g .append("g") .selectAll("g") .data(graph.links) .join("g") .append("path") .attr("fill", linkFill) .attr("stroke-width", linkStrokeWidth) .style("stroke", linkStroke) .attr("d", d => d.path); let labels = g .append("g") .attr("font-family", "sans-serif") .attr("font-size", 10) .selectAll("text") .data(graph.nodes) .join("text") .attr("x", d => d.labelX) .attr("y", d => d.labelY) .attr("text-anchor", d => d.labelAlign) .text(d => d.name); if (rotate) { svg.attr("width", svgHeight).attr("height", svgWidth); labels .attr("transform", function(d) { return "rotate(270, " + d.labelX + ", " + d.labelY + ")"; }) .attr("dy", "0.35em"); let cx = chartHeight / 2 + chartPadding / 2; let cy = chartHeight / 2 + chartPadding / 2; g.attr( "transform", "translate(0, " + chartPadding + ") rotate(90, " + cx + ", " + cy + " )" ); } return svg.node(); }36:[] 30:{"title":"Vertical sankey with elegant links to entry and exit nodes","cells":[{"id":0,"value":"md`# Vertical sankey with elegant links to entry and exit nodes\n\nI saw this tweet from [Nadieh Bremer](https://twitter.com/nadiehbremer), and it piqued my sankey interest. I really like how the nodes which start or end part-way through the graph are positioned to the sides.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1234,"value":"tweet(\"1100791165769502720\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1361,"value":"md`Here I try to create what those \"changes\" might have been, building on the graph data generated by [d3-sankey](https://github.com/d3/d3-sankey), and to create something that could be reusable.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1201,"value":"toc(\"h2, h3\", \"Contents\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":994,"value":"md`## Steps`","pinned":false,"hidden":false,"mode":"ojs"},{"id":997,"value":"md`### 1. Create sankey data using standard D3 libary\n\nThe basic sankey is created using the centre alignment, so that nodes that do not have incoming or outgoing links part-way through the chart are not positioned to the left or right.\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1044,"value":"align = d3.sankeyCenter","pinned":true,"hidden":false,"mode":"ojs"},{"id":1335,"value":"md`Secondly, a custom sort is used to position the links so they are top or bottom of their respective node for nice entry/exit.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1037,"value":"// If the result is negative a is sorted before b.\n// If the result is positive b is sorted before a.\n\nfunction sortLinks(a, b) {\n if (a.target.top) {\n return -1;\n } else if (b.target.top) {\n return 1;\n } else if (\n a.target.sourceLinks.length == 0 &&\n b.target.sourceLinks.length > 0\n ) {\n return 1;\n } else if (\n b.target.sourceLinks.length == 0 &&\n a.target.sourceLinks.length > 0\n ) {\n return -1;\n } else if (\n a.source.targetLinks.length == 0 &&\n b.source.targetLinks.length > 0\n ) {\n return -1;\n } else if (\n b.source.targetLinks.length == 0 &&\n a.source.targetLinks.length > 0\n ) {\n return 1;\n } else {\n return b.value - a.value;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":235,"value":"nodes = [\n { name: \"0a\" },\n { name: \"0b\" },\n { name: \"0c\" },\n { name: \"0d\" },\n { name: \"1\" },\n { name: \"2a\" },\n { name: \"2\", top: true },\n { name: \"3\" },\n { name: \"3a\" },\n { name: \"4a\" },\n { name: \"4b\" },\n { name: \"4c\" },\n { name: \"4d\" },\n { name: \"5\" },\n { name: \"5a\" },\n { name: \"6a\" },\n { name: \"6b\" },\n { name: \"7\" },\n { name: \"8\" },\n { name: \"8a\" },\n { name: \"9\" },\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":659,"value":"links = [\n { source: \"0a\", target: \"1\", value: 25 },\n { source: \"0b\", target: \"1\", value: 83 },\n { source: \"0c\", target: \"1\", value: 23 },\n { source: \"0d\", target: \"1\", value: 2 },\n { source: \"1\", target: \"2\", value: 100 },\n { source: \"1\", target: \"2a\", value: 3 },\n { source: \"1\", target: \"3\", value: 30 },\n { source: \"3\", target: \"4a\", value: 2 },\n { source: \"3\", target: \"4b\", value: 3 },\n { source: \"3\", target: \"4c\", value: 5 },\n { source: \"3\", target: \"4d\", value: 5 },\n { source: \"3\", target: \"5\", value: 15 },\n { source: \"3a\", target: \"5\", value: 2 },\n { source: \"5\", target: \"6a\", value: 4 },\n { source: \"5\", target: \"6b\", value: 3 },\n { source: \"5\", target: \"7\", value: 10 },\n { source: \"5a\", target: \"7\", value: 1 },\n { source: \"7\", target: \"8\", value: 10 },\n { source: \"7\", target: \"8a\", value: 1 },\n { source: \"8\", target: \"9\", value: 10 }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":671,"value":"data = ({ nodes: nodes, links: links })","pinned":false,"hidden":false,"mode":"ojs"},{"id":989,"value":"graph1 = sankey(data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1241,"value":"md` Here is the basic sankey generated using the data returned by d3-sankey:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1119,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":998,"value":"md`### 2. Identify entry, exit and throughline nodes\n\nIn Nadieh's example, those nodes are which do not have further links are positioned to the sides of the main chart. Also, those nodes which start part way through the chart are positioned.\n\nI needed to manually state where in the chart I should straigtening the links for nodes which contain the main part through the graph:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":830,"value":"throughlineStart = 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":1342,"value":"md` Then I set a padding for those nodes which are exits.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1085,"value":"bottomGapX = 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":1257,"value":"function updateNodeY(node, dy) {\n node.y0 = node.y0 + dy;\n node.y1 = node.y1 + dy;\n node.sourceLinks.forEach(function(link) {\n link.y0 = link.y0 + dy;\n });\n node.targetLinks.forEach(function(link) {\n link.y1 = link.y1 + dy;\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1027,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1058,"value":"graph2 = recalculateNodeCoordinates(graph1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1188,"value":"md`### 3. Calculate link path data\n\nCreate path strings (\"d\" attribute) so that they curve nicely to the nodes that positioned to the sides. \n\nAlso, for very wide links, create an area path, as a normal path get kinks when they are too wide. The threshold of large links is set to:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1047,"value":"largeValueThreshold = 50","pinned":false,"hidden":false,"mode":"ojs"},{"id":1032,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1191,"value":"graph3 = calculatePathData(graph2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1016,"value":"md`### 4. Draw sankey\n\nThe final graph is drawn using \n* SVG linearGradient fills for links to exit nodes and nodes which start part-way through, and the links from the first nodes\n* SVG pattern fill for nodes that are not exit nodes, except for the last node\n* The whole chart is rotated by 90 degrees, and SVG resized so that the width and height is swapped\n\nThe colour for the links and nodes can be chosen below, as well an option to remove the rotation.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":953,"value":"viewof mainColour = colorPicker(\"#f05d7b\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":956,"value":"viewof bkdColour = colorPicker(\"#edf3f5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":966,"value":"viewof sankeyParameters = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":929,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":984,"value":"md`## Sankey Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1100,"value":"function nodeHeight(node) {\n if (node.exit == \"top\" || node.exit == \"bottom\") {\n return dx;\n } else {\n return node.y1 - node.y0;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1094,"value":"function nodeFill(node) {\n if (node.exit == \"top\" || node.exit == \"bottom\" || node.depth == 0) {\n return \"none\";\n } else {\n return \"url(#hash)\";\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":893,"value":"function linkStroke(link) {\n if (link.source.middleEntry) {\n return \"url(#linearMiddle)\";\n } else if (link.source.depth == 0) {\n return \"url(#linearStart)\";\n } else if (link.target.exit == \"bottom\") {\n return \"url(#linearBottom)\";\n } else if (link.target.exit == \"top\") {\n return \"none\";\n } else {\n return mainColour;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1158,"value":"function linkFill(link) {\n return link.target.exit == \"top\" ? mainColour : \"none\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1162,"value":"function linkStrokeWidth(link) {\n return link.target.exit == \"top\" ? 0 : link.width;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1089,"value":"function nodeWidth(node) {\n if (node.exit == \"top\" || node.exit == \"bottom\") {\n return node.y1 - node.y0;\n } else {\n return dx;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":668,"value":"sankey = {\n const sankey = d3\n .sankey()\n .nodeId(d => d.name)\n .nodeAlign(align)\n .nodeWidth(dx)\n .nodePadding(10)\n .linkSort(sortLinks)\n .extent([[1, 5], [chartWidth - 1, chartHeight - 5]]);\n return ({ nodes, links }) =>\n sankey({\n nodes: nodes.map(d => Object.assign({}, d)),\n links: links.map(d => Object.assign({}, d))\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":739,"value":"sankeyLink = d3.sankeyLinkHorizontal()","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"md`## Dimensions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":870,"value":"rotate = sankeyParameters.rotate","pinned":false,"hidden":false,"mode":"ojs"},{"id":694,"value":"dx = 15","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"svgWidth = 1000","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"svgHeight = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"chartPadding = 75","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\", \"d3-sankey\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":270,"value":"import { form } from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":951,"value":"import { colorPicker } from \"@shaunlebron/color-picker\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":987,"value":"clone = require('https://bundle.run/clone@2.1.2')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1196,"value":"import { toc } from \"@tomshanley/indented-toc\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1230,"value":"import { tweet } from \"@mbostock/tweet\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}