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.*
• position layer.position
• filtering layer.filter

Layer Type

layer.type

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

Data

layer.data

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.

Aesthetic Mappings

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.

layer.x

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

layer.y

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

layer.color

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!)

layer.opacity

Type	Aesthetic Mapping Object
Supported Layer Type	All layer types
Constant Mapping Type	Numeric

The opacity of the colouring.

layer.size

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

layer.text

Type	Aesthetic Mapping Object
Supported Layer Type	`text`
Constant Mapping Type	String

Actual text to be displayed.

layer.tooltip

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.

layer.id

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.

Position

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.

layer.position

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.

Filtering

layer.filter

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.