Arbor.js - HTML5 graph visualization library(arborjs.org)
arborjs.org
Arbor.js - HTML5 graph visualization library
http://arborjs.org/
19 comments
For force-directed graph layouts in javascript, see also Springy: http://github.com/dhotson/springy
Demo: http://dhotson.github.com/springy/demo.html
Demo: http://dhotson.github.com/springy/demo.html
This one seemed to perform better.
Nice, been thinking of starting an HTML 5 graph visualization myself. Though I would put less emphasis on the animation and more on the "clickability" of buttons. This jittering around makes it look broken - instead I would arrange all elements in their final position from the beginning and only use animations when a new node is created.
The "animation" is most likely a side effect of the integration process, it's hard to avoid considering the high running time of force directed layout algorithms, especially because in this case it is brute force O(n2) rather than using something like Barnes-Hut that makes it more like O(n log n).
The demo seems to hang / be slow on Firefox 3.6.13 on Windows. Then again, I have a ton of tabs open.
I've got both cores pegged under Mac as well.
Was the demo of the US map inverted on purpose? I couldn't resist trying to correct it by flinging nodes about...
Are there any common reasons why a startup would be interested in graph visualization? There's clearly uses here for visualizing a social network or RDF graph, but what else?
Network topology. Code visualization. State machines. Mind-mapping. Transportation networks. It depends on what kind of data you need to visualize.
I can't give too many details away.. but where I work we've been using graph visualizations and algorithms to investigate and detect fraud.
I've open sourced the force directed graph viz part of it in case anyone is interested: http://github.com/dhotson/springy
I've open sourced the force directed graph viz part of it in case anyone is interested: http://github.com/dhotson/springy
A novel answer to that question could be the basis for a startup, in an of its own right, I should think!
How about everything?
Seriously. The graph is one of the best data structures we have for modeling systems and taxonomies.
See, for example, Avatar. What enabled the effects in that film, at its very core?
A Directed Acyclic Graph.
Seriously. The graph is one of the best data structures we have for modeling systems and taxonomies.
See, for example, Avatar. What enabled the effects in that film, at its very core?
A Directed Acyclic Graph.
[the brain](http://www.thebrain.com/) rocked 10 years ago, and reimplementing it in a smooth html5 finish would be a serious competitor to the established wiki's.
PersonalBrain does feel a bit clunky in Java and it stinks that it's a desktop-only application (with a not-so-great and expensive Java web version). That having been said, it still rocks. I use it every day.
I would love to see competition for it as a collaborative webapp or as a native OS X / iPhone / iPad app.
I would love to see competition for it as a collaborative webapp or as a native OS X / iPhone / iPad app.
Documenting IT servers, services, networks... application dependency mapping. If you can query the graph, you can analyze the impact of changes before you make them. That's exactly what our product does see video:
http://pathwaysystems.com/?autoplay=impact
Recommendations
These remind me of flash stuff on praystation.com 10 years ago!
force directed graphs? or confusing eye candy? Maybe you can do a graph visualization of the difference.
I think the library looks really interesting.
I think the library looks really interesting.
Very interested on this. How scalable it is? How many nodes can I see?
I ask because it uses a Force Directed layout, I guess it will get very slow after a few thousands of nodes.
Looks promising though. I'll play with it...
I ask because it uses a Force Directed layout, I guess it will get very slow after a few thousands of nodes.
Looks promising though. I'll play with it...
My friend Christian wrote this library -- I would recommend that you take a look at the "halfviz" demo to get a sense of its upper bounds: http://arborjs.org/halfviz/#/date-with-destiny
Christian's site, with some of his other work, is at http://samizdat.cc/
Christian's site, with some of his other work, is at http://samizdat.cc/
This reminds me of the JavaScript InfoVis Toolkit, which includes similar graph visualizations but also a handful more:
http://thejit.org/
I've used it in the past to visualize the structure of Google Wave conversations, and intend to use it in the future to visualize related products. (Unless I use this one instead, of course :)
I think that a graph interface like this shouldn't be the only way to get at some set of data, but at least for some people, it can be a really new and compelling way to explore it.
I've used it in the past to visualize the structure of Google Wave conversations, and intend to use it in the future to visualize related products. (Unless I use this one instead, of course :)
I think that a graph interface like this shouldn't be the only way to get at some set of data, but at least for some people, it can be a really new and compelling way to explore it.
What a great site design which incorporates the library itself. It took me a second to realize that the graph was the site navigation, and it kind of caught me off guard. In a good way.
Is the usage of Workers in that the simulation is happening in a Worker and the UI samples that data every so often?
Causing quite high CPU usage in Firefox, is this generally true for HTML5 animations? (60% of Core2 Due @ 2.66Ghz)
wow, this is really well done! i love the user interface for changing parameters (friction, gravity,etc.) and just overall smoothness
seems as if the algorithm grows unstable for very high node repulsion. even with a few nodes you can tell it is getting caught in a local energy minimum, plus the oscillations are jarring. maybe just cap the repulsion strength at 50k?
have you thought about adding hover text, upon a mouseover of the vertices?
also, maybe instead of spring tension, one could use fixed lengths given by the weights of another text file. giving user generated meaning to the edge lengths.
seems as if the algorithm grows unstable for very high node repulsion. even with a few nodes you can tell it is getting caught in a local energy minimum, plus the oscillations are jarring. maybe just cap the repulsion strength at 50k?
have you thought about adding hover text, upon a mouseover of the vertices?
also, maybe instead of spring tension, one could use fixed lengths given by the weights of another text file. giving user generated meaning to the edge lengths.
Is there an HTML renderer example for this somewhere? I'm not sure how can I make a graph interactive with canvas?
The sample project on Github includes some interactivity - dragging and dropping nodes.
https://github.com/samizdatco/arbor/tree/master/docs/sample-...
https://github.com/samizdatco/arbor/tree/master/docs/sample-...
Thanks for the pointer. Actually what I'm looking for is edit/add/remove functionality. Something suitable for making a web-based concept map.
This is very cool. Unfortunately browsers in many corporate environments don't support this or springy.
What about a website structure representation?
(I'm working on it)
(I'm working on it)
I'm going to have to pick up web workers
No documentation in the docs node?
http://arborjs.org/reference seems pretty well documented (with examples even, creation & use links)
The library itself is nice, but I feel the need to ask - why the hell does this have a jQuery dependency? jQuery exists primarily to plug the holes/inefficiencies in older browsers, but this thing isn't guaranteed to work in older browsers due to its reliance on web workers in the first place.
There's nothing wrong with standard Javascript provided the environment is sane.
There's nothing wrong with standard Javascript provided the environment is sane.
That being said - it seems like a very cool library!