3c:null 3d:["$","title",null,{"children":"Radial cluster tree | Just Security | Observable"}] 43:Tbb6,{ // Specify the chart’s dimensions. const width = 928; const height = width; const cx = width * 0.5; // adjust as needed to fit const cy = height * 0.54; // adjust as needed to fit const radius = Math.min(width, height) / 2 - 80; // 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); // Define the hierarchical structure based on 'Trend', 'Data', and 'Item' const root = tree(d3.hierarchy({name: "Root", children: nest(data, ["Trend", "Data", "Item"])}) .sort((a, b) => d3.ascending(a.data.name, b.data.name))); // Define color scale const colorScale = d3.scaleOrdinal() .domain(["bad", "good"]) .range(["#FF312E", "#1CD81F"]); // Creates the SVG container. const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [-cx, -cy, width, height]) .attr("style", "width: 100%; height: auto; font: 10px sans-serif;"); // Append links (representing the connection to the 'Data' level) svg.append("g") .attr("fill", "none") .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("stroke", "#555"); // Default color for links to 'Data' // Append nodes. const node = svg.append("g") .selectAll() .data(root.descendants()) .join("g") .attr("transform", d => `rotate(${d.x * 180 / Math.PI - 90}) translate(${d.y},0)`); node.append("circle") .attr("fill", d => d.children ? "#555" : colorScale(d.data.Type)) // Color leaf nodes based on Type .attr("r", 2.5); // Append labels with color-coded text, connecting lines, and links node.filter(d => !d.children) // Apply links and text only to leaf nodes (Items) .append("g") // Group for the label and its connecting line .attr("transform", d => `rotate(${d.x >= Math.PI ? 180 : 0})`) // Flip text orientation .call(g => g.append("path") // Connecting line .attr("d", `M${d => d.y + 2.5},0 L${d => (d.y + 15)},0`) // Adjust line length (15) as needed .attr("stroke", d => colorScale(d.data.Type)) .attr("stroke-opacity", 0.8) .attr("stroke-width", 1)) .call(g => g.append("a") .attr("xlink:href", d => d.data.URL) .attr("target", "_blank") .append("text") .attr("dy", "0.31em") .attr("x", d => d.x < Math.PI ? 20 : -20) // Adjust text position (20) to avoid overlap .attr("text-anchor", d => d.x < Math.PI ? "start" : "end") .attr("paint-order", "stroke") .attr("stroke", "white") .attr("fill", d => colorScale(d.data.Type)) // Color the text .text(d => d.data.Item)); // Use 'Item' for the label return svg.node(); }44:[{"id":"e65374209781891f37dea1e7a6e1c5e020a3009b8aedf113b4c80942018887a1176ad4945cf14444603ff91d3da371b3b0d72419fa8d2ee0f6e815732475d5de","href":"https://static.observableusercontent.com/files/e65374209781891f37dea1e7a6e1c5e020a3009b8aedf113b4c80942018887a1176ad4945cf14444603ff91d3da371b3b0d72419fa8d2ee0f6e815732475d5de","name":"flare-2.json","type":"application/octet-stream","lastModified":1746514142386.957,"size":11634},{"id":"da597633a3571529c9fee9458443573d430145f2274c2f6ce1f13277bf683e7a81506c160aa3890fe7a93d6d4a5683224000734950213b8113240512ffb88972","href":"https://static.observableusercontent.com/files/da597633a3571529c9fee9458443573d430145f2274c2f6ce1f13277bf683e7a81506c160aa3890fe7a93d6d4a5683224000734950213b8113240512ffb88972","name":"keeping-track-of-the-big-picture-radial.csv","type":"text/csv","lastModified":1746514820047.115,"size":8974}] 41:{"id":"0b77b8dbdf9503b9","slug":null,"title":"Radial cluster tree","thumbnail":"2ae8ab164000ece65aac9eb81c87de05084e5c281d0749216cfe7204622416c7","access_level":"public","create_time":"$D2025-05-06T06:49:02.386Z","update_time":"$D2025-05-06T07:20:41.558Z","view_time":null,"first_public_time":"$D2025-05-06T06:59:42.815Z","has_unpublished_edits":null,"fork":{"id":"022b50a822f43982","slug":"radial-cluster/2","title":"Radial cluster tree","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"1ab1602de2421bec","login":"just-security","name":"Just Security","avatar_url":"https://avatars-next.observableusercontent.com/7242fb286dffb55d400bf21f69447e678dea7a7dcaa01650df115694640361b5","tier":"starter_2024","bio":""},"version":258,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"fd484c7feb272834","login":"pooja-shah","name":"Pooja Shah","avatar_url":"https://avatars-next.observableusercontent.com/3cea478625a1a4487d16606b3e2f6ce23c2b42331757a7c3876a84c3e62ed891","tier":null,"bio":""}],"members":[{"type":"team","id":"1ab1602de2421bec","login":"just-security","name":"Just Security","avatar_url":"https://avatars-next.observableusercontent.com/7242fb286dffb55d400bf21f69447e678dea7a7dcaa01650df115694640361b5","tier":"starter_2024","role":"editor"},{"type":"individual","id":"fd484c7feb272834","login":"pooja-shah","name":"Pooja Shah","avatar_url":"https://avatars-next.observableusercontent.com/3cea478625a1a4487d16606b3e2f6ce23c2b42331757a7c3876a84c3e62ed891","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Radial cluster tree","cells":[{"id":1,"value":"

Radial cluster tree

D3 › Gallery

\n\n# Radial cluster tree\n\nD3’s [cluster layout](https://d3js.org/d3-hierarchy/cluster) produces node-link diagrams with leaf nodes at equal depth. These are less compact than [tidy trees](/@d3/radial-tree/2), but are useful for dendrograms, hierarchical clustering and [phylogenetic trees](/@d3/tree-of-life). See also the [Cartesian variant](/@d3/cluster/2).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":249,"value":"import * as d3 from \"https://cdn.jsdelivr.net/npm/d3@7\";\nimport * as Plot from \"https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6\";\nimport {autoType, csv} from \"https://cdn.jsdelivr.net/npm/d3-dsv@3\";\nimport {hierarchy, treemap} from \"https://cdn.jsdelivr.net/npm/d3-hierarchy@3\";\nimport {scaleOrdinal} from \"https://cdn.jsdelivr.net/npm/d3-scale@4\";","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"data = FileAttachment(\"keeping-track-of-the-big-picture-radial.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"function nest(data, keys) {\n if (!keys.length) return data;\n const [first, ...rest] = keys;\n return Object.values(data.reduce((acc, row) => {\n const key = row[first];\n if (!acc[key]) {\n acc[key] = { name: key, children: [] };\n }\n acc[key].children.push(rest.length ? row : {...row, name: row.Item}); // Ensure leaf nodes have a name\n return acc;\n }, {}));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$43","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W44","stdlib":"1"}} 42:"$41:body"