2f:null 30:["$","title",null,{"children":"Starter Template for Data Vizualization and Communications | Brentyn Muir | Observable"}] 35: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() }36: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() }37:[] 33:{"id":"b01abe36d55ccf2f","slug":"starter-template-for-data-vizualization-and-communicatio","title":"\nStarter Template for Data Vizualization and Communications\n","thumbnail":"24972a4030d35338ef07711210b3e349769ec194b43992ffde204143eb157b64","access_level":"public","create_time":"$D2020-03-09T13:07:16.770Z","update_time":"$D2020-05-06T03:40:03.530Z","view_time":null,"first_public_time":"$D2020-03-09T13:08:35.257Z","has_unpublished_edits":null,"fork":{"id":"f02dc971cb423ddf","slug":"starter-template-data-viz-and-comm","title":"Starter Template Data Viz and Comm","owner":{"id":"66151b62b45d9fca","login":"credmond","name":"Charles Redmond"}},"stars":0,"starred":false,"owner":{"type":"team","id":"a92d27483baaceb6","login":"brentynm","name":"Brentyn Muir","avatar_url":"https://avatars-next.observableusercontent.com/7a1aa64531f0f1408bc1acfca3fb5f92414250ca342b923828dca72c9819e555","tier":"starter_2024"},"version":984,"publish_version":984,"role":null,"authored":false,"authors":[{"type":"individual","id":"d1b03517bd1af21b","login":"brentynm","name":"Brentyn Muir","avatar_url":"https://avatars-next.observableusercontent.com/7a1aa64531f0f1408bc1acfca3fb5f92414250ca342b923828dca72c9819e555","tier":null}],"members":[{"type":"individual","id":"d1b03517bd1af21b","login":"brentynm","name":"Brentyn Muir","avatar_url":"https://avatars-next.observableusercontent.com/7a1aa64531f0f1408bc1acfca3fb5f92414250ca342b923828dca72c9819e555","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":7,"collection":null,"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":967,"value":"md`\n## Vertical Trees\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":971,"value":"md`\n## Horizontal Trees\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":974,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":934,"value":"viewof s = slider({min:10,max:100})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":936,"value":"viewof t = slider({min:10,max:100})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":930,"value":"descendants = d3.tree().nodeSize([s,t])(root).descendants()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":944,"value":"nodeLinks = d3.tree().nodeSize([s,t])(root).links()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":922,"value":"md`\n---\n## Datasets\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"md`\n---\n## Libraries\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"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":24,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"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"}],"files":"$W37","stdlib":"1","titling":"auto"}} 34:"$33:body"