Layer
Wiki ▸ API Reference ▸ Chart ▸ Layer
A layer contains information about the type of graphic being produced, the data being used, as well as which data columns correspond to which visual features. Each layer object layer specifies exactly one layer. The object has a number of attributes, which fall into the following categories:
- layer type
layer.type - data
layer.data - aesthetic mapping
layer.* - sampling
layer.sample - position
layer.position - filtering
layer.filter
| Type | String |
| Required | Yes |
The type of the layer describes the geometrical objects that will represent your data. Supported types include:
-
point- circles or scatter plots -
line- line charts -
bar- bar charts -
area- area charts -
path- paths -
box- box and whisker plots -
text- text plots -
tile- tile plots
| Type | Polyjs Data Object |
| Required | Yes |
This is the Polychart.js data object that is used to created the charts. See the Data section of the API reference for more details. Note that different layers can have different data objects attached to it.
Aesthetics describe visual properties of an object on the screen that we can see. Color, size, shape, x- and y-position are all examples of aesthetics. In Polychart, an aesthetic can be set to a constant, or mapped to a data column. For example, to set the aesthetic color to red we write: layer.color = {'const': 'red'}. To map the aesthetic size to a data column called population we write layer.size = {'var': 'population'} or more succinctly layer.size = 'population'. For more information about aesthetic mappings, see Aesthetics.
Below are a list of available asethetics. Note that some aesthetics are specific to one or more chart types.
| Type | Aesthetic Mapping Object |
| Supported Layer Type | All layer types |
| Constant Mapping Type | Numeric |
The horizontal or x-position.
Note that some chart types (specically bar, box, tile) will require continuous x-values to be binned. Binning puts data into buckets, so that there would be one bar/box/column of tiles per bucket. More information about binning BLAH BLAH BLAH
| Type | Aesthetic Mapping Object |
| Supported Layer Type | All layer types |
| Constant Mapping Type | Numeric |
The vertical or y-position.
Note that the tile chart type will require continuous y-values to be binned. Binning puts data into buckets, so that there would be one row of tiles per bucket. More information about binning BLAH BLAH BLAH
| Type | Aesthetic Mapping Object |
| Supported Layer Type | All layer types |
| Constant Mapping Type | String (hexadecimal code or name of colour) |
The color of each geometrical object. (Note the spelling of the word 'color' -- Americans, you win this one!)
| Type | Aesthetic Mapping Object |
| Supported Layer Type | All layer types |
| Constant Mapping Type | Numeric |
The opacity of the colouring.
| Type | Aesthetic Mapping Object |
| Supported Layer Type | `point`, `line`, `path` and `text` |
| Constant Mapping Type | Numeric |
The size of each geometrical object (e.g. size of a circle in case of layer type point, and text size in case of text).
| Type | Aesthetic Mapping Object |
| Supported Layer Type | `text` |
| Constant Mapping Type | String |
Actual text to be displayed.
| Type | Aesthetic Mapping Object |
| Supported Layer Type | `point`, `bar`, `tile` |
| Constant Mapping Type | String |
The tooltip text that would be displayed when a user mouses over a particular element.
| Type | Aesthetic Mapping Object |
| Supported Layer Type | All? |
| Constant Mapping Type | Converted to String |
The id aesthetic is not really an aesthetic, but it is treated as one for interaction purposes. This aesthetic gives an identity to each geometrical object on the screen. For example, each bar, each set of box-and-whiskers, and each point can have a unique identifier associated with it. This identifier is used for animation purposes when the underlying dataset changes: it allows Polychart.js to understand which elements are added, removed, and modified. Two elements with the same identifier will be considered identical, and so Polychart.js will consider there to be a modification to the data.
Polychart uses SVG for rendering graphic. Because of that, there are browser restrictions as to how many SVG objects can be rendered. This is not a problem for most charts, but could be especially a problem for scatter plots. By default, if scatter plots have too many data points, they are sampled down. However this behaviour can be turned off:
| Type | Integer or False |
| Required | No (Optional) |
| Default | 500 |
| Supported Layer Type | All layer types |
If a number is provided, Polychart.js will sample the number of SVG objects in a layer down to that number. If the boolean false is provided, then no sampling would occur.
The position setting is used to determine how to offset two geometrical elements that appear in the same location. It specifically applies to bar charts, and will apply to scatter plots in the future.
| Type | String ('stack' or 'dodge') |
| Required | No (Optional) |
| Default | 'stack' |
| Supported Layer Type | `bar` |
The bar layer type offers two ways of displaying two bars with the same x-position. The default method is to stack the bars together, producing a stacked bar chart. An alternate method is to have the bars dodge one another, so that each bar is a fraction of its original width and appear side by side.
| Type | Filter Object |
| Required | No (Optional) |
This is an optional attribute that could be defined if not all data points are to be visualized. See more at Filter.