scatter

• Quick Reference
• API

Quick Reference

import { scatter } from 'vizart-basic';
import 'vizart-basic/dist/vizart-basic.css';

const options = {
	chart: {
		height: 420,
		margin: { left: 30, right: 30, top: 10, bottom: 30 }
	},

	data: {
		x: { accessor: 'age', type: 'number', name: 'Age' },
		y: [ { accessor: 'income', type: 'number', name: 'Monthly Income' } ]
		r: { accessor: 'companyYears', type: 'number', name: 'Years at Company' } //optional
	},
};

const fakeData = [
	{ age: 19, income: 9, companyYears:5 }
]

const chart = scatter('#chart', options);
chart.render(fakeData);
			

API

Default options:

{
    chart: {
        type: 'scatter',
    },
    plots: {
        blur: false,
        opacity: 1,
        bubble: {
            min: 6,
            max: 20,
            default: 8
        }
    },

    zAxis: {
        allowDecimals: false,
        scale: null,
        max: 100,
        min: 0,
    },

    data: {
        z: {
            accessor: null,
            type:  FieldType.NUMBER,
            formatter:  null,
        },
    }
}

blur

Turn on real-life motion blur?

opacity

bubble opacity, 1 by default

bubble.min

minimum bubble radius

bubble.max

maximum bubble radius

bubble.default

default bubble radius

data.z

Radius field