Arbor.js - HTML5 graph visualization library

http://arborjs.org/

by fish2000 • 16 years ago

193 37 16 years ago

arborjs.org

futuremint• 16 years ago

These remind me of flash stuff on praystation.com 10 years ago!

bradshaw1965• 16 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.

miguelrios• 16 years ago

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...

fish20002• 16 years ago

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/

thecoffman• 16 years ago

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!

babyshake• 16 years ago

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?

wahnfrieden• 16 years ago

Recommendations

fish20002• 16 years ago

A novel answer to that question could be the basis for a startup, in an of its own right, I should think!

dkarl• 16 years ago

Network topology. Code visualization. State machines. Mind-mapping. Transportation networks. It depends on what kind of data you need to visualize.

digitailor• 16 years ago

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• 16 years ago

[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.

zzzmarcus• 16 years ago

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.

dhotson• 16 years ago

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

devenson• 16 years ago

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

daviding• 16 years ago

Was the demo of the US map inverted on purpose? I couldn't resist trying to correct it by flinging nodes about...

swannodette• 16 years ago

Is the usage of Workers in that the simulation is happening in a Worker and the UI samples that data every so often?

rexreed• 16 years ago

The demo seems to hang / be slow on Firefox 3.6.13 on Windows. Then again, I have a ton of tabs open.

seanalltogether• 16 years ago

I've got both cores pegged under Mac as well.

michaelty• 16 years ago

No documentation in the docs node?

nsfmc• 16 years ago

http://arborjs.org/reference seems pretty well documented (with examples even, creation & use links)

jcfrei• 16 years ago

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• 16 years ago

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).

dmvaldman2• 16 years ago

Fast Multipole Methods FTW! O(n)

Haha, completely unnecessary. Just wanted to show off.

derefr• 16 years ago

I think the parent is just suggesting a quick annealing process—drag should increase exponentially over time, but reset to 0 when a new node is added.

dmvaldman2• 16 years ago

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.

_sh• 16 years ago

For force-directed graph layouts in javascript, see also Springy: http://github.com/dhotson/springy

Demo: http://dhotson.github.com/springy/demo.html

alttab• 16 years ago

This one seemed to perform better.

jacabado• 16 years ago

What about a website structure representation?

(I'm working on it)

Klonoar• 16 years ago

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.

jlongster• 16 years ago

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.

taylorbuley• 16 years ago

I'm going to have to pick up web workers

knv2• 16 years ago

Is there an HTML renderer example for this somewhere? I'm not sure how can I make a graph interactive with canvas?

ericlavigne• 16 years ago

The sample project on Github includes some interactivity - dragging and dropping nodes.

https://github.com/samizdatco/arbor/tree/master/docs/sample-...

knv2• 16 years ago

Thanks for the pointer. Actually what I'm looking for is edit/add/remove functionality. Something suitable for making a web-based concept map.

omerkudat• 16 years ago

Causing quite high CPU usage in Firefox, is this generally true for HTML5 animations? (60% of Core2 Due @ 2.66Ghz)

pamelafox• 16 years ago

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.

va_coder• 16 years ago

This is very cool. Unfortunately browsers in many corporate environments don't support this or springy.

Arbor.js - HTML5 graph visualization library

Related Stories