Coding Horror: Dynamic, Lightweight Visualization

January 25, 2007

Dynamic, Lightweight Visualization

Edward Tufte's print world is filled with stunningly beautiful visualizations. Even seemingly mundane things like visualizations of Ruby, Java, and JavaScript grammars can be beautiful. But they're static. They don't move. They're not interactive.

That's where Ben comes in.

If you haven't visited Ben Fry's website before, I envy the experience you're about to have. (Be sure to visit his old MIT site, too.) Ben Fry is Edward Tufte armed with a compiler. Ben produces incredible dynamic visualizations with his custom Java-based, open-source processing language. It even comes with its own custom IDE:

We think most “integrated development environments” (Microsoft Visual Studio, Codewarrior, Eclipse, etc.) tend to be overkill for the type of audience we're targeting with Processing. For this reason, we've introduced the 'sketchbook' which is a more lightweight way to organize projects. As trained designers, we'd like the process of coding to be a lot more like sketching. The sketchbook setup, and the idea of just sitting down and writing code (without having to write two pages to set up a graphics context, thread, etc) is a small step towards that goal.
The idea of just writing a short piece of code that runs very easily (via a little run button) is a direct descendant of John Maeda's work in Design By Numbers, and our experiences maintaining it. (Yes, other languages and environments have done this first, but in our case, the concept is drawn from DBN).

It's amazing stuff, more akin to sketching than coding.

processing-ide-screenshot

Once you have the Java dependency and Processing installed, be sure to browse through the examples gallery to see what's possible.

Ben's latest Processing visualizations, baseball salary vs. performance, and isometric blocks, are like pages from an Edward Tufte book come to life. And who can forget his classic zipdecode?

If you've gone this far with Java-based visualization, you might as well continue on to IBM's Many Eyes site. You can't write your own visualization code here; you're stuck with the predefined visualizations they provide. You can, however, upload and share the data sets you're using to visualize from.

But you might wonder, what's with all the Java? Couldn't we do this dynamic visualization stuff with something more lightweight, something more appropriate for a web page?

JavaScript is a possibility. After all, we had Wolfenstein 5k, a JavaScript clone of Wolfenstein 3D written in only 5 kilobytes of JavaScript, way back in 2002. Sadly, it doesn't work in any modern browser, or even in any Microsoft OS newer than Windows XP Service Pack 2. But it's an impressive piece of work nonetheless. It foreshadowed just how reliant the web would become on JavaScript. One such JavaScript visualization, Kyle Scholz's music recommendation connected graph, is ponderously slow. It leaves me wondering if JavaScript is really up to the task of visualization, even with the HTML Canvas element.
What about Flash? Surely visualization is a better use for Flash than the legions of advertisements (and, now, video advertisements) I'm subjected to every day. Although I can find some isolated visualizations in Flash, I'm not seeing a vibrant visualization community there.
On the Windows side, there's some hope for Windows Presentation Foundation, which ships in every Vista box. WPF, and its lightweight cousin WPF/E, could enable lightweight, hardware accelerated visualization-- something that's sorely lacking from all the other options. To see what I mean, try this WPF 3D sample, which runs entirely in the browser. But the technology is far too new to have any kind of community.

If I wanted to see static illustrations, I'd read a book. But dynamic visualizations aren't quite there yet for web pages. Right now, you have to pick your technology poison. They all have their downsides. Still, it's something worth striving for. I yearn for the day when web pages are regularly illustrated with the kind of beautiful, dynamic visualizations that Ben Fry creates.

Posted by Jeff Atwood View blog reactions

« Would you rather be a Navigator or an Explorer? Extending The Windows Vista Grace Period to 120 Days »

Comments

The dojo.gfx library brings a unified API to canvas on browsers which support it and uses VML on IE to emulate. The output is impressive and a good candidate for the visualisations you are after.

wioota on January 27, 2007 05:03 AM

This *is* pretty sexy. I'm current starting a project using http://prefuse.org/ , and it's exciting to turn numbers and relationships into something more immediately meaningful. I think a problem doing this in web pages (besides a lack of slick, easy tech) is that it takes effort not just to code such a visualization, but to come up with one in the first place. A new way of thinking about data is just as important to a novel visualization as actually implementing it.

DeafByBeheading on January 27, 2007 08:26 AM

Funny!

> or even in any Microsoft OS newer than Windows XP
> Service Pack 2

Dude, Vista isn't even out yet for retail sale!

I guess we'll be swamped with these sorts of remarks from here on out though. I'm not tarring you as an intentional shill for Microsoft and the hardware sales industry, but it'll be interesting to see how many ways bloggers further the cause of the Supply Siders pushing conspicuous consumption. ["Dang! You're still on XP?" She said disdainfully looking down her nose, assessing his withering manhood.]

Just a wacky observation.

Bob on January 27, 2007 08:41 AM

Have you guys seen Indexed yet?

It's someone drawing simple charts on index cards showing relationships between ideas.

Some of them have been pretty good.

http://indexed.blogspot.com/

engtech on January 27, 2007 10:14 AM

If you have the time to complain about Flash ads, you could just install Adblock.

Fatalis on January 27, 2007 10:54 AM

It also seems that Wolfenstein 5K was done in 2003, not 2002. "Just so you know, this was written in 2003 for the 5K contest, but I haven't updated it since, which should be painfully obvious from the browser list below."

Fatalis on January 27, 2007 10:56 AM

Some cool flash visualizations are at:

http://www.levitated.net/

A bunch of them are "open source" (you can download the fla and ...)

http://www.levitated.net/daily/index.html

Jesse Andrews on January 27, 2007 12:25 PM

It's frustrating that the IE team ripped out the capability that made Wolfenstein 5K work (XBM image support), but didn't replace it with any more modern equivalents (like SVG, canvas or data:url support).

dojo.gfx looks great, though! I'd looked at for an abstraction layer that used SVG or VML (depending on browser support) a while ago and didn't find anything. This is it!

Jon Galloway on January 27, 2007 03:10 PM

dojo.gfx is very cool. More info:

http://www.thinkvitamin.com/features/design/create-cross-browser-vector-graphics

Demo 1:
http://www.dojotoolkit.org/dojo-api/trunk/demos/gfx/clock.html

Demo 2:
http://archive.dojotoolkit.org/nightly/demos/gfx/circles.html

Jeff Atwood on January 27, 2007 07:12 PM

Flash a la Processing ?= Brevity : http://blog-blprnt-com.bryght.net/blog/blprnt/brevity

chuck on January 28, 2007 06:45 AM

Dojo: Yeah, it rocks. But remember your post a few days ago about undocumented APIs?

http://manual.dojotoolkit.org/index.html

I held out some hope that the Open Lazlo project would bring some Flash based data visualzation to the web. But at OSCON when I asked them about charting the booth dude just gave me a blank look and said he didn't know anything about it. "I think it's in there, you'd have to look through the web site." His badge said "Engineer".

Scott on January 29, 2007 08:47 AM

Holy crap! The Marlins can field a Major League team for $14 Million?

I think the Mariners might manage to put 2 players on the field for that.

mikeb on January 29, 2007 12:56 PM

In my experience, java applets are nasty. I've tried three ways of displaying a graph (the node-and-edge sort), one of which was implementing spring-graph in processing, but it and the other solutions were very badly behaved, from having a 50-50 chance of freezing the browser (TouchGraph) to the second run not working or being the cause of a half-dead firefox process that means that lovely error that you can't start firefox because it's there yet not there.

I don't want to explain this to my users, and I can't yet figure out why not one, but all the applets I've tried have these problems, and why they're not particularly deterministically. I'm looking towards Flash; as much as I used to hate that CPU hog and use FlashBlock against the ads, people have it and it works more consistently and is easier to install, even in linux.

Bart on January 29, 2007 01:10 PM

Anything that's going to be commercially useful has to work with whatever the IT department has mandated for the corporate desktop. These days that's usually IE6 (with no SVG or Flash) running on XP. Javascript and/or bitmapped images are usually the only option.

David on February 5, 2007 05:14 PM

If you want to see some interesting use of flash combining visualization with ecommerce check out www.etsy.com

Ian Murphy on February 7, 2007 06:04 AM

Flash visualization is actually quite easy to do as well, I was amazed looking through the archives of http://levitated.net -- the some visualizations are made for Processing, the later ones for Flash MX, have a look.

cDima on February 21, 2007 11:45 AM

Hans Rosling has done work on presenting statistics with Flash, although I don't believe any of the code is open source. See:
http://www.ted.com/index.php/talks/view/id/92
http://www.gapminder.org/

For more information. The video at the first link is well worth watching.

Peter Bowyer on April 15, 2007 01:32 AM

TED is always worth watching ;)

Boris on May 11, 2008 01:19 AM