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 14 & 16(Grad Algorithms)","cells":[{"id":0,"value":"html`

April 14 & 16(Grad Algorithms)

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

Partitioning An Array

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":515,"value":"html`Next up is the quick sort, but before that we have to learn how to partition an array around a pivot. To get started, once again generate an unsorted array.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"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":7,"value":"html`

Exercise 1

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":543,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":518,"value":"html`Visualize the array. Then begin to write a function called \"partition\". In this exercise, it should simply change the color of the last entry.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"data1 = entries(v1.element,data,10,40,\"grey\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"pData1 = partition1(data1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"v1.display","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"v1 = {\n s\n var svg = d3.select(DOM.svg(900,250)).attr(\"style\",\"background:white;border:1px solid black\")\n yield {element:svg,display:svg.node()} \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":335,"value":"partition1 = (data) => {\n var l = data.length \n data[l-1].setFill(\"goldenrod\",0)\n return data\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":311,"value":"html`

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

Exercise 2

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":545,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":522,"value":"html`Continue to develop the partition function. In this exercise, have it draw a verticle line at the beginning of the array.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":317,"value":"data2 = entries(v2.element,data,10,40,\"grey\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":338,"value":"pData2 = partition2(v2.element,data2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":329,"value":"v2.display","pinned":false,"hidden":false,"mode":"ojs"},{"id":325,"value":"v2 = {\n s\n var svg = d3.select(DOM.svg(900,250)).attr(\"style\",\"background:white;border:1px solid black\")\n yield {element:svg,display:svg.node()} \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"partition2 = (element,data) => {\n var l = data.length\n var pIndex = 0\n data[l-1].setFill(\"goldenrod\",0)\n \n var line = element.append(\"line\")\n .attr(\"x1\",data[pIndex].x)\n .attr(\"y1\",10)\n .attr(\"x2\",data[pIndex].x)\n .attr(\"y2\",100)\n .attr(\"stroke\",\"black\")\n return data\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":353,"value":"html`

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

Exercise 3

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":547,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":526,"value":"html`Make the partition function now highlight each entry in order, with a particular color. (I used cornflowerblue.) Don't highlight the last entry.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":359,"value":"data3 = entries(v3.element,data,10,40,\"grey\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":371,"value":"pData3 = partition3(v3.element,data3,1000)","pinned":false,"hidden":false,"mode":"ojs"},{"id":365,"value":"v3.display","pinned":false,"hidden":false,"mode":"ojs"},{"id":362,"value":"v3 = {\n s\n var svg = d3.select(DOM.svg(900,250)).attr(\"style\",\"background:white;border:1px solid black\")\n yield {element:svg,display:svg.node()} \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":367,"value":"partition3 = async (element,data,duration) => {\n var l = data.length\n var pIndex = 0\n data[l-1].setFill(\"goldenrod\",0)\n \n var line = element.append(\"line\")\n .attr(\"x1\",data[pIndex].x)\n .attr(\"y1\",10)\n .attr(\"x2\",data[pIndex].x)\n .attr(\"y2\",100)\n .attr(\"stroke\",\"black\")\n \n for(var i = 0;i < l-1; i++){\n await data[i].setFill(\"cornflowerblue\",duration).end()\n data[i].setFill(\"grey\",duration).end()\n }\n return data\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":381,"value":"html`

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

Exercise 4

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":549,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":530,"value":"html`Write a \"swap\" function that will swap the positions of two given entries. Try it out.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":386,"value":"data4 = entries(v4.element,data,10,40,\"grey\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":415,"value":"swap4(data4,3,7,1000,d3.easeLinear)","pinned":false,"hidden":false,"mode":"ojs"},{"id":391,"value":"v4.display","pinned":false,"hidden":false,"mode":"ojs"},{"id":388,"value":"v4 = {\n s\n var svg = d3.select(DOM.svg(900,250)).attr(\"style\",\"background:white;border:1px solid black\")\n yield {element:svg,display:svg.node()} \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":412,"value":"swap4 = async (data,index1,index2,duration,ease) => {\n var temp = data[index1]\n data[index1] = data[index2]\n data[index2] = temp\n \n var temp = data[index1].x\n data[index1].setY(10,duration,ease)\n await data[index2].setY(70,duration,ease).end()\n data[index1].setX(data[index2].x,duration,ease) \n await data[index2].setX(temp,duration,ease).end()\n data[index1].setY(40,duration,ease)\n await data[index2].setY(40,duration,ease).end()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":424,"value":"html`

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

Exercise 5

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":551,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":560,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":533,"value":"html`Complete the partition function and pull everything together. I think I will have to use the video here to explain what should happen.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":447,"value":"data5 = entries(v5.element,data,10,40,\"grey\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":493,"value":"{\n if(mutable partitionArray == 1){\n partition5(v5.element,data5,duration,d3.easeLinear) \n }\n return \"partition\"\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":503,"value":"viewof speed = radio({options:[\"slow\",\"fast\"],value:\"slow\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":479,"value":"viewof b = button({value:\"partition\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":254,"value":"viewof s = slider({min:2, max:29,step:1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":436,"value":"v5.display","pinned":false,"hidden":false,"mode":"ojs"},{"id":427,"value":"v5 = {\n speed\n partitionArray\n var svg = d3.select(DOM.svg(900,300)).attr(\"style\",\"background:white;border:1px solid white\")\n yield {element:svg,display:svg.node()} \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":443,"value":"partition5 = async (element,data,duration,ease) => {\n var l = data.length\n var pIndex = 0\n var pivot = data[l-1].datum\n data[l-1].setFill(\"goldenrod\",0)\n \n var line = element.append(\"line\")\n .attr(\"x1\",data[pIndex].x)\n .attr(\"y1\",10)\n .attr(\"x2\",data[pIndex].x)\n .attr(\"y2\",100)\n .attr(\"stroke\",\"black\")\n \n for(var i = 0;i < l-1; i++){\n await data[i].setFill(\"cornflowerblue\",duration).end()\n if(data[i].datum <= pivot){\n if(i != pIndex){\n await swap5(data,pIndex,i,duration,ease)\n }\n line.transition().duration(duration).attr(\"x1\",data[pIndex+1].x).attr(\"x2\",data[pIndex+1].x).end()\n await data[pIndex].setFill(\"grey\",duration).end()\n pIndex++\n }else{\n await data[i].setFill(\"grey\",duration).end()\n }\n \n }\n swap5(data,pIndex,l-1,duration,ease)\n return data\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":439,"value":"swap5 = async (data,index1,index2,duration,ease) => {\n var temp = data[index1]\n data[index1] = data[index2]\n data[index2] = temp\n \n var temp = data[index1].x\n data[index1].setY(10,duration,ease)\n await data[index2].setY(70,duration,ease).end()\n data[index1].setX(data[index2].x,duration,ease) \n await data[index2].setX(temp,duration,ease).end()\n data[index1].setY(40,duration,ease)\n return data[index2].setY(40,duration,ease).end()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"md`\n---\n## Libraries\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"import {slider,button,select,text,radio,checkbox,number} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"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":483,"value":"mutable partitionArray = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":485,"value":"{\n s\n mutable partitionArray = 0\n return \"partitionArray to 0\"\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":487,"value":"{\n b\n mutable partitionArray = 1\n return \"partitionArray to 1\"\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":508,"value":"duration = {\n if(speed == \"slow\"){var duration = 500}\n else{var duration = 150}\n return duration\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}