Quick Start

Installation

From npm

npm install gladly-plot

import { Plot, pointsLayerType } from 'gladly-plot'

From source

Clone the repository, then:

npm install regl d3

import { Plot, pointsLayerType } from './src/index.js'

Run the built-in example

npm install
npm start

Open your browser to http://localhost:1234 to see the demo.

Minimal example

HTML container:

<div id="plot-container" style="position: relative; width: 800px; height: 600px;"></div>

Width and height are auto-detected from clientWidth/clientHeight and update automatically via ResizeObserver.

JavaScript:

import { Plot, pointsLayerType } from 'gladly-plot'

// 1. Register layer types once at startup
// pointsLayerType is auto-registered on import — no manual registerLayerType call needed

// 2. Prepare data as Float32Arrays
const x = new Float32Array([10, 20, 30, 40, 50])
const y = new Float32Array([15, 25, 35, 25, 45])
const v = new Float32Array([0.2, 0.4, 0.6, 0.8, 1.0])

// 3. Create plot
const plot = new Plot(document.getElementById("plot-container"))

// 4. Apply configuration and data
plot.update({
  data: { x, y, v },
  config: {
    layers: [
      { points: { xData: "x", yData: "y", vData: "v" } }
    ],
    axes: {
      xaxis_bottom: { min: 0, max: 60 },
      yaxis_left:   { min: 0, max: 50 }
    }
  }
})

Next steps