I Can Tell By The Pixels

June 26, 2014 10:31 AM

Visualizing Algorithms shows you how computer algorithms can be represented visually, leading to better understanding of how the algorithms work:

"Have you ever implemented an algorithm based on formal description? It can be hard! Being able to see what your code is doing can boost productivity. Visualization does not supplant the need for tests, but tests are useful primarily for detecting failure and not explaining it. Visualization can also discover unexpected behavior in your implementation, even when the output looks correct."
posted by quiet earth (29 comments total)

This is great. It's by Mike Bostocks, the creator of D3.js, a framework for data visualizations in Javascript. It's pretty amazing—makes me wish I were a better programmer so I could actually do stuff with it.
posted by adamrice at 10:53 AM on June 26, 2014 [8 favorites]

Wow, this is excellent.
posted by ltl at 11:17 AM on June 26, 2014

It was smart that he didn't start with visualizing bubble sort, but did get to quicksort which is tricky to understand.

I want to see the Watson algorithm, in full 3D. Contemplating lunch.
posted by sammyo at 11:36 AM on June 26, 2014 [1 favorite]

This is awesome and makes me feel less uncomfortable about the final hacking action sequence in Skyfall.
posted by stoneandstar at 11:40 AM on June 26, 2014 [1 favorite]

I know it's just dots, but there is really something beautiful about that first Bridson's algorithm animation and something kind of ugly about the completely random sampling. Bridson's just looks so, I don't know, natural.
posted by cirrostratus at 11:41 AM on June 26, 2014

That's a pretty page but I wish it didn't make my browser try to run a dozen computation intensive little programs all at once.
posted by Wolfdog at 12:06 PM on June 26, 2014 [1 favorite]

Bridson's does seem almost like a life simulator. You could imagine plants dropping seeds nearby which only sprout if they get enough sunlight.
posted by RobotHero at 12:13 PM on June 26, 2014 [1 favorite]

Really cool, cheers!
posted by Ned G at 12:17 PM on June 26, 2014

Oh, and here's a semi related post from not too long ago.
posted by Ned G at 12:19 PM on June 26, 2014

That Quicksort visualization was aces. It starts with a good visual conceit for displaying sorting generally (and I'd like to see it used in other visualizations), and then highlights the quirky segmentation used by the QS algorithm.
posted by whuppy at 12:23 PM on June 26, 2014

This is nice, until there's a bug in your visualization that corrects an existing bug in your algorithm.
posted by anthill at 12:25 PM on June 26, 2014

I like this visualization of quicksort better.
posted by Frayed Knot at 12:25 PM on June 26, 2014 [3 favorites]

I wish it didn't make my browser try to run a dozen computation intensive little programs all at once.

If your browser is struggling with that page then there is something seriously wrong with your rendering pipeline. Or perhaps you have antique equipment. I ran Chrome's profiler on the page whilst rapidly triggering animations to run and the profile was 94.23% idle time.

In normal use each animation only triggers once the page is scrolled to bring it into visibility. So if you're reading at normal speed you're unlikely to have more than 1 or 2 running at any time. These algorithms are massively slowed down to make them observable, at full tilt they'd probably be a single frame.

I thought it was a well designed, and considerately designed, page. Beautiful too.
posted by samworm at 12:30 PM on June 26, 2014 [4 favorites]

And the conversion of the maze into a spanning tree just made me squee.
posted by whuppy at 12:39 PM on June 26, 2014 [3 favorites]

Beautiful. Thanks.
posted by mondo dentro at 12:49 PM on June 26, 2014

I don't think he gives uniform random enough credit-- yeah, it's weird and lumpy and not at all regular, but that's kind of the point.
posted by Pyry at 1:10 PM on June 26, 2014

I love the look of everything I've seen by Bostocks. D3.js is brilliant. Even though it tends to peg my CPU too. Observing that it doesn't on someone's particular browser on a particular machine is pretty useless.
posted by benito.strauss at 1:17 PM on June 26, 2014 [1 favorite]

wow, this is dang awesome, I really need to spend an afternoon diving into this.
posted by rebent at 1:21 PM on June 26, 2014

Whuppy - yes, me too! That's one of the nicest visualisation transformations I've ever seen.
posted by Major Clanger at 2:32 PM on June 26, 2014

In the section on shuffling by sorting with random comparisons, it was interesting how the resulting distributions revealed features of the sorting algorithm. I wonder what other sorting algorithms would look like.
posted by eruonna at 3:19 PM on June 26, 2014

I had somehow come across these demos in a different form a few weeks ago while searching for something I now forget. There is even more cool stuff if you keep scrolling down. This guy is awesome and prolific.
posted by smcameron at 4:15 PM on June 26, 2014 [1 favorite]

*click* Saved for next acid trip.
posted by runcibleshaw at 5:06 PM on June 26, 2014 [1 favorite]

(Guys, his name is Mike Bostock, not Bostocks. He is indeed an amazing guy.)
posted by ignignokt at 7:27 PM on June 26, 2014

Being able to see what your code is doing can boost productivity.

Word. I'm writing a thing that crudely models air flow and wrote tests that check output. This was fine when I had like five cells and could verify the output in my head. "OK, so on iteration 2, this cell will lose this much pressure, and these will gain that much. Looks fine!"

Once you have 6,000 cells, even if you're just spot checking, it's very hard to verify that things are going as they should. Way easier if you render the output and just watch the pressure flowing about.

Then, once you see that things are pretty much fine, you can save that output and put it back into automated tests.
posted by ignignokt at 7:39 PM on June 26, 2014

I was acquainted with Mike Bostock at both Trilogy and Google. He's easily one of the smartest people I've ever met. We both came to Trilogy straight out of college (2000) and went through the "boot camp" abuse training together. We were in the engineering track, which started out with a month of very difficult one-week assignments that had to be completed individually. One of these projects was to create an automotive company website with a customer-facing, model-driven configurator that would deliver an xml specification of the car for downstream supply chain, engineering, and manufacturing purposes. I generally pulled 1 or 2 all-nighters each week to get these things finished, but didn't manage to get this assignment done before the deadline. I stopped to talk with Mike, who had an interesting visualization running on his laptop. Not only had he completed the assignment, he'd also built a system that displayed an animated visualization of customer configuration preferences in real time, on the circa-2000 web, with tools that look like sticks and stones by today's standards. I remember telling him that I wasn't sure I would be able to type his code in a week, much less come up with the ideas and execute them so well. He's a guy who gives credence to the notion of 10x and 100x engineers.
posted by drklahn at 9:02 PM on June 26, 2014 [3 favorites]

Seeing the samping algorithms visualized led me to wonder whether the geometric moving mandala patterns that can be by people seen under certain conditions (with closed eyes or open depending on the condition) are the result of peeking into the underlying algorithms used to render your vision. Closed eye visualizations induced by THC are being used to study the visual cortex, sort of like unraveling the shaders and renderers and samplers within the brain's "display adapter" by tinkering with the circuitry using proven safe "catalysts" with the display (eyes) turned off.
posted by aydeejones at 1:23 PM on June 28, 2014 [1 favorite]

Sort of like seeing the canvas behind a painting, and the brush stroke techniques used to create a realistic painting by un-seeing the painting itself. Insert Keanu Meme Here
posted by aydeejones at 1:27 PM on June 28, 2014

Also, visualizations of algorithms have been an "end" rather than a "means" for so long in my world, from the first really great screen savers like ACIDWARP that inspired me to learn how to invoke square roots and recursion and XOR bitwise arithemetic and whatever else I could while into a tool simply to create fascinating-looking procedural images, usually with palette rotation or some other form of motion like with "shade bobs" or sinusoidal plasma...some might remember that constantly moving sinusoidal plasma in computer demos and "loaders" and whatnot, vs. the "square root recusion" plasma that turned into the "Render Clouds" effect in photo apps, which is similar to some of the maze-algorithm "fitness test" visualizations featured here.
posted by aydeejones at 1:32 PM on June 28, 2014 [1 favorite]

Brain : CPU :: Retina : GPU.

That earns multliple Keanu "Whoa!"s.
posted by benito.strauss at 1:43 PM on June 28, 2014