2e:null 2f:["$","title",null,{"children":"April 17th and 20th | Brentyn Muir | Observable"}] 34:[] 32:{"id":"9bcdac2cf6738f9b","slug":"april-17th-and-20th","title":"\nApril 17th and 20th\n","thumbnail":"d65f262aff832673b7b784d330059d6a3b29efcfca1adea770a5f6942a3e6ed9","access_level":"public","create_time":"$D2020-04-22T06:37:01.891Z","update_time":"$D2020-04-22T12:02:38.980Z","view_time":null,"first_public_time":"$D2020-04-22T12:02:43.494Z","has_unpublished_edits":null,"fork":{"id":"b01abe36d55ccf2f","slug":"starter-template-for-data-vizualization-and-communicatio","title":"\nApril 17th and 20th\n","owner":{"id":"a92d27483baaceb6","login":"brentynm","name":"Brentyn Muir"}},"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":1057,"publish_version":1057,"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":0,"collection":null,"type":"notebook","body":{"title":"\nApril 17th and 20th\n","cells":[{"id":0,"value":"html`\n\n

\nApril 17th and 20th\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":971,"value":"md`\n## Horizontal Trees\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":974,"value":"{\n var svgDims = [600,600]\n var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr(\"style\",`background:${colors[3]};border:1px solid black`)\n\n //circles\n for(var i = 0; i < descendants.length; i++){\n svg.append(\"circle\")\n .attr(\"r\",descendants[i].r)\n .attr(\"cx\",descendants[i].x)\n .attr(\"cy\",descendants[i].y)\n .attr(\"stroke\",\"black\")\n .attr(\"fill\",colors[2 - descendants[i].depth])\n }\n \n //text\n for(var i = 0; i < descendants.length; i++){\n svg.append(\"text\")\n .text(descendants[i].id)\n .attr(\"y\",() => {\n if(descendants[i].depth < 1){return descendants[i].y - 250}\n else if(descendants[i].depth < 2){return descendants[i].y - 160}\n else {return descendants[i].y}\n })\n .attr(\"x\",descendants[i].x)\n .attr(\"text-anchor\",\"middle\")\n .attr(\"fill\",fontColors[descendants[i].depth])\n }\n \n return svg.node() \n}","pinned":false,"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":930,"value":"descendants = d3.pack().size([600,600])(root).descendants()","pinned":false,"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":1009,"value":"colors = [\"#eff3ff\",\"#bdd7e7\",\"#6baed6\",\"#2171b5\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1045,"value":"fontColors = [\"white\",\"white\",\"black\"]","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"},{"id":1032,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"