Nostalgic Punchcard Missing

    plotfast
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.4 • Public • Published

    Plotfast

    Canvas plotting library focused on performance.

    Check it out with a million points here!

    Usage

    npm install plotfast or yarn add plotfast

    Or include the plotfast.min.js script and it'll expose the Plotfast global.

    Then, in your HTML:

    <div id="container"></div>

    And initialize the plot in JS:

    // Plot will be inserted into this div,
    // canvas creation handled automatically
    var container = document.getElementById('container');
     
    // Create the plot
    var plot = new Plotfast(container);
     
    // Generate 10k points of data
    var data = plot.generateData(10000);
     
    // Add the data to the plot
    plot.addDataset(data);
     
    // Start rendering the plot
    plot.start();

    Or use the React component (in beta):

    import { Plot } from 'plotfast/react';
     
    const data = generateMyData();
     
    const MyPlot = () => (
        <Plot
            options={{ logging: true }}
            datasets={{ data, options: { type: 'line' } }}
        />
    );

    Features

    Data

    Data is an array of objects in the form { x, y }. Data will be sorted by x value on initialization.

    // Add new data, with options
    plot.addDataset(myData, {
        name: 'My Dataset',
        color: 'red',
    });
     
    // Replace the data of an existing dataset
    // (Useful for server-side decimation)
    plot.updateDataset(0, updatedData);
     
    // Remove a dataset, by index
    plot.removeDataset(0);
     
    // Or by name
    plot.removeDataset('My Dataset');
     
    // Or remove all datasets
    plot.removeDataset();

    Plot Options

    var plot = new Plotfast(container, {
        logging: true,
     
        // Dimensions of the canvas
        width: 640,
        height: 480,
     
        // Labels to display on the axes
        xLabel: 'X axis',
        yLabel: 'Y axis',
     
        // Colors
        lineColor: 'lightgrey',
        textColor: 'black',
        backgroundColor: 'none',
     
        // Downsample data to improve performance
        downsample: true,
    });

    Data Options

    var data = [{ x: 1, y: 0 }, { x: 2, y: 5 }];
     
    plot.addDataset(data, {
        name: 'Dataset',
        color: 'black',
     
        // Will match the plot's downsample setting by default
        downsample: true,
    });

    Events

    // Fires whenever the view changes and gives the new
    // min/max for x and y.
    plot.addEventListener('viewMoved', event => {
        console.log(event.x1, event.x2, event.y1, event.y2);
    });

    Development

    1. Clone repo, run yarn install
    2. Start the development server with yarn start
    3. Create a production build with yarn build

    Future Plans

    • Flesh out plot customization/types
    • In Plot React component, all normal Plotfast functionality should be exposed
    • Try using WebAssembly to speed up plot downsampling/rendering

    Credit

    Default downsampling algorithm provided by Sveinn Steinarsson's Largest Triangle Three Buckets Algorithm.

    Icons are from Google's Material Icons.

    Keywords

    none

    Install

    npm i plotfast

    DownloadsWeekly Downloads

    2

    Version

    0.0.4

    License

    MIT

    Unpacked Size

    266 kB

    Total Files

    37

    Last publish

    Collaborators

    • gregoryjjb