Skip to main content

Area & lasso

Analytics and Interaction

Drag a rectangle or draw a lasso over points, bars or cells: selectionGestures={["rect", "lasso"]} plus onSelectionIntent.

Examples

10 live examples

Scatter Lasso

A freehand lasso over the same 2 000 points: containment in data units matches.

Scatter Radial

Radial: press at the centre, release at the radius — a circle, resolved as a 24-gon.

Canvas Rectangle And Lasso

The canvas layer: a plain drag draws the rectangle, Shift+Alt+drag the lasso; both intents hold exactly the readings inside their data-unit geometry — the same contract as the SVG scatter above.

Line Shift Rectangle

`["range", "rect"]` keeps the plot a pointer — a plain drag selects nothing — and Shift+drag draws the rectangle (an ADD).

Bar Lasso Overlap

A lasso across the bars (`overlap`): every bar the band crosses — i.e. tall enough to reach it.

Bar Overlap Versus Contain

`overlap` vs `contain`, the same rectangle over the left half: overlap takes every bar it touches, contain only the bars wholly inside it.

Lasso Respects Navigator Window

A navigator window hides March 1–20: a lasso drawn over (and past) the whole plot selects only the days the window shows — a point outside it is never in the intent.

Keyboard Rectangle

The keyboard rectangle — the lasso's keyboard equivalent: S, arrows, hold Space and grow, release to select; the live region says how many.

Touch Long Press Lasso

Touch: a 400 ms long-press arms the lasso; the path then selects like a mouse lasso.