The {pnk}f(eli)x Blog

The informal ramblings of an ex-pat PL enthusiast

Vis-a-vis, Part 2: Visualizing Graphs via snap.svg

Previously I discussed visualizing graphs (G = (V,E)) specified in DOT syntax (digraph { a -> b; }) via viz.js, which is graphviz compiled to Javascript.

However, I have decided that it is too difficult to convince graphviz to produce particular layouts. Therefore, I am going to try out other tools for working with SVG; in this post, I’m going to discuss a relative newcomer to the scene, snap.svg.

Control over layout is particularly important to me, especially when I am showing a series of graphs and want to ensure that the visual diff between each one is minimal.

Goal: render the graph a -> b -> c -> e -> a; b -> d -> e; in a nice way.

SVG Presentation attributes:

  • stroke : color of the stroke; color string (named, hexadecimal, RGB, HSL. see also w3).

  • stroke-width : width of stroke for shape/text ; percentage or length (with optional unit).

  • stroke-opacity : transparency of stroke; 1.0 (opaque) to 0.0 (invisible).

  • stroke-dasharray : spacing to use between line segments of stroke; list of user coordinate values (px).

  • stroke-linecap : shape at both end of line; “butt”, “round”, “square”

  • stroke-line-join : shape at corners of path/shape; “miter”, “round”, “bevel”

  • fill : color of shape or text; color string.

  • fill-opacity : transparency of fill; 1.0 (opaque) to 0.0 (invisible). Note that it can mix with a tranparent stroke.

  • fill-rule : portions of shape to be filed (e.g. when its path is self-intersecting); “nonzero”, “evenodd”

(TODO: Almost certainly remove all of this before publishing!)

Previously I discussed visualizing graphs (G = (V,E)) specified in DOT syntax (digraph { a -> b; }) via viz.js, which is graphviz compiled to Javascript.

However, this technique can be quite frustrating, since most of the graphviz layout engines provide very little control over placement of nodes and routing of edges. Usually if one wants to constrain the placement of any one or more nodes, one is forced to specify the location of all nodes – and even then, the edge routing is nearly uncontrollable.

Therefore, I want to explore using SVG (scalable vector graphics) more directly, but still using some Javascript library to ease encoding the <svg> elements.

Installing JS for snap.svg

Demos

Comments