Scatter

Basic usage

Pass an array of objects to Datum.scatter()and identify the properties containing the X and Y values.

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

// const values = [
//     { x: 0, y: 18 },
//     { x: 1, y: 24 },
//     { x: 2, y: 21 },
//     { x: 3, y: 32 },
//     { x: 4, y: 28 },
//     { x: 5, y: 39 },
//     { x: 6, y: 35 },
//     { x: 7, y: 46 }
// ];
const values = [
    { x: 5,   y: 18 },
    { x: 12,  y: 24 },
    { x: 18,  y: 21 },
    { x: 35,  y: 32 },
    { x: 42,  y: 28 },
    { x: 68,  y: 39 },
    { x: 74,  y: 35 },
    { x: 100, y: 46 }
];

Datum.chart({
    target: '#scatter-example',
    width: '100%',
    height: 320,

    datum: [
        Datum.scatter(values, {
            x: 'x',
            y: 'y',
            radius: 6,
            fill: Color.Blue,
            stroke: '#ffffff',
            strokeWidth: 1,
            opacity: 0.85
        })
    ]
});

Syntax

Datum.scatter(data, {
    x,
    y,
    radius,
    fill,
    stroke,
    strokeWidth,
    opacity
});

Data

By default, Datum expects each observation to contain x and y properties.

const values = [
    { x: 0, y: 18 },
    { x: 1, y: 24 },
    { x: 2, y: 21 },
    { x: 3, y: 32 }
];

Datum.scatter(values);

Data keys

Use x and y to map custom property names.

const values = [
    { index: 0, score: 18 },
    { index: 1, score: 24 },
    { index: 2, score: 21 }
];

Datum.scatter(values, {
    x: 'index',
    y: 'score'
});

Radius

Use radius to control the size of each point. The default radius is 4.

Datum.scatter(values, {
    radius: 7
});

Radius can also be a function, allowing the size of each point to be calculated from its datum.

Datum.scatter(values, {
    radius: (datum, index) => {
        return 4 + index;
    }
});

Fill

Use fill to set the point color.

Datum.scatter(values, {
    fill: Color.Blue
});

Fill can also be provided as a function for per-point styling.

Datum.scatter(values, {
    fill: (datum) => {
        return datum.y >= 30
            ? Color.Green
            : Color.Blue;
    }
});

Stroke

Use stroke and strokeWidth to style the outline around each point.

Datum.scatter(values, {
    fill: Color.Blue,
    stroke: '#ffffff',
    strokeWidth: 2
});

Opacity

Use opacity to control the transparency of the points. The default is 0.85.

Datum.scatter(values, {
    opacity: 0.6
});

Dynamic point styling

Scatter points can vary in both size and color based on their underlying datum.

Datum.scatter(values, {
    radius: (datum) => datum.size,
    fill: (datum) => {
        return datum.y > 30
            ? Color.Green
            : Color.Blue;
    }
});

This makes scatter layers useful for visualizations where additional information needs to be encoded into the appearance of each point.

Options

{
    x: 'x',
    y: 'y',
    radius: 4,
    fill: null,
    stroke: '#ffffff',
    strokeWidth: 1,
    opacity: 0.85
}