Layers

Composition

Each layer describes one visual representation of data. Pass layers to the datum array ofDatum.chart() to compose a visualization.

import {
    Datum,
    Color,
    mean
} from '@psdpainter/datum-js';

const values = [
    18,
    26,
    22,
    34,
    31,
    42,
    38
];

Datum.chart({
    target: '#layers-composition',
    height: 320,

    datum: [
        Datum.area(values, {
            fill: Color.LightBlue,
            opacity: 0.2
        }),

        Datum.line(values, {
            stroke: Color.Blue,
            strokeWidth: 2
        }),

        Datum.dot(values, {
            stroke: Color.Blue,
            fill: '#ffffff',
            radius: 4
        }),

        Datum.ruler([], {
            value: mean(values),
            stroke: Color.Red,
            dashed: true
        })
    ]
});

Creating layers

Layers are created independently and then passed to a chart. Each layer receives its data followed by an options object.

const line = Datum.line(values, {
    stroke: Color.Blue,
    strokeWidth: 2
});

const dots = Datum.dot(values, {
    stroke: Color.Blue,
    fill: '#ffffff',
    radius: 4
});

Datum.chart({
    target: '#chart',
    datum: [
        line,
        dots
    ]
});

Layers can share the same dataset or use different datasets when the visualization requires it.

Available layers

Datum currently includes layers for common Cartesian, statistical, financial and categorical visualizations.

Datum.line(...)
Datum.dot(...)
Datum.area(...)
Datum.bar(...)
Datum.histogram(...)
Datum.scatter(...)
Datum.candlestick(...)
Datum.pie(...)
Datum.range(...)
Datum.heatmap(...)
Datum.ruler(...)

Series layers

Layers such as line, area,dot and bar represent a series of values. When composed in the same chart, they share the chart's categories, plot area and Y scale.

Datum.chart({
    target: '#chart',

    datum: [
        Datum.area(values),
        Datum.line(values),
        Datum.dot(values)
    ]
});

Reference layers

Not every layer needs to represent a complete data series. The ruler layer adds a reference line to the chart and can be used for thresholds, averages, targets or other significant values.

Datum.ruler([], {
    value: mean(values),
    stroke: Color.Red,
    dashed: true
});

Rulers are horizontal by default. Setdirection to 'vertical' to reference an X-axis category instead.

Layer order

Layers are rendered in the order they appear in thedatum array. Later layers are drawn over earlier layers.

datum: [
    Datum.area(values),
    Datum.line(values),
    Datum.dot(values),
    Datum.ruler([], {
        value: 25
    })
]

Place background-oriented layers such as areas before foreground layers such as lines and dots when they should appear underneath them.

Layer options

Each layer type exposes options appropriate to its visual role. A line can control properties such as stroke width and smoothing, while a bar can control fill, opacity, corner radius and stacking.

The individual layer reference pages document the options available for each layer type.