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":1572393121123.138,"size":34321}] 2f:{"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"},{"id":10,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":3,"value":"data = hierarchy(await FileAttachment(\"flare.json\").json())","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":180,"value":"function id(node) {\n return `${node.parent ? id(node.parent) + \".\" : \"\"}${node.data.name}`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":332,"value":"colorin = \"#00f\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":334,"value":"colorout = \"#f00\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":336,"value":"colornone = \"#ccc\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}