Hi. I have a data structure that represents a directed graph, and I want to render that dynamically on an HTML page. Does anyone know of any javascript code that can do a reasonable job with graph layout? 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.
Edit: Google's Visualization API seems to be more "graphs as charts" oriented than "graphs as nodes" oriented. I didn't see any node-oriented visualizations already built there, anyway. Do you know that one exists?
Source: Tips4all
I've just put together what you may be looking for: http://www.graphdracula.net
ReplyDeleteIt'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!
Edit: You may want to have a look at other projects, too! Here's a list of similar projects (some have been already mentioned here):
arbor.js
Sophisticated graphing with nice physics and eyecandy.
Canviz
JS renderer for Graphviz graphs
Flare
Beautiful and powerful Flash based graph drawing
Graph JavaScript framework, version 0.0.1
Basic graph layout
Graphviz
Sophisticated graph visualization language
JavaScript Canvas Hyperbolic Tree
Small and flexible script
JavaScript InfoVis Toolkit
Jit, an interactive, multi-purpose graph drawing and layout framework
JS Graph It
Promising project using HTML5
jsPlumb
jQuery plug-in for creating interactive connected graphs
jssvggraph
Lightweight yet nice graph layouter
Moo Wheel
Interactive JS representation for connections and relations
NodeBox
Python Graph Visualization
Protovis
Graphical Toolkit for Visualization (JavaScript)
JsVIS is pretty nice, but a little slow with larger graphs. If yours is small it should work well. My favorite is prefuse which apparently now has a Flex front-end now called flare which could be controlled with JavaScript.
ReplyDeleteHave a look at D3.js. Is a small, free JavaScript library for manipulating documents based on data.
ReplyDeleteD3 allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document. As a trivial example, you can use D3 to generate a basic HTML table from an array of numbers. Or, use the same data to create an interactive SVG bar chart with smooth transitions and interaction.
Maybe try JavaScript Information Visualization Toolkit (JIT)
ReplyDeleteor canviz
But actually, I am interested in that too. Does noone know something better?
Protoviz is the answer to your problems
ReplyDeletehttp://vis.stanford.edu/protovis/
I think Flare is definitely worth checking out. It supports both "graphs as charts" and "graphs as nodes".
ReplyDeleteHave a look at the Layouts->Force demo, which has a tree of nodes that can be dragged about: http://flare.prefuse.org/demo
Have you tried Raphael.js?
ReplyDeleteIt seems to do what you need:
http://raphaeljs.com
Here's a 'draggable' graph:
http://raphaeljs.com/graffle.html
If your concern is specifically with layout, then you need to do some more research.
Check out the awesome arbor.js, built on top of JQuery.
ReplyDeleteYou can try Cytoscape Web:
ReplyDeletehttp://cytoscapeweb.cytoscape.org/
This application supports subset of Cytoscape functions (Java application).
Data roundtrip between web app and desktop version is easier than other platforms.
Since you mention jQuery: flot is a jQuery plugin that generates graphs with pure JS. I haven't used it myself but it looks pretty neat at first sight.
ReplyDeleteDisclaimer: I'm a developer of Cytoscape Web
ReplyDeleteRecently, prerelease builds of Cytoscape Web 2 have been made available. Cytoscape Web 2 is a HTML5 graph visualisation library. The API is sophisticated and follows jQuery conventions, including
selectors for querying and filtering (cy.elements("node[weight >= 50].someClass") does much as you would expect),
chaining (e.g. cy.nodes().unselect().trigger("mycustomevent")),
jQuery-like functions for binding to events,
elements as collections (like jQuery has collections of HTMLDomElements),
extensibility (can add custom layouts, UI, core & collection functions, and so on),
and more.
If you're thinking about building a serious webapp with graphs, you should at least consider Cytoscape Web 2. It's free and open-source:
https://github.com/cytoscape/cytoscapeweb
It's commercial, but have you seen mxGraph?
ReplyDeleteJSDot - lightweight pure JavaScript graph visualization/editor/embeddable widget based on SVG
ReplyDeleteI like jsplumb the most
ReplyDeleteMaybe you can use http://ejohn.org/blog/processingjs/ a port to javascript of Processing Java library.( http://processing.org/ )
ReplyDeleteNot purely javascript, but have you considered flare? http://flare.prefuse.org
In addition to graphML : http://graphml.graphdrawing.org/ you can read the graph nodes, structure and orientation from the xml file and then display it using flare (flash).
Check this forum for some examples: http://goosebumps4all.net/34all/bb/forumdisplay.php?fid=28
I made beautiful work with js-graph-it : it also allows dragging.
ReplyDelete.
ReplyDeleteTry PlotKit, which is built on top of the excellent MochiKit JavaScript toolkit (it would be compatible with jQuery, though you might want to drop jQuery after you see how beautiful MochiKit is!).
Javascript for displaying graphs (nodes + edges):
ReplyDeletehttp://snipplr.com/view/1950/graph-javascript-framework-version-001/
ProtoVis has some pretty nice features: http://vis.stanford.edu/protovis/
ReplyDeleteThere is an example of a Force-Directed Graph listed in the examples page.
Google has its Visualization API for use in JavaScript, which may of some use to you.
ReplyDeletehttp://code.google.com/apis/visualization/
If you are on the server side, look at the Bell Labs graph visualization toolkit. It's free and can dynamically generate what you want. Perhaps you can REST-like send your data from the browser to the server for rendering?
ReplyDeletehttp://www.graphviz.org
As guruz mentioned, the JIT has several lovely graph/tree layouts, including quite appealing RGraph and HyperTree visualizations. I'd post a link, but as a n00b I'm restricted to one link per answer.
ReplyDeleteAlso, I've just put up a super simple SVG-based implementation at github (no dependencies, ~125 LOC) that should work well enough for small graphs displayed in modern browsers.
I haven't used it myself, but dygraphs also looks promising.
ReplyDeleteSince noone else posted it yet, I want to suggest jqPlot to make this nice overview more complete. It's Open Source and produces stylish looking graphs. I like the interactive zoom. ;)
ReplyDeleteIf commercial libraries are OK for you, KeyLines does this on all browsers (disclaimer: I'm an author of it).
ReplyDeleteIf it must be open source then D3.js is the best of these IMHO.
You may like sigma.js: http://sigmajs.org/
ReplyDeleteIt is a lightweight, open source javascript library for display large graphs efficiently on the Web.