HalfViz is a graph visualization environment with a not-coincidental similarity to AT&T’s Nevermind-era, C-language classic GraphViz.
It takes one of the central good ideas of GraphViz – the .dot
graph description language – and scales things back in the name of simplicity of implementation
and brevity of syntax. Remember, worse is better these days.
The result is the halftone language; a dot-inspired, mostly-declarative
format for describing graph relationships and styling the resulting nodes and edges.
In the editor to the right you can describe your graph symbolically. As you type, the visualization will update to reflect the nodes and connections you have defined.
Your code is read line-by-line and matched for patterns of the form:
name1 -> name2
The names can be single or multiple words and can include digits, punctuation, or
space characters. Avoid using curly braces {} since those characters are used in styling
the graph.
If you want to create a node without connecting it to any of the others, simply list it on a line by itself:
name3
The semicolon acts as a comment character; anything to the right of it on a line will be ignored.
;
; ostracism in achewood, ca
;
roast beef -> ray
ray -> téodor
téodor -> roast beef
pat ; pat is all alone
By default all nodes are displayed as grey boxes with the node name as the text label. You can change this for individual nodes by using this dictionary-like notation:
mynode {color:red, label:a simple red box}
The node’s color can be set to any value that is a valid CSS color. For
example, all the lines below are equivalent:
rednode1 {color:red}
rednode2 {color:#f00}
rednode3 {color:#ff0000}
Setting the color to the special value none will draw the node’s
label in black on a white background:
textnode {color:none, label:just some text}
The node’s displayed text label can be changed to any string that doesn’t
use the {} characters. It can also be set to nothing at all:
longwinded {label:a verbose name}
empty {label:} ; don’t label this node
Note that labels can be multiple words and don't need to be surrounded with quotation marks.
A node’s shape can be either dot or box (the
default). In both cases the size of the shape will be determined by the length of
the node’s label text.
small dot {shape:dot, label:}
very very large dot {shape:dot}
rounded rectangle {shape:box}
Edges can be either directed (and drawn with an arrow) or un-directed (and drawn with an unadorned line). This is controlled by the characters you enter for the edge:
a -> b ; drawn with an arrow
c -- d ; drawn with a line
As with nodes, edges can be styled by appending an options {} block to the
edge definition:
src -> dst {color:plum, weight:2}
If no style options are specified, the edge will be drawn in grey with a line weight of 1px.
The color property can be set to the same variety of formats demonstrated in
the Nodes section.
The weight property can be set to a number controlling the width of the line
in pixels.
If you wish to use the same formatting for a number of nodes or edges, you can save some typing by modifying the default style properties which apply to graph elements that aren’t explicitly styled.
The default node style can be set by entering an options block on a line by itself:
{color:goldenrod}
This will apply to any nodes defined on subsequent lines that do not set a color
for themselves.
The defaults can be changed multiple times. For example, to create two red nodes and two blue ones, try:
{color:red}
a ; will both be red
b ;
{color:blue}
c ; will both be blue
d ;
The default node styles will also apply to nodes created in edge definitions that are not explicitly styled elsewhere in the code.
Setting the default edge style is similar, but the options block must follow a lone arrow:
-> {color:cyan, weight:6}
Unstyled edges defined on subsequent lines will inherit the specified properties.