31:T4f7,class Entry{ constructor(props){ Object.keys(props).forEach((key)=>{this[key] = props[key]}) this.outer = this.element.append("g").attr("transform",`translate(${this.x},${this.y})`) this.inner = this.outer.append("g") this.square = this.inner.append("rect") .attr("width",30) .attr("height",30) .attr("stroke","black") .attr("fill",this.fill) this.text = this.inner.append("text") .text(this.datum) .attr("font-size",20) .attr("text-anchor","middle") .attr("x",15) .attr("y",22) .attr("fill",this.datumFill) } setFill(fill,duration){ this.fill = fill return this.square.transition().duration(duration).attr("fill",this.fill) } setDatum(datum){ this.datum = datum this.text.text(this.datum) } setDatumFill(datumFill,duration){ this.datumFill = datumFill return this.text.transition().duration(duration).attr("fill",this.datumFill) } setX(x,duration,ease){ this.x = x return this.outer.transition().duration(duration).ease(ease).attr("transform",`translate(${this.x},${this.y})`) } setY(y,duration,ease){ this.y = y return this.outer.transition().duration(duration).ease(ease).attr("transform",`translate(${this.x},${this.y})`) } }32:[] 2f:{"title":"April 2 (Grad Algorithms)","cells":[{"id":0,"value":"html`

April 2 (Grad Algorithms)

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

Divide with Recursion

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

Exercise 1

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"data = {\n var data = []\n for(var i = 0; i < s; i++){\n data.push(Math.floor(Math.random()*100))\n }\n return data\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"viewof s = slider({min:2, max:29,step:1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"html`

Exercise 2

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"v2 = {\n s\n var svg = d3.select(DOM.svg(900,90)).attr(\"style\",\"background:white;border:1px solid black\")\n\n yield {element:svg,display:svg.node()} \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"data2 = entries(v2.element,data,10,10,\"grey\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"v2.display","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"html`

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

Exercise 3

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"v3 = {\n s\n var svg = d3.select(DOM.svg(900,90)).attr(\"style\",\"background:white;border:1px solid black\")\n\n yield {element:svg,display:svg.node()} \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"data3 = entries(v3.element,data,10,10,\"grey\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"divide(v3.element,data3,10,50,\"tomato\",\"cornflowerblue\",1000)","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"v3.display","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"html`

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

Exercise 4

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"v4 = {\n sortArray\n var svg = d3.select(DOM.svg(900,250)).attr(\"style\",\"background:white;border:1px solid black\")\n\n yield {element:svg,display:svg.node()} \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"data4 = entries(v4.element,data,10,10,\"grey\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"sort = { \n var sort = async (element,data,x,y,leftColor,rightColor,duration) => {\n var halves = divide(element,data,x,y,leftColor,rightColor,duration)\n var left = halves[0]\n var right = halves[1]\n await halves[2].end()\n if(left.length > 1){\n sort(element,left,left[0].x,y+40,leftColor,rightColor,duration)\n }\n if(right.length > 1){\n sort(element,right,right[0].x,y+40,leftColor,rightColor,duration)\n }\n }\n return sort\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"{\n if(mutable sortArray == 1){\n sort(v4.element,data4,10,50,\"tomato\",\"cornflowerblue\",400) \n }\n return \"divide\"\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"v4.display","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"viewof b = button({value:\"sort\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"md`\n---\n## Libraries\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"import {slider,button,select,text,radio,checkbox,number} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"entries = (element,array,x,y,fill) => {\n var data = []\n for(var i = 0; i < array.length; i++){\n data.push(new Entry({element:element,x:30*i+x,y:y,fill:fill,datumFill:\"white\",datum:array[i]}))\n }\n return data\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"divide = (element,data,x,y,leftColor,rightColor,duration) => {\n var middle = Math.floor(data.length/2)\n var left = []\n var right = []\n for(var i = 0; i < middle; i++){\n left.push(new Entry({element:element,x:data[i].x,y:data[i].y,fill:data[0].fill,datumFill:\"white\",datum:data[i].datum}))\n left[i].setY(y,duration,d3.easeLinear)\n left[i].setFill(\"tomato\",duration)\n }\n for(var i = middle; i < data.length; i++){\n right.push(new Entry({element:element,x:data[i].x,y:data[i].y,fill:data[0].fill,datumFill:\"white\",datum:data[i].datum}))\n right[i-middle].setY(y,duration,d3.easeLinear)\n right[i-middle].setFill(\"cornflowerblue\",duration)\n }\n var done = data[0].setDatumFill(\"white\",duration).delay(duration/2)\n return [left,right,done]\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"merge = async (element,a,b,x,y,duration) => {\n \n var c = []\n var i = 0\n var j = 0\n var k = 0\n\n while(i < a.length && j < b.length){\n if(a[i].datum < b[j].datum){\n c.push(new Entry({element:element,x:a[i].x,y:a[i].y,fill:a[i].fill,datumFill:\"white\",datum:a[i].datum}))\n i++\n k++\n }else{\n c.push(new Entry({element:element,x:b[j].x,y:b[j].y,fill:b[j].fill,datumFill:\"white\",datum:b[j].datum}))\n j++\n k++\n }\n }\n\n while(i < a.length ){\n c.push(new Entry({element:element,x:a[i].x,y:a[i].y,fill:a[i].fill,datumFill:\"white\",datum:a[i].datum}))\n i++\n k++\n }\n\n while(j < b.length ){\n c.push(new Entry({element:element,x:b[j].x,y:b[j].y,fill:b[j].fill,datumFill:\"white\",datum:b[j].datum}))\n j++\n k++\n }\n for(var k=0;kbody{background-color:#edf5e1;}\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}