insomni-plot 0.1.0-alpha.0

package/src/grammar/geoms/violin.ts

@@ -0,0 +1,672 @@
+// ---------------------------------------------------------------------------
+// violin geom
+// ---------------------------------------------------------------------------
+// Mirrored kernel density estimate per group. By default renders just the
+// closed KDE polygon (matching ggplot's `geom_violin`); opt-in inner
+// annotations (mini box, quartile lines, median stick) and jittered raw-point
+// overlays compose on top. No new low-level marks.
+
+import type { Color, Layer, Vec2 } from "insomni";
+import { type ContinuousScale } from "../../scales.ts";
+import {
+  jitter,
+  type BoxStats,
+  type KdeBandwidth,
+  type KdeKernel,
+  type KdeResult,
+  type QuantileMethod,
+  type WhiskerRule,
+} from "../../stats/index.ts";
+import { pointMark, pushFilledPolygon } from "../../marks.ts";
+import { alphaize } from "../color-utils.ts";
+import { DEFAULT_POINTS_THRESHOLD } from "../constants.ts";
+import { resolveAes } from "../aes.ts";
+import type { Aes } from "../aes.ts";
+import type {
+  CompileContext,
+  CompiledHitTest,
+  Geom,
+  PositionScaleHint,
+  ResolvedChannelMap,
+} from "./types.ts";
+import { selectChannels } from "./_mark.ts";
+import { emphasisContext } from "./emphasis.ts";
+import type { PointsMode } from "./boxplot.ts";
+import {
+  bucketBandCenter,
+  bucketSeed,
+  countsLabelMark,
+  prepareCategoricalLayout,
+  synthAes,
+  type CategoricalBucket,
+  type CategoricalChannels,
+} from "./_categorical.ts";
+import {
+  computeGroupedKde,
+  densityWidthFn,
+  kdeValueExtent,
+  type DensityScale,
+} from "./_distribution.ts";
+
+export interface ViolinChannels<T> {
+  x: Aes<T, string | number | Date>;
+  /**
+   * Numeric value axis when vertical. For horizontal layouts
+   * (`orientation: "x"`) this carries the band category, so a string is
+   * accepted; the value axis then lives on `x`.
+   */
+  y: Aes<T, string | number | Date>;
+  color?: Aes<T, unknown>;
+}
+
+export type ViolinScale = DensityScale;
+export type ViolinInner = "box" | "quartile" | "stick" | "none";
+
+export interface ViolinOptions {
+  orientation?: "x" | "y";
+  /** Violin width as a fraction of the bandwidth (or grouped inner bandwidth). Default `0.9`. */
+  width?: number;
+  /** KDE bandwidth — number, `"silverman"` (default), or `"scott"`. */
+  bandwidth?: KdeBandwidth;
+  /** KDE evaluation grid size. Default `64`. */
+  gridSize?: number;
+  /** KDE kernel. Default `"gaussian"`. */
+  kernel?: KdeKernel;
+  /** Clip KDE to data range (true, default) or pad outward by ~3 bandwidths. */
+  trim?: boolean;
+  /**
+   * Width-normalization mode.
+   *
+   * - `"width"` (default) — each violin uses its full allotted width; shapes
+   *   are easy to compare but **areas are misleading**.
+   * - `"area"` — density scaled relative to the global max so areas are
+   *   comparable across groups (groups with low n look skinny).
+   * - `"count"` — area scales with sample size (bigger n → wider violin).
+   */
+  scale?: ViolinScale;
+  /**
+   * Inner annotation drawn on top of the violin.
+   *
+   * - `"none"` (default) — bare KDE polygon, like ggplot's `geom_violin`.
+   * - `"box"` — slim box plot with median, IQR, whiskers.
+   * - `"quartile"` — three horizontal/vertical lines at Q1, median, Q3.
+   * - `"stick"` — single line at the median only.
+   */
+  inner?: ViolinInner;
+  /** When to overlay raw jittered points. See `BoxplotOptions["points"]`. */
+  points?: PointsMode;
+  pointsThreshold?: number;
+  pointJitter?: number;
+  pointRadius?: number;
+  jitterSeed?: number;
+  /** Box stats: whisker rule when `inner: "box"`. Default `1.5`. */
+  whisker?: WhiskerRule;
+  /** Box stats: quantile method. Default `"type-7"`. */
+  quantile?: QuantileMethod;
+  fill?: Color;
+  stroke?: Color;
+  strokeWidth?: number;
+  /** Color of inner annotation marks. Defaults to `stroke` (or theme text). */
+  innerStroke?: Color;
+  /** Stroke width for the embedded mini-box body. Default `1`. */
+  innerStrokeWidth?: number;
+  /** Inner-band padding for grouped (color-split) layout. Default `0.05`. */
+  groupPadding?: number;
+  /**
+   * Render an `n=<count>` label per group, aligned with the band axis just
+   * outside the plot frame. Useful when the categorical labels alone hide
+   * sample-size differences.
+   */
+  showCounts?: boolean;
+  /**
+   * Pixel offset of the count labels from the plot frame edge along the
+   * band-axis perpendicular. Increase to clear longer tick labels. Default
+   * `28` (vertical) / `32` (horizontal).
+   */
+  countsOffset?: number;
+  countsFontSize?: number;
+  countsColor?: Color;
+  label?: string;
+}
+
+interface ViolinLayout {
+  bucket: CategoricalBucket;
+  /** Index of this bucket in layout.buckets — used to match against hover dataIndex. */
+  bucketIndex: number;
+  bandCenter: number;
+  halfWidth: number;
+  kde: KdeResult;
+  /** Max density before normalization. Used for cross-group `area`/`count` scaling. */
+  maxDensity: number;
+  n: number;
+  stats: BoxStats;
+  fill: Color;
+  /** Silhouette stroke width (boosted for the hovered bucket). */
+  strokeWidth: number;
+  /**
+   * GPU emphasis key (P5-T3) written onto EVERY primitive of this violin (KDE
+   * silhouette fill + outline, inner box/quartile/stick, raw-point overlay) so
+   * the whole entity dims as one. Ordinal = `bucketIndex` (the hit `dataIndex`).
+   * `undefined` when emphasis is off.
+   */
+  emphasisKey?: number;
+}
+
+export function violin<T>(channels: ViolinChannels<T>, options: ViolinOptions = {}): Geom<T> {
+  // The categorical layout helper stringifies the band axis and reads the
+  // value axis as a number; `y` may be the band category (horizontal layouts),
+  // so widen-then-narrow at the helper boundary. Same pattern as ridgeline.
+  const catChannels = channels as unknown as CategoricalChannels<T>;
+  const orientationOpt = options.orientation;
+  const kdeOpts = {
+    bandwidth: options.bandwidth ?? "silverman",
+    gridSize: options.gridSize ?? 64,
+    kernel: options.kernel ?? "gaussian",
+    trim: options.trim ?? true,
+  } as const;
+  return {
+    kind: "violin",
+    channels: { x: channels.x, y: channels.y, color: channels.color },
+    label: options.label,
+    prepareDomain(data) {
+      // Run a per-bucket KDE just to learn the polygon's value-axis extent,
+      // so the chart's value scale unions in any negative or right-tail
+      // smoothing the polygon will display. Without this, the axis crops to
+      // [dataMin, dataMax] and KDE tails (especially with `trim: false`)
+      // render past the plot frame.
+      let orientation: "x" | "y" = orientationOpt ?? "y";
+      if (!orientationOpt && data.length > 0) {
+        // Match the auto-detect in compile(): whichever channel resolves to
+        // strings is the band axis, so the OTHER is the value axis.
+        const xAes = resolveAes<T, unknown>(channels.x as Aes<T, unknown>);
+        const yAes = resolveAes<T, unknown>(channels.y as Aes<T, unknown>);
+        const xSample = xAes.fn(data[0]!, 0);
+        const ySample = yAes.fn(data[0]!, 0);
+        if (typeof xSample === "string") orientation = "y";
+        else if (typeof ySample === "string") orientation = "x";
+      }
+      const { categoryChannel, valueChannel } = selectChannels(orientation, channels);
+      const valueAes = resolveAes<T, number>(valueChannel as Aes<T, number>);
+      const bandAes = resolveAes<T, unknown>(categoryChannel as Aes<T, unknown>);
+      const buckets = new Map<string, number[]>();
+      for (let i = 0; i < data.length; i++) {
+        const datum = data[i]!;
+        const v = valueAes.fn(datum, i);
+        if (!Number.isFinite(v)) continue;
+        const key = String(bandAes.fn(datum, i));
+        let arr = buckets.get(key);
+        if (!arr) {
+          arr = [];
+          buckets.set(key, arr);
+        }
+        arr.push(v);
+      }
+      const extent = kdeValueExtent(buckets.values(), kdeOpts);
+      if (!extent) return undefined;
+      const valueHint: PositionScaleHint = { extend: extent };
+      return orientation === "x" ? { x: valueHint } : { y: valueHint };
+    },
+    compile(ctx: CompileContext<T>) {
+      const { plot, theme, atlas } = ctx;
+      const layout = prepareCategoricalLayout(ctx, catChannels, {
+        orientation: options.orientation,
+        groupPadding: options.groupPadding,
+        fill: options.fill,
+      });
+      const { orientation, valueAxis, cellSize, ox, oy, buckets } = layout;
+
+      const widthFraction = options.width ?? 0.9;
+      const slot = cellSize * widthFraction;
+
+      const scaleMode: ViolinScale = options.scale ?? "width";
+      const { groups: pre, globalMaxDensity } = computeGroupedKde(buckets, {
+        kde: kdeOpts,
+        box: {
+          whisker: options.whisker ?? 1.5,
+          quantile: options.quantile ?? "type-7",
+        },
+        scale: scaleMode,
+      });
+
+      // Hover dim rides the core's GPU emphasis uniform (P5-T3). The silhouette
+      // is a `pushPolygon` fill, which now carries an emphasis key (added this
+      // change), so the whole violin can be tagged as ONE entity: the SAME key
+      // on the KDE fill + outline, the inner box/quartile/stick, and the raw-
+      // point overlay. Ordinal = `bucketIndex` (same order as `buckets` / `pre`),
+      // which is exactly the `dataIndex` compileHitTest reports — so the mount's
+      // emphasisResolution maps a hover hit to this key with no recompile.
+      const emph = emphasisContext(ctx, "violin");
+      const stroke: Color = options.stroke ?? theme.text.color;
+      const baseStrokeWidth = options.strokeWidth ?? 1;
+      const innerStroke: Color = options.innerStroke ?? stroke;
+
+      const layouts: ViolinLayout[] = [];
+      for (const p of pre) {
+        const bandCenter = bucketBandCenter(layout, p.bucket);
+        if (Number.isNaN(bandCenter)) continue;
+        const bucketIndex = buckets.indexOf(p.bucket);
+        layouts.push({
+          bucket: p.bucket,
+          bucketIndex,
+          bandCenter,
+          halfWidth: slot / 2,
+          kde: p.kde,
+          maxDensity: p.maxDensity,
+          n: p.n,
+          stats: p.stats,
+          fill: layout.resolveFill(p.bucket),
+          strokeWidth: baseStrokeWidth,
+          emphasisKey: emph?.keyFor(bucketIndex),
+        });
+      }
+      const innerStrokeWidth = options.innerStrokeWidth ?? 1;
+      const innerKind: ViolinInner = options.inner ?? "none";
+      const pointsMode: PointsMode = options.points ?? "auto";
+      const pointsThreshold = options.pointsThreshold ?? DEFAULT_POINTS_THRESHOLD;
+      const pointJitter = options.pointJitter ?? 0.4;
+      const pointRadius = options.pointRadius ?? 2;
+      const jitterSeed = options.jitterSeed ?? 1;
+      const showCounts = options.showCounts ?? false;
+      const countsFontSize = options.countsFontSize ?? theme.marks.labelFontSize;
+      const countsColor: Color = options.countsColor ?? theme.text.color;
+      const countsOffset = options.countsOffset ?? (orientation === "y" ? 28 : 32);
+
+      const builder = {
+        length: layouts.length,
+        addTo(layer: Layer): Layer {
+          for (const lay of layouts) {
+            const widthFor = densityWidthFn(
+              {
+                bucket: lay.bucket,
+                kde: lay.kde,
+                maxDensity: lay.maxDensity,
+                n: lay.n,
+                stats: lay.stats,
+              },
+              globalMaxDensity,
+              scaleMode,
+              lay.halfWidth,
+            );
+
+            drawViolin(layer, lay, {
+              orientation,
+              valueAxis,
+              ox,
+              oy,
+              widthFor,
+              fill: lay.fill,
+              stroke,
+              strokeWidth: lay.strokeWidth,
+              emphasisKey: lay.emphasisKey,
+            });
+
+            if (innerKind !== "none") {
+              drawInner(layer, lay, {
+                orientation,
+                valueAxis,
+                ox,
+                oy,
+                kind: innerKind,
+                stroke: innerStroke,
+                strokeWidth: innerStrokeWidth,
+                fill: alphaize(stroke, 0.18),
+                emphasisKey: lay.emphasisKey,
+              });
+            }
+
+            const showRaw =
+              pointsMode === "always" || (pointsMode === "auto" && lay.stats.n < pointsThreshold);
+            if (showRaw) {
+              const jw = lay.halfWidth * 2 * pointJitter;
+              const offsets = jitter(
+                bucketSeed(lay.bucket, jitterSeed),
+                lay.bucket.values.length,
+                jw,
+              );
+              const center = lay.bandCenter;
+              const overlayEmphasisKey = lay.emphasisKey;
+              const mark = pointMark(lay.bucket.values, {
+                x: (v, i) =>
+                  orientation === "y" ? ox + center + (offsets[i] ?? 0) : ox + valueAxis(v),
+                y: (v, i) =>
+                  orientation === "y" ? oy + valueAxis(v) : oy + center + (offsets[i] ?? 0),
+                radius: pointRadius,
+                fill: alphaize(innerStroke, 0.5),
+                emphasisKey:
+                  overlayEmphasisKey === undefined ? undefined : () => overlayEmphasisKey,
+              });
+              mark.addTo(layer);
+            }
+          }
+
+          if (showCounts && atlas) {
+            const labelMark = countsLabelMark(
+              layout,
+              {
+                offset: countsOffset,
+                fontSize: countsFontSize,
+                color: countsColor,
+              },
+              plot.width,
+              plot.height,
+            );
+            labelMark.addTo(layer, plot.topLeft);
+          }
+
+          return layer;
+        },
+      };
+
+      return [builder];
+    },
+    emphasisResolution(ctx) {
+      // Ordinal = the hit's `dataIndex`, which compileHitTest sets to the
+      // pre-filter `bucketIndex` — the same value `compile` tags each violin with.
+      return emphasisContext(ctx, "violin")?.resolver() ?? null;
+    },
+    compileHitTest(ctx: CompileContext<T>): CompiledHitTest<T> | null {
+      const { data } = ctx;
+      const layout = prepareCategoricalLayout(ctx, catChannels, {
+        orientation: options.orientation,
+        groupPadding: options.groupPadding,
+        fill: options.fill,
+      });
+      const { orientation, valueAxis, ox, oy, buckets, dodging } = layout;
+
+      const { groups: pre } = computeGroupedKde(buckets, {
+        kde: kdeOpts,
+        box: {
+          whisker: options.whisker ?? 1.5,
+          quantile: options.quantile ?? "type-7",
+        },
+        scale: options.scale ?? "width",
+      });
+
+      const positions = new Float32Array(pre.length * 2);
+      const rects = new Float32Array(pre.length * 4);
+      const seriesKey: (string | undefined)[] = Array.from({ length: pre.length });
+      // Side arrays keyed by pre-filter bucket index — matches what
+      // `compile` uses (`buckets.indexOf(p.bucket)`) so the synth channel
+      // accessors and hover lookups share one key.
+      const medians: number[] = Array.from({ length: buckets.length });
+      const categories: string[] = Array.from({ length: buckets.length });
+      const groupKeys: (string | undefined)[] = Array.from({ length: buckets.length });
+      const hitBucketIndex: number[] = Array.from({ length: pre.length });
+      let n = 0;
+      for (const p of pre) {
+        const bi = buckets.indexOf(p.bucket);
+        const bandCenter = bucketBandCenter(layout, p.bucket);
+        if (!Number.isFinite(bandCenter)) continue;
+        const medianPx = valueAxis(p.stats.median);
+        if (!Number.isFinite(medianPx)) continue;
+        // KDE value extent: min/max of the evaluated grid projected to pixels.
+        const kdeXValues = p.kde.x;
+        let kdePxLo = Infinity;
+        let kdePxHi = -Infinity;
+        for (const x of kdeXValues) {
+          const px = valueAxis(x);
+          if (px < kdePxLo) kdePxLo = px;
+          if (px > kdePxHi) kdePxHi = px;
+        }
+        const valueLo = Math.min(kdePxLo, kdePxHi);
+        const valueHi = Math.max(kdePxLo, kdePxHi);
+        const valueSpan = Math.max(valueHi - valueLo, 1);
+        const bandStart = bandCenter - layout.cellSize / 2;
+        if (orientation === "y") {
+          positions[n * 2] = ox + bandCenter;
+          positions[n * 2 + 1] = oy + medianPx;
+          rects[n * 4] = ox + bandStart;
+          rects[n * 4 + 1] = oy + valueLo;
+          rects[n * 4 + 2] = layout.cellSize;
+          rects[n * 4 + 3] = valueSpan;
+        } else {
+          positions[n * 2] = ox + medianPx;
+          positions[n * 2 + 1] = oy + bandCenter;
+          rects[n * 4] = ox + valueLo;
+          rects[n * 4 + 1] = oy + bandStart;
+          rects[n * 4 + 2] = valueSpan;
+          rects[n * 4 + 3] = layout.cellSize;
+        }
+        seriesKey[n] = dodging ? p.bucket.groupKey : p.bucket.category;
+        medians[bi] = p.stats.median;
+        categories[bi] = p.bucket.category;
+        groupKeys[bi] = p.bucket.groupKey;
+        hitBucketIndex[n] = bi;
+        n++;
+      }
+      if (n === 0) return null;
+
+      const dataIndex = new Int32Array(n);
+      for (let i = 0; i < n; i++) dataIndex[i] = hitBucketIndex[i]!;
+
+      const channelsMap: ResolvedChannelMap<T> = {
+        x: synthAes(orientation === "y" ? "category" : "median", (_d, idx) =>
+          orientation === "y" ? categories[idx] : medians[idx],
+        ),
+        y: synthAes(orientation === "y" ? "median" : "category", (_d, idx) =>
+          orientation === "y" ? medians[idx] : categories[idx],
+        ),
+        color: dodging ? synthAes("group", (_d, idx) => groupKeys[idx] ?? "") : undefined,
+      };
+
+      return {
+        geomKind: "violin",
+        label: options.label,
+        positions: positions.subarray(0, n * 2),
+        rects: rects.subarray(0, n * 4),
+        dataIndex,
+        seriesKey: seriesKey.slice(0, n),
+        pickRadius: Math.max(layout.cellSize / 2, 8),
+        channels: channelsMap,
+        data,
+      };
+    },
+  };
+}
+
+interface DrawViolinCtx {
+  orientation: "x" | "y";
+  valueAxis: ContinuousScale;
+  ox: number;
+  oy: number;
+  widthFor: (density: number) => number;
+  fill: Color;
+  stroke: Color;
+  strokeWidth: number;
+  emphasisKey?: number;
+}
+
+function drawViolin(layer: Layer, lay: ViolinLayout, c: DrawViolinCtx) {
+  const { kde: k, bandCenter } = lay;
+  const n = k.x.length;
+  if (n < 2) return;
+
+  const points: Vec2[] = Array.from({ length: n * 2 });
+  if (c.orientation === "y") {
+    // Vertical: KDE evaluated along the value axis (y). Width spreads along x.
+    for (let i = 0; i < n; i++) {
+      const xi = bandCenter + c.widthFor(k.y[i]!);
+      const yi = c.valueAxis(k.x[i]!);
+      points[i] = { x: c.ox + xi, y: c.oy + yi };
+    }
+    // Reverse bottom edge (mirrored).
+    for (let i = 0; i < n; i++) {
+      const j = n - 1 - i;
+      const xi = bandCenter - c.widthFor(k.y[j]!);
+      const yi = c.valueAxis(k.x[j]!);
+      points[n + i] = { x: c.ox + xi, y: c.oy + yi };
+    }
+  } else {
+    // Horizontal: KDE evaluated along the value axis (x). Width spreads along y.
+    for (let i = 0; i < n; i++) {
+      const xi = c.valueAxis(k.x[i]!);
+      const yi = bandCenter + c.widthFor(k.y[i]!);
+      points[i] = { x: c.ox + xi, y: c.oy + yi };
+    }
+    for (let i = 0; i < n; i++) {
+      const j = n - 1 - i;
+      const xi = c.valueAxis(k.x[j]!);
+      const yi = bandCenter - c.widthFor(k.y[j]!);
+      points[n + i] = { x: c.ox + xi, y: c.oy + yi };
+    }
+  }
+
+  pushFilledPolygon(layer, points, {
+    fill: c.fill,
+    stroke: c.stroke,
+    strokeWidth: c.strokeWidth,
+    emphasisKey: c.emphasisKey,
+  });
+}
+
+interface DrawInnerCtx {
+  orientation: "x" | "y";
+  valueAxis: ContinuousScale;
+  ox: number;
+  oy: number;
+  kind: ViolinInner;
+  stroke: Color;
+  strokeWidth: number;
+  fill: Color;
+  emphasisKey?: number;
+}
+
+function drawInner(layer: Layer, lay: ViolinLayout, c: DrawInnerCtx) {
+  const { stats, bandCenter, halfWidth } = lay;
+  const valuePos = (v: number) => c.valueAxis(v);
+  const ek = c.emphasisKey;
+
+  if (c.kind === "stick") {
+    const m = valuePos(stats.median);
+    if (c.orientation === "y") {
+      layer.pushPolyline({
+        points: [
+          { x: c.ox + bandCenter - halfWidth * 0.5, y: c.oy + m },
+          { x: c.ox + bandCenter + halfWidth * 0.5, y: c.oy + m },
+        ],
+        color: c.stroke,
+        width: c.strokeWidth + 1,
+        emphasisKey: ek,
+      });
+    } else {
+      layer.pushPolyline({
+        points: [
+          { x: c.ox + m, y: c.oy + bandCenter - halfWidth * 0.5 },
+          { x: c.ox + m, y: c.oy + bandCenter + halfWidth * 0.5 },
+        ],
+        color: c.stroke,
+        width: c.strokeWidth + 1,
+        emphasisKey: ek,
+      });
+    }
+    return;
+  }
+
+  if (c.kind === "quartile") {
+    const targets = [stats.q1, stats.median, stats.q3];
+    for (const t of targets) {
+      const p = valuePos(t);
+      const w = t === stats.median ? halfWidth * 0.6 : halfWidth * 0.4;
+      const sw = t === stats.median ? c.strokeWidth + 1 : c.strokeWidth;
+      if (c.orientation === "y") {
+        layer.pushPolyline({
+          points: [
+            { x: c.ox + bandCenter - w, y: c.oy + p },
+            { x: c.ox + bandCenter + w, y: c.oy + p },
+          ],
+          color: c.stroke,
+          width: sw,
+          emphasisKey: ek,
+        });
+      } else {
+        layer.pushPolyline({
+          points: [
+            { x: c.ox + p, y: c.oy + bandCenter - w },
+            { x: c.ox + p, y: c.oy + bandCenter + w },
+          ],
+          color: c.stroke,
+          width: sw,
+          emphasisKey: ek,
+        });
+      }
+    }
+    return;
+  }
+
+  // box: a slim box-and-whisker centered in the violin.
+  const boxHalf = Math.min(halfWidth * 0.18, 8);
+  const yQ1 = valuePos(stats.q1);
+  const yQ3 = valuePos(stats.q3);
+  const yMed = valuePos(stats.median);
+  const yLo = valuePos(stats.lowerWhisker);
+  const yHi = valuePos(stats.upperWhisker);
+
+  if (c.orientation === "y") {
+    const top = Math.min(yQ1, yQ3);
+    const bot = Math.max(yQ1, yQ3);
+    layer.pushRect({
+      x: c.ox + bandCenter - boxHalf,
+      y: c.oy + top,
+      width: boxHalf * 2,
+      height: Math.max(bot - top, 0.5),
+      fill: c.fill,
+      stroke: c.stroke,
+      strokeWidth: c.strokeWidth,
+      emphasisKey: ek,
+    });
+    layer.pushPolyline({
+      points: [
+        { x: c.ox + bandCenter - boxHalf, y: c.oy + yMed },
+        { x: c.ox + bandCenter + boxHalf, y: c.oy + yMed },
+      ],
+      color: c.stroke,
+      width: c.strokeWidth + 1,
+      emphasisKey: ek,
+    });
+    // single whisker line through the box
+    const lo = Math.min(yLo, yHi);
+    const hi = Math.max(yLo, yHi);
+    layer.pushPolyline({
+      points: [
+        { x: c.ox + bandCenter, y: c.oy + lo },
+        { x: c.ox + bandCenter, y: c.oy + hi },
+      ],
+      color: c.stroke,
+      width: c.strokeWidth,
+      emphasisKey: ek,
+    });
+  } else {
+    const left = Math.min(yQ1, yQ3);
+    const right = Math.max(yQ1, yQ3);
+    layer.pushRect({
+      x: c.ox + left,
+      y: c.oy + bandCenter - boxHalf,
+      width: Math.max(right - left, 0.5),
+      height: boxHalf * 2,
+      fill: c.fill,
+      stroke: c.stroke,
+      strokeWidth: c.strokeWidth,
+      emphasisKey: ek,
+    });
+    layer.pushPolyline({
+      points: [
+        { x: c.ox + yMed, y: c.oy + bandCenter - boxHalf },
+        { x: c.ox + yMed, y: c.oy + bandCenter + boxHalf },
+      ],
+      color: c.stroke,
+      width: c.strokeWidth + 1,
+      emphasisKey: ek,
+    });
+    const lo = Math.min(yLo, yHi);
+    const hi = Math.max(yLo, yHi);
+    layer.pushPolyline({
+      points: [
+        { x: c.ox + lo, y: c.oy + bandCenter },
+        { x: c.ox + hi, y: c.oy + bandCenter },
+      ],
+      color: c.stroke,
+      width: c.strokeWidth,
+      emphasisKey: ek,
+    });
+  }
+}

package/src/grammar/index.d.ts

@@ -0,0 +1,22 @@
+export { plot, type AxesSpec, type AxisSpec, type AxisTickFormatter, type AxisTooltipContentResolver, type AxisTooltipInfo, type AxisTooltipRow, type Chart, type LegendMergeChannel, type LegendSpec, type MountedChart, type MountedPlot, type MountPlotOptions, type PanZoomConfig, type PanZoomAxes, type ChartPanBounds, type ChartPanBoundsOptions, type PlotSpec, type RenderTarget, type Row, type ScaleOptionsByChannel, type TitleSpec, } from "./chart.ts";
+export { coordCartesian, coordPolar, coordRadial, type Coord, type CoordAxesArgs, type CoordPanArgs, type CoordZoomArgs, type CoordPolarOptions, type CoordViewportHandle, type Point, } from "./coord.ts";
+export { attachRangePresets, type AttachedRangePresets, type AttachRangePresetsOptions, type AttachRangePresetsPosition, type AttachRangePresetsUi, } from "./attach-presets.ts";
+export { createAttachedBrush, type AttachBrushOptions, type AttachedBrush, type AttachedBrushInternal, } from "./attach-brush.ts";
+export { type AttachedSeriesReadout, type AttachSeriesReadoutOptions, type SeriesReadoutFormat, type SeriesReadoutPosition, type SeriesReadoutRow, type SeriesReadoutSnapshot, type SeriesReadoutUi, } from "./interactions/series-readout.ts";
+export { aggregate, area, band, bar, boxplot, connectedScatter, histogram, interval, line, point, ribbon, ridgeline, rug, rule, smooth, statRolling, text, tile, violin, type AggregateBinBy, type AggregateBinSize, type AggregateBinView, type AggregateBundleResult, type AggregateBundleSummary, type AggregateBundleSummaryKind, type AggregateChannels, type AggregateInnerGeom, type AggregateOptions, type AggregateSummary, type AggregateSummaryKind, type AreaChannels, type AreaOptions, type AreaPosition, type AutoBinSizeInfo, type BandChannels, type BandOptions, type BarChannels, type BarOptions, type BarPosition, type BoxplotChannels, type BoxplotOptions, type ChannelSpec, type CompileContext, type CompiledHitTest, type ConnectedScatterChannels, type ConnectedScatterOptions, type Geom, type GeomKind, type HistogramChannels, type HoveredHit, type HistogramMeasure, type HistogramOptions, type HistogramPosition, type IntervalChannels, type IntervalOptions, type LineChannels, type LineOptions, type PointChannels, type PointOptions, type PointsMode, type ResolvedChannelMap, type RibbonChannels, type RibbonOptions, type RidgelineChannels, type RidgelineFillMode, type RidgelineGeom, type RidgelineInner, type RidgelineOptions, type RidgelineScale, type RugChannels, type RugOptions, type RugSide, type RuleChannels, type RuleOptions, type ScaleBundle, type SmoothChannels, type SmoothLabelOptions, type SmoothMethod, type SmoothOptions, type StatRollingChannels, type StatRollingOptions, type TextChannels, type TextOptions, type TileChannels, type TileNAOptions, type TileOptions, type ViolinChannels, type ViolinInner, type ViolinOptions, type ViolinScale, } from "./geoms/index.ts";
+export type { Accessor, Aes } from "./aes.ts";
+export { fromMatrix, pivotLonger, type FromMatrixOptions, type PivotLongerOptions, } from "./data/pivot.ts";
+export { annotate } from "./annotations.ts";
+export type { AnnotationSpec, AnnotationX, AnnotationY, ArrowAnnotationSpec, CalloutAnnotationSpec, FrameAnchorX, FrameAnchorY, TextAnnotationSpec, } from "./annotations.ts";
+export type { FacetScales, FacetSpec, FacetStripStyle } from "./facet.ts";
+export type { AlphaScaleOptions, BorderStyleScaleOptions, Channel, ColorScaleOptions, ColorScaleType, OverlayGlyphScaleOptions, PositionScaleOptions, PositionScaleType, ShapeScaleOptions, SizeScaleOptions, } from "./scales.ts";
+export { DEFAULT_BORDER_STYLE_PALETTE, DEFAULT_OVERLAY_GLYPH_PALETTE } from "./scales.ts";
+export { distinguishable, palettes, type DistinguishableOptions, type DistinguishablePalettes, type DistinguishableScheme, } from "./palettes.ts";
+export { theme, themeDefault, themeMinimalGrid, type Theme, type ThemeAccentKey, type ThemeAccents, type ThemeAxis, type ThemeInteractions, type ThemeLegend, type ThemeMarks, type ThemePalettes, type ThemeSubtitle, type ThemeText, type ThemeTitle, type ThemeTooltipAccents, type Accessibility, type AccessibilityMode, type TextEffects, } from "./theme.ts";
+export { resolveTextColor, DEFAULT_ACCESSIBILITY, type ContrastMetric, type ResolveTextColorOptions, } from "./accessibility.ts";
+export type { BlendSpace } from "insomni";
+export type { TickIntervalSpec, TickSpec } from "../axis.ts";
+export type { TimeIntervalUnit } from "../scales.ts";
+export type { ColorOrAccent } from "./color-utils.ts";
+export { setRecorderHook, type RecorderHook } from "./profiling.ts";
+export { cladeStripsToAnnotations, tipScale, type CladeStripAnnotationOptions, type CladeStripLike, type TipAxisLike, type TipScaleOptions, } from "./phylo.ts";