31:T4c3,{ 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)`) //links for(var i = 0; i < links.length; i++){ var pathData = d3.linkVertical().x(d => d.x).y(d => d.y)(links[i]) outer.append("path").attr("stroke","black").attr("d",pathData).attr("fill","none") } //nodes for(var i = 0; i < descendants.length; i++){ outer.append("circle") .attr("r",20) .attr("stroke","black") .attr("fill","cornflowerblue") .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 13} }) } return svg.node() }32:T4a4,{ 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(50,150)`) //links for(var i = 0; i < links.length; i++){ var pathData = d3.linkHorizontal().x(d => d.y).y(d => d.x)(links[i]) outer.append("path").attr("stroke","black").attr("d",pathData).attr("fill","none") } //nodes for(var i = 0; i < descendants.length; i++){ outer.append("circle") .attr("r",20) .attr("stroke","black") .attr("fill","cornflowerblue") .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("y",descendants[i].x + 5) .attr("x",() => { if(descendants[i].depth < 2){return descendants[i].y - 12} else{return descendants[i].y + 25} }) .attr("font-size",() => { if(descendants[i].depth < 2){return 18} else{return 13} }) } return svg.node() }33:[] 2f:{"title":"April 14 (Grad Data Viz)","cells":[{"id":0,"value":"html`

April 14 (Grad Data Viz)

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"html`

Trees

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"html`

Example 1

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":229,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"html`When constructing a tree, your data has to be hierarchical.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"data = [\n {name:\"US\",parent:\"\"},\n {name:\"NY\",parent:\"US\"},\n {name:\"PA\",parent:\"US\"},\n {name:\"Albany\",parent:\"NY\"},\n {name:\"Buffalo\",parent:\"NY\"},\n {name:\"Rochester\",parent:\"NY\"},\n {name:\"Erie\",parent:\"PA\"},\n {name:\"Philadelphia\",parent:\"PA\"},\n {name:\"Pittsburgh\",parent:\"PA\"}\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"html`

Example 2

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":231,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":197,"value":"html`You first construct the root object, but it is not that helpful in plotting the tree.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"root = d3.stratify().id(d => d.name).parentId(d => d.parent)(data).sum(d => 1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"html`

Example 3

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"html`You can then use the tree function to determine where to put the nodes of the tree.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"descendants = d3.tree().nodeSize([s,t])(root).descendants()","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"html`

Example 4

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":235,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"{\n var svgDims = [600,300]\n var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr(\"style\",\"background:white;border:1px solid black\")\n \n //group\n var outer = svg.append(\"g\").attr(\"transform\",`translate(300,150)`)\n \n //nodes\n for(var i = 0; i < descendants.length; i++){\n outer.append(\"circle\")\n .attr(\"r\",10)\n .attr(\"stroke\",\"black\")\n .attr(\"fill\",\"cornflowerblue\")\n .attr(\"cx\",descendants[i].x)\n .attr(\"cy\",descendants[i].y)\n }\n \n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"html`

Example 5

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"html`Adjust the node size parameters to fit the tree within the container.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"{\n var svgDims = [600,300]\n var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr(\"style\",\"background:white;border:1px solid black\")\n \n //group\n var outer = svg.append(\"g\").attr(\"transform\",`translate(300,50)`)\n \n //nodes\n for(var i = 0; i < descendants.length; i++){\n outer.append(\"circle\")\n .attr(\"r\",10)\n .attr(\"stroke\",\"black\")\n .attr(\"fill\",\"cornflowerblue\")\n .attr(\"cx\",descendants[i].x)\n .attr(\"cy\",descendants[i].y)\n }\n \n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"viewof s = slider({max:100})","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"viewof t = slider({max:100})","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"html`

Example 6

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":239,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"html`The tree function can also help you plot the links between the nodes.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"links = d3.tree().nodeSize([s,t])(root).links()","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"{\n var svgDims = [600,300]\n var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr(\"style\",\"background:white;border:1px solid black\")\n \n //group\n var outer = svg.append(\"g\").attr(\"transform\",`translate(300,50)`)\n \n //links\n for(var i = 0; i < links.length; i++){\n outer.append(\"line\")\n .attr(\"stroke\",\"black\")\n .attr(\"x1\",links[i].source.x)\n .attr(\"y1\",links[i].source.y)\n .attr(\"x2\",links[i].target.x)\n .attr(\"y2\",links[i].target.y)\n\n }\n \n //nodes\n for(var i = 0; i < descendants.length; i++){\n outer.append(\"circle\")\n .attr(\"r\",10)\n .attr(\"stroke\",\"black\")\n .attr(\"fill\",\"cornflowerblue\")\n .attr(\"cx\",descendants[i].x)\n .attr(\"cy\",descendants[i].y)\n }\n \n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"html`

Example 7

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"html`Vertical or horizontal links are attractive alternatives to lines.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"{\n var svgDims = [600,300]\n var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr(\"style\",\"background:white;border:1px solid black\")\n \n //group\n var outer = svg.append(\"g\").attr(\"transform\",`translate(300,50)`)\n \n //links\n for(var i = 0; i < links.length; i++){\n var pathData = d3.linkVertical().x(d => d.x).y(d => d.y)(links[i])\n outer.append(\"path\").attr(\"stroke\",\"black\").attr(\"d\",pathData).attr(\"fill\",\"none\")\n\n }\n \n //nodes\n for(var i = 0; i < descendants.length; i++){\n outer.append(\"circle\")\n .attr(\"r\",10)\n .attr(\"stroke\",\"black\")\n .attr(\"fill\",\"cornflowerblue\")\n .attr(\"cx\",descendants[i].x)\n .attr(\"cy\",descendants[i].y)\n }\n \n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"html`

Example 8

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":243,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"{\n var svgDims = [600,300]\n var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr(\"style\",\"background:white;border:1px solid black\")\n \n //group\n var outer = svg.append(\"g\").attr(\"transform\",`translate(300,50)`)\n \n //links\n for(var i = 0; i < links.length; i++){\n var pathData = d3.linkVertical().x(d => d.x).y(d => d.y)(links[i])\n outer.append(\"path\").attr(\"stroke\",\"black\").attr(\"d\",pathData).attr(\"fill\",\"none\")\n\n }\n \n //nodes\n for(var i = 0; i < descendants.length; i++){\n outer.append(\"circle\")\n .attr(\"r\",20)\n .attr(\"stroke\",\"black\")\n .attr(\"fill\",\"cornflowerblue\")\n .attr(\"cx\",descendants[i].x)\n .attr(\"cy\",descendants[i].y)\n }\n \n //labels\n for(var i = 0; i < descendants.length; i++){\n outer.append(\"text\")\n .text(descendants[i].id)\n .attr(\"x\",descendants[i].x)\n .attr(\"y\",descendants[i].y + 5)\n .attr(\"text-anchor\",\"middle\")\n }\n \n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"html`

Example 9

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":245,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"html`Labeling may need to be specific to different levels.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"html`

Example 10

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":247,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":220,"value":"html`A horizontal tree.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"html`

Libraries

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"import {slider,button,select,text,radio,checkbox,number} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"stdlib = require( \"https://unpkg.com/@stdlib/stdlib@0.0.32/dist/stdlib-flat.min.js\" )","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}