2b:null 2c:["$","title",null,{"children":"Hierarchical edge bundling | Rachel Connolly | Observable"}] 31:Ta0b,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 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":1720027265920.366,"size":34321}] 2f:{"id":"47d1db4ef2f8c16c","slug":null,"title":"Hierarchical edge bundling","thumbnail":"0a96c38d4caebf1d2c666b8afede9a46789a6df56b6957c4d749797b647d4f06","access_level":"public","create_time":"$D2024-07-03T17:21:05.920Z","update_time":"$D2024-07-03T17:21:05.920Z","view_time":null,"first_public_time":"$D2024-07-03T17:21:05.920Z","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":"f9ad6c34a560d6cd","login":"rachelbc","name":"Rachel Connolly","avatar_url":"https://avatars-next.observableusercontent.com/970267a7226486fa42490056468c652ffb1934612bba4459e4e594ffb5e81b92","tier":"starter_2024"},"version":439,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"fbf59862983a8816","login":"rachelbc","name":"Rachel Connolly","avatar_url":"https://avatars-next.observableusercontent.com/970267a7226486fa42490056468c652ffb1934612bba4459e4e594ffb5e81b92","tier":null}],"members":[{"type":"team","id":"f9ad6c34a560d6cd","login":"rachelbc","name":"Rachel Connolly","avatar_url":"https://avatars-next.observableusercontent.com/970267a7226486fa42490056468c652ffb1934612bba4459e4e594ffb5e81b92","tier":"starter_2024","role":"editor"},{"type":"individual","id":"fbf59862983a8816","login":"rachelbc","name":"Rachel Connolly","avatar_url":"https://avatars-next.observableusercontent.com/970267a7226486fa42490056468c652ffb1934612bba4459e4e594ffb5e81b92","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"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","output":"","database":"$undefined"},{"id":10,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","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","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","output":"$undefined","database":"$undefined"},{"id":332,"value":"colorin = \"#00f\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"colorout = \"#f00\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"colornone = \"#ccc\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"