Visualize a clickable graph in an HTML page

Question

I have defined a data structure using pygraph. I can display that data easily as PNG using graphviz.

I would like to display the data graphically, but making each node in the graph clickable. Each node must be linked to a different web page. How would I approach this?

What I would like is:

1. Assign an href for each node
2. Display all the graph as image
3. Make each node in the image clickable
4. Tooltips for hover event: whenever the cursor is positioned on top of an edge / node, a tooltip should be displayed

Answer 1

I believe graphviz can already output an image as a map for use in html.

Check this doc or this one for how to tell graphviz to output a coordinate map to use. It will even append the url you specify, and there even is a version that only uses rectangles for mapping links

Edit:

You can also check this document by LanyeThomas which outlines the basic steps:

Create a GraphViz dot file with the required linking information, maybe with a script.

Run GraphViz once to generate an image of the graph.

Run GraphViz again to generate an html image-map of the graph.

Create an index.html (or wiki page) with an IMG tag of the graph, followed by the image-map's html.

Direct the image-map urls to a Wiki page with each node's name - generate the Wiki pages automatically if needed.

Optionally, link directly to the class hierarchy image generated by DoxyGen. Have the Wiki page link to any additional documentation, including DoxyGen docs, images, etc.

Answer 2

You can use pygraphviz and cmapx

import pygraphviz
my_graph = pygraphviz.AGraph(id="my_graph", name="my_graph")
my_graph.add_node("node", 
                  label="my_node",
                  tooltip="tooltip text \r next line",  # use \r for new line
                  URL="http://ya.ru/",
                  target="_blank")
my_graph.layout(prog='dot')
my_graph.draw(path="my_graph.map", format="cmapx")  
my_graph.draw(path="my_graph.svg", format="svg")

then use content of my_graph.map in html

<IMG SRC="my_graph.svg" USEMAP="#my_graph" />
... [content of my_graph.map] ...

Answer 3

You could use click maps:

 <img src="graph.png" width="400" height="300" usemap="#mygraphmap">

<map name="mygraphmap">
  <area shape="circle" coords="100,100,30" href="f8a08.htm">
  <area shape="circle" coords="200,100,30" href="1d0f.htm">
</map>

You'd obviously have to find out the coordinates somehow.

edit: You can also use rect or polygon for the shape attribute. I think you can also add a mouseover or title attribute to the area elements.

more edit: Or you could make graphviz output svg which can be integrated in the html5 DOM. I mean that you might be able to handle the elements inside a graph as a DOM-object.

Answer 4

Most of the suggested solutions involve an Image map format, but that's tricky. Not only that, you won't be able to edit the clickable SVG file in e.g. Inkscape afterwards to customize your drawing.

The SVG files that graphviz generates already have clickable links if you provide URLs. If you're having trouble with them, then perhaps you need to use an <object> tag rather than an <img> tag:

<object width="100%" data="./example.gv.svg" type="image/svg+xml"></object>

See also Insert clickable SVG image into Sphinx documentation.

Answer 5

If you are looking for a graphviz alternative, may be you could use jsPlumb Library. See some samples here

Also checkout JavaScript InfoVis Toolkit