Data Structures and Algorithms (Grad) 2020Class LibraryStarter Template Data Structures and AlgorithmsD3 IntroTransformations and GroupsClassesThe Entry ClassMore on ClassesLinear SearchBinary SearchBubble SortPractice MidtermFunctionsArrow FunctionsRecursive FunctionsGraphics and RecursionMarch 17 (Grad Algorithms)March 24 & 26 (Grad Algorithms)March 31 (Grad Algorithms)April 2 (Grad Algorithms)April 7 & 9(Grad Algorithms)April 14 & 16(Grad Algorithms)April 21 and 23(Grad Algorithms)April 28(Grad Algorithms)April 30(Grad Algorithms)Algorithms Final Problem 1Algorithms Final Problem 2
Insertion Sort
{
var svg = d3.select(DOM.svg(900,90)).attr("style","background:white;border:0px solid black")
var outer = svg.append("g").attr("transform",`translate(20,35)`)
var arr = new Arr({element:outer,x:0,y:0,data:data})
yield svg.node()
var duration = 100
for(var i = 0;i<=data.length-1;i++){
arr.insert(i,duration,"cornflowerblue")
await outer.transition().duration(4*duration).attr("transform",`translate(20,35)`).end()
}
}
class Arr{
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.array = []
for(var i = 0;i<this.data.length;i++){
this.array.push(new Entry({element:this.inner,x:30*i,y:0,fill:"white",datumFill:"black",datum:this.data[i]}))
}
}
swap(i,j,duration,ease){
var temp = this.array[i]
this.array[i] = this.array[j]
this.array[j] = temp
temp = this.array[i].x
this.array[i].setX(this.array[j].x,duration,ease)
return this.array[j].setX(temp,duration,ease)
}
async insert(i,duration,color){
var entries = this.array
var proceed = true
await entries[i].setY(-30,duration,d3.easeLinear).end()
while(proceed){
if(i > 0 && entries[i].datum<entries[i-1].datum){
this.swap(i-1,i,duration,d3.easeLinear)
i = i - 1
}else{
proceed = false
}
}
await entries[i].setY(-30,duration,d3.easeLinear).end()
await entries[i].setY(0,duration,d3.easeLinear).end()
entries[i].setFill(color,duration)
entries[i].setDatumFill("white",duration)
}
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
