javascriptjquerydata-structuresgraph-layout

Graph visualization library in JavaScript

I have a data structure that represents a directed graph, and I want to render that dynamically on an HTML page. These graphs will usually be just a few nodes, maybe ten at the very upper end, so my guess is that performance isn't going to be a big deal. Ideally, I'd like to be able to hook it in with jQuery so that users can tweak the layout manually by dragging the nodes around.

Note: I'm not looking for a charting library.

Solution

  • I've just put together what you may be looking for: http://www.graphdracula.net

    It's JavaScript with directed graph layouting, SVG and you can even drag the nodes around. Still needs some tweaking, but is totally usable. You create nodes and edges easily with JavaScript code like this:

    var g = new Graph();
g.addEdge("strawberry", "cherry");
g.addEdge("cherry", "apple");
g.addEdge("id34", "cherry");

    I used the previously mentioned Raphael JS library (the graffle example) plus some code for a force based graph layout algorithm I found on the net (everything open source, MIT license). If you have any remarks or need a certain feature, I may implement it, just ask!

    You may want to have a look at other projects, too! Below are two meta-comparisons:

    Here's a list of similar projects (some have been already mentioned here):

    Pure JavaScript Libraries

    Commercial libraries

    Abandoned libraries

    Non-Javascript Libraries