Settings

Theme

Interactive Algorithm Visualizer

jasonpark.me

144 points by nimitkalra · 9 comments

Reader

7 threads
wnesensohn

The visualizer is really nice, the examples could use some work though.

Selection Sort, for example, makes the algorithm look extremely (impossibly) good at first glance - O(n) - because it's not showing the majority of the steps.

Instead of

    for (var j = i + 1; j < D.length; j++) {
        if (D[j] < D[minJ]) {
            tracer._select(j);
            minJ = j;
            tracer._deselect(j);
        }
    }
it has to be

    for (var j = i + 1; j < D.length; j++) {
        tracer._select(j);
        if (D[j] < D[minJ]) {
            minJ = j;
        }
        tracer._deselect(j);
    }
Bubble Sort has the same problem, as do Quicksort and Mergesort.

Normally I wouldn't mind, but these examples are intended for beginners, and it might give them a false sense of time complexity for these basic algorithms.

westoncb

Interesting. I've been working on an interactive 3D algorithm/data structure visualizer (http://tiledtext.com/projects/avd), but was thinking of it more as a debugging tool than an educational aid. I like the catalog aspect here: would be nice to have one of these for every wikipedia algorithm page.

bkokoszka

Really nicely done! The animations though would be more enlightening if you exposed more of the algorithm state in them, e.g. by showing how the queue grows and shrinks in the BFS visualization.

jazzido

Also see Walnut.io: https://thewalnut.io/app/release/34

rmason

This tool reminds me of the work of Bret Victor who challenged developers to build visualization tools for code:

https://vimeo.com/36579366

ckib16

Fantastic tool! I wish more code visualization tools like these were available.

Great job.

Capira

Great work! Reminds me of http://visualgo.net/

Keyboard Shortcuts

j
Next item
k
Previous item
o / Enter
Open selected item
?
Show this help
Esc
Close modal / clear selection