Graph visualization code in javascript?

Answer 1

Google has its Visualization API for use in JavaScript, which may of some use to you.

http://code.google.com/apis/visualization/

Answer 2

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?

http://www.graphviz.org

Answer 3

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.

Answer 4

.

Try 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!).

Answer 5

I think Flare is definitely worth checking out. It supports both "graphs as charts" and "graphs as nodes".

Have a look at the Layouts->Force demo, which has a tree of nodes that can be dragged about: http://flare.prefuse.org/demo

Answer 6

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.

Answer 7

Maybe you can use http://ejohn.org/blog/processingjs/ a port to javascript of Processing Java library.( http://processing.org/ )

Not 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

Answer 8

Maybe try JavaScript Information Visualization Toolkit (JIT) or canviz

But actually, I am interested in that too. Does noone know something better?

Answer 9

Javascript for displaying graphs (nodes + edges):

http://snipplr.com/view/1950/graph-javascript-framework-version-001/

Answer 10

Have you tried Raphael.js?

It 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.

Answer 11

I've just put together what you may be looking for: http://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!

Answer 12

It's commercial, but have you seen mxGraph?

Answer 13

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.

Also, 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.

Answer 14

ProtoVis has some pretty nice features: http://vis.stanford.edu/protovis/

There is an example of a Force-Directed Graph listed in the examples page.

Answer 15

I haven't used it myself, but dygraphs also looks promising.

Answer 16

Protoviz is the answer to your problems http://vis.stanford.edu/protovis/

Answer 17

Since 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. ;)