2f:T2697,chart = { const width = 1100; const height = width; const cx = width * 0.52; // adjust as needed to fit const cy = height * 0.52; // adjust as needed to fit const radius = Math.min(width, height) / 2 - 100; const k = 6; // 2^k colors segments per curve const scale = 1.1; const initialStep = 70; //const stepRadius = 0.5; const roundRadius = 6; const pi = Math.PI; const root = treeTidy; // Adding Arcs const nodes = root.descendants(); let j = 0; let links = []; nodes.forEach((node) => { if (node.outgoing && j % reduce == 0) { // exculde index page for the moment? node.outgoing.forEach((link) => links.push({ source: link[0], target: link[1] }) ); } j++; }); console.log("Links are: "); console.log(links); console.log("root is: "); console.log(links); console.log("links root are: "); console.log(root.links()); console.log("root desc are: "); console.log(root.descendants()); // ------------------ Chart ------------------ // // initionalisation const orbites = [[]]; // already has a first empty orbite // function that calculate the param for the arcs used in Arc links const arcLinks = (link, lower = false) => { const a0 = link.source.x; const r0 = link.source.y; const a1 = link.target.x; const r1 = link.target.y; let diff = a1 - a0; if (diff < 0) { diff += 2 * Math.PI; } if (diff > Math.PI) { diff -= 2 * Math.PI; } let startAngle = a0; let endAngle = a0 + diff; // orbites const nodeOrbite = []; // populate the nodeOrbite with ranges between 0 and 2pi if (endAngle < 0) { nodeOrbite.push([0, startAngle]); nodeOrbite.push([2 * pi + endAngle, 2 * pi]); } else if (endAngle > 2 * pi) { nodeOrbite.push([startAngle, 2 * pi]); nodeOrbite.push([0, endAngle - 2 * pi]); } else { nodeOrbite.push([ Math.min(startAngle, endAngle), Math.max(startAngle, endAngle) ]); } let o = 0; // start at orbite 1 let fitted = false; for (const num in orbites) { if (doesItfitIn(nodeOrbite, orbites[num])) { orbites[num] = orbites[num].concat(nodeOrbite); fitted = true; break; } o++; } if (!fitted) orbites.push(nodeOrbite); // add our array on a new orbite if (r0 == r1) { // d.height == 0 const orbiteAltitude = initialStep + stepRadius * o; return d3 .arc() .startAngle(startAngle) .endAngle(endAngle) .innerRadius(r0) .outerRadius(lower ? r0 + 10 : r0 + orbiteAltitude) .cornerRadius(roundRadius)(link); } }; // ------------- SVG ----------- // // Creates the SVG container. const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [-cx * scale, -cy * scale, width * scale, height * scale]) .attr("style", "width: 100%; height: auto; font: 10px sans-serif;"); // Append Arc links svg .append("g") .attr("fill", "none") .attr("stroke", "#777") .attr("stroke-opacity", 0.8) .attr("stroke-width", 0.5) .selectAll() .data(links) .join("path") .attr("d", (d) => arcLinks(d)) .attr( "class", (d, i) => "linkId-" + d.source.data.name + " " + "linkId-" + d.target.data.name ); // hidding the bottom edge of the arcs svg // could use clone(), but it messes when highlight .append("g") .attr("fill", "none") .attr("stroke", "white") .attr("stroke-opacity", 1) .attr("stroke-width", 5) .selectAll() .data(links) .join("path") .attr("d", (d) => arcLinks(d, true)); // Append Radial links. svg .append("g") .attr("fill", "none") .attr("stroke", "#555") .attr("stroke-opacity", 0.4) .attr("stroke-width", 1.5) .selectAll() .data(root.links()) .join("path") .attr( "d", d3 .linkRadial() .angle((d) => d.x) .radius((d) => d.y) ) .attr( "class", (d, i) => "radialLinkId-" + d.source.name + "-" + d.target.name ); // Append nodes. svg .append("g") .selectAll() .data(root.descendants()) .join("circle") .attr( "transform", (d) => `rotate(${(d.x * 180) / Math.PI - 90}) translate(${d.y},0)` ) .attr("fill", (d) => (d.children ? "#555" : "#999")) .attr("r", 2.5) .attr("name", (d) => "circle-" + d.data.name) .attr("class", (d, i) => { const linksToNode = links.filter((node) => node.target.name == d.name); const linksFromNode = links.filter((node) => node.source.name == d.name); let string = ""; for (const link of linksToNode) { string += "circle-" + link.source.name + " "; } for (const link of linksFromNode) { // this seems not to work... string += "circle-" + link.target.name + " "; } return string; }); // Append labels. svg .append("g") .attr("stroke-linejoin", "round") .attr("stroke-width", 3) .selectAll() .data(root.descendants()) .join("text") .attr( "transform", (d) => `rotate(${(d.x * 180) / Math.PI - 90}) translate(${d.y},0) rotate(${ d.x >= Math.PI ? 180 : 0 })` ) .attr("dy", "0.31em") .attr("x", (d) => (d.x < Math.PI === !d.children ? 6 : -6)) .attr("text-anchor", (d) => d.x < Math.PI === !d.children ? "start" : "end" ) .attr("paint-order", "stroke") .attr("stroke", "white") .attr("fill", "currentColor") .text((d) => d.data.name) .attr("name", (d) => d.data.name) .attr("class", (d, i) => { const linksToNode = links.filter( (node) => node.target.data.name == d.data.name ); const linksFromNode = links.filter( (node) => node.source.data.name == d.data.name && node.source.data.name != "index" ); let string = ""; for (const link of linksToNode) { string += "nodeId-" + link.source.data.name + " "; } for (const link of linksFromNode) { string += "nodeId-" + link.target.data.name + " "; } return string; }) .on("mouseover", function (d, i) { const name = this.getAttribute("name"); const node = root.descendants().find((d) => d.data.name === name); const ancestors = node.ancestors(); d3.select(this).attr("font-weight", "bold").attr("fill", "red"); d3.select("#circle-" + name).attr("fill", "red"); d3.selectAll(".circle-" + name).attr("fill", "red"); d3.selectAll(".nodeId-" + name) .attr("font-weight", "bold") .attr("fill", "red"); d3.selectAll(".linkId-" + name) .attr("stroke", "red") .attr("stroke-opacity", 1) .attr("stroke-width", 1); // Would be nice to raise() // https://observablehq.com/@d3/d3-hierarchy // optimisation https://github.com/d3/d3-hierarchy/issues/58 for (let i = 0; i < ancestors.length - 1; i++) { console.log(i, ancestors[i], ancestors[i].data.name); d3.select( ".radialLinkId-" + ancestors[i + 1].data.name + "-" + ancestors[i].data.name ) .attr("stroke", "red") .attr("stroke-opacity", 1) .attr("stroke-width", 1); d3.select("#" + ancestors[i + 1].data.name) .attr("font-weight", "bold") .attr("fill", "red"); d3.select("#circle-" + ancestors[i + 1].data.name).attr("fill", "red"); } }) .on("mouseout", function (d, i) { const name = this.getAttribute("name"); const node = root.descendants().find((d) => d.data.name === name); const ancestors = node.ancestors(); d3.select(this) .attr("font-weight", "normal") .attr("fill", "currentColor"); d3.select("#circle-" + name).attr( "fill", node.children ? "#555" : "#999" ); d3.selectAll(".circle-" + name).attr("fill", "#999"); d3.selectAll(".nodeId-" + name) .attr("font-weight", "normal") .attr("fill", "currentColor"); d3.selectAll(".linkId-" + name) .attr("stroke", "#777") .attr("stroke-opacity", 0.9) .attr("stroke-width", 0.5); for (let i = 0; i < ancestors.length; i++) { console.log(i, ancestors[i], ancestors[i].data.name); d3.select( ".radialLinkId-" + ancestors[i + 1].data.name + "-" + ancestors[i].data.name ) .attr("stroke", "#777") //.attr("stroke-opacity", 0.4) .attr("stroke-width", 0.5); d3.select("#" + ancestors[i + 1].data.name) .attr("font-weight", "normal") .attr("fill", "currentColor"); d3.select("#circle-" + ancestors[i + 1].data.name).attr( "fill", ancestors[i + 1].children ? "#555" : "#999" ); } }); if (bundling) { 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("stroke", "#555") .attr("stroke-opacity", 0.1) .attr("d", (d) => d.join("")); } console.log(root); return svg.node(); }30:[{"id":"9b6806e3dd9c4c2c26760ba784437138c78b43a9a8e58a0bbafe5833026e3265637c9c7810224d66b79ba907b4d0be731c1a81ad043e10376aec3c18a49f3d84","href":"https://static.observableusercontent.com/files/9b6806e3dd9c4c2c26760ba784437138c78b43a9a8e58a0bbafe5833026e3265637c9c7810224d66b79ba907b4d0be731c1a81ad043e10376aec3c18a49f3d84","name":"flare.json","type":"application/octet-stream","lastModified":1707817119522.879,"size":34321}] 2d:{"title":"Tidy Tree + Arc Relation + Edge Bundling","cells":[{"id":1,"value":"# Tidy Tree + Arc Relation + Edge Bundling ","pinned":false,"hidden":false,"mode":"md"},{"id":1095,"value":"**treeWithLink** has a hierarchy of nodes : (height, depth, parent, children, incoming, outgoing, data.name ) created by the d3.hierarchy function","pinned":false,"hidden":false,"mode":"md"},{"id":1090,"value":"treeWithLink = bilink(\n d3\n .hierarchy(data)\n .sort(\n (a, b) =>\n d3.ascending(a.height, b.height) ||\n d3.ascending(a.data.name, b.data.name)\n )\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1110,"value":"treeTidy = d3.tree().size([2 * Math.PI, 500])(treeWithLink)","pinned":false,"hidden":false,"mode":"ojs"},{"id":813,"value":"viewof bundling = Inputs.toggle({ label: \"Edge Bundling\", value: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":918,"value":"viewof reduce = Inputs.range([1, 10], {\n label: \"reduced connection\",\n step: 1,\n value: 8\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1015,"value":"viewof stepRadius = Inputs.range([0, 2], {\n label: \"stepRadius\",\n step: 0.1,\n value: 2\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":948,"value":"doesItfitIn = (orbite_A, orbite_B) => {\n // Does A fit in B ?\n const holeOrbite_B = calculateHoles(orbite_B);\n\n // every ranges has to fit into a hole\n let itFits = true;\n\n for (const range_A of orbite_A) {\n const a = range_A[0];\n const b = range_A[1];\n // if we cannot find a range_Hole where it can fit // the set don't overlap !\n if (!holeOrbite_B.find((range_H) => range_H[0] < a && b < range_H[1]))\n itFits = false;\n }\n return itFits;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":946,"value":"calculateHoles = (R) => {\n // created by phind with the prompt :\n // in javascript, let's say you have an array R of ranges. Ranges are represented by arrays of two number [x,y], where x < y. This give you an array R of arrays. All the number are bounded between 0 and 2pi.\n // How do you calculate the \"holes\" in the array R, i.e. the complementary set of ranges that fill up the space in between the first set of ranges\n\n R.sort((a, b) => a[0] - b[0]);\n\n const holes = [];\n let previous_end = 0;\n\n for (const [start, end] of R) {\n if (start > previous_end) {\n holes.push([previous_end, start]);\n }\n previous_end = Math.max(previous_end, end);\n }\n\n if (previous_end < 2 * Math.PI) {\n holes.push([previous_end, 2 * Math.PI]);\n }\n\n return holes;\n}","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":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"},{"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"},{"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"},{"id":588,"value":"color = t => d3.interpolateRdBu(1 - t)","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}