31:T4c8,{ var svgDims = [600,300] var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style","background:white;border:1px solid black") //group var outer = svg.append("g") .attr("transform",`translate(300,50)`) //nodeLinks for(var i = 0; i < nodeLinks.length; i++){ var pathData = d3.linkVertical().x(d => d.x).y(d => d.y)(nodeLinks[i]) outer.append("path") .attr("stroke","black") .attr("fill","none") .attr("d",pathData) } //treeNodes for(var i = 0;i < descendants.length; i++){ outer.append("circle") .attr("r",() => { if(descendants[i].depth < 2){return 30} else{return 15} }) .attr("stroke","black") .attr("fill","pink") .attr("cx", descendants[i].x) .attr("cy", descendants[i].y) } //labels for(var i = 0; i < descendants.length; i++){ outer.append("text") .text(descendants[i].id) .attr("x",descendants[i].x) .attr("y",() => { if(descendants[i].depth < 2){return descendants[i].y + 5} else{return descendants[i].y + 40} }) .attr("text-anchor","middle") .attr("font-size",() => { if(descendants[i].depth < 2){return 18} else{return 12} }) } return svg.node() }32:T4ca,{ var svgDims = [300,600] var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style","background:white;border:1px solid black") //group var outer = svg.append("g") .attr("transform",`translate(50,300)`) //nodeLinks for(var i = 0; i < nodeLinks.length; i++){ var pathData = d3.linkHorizontal().x(d => d.y).y(d => d.x)(nodeLinks[i]) outer.append("path") .attr("stroke","black") .attr("fill","none") .attr("d",pathData) } //treeNodes for(var i = 0;i < descendants.length; i++){ outer.append("circle") .attr("r",() => { if(descendants[i].depth < 2){return 30} else{return 15} }) .attr("stroke","black") .attr("fill","pink") .attr("cx", descendants[i].y) .attr("cy", descendants[i].x) } //labels for(var i = 0; i < descendants.length; i++){ outer.append("text") .text(descendants[i].id) .attr("x",descendants[i].y) .attr("y",() => { if(descendants[i].depth < 2){return descendants[i].x + 5} else{return descendants[i].x + 40} }) .attr("text-anchor","middle") .attr("font-size",() => { if(descendants[i].depth < 2){return 18} else{return 12} }) } return svg.node() }33:[] 2f:{"title":"\nStarter Template for Data Vizualization and Communications\n","cells":[{"id":0,"value":"html`\n\n

\nStarter Template for Data Vizualization and Communications\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":967,"value":"md`\n## Vertical Trees\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":971,"value":"md`\n## Horizontal Trees\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":974,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":934,"value":"viewof s = slider({min:10,max:100})","pinned":true,"hidden":false,"mode":"ojs"},{"id":936,"value":"viewof t = slider({min:10,max:100})","pinned":true,"hidden":false,"mode":"ojs"},{"id":928,"value":"root = d3.stratify().id(d =>d.name).parentId(d => d.parent)(treeData).sum(d => 1)\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":930,"value":"descendants = d3.tree().nodeSize([s,t])(root).descendants()","pinned":true,"hidden":false,"mode":"ojs"},{"id":944,"value":"nodeLinks = d3.tree().nodeSize([s,t])(root).links()","pinned":true,"hidden":false,"mode":"ojs"},{"id":922,"value":"md`\n---\n## Datasets\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":925,"value":"treeData = [{name:\"US\",parent:\"\"},{name:\"NY\",parent:\"US\"},{name:\"PA\",parent:\"US\"},{name:\"Albany\",parent:\"NY\"},{name:\"Buffalo\",parent:\"NY\"},{name:\"Rochester\",parent:\"NY\"},{name:\"Erie\",parent:\"PA\"},{name:\"Philadelphia\",parent:\"PA\"},{name:\"Pittsburgh\",parent:\"PA\"},]","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"md`\n---\n## Libraries\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"import {slider,button,select,text,radio,checkbox,number} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"stdlib = require( \"https://unpkg.com/@stdlib/stdlib@0.0.32/dist/stdlib-flat.min.js\" )","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}