insomni-plot

A grammar-of-graphics charting layer built on top of insomni, the WebGPU 2D renderer. You describe a chart declaratively — data, geoms, scales, axes, coordinate system — and insomni-plot compiles that spec into insomni layers and renders it on the GPU. The builder is immutable: every method (.layer(), .scale(), .axes(), …) returns a new Chart, and .mount(canvas) / .render(target) / .toSVG() materialize it.

Install

This is a workspace package, depended on with workspace:*. It declares insomni as a (workspace) dependency, so a WebGPU-capable environment and a GPUDevice are required at mount time.

{
  "dependencies": {
    "insomni-plot": "workspace:*",
    "insomni": "workspace:*",
  },
}

Quick start

import { plot, point } from "insomni-plot";

type Row = { weight: number; mpg: number; cylinders: number };

const data: Row[] = [
  { weight: 3.2, mpg: 21, cylinders: 6 },
  { weight: 1.6, mpg: 39, cylinders: 4 },
  { weight: 4.1, mpg: 15, cylinders: 8 },
];

const device = await (await navigator.gpu.requestAdapter())!.requestDevice();
const canvas = document.querySelector("canvas")!;

const chart = plot<Row>({ data })
  .layer(point({ x: "weight", y: "mpg", color: "cylinders" }))
  .axes({ x: { title: "Weight" }, y: { title: "MPG" } })
  .title("Fuel economy");

const mounted = chart.mount(canvas, { device });

// later, swap the data or tear down
mounted.setData(data);
mounted.destroy();

Aesthetic channels (x, y, color, …) accept a column-name string, an accessor (row, i) => value, or a constant. A line(...) or bar(...) layer slots in the same way as point(...).

Two entry points

• insomni-plot — the grammar API. plot(spec) returns an immutable Chart; compose it with geoms (point, line, bar, …), coordCartesian / coordPolar / coordRadial, theme, faceting, annotations, color palettes, and statistics helpers (bin, kde, boxStats, regression fits).
• insomni-plot/core — the low-level imperative primitives the grammar is built on: scales (linearScale, bandScale, timeScale, logScale, …), axis builders (bottomAxis, leftAxis, …), mark builders (pointMark, lineMark, barMark, areaMark, stacking), legends, color scales/palettes, formatters, the data viewport, and the data navigator. Reach for /core when you want to hand-wire a render without the Chart builder.

Geoms

aggregate, area, band, bar, boxplot, connectedScatter, histogram, interval, line, point, ribbon, ridgeline, rug, rule, smooth, statRolling, text, tile, violin.

Interactions & more

The mount can wire hover tooltips, a snapping crosshair, click-selection, drag-to-rect brushing, legend toggling, a context menu, animated transitions, and pan/zoom — see MountPlotOptions in src/grammar/chart.ts. Charts also export to SVG via chart.toSVG().