|
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 for 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”). |