5 ms·

Arbor.js - HTML5 graph visualization library

193 points by fish2000 16y ago

futuremint 16y ago
These remind me of flash stuff on praystation.com 10 years ago!
- bradshaw1965 16y 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 16y 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...
- fish2000 16y 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 http://arborjs.org/halfviz/#/date-with-destiny Christian's site, with some of his other work, is at http://samizdat.cc/ http://samizdat.cc/
thecoffman 16y 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 16y 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 16y ago
  Recommendations
- fish2000 16y ago
  A novel answer to that question could be the basis for a startup, in an of its own right, I should think!
- dkarl 16y ago
  Network topology. Code visualization. State machines. Mind-mapping. Transportation networks. It depends on what kind of data you need to visualize.
- digitailor 16y 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 16y ago
  [the brain](http://www.thebrain.com/ 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 16y 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.
daviding 16y ago
Was the demo of the US map inverted on purpose? I couldn't resist trying to correct it by flinging nodes about...
swannodette 16y 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 16y 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 16y ago
  I've got both cores pegged under Mac as well.
michaelty 16y ago
No documentation in the docs node?
- nsfmc 16y ago
  http://arborjs.org/reference http://arborjs.org/reference seems pretty well documented (with examples even, creation & use links)
jcfrei 16y 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 16y 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).
  - dmvaldman 16y ago
    Fast Multipole Methods FTW! O(n) Haha, completely unnecessary. Just wanted to show off.
  - derefr 16y 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.
dmvaldman 16y 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 16y ago
For force-directed graph layouts in javascript, see also Springy: http://github.com/dhotson/springy http://github.com/dhotson/springy Demo: http://dhotson.github.com/springy/demo.html http://dhotson.github.com/springy/demo.html
- alttab 16y ago
  This one seemed to perform better.
jacabado 16y ago
What about a website structure representation? (I'm working on it)
Klonoar 16y 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 16y 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 16y ago
I'm going to have to pick up web workers
knv 16y ago
Is there an HTML renderer example for this somewhere? I'm not sure how can I make a graph interactive with canvas?
- ericlavigne 16y ago
  The sample project on Github includes some interactivity - dragging and dropping nodes. https://github.com/samizdatco/arbor/tree/master/docs/sample-project https://github.com/samizdatco/arbor/tree/master/docs/sample-...
  - knv 16y 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 16y ago
Causing quite high CPU usage in Firefox, is this generally true for HTML5 animations? (60% of Core2 Due @ 2.66Ghz)
pamelafox 16y ago
This reminds me of the JavaScript InfoVis Toolkit, which includes similar graph visualizations but also a handful more: http://thejit.org/ 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 16y ago
This is very cool. Unfortunately browsers in many corporate environments don't support this or springy.

193 points by fish2000 16y ago

futuremint 16y ago

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

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

fish2000 16y 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 http://arborjs.org/halfviz/#/date-with-destiny Christian's site, with some of his other work, is at http://samizdat.cc/ http://samizdat.cc/

thecoffman 16y 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 16y 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 16y ago
Recommendations
fish2000 16y ago
A novel answer to that question could be the basis for a startup, in an of its own right, I should think!
dkarl 16y ago
Network topology. Code visualization. State machines. Mind-mapping. Transportation networks. It depends on what kind of data you need to visualize.
digitailor 16y 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 16y ago
[the brain](http://www.thebrain.com/ 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 16y 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.

daviding 16y ago

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

swannodette 16y 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 16y 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 16y ago
I've got both cores pegged under Mac as well.

michaelty 16y ago

No documentation in the docs node?

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

jcfrei 16y 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 16y 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).
- dmvaldman 16y ago
  Fast Multipole Methods FTW! O(n) Haha, completely unnecessary. Just wanted to show off.
- derefr 16y 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.

dmvaldman 16y 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 16y ago

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

alttab 16y ago
This one seemed to perform better.

jacabado 16y ago

What about a website structure representation? (I'm working on it)

Klonoar 16y 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 16y 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 16y ago

I'm going to have to pick up web workers

knv 16y ago

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

ericlavigne 16y ago
The sample project on Github includes some interactivity - dragging and dropping nodes. https://github.com/samizdatco/arbor/tree/master/docs/sample-project https://github.com/samizdatco/arbor/tree/master/docs/sample-...
- knv 16y 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 16y ago

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

pamelafox 16y ago

This reminds me of the JavaScript InfoVis Toolkit, which includes similar graph visualizations but also a handful more: http://thejit.org/ 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 16y ago

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