How to use @nivo/scatterplot - 10 common examples

},
    {
        key: 'margin',
        help: 'Chart margin.',
        type: 'object',
        required: false,
        controlType: 'margin',
        group: 'Base',
    },
    {
        key: 'colors',
        group: 'Style',
        help: 'Defines color range.',
        type: 'string | Function | string[]',
        required: false,
        defaultValue: defaults.colors,
        controlType: 'ordinalColors',
    },
    {
        key: 'blendMode',
        group: 'Style',
        flavors: ['svg'],
        help: 'Defines CSS mix-blend-mode property.',
        description: `
            Defines CSS \`mix-blend-mode\` property for nodes,
            see
            [MDN documentation](https://developer.mozilla.org/fr/docs/Web/CSS/mix-blend-mode).
        `,
        type: 'string',
        required: false,
        defaultValue: defaults.blendMode,
        controlType: 'blendMode',

},

    xScale: {
        type: 'linear',
        min: 0,
        max: 'auto',
    },
    xFormat: d => `${d} kg`,
    yScale: {
        type: 'linear',
        min: 0,
        max: 'auto',
    },
    yFormat: d => `${d} cm`,

    colors: ScatterPlotDefaultProps.colors,
    blendMode: 'multiply',

    nodeSize: ScatterPlotDefaultProps.nodeSize,

    enableGridX: ScatterPlotDefaultProps.enableGridX,
    enableGridY: ScatterPlotDefaultProps.enableGridY,
    axisTop: {
        enable: false,
        orient: 'top',
        tickSize: 5,
        tickPadding: 5,
        tickRotation: 0,
        legend: '',
        legendOffset: 36,
    },
    axisRight: {

`,
        required: false,
        defaultValue: defaults.layers,
    },
    {
        key: 'renderNode',
        flavors: ['svg', 'canvas'],
        group: 'Customization',
        help: 'Override default node rendering.',
    },
    {
        key: 'enableGridX',
        help: 'Enable/disable x grid.',
        type: 'boolean',
        required: false,
        defaultValue: defaults.enableGridX,
        controlType: 'switch',
        group: 'Grid & Axes',
    },
    {
        key: 'gridXValues',
        group: 'Grid & Axes',
        help: 'Specify values to use for vertical grid lines.',
        type: 'Array',
        required: false,
    },
    {
        key: 'enableGridY',
        group: 'Grid & Axes',
        help: 'Enable/disable y grid.',
        type: 'boolean',
        required: false,

max: 'auto',
    },
    xFormat: d => `${d} kg`,
    yScale: {
        type: 'linear',
        min: 0,
        max: 'auto',
    },
    yFormat: d => `${d} cm`,

    colors: ScatterPlotDefaultProps.colors,
    blendMode: 'multiply',

    nodeSize: ScatterPlotDefaultProps.nodeSize,

    enableGridX: ScatterPlotDefaultProps.enableGridX,
    enableGridY: ScatterPlotDefaultProps.enableGridY,
    axisTop: {
        enable: false,
        orient: 'top',
        tickSize: 5,
        tickPadding: 5,
        tickRotation: 0,
        legend: '',
        legendOffset: 36,
    },
    axisRight: {
        enable: false,
        orient: 'right',
        tickSize: 5,
        tickPadding: 5,
        tickRotation: 0,

},
    xFormat: d => `${d} kg`,
    yScale: {
        type: 'linear',
        min: 0,
        max: 'auto',
    },
    yFormat: d => `${d} cm`,

    colors: ScatterPlotDefaultProps.colors,
    blendMode: 'multiply',

    nodeSize: ScatterPlotDefaultProps.nodeSize,

    enableGridX: ScatterPlotDefaultProps.enableGridX,
    enableGridY: ScatterPlotDefaultProps.enableGridY,
    axisTop: {
        enable: false,
        orient: 'top',
        tickSize: 5,
        tickPadding: 5,
        tickRotation: 0,
        legend: '',
        legendOffset: 36,
    },
    axisRight: {
        enable: false,
        orient: 'right',
        tickSize: 5,
        tickPadding: 5,
        tickRotation: 0,
        legend: '',

group: 'Grid & Axes',
    },
    {
        key: 'gridXValues',
        group: 'Grid & Axes',
        help: 'Specify values to use for vertical grid lines.',
        type: 'Array',
        required: false,
    },
    {
        key: 'enableGridY',
        group: 'Grid & Axes',
        help: 'Enable/disable y grid.',
        type: 'boolean',
        required: false,
        defaultValue: defaults.enableGridY,
        controlType: 'switch',
    },
    {
        key: 'gridYValues',
        group: 'Grid & Axes',
        help: 'Specify values to use for horizontal grid lines.',
        type: 'Array',
        required: false,
    },
    ...axesProperties(),
    {
        key: 'isInteractive',
        help: 'Enable/disable interactivity.',
        type: 'boolean',
        required: false,
        defaultValue: defaults.isInteractive,

max: 2000,
                    },
                },
            ],
        },
    },
    {
        key: 'yFormat',
        group: 'Base',
        type: 'string | Function',
        help: 'Optional formatter for y values.',
    },
    {
        key: 'nodeSize',
        group: 'Base',
        defaultValue: defaults.nodeSize,
        type: 'number | object | Function',
        help: `How to compute node size, static or dynamic.`,
        description: `
            If you provide a **number**, all nodes will have the same
            **fixed size**.

            You can also use an object to define a varying size,
            it must conform to the following interface:

            \`\`\`
            {
                key:    string
                values: [min: number, max: number]
                sizes:  [min: number, max: number]
            }
            \`\`\`

type: 'linear',
        min: 0,
        max: 'auto',
    },
    xFormat: d => `${d} kg`,
    yScale: {
        type: 'linear',
        min: 0,
        max: 'auto',
    },
    yFormat: d => `${d} cm`,

    colors: ScatterPlotDefaultProps.colors,
    blendMode: 'multiply',

    nodeSize: ScatterPlotDefaultProps.nodeSize,

    enableGridX: ScatterPlotDefaultProps.enableGridX,
    enableGridY: ScatterPlotDefaultProps.enableGridY,
    axisTop: {
        enable: false,
        orient: 'top',
        tickSize: 5,
        tickPadding: 5,
        tickRotation: 0,
        legend: '',
        legendOffset: 36,
    },
    axisRight: {
        enable: false,
        orient: 'right',
        tickSize: 5,

type: 'linear',
        min: 0,
        max: 'auto',
    },
    xFormat: d => `${d} kg`,
    yScale: {
        type: 'linear',
        min: 0,
        max: 'auto',
    },
    yFormat: d => `${d} cm`,

    pixelRatio:
        typeof window !== 'undefined' && window.devicePixelRatio ? window.devicePixelRatio : 1,

    colors: ScatterPlotCanvasDefaultProps.colors,

    nodeSize: 5,

    axisTop: {
        enable: false,
        orient: 'top',
        tickSize: 5,
        tickPadding: 5,
        tickRotation: 0,
        legend: '',
        legendOffset: 36,
    },
    axisRight: {
        enable: false,
        orient: 'right',
        tickSize: 5,

orient: 'left',
        tickSize: 5,
        tickPadding: 5,
        tickRotation: 0,
        legend: 'size',
        legendPosition: 'middle',
        legendOffset: -60,
        format: d => `${d} cm`,
    },

    enableGridX: ScatterPlotCanvasDefaultProps.enableGridX,
    enableGridY: ScatterPlotCanvasDefaultProps.enableGridY,

    isInteractive: ScatterPlotCanvasDefaultProps.isInteractive,
    useMesh: ScatterPlotCanvasDefaultProps.useMesh,
    debugMesh: ScatterPlotCanvasDefaultProps.debugMesh,

    legends: [
        {
            anchor: 'bottom-right',
            direction: 'column',
            justify: false,
            translateX: 130,
            translateY: 0,
            itemWidth: 100,
            itemHeight: 12,
            itemsSpacing: 5,
            itemDirection: 'left-to-right',
            symbolSize: 12,
            symbolShape: 'rect',
            onClick: d => {
                alert(JSON.stringify(d, null, '    '))