feat: add support for line-based annotations via `scatterplot.drawAnnotations()`

[flekschas]

This PR introduces the ability to draw line-based annotations via scatterplot.drawAnnotations()

Description

What was changed in this pull request?

Added a new function scatterplot.drawAnnotations() for drawing line-based annotations. Currently the following types of annotations are supported:

• Horizontal lines
• Vertical lines
• Rectangles
• Polygons / Lines

For clearing annotations, use scatterplot.clearAnnotations(). Note that scatterplot.clear() will also clear annotations in addition to clearing points and point connections. If you only want to clear points, you can use the newly added scatterplot.clearPoints(), which clears points and point connections. I also added scatterplot.clearPointConnections() to just clear point connections.

Example

const scatterplot = createScatterplot({
  ...,
  annotationLineColor: [1, 1, 1, 0.1], // Default line color
  annotationLineWidth: 1, // Default line width
});

scatterplot.draw({
  x: Array.from({ length: 10000 }, () => -1 + Math.random() * 2),
  y: Array.from({ length: 10000 }, () => -1 + Math.random() * 2),
});

scatterplot.drawAnnotations([
  // Horizontal line
  { y: 0 },
  // Vertical line
  { x: 0 },
  // Rectangle
  {
    x1: -0.5, y1: -0.5, x2: 0.5, y2: 0.5,
    lineColor: [1, 0, 0, 0.33],
    lineWidth: 2,
  },
  // Polygon
  {
    vertices: [[-1, 0], [0, 1], [1, 0], [0, -1], [-1, 0]],
    lineColor: [1, 1, 0, 0.33],
    lineWidth: 3,
  },
]);

Demo

https://flekschas.github.io/regl-scatterplot/annotations.html

Why is it necessary?

Annotations can help better to better correlate or highlight data points or clusters.

Checklist

• [x] Provided a concise title as a semantic commit message (e.g. "fix: correctly handle undefined properties")
• [x] CHANGELOG.md updated
• [x] Tests added or updated
• [x] Documentation in README.md added or updated
• [x] Example(s) added or updated
• [x] Screenshot, gif, or video attached for visual changes