@fundar/data-chart-telling 1.17.0 → 1.19.0

package/dist/phases/transforms/TransformsPhase.js

@@ -1,3 +1,4 @@
+import { ValueLabels } from '../../layout/styles/ValueLabels';
 import { Transforms } from './Transforms';
 import { ValueSelection } from './ValueSelection';
 import { ProcessedPositions } from './ProcessedPositions';
@@ -37,7 +38,7 @@ export class TransformsPhase {
         this.#options = options;
         this.#connect = connect;
     }
-    run = (state, ctx) => {
+    run = (state, env) => {
         const options = this.#options;
         const visible = (state.resolvedSeries ?? []);
         // An omitted part of a whole is laid out with the rest, so they keep their places; it is dropped after.
@@ -66,7 +67,7 @@ export class TransformsPhase {
             shared[valueAxis] = (row) => row[GAP_VALUE] ?? read(row);
         }
         const transforms = options.transforms
-            ? options.transforms(state, ctx)
+            ? options.transforms(state, env)
             : (state.transforms ?? []);
         const rescaled = TransformsPhase.#rescaled(state, transforms, shared, valueAxis);
         if (rescaled)
@@ -129,17 +130,18 @@ export class TransformsPhase {
     #labelled(state) {
         const options = this.#options.labels;
         const values = state.values;
-        if (!options || !(values?.show ?? options.show))
+        if (!options || !ValueLabels.shows(values, options.show))
             return {};
         const processed = state.processedData;
-        const valueAxis = PlotAxes.valueOf(state);
+        const measure = options.measure?.(state);
+        const valueAxis = measure ? 'y' : PlotAxes.valueOf(state);
         const select = values?.select ?? options.select;
         const selections = ValueSelection.transforms(select, values?.series, valueAxis);
         const position = ProcessedPositions.of(processed, valueAxis);
         const skip = options.skip?.(state);
         const channels = {
             x: position.x,
-            y: position.y,
+            y: measure ?? position.y,
             group: options.group === 'category'
                 ? position[PlotAxes.categoryOf(state)]
                 : SERIES_ID_KEY

package/dist/plots/correlation/heatmap/Plot.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" generics="TData extends Record<string, unknown>">
-	import Plot from '../../../layout/plot/Plot.svelte';
+	import AbstractPlot from '../../../layout/plot/AbstractPlot.svelte';
 	import { buildHeatmapDefaults } from './defaults';
 	import type {
 		HeatmapPlotProps,
@@ -44,7 +44,7 @@
 	});
 </script>
 
-<Plot
+<AbstractPlot
 	core={core as HeatmapPlotCoreProps<TData>}
 	defaults={buildHeatmapDefaults}
 	bind:margins

package/dist/plots/correlation/heatmap/Plot.svelte.d.ts

@@ -1,4 +1,3 @@
-import Plot from '../../../layout/plot/Plot.svelte';
 import type { HeatmapPlotProps } from '../../../types/plots/correlation/heatmap/props';
 declare function $$render<TData extends Record<string, unknown>>(): {
     props: HeatmapPlotProps<TData>;

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 } 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: {
@@ -75,14 +85,32 @@ export function buildHeatmapDefaults() {
             defaults: () => ({ x: { labelAnchor: 'right' } }),
             extend: extendWithColorScales
         },
-        styles: { values: { show: true } },
+        transforms: {
+            // A cell's value is its color: `'min'` and `'max'` compare that.
+            labels: {
+                show: true,
+                measure: (state) => state.channels?.color.accessor
+            }
+        },
+        styles: {
+            values: {
+                show: true,
+                layout: 'box',
+                layouts: { path: { edge: 'top', side: 'inside' }, point: { anchor: 'top', side: 'above' } }
+            }
+        },
         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,9 +1,3 @@
-import type { HeatmapPlotState, HeatmapPlotCtx } from '../../../types/plots/correlation/heatmap/state';
+import type { HeatmapPlotState, HeatmapPlotEnv } from '../../../types/plots/correlation/heatmap/state';
 import type { AxisBasedMarkersConfig } from '../../../types/markers/common';
-/**
- * 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,15 +8,9 @@ function readChannel(channel) {
     return resolveAccessor(channel);
 }
 const OPACITY_STEPS = 32;
-/**
- * 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.
@@ -110,9 +104,12 @@ export function buildMarks(state, ctx) {
             borderRadius: group.styles.borderRadius,
             inset: 0.5
         },
-        // Each cell writes its own value, in the middle of it.
-        label: labels?.shapeLabel(ctx, (d) => labels.format(Number(getColor(d)), ''), {
-            fontWeight: 600
+        hover: 'style',
+        // Each cell writes its own value, in the middle of it by default.
+        label: labels?.label(env, (d) => labels.text(d), {
+            fill: 'currentColor',
+            fontWeight: 600,
+            labelled: state.labelled
         })
     }));
     return markers;

package/dist/plots/correlation/scatter/Plot.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" generics="TData extends Record<string, unknown>">
-	import Plot from '../../../layout/plot/Plot.svelte';
+	import AbstractPlot from '../../../layout/plot/AbstractPlot.svelte';
 	import { buildScatterDefaults } from './defaults';
 	import type {
 		ScatterPlotProps,
@@ -27,7 +27,7 @@
 	}: ScatterPlotProps<TData> = $props();
 </script>
 
-<Plot
+<AbstractPlot
 	core={core as ScatterPlotCoreProps<TData>}
 	defaults={buildScatterDefaults}
 	bind:margins

package/dist/plots/correlation/scatter/Plot.svelte.d.ts

@@ -1,4 +1,3 @@
-import Plot from '../../../layout/plot/Plot.svelte';
 import type { ScatterPlotProps } from '../../../types/plots/correlation/scatter/props';
 declare function $$render<TData extends Record<string, unknown>>(): {
     props: ScatterPlotProps<TData>;

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,5 +1,6 @@
 import { ProcessedPositions } from '../../../phases/transforms/ProcessedPositions';
-import { buildMarks, buildValueLabels } from './markers';
+import { HoverDefaults } from '../../../layout/hover/HoverDefaults';
+import { buildMarks } from './markers';
 import { Margins } from '../../../layout/margins/Margins';
 import { MarkerAxisValues } from '../../../phases/scales/MarkerAxisValues';
 /** Stand-in max render radius for a channel-bound `r` (svelteplot's own auto sqrt scale). */
@@ -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],
@@ -67,11 +68,22 @@ export function buildScatterDefaults() {
                 base: { flat: 'dot' }
             }
         },
-        transforms: { groups: 'runs' },
+        transforms: { groups: 'runs', labels: {} },
         scales: { fit: fitDomains },
-        markers: { marks: buildMarks, valueLabels: buildValueLabels },
+        styles: {
+            values: {
+                layout: 'point',
+                layouts: { point: { side: 'above', gap: 8 }, path: { side: 'outside' } }
+            }
+        },
+        markers: { marks: buildMarks },
         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,14 +1,5 @@
-import type { ScatterPlotState, ScatterPlotCtx } from '../../../types/plots/correlation/scatter/state';
-import type { TextMarkerConfig } from '../../../types/markers/common';
-import { ValueLabels } from '../../../layout/styles/ValueLabels';
+import type { ScatterPlotState, ScatterPlotEnv } from '../../../types/plots/correlation/scatter/state';
 import type { AxisBasedMarkersConfig } from '../../../types/markers/common';
-/**
- * ScatterPlot's `styles.values` as one `'text'` marker over the same
- * processed rows its dots draw, each labelled with its own `y` value. A label
- * 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>): 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 +7,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

@@ -1,38 +1,28 @@
-import { ProcessedPositions } from '../../../phases/transforms/ProcessedPositions';
 import { SERIES_KEY } from '../../../phases/transforms/TransformsPhase';
 import { ValueLabels } from '../../../layout/styles/ValueLabels';
 /**
- * ScatterPlot's `styles.values` as one `'text'` marker over the same
- * processed rows its dots draw, each labelled with its own `y` value. A label
- * sits beside its point and flips to the other side where its text would
- * cross the plot's edge (`edgeAware`).
+ * ScatterPlot's `styles.values` as labels of its dots: each labelled row with its own value, by default on a free
+ * spot around its point (`declutter: 'around'`) - a label with none is left out - or around its rim (`'path'`).
  */
-export function buildValueLabels(labels, state) {
-    const { processedData } = state;
-    if (!processedData?.data.length)
+function buildValueLabels(labels, state, env) {
+    const rows = new Set(state.labelled ?? []);
+    if (rows.size === 0)
         return [];
-    const { font, format } = labels;
-    const position = ProcessedPositions.of(processedData);
     const nameOf = (d) => String(d[SERIES_KEY]);
-    const valueOf = ValueLabels.valueOf(state);
+    const label = labels.label(env, (d) => labels.text(d), {
+        fill: 'currentColor',
+        seriesColor: (d) => state.colorForSeries?.(nameOf(d)),
+        fontSize: 11,
+        fontWeight: 500
+    });
+    if (labels.layout !== 'point')
+        return [label];
     return [
         {
-            type: 'text',
-            data: processedData.data,
-            x: position.x,
-            y: position.y,
-            text: (d) => format(Number(valueOf(d)), nameOf(d), d),
-            styles: {
-                ...font,
-                fill: font?.fill ?? 'currentColor',
-                fontSize: font?.fontSize ?? 11,
-                fontWeight: font?.fontWeight ?? 500,
-                dx: font?.dx ?? 8,
-                dy: font?.dy ?? 0,
-                textAnchor: labels.textAnchor ?? 'start',
-                lineAnchor: font?.lineAnchor ?? 'middle'
-            },
-            edgeAware: true
+            ...label,
+            select: (row) => rows.has(row),
+            // A label on its own dot stays there; one beside it moves around it to a free spot.
+            declutter: labels.side === 'on' ? undefined : 'around'
         }
     ];
 }
@@ -43,9 +33,9 @@ export function buildValueLabels(labels, state) {
  * "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 +88,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
@@ -125,5 +116,8 @@ export function buildMarks(state, ctx) {
             });
         }
     });
-    return markers;
+    const labels = state.valueLabels?.show
+        ? buildValueLabels(state.valueLabels, state, env)
+        : undefined;
+    return ValueLabels.onMarkers(markers, 'dot', labels);
 }

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

@@ -1,19 +1,33 @@
-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';
+import type { PointGeometryOf } from '../../../types/markers/labels/point';
 /**
- * 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 each part of a box its value labels can write sits: beside the box, at the height of its value. */
+    static partPlacements<TData extends Record<string, unknown>>(state: BoxPlotState<TData>): Record<string, Record<string, unknown>>;
+    /** Where a box's part label sits: at its category, level with the part's value, beside its band. */
+    static labelPoint<TData extends Record<string, unknown>>(state: BoxPlotState<TData>): (value: symbol) => PointGeometryOf;
     /** 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

@@ -1,31 +1,41 @@
+import { ValueLabels } from '../../../layout/styles/ValueLabels';
 import { ProcessedPositions } from '../../../phases/transforms/ProcessedPositions';
 import { quantile } from 'd3-array';
 import { SERIES_ID_KEY, SERIES_KEY } from '../../../phases/transforms/TransformsPhase';
 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,41 +44,90 @@ 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 each part of a box its value labels can write sits: beside the box, at the height of its value. */
+    static partPlacements(state) {
+        return ValueLabels.besideBand(state, ['min', 'p25', 'median', 'p75', 'max', 'outliers']);
+    }
+    /** Where a box's part label sits: at its category, level with the part's value, beside its band. */
+    static labelPoint(state) {
+        return ValueLabels.bandPoint(state, 'category');
+    }
     /** Where a box's summary sits for hover: at its category, level with its median. */
     static position(state) {
         const valueAxis = PlotAxes.valueOf(state);
@@ -79,22 +138,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');
         };
     }