Welcome back to my four part series on Dot. In this installment, I go deeper on some of the options available regarding layout of Dot graphs.

Part 2: More Dot layout

I’m not sure that I can add value beyond what’s already available in the documentation - its simple, clear and concise. What I will do, however, is call out the things that I found most useful:

Colours, fonts and shapes (oh my?)

You have full control over the following layout attributes:

• Colour (of text, outline and background)
• Font face
• Font size
• Node shape
• Edge head & tail shapes

You could imagine modifying the sql that I demonstrated in part 1 to also select out some colour / formatting attributes into the nodes and edges. Another options is to generate your Dot code in an application layer – since ruby, C# or java are more expressive with SQL it’s a bit easier to generate some really interesting graphs.

HyperDot: URLs and Tooltips

Did you know that Dot can generate more than just image files? The Dot syntax supports adding tooltips and URLs into nodes, edges, and even arrowheads. However, there’s no way for this kind of information to be embedded into a gif, png or jpeg. Currently, the output formats that will let you see these are:

• SVG, which is natively supported by all browsers except for the most important one, is a web-aware xml based vector format (that is soon to be superseded by XAML). In firefox, for example, you could be viewing a graph that will hyperlink you to the appropriate web page when you click on an item on the graph. 
• HTML ImageMaps are elements that you can use to tack urls and tooltips onto specific areas of an image in a webpage. If you run Dot twice against the same piece of Dot code (but with different output formats), you can create the imagemap code that corresponds perfectly to the pixels drawn on the image. In Part 4, I will be talking further about how to achieve this in an ASP.Net web server. This functionality replicates what SVG provides you (without the pretty vector scaling, but with superb browser compatibility).  

Personally, I am hoping that someone will champion the Silverlight cause and write a native XAML output format for Dot . I have experimented with a couple of SVG to XAML converters, both XSLT files, but neither of them get the layout just right.

Next in this series: how to call into Dot from a .Net web server to dynamically generate server side images.