Data

Numeric arrays

For simple datasets, pass an array of numbers directly to a layer.

const values = [
    12,
    18,
    14,
    24,
    20
];

Datum.line(values);

Datum automatically converts each value into an internal data point. Array positions become sequential X categories beginning at 1, while each number becomes the Y value.

[
    { x: 1, y: 12 },
    { x: 2, y: 18 },
    { x: 3, y: 14 },
    { x: 4, y: 24 },
    { x: 5, y: 20 }
]

Structured objects

Application data often already exists as objects. Datum can use these objects directly without requiring them to be converted into a specific chart-data shape.

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

const sales = [
    { month: 'Jan', revenue: 18 },
    { month: 'Feb', revenue: 26 },
    { month: 'Mar', revenue: 22 },
    { month: 'Apr', revenue: 34 },
    { month: 'May', revenue: 31 },
    { month: 'Jun', revenue: 42 }
];

Datum.chart({
    target: '#data-objects',
    height: 300,

    datum: [
        Datum.line(sales, {
            x: 'month',
            y: 'revenue',
            stroke: Color.Blue,
            strokeWidth: 2
        }),

        Datum.dot(sales, {
            x: 'month',
            y: 'revenue',
            stroke: Color.Blue,
            fill: '#ffffff',
            radius: 4
        })
    ]
});

Key mapping

By default, Cartesian layers look for properties namedx and y. Use thex and y options when your data uses different property names.

const sales = [
    { month: 'Jan', revenue: 18 },
    { month: 'Feb', revenue: 26 },
    { month: 'Mar', revenue: 22 }
];

Datum.line(sales, {
    x: 'month',
    y: 'revenue'
});

Here, month supplies the X-axis category andrevenue supplies the numeric Y value.

Categorical X values

Datum's standard Cartesian layers currently treat the X-axis as an ordered set of categories. Data points are positioned according to their order in the array, while the mapped X property provides the category label.

const data = [
    { label: 'Alpha', value: 10 },
    { label: 'Beta', value: 25 },
    { label: 'Gamma', value: 18 }
];

Datum.line(data, {
    x: 'label',
    y: 'value'
});

This makes strings, dates and other application values useful as X-axis labels without requiring numeric X coordinates.

Shared data

The same dataset can be passed to multiple layers. Each layer can then provide its own visual representation while sharing the chart's categories and coordinate system.

const sales = [
    { month: 'Jan', revenue: 18 },
    { month: 'Feb', revenue: 26 },
    { month: 'Mar', revenue: 22 }
];

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

    datum: [
        Datum.line(sales, {
            x: 'month',
            y: 'revenue'
        }),

        Datum.dot(sales, {
            x: 'month',
            y: 'revenue'
        })
    ]
});

Data order

Array order determines the horizontal order of standard Cartesian data points. If categories should appear in a particular sequence, arrange the input data in that sequence before passing it to Datum.

const sales = records
    .sort((a, b) => a.sortOrder - b.sortOrder);

Datum.line(sales, {
    x: 'month',
    y: 'revenue'
});