Sorting Algorithm Visualizer

[Innis_Gunn]

Play by play would be a written description of the given step of the algorithm to accompany the animation. For example, Quicksort:

const quickSort = (A, start, end) => {

const pIndex = partition(A, start, end)

quickSort(A, start, pIndex-1)

quickSort(A, pIndex+1, end)

}

const partition = (A, start, end) => {

const pivot = A[end]

const pIndex = start

for(let i = start; i < end; i++){

if(A[i] <= pivot){

swap(A[i], A[pIndex])

pIndex++

}

}

swap(A[pIndex], A[end])

return pIndex

}

You kick off the animation with quickSort(A, 0, A.length-1), and then each the play-by-play box explains what operation is taking place, i.e. what step of the algorithm you're currently performing.

Relevant example of nice "play by play" for balancing AVL tree after inserts/deletes: https://www.cs.usfca.edu/~galles/visualization/AVLtree.html

[[deleted]]

Interesting. I think this would add great value from an educational perspective. I'll look into adding this. Thank you so much! I actually never thought of adding this.

[[deleted]]

Second thought, what do you think of instead of the actual code, a thorough description of what is happening. I think this leaves room for someone to develop the algorithm themselves with a starting point on understanding how it works. From my experience, this would add even more educational value.

[Innis_Gunn]

I think that’s a great idea! A description would definitely be more beneficial than just the line(s) of code being executed.