@fundar/data-chart-telling 0.0.64 → 1.1.0

package/dist/plots/pyramid/markers.js

@@ -0,0 +1,156 @@
+import { resolveAccessor } from '../utils/accessors';
+import { SERIES_ID_KEY } from '../../phases/transforms/TransformsPhase';
+import { seriesIdOf } from '../../utils/grouping';
+import { PlotAxes } from '../../phases/data/PlotAxes';
+import { getConfiguration } from '../../configuration/config.svelte';
+import { isGapValue, resolveGapAreaStyle } from '../utils/gaps';
+const GAP_KINDS = ['start', 'middle', 'end'];
+function signFor(s, magnitude) {
+    return s.side === 'left' ? -magnitude : magnitude;
+}
+/**
+ * PyramidPlot's `styles.values` as one `'text'` marker per series, over the
+ * same processed rows its bars draw (gap rows never get a label), mirrored to
+ * its own side of the shared zero baseline. `anchor` places each label along
+ * its bar: past its end (`'outside'`/`'start'`), at the baseline (`'end'`),
+ * or centred (`'middle'`). On a vertical pyramid the sides run down and up.
+ */
+export function buildValueLabels(labels, state, ctx) {
+    const { processedData } = state;
+    if (!processedData)
+        return [];
+    const { font, anchor, format } = labels;
+    const categoryAxis = PlotAxes.categoryOf(state);
+    const valueAxis = PlotAxes.valueOf(state);
+    const isHorizontal = state.axes?.isHorizontal ?? true;
+    return (state.processedGroups ?? []).flatMap(({ series }) => {
+        const id = seriesIdOf(series);
+        const side = state.resolvedSeries.find((s) => seriesIdOf(s) === id).side;
+        const isLeft = side === 'left';
+        const getMagnitude = resolveAccessor(series[valueAxis]);
+        const magnitude = (d) => Math.abs(Number(getMagnitude(d)));
+        const signed = (d) => (isLeft ? -magnitude(d) : magnitude(d));
+        const data = processedData.data.filter((d) => d[SERIES_ID_KEY] === id && !isGapValue(getMagnitude(d)));
+        if (data.length === 0)
+            return [];
+        const outward = isLeft ? -1 : 1;
+        const at = anchor === 'middle' ? (d) => signed(d) / 2 : anchor === 'end' ? 0 : signed;
+        const shift = anchor === 'middle' ? 0 : outward * (anchor === 'end' ? 4 : 6);
+        // Away from the baseline: left/right on a horizontal pyramid, down/up on a vertical one.
+        const awayAnchor = isHorizontal
+            ? anchor === 'middle'
+                ? 'middle'
+                : isLeft
+                    ? 'end'
+                    : 'start'
+            : 'middle';
+        const awayLine = isHorizontal
+            ? 'middle'
+            : anchor === 'middle'
+                ? 'middle'
+                : isLeft
+                    ? 'top'
+                    : 'bottom';
+        return [
+            {
+                type: 'text',
+                data,
+                [valueAxis]: at,
+                [categoryAxis]: series[categoryAxis],
+                text: (d) => format(magnitude(d), series.name),
+                styles: {
+                    ...font,
+                    fill: font?.fill ?? ctx.cfg.axis.color,
+                    fontSize: font?.fontSize ?? 12,
+                    dx: font?.dx ?? (isHorizontal ? shift : 0),
+                    dy: font?.dy ?? (isHorizontal ? 0 : -shift),
+                    textAnchor: labels.textAnchor ?? awayAnchor,
+                    lineAnchor: font?.lineAnchor ?? awayLine
+                }
+            }
+        ];
+    });
+}
+/**
+ * PyramidPlot's "markers" phase: one `role: 'segment'` bar per visual
+ * segment, along the category axis the "data" phase read (horizontal bars for
+ * categories on y, signed magnitude on x; vertical ones the other way) and with
+ * no insets - prepended onto whatever the "statistics" phase already put in
+ * `state.markers`. Emits no `role: 'hitArea'` markers - PyramidPlot's hover
+ * matches nearest points rather than hit-testing category bands.
+ */
+export function buildMarks(state, ctx) {
+    const { groupedSeries, gapFillMaps } = state;
+    const gapDefaults = getConfiguration().pyramid.gap;
+    const categoryAxis = PlotAxes.categoryOf(state);
+    const valueAxis = PlotAxes.valueOf(state);
+    const isHorizontal = state.axes?.isHorizontal ?? true;
+    /** One bar's own channels: its category, and its span from the baseline to its signed value. */
+    const span = (category, to) => ({
+        isHorizontal,
+        [categoryAxis]: category,
+        [`${valueAxis}1`]: 0,
+        [`${valueAxis}2`]: to
+    });
+    // The real bars draw the rows the "transforms" phase left, read through its channels.
+    const processedGroups = new Map((state.processedGroups ?? []).map((g) => [seriesIdOf(g.series), g]));
+    const markers = [];
+    for (const group of groupedSeries) {
+        // Forwarded raw (a field key or function, whatever the series' category is)
+        // rather than pre-resolved into a closure - svelteplot's own
+        // `resolve()` already handles a field-key string per row, and only a
+        // literal string (not a function) lets its axis-title auto-inference
+        // see the field name. `keyof TData` is always a real string key in
+        // practice, just not provably so to TypeScript here.
+        const category = group.series[categoryAxis];
+        const defaultColor = state.colorForSeries(group.series.name);
+        const disabledFill = ctx.interaction?.fillFor(group.series.name);
+        const processed = processedGroups.get(seriesIdOf(group.series));
+        const processedCategory = processed?.series[categoryAxis];
+        const getMagnitude = resolveAccessor((processed?.series[valueAxis] ?? group.series[valueAxis]));
+        const signed = (d) => signFor(group.series, Math.abs(Number(getMagnitude(d))));
+        for (const seg of processed?.visualSegments ?? []) {
+            const realData = seg.data.filter((d) => !isGapValue(getMagnitude(d)));
+            if (realData.length === 0)
+                continue;
+            markers.push({
+                type: 'bar',
+                role: 'segment',
+                data: realData,
+                ...span(processedCategory, signed),
+                styles: {
+                    fill: disabledFill?.fill ?? seg.styles.fill ?? defaultColor,
+                    fillOpacity: disabledFill?.fillOpacity ?? seg.styles.fillOpacity ?? 1
+                }
+            });
+        }
+        const fillMap = gapFillMaps.get(seriesIdOf(group.series)) ??
+            new Map();
+        for (const kind of GAP_KINDS) {
+            const filledRows = group.series.data.filter((d) => fillMap.get(d)?.kind === kind);
+            if (filledRows.length === 0)
+                continue;
+            const base = resolveGapAreaStyle(fillMap.get(filledRows[0]).style, defaultColor, gapDefaults);
+            // svelteplot shallow-clones each row before invoking a mark's own
+            // geometry accessors, so a `fillMap.get(d)` lookup inside `x2` would
+            // see a clone, not the original key - tag the resolved value onto the
+            // row as a plain field instead, which survives that clone.
+            const taggedData = filledRows.map((d) => ({
+                ...d,
+                __gapValue: signFor(group.series, Math.abs(fillMap.get(d).value))
+            }));
+            markers.push({
+                type: 'bar',
+                role: 'segment',
+                data: taggedData,
+                ...span(category, (d) => d.__gapValue),
+                styles: {
+                    ...base,
+                    fill: disabledFill?.fill ?? base.fill,
+                    fillOpacity: disabledFill?.fillOpacity ?? base.fillOpacity
+                }
+            });
+        }
+    }
+    return markers;
+}

package/dist/plots/scatter/Plot.svelte

@@ -1,295 +1,41 @@
 <script lang="ts" generics="TData extends Record<string, unknown>">
-	import { resolveAccessor } from '../utils/accessors';
-	import { getConfiguration } from '../../configuration/config.svelte';
-	import { paletteColor } from '../../utils/color';
-	import { buildSeries } from '../../utils/grouping';
-	import { getLegendInteraction } from '../../layout/legend/interaction.svelte';
-	import {
-		disabledDotsOverride,
-		resolveEffectiveDisabledStyle,
-		omitDisabledSeries,
-		buildSeriesColorIndex
-	} from '../utils/legendDisabled';
-	import { buildScatterMarkers } from './buildScatterMarkers';
-	import { resolveRadiusPaddedDomain } from './resolveRadiusPaddedDomain';
-	import {
-		createLabelMarginTracker,
-		halfDimensionOverflowCap
-	} from '../utils/labelOverflow.svelte';
-	import BasePlotLayout from '../../layout/plot/BasePlotLayout.svelte';
-	import ValueLabels from './ValueLabels.svelte';
-	import {
-		hasHoverMarker,
-		resolveHoverStrategy,
-		resolveHoverSync
-	} from '../../layout/tooltip/utils';
-	import {
-		buildGroupedSeries,
-		validateSegments,
-		buildScopedMarkerGroups
-	} from '../utils/segments';
-	import { numericMargin } from '../../layout/plot/margins';
-	import type { BasePlotProps } from '../../types/plots/props';
-	import type { AxisValue, AxisBasedScalesConfig } from '../../types/layout/scales';
-	import type { Series } from '../../types/plots/data/common';
-	import type { ScatterDataProps } from '../../types/plots/data/scatter';
-	import type { AxisBasedStylesConfig } from '../../types/layout/styles';
-	import type { ScatterSegmentStyle } from '../../types/plots/segments/common';
-	import type { AxisBasedMarkersConfig } from '../../types/markers/common';
-	import type { LegendDisabledStyle } from '../../types/layout/legend';
+	import Plot from '../../layout/plot/Plot.svelte';
+	import { buildScatterDefaults } from './defaults';
+	import type { ScatterPlotProps, ScatterPlotCoreProps } from '../../types/plots/scatter/props';
 
 	/**
-	 * A point cloud on continuous x/y axes. Accepts either a pre-built `series`
-	 * array or flat `data/x/y/z` props — mirrors the line/bar plot contract so
-	 * the chart-level container/timeline/facet/legend wrap it unchanged. `r`
-	 * gives every dot a per-row radius (bubble sizing), independent of `z`
-	 * grouping/coloring — see {@link ScatterDataProps} for its auto-scaling
-	 * behavior.
+	 * A point cloud on continuous x/y axes; `r` sizes each dot. Draws from pre-built `series` or flat `data` rows.
+	 * Optional chrome (`title`, `subtitle`, `caption`, `header`, `footer`,
+	 * `legend`) frames it; `timeline` and `facet` slice its `data` rows.
 	 */
-	type Props = BasePlotProps<
-		ScatterDataProps<TData>,
-		TData,
-		AxisBasedStylesConfig,
-		ScatterSegmentStyle,
-		AxisBasedMarkersConfig,
-		AxisBasedScalesConfig<TData>
-	>;
-
 	let {
-		width,
-		height,
-		series,
-		data,
-		x,
-		y,
-		z,
-		r,
-		styles = {},
-		segments = {},
-		markers = [],
-		scales = {},
-		margins,
-		tooltip = undefined
-	}: Props = $props();
-
-	const cfg = $derived(getConfiguration());
-	const legendInteraction = $derived(getLegendInteraction());
-	// Unfiltered series list, for stable per-name color indexing.
-	const fullSeries = $derived(series ?? buildSeries(data!, x!, y!, z));
-	const colorIndex = $derived(buildSeriesColorIndex(fullSeries));
-	function colorForSeries(name: string): string {
-		return paletteColor(colorIndex.get(name) ?? 0, cfg.palette);
-	}
-	// Drops series toggled off with `disabled: { mode: 'omit' }`.
-	const resolvedSeries = $derived(omitDisabledSeries(fullSeries, legendInteraction));
-
-	$effect(() => {
-		validateSegments(segments);
-	});
-
-	// A scatter point cloud is discrete (no connecting line), so adjacent
-	// segments never need a bridge point at their boundary — see
-	// buildGroupedSeries's own doc.
-	const groupedSeries = $derived(
-		buildGroupedSeries<Series<TData>, ScatterSegmentStyle>(resolvedSeries, segments, false)
-	);
-
-	const showVals = $derived(styles.values?.show ?? false);
-	const formatValue = $derived(styles.values?.format ?? ((v: number) => `${v}`));
-	const hoverIsolate = $derived(styles.values?.hoverIsolate ?? false);
-
-	// A value label hovered while `styles.values.hoverIsolate` is on dims
-	// every other series exactly like a legend toggle would — local to this
-	// one `<Plot>` instance (not the shared HoverStore) so the gesture can't
-	// leak into unrelated tooltip/crosshair behavior.
-	let hoverIsolatedSeries = $state<string | null>(null);
-
-	function effectiveDisabledFor(name: string): LegendDisabledStyle | undefined {
-		return resolveEffectiveDisabledStyle(
-			name,
-			legendInteraction,
-			cfg.legend.disabledOpacity,
-			hoverIsolate,
-			hoverIsolatedSeries
-		);
-	}
-
-	const xAcc = $derived(resolveAccessor(resolvedSeries[0]?.x ?? ((d: TData) => d)));
-	const yAcc = $derived(resolveAccessor(resolvedSeries[0]?.y ?? ((d: TData) => d)));
-	const flat = $derived(resolvedSeries.flatMap((s) => s.data));
-
-	// A legend-disabled series is dimmed on the mark itself, but never surfaces
-	// in hover/tooltip — its points are simply absent from the candidate list.
-	const hoverPoints = $derived(
-		resolvedSeries.flatMap((s) => {
-			if (legendInteraction?.disabledSeries.has(s.name)) return [];
-			const sx = resolveAccessor(s.x);
-			const sy = resolveAccessor(s.y);
-			return s.data.map((d) => ({
-				x: sx(d) as AxisValue,
-				y: Number(sy(d)),
-				row: d,
-				label: `${sx(d)}, ${sy(d)}`,
-				series: s.name,
-				color: colorForSeries(s.name)
-			}));
-		})
-	);
-
-	// Points scatter freely across x/y rather than sharing discrete x values —
-	// 'punctual' matches the single nearest point, not a whole column.
-	const hover = $derived({
-		active: tooltip != null || hasHoverMarker(markers),
-		points: hoverPoints,
-		label: (row: TData) => `${xAcc(row)}, ${yAcc(row)}`,
-		strategy: resolveHoverStrategy(tooltip?.strategy, markers, 'punctual'),
-		sync: resolveHoverSync(tooltip?.sync, markers),
-		tooltip
-	});
-
-	const scatterMarkers = $derived(
-		buildScatterMarkers({
-			groupedSeries,
-			r,
-			colorFor: colorForSeries,
-			disabledDotsFor: (name) => disabledDotsOverride(effectiveDisabledFor(name))
-		})
-	);
-
-	const scopedGroups = $derived(
-		buildScopedMarkerGroups<TData, Series<TData>, ScatterSegmentStyle>({
-			groupedSeries,
-			segments,
-			colorFor: (series) => colorForSeries(series.name),
-			segmentColorFor: (style, defaultColor) => style?.dotFill ?? defaultColor
-		})
-	);
-
-	// svelteplot treats a per-row `r` (a field key or accessor function) as a
-	// proper channel bound to its own auto sqrt scale — the raw values it
-	// returns (e.g. a population in the millions) are data, not pixels, and
-	// get compressed into a modest, roughly data-magnitude-independent pixel
-	// range regardless of how large the raw numbers are. A literal constant
-	// `r` (or the theme/segment `dotRadius` fallback), by contrast, *is*
-	// already a literal pixel value. `AUTO_SCALED_RADIUS_ESTIMATE` stands in
-	// for whatever svelteplot's own r-scale ends up rendering at, since the
-	// real value isn't knowable until that scale is built.
-	const AUTO_SCALED_RADIUS_ESTIMATE = 20;
-
-	// The largest radius any dot actually renders at — pads the scale domain
-	// below so a point at the data extreme doesn't get its own circle clipped
-	// by the frame. svelteplot's own 'auto' margin only measures axis chrome,
-	// never mark geometry.
-	const maxDotRadius = $derived.by(() => {
-		let max = 0;
-		for (const marker of scatterMarkers) {
-			const rConst = typeof marker.r === 'number' ? marker.r : undefined;
-			const isChannel = typeof marker.r === 'function';
-			const fallbackR = marker.style?.dotRadius ?? cfg.scatter.dotRadius;
-			if (rConst !== undefined) {
-				max = Math.max(max, rConst);
-			} else if (isChannel) {
-				max = Math.max(max, AUTO_SCALED_RADIUS_ESTIMATE);
-			} else {
-				max = Math.max(max, fallbackR);
-			}
-		}
-		return max;
-	});
-
-	// Best-effort pre-render estimate of the plot's own inner content size —
-	// the real size isn't known until svelteplot measures its own axis
-	// chrome, so this is only used to convert a pixel radius into a domain
-	// padding amount, not as the actual rendered margin.
-	const estimatedMargins = $derived({ ...cfg.margins, ...margins });
-	const estimatedInnerWidth = $derived(
-		width -
-			numericMargin('left', estimatedMargins.left) -
-			numericMargin('right', estimatedMargins.right)
-	);
-	const estimatedInnerHeight = $derived(
-		height -
-			numericMargin('top', estimatedMargins.top) -
-			numericMargin('bottom', estimatedMargins.bottom)
-	);
-
-	const resolvedScales = $derived.by((): AxisBasedScalesConfig<TData> => {
-		if (maxDotRadius <= 0) return scales;
-		const xValues = flat.map((d) => Number(xAcc(d)));
-		const yValues = flat.map((d) => Number(yAcc(d)));
-		const paddedX = scales.x?.domain
-			? undefined
-			: resolveRadiusPaddedDomain(xValues, maxDotRadius, estimatedInnerWidth);
-		const paddedY = scales.y?.domain
-			? undefined
-			: resolveRadiusPaddedDomain(yValues, maxDotRadius, estimatedInnerHeight);
-		if (!paddedX && !paddedY) return scales;
-		return {
-			...scales,
-			x: paddedX ? { ...scales.x, domain: paddedX } : scales.x,
-			y: paddedY ? { ...scales.y, domain: paddedY } : scales.y
-		};
-	});
-
-	// See `halfDimensionOverflowCap`'s own doc comment — relevant here mainly
-	// for a corner point with no room in any direction even after
-	// `resolveEdgeAwareAnchor`'s own flip.
-	const maxLabelOverflow = $derived(halfDimensionOverflowCap(width, height));
-
-	// A scatter point's value label can grow past the plot's own content box
-	// (e.g. a point volcado toward a corner, past what its own edge-aware flip
-	// can fit) — reserving real space there is what each label's own overflow
-	// measurement feeds into here, via a tracker local to this one `<Plot>`
-	// instance. See `labelOverflow.svelte.ts`. Resets on `resolvedSeries` so
-	// overflow from an earlier, differently-shaped frame doesn't linger once
-	// that frame is gone.
-	const labelMargin = createLabelMarginTracker(
-		() => margins,
-		() => resolvedSeries,
-		undefined,
-		() => maxLabelOverflow
-	);
+		title,
+		subtitle,
+		caption,
+		header,
+		footer,
+		legend,
+		order,
+		timeline,
+		facet,
+		tooltip,
+		margins = $bindable(),
+		...core
+	}: ScatterPlotProps<TData> = $props();
 </script>
 
-<BasePlotLayout
-	{width}
-	{height}
-	{styles}
-	data={flat}
-	getX={xAcc}
-	getY={(d) => Number(yAcc(d))}
-	{hover}
-	scales={resolvedScales}
-	{...labelMargin.plotProps}
-	markers={[...scatterMarkers, ...markers]}
-	seriesData={resolvedSeries}
-	{scopedGroups}
->
-	{#snippet children({ numericMargins })}
-		{#if showVals}
-			{#each groupedSeries as group (group.series.name)}
-				<ValueLabels
-					{group}
-					{formatValue}
-					values={styles.values}
-					defaultColor={cfg.axis.color}
-					disabled={effectiveDisabledFor(group.series.name)}
-					{width}
-					{height}
-					{numericMargins}
-					onHoverSeries={hoverIsolate
-						? () => {
-								hoverIsolatedSeries = group.series.name;
-							}
-						: undefined}
-					onHoverEnd={hoverIsolate
-						? () => {
-								hoverIsolatedSeries = null;
-							}
-						: undefined}
-					onOverflow={labelMargin.report}
-				/>
-			{/each}
-		{/if}
-	{/snippet}
-</BasePlotLayout>
+<Plot
+	core={core as ScatterPlotCoreProps<TData>}
+	defaults={buildScatterDefaults}
+	bind:margins
+	{title}
+	{subtitle}
+	{caption}
+	{header}
+	{footer}
+	{legend}
+	{order}
+	{timeline}
+	{facet}
+	{tooltip}
+/>

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

@@ -1,12 +1,9 @@
-import type { BasePlotProps } from '../../types/plots/props';
-import type { AxisBasedScalesConfig } from '../../types/layout/scales';
-import type { ScatterDataProps } from '../../types/plots/data/scatter';
-import type { AxisBasedStylesConfig } from '../../types/layout/styles';
-import type { AxisBasedMarkersConfig } from '../../types/markers/common';
+import Plot from '../../layout/plot/Plot.svelte';
+import type { ScatterPlotProps } from '../../types/plots/scatter/props';
 declare function $$render<TData extends Record<string, unknown>>(): {
-    props: BasePlotProps<ScatterDataProps<TData>, TData, AxisBasedStylesConfig, import("../..").DotStyle, AxisBasedMarkersConfig, AxisBasedScalesConfig<TData>>;
+    props: ScatterPlotProps<TData>;
     exports: {};
-    bindings: "";
+    bindings: "margins";
     slots: {};
     events: {};
 };
@@ -14,7 +11,7 @@ declare class __sveltets_Render<TData extends Record<string, unknown>> {
     props(): ReturnType<typeof $$render<TData>>['props'];
     events(): ReturnType<typeof $$render<TData>>['events'];
     slots(): ReturnType<typeof $$render<TData>>['slots'];
-    bindings(): "";
+    bindings(): "margins";
     exports(): {};
 }
 interface $$IsomorphicComponent {

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

@@ -0,0 +1,4 @@
+import type { AxisPlotDefaults } from '../../types/phases';
+import type { ScatterPlotState, ScatterPlotCtx } from '../../types/plots/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>;

package/dist/plots/scatter/defaults.js

@@ -0,0 +1,80 @@
+import { ProcessedPositions } from '../../phases/transforms/ProcessedPositions';
+import { buildMarks, buildValueLabels } 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). */
+const AUTO_SCALED_RADIUS_ESTIMATE = 20;
+/**
+ * `values`' extent widened by `radiusPx` of data on each side, over a plot
+ * `sizePx` wide, so the largest dot doesn't clip the frame. All-equal values
+ * widen by a unit instead.
+ */
+function paddedDomain(values, radiusPx, sizePx) {
+    const finite = values.filter((v) => Number.isFinite(v));
+    if (finite.length === 0)
+        return undefined;
+    const min = Math.min(...finite);
+    const max = Math.max(...finite);
+    if (min === max)
+        return [min - 1, max + 1];
+    const pad = sizePx > 0 ? (radiusPx * (max - min)) / sizePx : 0;
+    return [min - pad, max + pad];
+}
+/**
+ * The domains a scatter fits to its own dots: each unpinned axis padded by
+ * 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) {
+    const { scales, channels, groupedSeries } = state;
+    const processed = state.processedData;
+    const position = ProcessedPositions.of(processed);
+    const extra = {
+        x: MarkerAxisValues.of(state.markers ?? [], 'x'),
+        y: MarkerAxisValues.of(state.markers ?? [], 'y')
+    };
+    // The largest radius a dot renders at, from the `r` channel and segment styles.
+    const r = channels.r;
+    const radius = typeof r === 'number'
+        ? r
+        : r !== undefined
+            ? AUTO_SCALED_RADIUS_ESTIMATE
+            : Math.max(0, ...groupedSeries.flatMap((group) => group.visualSegments.map((seg) => seg.styles.dotRadius ?? ctx.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 fit = {};
+    for (const [axis, size] of [
+        ['x', box.width],
+        ['y', box.height]
+    ]) {
+        if (scales[axis]?.domain)
+            continue;
+        const values = [...processed.data.map((d) => Number(position[axis](d))), ...extra[axis]];
+        const domain = paddedDomain(values, radius, size);
+        if (domain)
+            fit[axis] = { domain };
+    }
+    return fit;
+}
+/** 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 function buildScatterDefaults() {
+    return {
+        data: {
+            segments: {
+                color: (style) => style?.dotFill,
+                connect: false
+            }
+        },
+        transforms: { groups: 'runs' },
+        scales: { fit: fitDomains },
+        markers: { marks: buildMarks, valueLabels: buildValueLabels },
+        hover: {
+            strategy: 'punctual',
+            label: (state) => {
+                const { x, y } = state.channels;
+                return (row) => `${x.accessor(row)}, ${y.accessor(row)}`;
+            }
+        }
+    };
+}

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

@@ -0,0 +1,19 @@
+import type { ScatterPlotState, ScatterPlotCtx } from '../../types/plots/scatter/state';
+import type { TextMarkerConfig } from '../../types/markers/common';
+import { ValueLabels } from '../../layout/styles/ValueLabels';
+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>, ctx: ScatterPlotCtx): 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
+ * transform decides which dots paint on top - prepended onto whatever the
+ * "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[];