Zoom and pan

Multiple simultaneous modifiers

A chart and a camera under one pointer. A drag that starts on the chart pans the chart; one that starts anywhere else turns the scene. Whichever the press landed on keeps the gesture until it ends.

96 of 136

scenes/multiple-simultaneous-modifiers

const { positions, scalars } = shell(200_000);
plot.showPoints(plot.uploadPoints({ positions, scalars }));
plot.frameScene();
const x = plot.uploadBuffer(Float64Array.from({ length: 400 }, (_, i) => i));
const y = plot.uploadBuffer(Float32Array.from({ length: 400 }, (_, i) => scalars[i * 500]));
plot.setCharts({
  charts: [{ series: [{ x, y, label: "ripple" }], at: "topRight", size: [0.3, 0.32], title: "Drag me" }],
});

Calls

5 in the code above, in the order it makes them

plot.showPoints(handle: PointsHandle): void

Draw the point cloud handle names.

plot.uploadPoints(points: PointSet): PointsHandle

Upload a point cloud and return a handle naming it.

plot.frameScene(): void

Point the camera at the middle of everything uploaded, far enough back to see it.

Call after uploading. A scene measured in grid cells or in millimetres is nowhere near where a camera starts, and without this the first thing a caller sees is an empty canvas.

plot.uploadBuffer(values: Float32Array | Float64Array): BufferHandle

Upload a block of scalars and return a handle naming it.

A buffer keeps the precision it arrived in. Use Float64Array for time and for anything where f32's twenty-four bits of mantissa would lose something real: a millisecond timestamp narrowed to f32 rounds every sample into a five-minute bucket, and it does that silently.

plot.setCharts(document: ChartDocument): readonly ChartHandle[]

Draw a document of charts, and get a handle for each one.

The handles come back in document order and are what names a chart afterwards: chartView, setChartView, chartPicked, and the chart on a hover, a hit or any other event. A page linking two charts holds two handles rather than allocating ids.

Replaces the charts and the series each one reads.

Throws rather than drawing a partial document, and a throw leaves the previous document in place. What it refuses: a misspelled key, a handle that names something other than a buffer, a range whose ends are the wrong way round, and a column on a chart kind that cannot read it. All four would otherwise be a chart that draws something subtly wrong, or nothing, with nothing said.

Setting a document again is the way to change one: there is no per-chart edit, and the compile is cheap because the data does not move. The buffers are named by handle, so a live chart writes to them with writeBuffer and never sets a document at all.