Usage from JavaScript

Without a framework

The @pluot/core NPM package enables usage in vanilla JavaScript code (i.e., decoupled from any particular JavaScript framework).

npm install @pluot/core

React component

The @pluot/react NPM package provides the <Pluot /> React component.

npm install @pluot/react

Props

width
height
plotId
plotType
storeName
plotParams
viewMode
marginBottom
marginLeft
marginTop
marginRight
aspectRatioMode
aspectRatioAlignmentMode
format

Example

import React from 'react';
import { Pluot } from '@pluot/react';
import { FetchStore } from 'zarrita';

const store = new FetchStore('https://example.com/my_dataset.zarr');

export function MyPlot(props) {
    return (
        <Pluot
            width={500}
            height={500}
            plotId="docs-example-scatterplot"
            plotType="LayeredPlot"
            store={store}
            plotParams={{
                x_key: "/n_1000000/x_coords",
                y_key: "/n_1000000/y_coords",
                color_key: "/n_1000000/class_labels",
                point_radius: 5.0,
            }}
            viewMode="2d"
        />
    );
}

View more examples Try on Observable