WingNews logo WingNews GitHub [2]
top | item 2097518

Arbor.js - HTML5 graph visualization library

193 points| fish2000 | 15 years ago |arborjs.org | reply

37 comments

order
[+] thecoffman|15 years ago|reply
The animations for expanding nodes seemed very jarring. At first I wasn't even quite sure what was occurring. I didn't look through the docs to see if it was configurable for users - but I'd recommend something a little less abrupt for your landing page. It took some getting used to and imo is a deterrent to really exploring your site.

That being said - it seems like a very cool library!

[+] jcfrei|15 years ago|reply
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.
[+] gb|15 years ago|reply
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).
[+] rexreed|15 years ago|reply
The demo seems to hang / be slow on Firefox 3.6.13 on Windows. Then again, I have a ton of tabs open.
[+] daviding|15 years ago|reply
Was the demo of the US map inverted on purpose? I couldn't resist trying to correct it by flinging nodes about...
[+] babyshake|15 years ago|reply
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?
[+] dkarl|15 years ago|reply
Network topology. Code visualization. State machines. Mind-mapping. Transportation networks. It depends on what kind of data you need to visualize.
[+] dhotson|15 years ago|reply
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

[+] fish2000|15 years ago|reply
A novel answer to that question could be the basis for a startup, in an of its own right, I should think!
[+] digitailor|15 years ago|reply
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.

[+] troels|15 years ago|reply
[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.
[+] devenson|15 years ago|reply
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
[+] futuremint|15 years ago|reply
These remind me of flash stuff on praystation.com 10 years ago!
[+] bradshaw1965|15 years ago|reply
force directed graphs? or confusing eye candy? Maybe you can do a graph visualization of the difference.

I think the library looks really interesting.

[+] miguelrios|15 years ago|reply
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...

[+] pamelafox|15 years ago|reply
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.

[+] jlongster|15 years ago|reply
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.
[+] swannodette|15 years ago|reply
Is the usage of Workers in that the simulation is happening in a Worker and the UI samples that data every so often?
[+] omerkudat|15 years ago|reply
Causing quite high CPU usage in Firefox, is this generally true for HTML5 animations? (60% of Core2 Due @ 2.66Ghz)
[+] dmvaldman|15 years ago|reply
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.

[+] va_coder|15 years ago|reply
This is very cool. Unfortunately browsers in many corporate environments don't support this or springy.
[+] jacabado|15 years ago|reply
What about a website structure representation?

(I'm working on it)

[+] taylorbuley|15 years ago|reply
I'm going to have to pick up web workers
[+] Klonoar|15 years ago|reply
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.