2b:null 2c:["$","title",null,{"children":"Hierarchical edge bundling | sandbox | Observable"}] 31:Taaa,chart = { const width = 954; const radius = width / 2; 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 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) .each(function(d) { d.text = this; }) .on("mouseover", overed) .on("mouseout", outed) .call(text => text.append("title").text(d => `${id(d)} ${d.outgoing.length} outgoing ${d.incoming.length} incoming`)); const line = d3.lineRadial() .curve(d3.curveBundle.beta(0.85)) .radius(d => d.y) .angle(d => d.x); const link = svg.append("g") .attr("stroke", colornone) .attr("fill", "none") .selectAll() .data(root.leaves().flatMap(leaf => leaf.outgoing)) .join("path") .style("mix-blend-mode", "multiply") .attr("d", ([i, o]) => line(i.path(o))) .each(function(d) { d.path = this; }); function overed(event, d) { link.style("mix-blend-mode", null); d3.select(this).attr("font-weight", "bold"); d3.selectAll(d.incoming.map(d => d.path)).attr("stroke", colorin).raise(); d3.selectAll(d.incoming.map(([d]) => d.text)).attr("fill", colorin).attr("font-weight", "bold"); d3.selectAll(d.outgoing.map(d => d.path)).attr("stroke", colorout).raise(); d3.selectAll(d.outgoing.map(([, d]) => d.text)).attr("fill", colorout).attr("font-weight", "bold"); } function outed(event, d) { link.style("mix-blend-mode", "multiply"); d3.select(this).attr("font-weight", null); d3.selectAll(d.incoming.map(d => d.path)).attr("stroke", null); d3.selectAll(d.incoming.map(([d]) => d.text)).attr("fill", null).attr("font-weight", null); d3.selectAll(d.outgoing.map(d => d.path)).attr("stroke", null); d3.selectAll(d.outgoing.map(([, d]) => d.text)).attr("fill", null).attr("font-weight", null); } return svg.node(); }32:[{"id":"9b6806e3dd9c4c2c26760ba784437138c78b43a9a8e58a0bbafe5833026e3265637c9c7810224d66b79ba907b4d0be731c1a81ad043e10376aec3c18a49f3d84","href":"https://static.observableusercontent.com/files/9b6806e3dd9c4c2c26760ba784437138c78b43a9a8e58a0bbafe5833026e3265637c9c7810224d66b79ba907b4d0be731c1a81ad043e10376aec3c18a49f3d84","name":"flare.json","type":"application/octet-stream","lastModified":1704879318424.229,"size":34321},{"id":"d89be675ea723e3c40b80e539f4e037640e462307abee86e6d8555e6661d49f06889d1b5ba7efa24375922ab555c6ea09aecf2c94c6603900c89d1b0cbc0fdf9","href":"https://static.observableusercontent.com/files/d89be675ea723e3c40b80e539f4e037640e462307abee86e6d8555e6661d49f06889d1b5ba7efa24375922ab555c6ea09aecf2c94c6603900c89d1b0cbc0fdf9","name":"csvjson.json","type":"application/json","lastModified":1704884240045.926,"size":724005},{"id":"b50ba549ba5f1beaa0ebe8be05e35bdcbcf521b8dc3d1ae47fb34032cb539104020dfdbfc519646c16433462f0bf292cb69296ff8aab0719d533b2b23e256207","href":"https://static.observableusercontent.com/files/b50ba549ba5f1beaa0ebe8be05e35bdcbcf521b8dc3d1ae47fb34032cb539104020dfdbfc519646c16433462f0bf292cb69296ff8aab0719d533b2b23e256207","name":"csvjson2.json","type":"application/json","lastModified":1704884696014.654,"size":57956},{"id":"af77277b3d79d4290269513e53691458ce4ad491c57204de6866659475a2be0b50ef3288de7fb2d2baac2653c3975f3891bacf524a6dfe8fc289ee3ea8f0f931","href":"https://static.observableusercontent.com/files/af77277b3d79d4290269513e53691458ce4ad491c57204de6866659475a2be0b50ef3288de7fb2d2baac2653c3975f3891bacf524a6dfe8fc289ee3ea8f0f931","name":"csvjson2@1.json","type":"application/json","lastModified":1704884764653.517,"size":57960}] 2f:{"id":"240bdbfb90e12fd4","slug":null,"title":"Hierarchical edge bundling","thumbnail":"d3655e4f4d142b4f96b281e9b9ec0b714b3a4cf582f821cce476e76938f49eac","access_level":"public","create_time":"$D2024-01-10T09:35:18.424Z","update_time":"$D2024-01-10T15:00:10.246Z","view_time":null,"first_public_time":"$D2024-01-10T09:35:18.424Z","has_unpublished_edits":null,"fork":{"id":"22ac214fe83d7053","slug":"hierarchical-edge-bundling","title":"Hierarchical edge bundling","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"d6c3cb16a7b74aa6","login":"bluesandbox","name":"sandbox","avatar_url":"https://avatars-next.observableusercontent.com/291155d4df9cfc23255fa7783cf02c88341ddcc4dbbffebbae67ca3b9a0400cd","tier":"starter_2024"},"version":470,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c27a579d7148e0ac","login":"hlmqa","name":"HLMQA","avatar_url":"https://avatars-next.observableusercontent.com/8ecec2c150c9c53d63bfae81b3c0a4f5b1525d90cdb92c16281239a535b86b82","tier":null}],"members":[{"type":"team","id":"d6c3cb16a7b74aa6","login":"bluesandbox","name":"sandbox","avatar_url":"https://avatars-next.observableusercontent.com/291155d4df9cfc23255fa7783cf02c88341ddcc4dbbffebbae67ca3b9a0400cd","tier":"starter_2024","role":"editor"},{"type":"individual","id":"c27a579d7148e0ac","login":"hlmqa","name":"HLMQA","avatar_url":"https://avatars-next.observableusercontent.com/8ecec2c150c9c53d63bfae81b3c0a4f5b1525d90cdb92c16281239a535b86b82","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","cells":[{"id":1,"value":"

Hierarchical edge bundling

D3 › Gallery

\n\n# Hierarchical edge bundling\n\nThis chart shows relationships among classes in a software hierarchy. Hover a class to reveal its imports (outgoing edges) and classes that import it (incoming edges).","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(\"csvjson.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 {Source} = data;\n if (map.has(Source)) return map.get(Source);\n const i = Source.lastIndexOf(delimiter);\n map.set(Source, data);\n if (i >= 0) {\n find({Source: Source.substring(0, i), children: []}).children.push(data);\n data.Source = Source.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.Target.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":332,"value":"colorin = \"#00f\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"colorout = \"#f00\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"colornone = \"#ccc\"","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"