Today I added a demo for insertion sort in my Portfolio, which can also be accessed by clicking here. The demo creates an image showing the sequence of steps taken by insertion sort, with the position of the i and j values shown as a yellow and green box, respectively. It also shows the saved insert value in a variable insertVal. The image can be saved by clicking the ‘save’ button underneath it. This demo also supplies a plaintext version of the information shown in the image, with {} and () surrounding the i and j values respectively.
I think some useful future additions would be to add some more error handling and some additional information for the steps taken. I’d also like to apply this framework to other sorting algorithms.
This demo uses the p5js and mathjax libraries for the graphics and for rendering the mathematical notation respectively.