0

I am trying to find some example code using a javascript library for a force directed graph in which the user can move any node around (and the graph responds dynamically) - but then each node can be clickable and open an "node detail" page (in a different tab).

I looked through D3.js, arbor.js, jit (javascript infoviz toolkit), springy. Those all look great and have demos which are close to what I want, but not quite there.

I'm not an experienced js programmer, I mostly do server side stuff.

My fear is that I might try to learn one of these libraries to try and implement my use-case only to find that it won't work for some reason. For example, one of these (D3) has a discussion in its forum that clicking a node is often mistaken for moving the node and there didn't seem to be a quick workaround. In another one (arbor.js), the front page (in addition to being minified) shows something close to what I want but the nodes which are movable are not clickable and the nodes which are clickable are not movable.

FF or Chrome is fine - I don't need IE support.

I am also open to something Flash based - as long as I don't need to compile anything in Actionscript/Flash - something with a js/html API.

Thanks.

Tom Zych
  • 13,329
  • 9
  • 36
  • 53
brfox
  • 323
  • 3
  • 14
  • Looks like a dupe: http://stackoverflow.com/questions/7034/graph-visualization-code-in-javascript – Tom Aug 22 '11 at 06:33
  • I studied that page for a while and went to lots of the libraries mentioned before posting this question. But, I still don't know which of them will do this example - I'd like to see a demo of it before committing time to learning a new system. Or, perhaps, someone can provide some words of experience to say which tool they think will work best for this? Also, that question was from 3 years ago. – brfox Aug 22 '11 at 06:36

1 Answers1

0

I think that's a pretty good list of tools you have. Protovis?

I suspect it's actually not going to be much work to grab a click event from any JS-based tool-- but I haven't done that specifically with any of the ones you mention.

A couple years ago I did a prototype project using a pure Javascript implementation. Everything is just DOM nodes, so you can definitely grab clicks as necessary. It's fine, but since the code is not actively maintained (as far as I could find), I did have to do quite a bit to fit it to my needs. Using something with more recent and active development is a good idea. I also learned that performance was going to be an issue, especially in Firefox. You can play with my prototype and see where it breaks down-- which it does. I think 100 nodes or so is the danger point.

Good luck!

ndp
  • 21,546
  • 5
  • 36
  • 52
  • Yeah, protovis looks great, too. But its development has stopped and is now D3. From reading some of the D3 forum (http://groups.google.com/group/d3-js/browse_thread/thread/a8942e097d598633) I think the problem with grabbing the click is that it gets confused with a click-move-unclick (i.e. a drag). That's why I want to see something working before I try to implement it. And, your tool is nice, but I think I might sometimes need 200-300 nodes. But, thanks for your comments. – brfox Aug 22 '11 at 06:47