30:T430,html` `31:[] 2e:{"title":"Sankey link paths (#91)","cells":[{"id":0,"value":"# Sankey link paths ([#91](https://github.com/d3/d3-sankey/issues/91))\n\nWhat if we wanted to represent a Sankey link with a variable width?\n\nThe paths below show the current d3-sankey method (figure on the left), that draws a path in the center, and adds a wide stroke-width. This method is better than the naïve approach—using a filled area—, which results in a squeezed shape because of shearing in the middle (right figure).\n\nSee also the approach developed in https://observablehq.com/@esperanc/improved-sankey-paths\n","pinned":false,"hidden":false,"mode":"md"},{"id":2,"value":"html`\n\n\n\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":223,"value":"md`Unfortunately, for the moment SVG does not allow [Variable width stroke](https://www.w3.org/Graphics/SVG/WG/wiki/Proposals/Variable_width_stroke). However, we can use [@rveciana](/@rveciana)’s [svg-path-properties](https://github.com/rveciana/svg-path-properties) module to compute the desired path. It is a bit laborious, but it works. The examples below show the computed control points:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":213,"value":"html`\n\n\n\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":107,"value":"function offsetPath(d, w, skip = 5) {\n const top = [];\n const bottom = [];\n const path = new svgpath.svgPathProperties(d);\n const l = path.getTotalLength();\n const offset = typeof w === \"function\" ? (i) => w(i / l) : () => w;\n for (let i = 0; i < l; i += skip) add(i);\n add(l);\n return [...filterRecursive(top), ...filterRecursive(bottom).reverse()];\n\n function add(i) {\n const p = path.getPointAtLength(i);\n const t = path.getTangentAtLength(i);\n const o = Math.max(offset(i), 0);\n top.push([p.x + t.y * o, p.y - t.x * o]);\n bottom.push([p.x - t.y * o, p.y + t.x * o]);\n }\n\n function filterRecursive(points) {\n for (let i = 1; i < points.length - 1; i++) {\n if (\n Math.hypot(\n points[i - 1][0] - points[i][0],\n points[i - 1][1] - points[i][1]\n ) < skip\n ) {\n points[i] = [NaN, NaN];\n }\n }\n const a = points.filter((d) => !isNaN(d[0]));\n return a.length < points.length ? filterRecursive(a) : a;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":115,"value":"svgpath = require(\"svg-path-properties\") // for getTangentAtLength","pinned":true,"hidden":false,"mode":"ojs"},{"id":67,"value":"width = 300","pinned":true,"hidden":false,"mode":"ojs"},{"id":69,"value":"height = 400","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"link = [\n [0, 50],\n [width, height - 50]\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"W = 95","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"area = [\n a(link[0], -W / 2),\n a(link[1], -W / 2),\n a(link[1], W / 2),\n a(link[0], W / 2)\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"a = ([x, y], dy) => [x, y + dy]","pinned":true,"hidden":false,"mode":"ojs"},{"id":306,"value":"Making the API closer to d3.linkHorizontal:","pinned":false,"hidden":false,"mode":"md"},{"id":286,"value":"svg`