31:T420,{ 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++){ outer.append("line") .attr("stroke","black") .attr("x1",links[i].source.x) .attr("y1",links[i].source.y) .attr("x2",links[i].target.x) .attr("y2",links[i].target.y) } //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",descendants[i].y + 5) .attr("text-anchor","middle") .attr("fill","white") } yield svg.node() }32:T4bf,{ 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++){ outer.append("line") .attr("stroke","black") .attr("x1",links[i].source.x) .attr("y1",links[i].source.y) .attr("x2",links[i].target.x) .attr("y2",links[i].target.y) } //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",descendants[i].y + 5) .attr("text-anchor","middle") .attr("fill","white") } //dot outer.append("circle") .attr("r",5) .attr("cx",0) .attr("cy",0) .attr("fill","tomato") .attr("stroke","black") yield svg.node() }33:T537,{ 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++){ outer.append("line") .attr("stroke","black") .attr("x1",links[i].source.x) .attr("y1",links[i].source.y) .attr("x2",links[i].target.x) .attr("y2",links[i].target.y) } //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",descendants[i].y + 5) .attr("text-anchor","middle") .attr("fill","white") } //dot var dot = outer.append("circle") .attr("r",5) .attr("cx",0) .attr("cy",0) .attr("fill","tomato") .attr("stroke","black") yield svg.node() var left = descendants[0].children[0] dot.transition().duration(1000).attr("cx",left.x).attr("cy",left.y) }34:T687,{ 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++){ outer.append("line") .attr("stroke","black") .attr("x1",links[i].source.x) .attr("y1",links[i].source.y) .attr("x2",links[i].target.x) .attr("y2",links[i].target.y) } //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",descendants[i].y + 5) .attr("text-anchor","middle") .attr("fill","white") } //dot var dot = outer.append("circle") .attr("r",5) .attr("cx",0) .attr("cy",0) .attr("fill","tomato") .attr("stroke","black") yield svg.node() var origin = descendants[0] var left = descendants[0].children[0] var right = descendants[0].children[1] await dot.transition().duration(1000).attr("cx",left.x).attr("cy",left.y).end() await dot.transition().duration(1000).attr("cx",origin.x).attr("cy",origin.y).end() await dot.transition().duration(1000).attr("cx",right.x).attr("cy",right.y).end() dot.transition().duration(1000).attr("cx",origin.x).attr("cy",origin.y).end() }35:T4ee,{ 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++){ outer.append("line") .attr("stroke","black") .attr("x1",links[i].source.x) .attr("y1",links[i].source.y) .attr("x2",links[i].target.x) .attr("y2",links[i].target.y) } //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",descendants[i].y + 5) .attr("text-anchor","middle") .attr("fill","white") } //dot var dot = outer.append("circle") .attr("r",5) .attr("cx",0) .attr("cy",0) .attr("fill","tomato") .attr("stroke","black") yield svg.node() await goLeft(dot) goRight(dot) }36:T42d,{ 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 < links2.length; i++){ outer.append("line") .attr("stroke","black") .attr("x1",links2[i].source.x) .attr("y1",links2[i].source.y) .attr("x2",links2[i].target.x) .attr("y2",links2[i].target.y) } //nodes for(var i = 0; i < descendants2.length; i++){ outer.append("circle") .attr("r",20) .attr("stroke","black") .attr("fill","cornflowerblue") .attr("cx",descendants2[i].x) .attr("cy",descendants2[i].y) } //labels for(var i = 0; i < descendants2.length; i++){ outer.append("text") .text(descendants2[i].id) .attr("x",descendants2[i].x) .attr("y",descendants2[i].y + 5) .attr("text-anchor","middle") .attr("fill","white") } yield svg.node() }37:T51c,{ 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 < links2.length; i++){ outer.append("line") .attr("stroke","black") .attr("x1",links2[i].source.x) .attr("y1",links2[i].source.y) .attr("x2",links2[i].target.x) .attr("y2",links2[i].target.y) } //nodes var nodes = [] for(var i = 0; i < descendants2.length; i++){ nodes.push(outer.append("circle") .attr("r",20) .attr("stroke","black") .attr("fill","cornflowerblue") .attr("cx",descendants2[i].x) .attr("cy",descendants2[i].y)) } //labels for(var i = 0; i < descendants2.length; i++){ outer.append("text") .text(descendants2[i].id) .attr("x",descendants2[i].x) .attr("y",descendants2[i].y + 5) .attr("text-anchor","middle") .attr("fill","white") } //dot var dot = outer.append("circle") .attr("r",5) .attr("cx",descendants2[choice].x) .attr("cy",descendants2[choice].y) .attr("fill","tomato") .attr("stroke","black") yield svg.node() }38:T53b,{ 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 < links2.length; i++){ outer.append("line") .attr("stroke","black") .attr("x1",links2[i].source.x) .attr("y1",links2[i].source.y) .attr("x2",links2[i].target.x) .attr("y2",links2[i].target.y) } //nodes for(var i = 0; i < descendants2.length; i++){ outer.append("circle") .attr("r",20) .attr("stroke","black") .attr("fill","cornflowerblue") .attr("cx",descendants2[i].x) .attr("cy",descendants2[i].y) } //labels for(var i = 0; i < descendants2.length; i++){ outer.append("text") .text(descendants2[i].id) .attr("x",descendants2[i].x) .attr("y",descendants2[i].y + 5) .attr("text-anchor","middle") .attr("fill","white") } //dot var dot = outer.append("circle") .attr("r",5) .attr("cx",descendants2[choice].x) .attr("cy",descendants2[choice].y) .attr("fill","tomato") .attr("stroke","black") yield svg.node() await goLeft2(dot,choice) goRight2(dot,choice) }39:[] 2f:{"title":"April 28(Grad Algorithms)","cells":[{"id":0,"value":"html`

April 28(Grad Algorithms)

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

Tree Traversal Part 1

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

Exercise 1

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":279,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":298,"value":"html`Set up a small tree.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"data = [\n {name:\"A\",parent:\"\"},\n {name:\"B\",parent:\"A\"},\n {name:\"C\",parent:\"A\"}\n]\n \n","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"root = d3.stratify().id(d => d.name).parentId(d => d.parent)(data).sum(d => 1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"descendants = d3.tree().nodeSize([s,t])(root).descendants()","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"links = d3.tree().nodeSize([s,t])(root).links()","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"viewof s = slider({max:200})","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"viewof t = slider({max:200})","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"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\",20)\n .attr(\"stroke\",\"black\")\n .attr(\"fill\",\"cornflowerblue\")\n .attr(\"cx\",descendants[i].x)\n .attr(\"cy\",descendants[i].y)\n }\n \n \n yield svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"html`

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

Exercise 2

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":281,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":302,"value":"html`Label the tree.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"html`

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

Exercise 3

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":283,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":304,"value":"html`Place a small circle in the middle of the top node.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"html`

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

Exercise 4

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":285,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":306,"value":"html`Transition the dot to node B.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"html`

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

Exercise 5

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":287,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":309,"value":"html`Transition the dot to B, back to A, down to C, and back to A again.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"html`

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

Exercise 6

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":289,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":312,"value":"html`Do this transitioning with functions.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"goLeft = async (dot) => {\n var origin = descendants[0]\n var left = descendants[0].children[0]\n var right = descendants[0].children[1]\n await dot.transition().duration(1000).attr(\"cx\",left.x).attr(\"cy\",left.y).end()\n await dot.transition().duration(1000).attr(\"cx\",origin.x).attr(\"cy\",origin.y).end()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"goRight = async (dot) => {\n var origin = descendants[0]\n var left = descendants[0].children[0]\n var right = descendants[0].children[1]\n await dot.transition().duration(1000).attr(\"cx\",right.x).attr(\"cy\",right.y).end()\n await dot.transition().duration(1000).attr(\"cx\",origin.x).attr(\"cy\",origin.y).end()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"html`

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

Exercise 7

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":291,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":315,"value":"html`Set up a larger tree.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"data2 = [\n {name:\"A\",parent:\"\"},\n {name:\"B\",parent:\"A\"},\n {name:\"C\",parent:\"A\"},\n {name:\"D\",parent:\"B\"},\n {name:\"E\",parent:\"B\"},\n {name:\"F\",parent:\"C\"},\n {name:\"G\",parent:\"C\"}\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"root2 = d3.stratify().id(d => d.name).parentId(d => d.parent)(data2).sum(d => 1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"descendants2 = d3.tree().nodeSize([s,t])(root2).descendants()","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"links2 = d3.tree().nodeSize([s2,t2])(root2).links()","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"viewof s2 = slider({max:200})","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"viewof t2 = slider({max:200})","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"html`

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

Exercise 8

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":293,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":318,"value":"html`Place the dot on A, B, or C with radio buttons.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"viewof choice = radio({options:[\n {label:\"A\",value:0},\n {label:\"B\",value:1},\n {label:\"C\",value:2}\n],value:0})","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"html`

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

Exercise 9

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":295,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":321,"value":"html`Once the dot is placed, visit each of the two children.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"goLeft2 = async (dot,start) => {\n var origin = descendants2[start]\n var left = descendants2[start].children[0]\n var right = descendants2[start].children[1]\n await dot.transition().duration(1000).attr(\"cx\",left.x).attr(\"cy\",left.y).end()\n await dot.transition().duration(1000).attr(\"cx\",origin.x).attr(\"cy\",origin.y).end()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":221,"value":"goRight2 = async (dot,start) => {\n var origin = descendants2[start]\n var left = descendants2[start].children[0]\n var right = descendants2[start].children[1]\n await dot.transition().duration(1000).attr(\"cx\",right.x).attr(\"cy\",right.y).end()\n await dot.transition().duration(1000).attr(\"cx\",origin.x).attr(\"cy\",origin.y).end()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"md`\n---\n## Libraries\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"import {slider,button,select,text,radio,checkbox,number} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W39","stdlib":"1","titling":"auto"}