react-cheminfo 0.10.0 → 0.11.0

package/src/scatter3d/core/orbitCamera.ts

@@ -0,0 +1,159 @@
+/**
+ * Where the reader is standing, and where a point in the cube lands on screen.
+ *
+ * The cloud is drawn with an orthographic projection rather than a perspective
+ * one: a scatter is read by comparing distances, and perspective makes the same
+ * distance shorter at the back of the box than at the front, so two groups
+ * equally far apart would not look it. What is left to give the picture its
+ * depth is the frame around it, the order the dots are painted in, and their
+ * size — all of which cost nothing and none of which distorts a measurement.
+ */
+
+/** A point of the cube, `[x, y, z]`, with `z` running towards the reader. */
+export type Vector3 = readonly [number, number, number];
+
+/**
+ * Where the reader is standing.
+ *
+ * The scene is turned by `pitch` about the horizontal axis and then by `yaw`
+ * about the vertical one, which is the order a hand expects: dragging sideways
+ * spins the box about its upright axis whatever it is already tilted to, and
+ * dragging up and down tips it towards the reader.
+ */
+export interface OrbitCamera {
+  /** Azimuth, in radians. A sideways drag changes it. */
+  yaw: number;
+  /** Elevation, in radians. A vertical drag changes it. */
+  pitch: number;
+}
+
+/** Where a point of the cube landed, in pixels, and how near the reader it is. */
+export interface ProjectedPoint {
+  /** Pixels from the left of the drawing area. */
+  x: number;
+  /** Pixels from its top. */
+  y: number;
+  /**
+   * Distance towards the reader, in cube units: larger is nearer. It orders
+   * the painting and sizes the dots, and is never drawn as a number.
+   */
+  depth: number;
+}
+
+/**
+ * The corner the box is first seen from.
+ *
+ * Slightly off both axes on purpose. Square-on, two of the three axes lie
+ * exactly along the screen's own and the third collapses to a point, so the
+ * first thing the reader sees is a flat scatter that hides a whole component —
+ * a quarter turn and a slight tilt say "this is a box" before the pointer has
+ * touched it.
+ */
+export const DEFAULT_ORBIT_CAMERA: OrbitCamera = { yaw: 0.6, pitch: 0.5 };
+
+/**
+ * How far the camera may tip, in radians.
+ *
+ * Just short of a right angle. Straight down the vertical axis the horizon
+ * degenerates and a further drag flips the scene over, which reads as the plot
+ * breaking rather than as the reader reaching the end of a range.
+ */
+export const ORBIT_PITCH_LIMIT = 1.4;
+
+/** How many radians one pixel of drag turns the scene. */
+export const ORBIT_RADIANS_PER_PIXEL = 0.01;
+
+/**
+ * Turn a point of the cube into the reader's own frame.
+ * @param point - The point, in cube units.
+ * @param camera - Where the reader is standing.
+ * @returns The point in the reader's frame: right, up, and towards them.
+ */
+export function rotatePoint(point: Vector3, camera: OrbitCamera): Vector3 {
+  const [x, y, z] = point;
+  const cosPitch = Math.cos(camera.pitch);
+  const sinPitch = Math.sin(camera.pitch);
+  const upright = y * cosPitch - z * sinPitch;
+  const tipped = y * sinPitch + z * cosPitch;
+  const cosYaw = Math.cos(camera.yaw);
+  const sinYaw = Math.sin(camera.yaw);
+  return [x * cosYaw + tipped * sinYaw, upright, -x * sinYaw + tipped * cosYaw];
+}
+
+/** Where the projection puts the middle of the cube, and how large it draws it. */
+export interface OrbitViewport {
+  /** Pixels per cube unit. */
+  scale: number;
+  /** Pixels from the left of the drawing area to the middle of the cube. */
+  centerX: number;
+  /** Pixels from its top to the middle of the cube. */
+  centerY: number;
+}
+
+/**
+ * Where a point of the cube lands on screen.
+ *
+ * The vertical axis is flipped, because a cube whose `y` grows upwards has to
+ * be drawn on a screen whose pixels grow downwards.
+ * @param point - The point, in cube units.
+ * @param camera - Where the reader is standing.
+ * @param viewport - Where the middle of the cube is, and how large it is drawn.
+ * @returns See {@link ProjectedPoint}.
+ */
+export function projectPoint(
+  point: Vector3,
+  camera: OrbitCamera,
+  viewport: OrbitViewport,
+): ProjectedPoint {
+  const [right, up, towards] = rotatePoint(point, camera);
+  const { scale, centerX, centerY } = viewport;
+  return {
+    x: centerX + right * scale,
+    y: centerY - up * scale,
+    depth: towards,
+  };
+}
+
+/**
+ * The camera a drag leaves behind.
+ *
+ * The pitch is held inside its limit rather than allowed to wrap, so a reader
+ * who keeps dragging upwards comes to rest looking down at the box instead of
+ * watching it turn upside down.
+ * @param camera - Where the reader was standing.
+ * @param dx - How far the pointer moved across, in pixels.
+ * @param dy - How far it moved down, in pixels.
+ * @returns Where they are standing now.
+ */
+export function orbitByDrag(
+  camera: OrbitCamera,
+  dx: number,
+  dy: number,
+): OrbitCamera {
+  const pitch = camera.pitch + dy * ORBIT_RADIANS_PER_PIXEL;
+  return {
+    yaw: camera.yaw + dx * ORBIT_RADIANS_PER_PIXEL,
+    pitch: Math.min(ORBIT_PITCH_LIMIT, Math.max(-ORBIT_PITCH_LIMIT, pitch)),
+  };
+}
+
+/**
+ * The longest a cube diagonal can be, which is the range `depth` spans.
+ *
+ * A dot is sized from where it sits between the near and far corners, and this
+ * is what that fraction is measured against — a constant rather than the
+ * cloud's own extent, so a dot does not change size when a group is filtered
+ * out from behind it.
+ */
+export const CUBE_HALF_DIAGONAL = Math.sqrt(3);
+
+/**
+ * Where a point sits between the far corner of the cube and the near one.
+ * @param depth - How far towards the reader the point is, in cube units.
+ * @returns From 0 at the back to 1 at the front.
+ */
+export function depthFraction(depth: number): number {
+  if (!Number.isFinite(depth)) return depth > 0 ? 1 : 0;
+  const fraction = (depth / CUBE_HALF_DIAGONAL + 1) / 2;
+  return Math.min(1, Math.max(0, fraction));
+}

package/src/scatter3d/core/symmetricEigen.ts

@@ -0,0 +1,273 @@
+/**
+ * The axes a symmetric three by three matrix describes.
+ *
+ * The two-dimensional outline solves the same problem in four lines, because a
+ * symmetric two by two matrix has a closed form anybody can read. Three by
+ * three also has one — the eigenvalues are the roots of a cubic whose
+ * discriminant is never negative for a symmetric matrix, so they come out of a
+ * cosine rather than out of an iteration — and having it here is what lets the
+ * cloud fit an ellipsoid without the package depending on a matrix library.
+ */
+
+import type { Vector3 } from './orbitCamera.ts';
+
+/** A symmetric three by three matrix, as its six distinct entries. */
+export interface SymmetricMatrix3 {
+  /** Row 1, column 1. */
+  xx: number;
+  /** Row 1, column 2, which is also row 2, column 1. */
+  xy: number;
+  /** Row 1, column 3, which is also row 3, column 1. */
+  xz: number;
+  /** Row 2, column 2. */
+  yy: number;
+  /** Row 2, column 3, which is also row 3, column 2. */
+  yz: number;
+  /** Row 3, column 3. */
+  zz: number;
+}
+
+/** The axes of a symmetric three by three matrix, longest first. */
+export interface SymmetricEigen3 {
+  /** The three eigenvalues, largest first. Never below zero for a covariance. */
+  values: readonly [number, number, number];
+  /** A unit eigenvector per eigenvalue, in the same order, always orthonormal. */
+  vectors: readonly [Vector3, Vector3, Vector3];
+}
+
+/**
+ * A residue this far below the largest eigenvalue is read as zero.
+ *
+ * Squaring and summing coordinates leaves a few parts in 1e16 where the exact
+ * answer is nothing at all, so a flat group — every sample on one plane, which
+ * is what four samples in three dimensions always are — would otherwise be
+ * given a sliver of thickness that differs from machine to machine.
+ */
+const FLAT_FLOOR = 1e-12;
+
+/**
+ * The axes a symmetric three by three matrix describes.
+ *
+ * The eigenvectors are orthonormalised rather than taken as they come out of
+ * the cross products, because a repeated eigenvalue — a group that is round in
+ * two of its three directions, which is the common case for a small one —
+ * leaves that plane's two directions undetermined, and any orthogonal pair in
+ * it is as good an answer as any other. What must never happen is two nearly
+ * parallel vectors, which would draw an ellipsoid collapsed to a fan.
+ * @param matrix - The matrix, as its six distinct entries.
+ * @returns See {@link SymmetricEigen3}. A matrix with an entry that is not finite gives three zero eigenvalues on the standard axes.
+ */
+export function symmetricEigen3(matrix: SymmetricMatrix3): SymmetricEigen3 {
+  const { xx, xy, xz, yy, yz, zz } = matrix;
+  if (
+    !Number.isFinite(xx) ||
+    !Number.isFinite(xy) ||
+    !Number.isFinite(xz) ||
+    !Number.isFinite(yy) ||
+    !Number.isFinite(yz) ||
+    !Number.isFinite(zz)
+  ) {
+    return NOTHING;
+  }
+
+  const values = eigenvalues(matrix);
+  const largest = Math.max(Math.abs(values[0]), Math.abs(values[2]));
+  const raw: Vector3[] = [];
+  for (let i = 0; i < 3; i++) {
+    raw.push(eigenvector(matrix, values[i] as number, largest));
+  }
+  return { values, vectors: orthonormalise(raw) };
+}
+
+/**
+ * The three eigenvalues, largest first.
+ * @param matrix - The matrix, as its six distinct entries.
+ * @returns The eigenvalues, in descending order.
+ */
+function eigenvalues(
+  matrix: SymmetricMatrix3,
+): readonly [number, number, number] {
+  const { xx, xy, xz, yy, yz, zz } = matrix;
+  const offDiagonal = xy * xy + xz * xz + yz * yz;
+  if (offDiagonal === 0) {
+    const diagonal = [xx, yy, zz].toSorted(descending);
+    return [
+      diagonal[0] as number,
+      diagonal[1] as number,
+      diagonal[2] as number,
+    ];
+  }
+
+  const mean = (xx + yy + zz) / 3;
+  const spread =
+    ((xx - mean) * (xx - mean) +
+      (yy - mean) * (yy - mean) +
+      (zz - mean) * (zz - mean) +
+      2 * offDiagonal) /
+    6;
+  const radius = Math.sqrt(spread);
+  if (!(radius > 0)) return [mean, mean, mean];
+
+  // The matrix shifted to a zero trace and scaled to a unit radius; half its
+  // determinant is the cosine of three times the angle the three roots sit at.
+  const half =
+    determinant3({
+      xx: (xx - mean) / radius,
+      xy: xy / radius,
+      xz: xz / radius,
+      yy: (yy - mean) / radius,
+      yz: yz / radius,
+      zz: (zz - mean) / radius,
+    }) / 2;
+  const angle = Math.acos(Math.min(1, Math.max(-1, half))) / 3;
+
+  const first = mean + 2 * radius * Math.cos(angle);
+  const third = mean + 2 * radius * Math.cos(angle + (2 * Math.PI) / 3);
+  return [first, 3 * mean - first - third, third];
+}
+
+function descending(a: number, b: number): number {
+  return b - a;
+}
+
+function determinant3(matrix: SymmetricMatrix3): number {
+  const { xx, xy, xz, yy, yz, zz } = matrix;
+  return (
+    xx * (yy * zz - yz * yz) -
+    xy * (xy * zz - yz * xz) +
+    xz * (xy * yz - yy * xz)
+  );
+}
+
+/**
+ * A direction the matrix only stretches.
+ *
+ * Two rows of `matrix - λI` span the plane the eigenvector is normal to, so
+ * their cross product is that eigenvector. Which two rows is not a free choice:
+ * a row can be zero, or two rows can be nearly parallel, and the cross product
+ * of those is numerical dust — so all three pairs are tried and the longest
+ * answer is kept.
+ * @param matrix - The matrix.
+ * @param value - The eigenvalue.
+ * @param scale - The size of the matrix, to judge "too short" against.
+ * @returns A unit vector, or the zero vector when the shifted matrix vanishes, which is a repeated eigenvalue and leaves the direction to the orthonormalising step.
+ */
+function eigenvector(
+  matrix: SymmetricMatrix3,
+  value: number,
+  scale: number,
+): Vector3 {
+  const { xx, xy, xz, yy, yz, zz } = matrix;
+  const rows: Vector3[] = [
+    [xx - value, xy, xz],
+    [xy, yy - value, yz],
+    [xz, yz, zz - value],
+  ];
+
+  let best: Vector3 = ZERO;
+  let bestLength = 0;
+  for (let i = 0; i < 3; i++) {
+    for (let j = i + 1; j < 3; j++) {
+      const candidate = cross(rows[i] as Vector3, rows[j] as Vector3);
+      const length = norm(candidate);
+      if (length > bestLength) {
+        best = candidate;
+        bestLength = length;
+      }
+    }
+  }
+  // A cross product of two rows is quadratic in the matrix, so the length it
+  // has to beat is too.
+  if (bestLength <= FLAT_FLOOR * Math.max(scale * scale, Number.MIN_VALUE)) {
+    return ZERO;
+  }
+  return scaleVector(best, 1 / bestLength);
+}
+
+/**
+ * Three orthonormal directions, keeping the ones that are worth keeping.
+ *
+ * A vector that survives is normalised against the ones already accepted; one
+ * that does not is replaced by whatever direction is still free, which is what
+ * gives a round group and a flat one a complete frame instead of a degenerate
+ * one.
+ * @param raw - The directions as the cross products left them.
+ * @returns Three unit vectors, mutually orthogonal.
+ */
+function orthonormalise(
+  raw: readonly Vector3[],
+): readonly [Vector3, Vector3, Vector3] {
+  const kept: Vector3[] = [];
+  for (const vector of raw) kept.push(against(vector, kept));
+  for (let i = 0; i < 3; i++) {
+    if (kept[i] !== ZERO) continue;
+    kept[i] = against(freeDirection(kept), kept);
+  }
+  return [kept[0] as Vector3, kept[1] as Vector3, kept[2] as Vector3];
+}
+
+/**
+ * One vector with every accepted direction taken out of it, then normalised.
+ * @param vector - The direction to keep only what is new about.
+ * @param accepted - The directions already settled on.
+ * @returns The unit remainder, or the zero vector when nothing was left of it.
+ */
+function against(vector: Vector3, accepted: readonly Vector3[]): Vector3 {
+  let [x, y, z] = vector;
+  for (const other of accepted) {
+    const along = x * other[0] + y * other[1] + z * other[2];
+    x -= along * other[0];
+    y -= along * other[1];
+    z -= along * other[2];
+  }
+  const length = norm([x, y, z]);
+  if (!(length > 1e-6)) return ZERO;
+  return [x / length, y / length, z / length];
+}
+
+/**
+ * A standard axis that the accepted directions do not already cover.
+ * @param accepted - The directions already settled on.
+ * @returns The axis least accounted for by them.
+ */
+function freeDirection(accepted: readonly Vector3[]): Vector3 {
+  let best: Vector3 = AXES[0];
+  let leastCovered = Number.POSITIVE_INFINITY;
+  for (const axis of AXES) {
+    let covered = 0;
+    for (const other of accepted) {
+      const along =
+        axis[0] * other[0] + axis[1] * other[1] + axis[2] * other[2];
+      covered += along * along;
+    }
+    if (covered < leastCovered) {
+      leastCovered = covered;
+      best = axis;
+    }
+  }
+  return best;
+}
+
+function cross(a: Vector3, b: Vector3): Vector3 {
+  return [
+    a[1] * b[2] - a[2] * b[1],
+    a[2] * b[0] - a[0] * b[2],
+    a[0] * b[1] - a[1] * b[0],
+  ];
+}
+
+function norm(vector: Vector3): number {
+  return Math.hypot(vector[0], vector[1], vector[2]);
+}
+
+function scaleVector(vector: Vector3, by: number): Vector3 {
+  return [vector[0] * by, vector[1] * by, vector[2] * by];
+}
+
+const ZERO: Vector3 = [0, 0, 0];
+const AXES: readonly [Vector3, Vector3, Vector3] = [
+  [1, 0, 0],
+  [0, 1, 0],
+  [0, 0, 1],
+];
+const NOTHING: SymmetricEigen3 = { values: [0, 0, 0], vectors: AXES };

package/src/scatter3d/ui/CloudFrameLayer.tsx

@@ -0,0 +1,97 @@
+import type { ReactElement } from 'react';
+import { memo } from 'react';
+
+import { CUBE_ARMS, CUBE_ORIGIN, cubeEdges } from '../core/cubeFrame.ts';
+import type { OrbitCamera, OrbitViewport } from '../core/orbitCamera.ts';
+import { projectPoint } from '../core/orbitCamera.ts';
+
+import { projectSegments } from './cloudGeometry.ts';
+
+/** What {@link CloudFrameLayer} draws. */
+export interface CloudFrameLayerProps {
+  /** Where the reader is standing. */
+  camera: OrbitCamera;
+  /** Where the middle of the cube is, and how large it is drawn. */
+  viewport: OrbitViewport;
+  /** What the axis running left to right is called. */
+  xLabel: string;
+  /** What the axis running bottom to top is called. */
+  yLabel: string;
+  /** What the axis running away from the reader is called. */
+  zLabel: string;
+}
+
+/**
+ * The box the cloud sits in, and the three arms that name its axes.
+ *
+ * A cloud of dots on an empty background has no orientation: turn it and
+ * nothing says it turned, and a dot near the top of the picture could be near
+ * or far. The frame is what fixes that, and it is why the projection can stay
+ * orthographic — it carries the depth that perspective would otherwise have
+ * to, and unlike perspective it distorts no distance the reader is there to
+ * compare.
+ *
+ * All twelve edges are drawn, not the three at the back: which edges are
+ * hidden changes as the box turns, and a frame that kept rearranging itself
+ * would read as three axes rather than as one box.
+ * @param props - See {@link CloudFrameLayerProps}.
+ * @returns The frame.
+ */
+export const CloudFrameLayer = memo(function CloudFrameLayer(
+  props: CloudFrameLayerProps,
+): ReactElement {
+  const { camera, viewport, xLabel, yLabel, zLabel } = props;
+
+  const edges = projectSegments(EDGES, camera, viewport);
+  const origin = projectPoint(CUBE_ORIGIN, camera, viewport);
+  const names = { x: xLabel, y: yLabel, z: zLabel };
+
+  return (
+    <g data-layer="frame" pointerEvents="none">
+      {edges.map((edge, at) => (
+        <line
+          key={at}
+          x1={edge.x1}
+          y1={edge.y1}
+          x2={edge.x2}
+          y2={edge.y2}
+          stroke="var(--border)"
+          strokeWidth={1}
+        />
+      ))}
+      {CUBE_ARMS.map((arm) => {
+        const end = projectPoint(arm.end, camera, viewport);
+        const label = projectPoint(arm.label, camera, viewport);
+        return (
+          <g key={arm.axis}>
+            <line
+              x1={origin.x}
+              y1={origin.y}
+              x2={end.x}
+              y2={end.y}
+              stroke="var(--border-strong)"
+              strokeWidth={1.5}
+            />
+            <text
+              x={label.x}
+              y={label.y}
+              textAnchor="middle"
+              dominantBaseline="central"
+              fontSize={ARM_LABEL_SIZE}
+              fontWeight={600}
+              fill="var(--text-muted)"
+            >
+              {names[arm.axis]}
+            </text>
+          </g>
+        );
+      })}
+    </g>
+  );
+});
+
+/** Cut once, because the corners of a cube do not depend on the camera. */
+const EDGES = cubeEdges();
+
+/** The same size a chart writes an axis title at, so the two read alike. */
+const ARM_LABEL_SIZE = 11;

package/src/scatter3d/ui/CloudPointLayer.tsx

@@ -0,0 +1,132 @@
+import type { ReactElement } from 'react';
+import { memo } from 'react';
+
+import type { ScreenPoints } from '../../scatter/core/screenPoints.ts';
+import { depthFraction } from '../core/orbitCamera.ts';
+
+/** What {@link CloudPointLayer} draws. */
+export interface CloudPointLayerProps {
+  /** Where every sample sits, in the figure's pixels. */
+  points: ScreenPoints;
+  /** How far towards the reader each one is, in cube units. */
+  depths: Float64Array;
+  /** The rows, furthest first, which is the order they are painted in. */
+  order: Uint32Array;
+  /**
+   * Which group each sample belongs to, as an index into `colors`. An entry of
+   * `-1`, or one outside the range, is a sample in no group.
+   * @default undefined — every sample is one crowd
+   */
+  groupOf?: ArrayLike<number>;
+  /**
+   * The colour of each group, in group order.
+   * @default undefined — every sample takes `fallbackColor`
+   */
+  colors?: readonly string[];
+  /**
+   * How strongly each group is drawn, in the same order.
+   * @default undefined — every group is drawn at full strength
+   */
+  opacities?: readonly number[];
+  /**
+   * Colour of a sample belonging to no group.
+   * @default 'var(--text-faint)'
+   */
+  fallbackColor?: string;
+  /**
+   * Radius of a dot at the middle of the cube, in pixels. A dot at the front
+   * is drawn larger and one at the back smaller, about this.
+   * @default 3.5
+   */
+  radius?: number;
+  /**
+   * The index from which samples are drawn as outlines rather than filled,
+   * which is how one the model was fitted on is told from one placed into it
+   * afterwards.
+   * @default undefined — every sample is filled
+   */
+  outlinedFrom?: number;
+}
+
+/**
+ * Every sample as one dot, painted from the back of the box forwards.
+ *
+ * Two things carry the depth, and neither costs an event handler: the order,
+ * so a dot in front covers one behind it, and the size, so a dot at the front
+ * of the box is a fifth larger than the same dot at the back. Both are read
+ * from the projection rather than from the data, so a turn changes them and a
+ * filter does not.
+ *
+ * Like the flat cloud's own layer, this one carries no handler and no closure
+ * per dot: every gesture lands on one transparent rectangle above it and is
+ * answered from a coordinate array.
+ * @param props - See {@link CloudPointLayerProps}.
+ * @returns The cloud.
+ */
+export const CloudPointLayer = memo(function CloudPointLayer(
+  props: CloudPointLayerProps,
+): ReactElement {
+  const { points, depths, order, groupOf, colors, opacities } = props;
+  const { fallbackColor = 'var(--text-faint)', radius = 3.5 } = props;
+  const { outlinedFrom } = props;
+
+  const xs = points.x;
+  const ys = points.y;
+  const count = Math.min(xs.length, ys.length, order.length);
+  const hollowFrom = outlineStart(outlinedFrom, count);
+
+  const dots: ReactElement[] = [];
+  for (let step = 0; step < count; step++) {
+    const index = order[step] as number;
+    const x = xs[index];
+    const y = ys[index];
+    if (x === undefined || y === undefined) continue;
+    if (!Number.isFinite(x) || !Number.isFinite(y)) continue;
+    const group = groupOf?.[index] ?? -1;
+    const color = colors?.[group] ?? fallbackColor;
+    const alpha = opacities?.[group] ?? 1;
+    const hollow = index >= hollowFrom;
+    dots.push(
+      <circle
+        key={index}
+        cx={round(x)}
+        cy={round(y)}
+        r={round(radius * depthScale(depths[index] as number))}
+        fill={hollow ? 'none' : color}
+        stroke={hollow ? color : undefined}
+        strokeWidth={hollow ? OUTLINE_WIDTH : undefined}
+        opacity={alpha === 1 ? undefined : alpha}
+      />,
+    );
+  }
+
+  return <g data-layer="points">{dots}</g>;
+});
+
+/**
+ * How much larger a dot is drawn for sitting near the front of the box.
+ *
+ * A fifth from back to front. Enough that the eye reads it as depth when it is
+ * looking for depth, and little enough that nobody mistakes it for a value:
+ * a dot size that carried a measurement would be a fourth dimension nothing
+ * labelled.
+ * @param depth - How far towards the reader the sample is, in cube units.
+ * @returns The factor to draw its radius at.
+ */
+function depthScale(depth: number): number {
+  return 0.9 + DEPTH_RANGE * depthFraction(depth);
+}
+
+function outlineStart(outlinedFrom: number | undefined, count: number): number {
+  if (outlinedFrom === undefined || !Number.isFinite(outlinedFrom)) {
+    return count;
+  }
+  return Math.max(0, Math.floor(outlinedFrom));
+}
+
+const DEPTH_RANGE = 0.4;
+
+/** The same weight the flat cloud draws a hollow dot at, so the two read alike. */
+const OUTLINE_WIDTH = 1.5;
+
+const round = (value: number): number => Math.round(value * 100) / 100;