Visualizing Algorithms

[mbostock]

Author here, ask me anything. And don’t miss the related work section at the end — there’s a ton of links there to inspiring work.

[cs702]

Have you ever considered visualizing artificial neural networks in training or in operation?

Speaking purely from a selfish standpoint, it would be awesome to SEE what back-propagation "looks like" with different neuronal activation functions, or what feature learning by restricted Boltzmann machines "looks like," or how dropout causes networks to generalize better -- to name just a few possibilities.

If anyone can visualize neural network algorithms in a way that is intuitive and beautiful, it's you!

[subbu]

Most d3 books out there are entry level. They don't cover advanced concepts which are needed to build serious visualizations. The only way to learn advanced stuff is to go through your bl.ocks, which could be daunting sometimes without comments. It'd be awesome if you can think of writing an advanced book. I know its too much to ask for, especially considering your active contribution on Google Groups and StackOverflow.

[viggity]

this is only slightly tongue in cheek, but do you ever get tired of being so awesome? Seriously. this shit is amazing.

thanks for all the time/effort you've put into d3. my side project (machete.io) certainly wouldn't be possible without it.

[pgbovine]

How many hours did it take for you to make this page? (even after you created your initial talk.)

I love these sorts of interactive, visual essays and would love to find ways to lower creation times.

[infogulch]

Beautiful! These would be very useful to someone learning these algorithms, but also to someone interested in creating their own visualizations. I like how you highlight the drawbacks of different types of visualizations and demonstrate that different visualizations can have different goals, and offer creative solutions for both.

One nitpick with the maze visualizations though. I found that the maze color flood animations have the same issue that you mentioned sorting has: animations are frustrating to watch because you have to wait and then rely on memory to recognize patterns. Specifically, I found the color scale rotation was much too fast to see large patterns, and even small patterns were too dense to be able to trace backwards after the maze had been fully colored.

I have an idea for an alternate visualization: Only show the fully colored maze (no intermediates), but vary the color rotation length over time from frame to frame. You'd be able to see color rippling through the maze and be able to follow the ripples over both large scale and small scale features.

[tezza]

In case you're revisiting this post later ( 17 hours elapsed when I got to your article )

.

1. Recording the missteps to Perfection

.

In future could you record the number of edits required to come up with your finished essays ? I've always found that it takes a lot of steps to make something that elegantly looks as though no mis-steps were taken. Some form of screen recording style evolution of the essay over time

I know Paul Graham had a live essay session recording.

.

2. Archiving live and interactive works.

.

I guess your piece will archive okay as it is the sum of static files. But I do hope that your essay plays well with archive.org so that future people can enjoy your article.

.

3. The future of the interactive essay

.

Relating to 1. I can't imagine that preparing an interactive essay is an easy affair. A lot of effort goes into a static essay. How much work is it to interactivate it? Do you feel it will become more widespread as an essay form or restricted to a select bunch of interactivists ?

E books - smartphones really make interactive essays possible to disseminate.

[polskibus]

Fantastic article! I am a big fan of your work. Some questions:

- any plans on trying to make a canvas based d3 adapter/library? Also thinking about webgl here, although I believe x3dom works well enough

- have you played with other programming languages to evaluate their support for data vis expressiveness? If so, what would you recommend to try out?

[jpeterson]

First of all, amazing article!

However, I believe that the bit about light being a "continuous" signal in the first paragraph invites conflicting thoughts of wave / particle duality, which distracts from and is not at all relevant to your point.

The eye samples light because it connects to a machine with a fixed number of inputs. This setup would also require sampling if the signal were not continuous at all, but instead consisted of a much larger number of discrete parts than the "sensing" equipment could handle.

[spenuke]

Can someone clue me in on the usage of bitwise operators when declaring the cardinal direction variables (NSWE)? I can't make sense of it -- those values don't seem to make use of any bitwise operations further down the line, unless I'm missing something, which is very possible.

Is this just a stylistic choice to signal the uses for those variables? (Though I confess I still don't know what that signal would be, anyway.)

Any illumination would be appreciated, but should MBostock still be following this, thanks so much for your work! So inspiring.

[phloxicon]

Beautiful article. Is there a repository with the source code available? You mention viewing the source in the article but my mobile browser can't do that.

[hexleo]

Thank you for your work. Very impressive work. Examples of these algorithms cat let my students can easily lean.

[julie1]

you said ask me anything :)

What about vizualizing randomness ?

Like in this article ? http://lcamtuf.coredump.cx/oldtcp/tcpseq/print.html

[pokpokpok]

thanks for producing such beautiful work! I've used these visualizations to explain what a programming thought process is like.

[prezjordan]

Off-topic: Why isn't my macbook a jet engine right now? I've read plenty of blogs with nothing but a parallax scroll at the top and my computer fan goes insane.

But, on this blog, TONS of dynamic code running and not a peep.

[_pmf_]

> Why isn't my macbook a jet engine right now? I've read plenty of blogs with nothing but a parallax scroll at the top and my computer fan goes insane

Ah, the beauty of Javascript!

[tsenkov]

Precisely what I was thinking by the end of the post.

[domdip]

Funny thing about that random comparator shuffle - Microsoft used it for their browser selection screen (part of the EU antitrust settlement). Oops!

http://www.robweir.com/blog/2010/02/microsoft-random-browser...

[resu]

Breathtaking work!

Found a ton more interesting examples here: http://bl.ocks.org/mbostock

[talles]

This one is so beautiful: http://bl.ocks.org/mbostock/d8e15a0ab7f85818a5bd

[parham]

Power of visuals, so pretty.

[jqm]

This was really great.

Especially maze turning into spanning tree. That one was truly mind blowing.

[jmt7les]

I could watch that for hours straight.

[VMG]

This one is also interesting (requires WebGL) http://ottoallmendinger.github.io/js-quickhull3d/

[yazinsai]

+1 if you didn't understand a thing but kept scrolling for the sweet, sweet animations

[prestonbriggs]

Here're are a couple of papers you'll probably enjoy:

Design and implementation of the UW Illustrated compiler by Andrews, Henry, and Yamamoto PLDI '88

and

The University of Washington illustrating compiler by Henry, Whaley, and Forstall PLDI '90

[DalekBaldwin]

I can't find any copies of these papers that aren't behind a paywall. Is there any record of what the visualizations looked like?

[Artemis2]

Great piece of work!

I've seen in the piece of code corresponding to the Fisher-Yates algorithm this snippet: "n-- | 0". Has the "| 0" any importance?

[abbeyj]

x | 0 will truncate a floating point x to an integer. The multiplication happens first so the overall expression acts like i = (Math.random() * n--) | 0.

[goblin89]

Anyone interested will probably also enjoy Mike's talk “Design is a search problem” from Openvis conference: http://www.youtube.com/watch?v=fThhbt23SGM

[mu_killnine]

This is incredible. As a non-CS major, it's been truly a fascinating read!

[reader5000]

Really is interesting how proper visualization allows you to see very subtle probabilistic distinctions that probably only a phd in stochastic processes would understand intuitively.

[appreneur]

Beautiful...just to understand that algorithms also paint beautifully ...visualising algorithms awesome!

[sys32768]

How did you people learn these things without visualizations?

[gadgetdevil]

The web is truly the new <canvas> for the artist.

[hamxiaoz]

I'm thinking the same thing.

[joaomoreno]

Great job, this both reads and looks great!

[johnsteve]

well this excites me now. can anyone help me master the basics or suggest any good book?

[mellisarob]

please recommend a good book that would assist me with the basics.

[idibidiart]

I wonder about visualizing the algorithms that visualize the algorithms. Being serious and curious here.

[milroc]

http://bost.ocks.org/mike/join/

[yazinsai]

Tread carefully, for you risk breaking the universe.