Interactive Graphviz graphs in a web application

Question

I am trying to make a few interactive graph visualisations in my Django web application using Python. I found Graphviz and was able to output a static graph (as a .png image) on my application using Pydot (Python interface to Graphviz's dot language).

However, I am looking to make my graphs more interactive, like being able to highlight nodes when passing my mouse over it, making the nodes click-able, dragging the nodes to a different location and zooming on the graph.

Is there a way I could do this in Graphviz? Or in general is there way to make an interactive graph for my Django application without having to use Flash? I don't want to use flash since I'm not that familiar with it and also since I want to visualise a fairly large dataset.

Antakiya

Answer 1

Try The Javascript Infovis Toolkit. It is all implemented in a browser canvas, so no Flash is needed, only a decent browser with support for the <canvas> tag. Graph visualization examples are here, here and here, other demos are here.

Ptolemaic

Hi Tamás, Javascript Infovis Toolkit does look pretty cool. Do you know if we can make custom shapes in it? Like for example, have a node as some image rather than the usual square/circle. I'll give it a look. Cheers :) – Antakiya

I think it is possible; see this page in the documentation: thejit.org/static/v20/Docs/files/Options/Options-Node-js.html . It says "you can also implement (non built-in) custom Node types into your visualizations." (see the "type" parameter) – Falgout

Thanks again. I'll give Javascript Infovis Toolkit a look – Antakiya

Answer 2

There is Canviz (source). However, nodes are not yet clickable (they were in an older version that used image maps. The code base has changed and now the rendering is happenning client side using javascript, which is why clickable links is not yet re enabled.

This is the best I found, however they are plenty of others.

mxGraph (Not free)

License

Thanks for the response Nicolas. I had a look at Canviz as well. I guess I'll have to wait before nodes become re-clickable again. I'll give mxGraph a look as well. – Antakiya

Answer 3

You can use D3.js for graph visualization (see here for examples of graph visualizations in D3js, and look at How to Make an Interactive Network Visualization).

For back-end (if it is necessary to have something more than just a json file to represent the graph - i.e. if it is large), then you can use a Python module for graphs, NetworkX.

Side note, here is my simple interactive graph visualization example:

Furunculosis

Answer 4

You can do something like this very simply just with DOT and HTML.

Generate client-side maps and overlay them over your PNG images. (Insert the map code into the HTML page.)

dot test.dot -Tpng -o test.png -Tcmapx -o test.map

SVG exports are directly clickable.

Eldenelder

Answer 5

It seems like an approach that fits what you are trying to do might be to use svg in the browser an/or javascript. I think most of the modern browsers support SVG and would allow you to do some pretty cool interactive graphs. The server could provide a json feed of the datapoints needed to render the graph. I don't know off hand the tools that are available, but I've seen some pretty cool graph demos constructed without flash through client-side approaches.

As an alternative, you could pre-render a bunch of graph images that the user would likely view and then just fetch those as the user interacts with the graph. This might work if the graphs don't change that frequently and if the number of alterations that the user would make is small, but you'd have to re-render every time the graph changes.

Participle

Hey Joe, I'll see what I can do with SVG. I think Graphviz does allow you to make them. Not sure if re-rendering would be the best option for me though (because of the same reasons you gave). Cheers for the response! – Antakiya

Answer 6

I've did what you are trying to do not too long ago. The context was visualizing a gnarly SalesForce schema.

First thing, graphviz is only good for plotting, not really for drawing. You can generate SVG, but I could not get it to work with I.E. after a considerable of (what turned out to be fruitless) effort.

I DID find this Java Applet ZGRViewer to suffice, and while applets feel a bit dated for my taste, it worked very well cross browser.

I basically hand coded a process invoking service that generated the dot files and ran them thought (dotty, is think?) - the visulazation applet reads the native dot file format.

I also came accross something that I thought about for a V2 (which never happened) - it is part of the AJAX control toolkit - Seadragon.

If you want to see the code in ASP.NET, I can post it.

Buell

Hey Gabriel, thanks for the quick response. ZGRViewer does look pretty useful. I'll give that a try. Also I saw a few graphs made using Seadragon and I'm not sure if there is any interactivity in the graphs created using Seadragon other than zooming and maybe adding a search button. Having said that it would be interesting to see the code and to see how you implemented it :) (p.s. tried to vote you up but it requires a +15 reputation and mine is 6 at the moment!) – Antakiya