2d:null 2e:["$","title",null,{"children":"Collapsible tree | Cream Collar | Observable"}] 33:T261d,// chart = { // const width = 1500; // const marginTop = 10; // const marginRight = 5; // const marginBottom = 10; // const marginLeft = 100; // const root = d3.hierarchy(roles_data_json); // const dx = 20; // Vertical spacing between nodes // const defaultDy = (width - marginRight - marginLeft) / (1 + root.height); // Uniform spacing // const tree = d3.tree().nodeSize([dx, defaultDy]); // const diagonal = d3.linkHorizontal().x(d => d.y).y(d => d.x); // const svg = d3.create("svg") // .attr("width", width) // .attr("height", dx) // .attr("viewBox", [-marginLeft, -marginTop, width, dx]) // .attr("style", "max-width: 100%; height: auto; font: 16px sans-serif; user-select: none;"); // const gLink = svg.append("g") // .attr("fill", "none") // .attr("stroke-opacity", 0.6) // .attr("stroke-width", 1.5); // const gNode = svg.append("g") // .attr("cursor", "pointer") // .attr("pointer-events", "all"); // const level1Nodes = root.children || []; // const level1ColorMap = new Map(); // const colorScale = d3.scaleOrdinal(d3.schemeCategory10); // level1Nodes.forEach((node, index) => { // level1ColorMap.set(node, colorScale(index)); // }); // function getNodeColor(d) { // while (d.depth > 1) d = d.parent; // return level1ColorMap.get(d) || "#000"; // } // function update(event, source) { // const duration = event?.altKey ? 2500 : 250; // const nodes = root.descendants().reverse(); // const links = root.links(); // tree(root); // let left = root, right = root; // root.eachBefore(node => { // if (node.x < left.x) left = node; // if (node.x > right.x) right = node; // }); // const height = right.x - left.x + marginTop + marginBottom; // const transition = svg.transition() // .duration(duration) // .attr("height", height) // .attr("viewBox", [-marginLeft, left.x - marginTop, width, height]) // .tween("resize", window.ResizeObserver ? null : () => () => svg.dispatch("toggle")); // const node = gNode.selectAll("g").data(nodes, d => d.id); // const nodeEnter = node.enter().append("g") // .attr("transform", d => `translate(${source.y0},${source.x0})`) // .attr("fill-opacity", 0) // .attr("stroke-opacity", 0) // .on("click", (event, d) => { // d.children = d.children ? null : d._children; // update(event, d); // }); // nodeEnter.append("circle") // .attr("r", 5) // .attr("fill", getNodeColor) // .attr("stroke", "black") // .attr("stroke-width", 1.5); // nodeEnter.append("text") // .attr("dy", "0.31em") // .attr("x", d => d._children ? -6 : 6) // .attr("text-anchor", d => d._children ? "end" : "start") // .text(d => d.data.name) // .attr("stroke-linejoin", "round") // .attr("stroke-width", 3) // .attr("stroke", "white") // .attr("paint-order", "stroke"); // node.merge(nodeEnter).transition(transition) // .attr("transform", d => `translate(${d.y},${d.x})`) // .attr("fill-opacity", 1) // .attr("stroke-opacity", 1); // node.exit().transition(transition).remove() // .attr("transform", d => `translate(${source.y},${source.x})`) // .attr("fill-opacity", 0) // .attr("stroke-opacity", 0); // const link = gLink.selectAll("path").data(links, d => d.target.id); // const linkEnter = link.enter().append("path") // .attr("stroke", d => getNodeColor(d.target)) // .attr("stroke-width", 2) // .attr("d", d => { // const o = {x: source.x0, y: source.y0}; // return diagonal({source: o, target: o}); // }); // link.merge(linkEnter).transition(transition) // .attr("d", diagonal); // link.exit().transition(transition).remove() // .attr("d", d => { // const o = {x: source.x, y: source.y}; // return diagonal({source: o, target: o}); // }); // root.eachBefore(d => { // d.x0 = d.x; // d.y0 = d.y; // }); // } // root.x0 = defaultDy / 2; // ✅ Fixed: Now uses consistent spacing // root.y0 = 0; // root.descendants().forEach((d, i) => { // d.id = i; // d._children = d.children; // if (d.depth && d.data.name.length !== 7) d.children = null; // }); // update(null, root); // return svg.node(); // } chart = { // Define chart dimensions and margins const width = 1200; const marginTop = 10; const marginRight = 5; const marginBottom = 10; const marginLeft = 100; // Create a hierarchy structure from the input data const root = d3.hierarchy(final_trending_roles); const dx = 30; // Vertical spacing between nodes const dy = (width - marginRight - marginLeft) / (1 + root.height); // Horizontal spacing based on tree height // Create a tree layout with defined node size const tree = d3.tree().nodeSize([dx, dy]); // Define a diagonal path generator for links const diagonal = d3.linkHorizontal().x(d => d.y).y(d => d.x); // Create an SVG element const svg = d3.create("svg") .attr("width", width) .attr("height", dx) // Initial height, updated dynamically .attr("viewBox", [-marginLeft, -marginTop, width, dx]) .attr("style", "max-width: 100%; height: auto; font: 16px sans-serif; user-select: none;"); // Create a group for links (edges) const gLink = svg.append("g") .attr("fill", "none") .attr("stroke-opacity", 0.6) .attr("stroke-width", 1.5); // Create a group for nodes (circles and labels) const gNode = svg.append("g") .attr("cursor", "pointer") .attr("pointer-events", "all"); // Assign unique colors to each Level 1 node const level1Nodes = root.children || []; const level1ColorMap = new Map(); const colorScale = d3.scaleOrdinal(d3.schemeCategory10); level1Nodes.forEach((node, index) => { level1ColorMap.set(node, colorScale(index)); }); // Function to get node color based on Level 1 parent function getNodeColor(d) { while (d.depth > 1) d = d.parent; return level1ColorMap.get(d) || "#000"; // Default to black if not found } function update(event, source) { const duration = event?.altKey ? 2500 : 250; // Slow animation if Alt key is pressed const nodes = root.descendants().reverse(); // Get all nodes const links = root.links(); // Get all links tree(root); // Compute new tree layout // Find leftmost and rightmost nodes to adjust height let left = root, right = root; root.eachBefore(node => { if (node.x < left.x) left = node; if (node.x > right.x) right = node; }); const height = right.x - left.x + marginTop + marginBottom; const transition = svg.transition() .duration(duration) .attr("height", height) .attr("viewBox", [-marginLeft, left.x - marginTop, width, height]) .tween("resize", window.ResizeObserver ? null : () => () => svg.dispatch("toggle")); // Update nodes const node = gNode.selectAll("g").data(nodes, d => d.id); // Enter new nodes const nodeEnter = node.enter().append("g") .attr("transform", d => `translate(${source.y0},${source.x0})`) .attr("fill-opacity", 0) .attr("stroke-opacity", 0) .on("click", (event, d) => { d.children = d.children ? null : d._children; // Toggle children update(event, d); }); // Add circles for nodes nodeEnter.append("circle") .attr("r", 5) .attr("fill", getNodeColor) .attr("stroke", "black") .attr("stroke-width", 1.5); // Add text labels for nodes nodeEnter.append("text") .attr("dy", "0.31em") .attr("x", d => d._children ? -6 : 6) .attr("text-anchor", d => d._children ? "end" : "start") .text(d => d.data.name) .attr("stroke-linejoin", "round") .attr("stroke-width", 3) .attr("stroke", "white") .attr("paint-order", "stroke"); // Merge and transition nodes node.merge(nodeEnter).transition(transition) .attr("transform", d => `translate(${d.y},${d.x})`) .attr("fill-opacity", 1) .attr("stroke-opacity", 1); // Exit and remove old nodes node.exit().transition(transition).remove() .attr("transform", d => `translate(${source.y},${source.x})`) .attr("fill-opacity", 0) .attr("stroke-opacity", 0); // Update links const link = gLink.selectAll("path").data(links, d => d.target.id); // Enter new links const linkEnter = link.enter().append("path") .attr("stroke", d => getNodeColor(d.target)) .attr("stroke-width", 2) .attr("d", d => { const o = {x: source.x0, y: source.y0}; return diagonal({source: o, target: o}); }); // Merge and transition links link.merge(linkEnter).transition(transition) .attr("d", diagonal); // Exit and remove old links link.exit().transition(transition).remove() .attr("d", d => { const o = {x: source.x, y: source.y}; return diagonal({source: o, target: o}); }); // Store old positions for animation root.eachBefore(d => { d.x0 = d.x; d.y0 = d.y; }); } // Initialize tree layout root.x0 = dy / 2; root.y0 = 0; root.descendants().forEach((d, i) => { d.id = i; d._children = d.children; if (d.depth && d.data.name.length !== 7) d.children = null; }); update(null, root); // Call update to render the tree return svg.node(); // Return the generated SVG element } 34:[{"id":"9f4071b1d33e805ad114052a244e8a6adb336991829c23c9b07d334994f24a6bf7fff7ac28271edd931ac63eea27202710b4eda6711cd84dcd4ba1b13f57c25b","href":"https://static.observableusercontent.com/files/9f4071b1d33e805ad114052a244e8a6adb336991829c23c9b07d334994f24a6bf7fff7ac28271edd931ac63eea27202710b4eda6711cd84dcd4ba1b13f57c25b","name":"FINAL_TRENDING_ROLES@1.json","type":"application/json","lastModified":1738908953802.816,"size":11110}] 31:{"id":"e8c765006a87b057","slug":"collapsible-tree-roles","title":"Collapsible tree","thumbnail":"6b74e4890b0eb026fb09e971a9a308e065b4f7a737a062d5c4f29732aeec1a73","access_level":"public","create_time":"$D2025-02-07T06:15:53.802Z","update_time":"$D2025-02-07T06:21:33.527Z","view_time":null,"first_public_time":"$D2025-02-07T06:15:53.802Z","has_unpublished_edits":null,"fork":{"id":"0268f1b64c9487b6","slug":"roles-final","title":"Collapsible tree","owner":{"id":"22cba57a74f63568","login":"cream-collar","name":"Cream Collar"}},"stars":0,"starred":false,"owner":{"type":"team","id":"22cba57a74f63568","login":"cream-collar","name":"Cream Collar","avatar_url":"https://avatars-next.observableusercontent.com/3aa4a43c3dc278c9a03af1aa0854b78ae7fec7729eec85989ca0a2dc36aa6f50","tier":"starter_2024"},"version":555,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"91a24470a993c1fb","login":"anumula-navyasri","name":"Anumula Navyasri","avatar_url":"https://avatars-next.observableusercontent.com/68f510423b55e36e9b407acbee9f0fae1d8b945a09eadc00b1e4b58cbda50c2e","tier":null}],"members":[{"type":"individual","id":"91a24470a993c1fb","login":"anumula-navyasri","name":"Anumula Navyasri","avatar_url":"https://avatars-next.observableusercontent.com/68f510423b55e36e9b407acbee9f0fae1d8b945a09eadc00b1e4b58cbda50c2e","tier":null,"role":"editor"},{"type":"team","id":"22cba57a74f63568","login":"cream-collar","name":"Cream Collar","avatar_url":"https://avatars-next.observableusercontent.com/3aa4a43c3dc278c9a03af1aa0854b78ae7fec7729eec85989ca0a2dc36aa6f50","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Collapsible tree","cells":[{"id":0,"value":"

Collapsible tree

D3 › Gallery

\n\n# Collapsible tree\n\nClick a black node to expand or collapse [the tree](/@d3/tidy-tree).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":549,"value":"final_trending_roles = FileAttachment(\"FINAL_TRENDING_ROLES@1.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":412,"value":"Alternatively, create a [tidy tree](https://observablehq.com/@observablehq/plot-tree-tidy-json?intent=fork) in a few lines of code with [Observable Plot](/plot/)’s tree mark.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":545,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"