Tuesday, April 8th, 2008

MooWheel: Unique Data Visualization

Category: MooTools

Josh Gross, the creator of the Ajax-powered AjaxIM instant messenger, has come up with a unique way to visualize data:

The purpose of this script is to provide a unique and elegant way to visualize data using Javascript and the canvas object. This type of visualization can be used to display connections between many different objects, be them people, places, things, or otherwise.

By using MooTools, CanvasText (for text support with canvas elements) and ExCanvas (for IE canvas support), he was able to produce an interesting UI for showing off data.

It’s a very cool effect and I’m sure has applicability within applications. I’d like to hear from the Ajaxian community how this might be used. Thoughts?

Posted by Rey Bango at 9:27 am

-25637.2 rating from 39 votes


Comments feed TrackBack URI

It is indeed cool-looking, but I think the distortion makes it more difficult to quickly see which nodes are linked than it would be if all of the lines were straight.

Comment by bander — April 8, 2008

it’s very pretty but i doubt it’s very useful…

Comment by wwwmarty — April 8, 2008

@bander: try hovering over the bullets of each node. It highlights the connections.

Graph layout is an art unto itself (there are whole conferences organized on the subject every year), and whether you think a graph is useful depends highly on taste and perception.

Comment by Joeri — April 8, 2008

It’s good the connections get highlighted, but I did expect them to do so when I hover over the labels of the nodes. This could be improved. Would be nice if the connected node labels would get highlighted too. And I think I would find it more usable if the highlighting could be even more emphasized. The whole thing is just too colorful for the highlight to provide good contrast (at least to me)

Comment by Gordon — April 8, 2008

Very nice. I love data visualization, and am glad to start seeing some AJAX versions.
When you hover on one of your nodes, I am not sure if it is the “to” or “from” connections that are highlighted. It might be nice if you used three highlight colors, one for “to”, one for “from”, and one for “mutually connected”.
More examples of data visualization, though most are either Flash or Java: http://www.visualcomplexity.com/vc/

Comment by GregHouston — April 8, 2008

Say you really like Pacino, Scorsese and De Niro, such an interface would help to check which movies you have not seen yet. But, to be really usable the interface would still lack “grouping” (actors vs movies vs genres, for example)

Comment by icoloma — April 9, 2008

Veeeeery nice! I have to disagree with the statement that it’s nt easy to read. If you try their demo and hover over a node, i highlight all the links of that node. (http://www.unwieldy.net/moowheel/demo/large.html)

Direction indication would be nice though.

Comment by OndraM — April 10, 2008

Cool stuff. Love to see MooTools helping for advanced applications like this. Has anyone checked out the Flex data visualization, flow chart, graphs and statistics stuff? It seems pretty powerful. I caught a demo at the 360Flex 2007 conference in Seattle and was certainly impressed. A side not about this post: What’s with the rating? Currently it says “-39996 rating from 25”. I thought this post was quite good actually!

Comment by jdempcy — May 5, 2008

Leave a comment

You must be logged in to post a comment.