[previous] [next] WebDot Tutorial: GraphQuest - pan & zoom & client-side maps

Webdot can convert the graph into the contents of an <iframe> with a graph image, pan & zoom controls, and client-side mapping of the graph objects.

For example, graphquest.dot contains: 
graph G {
        node [URL="\N.html" target="new" label="" tooltip="Node \N" width=0.3 height=0.3 style=filled fillcolor=lightblue pencolor=black]
        a -- b -- c -- d -- e; f -- g -- c -- h -- i; j -- k -- c;
}
and the source of this page contains (for the graph above): 
<iframe
  name="gq"
  src="/cgi-bin/webdot/webdot/graphquest.dot.neato.gq.240,240"
  width="380"
  height="360"
  frameborder="0"
  scrolling="no"
></iframe>

The advantages of this mode of WebDot are simple authoring and the responsiveness of client-side mapping. Notice that the URL that would be reached by clicking on a node is flashed into the status bar at the bottom of the browser.

One disadvantage is that there is no guarantee that a graph will fit the frame at the initial zoom setting, possibly requiring the user to zoom to see the whole graph.

The size of the image does not depend on the contents of the graph, but is fixed by the viewport dimensions specified in the URL, 320x320 in this example (320 = 240 * 96/72). This eases page design. The width and height of the <iframe> needs to be 60 wider and 40 higher than the graph image to allow for the pan&zoom controls.

The <iframe> must be named "gq" for the pan&zoom updates to be correctly targeted.