don't stop too early, or you'll miss the awesomeness

March 8, 2011 5:29 AM

Koalastothemax.com via the D3 JS library (data-driven DOM) a project of Mike Bostock. Thanks waxy.org
posted by gen (25 comments total)

Woah, definitely don't try opening FireBug in the U.S. visualization. Interesting library, gen, thanks for posting.
posted by Civil_Disobedient at 5:44 AM on March 8, 2011

This is a great illustration of "An infinite number of mathematicians walk into a bar. The first goes up to the bartender and says, "I'll have a pint of lager, please." Each next one says, "and I'll have half of what he's having." The bartender says, "You're all idiots," and pulls two pints."
posted by Space Coyote at 5:45 AM on March 8, 2011 [9 favorites]

Is there a way to export SVG to PostScript from within a browser, or otherwise extract the SVG at a given rendering state? It would be a great way to make publication-quality figures while having something interactive to document in a web-based journal.
posted by Blazecock Pileon at 5:50 AM on March 8, 2011

Spoiler alert: Nothing happens when you reveal all the dots.
posted by odinsdream at 6:31 AM on March 8, 2011 [4 favorites]

odinsdream: "Spoiler alert: Nothing happens when you reveal all the dots"

Yes, but it's mesmerizing to do so.

Thanks, gen, that go-chips-chips-all-the-way-down doodle was just what I needed to clear my head this morning.
posted by notsnot at 6:55 AM on March 8, 2011

I don't know how this is an illustration of that, Space Coyote, but that's my new favorite joke.
posted by echo target at 7:21 AM on March 8, 2011 [1 favorite]

Just looking at how the circles get so much smaller as they split into parts, it just reminded me of that pattern.
posted by Space Coyote at 7:30 AM on March 8, 2011

"The hell is this? I was promised—[waves mouse around angrily]—ah yes, good day to you."
posted by wreckingball at 7:37 AM on March 8, 2011 [2 favorites]

So good. Thanks, gen.

What strikes me about several of the HTML/CSS/JS demoes I've seen in the last few months is how joyful they make me feel. In many of them, user interaction combines with visual aesthetics in a surprising and wonderful way.

LOVE THIS STUFF.
posted by mistersquid at 7:50 AM on March 8, 2011 [1 favorite]

Mike Bostock is also the software designer behind Protovis and Polymaps, two other amazing Javascript libraries. D3 is his new thing. It's one part jQuery, one part Protovis. I'm still wrapping my ahead around it, it's a fairly small but dense library, like a Webern cantata. But all the better for it.

I just ported a visualization over from Protovis to D3 and enjoyed the experience. D3 lets you easily go in and directly build graphs with SVG, it's very document oriented as opposed to the more procedural style of Protovis. One neat thing is you pop open Firebug or Chrome Dev Tools and there's your graph right there, in the DOM, and you can easily debug and tweak it. And the graphics look great; SVG is a real hidden gem.

One thing D3 enables is transitions. You see it in the koalas in the animation of how the circles split. The stacked bars demo is nice too, click the buttons Group/Stack for the transitions.
posted by Nelson at 8:10 AM on March 8, 2011

> Spoiler alert: Nothing happens when you reveal all the dots.

Really? I saw a koala.
posted by ardgedee at 8:20 AM on March 8, 2011

Really? I saw a koala.

Two koalas, actually - there's a baby on the left.
posted by Philosopher Dirtbike at 9:30 AM on March 8, 2011

Is there a way to export SVG to PostScript from within a browser, or otherwise extract the SVG at a given rendering state?

I was able to get the SVG in Firefox and Chrome. If you save the page at any state, the svg will be in there. After removing everything else, I had to add

version="1.1" xmlns="http://www.w3.org/2000/svg"

to the svg tag before the browsers would render it.
posted by -jf- at 9:59 AM on March 8, 2011

16,384 dots, or 128^2 (which is also 2^14?)

do i win something? aside from two (2!) koalas, that is.
posted by mrgrimm at 10:05 AM on March 8, 2011

Also, NOT FOR THOSE WITH OCD.
posted by mrgrimm at 10:06 AM on March 8, 2011

Gah! The dots... they're so... CUTE!
posted by TheCoug at 10:26 AM on March 8, 2011

This is really great, not for the koalas, but for D3, which really deserves its own meaty post. I've bookmarked this as something I'll be using as soon as I can for some visualization and reporting projects. Thanks!
posted by odinsdream at 10:55 AM on March 8, 2011

:( The D3 examples don't work for my newest, off the shelf/reference-quality IE instance, which sucks as I would have loved to use some of these in a forthcoming project, especially if I could count on it cross-platform...
posted by Ogre Lawless at 12:33 PM on March 8, 2011

The D3 examples don't work for my newest, off the shelf/reference-quality IE instance

It seems that Internet Explorer doesn't support SVG without a plugin, and as far as I can tell D3.js only uses SVG.

You might look into Raphael.js, which supports IE by using VML for IE and SVG for other browsers. It's pretty easy to use, but it's a lower-level drawing library, so you'd have to build your own charts. Or you can try gRaphael, a graphing library built on Raphael.js. I haven't tried gRaphael, but here's an example from the New York Times.
posted by -jf- at 1:40 PM on March 8, 2011

I'm impressed it took 7 hours before someone noted that these don't work in IE. Not so many IE users on Metafilter, maybe? IE8 and older does not support SVG, and the koalas page doesn't even detect the lack of feature :-( IE9 offers SVG support but I haven't heard anything yet about how well it might work. Anyone try these examples in IE9?

D3 itself does not require SVG; it happily manipulates any DOM. The treemap example is divs. But if you want to draw graphics with DOM, SVG is your practical option.
posted by Nelson at 4:26 PM on March 8, 2011

I was doing the same research on this earlier today, looks like IE 9 has been in beta for a year but is close to Release Candidate.
posted by mathowie at 6:43 PM on March 8, 2011

IE9 has been in release candidate for about a month, and is scheduled for official release at a blowout at South by Southwest on St. Pat's day. Because nothing complements getting drunk and pretending you're Irish like a desktop web browser. Apparently.
posted by ardgedee at 6:50 PM on March 8, 2011

I did all the dots. Now that's some koala-tee* web dev!

^*Blatantly stolen from the side of a truck.
posted by mistersquid at 9:43 PM on March 8, 2011

I was able to get the SVG in Firefox and Chrome. If you save the page at any state, the svg will be in there.

You can pull the SVG out of the DOM, yes, but not in the state that it is in after making interactive changes to it (see the widgets in the second link).
posted by Blazecock Pileon at 10:45 PM on March 8, 2011

I was able to pull the SVG from http://www.koalastothemax.com/ in the state it is in after making interactive changes. Not so much able to as that's just what happened. Proof: I put an SVG here
posted by -jf- at 5:52 PM on March 9, 2011