react-cheminfo 0.8.0 → 0.10.0

package/src/scatter/ui/scatterMatrixLayout.ts

@@ -0,0 +1,133 @@
+/**
+ * How much room a pair grid gives each of its cells.
+ *
+ * The numbers are the grid's own rather than the chart family's: a figure
+ * standing alone can afford ten pixels of quiet around its plot, and a grid
+ * repeating that margin thirty-six times inside somebody else's page spends a
+ * fifth of its width on nothing. What a tick label and an axis title need is
+ * still taken from the chart, because that is a property of the type and not
+ * of the figure.
+ */
+
+import {
+  CHART_TICK_ROOM as TICKS,
+  CHART_TITLE_ROOM as TITLES,
+} from '../../chart/ui/chartStyles.ts';
+
+/** Room a cell keeps around its plot before its outer edges ask for more. */
+export const SCATTER_MATRIX_MARGINS = {
+  top: 4,
+  right: 8,
+  bottom: 4,
+  left: 8,
+} as const;
+
+/**
+ * Gap between two cells, which is what tells one plot from the next.
+ *
+ * The three numbers across a join — this and the two margins beside it — have
+ * to hold two tick labels facing each other, since the label on a plot's last
+ * tick is centred on its edge and reaches into the gap from both sides. Twenty
+ * two pixels is where `4` and `-1.5` stop reading as `4-1.5`.
+ */
+export const SCATTER_MATRIX_GAP = 6;
+
+/** Room the left column and the bottom row keep for their ticks and titles. */
+export const SCATTER_MATRIX_ROOM = {
+  left: SCATTER_MATRIX_MARGINS.left + TICKS.left + TITLES.left,
+  bottom: SCATTER_MATRIX_MARGINS.bottom + TICKS.bottom + TITLES.bottom,
+} as const;
+
+/**
+ * The most axes a grid ever lays out, and the fewest it falls back to.
+ *
+ * Six is where the reading stops being worth the room: the sixth component of
+ * a real model usually carries a per cent of the differences, and thirty-six
+ * cells is already more than a reader compares in one sitting. It is a
+ * ceiling, not a target — {@link scatterMatrixAxesThatFit} drops axes until
+ * the cells are readable, so a narrow embed draws three of them.
+ */
+export const SCATTER_MATRIX_MOST_AXES = 6;
+const SMALLEST_GRID = 2;
+
+/**
+ * The smallest plot the grid draws.
+ *
+ * Below it the dots merge and the ticks collide, so an axis is dropped
+ * instead: three components a reader can see beat six they cannot.
+ */
+export const SCATTER_MATRIX_SMALLEST_PLOT = 50;
+
+/**
+ * The narrowest cell that writes its share into its axis title.
+ *
+ * `PC 1 — 73.0 %` is about a hundred pixels of type, and an axis title is
+ * centred on a cell that may be seventy: three of them along the foot of a
+ * narrow grid run into one another and none of the three can be read. Under
+ * this the title is the component's name alone, which is the half a reader
+ * needs to know which cell they are looking at.
+ */
+export const SCATTER_MATRIX_SHARE_IN_TITLE = 110;
+
+/**
+ * The smallest plot a group outline is drawn in.
+ *
+ * An outline holding ninety-five per cent of its group covers most of the cell
+ * it is drawn in, so under about sixty-four pixels the boundary runs along the
+ * edges and the fill reads as a tinted cell rather than as a region — a blob
+ * that says where the group is not. The dots still say it, so the outline is
+ * simply left out.
+ */
+export const SCATTER_MATRIX_SMALLEST_OUTLINE = 64;
+
+/**
+ * How many axes fit in the width at a readable size.
+ * @param width - What the grid was given, in pixels.
+ * @param wanted - How many the caller asked for.
+ * @returns The count to lay out, never below two.
+ */
+export function scatterMatrixAxesThatFit(
+  width: number,
+  wanted: number,
+): number {
+  for (let count = wanted; count > SMALLEST_GRID; count--) {
+    if (scatterMatrixPlotSide(width, count) >= SCATTER_MATRIX_SMALLEST_PLOT) {
+      return count;
+    }
+  }
+  return Math.max(0, Math.min(wanted, SMALLEST_GRID));
+}
+
+/**
+ * The side of every plot rectangle once the chrome has taken its share.
+ * @param width - What the grid was given, in pixels.
+ * @param count - How many axes are laid out.
+ * @returns The side, in pixels, which the caller floors at the smallest plot.
+ */
+export function scatterMatrixPlotSide(width: number, count: number): number {
+  if (count < 1) return SCATTER_MATRIX_SMALLEST_PLOT;
+  const inner = SCATTER_MATRIX_MARGINS.left + SCATTER_MATRIX_GAP;
+  const chrome =
+    SCATTER_MATRIX_ROOM.left +
+    (count - 1) * inner +
+    count * SCATTER_MATRIX_MARGINS.right;
+  return (Math.max(0, width) - chrome) / count;
+}
+
+/**
+ * How many ticks a cell's axis aims for.
+ *
+ * Four labels on a ninety-pixel axis run into one another and the reader
+ * reads none of them; two ends and nothing else is enough to say which way the
+ * component grows, which is all a cell of a grid is asked.
+ * @param side - The side of the plot rectangle, in pixels.
+ * @returns The tick count to ask the axis for.
+ */
+export function scatterMatrixTickCount(side: number): number {
+  if (side < CROWDED_AXIS) return 2;
+  return side < ROOMY_AXIS ? 3 : 4;
+}
+
+/** Where an axis stops holding three tick labels, and where it holds four. */
+const CROWDED_AXIS = 90;
+const ROOMY_AXIS = 150;

package/src/scatter/ui/scatterMatrixOutlines.tsx

@@ -0,0 +1,53 @@
+/**
+ * The group outlines of one cell of a pair grid.
+ *
+ * They are the same shapes the map draws, projected through the cell's own two
+ * scales rather than reused from the map's: an ellipse tilted by thirty
+ * degrees in the data is tilted by something else entirely on a plot whose two
+ * axes carry different numbers of pixels per unit, and a grid whose cells
+ * disagree with the map about where a group sits is worse than a grid with no
+ * outlines at all.
+ */
+
+import type { ReactElement } from 'react';
+
+import type { ChartFrameRender } from '../../chart/ui/ChartFrame.tsx';
+
+import type { ScatterMatrixGrid } from './ScatterMatrixDiagonal.tsx';
+import { scatterPairEllipse } from './scatterGroupSpread.ts';
+import { scatterOutlineShape } from './scatterOutlineShape.tsx';
+
+/**
+ * One outline per group, for the pair of axes a cell stands for.
+ *
+ * The whole layer is one element so that its keys cannot collide with the
+ * marks drawn beside it, and so an end-to-end test finds the outlines of a
+ * cell the same way it finds those of the map.
+ * @param grid - Everything the grid worked out once, including the measured groups.
+ * @param row - Which row the cell sits in, which is the axis up its side.
+ * @param column - Which column, which is the axis along its foot.
+ * @param frame - The rectangle and the two scales the cell was given.
+ * @returns The layer, or `null` when the groups were never measured — no groups were named, or the cells came out too small for a readable outline.
+ */
+export function scatterMatrixOutlines(
+  grid: ScatterMatrixGrid,
+  row: number,
+  column: number,
+  frame: ChartFrameRender,
+): ReactElement | null {
+  const { groupSpread, colors } = grid;
+  if (groupSpread === undefined || colors === undefined) return null;
+
+  const outlines: ReactElement[] = [];
+  for (let group = 0; group < groupSpread.groups; group++) {
+    const color = colors[group];
+    if (color === undefined) continue;
+    const measured = scatterPairEllipse(groupSpread, group, column, row);
+    if (measured === null) continue;
+    outlines.push(
+      scatterOutlineShape(group, measured, frame.x, frame.y, { color }),
+    );
+  }
+  if (outlines.length === 0) return null;
+  return <g data-layer="ellipses">{outlines}</g>;
+}

package/src/scatter/ui/scatterMatrixProps.ts

@@ -0,0 +1,103 @@
+/**
+ * What a caller hands a {@link ScatterMatrix}.
+ *
+ * The types live beside the component rather than inside it because the grid's
+ * own file would otherwise be mostly prose: a reader looking for what the
+ * component draws should not have to scroll past twenty documented options to
+ * find it.
+ */
+
+import type { ReactNode } from 'react';
+
+import type { MatrixLike } from '../../chart/core/matrix.ts';
+import type { EllipseSize } from '../core/confidenceEllipse.ts';
+
+import type { ScatterGroup } from './scatterPlotProps.ts';
+
+/** One axis of a {@link ScatterMatrix}. */
+export interface ScatterMatrixAxis {
+  /** What it is called, e.g. `PC 1`. */
+  name: string;
+  /**
+   * The share of the differences it accounts for, between 0 and 1.
+   * @default undefined — nothing is written after the name
+   */
+  share?: number;
+}
+
+/** What {@link ScatterMatrix} needs. */
+export interface ScatterMatrixProps {
+  /** The coordinates: one row per sample, one column per axis. */
+  scores: MatrixLike;
+  /** The axes, in order; only the first `count` are laid out. */
+  axes: readonly ScatterMatrixAxis[];
+  /**
+   * How many axes to lay out, up to six. Reduced on its own when the container
+   * is too narrow for readable cells, and the reduction is shown in the
+   * options rather than applied silently.
+   * @default the smaller of six and the number of axes
+   */
+  count?: number;
+  /** Available width, in pixels, from `useContainerSize`. */
+  width: number;
+  /**
+   * Which group each row belongs to, for the colours, for the outlines and for
+   * the strip along the diagonal.
+   * @default undefined — every row is drawn in one colour
+   */
+  groupOf?: ArrayLike<number>;
+  /**
+   * The groups, in the order they are coloured.
+   * @default undefined
+   */
+  groups?: readonly ScatterGroup[];
+  /**
+   * How large the outline drawn around each group in each cell is, or `null`
+   * for none. Nothing is outlined unless the groups are named.
+   * @default { kind: 'coverage', probability: 0.95 }
+   */
+  ellipse?: EllipseSize | null;
+  /**
+   * How many rows a group needs before it is outlined at all. Below it the
+   * shape says more about the sample than about the group.
+   * @default 3
+   */
+  ellipseMinimumPoints?: number;
+  /**
+   * The rows selected elsewhere; the rest are drawn faint.
+   * @default undefined — every row is drawn at full strength
+   */
+  selected?: readonly number[];
+  /**
+   * Called with the axis pair a cell stands for, so the map tab can take it
+   * over. A diagonal cell offers itself against its neighbour, which is what
+   * the reader meant by clicking it.
+   * @default undefined — the cells are not clickable
+   */
+  onSelectPair?: (xAxis: number, yAxis: number) => void;
+  /**
+   * Called with the row under the pointer, or `-1`.
+   * @default undefined
+   */
+  onHoverChange?: (index: number) => void;
+  /**
+   * How many bins the diagonal's distribution is cut into.
+   * @default 24
+   */
+  bins?: number;
+  /**
+   * Radius of a dot, in pixels.
+   * @default 2
+   */
+  pointRadius?: number;
+  /**
+   * What floats over the grid.
+   * @default undefined
+   */
+  overlay?: ReactNode;
+  /**
+   * Value of the `data-testid` attribute of the wrapper.
+   * @default undefined
+   */
+  testId?: string;
+}

package/src/scatter/ui/scatterOutlineShape.tsx

@@ -0,0 +1,169 @@
+/**
+ * How one group outline is drawn, wherever it is drawn.
+ *
+ * The map and the pair grid measure their groups differently — the map over
+ * two columns of points, the grid over one shared block of covariances — but a
+ * reader moving between the two tabs has to see the same picture, so the one
+ * decision about fill and the collinear case lives here rather than once per
+ * figure.
+ */
+
+import type { ReactElement } from 'react';
+
+import type { ChartScale } from '../../chart/core/chartScale.ts';
+import type { ConfidenceEllipse } from '../core/confidenceEllipse.ts';
+import type { PixelEllipse } from '../core/ellipseProjection.ts';
+import { ellipsePolygon, projectEllipse } from '../core/ellipseProjection.ts';
+
+/** How one outline is inked. */
+export interface ScatterOutlineInk {
+  /** The group's own colour, which the region is filled with. */
+  color: string;
+  /**
+   * How strongly the whole outline is drawn, which is what a muted legend
+   * entry turns down.
+   * @default undefined — the outline is drawn at full strength
+   */
+  opacity?: number;
+  /**
+   * How solid the region is; `0` draws nothing at all, since the fill is the
+   * whole shape.
+   * @default SCATTER_OUTLINE_FILL_OPACITY
+   */
+  fillOpacity?: number;
+}
+
+/**
+ * One group outline, mapped onto a plot and ready to be drawn.
+ *
+ * The region is fill only, with no boundary drawn: a stroked edge reads as a
+ * measured limit the ellipse never claims to be, and it competes with the dots
+ * the reader is there to count. The fill is deliberately faint for the same
+ * reason it is the whole shape — fills stack where groups overlap, and a tint
+ * heavy enough to see on its own turns two overlapping species into a third
+ * colour the reader then looks for in the legend.
+ *
+ * A group whose points lie on a straight line is drawn as the segment it
+ * actually is, and that one is stroked, since a shape of no height fills to
+ * nothing: that a group is perfectly correlated in these two axes is a
+ * finding, and dropping its outline would hide it.
+ * @param group - Which group it belongs to, for the key and the attribute the tests read.
+ * @param ellipse - The outline in data units, from `confidenceEllipse` or `scatterPairEllipse`.
+ * @param scaleX - Data to pixels, horizontally.
+ * @param scaleY - Data to pixels, vertically; its `factor` is negative.
+ * @param ink - See {@link ScatterOutlineInk}.
+ * @returns The element, keyed by group.
+ */
+export function scatterOutlineShape(
+  group: number,
+  ellipse: ConfidenceEllipse,
+  scaleX: ChartScale,
+  scaleY: ChartScale,
+  ink: ScatterOutlineInk,
+): ReactElement {
+  const drawn = projectEllipse(ellipse, scaleX, scaleY);
+  return drawn === null
+    ? sampledOutline(group, ellipse, scaleX, scaleY, ink)
+    : projectedOutline(group, drawn, ink);
+}
+
+/**
+ * How solid a group's region is.
+ *
+ * Three iris species overlap in the leading components, and fills compound
+ * where they do: at 0.2 two of them stack to 0.36 and read as a fourth group
+ * with a colour of its own, while at 0.1 they stack to 0.19 — denser than
+ * either, plainly still the same family. Below about 0.06 the region stops
+ * being visible against a white ground at all, which is the other failure.
+ * A caller drawing ten groups should turn it down.
+ */
+export const SCATTER_OUTLINE_FILL_OPACITY = 0.1;
+
+/** Firm enough to read over a cloud of its own colour. */
+const SEGMENT_STROKE_WIDTH = 1.5;
+
+const HALF_TURN_DEGREES = 180;
+
+function projectedOutline(
+  group: number,
+  shape: PixelEllipse,
+  ink: ScatterOutlineInk,
+): ReactElement {
+  const { cx, cy, rx, ry, angleDegrees } = shape;
+  const shared = { 'data-group': group, opacity: ink.opacity };
+  if (ry > 0) {
+    return (
+      <ellipse
+        key={group}
+        {...shared}
+        {...fillOf(ink)}
+        cx={round(cx)}
+        cy={round(cy)}
+        rx={round(rx)}
+        ry={round(ry)}
+        transform={`rotate(${round(angleDegrees)} ${round(cx)} ${round(cy)})`}
+      />
+    );
+  }
+  const radians = (angleDegrees * Math.PI) / HALF_TURN_DEGREES;
+  const alongX = rx * Math.cos(radians);
+  const alongY = rx * Math.sin(radians);
+  return (
+    <line
+      key={group}
+      {...shared}
+      fill="none"
+      stroke={ink.color}
+      strokeWidth={SEGMENT_STROKE_WIDTH}
+      x1={round(cx - alongX)}
+      y1={round(cy - alongY)}
+      x2={round(cx + alongX)}
+      y2={round(cy + alongY)}
+    />
+  );
+}
+
+/*
+ * The outline sampled and mapped point by point, for the one case the exact
+ * projection gives up on: coordinates large enough that squaring the mapping
+ * overflows. Mapping each point stays linear and so survives what squaring
+ * does not.
+ */
+function sampledOutline(
+  group: number,
+  ellipse: ConfidenceEllipse,
+  scaleX: ChartScale,
+  scaleY: ChartScale,
+  ink: ScatterOutlineInk,
+): ReactElement {
+  const outline = ellipsePolygon(ellipse);
+  let path = '';
+  for (let index = 0; index < outline.length; index++) {
+    const point = outline[index];
+    if (point === undefined) continue;
+    const px = round(scaleX.offset + point.x * scaleX.factor);
+    const py = round(scaleY.offset + point.y * scaleY.factor);
+    path += `${index === 0 ? 'M' : 'L'}${px} ${py}`;
+  }
+  return (
+    <path
+      key={group}
+      data-group={group}
+      d={path === '' ? path : `${path}Z`}
+      opacity={ink.opacity}
+      {...fillOf(ink)}
+    />
+  );
+}
+
+/* A fill of no opacity is left off the element rather than painted invisibly. */
+function fillOf(ink: ScatterOutlineInk): {
+  fill: string;
+  fillOpacity?: number;
+} {
+  const share = ink.fillOpacity ?? SCATTER_OUTLINE_FILL_OPACITY;
+  if (!(share > 0)) return { fill: 'none' };
+  return { fill: ink.color, fillOpacity: share };
+}
+
+const round = (value: number): number => Math.round(value * 100) / 100;

package/src/scatter/ui/scatterPlotModel.ts

@@ -0,0 +1,200 @@
+/**
+ * What a scatter is made of before any of it is drawn: the groups it colours
+ * by, the marks laid over it, and the arithmetic that turns the caller's
+ * numbers into the pixels three layers and one hit test have to agree on.
+ *
+ * It is kept out of the component because a plot has to know its own rectangle
+ * before it can hand the interaction hook a set of screen positions, and a
+ * hook cannot be called from inside the frame's render callback.
+ */
+
+import { chartAxisScale } from '../../chart/core/chartAxisScale.ts';
+import type { ChartScale } from '../../chart/core/chartScale.ts';
+import { chartScale } from '../../chart/core/chartScale.ts';
+import type { ChartAxisSpec } from '../../chart/ui/ChartFrame.tsx';
+import { chartOuterRoom, chartPlotArea } from '../../chart/ui/chartStyles.ts';
+import type { ScreenPoints } from '../core/screenPoints.ts';
+
+import type { ScatterPixelMark } from './scatterMarkGlyph.tsx';
+import type { ScatterGroup, ScatterMarker } from './scatterPlotProps.ts';
+
+/** Where a scatter's data lands, and the rectangle it lands in. */
+export interface ScatterPlotView {
+  /** The rectangle gestures are taken on, ready to spread onto a `<rect>`. */
+  rect: { x: number; y: number; width: number; height: number };
+  /** Data to pixels, horizontally. */
+  toX: ChartScale;
+  /** Data to pixels, vertically; its `factor` is negative. */
+  toY: ChartScale;
+  /** Every point in the frame's pixels, the space a gesture arrives in. */
+  points: ScreenPoints;
+}
+
+/** The colour and the strength each group is drawn at. */
+export interface ScatterGroupInk {
+  /** One colour per group, in group order. */
+  colors: string[];
+  /** How strongly each group is drawn, in the same order. */
+  opacities: number[];
+}
+
+/**
+ * The plot rectangle, the two mappings, and every point in pixels.
+ *
+ * It repeats what `ChartFrame` works out for itself, from the same inputs and
+ * through the same two functions, because the interaction needs the positions
+ * before the frame has drawn anything and a hook cannot be called from inside
+ * the frame's render callback. Both answers come out of `chartPlotArea`, so
+ * they cannot drift apart without the frame's own tests saying so.
+ * @param x - Horizontal coordinate of every point, in data units.
+ * @param y - Vertical coordinate, in the same order.
+ * @param width - Total width of the figure, in pixels.
+ * @param height - Total height.
+ * @param xAxis - How the horizontal axis was asked for.
+ * @param yAxis - How the vertical one was.
+ * @returns Where everything sits.
+ */
+export function scatterPlotGeometry(
+  x: ArrayLike<number>,
+  y: ArrayLike<number>,
+  width: number,
+  height: number,
+  xAxis: ChartAxisSpec,
+  yAxis: ChartAxisSpec,
+): ScatterPlotView {
+  const across = chartAxisScale(xAxis.domain[0], xAxis.domain[1], {
+    count: xAxis.tickCount,
+    nice: xAxis.nice,
+  });
+  const up = chartAxisScale(yAxis.domain[0], yAxis.domain[1], {
+    count: yAxis.tickCount,
+    nice: yAxis.nice,
+  });
+  const plot = chartPlotArea(
+    width,
+    height,
+    {},
+    {
+      bottom: chartOuterRoom('bottom', xAxis, across),
+      left: chartOuterRoom('left', yAxis, up),
+    },
+  );
+  const toX = chartScale(
+    across.domain[0],
+    across.domain[1],
+    plot.left,
+    plot.right,
+  );
+  const toY = chartScale(up.domain[0], up.domain[1], plot.bottom, plot.top);
+  const total = Math.min(x.length, y.length);
+  const pixelX = new Float64Array(total);
+  const pixelY = new Float64Array(total);
+  for (let index = 0; index < total; index++) {
+    pixelX[index] = toX.offset + (x[index] ?? Number.NaN) * toX.factor;
+    pixelY[index] = toY.offset + (y[index] ?? Number.NaN) * toY.factor;
+  }
+  return {
+    rect: { x: plot.left, y: plot.top, width: plot.width, height: plot.height },
+    toX,
+    toY,
+    points: { x: pixelX, y: pixelY },
+  };
+}
+
+/**
+ * The colour of each group and how strongly it is drawn.
+ *
+ * A muted group is drawn faint rather than dropped: the reader turned it off
+ * to see past it, not to change the shape of what is left, and a cloud that
+ * loses points as entries are switched off is a cloud nobody can compare.
+ * @param groups - The groups, in the order they are coloured and listed.
+ * @param muted - The ids drawn faint.
+ * @returns One colour and one opacity per group.
+ */
+export function scatterGroupInk(
+  groups: readonly ScatterGroup[] | undefined,
+  muted: ReadonlySet<string> | undefined,
+): ScatterGroupInk {
+  const colors: string[] = [];
+  const opacities: number[] = [];
+  for (const group of groups ?? []) {
+    colors.push(group.color);
+    opacities.push(muted?.has(group.id) === true ? MUTED_OPACITY : 1);
+  }
+  return { colors, opacities };
+}
+
+/**
+ * The markers in pixels, which is the only space the layer that draws them
+ * knows about.
+ * @param markers - The marks, in data units.
+ * @param toX - Data to pixels, horizontally.
+ * @param toY - Data to pixels, vertically.
+ * @returns The same marks, placed.
+ */
+export function scatterPixelMarks(
+  markers: readonly ScatterMarker[] | undefined,
+  toX: ChartScale,
+  toY: ChartScale,
+): ScatterPixelMark[] {
+  const marks: ScatterPixelMark[] = [];
+  for (const marker of markers ?? []) {
+    marks.push({
+      label: marker.label,
+      color: marker.color,
+      shape: marker.shape,
+      x: toX.offset + marker.x * toX.factor,
+      y: toY.offset + marker.y * toY.factor,
+    });
+  }
+  return marks;
+}
+
+/**
+ * What a screen reader is told when the caller says nothing.
+ *
+ * A figure with no label at all is hidden from a reader entirely, which for a
+ * plot carrying the whole result is worse than a sentence nobody wrote by
+ * hand. The axes are named the way the plot names them, so a reader hearing
+ * `PC 2 against PC 1` hears the same words a sighted reader sees.
+ * @param xAxis - The horizontal axis.
+ * @param yAxis - The vertical axis.
+ * @param count - How many points are drawn.
+ * @returns The sentence.
+ */
+export function scatterPlotLabel(
+  xAxis: ChartAxisSpec,
+  yAxis: ChartAxisSpec,
+  count: number,
+): string {
+  const across = xAxis.label ?? 'the horizontal axis';
+  const up = yAxis.label ?? 'the vertical axis';
+  return `A scatter plot of ${count} points, ${up} against ${across}.`;
+}
+
+/**
+ * The ring being dragged. Dashed, and filled only faintly: it is a gesture in
+ * progress and not anything the data says, and a solid shape over the cloud
+ * would hide the very points it is about to pick.
+ */
+export const LASSO_STYLE = {
+  fill: 'var(--accent)',
+  fillOpacity: 0.08,
+  stroke: 'var(--accent)',
+  strokeWidth: 1.5,
+  strokeDasharray: '5 4',
+  pointerEvents: 'none',
+} as const;
+
+/**
+ * How far past the dot itself the pointer still counts as aiming at it. A
+ * scatter is aimed at with a hand, and a three-pixel dot that answers only
+ * when the pointer is exactly on it reads as a plot with no hover at all.
+ */
+export const SCATTER_HOVER_SLACK = 8;
+
+/**
+ * Faint enough to read as switched off at a glance, dark enough that the shape
+ * of the group is still there — a reader mutes a group to see past it.
+ */
+const MUTED_OPACITY = 0.2;