What's a good example of a (web) user interface for a graph structure (in the CS sense of graph, nodes, edges)?

Question

Like, let's say I had a tree structure, then I would use, naturally a tree control, since that GUI element maps perfectly to the structure.

But what I have is a graph, potentially too wide to fit in one web page. I can't think of examples of GUIs that really match the structure. Some ideas I have that don't quite fit are, the web itself, with hyperlinks, the browser back button, and the forward button. But that just shows you one node at a time. I would like to display as many nodes as I can, and allow navigation to a new area of the graph. Something like Google maps might be a good model, in that you have full freedom to scroll in any direction.

Answer 1

Facebook used to do this, way back in the day, to visualize your friends. They drew nodes as little boxes, with lines connecting them, as expected. They drew the graphs into an SVG image, so you could easily zoom in and out.

Another option might be to draw into a <canvas> tag and scale that somehow. I imagine that's possible, but I don't know much about <canvas>

Another option would be to draw it into an inline frame or other box that allows the user to scroll horizontally and vertically.

Answer 2

Basically the best thing I've seen for this sort of thing would be either Flash or Java that let you drag the nodes around, and it would auto stretch, move, expand based on tension values on the edges.

Brief googlage exposes this. I tried the Java application version, seems to work on a basic level, but perhaps overkill for your needs. :) Check out the AJAX version, maybe?

Perhaps check out ways to drag with jQuery.

Answer 3

You could try prefuse. It is an open source interactive data visualization toolkit. It has a very nice collection of layouts that can be used for displaying node graphs along with other visualization effects. The toolkit comes in two different flavours, one in Java and another in Actionscript, which can be used in Flash/Flex.

Answer 4

GraphViz is the best I've seen. Works on the desktop and on the web, with many examples of both here.

Answer 5

For a nice dynamic example of a huge graph displayed by small regions, you can take a look at: Visuwords. They present themselves as a graphical dictionary which shows multiple links between words.

Answer 6

I don't think there is an existing widget which will fit your need like a tree control would for a tree strcuture.

that said I definitely recommand one of the yWorks products.

Get a feel for what it can do, by trying out yEd, then check the documentation which seems very good. they also propose an ajax and flex fronted for their library, which will give you a web compatible representation, including google maps like drag and dropping see graph viewer demo: http://live.yworks.com/yfiles-ajax/Examples/Graph_Viewer.html ) I don't work for them, I am not even a paying customer, but I was very impressed by yEd.