25:["$","title",null,{"children":"Collapsible Indented Tree | giammaria | Observable"}] 49:T868,indicators = { // Indicator properties /* * name: string * type: number * class: indicator_type[type] * isDataDriven: boolean * isToggle: boolean * backgroundDimensions: {width: number, height: number} * backgroundFill: string * backgroundStroke: string * foregroundFill: string * foregroundStroke: string * foregroundPathProps: {x: number, y: number, width: number, height: number, path: string} */ const indicator_type = ["expand/collapse", "select/intermediate/deselect", "node-icon"]; const expandForegroundSVGString = ''; const collapseForegroundSVGString = ''; const indicators = [ {name: "expand", type: 0, class: indicator_type[0], isDataDriven: false, isToggle: true, backgroundDimensions: {width: 9.5, height: 9.5}, backgroundFill: "rgba(0,0,0,0)", backgroundStroke: "rgba(0,0,0,0)", foregroundFill: "#AAA", foregroundStroke: "#AAA", foregroundPathProps: getSVGProperties(expandForegroundSVGString)}, {name: "collapse", type: 0, class: indicator_type[0], isDataDriven: false, isToggle: true, backgroundDimensions: {width: 9.5, height: 9.5}, backgroundFill: "rgba(0,0,0,0)", backgroundStroke: "rgba(0,0,0,0)", foregroundFill: "#AAA", foregroundStroke: "#AAA", foregroundPathProps: getSVGProperties(collapseForegroundSVGString)} ] return indicators; }4a:T54b,function initializeRoot(data, options) { let indicatorSize = 9.5; let marginLeft = Math.round(indicatorSize/2)+1; let expand = {shapeFill: "white", shapeStroke: "white", textFill:"#AAA", text: ">", rotate: 0, textAnchor: 'middle'} let collapse = {shapeFill: "white", shapeStroke: "white", textFill:"#AAA", text: ">", rotate: -90, textAnchor: 'middle'} //tree layout function let tree = d3.tree() .nodeSize([options.lineSpacing, options.indentSpacing]) //d3.stratify transforms a tree from link representation to hierarchy. let data_stratified = d3.stratify() .id(d => d['id']) .parentId(d => d['parent_id'])(data); let root = data_stratified; root.x0 = 0; root.y0 = 0; root.descendants().forEach((d, i) => { d.id = i; d._children = d.children; if (d.depth) d.children = null; }); const svg = d3.create("svg") .attr("viewBox", [-marginLeft, -options.marginTop, width, Math.max(options.minHeight, - options.lineSpacing + options.marginTop + options.marginBottom )]) .style("font", "10px sans-serif") .style("user-select", "none"); const gLink = svg.append("g") .attr("fill", "none") .attr("stroke", options.linkColor) .attr("stroke-width", .75); const gNode = svg.append("g") .attr("cursor", "pointer") .attr("pointer-events", "all"); }4b:T1989,function collapsibleIndent(data, options = {}) { //default options const { indentSpacing = 12, lineSpacing = 18, duration = 250, radius = 6, // radius of curve for links minHeight = 20, ease = d3.easeQuadInOut, // https://observablehq.com/@d3/easing-animations marginRight = 120, marginTop = 10, marginBottom = 10, linkColor = "#AAA", indicators = [] } = options; // WARNING: x and y are switched because the d3.tree is vertical rather than the default horizontal // settings let indicatorSize = 9.5; let marginLeft = Math.round(indicatorSize/2)+1; let expand = {shapeFill: "white", shapeStroke: "white", textFill:"#AAA", text: ">", rotate: 0, textAnchor: 'middle'} let collapse = {shapeFill: "white", shapeStroke: "white", textFill:"#AAA", text: ">", rotate: -90, textAnchor: 'middle'} //tree layout function let tree = d3.tree() .nodeSize([lineSpacing, indentSpacing]) //d3.stratify transforms a tree from link representation to hierarchy. let data_stratified = d3.stratify() .id(d => d['id']) .parentId(d => d['parent_id'])(data); let root = data_stratified; root.x0 = 0; root.y0 = 0; root.descendants().forEach((d, i) => { d.id = i; d._children = d.children; if (d.depth) d.children = null; }); const svg = d3.create("svg") .attr("viewBox", [-marginLeft, -marginTop, width, Math.max(minHeight, -lineSpacing + marginTop + marginBottom )]) .style("font", "10px sans-serif") .style("user-select", "none"); const gLink = svg.append("g") .attr("fill", "none") .attr("stroke", linkColor) .attr("stroke-width", .75); const gNode = svg.append("g") .attr("cursor", "pointer") .attr("pointer-events", "all"); let indexLast function update(source) { console.log(root) const nodes = root.descendants().reverse(); const links = root.links(); // Compute the new tree layout. tree(root); // node position function let index = -1; root.eachBefore(function(n) { n.x = ++index * lineSpacing; n.y = n.depth * indentSpacing; }); const height = Math.max(minHeight, index * lineSpacing + marginTop + marginBottom ); svg.transition().delay(indexLast d.id); // Enter any new nodes at the parent's previous position. const nodeEnter = node.enter().append("g") .attr("transform", d => `translate(${d.y},${source.x0})`) .attr("fill-opacity", 0) .attr("stroke-opacity", 0) .on("click", (event, d) => { d.children = d.children ? null : d._children; update(d); charge .attr("fill", d => d._children ? ( d.children ? collapse.textFill : expand.textFill ) : "none") .text(d => d._children ? ( d.children ? collapse.text : expand.text ) : ""); expandCollapseBox.attr("fill", d => d._children ? ( d.children ? collapse.shapeFill : expand.shapeFill ) : "none") }); // expand/collapse indicator let expandCollapseBox = nodeEnter.append("rect") .attr("width", indicatorSize) .attr("height", indicatorSize) .attr("x", -indicatorSize/2) .attr("y", -indicatorSize/2) .attr("fill", d => d._children ? ( d.children ? collapse.shapeFill : expand.shapeFill ) : "none") .attr("stroke", d => d._children ? expand.shapeStroke : collapse.shapeStroke) .attr("stroke-width", .5); // expand/collapse indicator symbol let charge = nodeEnter.append("text") .classed('expand-collapse-indicator-text', true) .attr("x", 0 ) .attr("text-anchor", d => d._children ? ( d.children ? collapse.textAnchor : expand.textAnchor ) : "middle") .attr("alignment-baseline", "central") .attr("fill", d => d._children ? ( d.children ? collapse.textFill : expand.textFill ) : "none") .text(d => d._children ? ( d.children ? collapse.text : expand.text ) : "") .attr("transform", d=> `rotate(${d._children ? ( d.children ? collapse.rotate : expand.rotate ) : 0})`); // label text let label = nodeEnter.append("text") .attr("x", 5+indicatorSize) .attr("text-anchor", "start") .attr("dy", "0.32em") .text(d => d.data.label); // Transition nodes to their new position. const nodeUpdate = node.merge(nodeEnter).transition().duration(duration).ease(ease) .attr("transform", d => `translate(${d.y},${d.x})`) .attr("fill-opacity", 1) .attr("stroke-opacity", 1) nodeUpdate .selectAll('.expand-collapse-indicator-text') .attr("text-anchor", d => d._children ? ( d.children ? collapse.textAnchor : expand.textAnchor ) : "middle") .attr("transform", d=> `rotate(${d._children ? ( d.children ? collapse.rotate : expand.rotate ) : 0})`); // Transition exiting nodes to the parent's new position. const nodeExit = node.exit().transition().duration(duration).ease(ease).remove() .attr("transform", d => `translate(${d.y},${source.x})`) .attr("fill-opacity", 0) .attr("stroke-opacity", 0); // Update the links… const link = gLink.selectAll("path") .data(links, d => d.target.id); // Enter any new links at the parent's previous position. const linkEnter = link.enter().append("path") .attr("stroke-opacity", 0) .attr("d", d => makeLink([d.source.y,source.x] , [d.target.y + (d.target._children ? 0 : indicatorSize/2 ), source.x] , radius) ); // Transition links to their new position. link.merge(linkEnter).transition().duration(duration).ease(ease) .attr("stroke-opacity", 1) .attr("d", d => makeLink([d.source.y, d.source.x] , [d.target.y + (d.target._children ? 0 : indicatorSize/2 ), d.target.x] , radius)); // Transition exiting nodes to the parent's new position. link.exit().transition().duration(duration).ease(ease).remove() .attr("stroke-opacity", 0) .attr("d", d => makeLink([d.source.y, source.x] , [d.target.y + (d.target._children ? 0 : indicatorSize/2 ), source.x] , radius) ); // Stash the old positions for transition. root.eachBefore(d => { d.x0 = d.x; d.y0 = d.y; }); indexLast = index // to know if viewbox is expanding or contracting } update(root); return svg.node(); }4c:[{"id":"06039d87e2d8d4ee26709f1c6e6370e888a274bb8b3c3d57b97a47fdca6e146979c3f78a466ff414754b14d2f410d2464303e8acd1d6af140d23d946bd738483","href":"https://static.observableusercontent.com/files/06039d87e2d8d4ee26709f1c6e6370e888a274bb8b3c3d57b97a47fdca6e146979c3f78a466ff414754b14d2f410d2464303e8acd1d6af140d23d946bd738483","name":"group_dataset@1.json","type":"application/json","lastModified":1682538083670.833,"size":890948},{"id":"be4294525cf17da1a0b1d824c82a2d856338b9e2e2e3b566e920fe2d2a37597050c24968c3c4049f9d44bd0d42da6c0b698c024e739601a3d25cefa0f7e04fe9","href":"https://static.observableusercontent.com/files/be4294525cf17da1a0b1d824c82a2d856338b9e2e2e3b566e920fe2d2a37597050c24968c3c4049f9d44bd0d42da6c0b698c024e739601a3d25cefa0f7e04fe9","name":"group_dataset.json","type":"application/json","lastModified":1682527027799.611,"size":859321}] 29:{"id":"21c8d965de7e3c09","slug":null,"title":"Collapsible Indented Tree","thumbnail":"a0eed6a1251507683fc2ada3539bf41faca65a32cb11672c7550324d9151caa0","access_level":"public","create_time":"$D2023-04-26T16:18:41.163Z","update_time":"$D2023-04-28T15:18:19.774Z","view_time":null,"first_public_time":"$D2023-04-26T16:18:41.163Z","has_unpublished_edits":null,"fork":{"id":"7afebda2830eb836","slug":"collapsible-indented-tree","title":"Collapsible Indented Tree","owner":{"id":"cf45be0120eccaad","login":"laotzunami","name":"Lao"}},"stars":0,"starred":false,"owner":{"type":"team","id":"4ffb92ef16fee1b6","login":"giammaria","name":"","avatar_url":"https://avatars-next.observableusercontent.com/7f4540d75ba2b09b87989db030724d8dc3e666c8c12105b170c0ac73de1b1f01","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":743,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"acb1462e3965fd7b","login":"giammaria","name":"","avatar_url":"https://avatars-next.observableusercontent.com/7f4540d75ba2b09b87989db030724d8dc3e666c8c12105b170c0ac73de1b1f01","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"acb1462e3965fd7b","login":"giammaria","name":"","avatar_url":"https://avatars-next.observableusercontent.com/7f4540d75ba2b09b87989db030724d8dc3e666c8c12105b170c0ac73de1b1f01","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Collapsible Indented Tree","cells":[{"id":0,"value":"# Collapsible Indented Tree","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":407,"value":"{\n console.clear();\n return collapsibleIndent(data, options)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":664,"value":"## Options","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":657,"value":"options = ({\n indentSpacing: 12,\n lineSpacing: 18,\n duration: 300,\n radius: 6, // radius of curve for links\n minHeight: 20,\n indicatorSize: 9.5,\n ease: d3.easeQuadInOut, // https://observablehq.com/@d3/easing-animations\n marginRight: 10,\n marginTop: 10,\n marginBottom: 10,\n linkColor: \"#AAA\",\n indicators: indicators\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":668,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":666,"value":"## Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":729,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"makeLink = (start, end, radius) => {\n const path = d3.path();\n const dh = 4/3*Math.tan(Math.PI/8) // tangent handle offset\n\n //flip curve\n let fx, fy\n if(end[0] - start[0] == 0){ fx = 0}\n else if(end[0] - start[0] > 0) {fx = 1} \n else {fx = -1}\n if(end[1] - start[1] == 0){ fy = 0}\n else if(end[1] - start[1] > 0) {fy = 1} \n else {fy = -1}\n\n //scale curve when dx or dy is less than the radius\n if( radius == 0 ){ fx=0; fy=0}\n else{\n fx *= Math.min( Math.abs(start[0]-end[0]), radius) / radius\n fy *= Math.min( Math.abs(start[1]-end[1]), radius) / radius\n }\n\n path.moveTo(...start);\n path.lineTo(...[start[0], end[1]-fy*radius]);\n path.bezierCurveTo(\n ...[start[0], end[1]+fy*radius*(dh-1)] , \n ...[start[0]+fx*radius*(1-dh), end[1]], \n ...[start[0]+fx*radius, end[1]]);\n path.lineTo(...end);\n return path\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":684,"value":"getSVGProperties = function(svgString){\n //extract the viewBox values\n const viewBoxRegex = /viewBox=\"([^\"]*)\"/;\n let viewBoxMatches = viewBoxRegex.exec(svgString);\n let viewBox = viewBoxMatches ? viewBoxMatches[1] : null;\n let viewBoxElements = viewBox ? viewBox.split(' '): null;\n\n //extract the path value\n const dAttributeRegex = /]*d=\"([^\"]*)\"/;\n let dAttributeMatches = dAttributeRegex.exec(svgString);\n let dAttribute = dAttributeMatches ? dAttributeMatches[1] : null;\n\n // return the SVG properties\n return {\n x: viewBoxElements && viewBoxElements[0] ? viewBoxElements[0] : null,\n y: viewBoxElements && viewBoxElements[1] ? viewBoxElements[1] : null,\n width: viewBoxElements && viewBoxElements[2] ? viewBoxElements[2] : null,\n height: viewBoxElements && viewBoxElements[3] ? viewBoxElements[3] : null,\n path: dAttribute\n }\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":654,"value":"## Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":461,"value":"data = FileAttachment(\"group_dataset@1.json\").json().then(d=>\n d.map(d=>{\n d['id'] = d['id'] === \"NULL\" ? null : d['id'];\n d['parent_id'] = d['parent_id'] === \"NULL\" ? null : d['parent_id'];\n d['label'] = d['label'] === \"NULL\" ? 'NRRE Groups' : d['label'];\n d['svg-element'] = d['svg-element'] === \"NULL\" ? null : d['svg-element'];\n return d;\n })\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":638,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":641,"value":"import {logTail} from '@sorig/console-log-without-leaving-your-notebook'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"## Resources:\n\n - [D3 Hierarchy Collection](https://observablehq.com/collection/@d3/d3-hierarchy)\n - [Easing animations](https://observablehq.com/@d3/easing-animations)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 24:null