31:T758,# Improved Sankey paths Paths are a key visual element in Sankey diagrams. Sankey diagrams can be seen as a particular way of representing graphs representing flow between entities of a given process, such as the production and consumption of different kinds of energies in the energy matrix of a country. Thus, the entities are nodes in the graphs, typically drawn as rectangles, whereas paths are edges of the graph, typically represented as cubic Bézier curves with thickness proportional to the amount of flow. There is, however, a problem when a thick path curve must bridge two nodes that are too close to each other in the direction of the flow but too distant in the direction perpendicular to the flow. In this case, the algorithm to draw thick Bézier curves may result in severe visual artifacts. Moreover, if there are several _parallel_ paths linking the same source and target nodes, these will very likely overlap each other. In this notebook we propose another method to draw these thick paths that takes into consideration these peculiarities. The idea is to use two separate Bézier curves delimiting each side of the path and estimate the control points of each curve taking into account the geometry of the separation between the nodes. In rough lines, the algorithm is the following: 1. A line segment perpendicular to the line between the two nodes is computed. 2. The length of this line segment is equal to the breadth of the path. 3. The two endpoints of this line segment are used for computing the two middle control points of each curve. Two other parameters are also supported: _bias_, which can be used to increase or reduce the distance between the middle control points from the end control points; and _limit_, which can be used to ensure that these distances are non-zero. The following demo allows you to play with these parameters.32:Ta34,test_path = { const test_link = vertical ? { source: [(xsep > 0 ? xsep : 0) + path_size / 2, ysep > 0 ? ysep : 0], target: [(xsep < 0 ? -xsep : 0) + path_size / 2, ysep < 0 ? -ysep : 0] } : { source: [xsep < 0 ? -xsep : 0, (ysep > 0 ? ysep : 0) + path_size / 2], target: [xsep > 0 ? xsep : 0, (ysep < 0 ? -ysep : 0) + path_size / 2] }; let sizes = []; for (let i = 0; i < path_count; i++) { sizes.push(path_size / path_count); } Object.assign(test_link, { sizes, bias, limit }); let w = Math.abs(xsep); let h = Math.abs(ysep); if (vertical) w += path_size; else h += path_size; let svg = d3 .create("svg") .attr("width", w + 100) .attr("height", h + 100); let g = svg.append("g").attr("transform", "translate(50,50)"); let construction = []; const paths = vertical ? outlineVerticalPaths(test_link, construction) : outlineHorizontalPaths(test_link, construction); if (show.includes("path")) for (let path of paths) g.append("path") .attr("d", path) .attr("fill", "none") .attr("stroke", "black"); if (show.includes("std path")) { const stdPath = vertical ? standardVerticalPath : standardHorizontalPath; const dsize = path_size / path_count; const dir = vertical ? [1, 0] : [0, 1]; for (let i = 0; i < path_count; i++) { const u = vec2.scale([], dir, -path_size / 2 + (i + 0.5) * dsize); g.append("path") .attr( "d", stdPath({ source: vec2.add([], test_link.source, u), target: vec2.add([], test_link.target, u) }) ) .attr("fill", "none") .attr("stroke-width", dsize) .attr("stroke", "rgba(0,0,0,0.1)"); } } if (show.includes("construction lines")) { for (let [x, y] of construction.flat()) { g.append("circle") .attr("cx", x) .attr("cy", y) .attr("r", 2) .attr("fill", "blue"); } const pointPath = (pts) => pts .map(([x, y], i) => (i == 0 ? "M" : "L") + x + "," + y + " ") .join(" "); for (let pts of construction) { g.append("path") .attr("d", pointPath(pts)) .attr("stroke-dasharray", "2 2") .attr("stroke", "gray") .attr("fill", "none"); } // for (let pts of [anchor.slice(0, 4), anchor.slice(4, 8)]) { // g.append("path") // .attr("d", pointPath(pts)) // .attr("stroke-dasharray", "3 1") // .attr("stroke", "red") // .attr("fill", "none"); // } } return svg.node(); }33:Tad0,function sankey_layout( data, { size = 600, sep_ratio = 0.2, key_order, key_column = {} } = {} ) { let nodes = {}; // Gather nodes const init_node = (key) => ({ key, incoming: [], outgoing: [], total_in: 0, total_out: 0, negative_in: 0, negative_out: 0, column: key_column[key] || 0 }); for (let { source, target, value, removed } of data) { if (!nodes[source]) nodes[source] = init_node(source); if (!nodes[target]) nodes[target] = init_node(target); let link = { node: nodes[target], value }; if (removed) link.removed = removed; nodes[source].outgoing.push(link); if (value < 0) nodes[source].negative_out += value; else nodes[source].total_out += value; nodes[target].incoming.push({ node: nodes[source], value }); if (value < 0) nodes[target].negative_in += value; else nodes[target].total_in += value; nodes[target].column = Math.max( nodes[source].column + 1, nodes[target].column ); } // Fix columns let changed; do { changed = false; for (let key of Object.keys(nodes)) { let node = nodes[key]; for (let in_obj of node.incoming) { let in_node = in_obj.node; if (node.column <= in_node.column) { node.column = in_node.column + 1; changed = true; } } } } while (changed); // Find column sizes const keys = [...Object.keys(nodes)]; let columns = []; let total_column = []; for (let key of keys) { let node = nodes[key]; node.total = Math.max(node.total_in, node.total_out); if (node.total <= 0) node.total = -Math.min(node.negative_in, node.negative_out); if (columns[node.column] == undefined) { columns[node.column] = [node]; total_column[node.column] = node.total; } else { columns[node.column].push(node); total_column[node.column] += node.total; } } const total = Math.max(...total_column); const scale = (size / total) * (1 - sep_ratio); const sortNode = key_order ? (a, b) => { return key_order.indexOf(a.key) - key_order.indexOf(b.key); } : null; const sortLink = key_order ? (a, b) => { return key_order.indexOf(a.node.key) - key_order.indexOf(b.node.key); } : null; for (let col of columns) { const col_total = total_column[col[0].column]; const n = col.length; const sep = (size - col_total * scale) / (n + 1); let coord = sep; if (sortNode) col.sort(sortNode); for (let node of col) { node.coord = coord; if (sortLink) { node.outgoing.sort(sortLink); node.incoming.sort(sortLink); } node.size = node.total * scale; coord += node.size + sep; } } return columns; }34:Tee4,function horizontal_sankey( layout, { group, colorScale, node_width = 20, width = 800, height = 600, text_margin = 5, improved_path = true, bias = 1, limit = 1 } = {} ) { const svg = group || d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); const ncolumns = layout.length; const column_sep = (width - layout.length * node_width) / (ncolumns - 1); const nodes = layout.flat(); const color = colorScale || d3.scaleOrdinal(d3.schemeCategory10); svg .append("g") .attr("class", "nodes") .selectAll("rect") .data(nodes) .join("rect") .attr("x", (d) => d.column * (column_sep + node_width) + (d.dx || 0)) .attr("y", (d) => d.coord) .attr("width", (d) => d.width || node_width) .attr("height", (d) => d.height || d.size) .attr("stroke", "black") .attr("fill", (d) => color(d.key)); let gradientCount = 0; const uid = `O-${Math.random().toString(16).slice(2)}`; const pathgroup = svg.append("g").attr("class", "links"); let incoming_offset = {}; let path = improved_path ? outlineHorizontalPath : d3.linkHorizontal(); for (let col of layout) { for (let node of col) { let out_y = node.coord; let out_x = node.column * (column_sep + node_width) + (node.width || node_width) + (node.dx || 0); const scale = node.size / node.total; const source = node.key; for (let targetObj of node.outgoing) { const stroke_width = scale * targetObj.value; const target = targetObj.node.key; const offset = incoming_offset[target] || 0; const in_y = targetObj.node.coord + offset; const in_x = targetObj.node.column * (column_sep + node_width) + (targetObj.node.dx || 0); incoming_offset[target] = offset + stroke_width; const linkGroup = pathgroup.append("g"); const gradientId = uid + gradientCount++; const grad = linkGroup.append("linearGradient").attr("id", gradientId); grad .attr("gradientUnits", "userSpaceOnUse") .attr("x1", out_x) .attr("x2", in_x); grad .append("stop") .attr("offset", "0%") .attr("stop-color", color(source)); grad .append("stop") .attr("offset", "100%") .attr("stop-color", color(target)); linkGroup .append("path") .attr( "d", path({ source: [out_x, out_y + stroke_width / 2], target: [in_x, in_y + stroke_width / 2], size: Math.max(1, stroke_width), bias, limit }) ) .attr("stroke-width", Math.max(1, stroke_width)) .attr("stroke", improved_path ? "none" : `url(#${gradientId})`) .attr("stroke-opacity", 0.5) .attr("fill-opacity", 0.5) .attr("fill", !improved_path ? "none" : `url(#${gradientId})`); out_y += stroke_width; } } } svg .append("g") .attr("class", "labels") .attr("font-family", "sans-serif") .attr("font-size", 10) .selectAll("text") .data(nodes) .join("text") .text((d) => d.key) .attr("fill", "black") .attr("dy", "0.35em") .attr("text-anchor", (d) => (d.column < ncolumns / 2 ? "start" : "end")) .attr( "x", (d) => (d.column < ncolumns / 2 ? d.column * (column_sep + node_width) + text_margin + node_width : d.column * (column_sep + node_width) - text_margin) + (d.dx || 0) ) .attr("y", (d) => d.coord + d.size / 2); return svg.node(); }35:T566,outlineHorizontalPath = ( { source, target, size = 5, bias = 1, limit = 1 }, anchor = [] ) => { let [x1, y1] = source; let [x2, y2] = target; if (x2 < x1) { [x1, y1, x2, y2] = [x2, y2, x1, y1]; // x1 must be smaller } const xmid = (x1 + x2) / 2; const w = (Math.abs(x2 - x1) / 2) * limit; const ds = size / 2; const v = vec2.sub([], [x2, y2], [x1, y1]); const u = vec2.scale( [], vec2.normalize([], vec2.rotate([], v, [0, 0], -Math.PI / 2)), ds ); const dx = Math.max(-w, Math.min(w, u[0])); const left_top_x = bias * (xmid + dx - x1) + x1; const right_top_x = bias * (xmid + dx - x2) + x2; const right_bottom_x = bias * (xmid - dx - x2) + x2; const left_bottom_x = bias * (xmid - dx - x1) + x1; anchor[0] = [x1, y1 - ds]; let [a1x, a1y] = (anchor[1] = [left_top_x, y1 - ds]); let [a2x, a2y] = (anchor[2] = [right_top_x, y2 - ds]); anchor[3] = [x2, a2y]; anchor[4] = [x2, y2 + ds]; let [a3x, a3y] = (anchor[5] = [right_bottom_x, y2 + ds]); let [a4x, a4y] = (anchor[6] = [left_bottom_x, y1 + ds]); anchor[7] = [x1, a4y]; anchor[9] = vec2.scale([], vec2.add([], source, target), 0.5); anchor[8] = vec2.add([], anchor[9], u); anchor[10] = vec2.sub([], anchor[9], u); return ( `M${x1},${a1y} C${a1x},${a1y},${a2x},${a2y},${x2},${a2y} ` + `L${x2},${a3y} C${a3x},${a3y},${a4x},${a4y},${x1},${a4y} Z` ); }36:T579,outlineVerticalPath = ( { source, target, size = 5, bias = 1, limit = 1 }, anchor = [] ) => { let [x1, y1] = source; let [x2, y2] = target; if (y2 < y1) { [x1, y1, x2, y2] = [x2, y2, x1, y1]; // y1 must be smaller } const ymid = (y1 + y2) / 2; const h = (Math.abs(y2 - y1) / 2) * limit; const ds = size / 2; const v = vec2.sub([], [x2, y2], [x1, y1]); const u = vec2.scale([], vec2.normalize([], [-v[1], v[0]]), ds); const dy = Math.max(-h, Math.min(h, u[1])); //Math.min(h, Math.max(-h, u[1])); //Math.abs(ymid - y1) * 0.5; const left_top_y = bias * (ymid + dy - y1) + y1; const left_bottom_y = bias * (ymid + dy - y2) + y2; const right_bottom_y = bias * (ymid - dy - y2) + y2; const right_top_y = bias * (ymid - dy - y1) + y1; anchor[0] = [x1 - ds, y1]; let [a1x, a1y] = (anchor[1] = [x1 - ds, left_top_y]); let [a2x, a2y] = (anchor[2] = [x2 - ds, left_bottom_y]); anchor[3] = [a2x, y2]; anchor[4] = [x2 + ds, y2]; let [a3x, a3y] = (anchor[5] = [x2 + ds, right_bottom_y]); let [a4x, a4y] = (anchor[6] = [x1 + ds, right_top_y]); anchor[7] = [a4x, y1]; anchor[9] = vec2.scale([], vec2.add([], source, target), 0.5); anchor[8] = vec2.add([], anchor[9], u); anchor[10] = vec2.sub([], anchor[9], u); return ( `M${a1x},${y1} C${a1x},${a1y},${a2x},${a2y},${a2x},${y2} ` + `L${a3x},${y2} C${a3x},${a3y},${a4x},${a4y},${a4x},${y1} Z` ); }37:T52b,outlineVerticalPaths = ({ source, target, sizes = [5, 5], bias = 1, limit = 1 }, construction = []) => { let [x1, y1] = source; let [x2, y2] = target; if (y2 < y1) { [x1, y1, x2, y2] = [x2, y2, x1, y1]; // y1 must be smaller } const ymid = (y1 + y2) / 2; const h = (Math.abs(y2 - y1) / 2) * limit; const sizeSum = sizes.reduce((acc, v) => acc + v, 0); const v = vec2.sub([], [x2, y2], [x1, y1]); const vp = vec2.normalize([], [-v[1], v[0]]); let ds = sizeSum / 2; let curves = []; for (let s of [0, ...sizes]) { ds -= s; const u = vec2.scale([], vp, ds); const x1a = x1 - ds; const x2a = x2 - ds; const dy = Math.max(-h, Math.min(h, u[1])); const y1a = bias * (ymid + dy - y1) + y1; const y2a = bias * (ymid + dy - y2) + y2; curves.push([ [x1a, y1], [x1a, y1a], [x2a, y2a], [x2a, y2] ]); } let paths = []; const coord = (p) => p[0] + "," + p[1]; for (let i = 0; i < sizes.length; i++) { let [a, b, c, d] = curves[i]; let path = "M" + coord(a) + "C" + coord(b) + "," + coord(c) + "," + coord(d); [d, c, b, a] = curves[i + 1]; path += "L" + coord(a) + "C" + coord(b) + "," + coord(c) + "," + coord(d) + "Z"; paths.push(path); } construction.splice(0, 0, ...curves); return paths; }38:T529,outlineHorizontalPaths = ( { source, target, sizes = [5, 5], bias = 1, limit = 1 }, construction = [] ) => { let [x1, y1] = source; let [x2, y2] = target; if (x2 < x1) { [x1, y1, x2, y2] = [x2, y2, x1, y1]; // x1 must be smaller } const xmid = (x1 + x2) / 2; const w = (Math.abs(x2 - x1) / 2) * limit; const sizeSum = sizes.reduce((acc, v) => acc + v, 0); const v = vec2.sub([], [x2, y2], [x1, y1]); const vp = vec2.normalize([], [v[1], -v[0]]); let ds = sizeSum / 2; let curves = []; for (let s of [0, ...sizes]) { ds -= s; const u = vec2.scale([], vp, ds); const y1a = y1 - ds; const y2a = y2 - ds; const dx = Math.max(-w, Math.min(w, u[0])); const x1a = bias * (xmid + dx - x1) + x1; const x2a = bias * (xmid + dx - x2) + x2; curves.push([ [x1, y1a], [x1a, y1a], [x2a, y2a], [x2, y2a] ]); } let paths = []; const coord = (p) => p[0] + "," + p[1]; for (let i = 0; i < sizes.length; i++) { let [a, b, c, d] = curves[i]; let path = "M" + coord(a) + "C" + coord(b) + "," + coord(c) + "," + coord(d); [d, c, b, a] = curves[i + 1]; path += "L" + coord(a) + "C" + coord(b) + "," + coord(c) + "," + coord(d) + "Z"; paths.push(path); } construction.splice(0, 0, ...curves); return paths; }39:[] 2f:{"title":"Improved Sankey paths","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":211,"value":"viewof ysep = Inputs.range([-600, 600], {\n label: \"y separation\",\n value: 100,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"viewof xsep = Inputs.range([-400, 400], {\n label: \"x separation\",\n value: 300,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"viewof path_size = Inputs.range([0, 400], {\n label: \"path size\",\n value: 100,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":565,"value":"viewof path_count = Inputs.range([1, 10], {\n label: \"parallel paths\",\n value: 1,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"viewof bias = Inputs.range([0, 2], { label: \"bias\", value: 1, step: 0.1 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"viewof limit = Inputs.range([0, 1], { label: \"limit\", value: 1, step: 0.01 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"viewof show = Inputs.checkbox([\"path\", \"std path\", \"construction lines\"], {\n label: \"show\",\n value: [\"path\", \"std path\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":490,"value":"viewof vertical = Inputs.toggle({ label: \"vertical path\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":523,"value":"
\n## Sankey demo\n\nThe sample Sankey diagram below lets you adjust several layout parameters as well as toggle the use of improved paths. If improved paths are used, the bias and limit parameters are the ones shown in the demo above.","pinned":false,"hidden":false,"mode":"md"},{"id":43,"value":"viewof width = Inputs.range([200, 800], { label: \"Width\", value: 500, step: 1 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"viewof height = Inputs.range([200, 800], {\n label: \"Height\",\n value: 500,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"viewof sep_ratio = Inputs.range([0.1, 0.8], {\n label: \"Node separation\",\n value: 0.2,\n step: 0.05\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"viewof node_width = Inputs.range([1, 100], {\n label: \"Node width\",\n value: 20,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":513,"value":"viewof improved = Inputs.toggle({ label: \"Improved paths\", value: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"viewof randomize = Inputs.button(\"randomize data\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"horizontal_sankey(layout, {\n width,\n height,\n node_width,\n improved_path: improved,\n bias,\n limit\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"layout = sankey_layout(sample_data, { size: height, sep_ratio })","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"sample_data = {\n randomize;\n let nodes = [[\"A\", \"B\", \"C\"], [\"D\", \"E\"], [\"F\", \"G\", \"H\"], [\"I\"]];\n let amounts = randomSplit(1000, nodes[0].length);\n let result = [];\n for (let [c1, c2] of d3.zip(nodes.slice(0, -1), nodes.slice(1))) {\n let nextAmounts = [];\n let n = c1.length;\n for (let i = 0; i < n; i++) {\n let source = c1[i];\n let m = c2.length;\n let amt = randomSplit(amounts[i], m);\n for (let j = 0; j < m; j++) {\n let target = c2[j];\n let value = amt[j];\n result.push({ source, target, value });\n nextAmounts[j] = nextAmounts[j] ? nextAmounts[j] + value : value;\n }\n }\n amounts = nextAmounts;\n }\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"function randomSplit(x, n) {\n let s = 0;\n let p = [];\n for (let i = 0; i < n; i++) {\n p[i] = Math.random();\n s += p[i];\n }\n return p.map((q) => (q / s) * x);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"import { vec2 } from \"@esperanc/vec2-utils\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":193,"value":"standardVerticalPath = d3.linkVertical()\n// ({ source, target }) => {\n// let [x1, y1] = source;\n// let [x2, y2] = target;\n// const ymid = (y1 + y2) / 2;\n// return `M${x1},${y1} C${x1},${ymid} ${x2},${ymid} ${x2},${y2}`;\n// }","pinned":false,"hidden":false,"mode":"ojs"},{"id":228,"value":"standardHorizontalPath = d3.linkHorizontal()\n// ({ source, target }) => {\n// let [x1, y1] = source;\n// let [x2, y2] = target;\n// const xmid = (x1 + x2) / 2;\n// return `M${x1},${y1} C${xmid},${y1} ${xmid},${y2} ${x2},${y2}`;\n// }","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":534,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":552,"value":"$38","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W39","stdlib":"1","titling":"auto"}