28:null 29:["$","title",null,{"children":"April 17 | Charles Redmond | Observable"}] 2e: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() }2f: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() }30:[] 2c:{"id":"e3691394a3259b34","slug":"april-17","title":"April 17","thumbnail":"97975d97cbe889a9468a88003a7bd41e84a5965ff0212fba3130b8437aafe554","access_level":"public","create_time":"$D2020-04-17T14:35:04.584Z","update_time":"$D2020-04-17T14:35:20.100Z","view_time":null,"first_public_time":"$D2020-04-17T14:35:29.294Z","has_unpublished_edits":null,"fork":{"id":"47059f3691bed0c5","slug":"april-14-grad-data-viz","title":"April 14 (Grad Data Viz)","owner":{"id":"66151b62b45d9fca","login":"credmond","name":"Charles Redmond"}},"stars":0,"starred":false,"owner":{"type":"team","id":"66151b62b45d9fca","login":"credmond","name":"Charles Redmond","avatar_url":"https://avatars-next.observableusercontent.com/50425ed9f407a7b47d1c471a09963f335e0652ab9acc237869e2d7949fb04a77","tier":"starter_2024"},"version":270,"publish_version":270,"role":null,"authored":false,"authors":[{"type":"individual","id":"37a987477e8b6db3","login":"credmond","name":"Charles Redmond","avatar_url":"https://avatars-next.observableusercontent.com/50425ed9f407a7b47d1c471a09963f335e0652ab9acc237869e2d7949fb04a77","tier":null}],"members":[{"type":"individual","id":"37a987477e8b6db3","login":"credmond","name":"Charles Redmond","avatar_url":"https://avatars-next.observableusercontent.com/50425ed9f407a7b47d1c471a09963f335e0652ab9acc237869e2d7949fb04a77","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":8,"collection":{"id":"be7f64c26c27870b","slug":"data-viz-and-comm","title":"Data Viz and Comm","owner":{"id":"66151b62b45d9fca","login":"credmond","name":"Charles Redmond"}},"type":"notebook","body":{"title":"April 17","cells":[{"id":0,"value":"html`

April 17

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"html`

Trees

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"html`

Example 1

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"html`When constructing a tree, your data has to be hierarchical.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"html`

Example 2

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"root = d3.stratify().id(d => d.name).parentId(d => d.parent)(data).sum(d => 1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"html`

Example 3

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"descendants = d3.tree().nodeSize([s,t])(root).descendants()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"html`

Example 4

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"html`

Example 5

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"html`Adjust the node size parameters to fit the tree within the container.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"viewof s = slider({max:100})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"viewof t = slider({max:100})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"html`

Example 6

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"html`The tree function can also help you plot the links between the nodes.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"links = d3.tree().nodeSize([s,t])(root).links()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"html`

Example 7

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"html`Vertical or horizontal links are attractive alternatives to lines.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"html`

Example 8

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"html`

Example 9

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"html`Labeling may need to be specific to different levels.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"html`

Example 10

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"html`A horizontal tree.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"html`

Libraries

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