How to create custom symbols
Abstract
A custom symbol is a way of describing a glyph. It does not depend on data, but
consists of one or various parts that can be targeted by aesthetics. In this document we will look at the creation of custom symbols.
2 Confidential – IBM Corporation
Revision History
Date mm/dd/yy 05/29/13 04/12/13 04/02/2014 Modified by Varun Mishra Greg Adams Francisco Gómez S. Additions/Changes Updated for Rave 1.5.0 Updated initial version with template. Updated snippet code for “simple face”
3 Confidential – IBM Corporation
Table of Contents
How to create custom symbols.................................................................................... 1 Abstract .......................................................................................................................... 2 Revision History ............................................................................................................ 3 Table of Contents .......................................................................................................... 4 How to create Custom Symbols? ................................................................................ 5
4 Confidential – IBM Corporation
How to create Custom Symbols?
A custom symbol is a way of describing a glyph. It does not depend on data, but consists of one or various parts that can be targeted by aesthetics. A custom symbol could be a simple shape as a circle, a rectangle, a star, etc. defined as a string or could contains multiple shapes described as an array of entities, each of which can have its own style to represent it, in this case all this shapes together as a schema will represent the custom symbol.
Custom symbols could be defined in two places in the grammar definition of the visJSON: 1) in elements > style 2) in legends > itemStyle. Both cases under the symbol attribute. The first case defines how the symbol will be drawn on the graph area where the second one describes how the symbol will be drawn on the legends area. If symbols in legends are omitted but they are present in
element definition, these will be drawn on legends area in the same way that they were defined in element definition.
Custom symbols definition also recognize an attribute
scaleDimensions, this could be set at different levels (for the whole symbol or just one or more parts of it), that allows scaling or not the entire symbol or a part of it. This attribute could be very useful to treat these symbols as annotation icons on the graph. Using this feature, and setting its value to “none” at every level, the user can define icons in every part of the resulting graph and those will not be resized even when a size aesthetic is present in it.
Let‟s go with some examples of custom symbols definition:
NOTE: Do not take care about colors and styles in the following examples, just the shapes.
As simple symbol as a circle:
5 Confidential – IBM Corporation
VizJSON Snippet … \"grammar\":[{ \"elements\":[{ \"style\":{ } }] }] … Output \"symbol\":{ \"shape\":[{ \"type\":\"circle\" }] } Here we created a custom symbol containing single shape of “type” circle. Other supported types are square, rect, triangle, polygon, star etc.
Each of the shape can define their bound which is calculated with reference to its parent‟s bounds. We can also define bounds for full custom shape. VizJSON Snippet \"style\": { \"symbol\": { \"bounds\": {\"width\": \"50\ \"shape\": [{ \"type\": \"circle\ \"bounds\": {\"width\": \"50%\ }] } } Output In above example, we define a custom shape of size 50px, and inside that a circle is created with 25 px size (50%).
Rave also supports embedding one shape inside other. For example, below snippets shows how one can create a circle inside a rectangle shape: VizJSON Snippet Output \"style\": { \"symbol\": { \"shape\": [ { \"type\": \"rect\ \"shape\": [ { \"type\": \"circle\
6 Confidential – IBM Corporation
\"bounds\": { \"width\": \"30%\ \"left\": \"10%\ \"top\": \"10%\" }, \"part\": \"innerCircle\ \"style\": {\"stroke\": {\"width\": 2},\"outline\":\"red\ } ], \"bounds\": { \"width\": \"70%\ \"height\": \"70%\" } } ], \"bounds\": {\"width\": \"50\ } }
Notice that in above snippet, we added a “part” attribute which
provides name for the sub-shape (circle in this case). This attribute allows the sub shape to be separately targeted by an aesthetic. We also added a “style” attribute to selectively provide a red outline to the circle which has a 2 px stroke.
A custom shape can also be created using “path” attribute. For example below snippet uses path attribute to create a smiley face.
Notice that there are four shapes – two circle of eyes and two paths for noce and mouth: VizJSON Snippet Output … \"style\": { \"width\": 30, \"height\": 30, \"outline\": \"black\ \"symbol\": { \"shape\": [{ }, { \"type\": \"circle\\"bounds\": { \"width\": \"30.0%\ \"height\": \"30.0%\ \"left\": \"55.0%\ \"top\": \"5.0%\" }, \"scaleDimensions\": \"none\" \"type\": \"circle\\"bounds\": { \"width\": \"30.0%\ \"height\": \"30.0%\ \"left\": \"15.0%\
7 Confidential – IBM Corporation
\"top\": \"5.0%\" }, \"scaleDimensions\": \"none\" }, { \"type\": \"path\ \"path\": \"M0.5,0.4L0.4,0.6L0.6,0.6\" }, { \"type\": \"path\ \"path\": \"M0.1,0.5C0.3,0.95,0.7,0.95,0.9,0.5\" }], \"scaleDimensions\": \"both\" } } …..
You might have also noticed that we used „scaleDimensions‟ attribute in above snippet. This attribute lays out a policy to use for scaling the custom shape. It defines how we want our custom shape to scale up/down. Possible values are „none‟ (no scaling), „x‟ (scale only in X dimension), „y‟ (scale only in Y dimension) and „both‟ (scale on both X and Y dimensions).
For more details about „scaleDimensions‟ and other attributes of custom shape, refer Rave Documentation at VizJSON Reference Guide.
Above concepts of custom shape can also be applied to Legend Swatch shapes. In case of legend, we provide custom shape properties inside „itemStyle‟ attribute.
Following is a VizJSON spec that creates point chart having element shapes as smiley. The spec also have slightly modified legend swatch were we have replaced a circle of eye with a triangle. VizJSON Snippet
8 Confidential – IBM Corporation
{ \"data\": [ { \"id\": \"data\ \"fields\": [ {\"id\": \"fX\ {\"id\": \"fY\ { \"id\": \"facet1\ \"label\": \"Three Colors\ \"categories\": [ \"a\ }, { \"id\": \"facet2\ \"label\": \"Two Sizes\ \"categories\": [ \"category A\ \"key\": true } ], \"rows\": [ [ 22, 339, 0, 0 ], [ 1999, 290, 0, 0 ], [ 1980, 95, 0, 0 ], [ 985, 159, 0, 1 ], [ 2000, 223, 0, 1 ], [ 200, 299, 1, 1 ], [ 500, 254, 1, 1 ], [ 299, 277, 2, 0 ], [ 2000, 412, 2, 0 ], [ 39, 268, 2, 0 ], [ 399, 297, 2, 0 ], [ 799, 386, 1, 0 ], [ 1599, 297, 1, 1 ], [ 1997, 188, 2, 1 ], [ 209, 269, 2, 1 ], [ 149, 265, 2, 1 ] ] } ], \"copyright\": \"(C) Copyright IBM Corp. 2011\ \"grammar\": [ { \"coordinates\": { \"dimensions\": [ { \"axis\": { \"tickStyle\": { \"font\": { \"family\": \"Verdana,SanSerif\ \"size\": 9 } } } }, { \"axis\": { \"tickStyle\": { \"font\": { \"family\": \"Verdana,SanSerif\
9 Confidential – IBM Corporation
\"size\": 9 } } } } ], \"style\": { \"fill\": \"white\ \"outline\": {\"a\": 1.0, \"b\": 0, \"g\": 0, \"r\": 0} } }, \"elements\": [ { \"type\": \"point\ \"position\": [ {\"field\": {\"$ref\": \"fY\ {\"field\": {\"$ref\": \"fX\ ], \"color\": [ {\"id\": \"colorId\ ], \"size\": [ { \"id\": \"sizeId\ \"field\": {\"$ref\": \"facet2\ \"mapping\": [ {\"at\": 0, \"size\": \"75%\ {\"at\": 1, \"size\": \"120%\ ] } ], \"style\": { \"width\": 30, \"height\": 30, \"outline\": \"black\ \"symbol\": { \"shape\": [ { \"type\": \"circle\ \"bounds\": { \"width\": \"30.0%\ \"height\": \"30.0%\ \"left\": \"15.0%\ \"top\": \"5.0%\" }, \"scaleDimensions\": \"none\" }, { \"type\": \"circle\ \"bounds\": { \"width\": \"30.0%\ \"height\": \"30.0%\ \"left\": \"55.0%\ \"top\": \"5.0%\" }, \"scaleDimensions\": \"none\" }, { \"type\": \"path\
10 Confidential – IBM Corporation
\"path\": \"M0.5,0.4L0.4,0.6L0.6,0.6\" }, { \"type\": \"path\ \"path\": \"M0.1,0.5C0.3,0.95,0.7,0.95,0.9,0.5\" } ], \"scaleDimensions\": \"both\" } } } ], \"labelCollisionMethod\": \"none\ \"style\": {\"fill\": {\"a\": 0}, \"padding\": 10} } ], \"legends\": [ { \"aesthetics\": [ {\"aesthetic\": {\"$ref\": \"colorId\ \"itemBoxStyle\": { \"fill\": \"white\ \"stroke\": {\"width\": \"3px\ \"width\": 30, \"height\": 35, \"outline\": {\"b\": 175, \"g\": 175, \"r\": 175} }, \"itemStyle\": { \"width\": 30, \"height\": 30, \"outline\": \"black\ \"padding\": {\"left\": 5, \"right\": 5, \"top\": 5}, \"symbol\": { \"shape\": [ { \"type\": \"circle\ \"bounds\": { \"width\": \"30.0%\ \"height\": \"30.0%\ \"left\": \"15.0%\ \"top\": \"5.0%\" }, \"scaleDimensions\": \"none\" }, { \"type\": \"triangle\ \"bounds\": { \"width\": \"30.0%\ \"height\": \"30.0%\ \"left\": \"55.0%\ \"top\": \"5.0%\" }, \"scaleDimensions\": \"none\" }, { \"type\": \"path\ \"path\": \"M0.5,0.4L0.4,0.6L0.6,0.6\" }, { \"type\": \"path\
11 Confidential – IBM Corporation
\"path\": \"M0.1,0.5C0.3,0.95,0.7,0.95,0.9,0.5\" } ], \"scaleDimensions\": \"both\" } }, \"title\": [ \"Color\" ] } ], \"version\": \"3.1\" }
12 Confidential – IBM Corporation
Finally the graphic generated looks like this:
There we can notice that the smiling faces in the graph present a different eye than the legend swatches, that is thanks the flexibility of custom symbols definition in RAVE.
13 Confidential – IBM Corporation
因篇幅问题不能全部显示，请点此查看更多更全内容