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.

Amphicoelous

I can't post an answer since the question is closed... But you might want to look at elkjs for the layout part. It's more complete than dagre and integrates well with drawing libraries too. Also check the list of options available. – Insect

Answer 1

Take a look at D3 (Data-Driven Documents)

http://d3js.org/

They have some beautiful graph layouts.

Prytaneum

Definitely a VERY good choice. I played around with it a bit and I'm amazed. This is probably what I'll end up using, but I'll wait a bit to see if anybody else has a suggestion. – Amphicoelous

Answer 2

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

Ching

Love that, I have been looking for a Javascript lib that does orthogonal layout and this is the first one that is close to the mar k;) Thanks for sharing !! – Pledgee

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.

Methylene

Do you know the rough pricing of a licence please? – Hectograph

@John: yworks.com/products/yfiles-for-html/pricing – Methylene

Answer 4

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

Titty

problem with sigma.js is, that you have to do the layouts on your own... – Distinguish

not at all, the ForceAtlas2 layout is available and you can code your own layouts. I've done it for a couple of layouts. The real issue is to run a layout on a web browser, which is much slower than using a compiled language. – Titty