Algorithm visualisation in JavaScript

Saturday 4th June 2023
I am going to be teaching some family about programming, including JavaScript. I figured that when going through concepts and algorithms it would probably be helpful to be able to visualise what is going on, and whilst whiteboards can do that it can be rather time consuming using them alone.

In order to remedy this I would like to write a program that can visualise these programs for me. The success criteria are as follows:

The code listing

To create the code listing initially I just had the function copied to a dom element. But this did not work later on as I did transformations to the code to make the visualisation more cohesive, it also had the drawback that it was difficult to use and ugly. What I ended up with in the end was I created a mapping from line number to visualisation step, then ran the initial code through the syntax highlighter I created for this site to make it look less ugly, then split it by line so that each could be specifically referenced.

The visualisation

The visualisation consists of a series of variables, with their values listed as visually boxed values, and in the case of arrays, a series of boxed values. Whenever an operation effects one of these values an animation is played to highlight the change that has happened. Along with this, the code listing is updated to show what part of the code is being executed.

Finishing touches

To make using this tool a better experience, I included several controls including:

Overall I think that the visualisation was a success although I am still unhappy that it still requires a couple of changes to the source. The visualisation was a useful teaching aid and made explaining algorithms much easier.
It is available at

<- Back
last modified: Sun, 16 Jul 2023 10:55:02 GMT