3c:null 3d:["$","title",null,{"children":"Collapsible tree | Just Security | Observable"}] 43:T1052,chart = async () => { const width = 928; const marginTop = 10; const marginRight = 10; const marginBottom = 10; const marginLeft = 40; const data = await csv(await FileAttachment("keeping-track-of-the-big-picture-col-tree@1.csv").url()); const root = transformData(data); const dx = 10; const dy = (width - marginRight - marginLeft) / (1 + root.height); const treeLayout = tree().nodeSize([dx, dy]); const diagonal = linkHorizontal().x(d => d.y).y(d => d.x); const svg = create("svg") .attr("width", width) .attr("height", dx) .attr("viewBox", [-marginLeft, -marginTop, width, dx]) .attr("style", "max-width: 100%; height: auto; font: 10px sans-serif; user-select: none;"); const gLink = svg.append("g") .attr("fill", "none") .attr("stroke", "#555") .attr("stroke-opacity", 0.4) .attr("stroke-width", 1.5); const gNode = svg.append("g") .attr("cursor", "pointer") .attr("pointer-events", "all"); function update(event, source) { const duration = event?.altKey ? 2500 : 250; const nodes = root.descendants().reverse(); const links = root.links(); treeLayout(root); let left = root; let 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", 2.5) .attr("fill", d => d._children ? "#555" : "#999") .attr("stroke-width", 10); nodeEnter.append("text") .attr("dy", "0.31em") .attr("x", d => d._children ? -6 : 6) .attr("text-anchor", d => d._children ? "end" : "start") .html(d => { if (d.data.url) { const color = d.data.type === "bad" ? "#FF312E" : d.data.type === "good" ? "#1CD81F" : "currentColor"; return `${d.data.name}`; } else { return `${d.data.name}`; } }) .attr("stroke-linejoin", "round") .attr("stroke-width", 3) .attr("stroke", "white") .attr("paint-order", "stroke"); const nodeUpdate = node.merge(nodeEnter).transition(transition) .attr("transform", d => `translate(${d.y},${d.x})`) .attr("fill-opacity", 1) .attr("stroke-opacity", 1); const nodeExit = 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("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 = 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); return svg.node(); };44:[{"id":"32bdbe641764000dbffeabf3d6a73d4a818c05650429b762e7998cfcaf64b459529c87c3fcca841ecd435fa8d0bf47857f47099c525221d380908961f84f16fd","href":"https://static.observableusercontent.com/files/32bdbe641764000dbffeabf3d6a73d4a818c05650429b762e7998cfcaf64b459529c87c3fcca841ecd435fa8d0bf47857f47099c525221d380908961f84f16fd","name":"keeping-track-of-the-big-picture-col-tree@1.csv","type":"text/csv","lastModified":1746517900184.516,"size":10996}] 41:{"id":"69b904f6477aa811","slug":null,"title":"Collapsible tree","thumbnail":"2f8b521e1224e6af49adb810e00a7dd86fd7093be99252824734bbc1d7be82f8","access_level":"public","create_time":"$D2025-05-06T07:41:24.915Z","update_time":"$D2025-05-06T08:13:33.146Z","view_time":null,"first_public_time":"$D2025-05-06T07:41:24.915Z","has_unpublished_edits":null,"fork":{"id":"e257f81c745be447","slug":"collapsible-tree","title":"Collapsible 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":524,"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":0,"collection":null,"type":"notebook","body":{"titling":"auto","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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":508,"value":"import { hierarchy } from \"d3\";\n\ntransformData = (data) => {\n const root = { name: \"Main\", children: [] };\n\n data.forEach((d) => {\n const levels = [d.Main, d.Trend, d.Data, d.Item];\n let currentNode = root;\n\n for (let i = 1; i < levels.length; i++) {\n const levelName = levels[i];\n if (levelName) {\n let childNode = currentNode.children.find(child => child.name === levelName);\n if (!childNode) {\n childNode = { name: levelName, children: [] };\n currentNode.children.push(childNode);\n }\n currentNode = childNode;\n }\n }\n\n const itemName = levels[levels.length - 1];\n if (itemName) {\n currentNode.children.push({\n name: itemName,\n url: d.URL,\n type: d.Type,\n });\n }\n });\n\n function cleanUp(node) {\n if (node.children && node.children.length === 0) {\n delete node.children;\n } else if (node.children) {\n node.children.forEach(cleanUp);\n }\n }\n cleanUp(root);\n\n return hierarchy(root);\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$43","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"data = FileAttachment(\"keeping-track-of-the-big-picture-col-tree@1.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W44","stdlib":"1"}} 42:"$41:body"