Altair® Panopticon

 

Creating Custom Shapes

SVG-files with path expressions describing custom shapes are easy to create for simple shapes.

 

   NOTE

The x-y coordinate system in the Panopticon Shapes visualization has positive x-values going right and positive y-values going DOWN, not up. An empty shape visualization has origo (0,0) at the top-left corner.

 

 

In the d-attribute of the path element, the following commands/instructions are supported by the Shapes visualization in Panopticon:

M,m: http://www.w3.org/TR/SVG/paths.html#PathDataMovetoCommands

Z,z: http://www.w3.org/TR/SVG/paths.html#PathDataClosePathCommand

L,l: http://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands

H,h: http://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands

V,v: http://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands

C,c: http://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands

S,s: http://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands

 

   NOTE

Upper case commands set the absolute points, while the lower case commands set the relative points.

 

 

The following code, saved in a text file with the file extension .svg, can be read with the SVG connector in Panopticon and will produce 2 columns: NodeKey1, which contains the id-values fof the g-tags, and ShapeData, which contains the d-value of the path-tags. The ShapeData column can then be applied to the Shapes variable of the Shapes visualization part.

<svg>

<g id="Square Example">

<path d="M 1,1 h 9 v 9 h -9 v -9 z" />

</g>

<g id="Triangle Example">

<path d="M 11,10 h 10 l -5,-10 l -5,10 z" />

</g>

<g id="Circle Example">

<path d="M 0.5,17 c0.5,6.667 9.5,6.667 10,0 -0.5,-6.667 -9.5,-6.667 -10,0 z" />

</g>

<g id="Hexagon Example">

<path d="M 20.5,14.5 l -4.33,-2.5 -4.33,2.5 0,5 4.33,2.5 4.33,-2.5 0,-5 z" />

</g>

</svg>

The same data can be provided in a tabular form, loaded with the Text connector or from a database. For example:

NodeKey1,ShapeData

Square Example,|M 1 1 h 9 v 9 h -9 v -9 z

Triangle Example,|M 11 10 h 10 l -5 -10 l -5 10 z

Circle Example,|M 0.5 17 c 0.5 6.667 9.5 6.667 10 0 c -0.5 -6.667 -9.5 -6.667 -10 0 z

Hexagon Example,|M 20.5 14.5 l -4.33 -2.5 l -4.33 2.5 l 0 5 l 4.33 2.5 l 4.33 -2.5 l 0 -5 z

Likewise, this data can be used with the Shapes variable of the Shapes visualization part.

   NOTE

When shape paths are loaded from a tabular data, each path must begin with a vertical bar character (“pipe”).