How can I display colorful directed graphs on the web?

April 17, 2008 9:52 AM

How do I take a graph that looks like this and display it in a web friendly format? Oh, and there's 300,000 of them.

The graph linked is a screenshot of a postscript file generated by the "dot" portion of Graphviz. Essentially, I have a bunch of flat text files describing directed graphs (i.e. which nodes are linked to which and what color the links/nodes should be). I need to display these directed graphs on the internet. The nodes on the graph need to be clickable, as well.

Ideally, the processing to turn the text file into the graph would also be done on the client side, but this isn't necessary. The graphs don't need to be capable of being manipulated, but that would be cool as well. The best idea I've got so far is to use Flash/ActionScript and do something similar to this, but I've never actually used flash so I have no idea if it will scale well or can even actually do what I want it to.

posted by christonabike to computers & internet (6 answers total)

If you're happy with the output of Graphviz, you can use dot to generate client-side image maps when you generate the images, and make the nodes clickable with image maps on each graph's page.

I understand you can also use dot to generate SVG with embedded URLs directly (with [URL="/foo/bar/"] in the dot file), although I haven't tried it myself. SVG isn't nearly as compatible, but it is more modern and arguably "web-friendlier", in some sense of the term.
posted by pocams at 9:59 AM on April 17, 2008

fun little project.

Doable in a weekend. I don't see any scalability problems as long as the 300,000 pages remain on the server.

never used flash but I too suspect that would be the best bet.

I've seen this type of stuff done in Java and DHTML (with the CANVAS element), but flash is a LOT web-friendlier than those.

You could also investigate Microsoft's Silverlight. Not Linux-friendly, but otherwise an interesting environment.
posted by tachikaze at 9:59 AM on April 17, 2008

I didn't realize that Graphviz had the capability of producing image maps, which is pretty neat. Still, making image maps doesn't give much feedback to the user that the nodes are clickable. Also, the result definitely needs to be Linux/Unix friendly.
posted by christonabike at 10:15 AM on April 17, 2008

SVG would be perfect — dot supports it and making the nodes clickable is going to be very simple — SVG has an a element for linking, or you can add an onclick handler with Javascript if you want them to do something fancier than acting as links. Unfortunately, IE users will need the Adobe plugin (Firefox, Safari, and Opera support SVG natively). SVG rendering is not as fast as one would like in Firefox 2 (better in the FF 3 nightlies) but is probably comparable to the time it takes for the Flash player to load.
posted by enn at 10:24 AM on April 17, 2008

If you want to use dot try the dot -Tcmapx output format for dot. This should give you a client side map that will look like:

< map id="map" name="global" >
<area shape="poly" onclick="" coords="546,107,546,107,546,107,546,106,546,106,546,106,546,106,546,106,546,107,546,107,546,107,546,107,546,107,546,107"
href="graphImage/graph23432234.html" />>
etc.

Then you will have to generate the graphImage/graphXXX.html with an image tag like:
<img src="graphImag/graph9993.png" ismap="ismap" usemap="#global" >
and the output of dot -Tcmapx. You could do this with a python/perl script.

If you use the client side map, the web browser pointer will change to indicate a clickable area when the user hovers it over a clickable polygon in the image. I don't think this is the case with server side image maps.

Client side image maps can also have an onclick attribute on their area elements to call javascript when a user clicks. Map is sort of 1998 in these days of flash/svg/2.0 but it can be fun. I like to use sql queries to generate dot files with image maps and then use them as a primitive UI. I will have to look into the SVG output format since it seems like you could skip making the HTML page.
posted by bdc34 at 10:47 AM on April 17, 2008

All of these answers have been awesome so far. I didn't realize dot had so many features.
posted by christonabike at 10:52 AM on April 17, 2008