2c:null 2d:["$","title",null,{"children":"Quartz V4 (With Hover) | Cittadhammo | Observable"}] 32:T263d,chart = { const width = 550; // uncomment for responsive width const height = width; const radius = Math.min(width, height) / 2 - 80; const scale = 0.6; const initialStep = 60; const stepRadius = 6; const roundRadius = 6; const pi = Math.PI; // ------------------ Data ------------------ // let dataRadial = []; for (const key in data) { let crumb = key.split("/"), crumbL = crumb.length, parent = crumb[crumbL - 2], name = crumb[crumbL - 1]; if (name == "index" && crumbL > 1) (name = parent), (parent = crumb[crumbL - 3]); if (parent != "tags") dataRadial.push({ id: name, parentId: parent == undefined ? (name == "index" ? "" : "index") : parent, ...data[key] }); } const dataStartified = d3.stratify()(dataRadial); // become a hierarchy usable in D3 // Create a radial cluster layout. The layout’s first dimension (x) // is the angle, while the second (y) is the radius. const tree = d3 .cluster() .size([2 * Math.PI, radius]) .separation((a, b) => (a.parent == b.parent ? 1 : 2) / a.depth); // Sort the tree and apply the layout. const root = tree(dataStartified); root.x = Math.PI / 2; console.log("root is: "); console.log(root); // Data for relationship const nodes = root.descendants(); let links = []; nodes.forEach((node) => { if (node.data.links) { // exculde index page for the moment? node.data.links.forEach((link) => { if (nodes.find((n) => n.data.id == link)) { const target = nodes.find((n) => n.data.id == link); if ( // this make sure we dont have duplicates !links.find((link) => link.target == node && link.source == target) ) links.push({ source: node, target: target }); } }); } }); // ------------------ 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; console.log("orbites"); console.log(orbites); for (const num in orbites) { console.log("orbites num"); console.log(num); console.log(orbites[num]); 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 ----------- // const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [ -width / 2 / scale, -height / 2 / 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", "#555") .attr("stroke-opacity", 0.4) .attr("stroke-width", 1.5) .selectAll() .data(links) .join("path") .attr("d", (d) => arcLinks(d)) .attr( "class", (d, i) => "linkId-" + d.source.data.id + " " + "linkId-" + d.target.data.id ); // 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.id + "-" + d.target.id); // 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("id", (d) => "circle-" + d.id) .attr("class", (d, i) => { const linksToNode = links.filter((node) => node.target.id == d.id); const linksFromNode = links.filter((node) => node.source.id == d.id); let string = ""; for (const link of linksToNode) { string += "circle-" + link.source.id + " "; } for (const link of linksFromNode) { // this seems not to work... string += "circle-" + link.target.id + " "; } 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.title) .attr("id", (d) => d.id) .attr("class", (d, i) => { const linksToNode = links.filter((node) => node.target.id == d.id); const linksFromNode = links.filter( (node) => node.source.id == d.id && node.source.id != "index" ); let string = ""; for (const link of linksToNode) { string += "nodeId-" + link.source.id + " "; } for (const link of linksFromNode) { string += "nodeId-" + link.target.id + " "; } return string; }) .on("mouseover", function (d, i) { const id = this.getAttribute("id"); const node = root.descendants().find((d) => d.id === id); const ancestors = node.ancestors(); d3.select(this).attr("font-weight", "bold").attr("fill", "red"); d3.select("#circle-" + id).attr("fill", "red"); d3.selectAll(".circle-" + id).attr("fill", "red"); d3.selectAll(".nodeId-" + id) .attr("font-weight", "bold") .attr("fill", "red"); d3.selectAll(".linkId-" + id) .attr("stroke", "red") .attr("stroke-opacity", 1) .attr("stroke-width", 1.5); // 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].id); d3.select( ".radialLinkId-" + ancestors[i + 1].id + "-" + ancestors[i].id ) .attr("stroke", "red") .attr("stroke-opacity", 1) .attr("stroke-width", 1.5); d3.select("#" + ancestors[i + 1].id) .attr("font-weight", "bold") .attr("fill", "red"); d3.select("#circle-" + ancestors[i + 1].id).attr("fill", "red"); } }) .on("mouseout", function (d, i) { const id = this.getAttribute("id"); const node = root.descendants().find((d) => d.id === id); const ancestors = node.ancestors(); d3.select(this) .attr("font-weight", "normal") .attr("fill", "currentColor"); d3.select("#circle-" + id).attr("fill", node.children ? "#555" : "#999"); d3.selectAll(".circle-" + id).attr("fill", "#999"); d3.selectAll(".nodeId-" + id) .attr("font-weight", "normal") .attr("fill", "currentColor"); d3.selectAll(".linkId-" + id) .attr("stroke", "#555") .attr("stroke-opacity", 0.4) .attr("stroke-width", 1.5); for (let i = 0; i < ancestors.length; i++) { console.log(i, ancestors[i], ancestors[i].id); d3.select( ".radialLinkId-" + ancestors[i + 1].id + "-" + ancestors[i].id ) .attr("stroke", "#555") .attr("stroke-opacity", 0.4) .attr("stroke-width", 1.5); d3.select("#" + ancestors[i + 1].id) .attr("font-weight", "normal") .attr("fill", "currentColor"); d3.select("#circle-" + ancestors[i + 1].id).attr( "fill", ancestors[i + 1].children ? "#555" : "#999" ); } }); return svg.node(); }33:[{"id":"be5f9f1f2207288f4e0acb67842e9efd49c909099a7caa410b7755b5a2992928fb0adab74ceea70d26e6e3bb72bce8856162801144d80a3e6a77a6684a179362","href":"https://static.observableusercontent.com/files/be5f9f1f2207288f4e0acb67842e9efd49c909099a7caa410b7755b5a2992928fb0adab74ceea70d26e6e3bb72bce8856162801144d80a3e6a77a6684a179362","name":"data.json","type":"application/json","lastModified":1698861382254.567,"size":101595}] 30:{"id":"d8a8b876ab0eea78","slug":null,"title":"Quartz V4 (With Hover)","thumbnail":"d59bb8480d3b76667af4851294c1a77abb5617a41ee63b783d49a67a09d19270","access_level":"public","create_time":"$D2023-11-01T17:56:12.822Z","update_time":"$D2023-11-15T07:05:58.037Z","view_time":null,"first_public_time":"$D2023-11-01T17:56:12.822Z","has_unpublished_edits":null,"fork":{"id":"bd116742b1f91cf4","slug":"simple-d3","title":"Simple D3","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":1,"starred":false,"owner":{"type":"team","id":"d277e65fbd31f04d","login":"cittadhammo","name":"Cittadhammo","avatar_url":"https://avatars-next.observableusercontent.com/e3cb3f2eef03b628da9dd1e938902c82ffb474c2adb36b34ce7ffd562d9f2158","tier":"starter_2024"},"version":713,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"7722371e7ecac8bd","login":"cittadhammo","name":"Cittadhammo","avatar_url":"https://avatars-next.observableusercontent.com/e3cb3f2eef03b628da9dd1e938902c82ffb474c2adb36b34ce7ffd562d9f2158","tier":null}],"members":[{"type":"individual","id":"7722371e7ecac8bd","login":"cittadhammo","name":"Cittadhammo","avatar_url":"https://avatars-next.observableusercontent.com/e3cb3f2eef03b628da9dd1e938902c82ffb474c2adb36b34ce7ffd562d9f2158","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"95cc1ec0a00ea944","slug":"utility","title":"Utility","owner":{"id":"d277e65fbd31f04d","login":"cittadhammo","name":"Cittadhammo"}},"type":"notebook","body":{"title":"Quartz V4 (With Hover)","cells":[{"id":0,"value":"# Quartz V4 (With Hover)\n\nThis graph shows the hierarchy as a radial tree. \n\nThe relationship between the leaves are calculated as the smallest arc possible ( {\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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":421,"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"data = FileAttachment(\"data.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 31:"$30:body"