Layer

Wiki ▸ API Reference ▸ Specification ▸ Layer

A layer describes the type of plot you will produce. One or more layers can be added to the chart to produce multi-layered graphic (for example, a scatter plot with a trend line).

A layer is represented in the graph specification as a JSON object with a number of attributes. These attributes fall into the following categories.

Layer Type spec.layer.type

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

Aesthetic Mappings spec.layer.*

Aesthetics describe retinal properties or 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, not only can one set an aesthetic to be a constant, but also one can map a data column to an aesthetic. For example, to set the aesthetic color to red we write: spec.layer.color = {'const': 'red'}. To map the aesthetic size to a data column called population we write spec.layer.size = {'var': 'population'} or more succinctly spec.layer.size = 'population'.

List of aesthetics

More generally, here is a list of all the aesthetics available. Not all layers will support all of the aesthetics.

• x - The x-position. Supported by all layer types.
• y - The y-position. Supported by all layer types.
• color - The color of each geometrical object. Supported by all layer types.
• opacity - The opacity of the colouring. Supported by all layer types.
• size - The size of each geometrical object. Support by layer type point, line, path and text.
• text - Text text to be displayed. Unique to text layer type.
• tooltip - The tooltip text to display. Tooltips are supported for point, bar and tile layer types.
• id - Not really an aesthetic but is treated as one. Described below.

The "id" aesthetic

The "id" aesthetic gives an identity to each geometrical object on the screen. For example, each bar, each set of box-and-whiskers, and each point will 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.

Setting aesthetics to a constant

To set any aesthetics to a constant value for all geometrical objects in a chart, set

spec.layer[aes] = {const: value}

Note that a constant value should not be set for the x- and y-positions unless you really know what you're doing. The x- and y- positions are pixel values!

Aesthetics with Numeric Constant Values

The aesthetics x, y, opacity and size are numeric.

Aesthetics with String Constant Values

The aesthetic color should be a string with a valid hexadecimal code, or the name of a colour.

The aesthetics text and tooltip should be strings.

The aesthetic id is used as an attribute name, and is therefore converted to a string.

Mapping aesthetics

Statistics