2c:null 2d:["$","title",null,{"children":"Tree graph | anndawn | Observable"}] 32:T1186,// tidyTree graph tidyTree = data=> { const fs= font_size +"px sans-serif" let tree = data => d3.tree() .size([width*2, width]) .separation((a, b) => (a.parent == b.parent ? 1 : 3)) (d3.hierarchy(data)); let height = width const svg = d3.select(DOM.svg(width, height)) .style("width", "100%") .style("height", "100%") .style("padding", "10px") .style("box-sizing", "border-box") .style("font", fs); const g = svg.append("g"); const linkgroup = g.append("g") .attr("fill", "none") .attr("stroke", "#555") .attr("stroke-opacity", 0.4) .attr("stroke-width", 1.5); const nodegroup = g.append("g") .attr("stroke-linejoin", "round") .attr("stroke-width", 3); function newdata (animate = true) { let root = tree(data); let links_data = root.links(); let links = linkgroup .selectAll("path") .data(links_data, d => d.source.data.name+"_"+d.target.data.name); links.exit().remove(); let newlinks = links .enter() .append("path"); let t = d3.transition() .duration(animate ? 400 : 0) .ease(d3.easeLinear) .on("end", function() { const box = g.node().getBBox(); svg.transition().duration(1000).attr("viewBox", `${box.x} ${box.y} ${box.width} ${box.height}`); }); let alllinks = linkgroup.selectAll("path") alllinks .transition(t) .attr("d", d3.linkHorizontal() .x(d => d.y) .y(d => d.x)); let nodes_data = root.descendants().reverse(); let nodes = nodegroup .selectAll("g") .data(nodes_data, function (d) { if (d.parent) { return d.parent.data.name+d.data.name; } return d.data.name}); nodes.exit().remove(); let newnodes = nodes .enter().append("g"); let allnodes = animate ? nodegroup.selectAll("g").transition(t) : nodegroup.selectAll("g"); allnodes .attr("transform", d => ` translate(${d.y},${d.x}) `); newnodes.append("circle") .attr("r", 4.5) .on ("click", function (d) { let altChildren = d.data.altChildren || []; let children = d.data.children; d.data.children = altChildren; d.data.altChildren = children; newdata (); }); nodegroup.selectAll("g circle").attr("fill", function (d) { let altChildren = d.data.altChildren || []; let children = d.data.children; return d.children || (children && (children.length > 0 || altChildren.length > 0)) ? "#555" : "#999" } ); newnodes.append("text") .attr("dy", "0.31em") .text(d => d.data.name.replace(/\d*#/, '')) .clone(true).lower() .attr("stroke", "white"); nodegroup.selectAll("g text") .attr("x", d => !d.children ? 6 : -6) .attr("text-anchor", d => !d.children ? "start" : "end") //.attr("transform", d => d.x >= Math.PI ? "rotate(180)" : null); } newdata (false); document.body.appendChild(svg.node()); const box = g.node().getBBox(); box.width = box.height = Math.max(box.width, box.height)*1.1; svg.remove() .attr("width", box.width) .attr("height", box.height) .attr("viewBox", `${box.x} ${box.y} ${box.width} ${box.height}`) .attr("preserveAspectRatio","xMidYMid meet"); const zoom = d3.zoom() .extent([[0, 0], [width, height]]) .scaleExtent([1, 8]) .on("zoom", zoomed); svg.call(zoom); function reset() { svg.transition().duration(750).call( zoom.transform, d3.zoomIdentity, d3.zoomTransform(svg.node()).invert([width / 2, height / 2]) ); } function reset_imm() { svg.call( zoom.transform, d3.zoomIdentity, d3.zoomTransform(svg.node()).invert([width / 2, height / 2]) ); } function clicked(event, [x, y]) { event.stopPropagation(); svg.transition().duration(750).call( zoom.transform, d3.zoomIdentity.translate(width / 2, height / 2).scale(40).translate(-x, -y), d3.mouse(svg.node()) ); } function zoomed() { g.attr("transform", d3.event.transform); } return Object.assign(svg.node(), { zoomIn: () => svg.transition().call(zoom.scaleBy, 1.5), zoomOut: () => svg.transition().call(zoom.scaleBy, 0.8), zoomReset: reset, zoomReset_imm: reset_imm }) }33:T1a04,// radial tree and dendogram tree, pass in the tree parameter to generate different graphs chart = (data,tree) =>{ const fs= font_size + "px sans-serif" let height = width *2 let root=tree(d3.hierarchy(data).sort((a, b) => d3.ascending(a.data.name, b.data.name))); let color = d3.scaleOrdinal().domain(tree(data).leaves().map(d => {return d.parent.data.name})).range(d3.schemeCategory10) const svg = d3.select(DOM.svg(width*2, width*2)) .style("width", "100%") .style("height", "100%") .style("max-height", "100%") .style("padding", "10px") .style("box-sizing", "border-box") .style("font", fs) const g = svg.append("g"); const linkgroup = g.append("g") .attr("fill", "none") .attr("stroke", "#555") .attr("stroke-opacity", 0.4) .attr("stroke-width", 1.5); const nodegroup = g.append("g") .attr("stroke-linejoin", "round") .attr("stroke-width", 3); const myScale = d3.scaleLinear() .domain([d3.min(root.leaves().map(leaf => leaf.data.value)), d3.max(root.leaves().map(leaf => leaf.data.value))]) .range([0.3, 1]); function newdata (animate = true) { let root = tree(data); let links_data = root.links(); let links = linkgroup .selectAll("path") .data(links_data, d => d.source.data.name+"_"+d.target.data.name); links.exit().remove(); let newlinks = links .enter() .append("path") .attr("d", d3.linkRadial() .angle(d => d.x) .radius(0.1)); let t = d3.transition() .duration(animate ? 600 : 0) .ease(d3.easeLinear) .on("end", function() { const box = g.node().getBBox(); svg.transition().duration(0).attr("viewBox", `${box.x} ${box.y} ${box.width} ${box.height}`); }); let alllinks = linkgroup.selectAll("path") alllinks .transition(t) .attr("d", d3.linkRadial() .angle(d => d.x) .radius(d => d.y)); let nodes_data = root.descendants().reverse(); let nodes = nodegroup .selectAll("g") .data(nodes_data, function (d) { if (d.parent) { return d.parent.data.name+d.data.name; } return d.data.name}); nodes.exit().remove(); let newnodes = nodes.enter().append("g"); let allnodes = animate ? nodegroup.selectAll("g").transition(t): nodegroup.selectAll("g"); allnodes .attr("transform", d => ` rotate(${d.x * 180 / Math.PI - 90}) translate(${d.y},0) `); newnodes.append("circle") .attr("r", 4.5) // .on('mouseover', function(d, slicedData){ // if(d.children){ // d3.select(this).style("cursor", "pointer") // }}) .on ("click", function (d) { let altChildren = d.data.altChildren || []; let children = d.data.children; d.data.children = altChildren; d.data.altChildren = children; newdata (); }) nodegroup.selectAll("g circle") .attr("fill", d => { while (d.depth > 1) d = d.parent; return color(d.data.name); }) .attr("fill-opacity", d => myScale(d.data.value)) .attr("r", d => { let altChildren = d.data.altChildren || []; let children = d.data.children; return d.children || (children && (children.length > 0 || altChildren.length > 0)) ? 5 : 3 }) .on('mouseover', function(d){ let altChildren = d.data.altChildren || []; let children = d.data.children; if(d.children || (children && (children.length > 0 || altChildren.length > 0))){ d3.select(this).style("cursor", "pointer") }}) newnodes.append("text") .attr("dy", "0.31em") .text(d => d.data.name.replace(/\d*#/, '')) .clone(true).lower() .attr("stroke", "white") ; nodegroup.selectAll("g text") .attr("dy", "0.31em") .attr("x", d => { let altChildren = d.data.altChildren || []; let children = d.data.children; let check= d.children || (children && (children.length > 0 || altChildren.length > 0)) return d.x < Math.PI === !check ? 10 : -10}) .attr("text-anchor", d=>{ let altChildren = d.data.altChildren || []; let children = d.data.children; let check= d.children || (children && (children.length > 0 || altChildren.length > 0)) return d.x < Math.PI === !check ? "start" : "end"}) .attr("transform", d => d.x >= Math.PI ? "rotate(180)" : null) .style("font", d => fs) .style("font-weight", d => {let altChildren = d.data.altChildren || []; let children = d.data.children; return d.children || (children && (children.length > 0 || altChildren.length > 0)) ? "bold" : "normal"}) .attr("fill", "#161616") .text(d => d.data.name.replace(/\d*#/, '')) .filter(d => d.children) .clone(true).lower() .attr("stroke", "white") .attr("stroke-width", 4); } newdata (false); document.body.appendChild(svg.node()); const box = g.node().getBBox(); box.width = box.height = Math.max(box.width, box.height)*1.1; svg.remove() .attr("width", box.width) .attr("height", box.height) .attr("viewBox", `${box.x} ${box.y} ${box.width} ${box.height}`) .attr("preserveAspectRatio","xMidYMid meet"); const zoom = d3.zoom() .extent([[0, 0], [width, height]]) .scaleExtent([1, 8]) .on("zoom", zoomed); svg.call(zoom); function reset() { svg.transition().duration(750).call( zoom.transform, d3.zoomIdentity, d3.zoomTransform(svg.node()).invert([width / 2, height / 2]) ); } function reset_imm() { svg.call( zoom.transform, d3.zoomIdentity, d3.zoomTransform(svg.node()).invert([width / 2, height / 2]) ); } function clicked(event, [x, y]) { event.stopPropagation(); svg.transition().duration(750).call( zoom.transform, d3.zoomIdentity.translate(width / 2, height / 2).scale(40).translate(-x, -y), d3.mouse(svg.node()) ); } function zoomed() { g.attr("transform", d3.event.transform); } const originalNode = svg.node() const newNode = Object.assign(originalNode, { zoomIn: () => svg.transition().call(zoom.scaleBy, 1.5), zoomOut: () => svg.transition().call(zoom.scaleBy, 0.8), zoomReset: reset, zoomReset_imm: reset_imm }) return newNode }34:[{"id":"aef45e4dae5d10a7aff200ef894ea22803e5c93e9928e5d17e480ca070e5a8d4e5c3e7746ac8673a7c35c73c7c488b1bdbe5261b110ca859b419380bb485a06f","href":"https://static.observableusercontent.com/files/aef45e4dae5d10a7aff200ef894ea22803e5c93e9928e5d17e480ca070e5a8d4e5c3e7746ac8673a7c35c73c7c488b1bdbe5261b110ca859b419380bb485a06f","name":"name.json","type":"application/json","lastModified":1617547848325.099,"size":16243},{"id":"bdc41e8c94634e70959d235599bbddcd7b61f3a2f26db59fc477cf2a0a1808dddaff6e378e1f734c299d52c0833488bbc06e43fe8177de1a21972990142e2830","href":"https://static.observableusercontent.com/files/bdc41e8c94634e70959d235599bbddcd7b61f3a2f26db59fc477cf2a0a1808dddaff6e378e1f734c299d52c0833488bbc06e43fe8177de1a21972990142e2830","name":"flare-2@1.json","type":"application/json","lastModified":1617729566991.076,"size":11637}] 30:{"id":"eb8fa8e4719dd30d","slug":"test","title":"Tree graph","thumbnail":"508c420248fc4a965c9ab071a9557d576f628471408859bd20f6940fb2fdbc15","access_level":"public","create_time":"$D2021-04-04T14:46:06.334Z","update_time":"$D2021-09-01T03:22:54.569Z","view_time":null,"first_public_time":"$D2021-04-04T15:17:51.521Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"08b25cc9d2cc09a6","login":"anndawn","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a9bef462081f7a77e161e2b21c48a5ea6a7153836b0db2eb8a565396dcfc57c5","tier":"starter_2024"},"version":791,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b0fc265f2fad2840","login":"anndawn","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a9bef462081f7a77e161e2b21c48a5ea6a7153836b0db2eb8a565396dcfc57c5","tier":null}],"members":[{"type":"individual","id":"b0fc265f2fad2840","login":"anndawn","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a9bef462081f7a77e161e2b21c48a5ea6a7153836b0db2eb8a565396dcfc57c5","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":14,"collection":null,"type":"notebook","body":{"title":"Tree graph","cells":[{"id":0,"value":"md`# Tree graph`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"md`### Charts Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":722,"value":"radius= width*2/2.1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":754,"value":"md`#### Layouts`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"// dendogram tree layout\ntree_d = data =>d3.cluster().size([2 * Math.PI, radius - 100]) .separation((a, b) => (a.parent == b.parent ? 1 : 3) / a.depth)(d3.hierarchy(data))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"// radial tree layout\ntree_r=data => d3.tree()\n .size([2 * Math.PI, radius])\n .separation((a, b) => (a.parent == b.parent ? 1 : 2) / a.depth)\n (d3.hierarchy(data))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":696,"value":"// treemap is imported from another notebook\nimport {chart as treemap} with {data_treemap as data, font_size_treemap as fontsize_o} from '@anndawn/zoomable-treemap'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":708,"value":"md`### Data Preparation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"md`#### File Upload`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"viewof file_upload = fileuploader({\n description: \"Drop a file\",\n default: FileAttachment(\"flare-2@1.json\"),\n // remoteFile: remote\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":750,"value":"md`#### Format data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"// parsing the uploaded data\ndata_parse=JSON.parse(file_upload && file_upload.text ? await file_upload.text() : file_upload)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"// transform the data format into the flare structure to feed into the d3 tree graph\nfunction transform(root) {\n if (root === null)\n return null;\n if(root.display_titles)\n delete root['display_titles']\n\n return Object.keys(root).map((k, index )=> {\n const children = transform(root[k]);\n \n return {\n name: k,\n index,\n [children === null ? \"value\" : \"children\"] : children === null ? 1 : children\n \n // [children === null ? \"value\" : \"children\"] : children === null ? 1 : children\n }\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"// if no file is uploaded use the flare.json, else transform the uploaded data\n// use this data for the tidy tree, radial tree and the dendogram\ndata = {\n if (data_parse.name==\"flare_d3\"){return data_parse}\n else{return transform(data_parse)[0]}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":581,"value":"// use this data for the treemap, as it's not supposed to fold up the collapsed folders\ndata_treemap = {\n if (data_parse.name==\"flare_d3\"){return await FileAttachment(\"flare-2@1.json\").json()}\n else{return transform(data_parse)[0]}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":725,"value":"md`### Graph Generation and Control`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"viewof chartName = select({\n title: \"Choose Chart Type\",\n options: [\n \"Radial Dendogram\",\n \"Tidy Tree\", \n \"Radial Tidy tree\",\n \"Treemap\"\n ],\n value: \"Radial Tidy tree\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":735,"value":"md`#### Zoom and font control`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":731,"value":"font_size_treemap = font_size+1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":727,"value":"viewof font_size = Button([\n [\"+\", value => value + 3],\n [\"-\", value => value - 3],\n [\"Font Reset\", value => 12]\n], {value: 12, label: \"Font Size\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"zoom_button = {\n const form = html``;\n form.in.onclick = () => graph.zoomIn();\n form.out.onclick = () => graph.zoomOut();\n form.reset.onclick = () => graph.zoomReset();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"// depending on the selection, generate graphs\ngraph = {\n if (chartName==\"Radial Dendogram\"){\n return chart(data, tree_d)\n }\n else if (chartName==\"Radial Tidy tree\"){\n return chart(data,tree_r)\n }else if (chartName== \"Tidy Tree\")\n return tidyTree(data)\n else if (chartName== \"Treemap\")\n return treemap(data_treemap)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"md`### Download Buttons`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":742,"value":"// Modified serialize function to reset the graph and then download the svg\nserialize = {\n const xmlns = \"http://www.w3.org/2000/xmlns/\";\n const xlinkns = \"http://www.w3.org/1999/xlink\";\n const svgns = \"http://www.w3.org/2000/svg\";\n\n return function serialize(svg) {\n svg.zoomReset_imm()\n svg = svg.cloneNode(true);\n const fragment = window.location.href + \"#\";\n const walker = document.createTreeWalker(svg, NodeFilter.SHOW_ELEMENT);\n while (walker.nextNode()) {\n for (const attr of walker.currentNode.attributes) {\n if (attr.value.includes(fragment)) {\n attr.value = attr.value.replace(fragment, \"#\");\n }\n }\n }\n svg.setAttributeNS(xmlns, \"xmlns\", svgns);\n svg.setAttributeNS(xmlns, \"xmlns:xlink\", xlinkns);\n const serializer = new window.XMLSerializer;\n const string = serializer.serializeToString(svg);\n return new Blob([string], {type: \"image/svg+xml\"});\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"download_png=DOM.download(() => rasterize(graph), undefined, \"Save as PNG\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"download_svg= DOM.download(() => serialize(graph), undefined, \"Save as SVG\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"data_download = data_button(data, 'data.json')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":747,"value":"md`### Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"import {radio, select, slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"import {fileuploader} with {style as style} from \"@fil/fileuploader\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"// File Upload Style\nfunction style() {\n return html`