2b:null 2c:["$","title",null,{"children":"Hierarchical edge bundling II | Anant Jain | Observable"}] 31:T6c9,chart = { const width = 954; const radius = width / 2; const k = 6; // 2^k colors segments per curve const tree = d3.cluster() .size([2 * Math.PI, radius - 100]); const root = tree(bilink(d3.hierarchy(data) .sort((a, b) => d3.ascending(a.height, b.height) || d3.ascending(a.data.name, b.data.name)))); const svg = d3.create("svg") .attr("width", width) .attr("height", width) .attr("viewBox", [-width / 2, -width / 2, width, width]) .attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;"); const node = svg.append("g") .selectAll() .data(root.leaves()) .join("g") .attr("transform", d => `rotate(${d.x * 180 / Math.PI - 90}) translate(${d.y},0)`) .append("text") .attr("dy", "0.31em") .attr("x", d => d.x < Math.PI ? 6 : -6) .attr("text-anchor", d => d.x < Math.PI ? "start" : "end") .attr("transform", d => d.x >= Math.PI ? "rotate(180)" : null) .text(d => d.data.name) .call(text => text.append("title").text(d => `${id(d)} ${d.outgoing.length} outgoing ${d.incoming.length} incoming`)); const line = d3.lineRadial() .curve(d3.curveBundle) .radius(d => d.y) .angle(d => d.x); const path = ([source, target]) => { const p = new Path; line.context(p)(source.path(target)); return p; }; svg.append("g") .attr("fill", "none") .selectAll() .data(d3.transpose(root.leaves() .flatMap(leaf => leaf.outgoing.map(path)) .map(path => Array.from(path.split(k))))) .join("path") .style("mix-blend-mode", "darken") .attr("stroke", (d, i) => color(d3.easeQuad(i / ((1 << k) - 1)))) .attr("d", d => d.join("")); return svg.node(); }32:[{"id":"9b6806e3dd9c4c2c26760ba784437138c78b43a9a8e58a0bbafe5833026e3265637c9c7810224d66b79ba907b4d0be731c1a81ad043e10376aec3c18a49f3d84","href":"https://static.observableusercontent.com/files/9b6806e3dd9c4c2c26760ba784437138c78b43a9a8e58a0bbafe5833026e3265637c9c7810224d66b79ba907b4d0be731c1a81ad043e10376aec3c18a49f3d84","name":"flare.json","type":"application/octet-stream","lastModified":1703375406063.935,"size":34321}] 2f:{"id":"2cd9ecf7c37b3070","slug":null,"title":"Hierarchical edge bundling II","thumbnail":"a2dce874e981b7c74f45e81baa75305b04c73da9937761c224919216859691a7","access_level":"public","create_time":"$D2023-12-23T23:50:06.063Z","update_time":"$D2023-12-23T23:50:06.063Z","view_time":null,"first_public_time":"$D2023-12-23T23:50:06.063Z","has_unpublished_edits":null,"fork":{"id":"16ea6ba8fc487e0a","slug":"hierarchical-edge-bundling/2","title":"Hierarchical edge bundling II","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"487cb7b890bb0f2a","login":"anant-jain","name":"Anant Jain","avatar_url":"https://avatars-next.observableusercontent.com/92e0bd8c201480eb15bc221b578da9d0bd3b6e368e6483ef880230639a173398","tier":"starter_2024"},"version":798,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"9d267c97c605974d","login":"anant-jain","name":"Anant Jain","avatar_url":"https://avatars-next.observableusercontent.com/92e0bd8c201480eb15bc221b578da9d0bd3b6e368e6483ef880230639a173398","tier":null}],"members":[{"type":"individual","id":"9d267c97c605974d","login":"anant-jain","name":"Anant Jain","avatar_url":"https://avatars-next.observableusercontent.com/92e0bd8c201480eb15bc221b578da9d0bd3b6e368e6483ef880230639a173398","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Hierarchical edge bundling II","cells":[{"id":1,"value":"

Hierarchical edge bundling II

D3 › Gallery

\n\n# Hierarchical edge bundling II\n\nThis chart shows relationships among classes in a software hierarchy. Each directed edge, going from source to target, corresponds to an import.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"data = hierarchy(await FileAttachment(\"flare.json\").json())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"function hierarchy(data, delimiter = \".\") {\n let root;\n const map = new Map;\n data.forEach(function find(data) {\n const {name} = data;\n if (map.has(name)) return map.get(name);\n const i = name.lastIndexOf(delimiter);\n map.set(name, data);\n if (i >= 0) {\n find({name: name.substring(0, i), children: []}).children.push(data);\n data.name = name.substring(i + 1);\n } else {\n root = data;\n }\n return data;\n });\n return root;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"function bilink(root) {\n const map = new Map(root.leaves().map(d => [id(d), d]));\n for (const d of root.leaves()) d.incoming = [], d.outgoing = d.data.imports.map(i => [d, map.get(i)]);\n for (const d of root.leaves()) for (const o of d.outgoing) o[1].incoming.push(o);\n return root;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"function id(node) {\n return `${node.parent ? id(node.parent) + \".\" : \"\"}${node.data.name}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":676,"value":"class Path {\n constructor(_) {\n this._ = _;\n this._m = undefined;\n }\n moveTo(x, y) {\n this._ = [];\n this._m = [x, y];\n }\n lineTo(x, y) {\n this._.push(new Line(this._m, this._m = [x, y]));\n }\n bezierCurveTo(ax, ay, bx, by, x, y) {\n this._.push(new BezierCurve(this._m, [ax, ay], [bx, by], this._m = [x, y]));\n }\n *split(k = 0) {\n const n = this._.length;\n const i = Math.floor(n / 2);\n const j = Math.ceil(n / 2);\n const a = new Path(this._.slice(0, i));\n const b = new Path(this._.slice(j));\n if (i !== j) {\n const [ab, ba] = this._[i].split();\n a._.push(ab);\n b._.unshift(ba);\n }\n if (k > 1) {\n yield* a.split(k - 1);\n yield* b.split(k - 1);\n } else {\n yield a;\n yield b;\n }\n }\n toString() {\n return this._.join(\"\");\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":683,"value":"class Line {\n constructor(a, b) {\n this.a = a;\n this.b = b;\n }\n split() {\n const {a, b} = this;\n const m = [(a[0] + b[0]) / 2, (a[1] + b[1]) / 2];\n return [new Line(a, m), new Line(m, b)];\n }\n toString() {\n return `M${this.a}L${this.b}`;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":685,"value":"BezierCurve = {\n const l1 = [4 / 8, 4 / 8, 0 / 8, 0 / 8];\n const l2 = [2 / 8, 4 / 8, 2 / 8, 0 / 8];\n const l3 = [1 / 8, 3 / 8, 3 / 8, 1 / 8];\n const r1 = [0 / 8, 2 / 8, 4 / 8, 2 / 8];\n const r2 = [0 / 8, 0 / 8, 4 / 8, 4 / 8];\n\n function dot([ka, kb, kc, kd], {a, b, c, d}) {\n return [\n ka * a[0] + kb * b[0] + kc * c[0] + kd * d[0],\n ka * a[1] + kb * b[1] + kc * c[1] + kd * d[1]\n ];\n }\n\n return class BezierCurve {\n constructor(a, b, c, d) {\n this.a = a;\n this.b = b;\n this.c = c;\n this.d = d;\n }\n split() {\n const m = dot(l3, this);\n return [\n new BezierCurve(this.a, dot(l1, this), dot(l2, this), m),\n new BezierCurve(m, dot(r1, this), dot(r2, this), this.d)\n ];\n }\n toString() {\n return `M${this.a}C${this.b},${this.c},${this.d}`;\n }\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":588,"value":"color = t => d3.interpolateRdBu(1 - t)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 30:"$2f:body"