Signal definitions may use the following properties.
| Signal Name | Type | Description |
|---|---|---|
| mark-key | string | Custom signal added from uifactoryConfig, specifies the
key/column name which should be
used as key of nodes in the packed circle's treemap data
transformation. Default value is
id field. |
| mark-parent | string | Custom signal added from uifactoryConfig, specifies the
key/column name which should be
used to specify parent of nodes in the packed circle's treemap
data transformation. Default
value is parent field. |
| mark-field | string | Custom signal added from uifactoryConfig, specifies the
key/column name which should be
used to sort nodes in the packed circle's treemap data transformation.
Default sorting field is
size. |
| mark-tooltip | string/object | Custom signal added from uifactoryConfig, specifies the data to
be displayed on the
tooltip on hover. It can take a static string i.e Name. It can
take object also which will
use the data from each node i.e {'Name': datum.name, 'Depth':
datum.depth}. Here
datum.name specifies name of from the data. |
| data | urljson | Specifies the path of data file containing the data in json format for rendering the packed circle. |
| _scaleX | Internal Signal | This calculates the scaling for nodes when zoomed to increase the size of the node in x-axis. |
| _scaleY | Internal Signal | This calculates the scaling for nodes when zoomed to increase the size of the node in y-axis. |
| _xTranslation | Internal Signal | This is used to translate/move the nodes along x-axis to the center of the chart when zooming. |
| _yTranslation | Internal Signal | This is used to translate/move the nodes along y-axis to the center of the chart when zooming. |
| mark-shape | string | Custom vega signal, to change the shape of the nodes. It can take
pre-defined shapes from vega i.e
circle, diamond, square, cross, arrow-up, arrow-down, triangle-up and
triangle-down.
Default value in spec file is null, so vega assumes it to be
circle by
default. |
| mark-parent-label-opacity | number | Custom vega signal, used to change the opacity for labels of those nodes which contains children. Opacity from 0 (transparent) to 1 (opaque). |
| mark-parent-label-fill | string | Custom vega signal, used to change the color for labels of those nodes which contains children. |
| mark-child-label-opacity | number | Custom vega signal, used to change the opacity for labels of all child nodes (nodes which don't have any children). Opacity from 0 (transparent) to 1 (opaque). |
| mark-child-labelF-fill | string | Custom vega signal, used to change the color for labels of all child nodes (nodes which don't have any children). |
| mark-stroke | string | Custom vega signal, used to change the color of the outline/border of all the nodes. |
| mark-stroke-width | number | Custom vega signal, used to change the width of the outline/border of all the nodes. |
| mark-align | string | Custom vega signal, used to horizontally align labels in the chart. This
property moves the reference
point of the text in the nodes to the specified value i.e right, left
and center. Due to
this it gives and illusion that text is actually moving to opposite
direction of the specified value.
Hence to move text to right we need to specify this properties
value as left.
|
| mark-baseline | string | Custom vega signal, used to vertically align labels in the chart. This
property moves the reference
point of the text in the nodes to the specified value i.e top, bottom
and middle. Due to
this it gives and illusion that text is actually moving to opposite
direction of the specified value.
Hence to move text to bottom we need to specify this properties
value as top.
|
| mark-padding | number | Custom vega signal, to add padding in between the nodes of the chart. |
| mark-hover-stroke | string | Custom vega signal, to change the outline/border color on hover over any node in the chart. |
| mark-hover-stroke-width | number | Custom vega signal, to change the width of outline/border on hover of any node in chart. |
| mark-text | string | Custom vega signal, to change labels to be displayed on the nodes. It takes any key/column name from data and generated labels for nodes based on that key/column value. |
| mark-color-scheme | string | Custom vega signal, to change the color scheme used to populate colors in various levels of the chart. It takes the name of the color scheme which should be used. It can have either vega pre-defined color schemes or color scheme defined in charts.js file. |
| mark-colors | array | Custom vega signal, to specify colors array which should be used to populate
the colors at various
levels of chart. It should be used in combination with markType
signal. |
| mark-type | string | Custom signal added from uifactoryConfig. Its used to change
the type of the color range.
When color scheme is used then it has default value as ordinal.
When colors array is passed
for the chart then its value need to be changed to linear. |
copied
copied
copied
copied
copied
Good to visualize categorical data such as market share of the various geographies within a country grouped by drug type or brand