@fundar/data-chart-telling 1.16.0 → 1.18.0

package/dist/phases/transforms/methods/TreemapTransform.js

@@ -0,0 +1,119 @@
+import { hierarchy, treemap, treemapBinary, treemapDice, treemapSlice, treemapSliceDice, treemapSquarify } from 'd3-hierarchy';
+import { resolveAccessor } from '../../../utils/accessors';
+import { TREEMAP_CHANNEL_KEYS } from '../../../types/transforms/treemap';
+const TILES = {
+    squarify: treemapSquarify,
+    binary: treemapBinary,
+    slice: treemapSlice,
+    dice: treemapDice,
+    sliceDice: treemapSliceDice
+};
+/** What a treemap leaves on each row it produces, and the channels it reads them back by. */
+export const TREEMAP_ROW = {
+    /** The tile's name: the value at its last level. */
+    name: Symbol('treemap.name'),
+    /** The value at every level of the tile, outermost first. */
+    path: Symbol('treemap.path'),
+    /** The tile's summed `value`. */
+    value: Symbol('treemap.value'),
+    /** The tile's part of the whole, from `0` to `1`. */
+    share: Symbol('treemap.share'),
+    x1: Symbol('treemap.x1'),
+    x2: Symbol('treemap.x2'),
+    y1: Symbol('treemap.y1'),
+    y2: Symbol('treemap.y2'),
+    x: Symbol('treemap.x'),
+    y: Symbol('treemap.y')
+};
+const read = (channel) => typeof channel === 'function'
+    ? channel
+    : (row) => row[channel];
+/** A treemap as a transform: the layout of d3-hierarchy, in the shape every other transform returns. */
+export class TreemapTransform {
+    static adapter = {
+        channelKeys: TREEMAP_CHANNEL_KEYS,
+        run: (channels, options) => TreemapTransform.layout(channels, options)
+    };
+    /**
+     * A row per tile of `channels.data`, biggest first within its group, placed in the unit square. A row whose
+     * value is not a positive number has no area, so it makes no tile. The layout is `aspect` wide while it is
+     * computed and scaled back after, so its tiles are shaped after the box they fill.
+     */
+    static layout(channels, options) {
+        const { data, value, ...rest } = channels;
+        if (!data)
+            throw new Error('treemap: missing data');
+        if (value === undefined)
+            throw new Error('treemap: missing value channel');
+        const size = read(value);
+        const levels = (options.levels ?? []).map((level) => resolveAccessor(level));
+        const tile = options.tile ?? 'squarify';
+        const aspect = Number(options.aspect);
+        const width = aspect > 0 && Number.isFinite(aspect) ? aspect : 1;
+        const root = { name: '', path: [], rows: [], children: [] };
+        const nodes = new Map();
+        const nodeOf = (path) => {
+            let parent = root;
+            for (let depth = 1; depth <= path.length; depth++) {
+                const key = JSON.stringify(path.slice(0, depth));
+                let node = nodes.get(key);
+                if (!node) {
+                    node = { name: path[depth - 1], path: path.slice(0, depth), rows: [], children: [] };
+                    nodes.set(key, node);
+                    parent.children.push(node);
+                }
+                parent = node;
+            }
+            return parent;
+        };
+        for (const row of data) {
+            const area = Number(size(row));
+            if (!(Number.isFinite(area) && area > 0))
+                continue;
+            const leaf = nodeOf(levels.map((level) => String(level(row))));
+            leaf.rows.push(row);
+            leaf.value = (leaf.value ?? 0) + area;
+        }
+        const tiles = [];
+        if (root.children.length > 0 || root.value !== undefined) {
+            const tree = hierarchy(root, (node) => (node.children?.length ? node.children : null))
+                .sum((node) => node.value ?? 0)
+                .sort((a, b) => (b.value ?? 0) - (a.value ?? 0));
+            const total = tree.value ?? 0;
+            treemap().size([width, 1]).tile(TILES[tile]).round(false)(tree);
+            for (const leaf of tree.leaves()) {
+                const at = leaf;
+                const { rows, path, name } = leaf.data;
+                const sum = leaf.value ?? 0;
+                const first = rows[0];
+                const x1 = at.x0 / width;
+                const x2 = at.x1 / width;
+                tiles.push({
+                    ...first,
+                    // A string `value` names the field the tile's sum reads back from.
+                    ...(typeof value === 'string' ? { [value]: sum } : {}),
+                    [TREEMAP_ROW.name]: name,
+                    [TREEMAP_ROW.path]: path,
+                    [TREEMAP_ROW.value]: sum,
+                    [TREEMAP_ROW.share]: total > 0 ? sum / total : 0,
+                    [TREEMAP_ROW.x1]: x1,
+                    [TREEMAP_ROW.x2]: x2,
+                    [TREEMAP_ROW.y1]: at.y0,
+                    [TREEMAP_ROW.y2]: at.y1,
+                    [TREEMAP_ROW.x]: (x1 + x2) / 2,
+                    [TREEMAP_ROW.y]: (at.y0 + at.y1) / 2
+                });
+            }
+        }
+        return {
+            ...rest,
+            data: tiles,
+            x: TREEMAP_ROW.x,
+            x1: TREEMAP_ROW.x1,
+            x2: TREEMAP_ROW.x2,
+            y: TREEMAP_ROW.y,
+            y1: TREEMAP_ROW.y1,
+            y2: TREEMAP_ROW.y2
+        };
+    }
+}

package/dist/plots/correlation/heatmap/defaults.d.ts

@@ -1,5 +1,5 @@
 import type { AxisPlotDefaults } from '../../../types/phases';
-import type { HeatmapPlotState, HeatmapPlotCtx } from '../../../types/plots/correlation/heatmap/state';
+import type { HeatmapPlotState, HeatmapPlotEnv } from '../../../types/plots/correlation/heatmap/state';
 /**
  * HeatmapPlot on the shared pipeline: both axes are categories. A heatmap's
  * `color` is each cell's numeric value, which the "data" phase reads as a
@@ -8,4 +8,4 @@ import type { HeatmapPlotState, HeatmapPlotCtx } from '../../../types/plots/corr
  * cell's tooltip names its coordinates and its value.
  * Its plot defaults to: hover one cell.
  */
-export declare function buildHeatmapDefaults<TData extends Record<string, unknown>>(): AxisPlotDefaults<HeatmapPlotState<TData>, HeatmapPlotCtx>;
+export declare function buildHeatmapDefaults<TData extends Record<string, unknown>>(): AxisPlotDefaults<HeatmapPlotState<TData>, HeatmapPlotEnv>;

package/dist/plots/correlation/heatmap/defaults.js

@@ -1,15 +1,17 @@
 import { ColorRamp } from '../../../utils/color';
+import { HoverDefaults } from '../../../layout/hover/HoverDefaults';
 import { OpacityScale } from '../../../utils/OpacityScale';
 import { ContinuousDomain } from '../../../utils/ContinuousDomain';
-import { buildMarks, buildValueLabels } from './markers';
+import { buildMarks } from './markers';
+import { RowContext } from '../../../phases/context/RowContext';
 /**
  * HeatmapPlot's own "scales" output, over the band axes the shared phase laid
  * out: the color domain over every cell's value (when `color` is set), and each
  * row's own resolved color and opacity.
  */
-function extendWithColorScales(state, ctx) {
+function extendWithColorScales(state, env) {
     const { scales, channels } = state;
-    const { range, cfg } = ctx;
+    const { range, cfg } = env;
     const { color: colorAcc } = channels;
     const rows = (state.processedData?.data ?? []);
     const valueDomain = ContinuousDomain.build(scales.color?.domain, rows.map((d) => Number(colorAcc.accessor(d))), true) ?? [0, 1];
@@ -68,6 +70,14 @@ export function buildHeatmapDefaults() {
                 }
             })
         },
+        // A cell's value is its color's, not a position's.
+        context: (state) => {
+            const color = state.channels.color.accessor;
+            return ((row) => {
+                const value = Number(color(row));
+                return { value: Number.isFinite(value) ? value : undefined };
+            });
+        },
         statistics: { inheritGrouping: false },
         sharedScales: { fromScalesPhase: ['color'] },
         scales: {
@@ -76,13 +86,18 @@ export function buildHeatmapDefaults() {
             extend: extendWithColorScales
         },
         styles: { values: { show: true } },
-        markers: { marks: buildMarks, valueLabels: buildValueLabels },
+        markers: { marks: buildMarks },
         hover: {
-            // A hovered cell reads as its formatted value.
+            // A cell writes its own value: the hover only restyles the cells - the hovered one outlined.
+            marker: (_state, env) => HoverDefaults.shapes(env.cfg),
+            // A hovered cell reads as its value, as its value labels write it.
             label: (state) => {
-                const format = state.values?.format ?? ((v) => `${v}`);
-                const color = state.channels.color.accessor;
-                return ((row) => format(Number(color(row)), ''));
+                const format = state.values?.format;
+                const number = (v) => `${v}`;
+                return ((row) => {
+                    const context = RowContext.of(row);
+                    return format ? format(Number(context.value), number, context) : `${context.value}`;
+                });
             },
             // A cell's color is its value, not a series'.
             decorate: () => () => ({ series: undefined, color: undefined })

package/dist/plots/correlation/heatmap/markers.d.ts

@@ -1,17 +1,9 @@
-import type { TextMarkerConfig } from '../../../types/markers/common';
-import type { HeatmapPlotState, HeatmapPlotCtx } from '../../../types/plots/correlation/heatmap/state';
-import type { ValueLabels } from '../../../layout/styles/ValueLabels';
+import type { HeatmapPlotState, HeatmapPlotEnv } from '../../../types/plots/correlation/heatmap/state';
 import type { AxisBasedMarkersConfig } from '../../../types/markers/common';
-/**
- * HeatmapPlot's `styles.values` as one `'text'` marker over the same cells
- * the plot draws, each labelled with its own value and centred on it. Shown
- * by default.
- */
-export declare function buildValueLabels<TData extends Record<string, unknown>>(labels: ValueLabels, state: HeatmapPlotState<TData>, ctx: HeatmapPlotCtx): TextMarkerConfig[];
 /**
  * HeatmapPlot's "markers" phase: one `'cell'` marker per resolved-style
  * bucket - svelteplot's opacity/numeric scale machinery requires
  * `fillOpacity`/`strokeWidth` to be constant per mark instance, unlike
  * `fill`, which stays a per-row accessor.
  */
-export declare function buildMarks<TData extends Record<string, unknown>>(state: HeatmapPlotState<TData>, ctx: HeatmapPlotCtx): AxisBasedMarkersConfig[];
+export declare function buildMarks<TData extends Record<string, unknown>>(state: HeatmapPlotState<TData>, env: HeatmapPlotEnv): AxisBasedMarkersConfig[];

package/dist/plots/correlation/heatmap/markers.js

@@ -8,47 +8,16 @@ function readChannel(channel) {
     return resolveAccessor(channel);
 }
 const OPACITY_STEPS = 32;
-/**
- * HeatmapPlot's `styles.values` as one `'text'` marker over the same cells
- * the plot draws, each labelled with its own value and centred on it. Shown
- * by default.
- */
-export function buildValueLabels(labels, state, ctx) {
-    const { processedData } = state;
-    if (!processedData?.data.length)
-        return [];
-    const { font, format } = labels;
-    const getColor = state.channels.color.accessor;
-    return [
-        {
-            type: 'text',
-            data: processedData.data,
-            // Read like the cells read them, so the labels add no axis title the cells don't.
-            x: readChannel(processedData.channels.x),
-            y: readChannel(processedData.channels.y),
-            text: (d) => format(Number(getColor(d)), ''),
-            styles: {
-                ...font,
-                fill: font?.fill ?? ctx.cfg.continuous.labelColor,
-                fontSize: font?.fontSize ?? 12,
-                fontWeight: font?.fontWeight ?? 600,
-                dx: font?.dx ?? 0,
-                dy: font?.dy ?? 0,
-                textAnchor: labels.textAnchor ?? 'middle',
-                lineAnchor: font?.lineAnchor ?? 'middle'
-            }
-        }
-    ];
-}
 /**
  * HeatmapPlot's "markers" phase: one `'cell'` marker per resolved-style
  * bucket - svelteplot's opacity/numeric scale machinery requires
  * `fillOpacity`/`strokeWidth` to be constant per mark instance, unlike
  * `fill`, which stays a per-row accessor.
  */
-export function buildMarks(state, ctx) {
+export function buildMarks(state, env) {
     const { segments, channels, resolveColor, resolveOpacity } = state;
-    const { range } = ctx;
+    const { range } = env;
+    const labels = state.valueLabels?.show ? state.valueLabels : undefined;
     const getColor = channels.color.accessor;
     // The cells are the rows the "transforms" phase left, placed by its channels.
     const processed = state.processedData;
@@ -131,16 +100,21 @@ export function buildMarks(state, ctx) {
         data: group.data,
         x: getX,
         y: getY,
-        fill: (d) => group.styles.fill ?? resolveColor(d),
         styles: {
+            fill: (d) => group.styles.fill ?? resolveColor(d),
             fillOpacity: group.styles.fillOpacity ?? group.opacity ?? 1,
             stroke: group.styles.stroke,
             strokeWidth: group.styles.strokeWidth ?? 0,
             strokeOpacity: group.styles.strokeOpacity,
             strokeDasharray: group.styles.strokeDasharray,
-            borderRadius: group.styles.borderRadius
+            borderRadius: group.styles.borderRadius,
+            inset: 0.5
         },
-        inset: 0.5
+        hover: 'style',
+        // Each cell writes its own value, in the middle of it.
+        label: labels?.shapeLabel(env, (d) => labels.format(Number(getColor(d)), d), {
+            fontWeight: 600
+        })
     }));
     return markers;
 }

package/dist/plots/correlation/scatter/defaults.d.ts

@@ -1,4 +1,4 @@
 import type { AxisPlotDefaults } from '../../../types/phases';
-import type { ScatterPlotState, ScatterPlotCtx } from '../../../types/plots/correlation/scatter/state';
+import type { ScatterPlotState, ScatterPlotEnv } from '../../../types/plots/correlation/scatter/state';
 /** ScatterPlot on the shared pipeline: discrete dots, its own radius-padded scales, and its own markers. Its plot defaults to: hover the exact point. */
-export declare function buildScatterDefaults<TData extends Record<string, unknown>>(): AxisPlotDefaults<ScatterPlotState<TData>, ScatterPlotCtx>;
+export declare function buildScatterDefaults<TData extends Record<string, unknown>>(): AxisPlotDefaults<ScatterPlotState<TData>, ScatterPlotEnv>;

package/dist/plots/correlation/scatter/defaults.js

@@ -1,4 +1,5 @@
 import { ProcessedPositions } from '../../../phases/transforms/ProcessedPositions';
+import { HoverDefaults } from '../../../layout/hover/HoverDefaults';
 import { buildMarks, buildValueLabels } from './markers';
 import { Margins } from '../../../layout/margins/Margins';
 import { MarkerAxisValues } from '../../../phases/scales/MarkerAxisValues';
@@ -25,7 +26,7 @@ function paddedDomain(values, radiusPx, sizePx) {
  * the largest dot's radius, and grown to cover what derived markers draw
  * (a density curve's peak, a regression band).
  */
-function fitDomains(state, ctx) {
+function fitDomains(state, env) {
     const { scales, channels, groupedSeries } = state;
     const processed = state.processedData;
     const position = ProcessedPositions.of(processed);
@@ -39,10 +40,10 @@ function fitDomains(state, ctx) {
         ? r
         : r !== undefined
             ? AUTO_SCALED_RADIUS_ESTIMATE
-            : Math.max(0, ...groupedSeries.flatMap((group) => group.visualSegments.map((seg) => seg.styles.dotRadius ?? ctx.cfg.scatter.dotRadius)));
+            : Math.max(0, ...groupedSeries.flatMap((group) => group.visualSegments.map((seg) => seg.styles.dotRadius ?? env.cfg.scatter.dotRadius)));
     if (radius <= 0 && !extra.x.length && !extra.y.length)
         return {};
-    const box = Margins.resolve({ ...ctx.cfg.margins, ...state.margins }).contentBox(state.width, state.height);
+    const box = Margins.resolve({ ...env.cfg.margins, ...state.margins }).contentBox(state.width, state.height);
     const fit = {};
     for (const [axis, size] of [
         ['x', box.width],
@@ -72,6 +73,11 @@ export function buildScatterDefaults() {
         markers: { marks: buildMarks, valueLabels: buildValueLabels },
         hover: {
             strategy: 'punctual',
+            // A crosshair through the hovered point, and its label - the point is a dot already.
+            marker: () => ({
+                back: [HoverDefaults.rule('x'), HoverDefaults.rule('y')],
+                front: [HoverDefaults.text()]
+            }),
             label: (state) => {
                 const { x, y } = state.channels;
                 return (row) => `${x.accessor(row)}, ${y.accessor(row)}`;

package/dist/plots/correlation/scatter/markers.d.ts

@@ -1,4 +1,4 @@
-import type { ScatterPlotState, ScatterPlotCtx } from '../../../types/plots/correlation/scatter/state';
+import type { ScatterPlotState, ScatterPlotEnv } from '../../../types/plots/correlation/scatter/state';
 import type { TextMarkerConfig } from '../../../types/markers/common';
 import { ValueLabels } from '../../../layout/styles/ValueLabels';
 import type { AxisBasedMarkersConfig } from '../../../types/markers/common';
@@ -8,7 +8,7 @@ import type { AxisBasedMarkersConfig } from '../../../types/markers/common';
  * sits beside its point and flips to the other side where its text would
  * cross the plot's edge (`edgeAware`).
  */
-export declare function buildValueLabels<TData extends Record<string, unknown>>(labels: ValueLabels, state: ScatterPlotState<TData>, ctx: ScatterPlotCtx): TextMarkerConfig[];
+export declare function buildValueLabels<TData extends Record<string, unknown>>(labels: ValueLabels, state: ScatterPlotState<TData>): TextMarkerConfig[];
 /**
  * ScatterPlot's "markers" phase: one `'dot'` marker per visual segment of the
  * rows the "transforms" phase left, in their own order, so a reordering
@@ -16,4 +16,4 @@ export declare function buildValueLabels<TData extends Record<string, unknown>>(
  * "statistics" phase already put in `state.markers` - and its value labels on
  * top of everything.
  */
-export declare function buildMarks<TData extends Record<string, unknown>>(state: ScatterPlotState<TData>, ctx: ScatterPlotCtx): AxisBasedMarkersConfig[];
+export declare function buildMarks<TData extends Record<string, unknown>>(state: ScatterPlotState<TData>, env: ScatterPlotEnv): AxisBasedMarkersConfig[];

package/dist/plots/correlation/scatter/markers.js

@@ -7,7 +7,7 @@ import { ValueLabels } from '../../../layout/styles/ValueLabels';
  * sits beside its point and flips to the other side where its text would
  * cross the plot's edge (`edgeAware`).
  */
-export function buildValueLabels(labels, state, ctx) {
+export function buildValueLabels(labels, state) {
     const { processedData } = state;
     if (!processedData?.data.length)
         return [];
@@ -21,10 +21,10 @@ export function buildValueLabels(labels, state, ctx) {
             data: processedData.data,
             x: position.x,
             y: position.y,
-            text: (d) => format(Number(valueOf(d)), nameOf(d), d),
+            text: (d) => format(Number(valueOf(d)), d, nameOf(d)),
             styles: {
                 ...font,
-                fill: font?.fill ?? ctx.cfg.axis.color,
+                fill: font?.fill ?? 'currentColor',
                 fontSize: font?.fontSize ?? 11,
                 fontWeight: font?.fontWeight ?? 500,
                 dx: font?.dx ?? 8,
@@ -43,9 +43,9 @@ export function buildValueLabels(labels, state, ctx) {
  * "statistics" phase already put in `state.markers` - and its value labels on
  * top of everything.
  */
-export function buildMarks(state, ctx) {
+export function buildMarks(state, env) {
     const { channels, colorForSeries, scales, flat } = state;
-    const { cfg, interaction } = ctx;
+    const { cfg, interaction } = env;
     const r = channels.r;
     const rFn = r === undefined || typeof r === 'number' ? r : r.accessor;
     const opacityFn = channels.opacity?.accessor;
@@ -98,6 +98,7 @@ export function buildMarks(state, ctx) {
             markers.push({
                 type: 'dot',
                 data: seg.data,
+                hover: 'style',
                 // Forwarded raw (a field key or function, whatever `series.x`/`.y`
                 // is) rather than pre-resolved into a closure - `DotMarker.svelte`
                 // and svelteplot's own `resolve()` already handle a field-key

package/dist/plots/distribution/box/BoxSummaries.d.ts

@@ -1,19 +1,28 @@
-import type { HoverPosition } from '../../../types/phases';
+import type { HoverPosition, ProcessedRow } from '../../../types/phases';
 import type { BoxPlotState, BoxSummaryRow } from '../../../types/plots/distribution/box/state';
+import type { BoxSummary } from '../../../types/plots/distribution/box/props';
 /**
- * The boxes a box plot draws, one summary row per series, category and facet
- * panel - the same quartiles and whiskers svelteplot's `BoxX`/`BoxY` compute,
- * so its hover and tooltip read a box rather than every value inside it.
+ * The boxes a box plot draws, one per series, category and facet panel - the same quartiles and whiskers
+ * svelteplot's `BoxX`/`BoxY` compute, worked out once as each value's context ({@link context}), so its hover and
+ * tooltip read a box rather than every value inside it ({@link of}).
  */
 export declare class BoxSummaries {
-    /** One summary per box, in the order the processed rows first reach it. */
+    #private;
+    /**
+     * Each value's context: the summary of the box it is in - its category, quartiles, whisker ends (the farthest
+     * values within 1.5 IQR of the box), how many values it has and the ones past the whiskers.
+     */
+    static context<TData extends Record<string, unknown>>(state: BoxPlotState<TData>): (row: ProcessedRow) => BoxSummary | undefined;
+    /**
+     * One summary row per box, in the order the processed rows first reach it, read off its first value's context.
+     * Its own context is the box's, with the median for its value, and where it sits for `x` and `y`.
+     */
     static of<TData extends Record<string, unknown>>(state: BoxPlotState<TData>): BoxSummaryRow[];
     /** Where a box's summary sits for hover: at its category, level with its median. */
     static position<TData extends Record<string, unknown>>(state: BoxPlotState<TData>): HoverPosition;
     /**
-     * How a hovered box reads by default: its series, when the plot groups its
-     * rows; its category; then its five numbers, highest first, and how many
-     * values fall past the whiskers.
+     * How a hovered box reads by default, from its context: its series, when the plot groups its rows; its
+     * category; then its five numbers, highest first, and how many values fall past the whiskers.
      */
     static format<TData extends Record<string, unknown>>(state: BoxPlotState<TData>): (row: BoxSummaryRow) => string;
 }

package/dist/plots/distribution/box/BoxSummaries.js

@@ -4,28 +4,37 @@ import { SERIES_ID_KEY, SERIES_KEY } from '../../../phases/transforms/Transforms
 import { PANEL_KEY } from '../../../phases/facet/FacetPanels';
 import { PlotAxes } from '../../../phases/data/PlotAxes';
 import { TooltipState } from '../../../layout/tooltip/TooltipState.svelte';
+import { RowContext } from '../../../phases/context/RowContext';
 import { isGapValue } from '../../utils/gaps';
 /** The whiskers reach this many interquartile ranges past the box, as svelteplot draws them. */
 const WHISKER_IQR = 1.5;
 /** A summary value as a tooltip shows it: at most two decimals. */
 const round = (value) => String(Math.round(value * 100) / 100);
 /**
- * The boxes a box plot draws, one summary row per series, category and facet
- * panel - the same quartiles and whiskers svelteplot's `BoxX`/`BoxY` compute,
- * so its hover and tooltip read a box rather than every value inside it.
+ * The boxes a box plot draws, one per series, category and facet panel - the same quartiles and whiskers
+ * svelteplot's `BoxX`/`BoxY` compute, worked out once as each value's context ({@link context}), so its hover and
+ * tooltip read a box rather than every value inside it ({@link of}).
  */
 export class BoxSummaries {
-    /** One summary per box, in the order the processed rows first reach it. */
-    static of(state) {
+    /** Which box a processed row is in: its series, panel and category. */
+    static #keyOf(state) {
+        const categoryAxis = PlotAxes.categoryOf(state);
+        const categoryOf = ProcessedPositions.of(state.processedData, PlotAxes.valueOf(state))[categoryAxis];
+        return (row) => JSON.stringify([row[SERIES_ID_KEY], row[PANEL_KEY] ?? null, String(categoryOf(row))]);
+    }
+    /**
+     * Each value's context: the summary of the box it is in - its category, quartiles, whisker ends (the farthest
+     * values within 1.5 IQR of the box), how many values it has and the ones past the whiskers.
+     */
+    static context(state) {
         const processed = state.processedData;
         if (!processed?.data.length)
-            return [];
+            return () => undefined;
         const valueAxis = PlotAxes.valueOf(state);
-        const categoryAxis = PlotAxes.categoryOf(state);
         const position = ProcessedPositions.of(processed, valueAxis);
         const valueOf = position[valueAxis];
-        const categoryOf = position[categoryAxis];
-        const categoryField = processed.channels[categoryAxis];
+        const categoryOf = position[PlotAxes.categoryOf(state)];
+        const keyOf = BoxSummaries.#keyOf(state);
         const boxes = new Map();
         for (const row of processed.data) {
             const value = valueOf(row);
@@ -34,39 +43,80 @@ export class BoxSummaries {
             const n = Number(value);
             if (!Number.isFinite(n))
                 continue;
-            const key = JSON.stringify([
-                row[SERIES_ID_KEY],
-                row[PANEL_KEY] ?? null,
-                String(categoryOf(row))
-            ]);
+            const key = keyOf(row);
             const box = boxes.get(key);
             if (box)
                 box.values.push(n);
             else
-                boxes.set(key, { first: row, values: [n] });
+                boxes.set(key, { category: categoryOf(row), values: [n] });
+        }
+        const summaries = new Map([...boxes].map(([key, { category, values }]) => [
+            key,
+            BoxSummaries.#summarize(category, values)
+        ]));
+        return (row) => summaries.get(keyOf(row));
+    }
+    static #summarize(category, values) {
+        const sorted = values.sort((a, b) => a - b);
+        const p25 = quantile(sorted, 0.25);
+        const median = quantile(sorted, 0.5);
+        const p75 = quantile(sorted, 0.75);
+        const reach = (p75 - p25) * WHISKER_IQR;
+        const inside = sorted.filter((v) => v >= p25 - reach && v <= p75 + reach);
+        return {
+            category,
+            min: inside[0] ?? p25,
+            p25,
+            median,
+            p75,
+            max: inside.at(-1) ?? p75,
+            count: sorted.length,
+            outliers: sorted.filter((v) => v < p25 - reach || v > p75 + reach)
+        };
+    }
+    /**
+     * One summary row per box, in the order the processed rows first reach it, read off its first value's context.
+     * Its own context is the box's, with the median for its value, and where it sits for `x` and `y`.
+     */
+    static of(state) {
+        const processed = state.processedData;
+        if (!processed?.data.length)
+            return [];
+        const valueAxis = PlotAxes.valueOf(state);
+        const categoryAxis = PlotAxes.categoryOf(state);
+        const categoryField = processed.channels[categoryAxis];
+        const keyOf = BoxSummaries.#keyOf(state);
+        const firsts = new Map();
+        for (const row of processed.data) {
+            const key = keyOf(row);
+            if (!firsts.has(key) && RowContext.of(row).median !== undefined)
+                firsts.set(key, row);
         }
-        return [...boxes.values()].map(({ first, values }) => {
-            const sorted = values.sort((a, b) => a - b);
-            const p25 = quantile(sorted, 0.25);
-            const median = quantile(sorted, 0.5);
-            const p75 = quantile(sorted, 0.75);
-            const reach = (p75 - p25) * WHISKER_IQR;
-            const inside = sorted.filter((v) => v >= p25 - reach && v <= p75 + reach);
-            const category = categoryOf(first);
-            return {
+        return [...firsts.values()].map((first) => {
+            // The box's context, not its first value's row.
+            const context = { ...RowContext.of(first), row: undefined };
+            const { category, min, p25, median, p75, max, count, outliers } = context;
+            const summary = {
                 ...(typeof categoryField === 'string' ? { [categoryField]: category } : {}),
                 [SERIES_KEY]: first[SERIES_KEY],
                 [SERIES_ID_KEY]: first[SERIES_ID_KEY],
                 ...(first[PANEL_KEY] !== undefined ? { [PANEL_KEY]: first[PANEL_KEY] } : {}),
                 category,
-                min: inside[0] ?? p25,
+                min,
                 p25,
                 median,
                 p75,
-                max: inside.at(-1) ?? p75,
-                count: sorted.length,
-                outliers: sorted.filter((v) => v < p25 - reach || v > p75 + reach)
+                max,
+                count,
+                outliers
             };
+            RowContext.tag(summary, {
+                ...context,
+                [valueAxis]: median,
+                [categoryAxis]: category,
+                value: median
+            });
+            return summary;
         });
     }
     /** Where a box's summary sits for hover: at its category, level with its median. */
@@ -79,22 +129,22 @@ export class BoxSummaries {
         return at;
     }
     /**
-     * How a hovered box reads by default: its series, when the plot groups its
-     * rows; its category; then its five numbers, highest first, and how many
-     * values fall past the whiskers.
+     * How a hovered box reads by default, from its context: its series, when the plot groups its rows; its
+     * category; then its five numbers, highest first, and how many values fall past the whiskers.
      */
     static format(state) {
         const grouped = state.channels?.grouping !== undefined;
         return (row) => {
-            const lines = grouped ? [String(row[SERIES_KEY])] : [];
-            lines.push(TooltipState.value(row.category));
-            lines.push(`max: ${round(row.max)}`);
-            lines.push(`p75: ${round(row.p75)}`);
-            lines.push(`median: ${round(row.median)}`);
-            lines.push(`p25: ${round(row.p25)}`);
-            lines.push(`min: ${round(row.min)}`);
-            if (row.outliers.length)
-                lines.push(`outliers: ${row.outliers.length}`);
+            const box = RowContext.of(row);
+            const lines = grouped ? [String(box.series)] : [];
+            lines.push(TooltipState.value(box.category));
+            lines.push(`max: ${round(box.max)}`);
+            lines.push(`p75: ${round(box.p75)}`);
+            lines.push(`median: ${round(box.median)}`);
+            lines.push(`p25: ${round(box.p25)}`);
+            lines.push(`min: ${round(box.min)}`);
+            if (box.outliers.length)
+                lines.push(`outliers: ${box.outliers.length}`);
             return lines.join('\n');
         };
     }

package/dist/plots/distribution/box/defaults.d.ts

@@ -1,5 +1,5 @@
 import type { AxisPlotDefaults } from '../../../types/phases';
-import type { BoxPlotState, BoxPlotCtx } from '../../../types/plots/distribution/box/state';
+import type { BoxPlotState, BoxPlotEnv } from '../../../types/plots/distribution/box/state';
 /**
  * BoxPlot on the shared pipeline: one box per category of each series along
  * one category axis - `x`, or `y` for horizontal boxes, as the "data" phase
@@ -9,4 +9,4 @@ import type { BoxPlotState, BoxPlotCtx } from '../../../types/plots/distribution
  * hover along the category axis, over one summary per box rather than every
  * value inside it.
  */
-export declare function buildBoxDefaults<TData extends Record<string, unknown>>(): AxisPlotDefaults<BoxPlotState<TData>, BoxPlotCtx>;
+export declare function buildBoxDefaults<TData extends Record<string, unknown>>(): AxisPlotDefaults<BoxPlotState<TData>, BoxPlotEnv>;