
Visualizing Algorithms (2014) - swsieber
https://bost.ocks.org/mike/algorithms/
======
westoncb
Part of what the author talks about here makes me wonder about a potential
application for visualizations like this (especially since I'm working on a
general purpose 'structured data' visualization system).

If seeing these visualizations of algorithms can significantly speed up human
understanding, how beneficial would it be for onboarding people to (e.g.) open
source projects, if the codebase had its central algorithms visualized?

For instance, consider introducing someone to the Git codebase for the first
time. What if the first step was allowing them to just use Git, while they
could see the data comprising the working tree, index, commit tree, etc.
changing as they performed various actions? After that, they could go to the
code and see which parts were responsible for producing the visualization.

Or, what if library/framework/language maintainers incorporated it to teach
people how to use/debug their systems. E.g. the 'state_machine' Ruby gem. How
valuable would it be if users of the library could turn on a debug flag and
just see their state machines being constructed and operating?

There's a video of the visualizer I'm working on running here (including
_another_ visualization of quicksort towards the end):
[http://symbolflux.com/projects/avd](http://symbolflux.com/projects/avd)

~~~
ivanhoe
I love the idea, it'd be great to have a tool like this integrated with
debuggers' watch. I'd love to be able to pick some variable and then, as I
step through the code, at any point be able to see the visual representation
of my data. Not a thing to use everyday probably, but from time to time it'd
be immensely helpful to have it.

~~~
westoncb
My original motivation for building it was because I wanted exactly that:)

------
arkj
Older thread.

[https://news.ycombinator.com/item?id=7949995](https://news.ycombinator.com/item?id=7949995)

------
marknadal
I absolutely love these articles, and was inspired to create some (not nearly
as cool) of my own.

Here is what a Graph looks like -
[http://gun.js.org/see/graphs.gif](http://gun.js.org/see/graphs.gif)

Here is how an Ad-Hoc Mesh Network can deduplicate broadcast storms:
[http://gun.js.org/see/ad-hoc-mesh-network.gif](http://gun.js.org/see/ad-hoc-
mesh-network.gif) (This is also the same principle that neurons use when
firing signals!)

Here is what a Radix structure looks like:
[http://gun.js.org/see/radix.gif](http://gun.js.org/see/radix.gif)

Would love to see other visualizations by other people, please add links for
me!

------
biot
Referenced in the top comment of the Gambler's Fallacy discussion:
[https://news.ycombinator.com/item?id=14805939](https://news.ycombinator.com/item?id=14805939)

------
serichsen
The Fisher-Yates shuffle has an off-by-one.

~~~
thethirdone
How so? It seems correct to me.

~~~
Terribledactyl
This implementation always moves the nth item, it should only do it most of
the time, it could never return the starting array but needs to be able to.

~~~
thethirdone
This implementation NEVER moves the nth item as that is past the end of the
array.

    
    
       i = Math.random() * n-- | 0; 
    

generates a value less than n.

And

    
    
        t = array[n];
        array[n] = array[i];
        array[i] = t;
    

is using a decremented n.

You are being confused by the `n--` in the random selection.

