31:[] 2f:{"title":"April 16 (Grad Data Viz)","cells":[{"id":0,"value":"html`

April 16 (Grad Data Viz)

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

Circle Packing

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

Example 1

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"html`Once you know how to visualize a tree with d3, it is pretty straight-forward to create a circle-packing.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"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":30,"value":"root = d3.stratify().id(d => d.name).parentId(d => d.parent)(data).sum(d => 1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"descendants = d3.pack().size([600,600])(root).descendants()","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"html`

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

Example 2

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":182,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"html`Try drawing the circle-packing using the information from the descendants array. For now, don't use any fill.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"{\n var svgDims = [600,600]\n var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr(\"style\",\"background:white;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\",\"none\")\n }\n\n \n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"html`

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

Example 3

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"html`We'll go here again to get some nice colors: d3 color schemes.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"colors = [\"#eff3ff\",\"#bdd7e7\",\"#6baed6\",\"#2171b5\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"html`

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

Example 4

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"html`Apply the colors, from lightest to darkest. Include the background of the svg container.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"{\n var svgDims = [600,600]\n var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr(\"style\",`background:${colors[0]};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[descendants[i].depth+1])\n }\n\n \n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"html`

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

Example 5

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"html`Reverse the colors.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"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 \n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"html`

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

Example 6

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"html`Put labels at the centers of the circles.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"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 //labels\n for(var i = 0;i < descendants.length; i++){\n svg.append(\"text\")\n .text(descendants[i].id)\n .attr(\"x\",descendants[i].x)\n .attr(\"y\",descendants[i].y)\n .attr(\"text-anchor\",\"middle\")\n\n }\n\n \n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"html`

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

Example 7

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":192,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"html`Adjust the labels.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"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 //labels\n for(var i = 0;i < descendants.length; i++){\n svg.append(\"text\")\n .text(descendants[i].id)\n .attr(\"x\",descendants[i].x)\n .attr(\"y\",() => {\n if(descendants[i].depth == 0){\n return .2*descendants[i].r\n }else if(descendants[i].depth == 1){\n return descendants[i].y - descendants[i].r - 10\n }else{\n return descendants[i].y\n }\n })\n .attr(\"text-anchor\",\"middle\")\n\n }\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 8

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"html`Adjust the font colors.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"fontColors = [\"white\",\"white\",\"black\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"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 //labels\n for(var i = 0;i < descendants.length; i++){\n svg.append(\"text\")\n .text(descendants[i].id)\n .attr(\"x\",descendants[i].x)\n .attr(\"y\",() => {\n if(descendants[i].depth == 0){\n return .2*descendants[i].r\n }else if(descendants[i].depth == 1){\n return descendants[i].y - descendants[i].r - 10\n }else{\n return descendants[i].y\n }\n })\n .attr(\"text-anchor\",\"middle\")\n .attr(\"fill\",fontColors[descendants[i].depth])\n\n }\n\n \n \n return svg.node() \n}","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":20,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}