Skip to content

Commit 9d12e7a

Browse files
committed
docs: add lassoSelect() method documentation to README
1 parent 58689a4 commit 9d12e7a

File tree

1 file changed

+75
-32
lines changed

1 file changed

+75
-32
lines changed

README.md

Lines changed: 75 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -498,59 +498,102 @@ Select some points, such that they get visually highlighted. This will trigger a
498498

499499
**Arguments:**
500500

501-
- `points` is either:
502-
- An array of point indices referencing the points that you want to select, OR
503-
- An array of `[x, y]` coordinate pairs defining a polygon in **data space** (requires `xScale` and `yScale` to be defined). All points within the polygon will be selected using the same lasso selection algorithm as the interactive lasso tool.
501+
- `points` is an array of point indices referencing the points that you want to select.
504502
- `options` [optional] is an object with the following properties:
505-
- `preventEvent`: if `true` the `select` event will not be published.
506-
- `merge`: if `true` the selected points will be added to the current selection.
507-
- `remove`: if `true` the selected points will be removed from the current selection.
503+
- `preventEvent`: if `true` the `select` will not be published.
508504

509505
**Examples:**
510506

511507
```javascript
512-
// Selection by point indices
513508
// Let's say we have three points
514509
scatterplot.draw([
515510
[0.1, 0.1],
516511
[0.2, 0.2],
517512
[0.3, 0.3],
518513
]);
519514

520-
// To select the first and second point
515+
// To select the first and second point we have to do
521516
scatterplot.select([0, 1]);
517+
```
518+
519+
<a name="scatterplot.lassoSelect" href="#scatterplot.lassoSelect">#</a> scatterplot.<b>lassoSelect</b>(<i>vertices</i>, <i>options = {}</i>)
520+
521+
Programmatically select points within a polygon region. This enables automated point selection without manual lasso interaction. This will trigger a `select` event (and `lassoEnd` event) unless `options.preventEvent === true`.
522+
523+
**Arguments:**
524+
525+
- `vertices` is an array of `[x, y]` coordinate pairs defining the polygon (minimum 3 vertices required). Coordinates are in **data space** by default (requires `xScale` and `yScale`), or **GL space** if `options.isGl === true`.
526+
- `options` [optional] is an object with the following properties:
527+
- `merge`: if `true`, add the selected points to the current selection instead of replacing it.
528+
- `remove`: if `true`, remove the selected points from the current selection.
529+
- `isGl`: if `true`, interpret vertices as GL space coordinates (NDC). If `false` (default), interpret vertices as data space coordinates.
530+
- `preventEvent`: if `true` the `select` and `lassoEnd` events will not be published.
531+
532+
**Notes:**
533+
534+
- Polygons are automatically closed if the first and last vertices differ.
535+
- Data space coordinates require `xScale` and `yScale` to be defined during scatterplot initialization.
536+
- GL space coordinates work without scales and are useful for direct NDC coordinate selection.
537+
538+
**Examples:**
539+
540+
```javascript
541+
import { scaleLinear } from 'd3-scale';
542+
543+
// Create scatterplot with scales for data space coordinates
544+
const scatterplot = createScatterplot({
545+
canvas,
546+
xScale: scaleLinear().domain([0, 100]),
547+
yScale: scaleLinear().domain([0, 100]),
548+
});
522549

523-
// Programmatic lasso selection (polygon in data space)
524-
// Requires xScale and yScale to be defined
525-
const xScale = scaleLinear().domain([0, 100]);
526-
const yScale = scaleLinear().domain([0, 100]);
527-
const scatterplot = createScatterplot({ xScale, yScale, ... });
550+
// Draw points (internally stored in NDC, but we think in data space)
551+
scatterplot.draw([
552+
[-0.8, -0.8], // corresponds to data coords ~[10, 10]
553+
[0.8, 0.8], // corresponds to data coords ~[90, 90]
554+
[0, 0], // corresponds to data coords [50, 50]
555+
]);
528556

529-
// Select all points within a triangular region
530-
scatterplot.select([
557+
// Select points within a triangular region (data space coordinates)
558+
scatterplot.lassoSelect([
531559
[10, 20],
532560
[50, 80],
533561
[90, 30]
534562
]);
535563

536-
// Select points within a rectangle and merge with existing selection
537-
scatterplot.select([
538-
[0, 0],
539-
[100, 0],
540-
[100, 100],
541-
[0, 100]
542-
], { merge: true });
543-
544-
// Remove points within a circle from the selection
545-
const cx = 50, cy = 50, radius = 20;
546-
const circlePolygon = Array.from({ length: 16 }, (_, i) => {
547-
const angle = (i / 16) * Math.PI * 2;
548-
return [cx + Math.cos(angle) * radius, cy + Math.sin(angle) * radius];
549-
});
550-
scatterplot.select(circlePolygon, { remove: true });
551-
```
564+
// Select points within a rectangle, merging with current selection
565+
scatterplot.lassoSelect(
566+
[
567+
[0, 0],
568+
[100, 0],
569+
[100, 100],
570+
[0, 100]
571+
],
572+
{ merge: true }
573+
);
552574

553-
[Code Example](example/programmatic-lasso.js) | [Demo](https://flekschas.github.io/regl-scatterplot/programmatic-lasso.html)
575+
// Remove points in a polygon from the current selection
576+
scatterplot.lassoSelect(
577+
[
578+
[40, 40],
579+
[60, 40],
580+
[60, 60],
581+
[40, 60]
582+
],
583+
{ remove: true }
584+
);
585+
586+
// Use GL space coordinates (useful without scales)
587+
scatterplot.lassoSelect(
588+
[
589+
[-0.5, -0.5],
590+
[0.5, -0.5],
591+
[0.5, 0.5],
592+
[-0.5, 0.5]
593+
],
594+
{ isGl: true }
595+
);
596+
```
554597

555598
<a name="scatterplot.deselect" href="#scatterplot.deselect">#</a> scatterplot.<b>deselect</b>(<i>options = {}</i>)
556599

0 commit comments

Comments
 (0)