2a:T424,{ var svgDims = [900,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(450,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",r) .attr("stroke","black") .attr("fill","cornflowerblue") .attr("cx",descendants[i].x) .attr("cy",descendants[i].y) } //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,0,1000) await goUp(dot,1,1000) await goRight(dot,0,1000) await goUp(dot,2,1000) }2b:T479,{ traverseTree var svgDims = [900,300] var svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style","background:white;border:1px solid white") //group var outer = svg.append("g").attr("transform",`translate(450,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 var nodes = [] for(var i = 0; i < descendants.length; i++){ nodes.push(outer.append("circle") .attr("r",r) .attr("stroke","black") .attr("fill","cornflowerblue") .attr("cx",descendants[i].x) .attr("cy",descendants[i].y)) } //dot var dot = outer.append("circle") .attr("r",r) .attr("cx",0) .attr("cy",0) .attr("fill","tomato") .attr("stroke","black") yield svg.node() if(traverseTree == 1){ await traverse(dot,nodes,0,0,l,200) dot.transition().duration(1000).attr("fill","yellow") } }2c:T452,traverse = { var traverse = async (dot,nodes,start,level,maxLevel,duration) => { if(level < maxLevel){ var leftId = descendants[start].children[0].id var rightId = descendants[start].children[1].id var leftIndex = descendants.findIndex(d => d.id == leftId) var rightIndex = descendants.findIndex(d => d.id == rightId) await goLeft(dot,start,duration) await traverse(dot,nodes,leftIndex,level + 1,maxLevel,duration) await goUp(dot,leftIndex,duration) nodes[start].attr("fill","yellow") await nodes[start].transition().duration(duration).attr("r",2*r).end() await nodes[start].transition().duration(duration).attr("r",r).end() await goRight(dot,start,duration) await traverse(dot,nodes,rightIndex,level + 1,maxLevel,duration) await goUp(dot,rightIndex,duration) }else{ nodes[start].attr("fill","yellow") await nodes[start].transition().duration(duration).attr("r",2*r).end() await nodes[start].transition().duration(duration).attr("r",r).end() } } return traverse }2d:[] 29:{"title":"April 30(Grad Algorithms)","cells":[{"id":0,"value":"html`

April 30(Grad Algorithms)

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

Tree Traversal Part 2

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

Exercise 1

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":380,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"children = {\n var children = (data,name) => {\n var left = {name:`${name}0`,parent:name}\n var right = {name:`${name}1`,parent:name}\n data.push(left)\n data.push(right) \n return data\n }\n return children\n \n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"children([],\"fred\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"html`

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

Exercise 2

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":382,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"treeGen = {\n var treeGen = (data,name,level,maxLevel) => {\n if(level == 0){data.push({name:0,parent:\"\"})}\n if(level < maxLevel){\n children(data,name)\n treeGen(data,`${name}0`,level + 1,maxLevel)\n treeGen(data,`${name}1`,level + 1,maxLevel)\n }\n return data\n }\n return treeGen\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"data = treeGen([],0,0,l)","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"viewof l = slider({min:1,max:6,step:1,description:\"set level\",value:5})","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"html`

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

Exercise 3

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":384,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"root = d3.stratify().id(d => d.name).parentId(d => d.parent)(data).sum(d => d.number)","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"descendants = d3.tree().nodeSize([s,t])(root).descendants()","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"links = d3.tree().nodeSize([s,t])(root).links()","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"{\n var svgDims = [900,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(450,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\",r)\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":73,"value":"viewof s = slider({max:200,description:\"set width\",value:17.98})","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"viewof t = slider({max:200,description:\"set height\",value:44.72})","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"viewof r = slider({min:4,max:20,description:\"set radius\",value:7.3})","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"html`

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

Exercise 4

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":386,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"$2a","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"html`

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

Exercise 5

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":388,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":390,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"$2b","pinned":false,"hidden":false,"mode":"ojs"},{"id":323,"value":"viewof b = button({value:\"traverse\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"md`\n---\n## Libraries\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"import {slider,button,select,text,radio,checkbox,number} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"goLeft = async (dot,start,duration) => {\n var origin = descendants[start]\n var left = descendants[start].children[0]\n await dot.transition().duration(duration).attr(\"cx\",left.x).attr(\"cy\",left.y).end() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"goRight = async (dot,start,duration) => {\n var origin = descendants[start]\n var right = descendants[start].children[1]\n await dot.transition().duration(duration).attr(\"cx\",right.x).attr(\"cy\",right.y).end()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"goUp = async (dot,start,duration) => {\n var origin = descendants[start]\n var up = descendants[start].parent\n await dot.transition().duration(duration).attr(\"cx\",up.x).attr(\"cy\",up.y).end() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":159,"value":"$2c","pinned":false,"hidden":false,"mode":"ojs"},{"id":326,"value":"mutable traverseTree = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":328,"value":"{\n l,s,t,r\n mutable traverseTree = 0\n return \"traverseTree to 0\"\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":329,"value":"{\n b\n mutable traverseTree = 1\n return \"traverseTree to 1\"\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W2d","stdlib":"1","titling":"auto"}