Javascript Graph Layout Engine [closed]

Question

I'm looking for a Javascript library/engine that can do graph layouts. (And when I say layouts, I mean logically position vertices nicely.) The graphs I'm working with are all m-ary trees. M is usually no more than 5 or 6, but it can be greater in some cases.

I do have something that I use now, Graphviz's node program, and it works perfectly. The problem is, when running a web app, I have to send a request to the server every time I want a layout. Preferably, I would like something written in Javascript that can be quickly run on the client side. All it needs to do is provide layout information (relative positioning and whatnot). I don't need it to draw to a canvas or use SVG or anything, all I'm interested in is the layout.

Library use like jQuery or RaphaelJS is fine by me. I'll work with it. I'm just looking for something to speed things along a little.

Also, I'd consider writing my own if I could find a nice description of an algorithm to do the layouts. But I really don't want to spend too much time. I have something that works now, so getting it on the client side is just a bonus, not a necessity.

Answer 1

Check out dagre https://github.com/dagrejs/dagre it now uses D3 and does Graphviz's (Sugiyama) layout.

Answer 2

Take a look at D3 (Data-Driven Documents)

http://d3js.org/

They have some beautiful graph layouts.

Answer 3

In a commercial scenario, the yFiles for HTML library should be worth looking at. Although it also comes with its own visualization and editing capabilities, the layouts can also be used standalone and at the time of writing these are very likely the most flexible and complex layout algorithms you will find if you are looking for pure Javascript libraries. Of course there are techniques available today that will basically compile any library (e.g. the GraphViz library) into Javascript "blobs", but they do not provide a true API, they are more like console applications in the browser.

There are a number of demos available online that show what you can do with the layouts in yFiles. The implementation provides sophisticated and configurable versions of force directed algorithms, hierarchical (Sugiyama style), orthogonal, tree, circular and pure edge routing algorithms. This overview shows the different available modules and that they can be used independently from the viewer and editor parts.

Full disclosure: I work for the company that creates yFiles, but on SO I do not represent my employer.

Answer 4

http://sigmajs.org/ is a specialized js lib for graph visualization. It uses Canvas instead of SVG.