@fundar/data-chart-telling 1.0.0 → 1.2.0

package/dist/index.d.ts

@@ -1,11 +1,21 @@
-export { default as AreaPlot } from './plots/area/Plot.svelte';
-export { default as BarPlot } from './plots/bar/Plot.svelte';
-export { default as HistogramPlot } from './plots/histogram/Plot.svelte';
-export { default as HeatmapPlot } from './plots/heatmap/Plot.svelte';
-export { default as LinePlot } from './plots/line/Plot.svelte';
-export { default as PyramidPlot } from './plots/pyramid/Plot.svelte';
-export { default as ScatterPlot } from './plots/scatter/Plot.svelte';
-export { default as GeoPlot } from './plots/geo/Plot.svelte';
+export { default as AreaPlot } from './plots/evolution/area/Plot.svelte';
+export { default as BarPlot } from './plots/ranking/bar/Plot.svelte';
+export { default as BoxPlot } from './plots/distribution/box/Plot.svelte';
+export { default as BulletPlot } from './plots/ranking/bullet/Plot.svelte';
+export { default as ClevelandPlot } from './plots/ranking/cleveland/Plot.svelte';
+export { default as DensityPlot } from './plots/distribution/density/Plot.svelte';
+export { default as DumbbellPlot } from './plots/ranking/dumbbell/Plot.svelte';
+export { default as ForestPlot } from './plots/ranking/forest/Plot.svelte';
+export { default as GeoPlot } from './plots/map/geo/Plot.svelte';
+export { default as HeatmapPlot } from './plots/correlation/heatmap/Plot.svelte';
+export { default as HistogramPlot } from './plots/distribution/histogram/Plot.svelte';
+export { default as LinePlot } from './plots/evolution/line/Plot.svelte';
+export { default as LollipopPlot } from './plots/ranking/lollipop/Plot.svelte';
+export { default as PyramidPlot } from './plots/distribution/pyramid/Plot.svelte';
+export { default as ScatterPlot } from './plots/correlation/scatter/Plot.svelte';
+export { default as SlopePlot } from './plots/evolution/slope/Plot.svelte';
+export { default as SparklinePlot } from './plots/evolution/sparkline/Plot.svelte';
+export { default as ViolinPlot } from './plots/distribution/violin/Plot.svelte';
 export { default as PlotComposer } from './layout/composer/PlotComposer.svelte';
 export { default as GridCell } from './layout/grid/GridCell.svelte';
 export { default as Plot } from './layout/plot/Plot.svelte';
@@ -20,20 +30,20 @@ export type { ThemeName } from './configuration/themes';
 export { groupBy, buildSeries } from './utils/grouping';
 export { makeColorScale, resolveColorScale, normalize, resolveCssColor, paletteColor, contrastTextColor, contrastRatio } from './utils/color';
 export { Margins } from './layout/margins/Margins';
-export { resolveOpacityScale } from './utils/opacity';
-export { resolveSymbolScale } from './utils/symbol';
+export { resolveOpacityScale } from './utils/OpacityScale';
+export { resolveSymbolScale } from './utils/SymbolScale';
 export { Statistics } from './phases/statistics/Statistics';
 export type { AxisValue, ChannelValue, ChannelName, AxisChannelName, IndependentChannelName, SizeChannelName, ChannelAccessors } from './types/layout/mapping';
 export type { AxisScale, AxisBasedScalesConfig, ChannelScalesConfig } from './types/layout/scales';
 export type { Accessor, Series, SeriesProps, DataProps } from './types/plots/data/common';
 export type { BasePlotProps, PlotCoreProps, PlotChromeProps, FigureBoxProps, SegmentsConfig, ScalesConfig, MarginConfig, TooltipConfig, HoverConfig } from './types/plots/props';
-export type { AxisBasedStylesConfig, GapsAwarePlotStylesConfig, GeoStylesConfig, GeoTileLayerConfig } from './types/layout/styles';
+export type { AxisBasedStylesConfig, ConnectorBasedStylesConfig, BulletStylesConfig, GapsAwarePlotStylesConfig, CurveAwarePlotStylesConfig, GeoStylesConfig, GeoTileLayerConfig } from './types/layout/styles';
 export type { GapsConfig } from './types/plots/gaps';
 export type { LineSegmentStyle, BarSegmentStyle, CellSegmentStyle, GeoSegmentStyle, ScatterSegmentStyle } from './types/plots/segments/common';
 export type { Range, Area, Segment } from './types/plots/segments/config';
 export type { SymbolType } from './types/plots/constants';
 export type { FontStyle, StrokeStyle, DotStyle, AreaStyle } from './types/plots/styling';
-export type { AxisBasedMarkersConfig, BrushSelection, MarkerCurveName } from './types/markers/common';
+export type { AxisBasedMarkersConfig, BrushSelection } from './types/markers/common';
 export type { StatisticConfig } from './types/layout/statistics';
 export type * from './types/transforms';
 export type { GeoFeature, GeoJsonInput, GeoDataProps, Topology } from './types/plots/data/geo';
@@ -41,10 +51,10 @@ export type { GeoCustomProjection, GeoCustomProjectionFactory, GeoScalesConfig,
 export type { GeoCameraConfig } from './types/plots/camera';
 export type { GeoMarkersConfig } from './types/markers/geo';
 export type { SharedAxisValues } from './types/phases';
-export type { TimeValue, Orientation, TimelineConfig, TimelineType, TimelineCallbacks, PlayerConfig, PlayerControl } from './types/layout/timeline';
+export type { TimelineConfig, TimelineType, TimelineCallbacks, PlayerConfig, PlayerControl } from './types/layout/timeline';
 export type { ComposerLayout, ComposerTags, ComposerTimelineConfig, ComposerHoverConfig } from './types/layout/composer';
 export type { GridPlacement, GridInset, GridCellContext, GridCellSnippet } from './types/layout/grid';
 export type { Responsive, FacetConfig, FacetCellContext, FacetIndicatorContext, FacetIndicatorSnippet, FacetNavDirection, FacetNavContext, FacetNavSnippet } from './types/layout/facet';
 export type { LegendSection, DiscreteLegendSection, ContinuousLegendSection, LegendItem, LegendNavDirection, LegendNavContext, LegendNavSnippet, LegendEntry, LegendMark, LegendRange } from './types/layout/legend';
 export type { HoverStrategy, HoverPoint, HoverDisplayPoint } from './types/layout/hover';
-export type { PlotStylesConfig, PlotStylesConfigInput, DividerLineStyle, TextStyle } from './types/configuration/styling';
+export type { PlotStylesConfig, PlotStylesConfigInput, PaletteInput, DividerLineStyle, TextStyle } from './types/configuration/styling';

package/dist/index.js

@@ -1,14 +1,24 @@
 // ── Plots ───────────────────────────────────────────────────────────────────
 // One mark family each, with optional chrome (title, legend, caption),
 // timeline and facets around it.
-export { default as AreaPlot } from './plots/area/Plot.svelte';
-export { default as BarPlot } from './plots/bar/Plot.svelte';
-export { default as HistogramPlot } from './plots/histogram/Plot.svelte';
-export { default as HeatmapPlot } from './plots/heatmap/Plot.svelte';
-export { default as LinePlot } from './plots/line/Plot.svelte';
-export { default as PyramidPlot } from './plots/pyramid/Plot.svelte';
-export { default as ScatterPlot } from './plots/scatter/Plot.svelte';
-export { default as GeoPlot } from './plots/geo/Plot.svelte';
+export { default as AreaPlot } from './plots/evolution/area/Plot.svelte';
+export { default as BarPlot } from './plots/ranking/bar/Plot.svelte';
+export { default as BoxPlot } from './plots/distribution/box/Plot.svelte';
+export { default as BulletPlot } from './plots/ranking/bullet/Plot.svelte';
+export { default as ClevelandPlot } from './plots/ranking/cleveland/Plot.svelte';
+export { default as DensityPlot } from './plots/distribution/density/Plot.svelte';
+export { default as DumbbellPlot } from './plots/ranking/dumbbell/Plot.svelte';
+export { default as ForestPlot } from './plots/ranking/forest/Plot.svelte';
+export { default as GeoPlot } from './plots/map/geo/Plot.svelte';
+export { default as HeatmapPlot } from './plots/correlation/heatmap/Plot.svelte';
+export { default as HistogramPlot } from './plots/distribution/histogram/Plot.svelte';
+export { default as LinePlot } from './plots/evolution/line/Plot.svelte';
+export { default as LollipopPlot } from './plots/ranking/lollipop/Plot.svelte';
+export { default as PyramidPlot } from './plots/distribution/pyramid/Plot.svelte';
+export { default as ScatterPlot } from './plots/correlation/scatter/Plot.svelte';
+export { default as SlopePlot } from './plots/evolution/slope/Plot.svelte';
+export { default as SparklinePlot } from './plots/evolution/sparkline/Plot.svelte';
+export { default as ViolinPlot } from './plots/distribution/violin/Plot.svelte';
 // ── Composition ─────────────────────────────────────────────────────────────
 // Separate plots combined into one figure, with chrome of its own.
 export { default as PlotComposer } from './layout/composer/PlotComposer.svelte';
@@ -26,6 +36,6 @@ export { SYSTEM_FONT } from './configuration/fonts';
 export { groupBy, buildSeries } from './utils/grouping';
 export { makeColorScale, resolveColorScale, normalize, resolveCssColor, paletteColor, contrastTextColor, contrastRatio } from './utils/color';
 export { Margins } from './layout/margins/Margins';
-export { resolveOpacityScale } from './utils/opacity';
-export { resolveSymbolScale } from './utils/symbol';
+export { resolveOpacityScale } from './utils/OpacityScale';
+export { resolveSymbolScale } from './utils/SymbolScale';
 export { Statistics } from './phases/statistics/Statistics';

package/dist/layout/base/BasePlotLayout.svelte

@@ -1,55 +1,19 @@
-<script module lang="ts">
-	import type { Margins as MarginsType } from '../margins/Margins';
-	import type { EdgeBox } from '../../types/layout/box';
-	import type { StylesLayoutConfig } from '../../types/layout/styles';
-	import type { HoverPosition } from '../../types/phases';
-	import type { HoverConfig as PlotHoverConfig } from '../../types/plots/props';
-
-	/**
-	 * What `BasePlotLayout` draws from: the end of a plot's pipeline. An axis
-	 * kind's state is one as is; GeoPlot builds its own.
-	 */
-	export type PlotLayoutState = {
-		/** What the pointer can match, and how the hover reads. */
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		hover?: PlotHoverConfig<any>;
-		/** Where each row sits, for hover matching and the plot's scales. */
-		hoverPosition?: HoverPosition;
-		/** The rows the plot draws and hovers over. */
-		hoverRows?: unknown[];
-		/** The plot's x/y/r/length scales, and the scales a marker without its own inherits. */
-		scales?: object;
-		/** What the plot's position channels are and which way it runs, for what draws inside it. */
-		axes?: PlotAxes;
-		/** Every marker the pipeline resolved. */
-		markers?: object[];
-		/** All resolved series - axis kinds only. */
-		resolvedSeries?: object[];
-		/** Each series' color, by name - axis kinds only. */
-		colorForSeries?: (name: string) => string;
-		/** Per-series marker groups - axis kinds only. */
-		scopedGroups?: object[];
-		/** The plot's `styles`: its frame and, on a map, its tile layer. */
-		styles?: StylesLayoutConfig;
-		/** What an `'auto'` margin side reads as. Defaults to {@link Margins.AXIS_ESTIMATE}. */
-		marginEstimate?: MarginsType;
-		/** The plot's value labels, whose `reach` is the room the margins start from. */
-		valueLabels?: { reach: EdgeBox[] };
-	};
-</script>
-
 <script
 	lang="ts"
 	generics="TData extends Record<string, unknown>, TSeries extends Record<string, unknown> = TData"
 >
 	import { Margins } from '../margins/Margins';
+	import type { AxisScale } from '../../types/layout/scales';
+	import type { PlotLayoutState } from '../../types/layout/plot';
 	import { PlotMargins } from '../margins/PlotMargins.svelte';
 	import { LegendState } from '../legend/LegendState.svelte';
 	import { onDestroy, untrack } from 'svelte';
+	import { SvelteMap } from 'svelte/reactivity';
 	import type { ComponentProps, Snippet } from 'svelte';
 	import { Plot, Pointer, setPlotDefaults } from 'svelteplot';
 	import { getConfiguration } from '../../configuration/config.svelte';
-	import { buildScale } from '../scales/buildScale';
+	import { SveltePlotScale } from '../scales/SveltePlotScale';
+	import { TickLabels } from '../scales/TickLabels';
 	import ScalesLayout from '../scales/ScalesLayout.svelte';
 	import GeometryLayout from '../geometry/GeometryLayout.svelte';
 	import CoordinatesLayout from '../coordinates/CoordinatesLayout.svelte';
@@ -58,7 +22,6 @@
 	import { PlotHover } from '../hover/PlotHover.svelte';
 	import { PlotContext } from '../plot/PlotContext';
 	import { TimelineState } from '../timeline/TimelineState.svelte';
-	import type { PlotAxes } from '../../phases/data/PlotAxes';
 	import type { AxisBasedScalesConfig } from '../../types/layout/scales';
 	import type { AxisValue } from '../../types/layout/mapping';
 	import type { CoordinatesConfig, GeoScalesConfig } from '../../types/layout/coordinates';
@@ -141,7 +104,9 @@
 	// What this plot draws, on its figure's legend - its series, their colors and marks.
 	const legend = LegendState.current();
 	const legendSource = Symbol('plot');
+	const silenced = LegendState.isSilenced();
 	$effect(() => {
+		if (silenced) return;
 		const entries = LegendState.entriesOf(state as never);
 		untrack(() => legend?.register(legendSource, entries));
 	});
@@ -161,16 +126,91 @@
 		numberFormat: { useGrouping: 'min2', compactDisplay: untrack(() => cfg.axis.compactDisplay) }
 	});
 
+	/** What an `'auto'` side reads as: the plot's own estimate, less the room of an axis that is not drawn. */
+	const marginEstimate = $derived.by(() => {
+		const estimate = state.marginEstimate ?? Margins.AXIS_ESTIMATE;
+		const bare = { x: scales?.x?.axisDisplay === 'none', y: scales?.y?.axisDisplay === 'none' };
+		return estimate.map((value, side) =>
+			(bare.x && side === 'bottom') || (bare.y && side === 'left') ? Math.min(value, 8) : value
+		);
+	});
+
+	/**
+	 * How the labels of the plot's category axes (bands, or text laid out as points) are laid out when they would not fit
+	 * side by side, unless the author set a `tickRotate` of their own or turned
+	 * `axis.autoRotate` off: the x labels turn (45 degrees, else 90), and either
+	 * axis leaves some out when even that is not enough. Judged against the plot's
+	 * width and height less the margins an `'auto'` side is estimated at, so it holds
+	 * whatever the margins settle on.
+	 */
+	const tickLayout = $derived.by(() => {
+		// A kind's band axes, and any axis of text categories a line or scatter lays out as points.
+		const bands = (['x', 'y'] as const).filter(
+			(axis) => state.axes?.bands.includes(axis) || state.axes?.isDiscrete(axis)
+		);
+		if (!cfg.axis.autoRotate || bands.length === 0) return undefined;
+		const estimate = marginEstimate;
+		const categories = (axis: 'x' | 'y') => {
+			const given = scales?.[axis]?.domain;
+			if (given) return given.map(String);
+			const get = axis === 'x' ? getX : getY;
+			return [...new Set(data.map((row) => String(get(row))))].sort();
+		};
+		const out: {
+			x?: ReturnType<typeof TickLabels.layout>;
+			y?: { every: number; values: string[] };
+		} = {};
+		if (bands.includes('x') && scales?.x?.tickRotate === undefined) {
+			out.x = TickLabels.layout(
+				categories('x'),
+				width - estimate.left - estimate.right,
+				scales?.x?.paddingInner ?? 0.1,
+				cfg.axis.fontSize,
+				cfg
+			);
+		}
+		if (bands.includes('y') && scales?.y?.ticks == null) {
+			const values = categories('y');
+			const every = TickLabels.rows(
+				values.length,
+				height - estimate.top - estimate.bottom,
+				cfg.axis.fontSize
+			);
+			if (every > 1) out.y = { every, values };
+		}
+		return out;
+	});
+	/** `scales` with the rotation the tick layout chose for the x labels. */
+	const layoutScales = $derived.by(() => {
+		const rotate = tickLayout?.x?.rotate;
+		if (!rotate || scales === undefined) return scales;
+		return { ...scales, x: { ...scales.x, tickRotate: rotate } };
+	});
+	/** The category labels a crowded axis still writes: one in every few. */
+	const tickValues = $derived.by(() => {
+		const out: Partial<Record<'x' | 'y', string[]>> = {};
+		const x = tickLayout?.x;
+		if (x && x.every > 1) {
+			const values =
+				scales?.x?.domain?.map(String) ?? [...new Set(data.map((row) => String(getX(row))))].sort();
+			out.x = values.filter((_, index) => index % x.every === 0);
+		}
+		const y = tickLayout?.y;
+		if (y) out.y = y.values.filter((_, index) => index % y.every === 0);
+		return out;
+	});
+
 	// Created once: this plot's margins, grown to fit the labels its markers report.
 	const plotMargins = new PlotMargins({
 		theme: () => cfg.margins,
 		author: () => margins,
-		estimate: () => state.marginEstimate ?? Margins.AXIS_ESTIMATE,
+		estimate: () => marginEstimate,
 		reserve: () => state.valueLabels?.reach ?? [],
 		size: () => ({ width, height }),
 		resetKey: () => state.resolvedSeries,
-		scales: () => scales,
+		scales: () => layoutScales,
 		tickFontSize: () => cfg.axis.fontSize,
+		tickWidth: () => ({ x: tickLayout?.x?.width }),
 		settle: (settled) => (margins = settled)
 	});
 	const numericMargins = $derived(plotMargins.numeric);
@@ -187,9 +227,37 @@
 		size: () => ({ width, height })
 	});
 
-	// `buildScale` already left only svelteplot's own scale options.
-	const resolvedX = $derived(buildScale(scales?.x, data, getX) as SveltePlotProps['x']);
-	const resolvedY = $derived(buildScale(scales?.y, data, getY) as SveltePlotProps['y']);
+	/** The domains `ScalesLayout` widens an axis to, for an edge tick's `'extend'` (see `EdgeTicks`). */
+	const edgeDomains = new SvelteMap<'x' | 'y', [number, number]>();
+
+	/** The title svelteplot would infer from rows, for a slice with none (it infers nothing then). */
+	function titleOfEmpty(axis: 'x' | 'y', scale: AxisScale<TData> | undefined): string | undefined {
+		const field = state.channels?.[axis]?.source;
+		if (data.length > 0 || typeof field !== 'string' || scale?.label !== undefined)
+			return undefined;
+		if (scale?.type === 'time' || scale?.type === 'utc') return undefined;
+		// `ScalesLayout` draws a vertical title.
+		if (scale?.labelOrientation === 'vertical') return undefined;
+		if (axis === 'y') return `${scale?.reverse ? '↓' : '↑'} ${field}`;
+		if (state.axes?.isDiscrete('x')) return field;
+		return scale?.reverse ? `← ${field}` : `${field} →`;
+	}
+
+	// `SveltePlotScale.build` already left only svelteplot's own scale options.
+	const resolvedX = $derived.by(() => {
+		const built = SveltePlotScale.build(layoutScales?.x, data, getX);
+		const domain = edgeDomains.get('x');
+		const label = titleOfEmpty('x', layoutScales?.x);
+		const out = domain ? { ...built, domain, nice: false } : built;
+		return (label ? { ...out, label } : out) as SveltePlotProps['x'];
+	});
+	const resolvedY = $derived.by(() => {
+		const built = SveltePlotScale.build(scales?.y, data, getY);
+		const domain = edgeDomains.get('y');
+		const label = titleOfEmpty('y', scales?.y);
+		const out = domain ? { ...built, domain, nice: false } : built;
+		return (label ? { ...out, label } : out) as SveltePlotProps['y'];
+	});
 	/** Threaded straight into svelteplot's own `r` scale option - see `RScaleConfig`'s own doc comment for why this isn't independently resolved like `color`. */
 	const resolvedR = $derived(scales?.r as SveltePlotProps['r']);
 	/** Threaded straight into svelteplot's own `length` scale option - see `LengthScaleConfig`'s own doc comment. `GeoPlot`-only in practice (see `scales`'s own doc comment), same mechanism as `r`. */
@@ -248,18 +316,27 @@
 		locale={cfg.axis.locale}
 		{data}
 		{containerEl}
-		remountKey={plotMargins.remountKey}
 	>
 		<StylesLayout styles={state.styles} {width} {height} {numericMargins} />
 		<!-- Axes for every kind but GeoPlot. -->
 		{#if scales !== undefined && coordinates === undefined}
-			<ScalesLayout {data} {getX} {getY} {width} {height} {numericMargins} {scales} />
+			<ScalesLayout
+				{data}
+				{getX}
+				{getY}
+				{width}
+				{height}
+				{numericMargins}
+				scales={layoutScales}
+				{edgeDomains}
+				{tickValues}
+				{state}
+			/>
 		{/if}
 		<GeometryLayout
 			markers={resolvedMarkers}
 			seriesData={seriesData ?? []}
 			scopedGroups={scopedGroups ?? []}
-			channelScales={scales}
 			{ctrl}
 			{width}
 			{height}
@@ -295,8 +372,9 @@
 			visible={ctrl.showTooltip && ctrl.tooltipPosition != null}
 			x={ctrl.tooltipPosition?.x ?? 0}
 			y={ctrl.tooltipPosition?.y ?? 0}
-			rows={ctrl.matchedRows.map((p) => p.row)}
+			rows={ctrl.matchedRows.map((p) => ({ ...p.row, seriesColor: p.color }))}
 			format={hover.tooltip.format}
+			sort={hover.tooltip.sort}
 			content={hover.tooltip.content}
 			anchorX={hover.tooltip.anchorX}
 			anchorY={hover.tooltip.anchorY}

package/dist/layout/base/BasePlotLayout.svelte.d.ts

@@ -1,42 +1,5 @@
-import type { Margins as MarginsType } from '../margins/Margins';
-import type { EdgeBox } from '../../types/layout/box';
-import type { StylesLayoutConfig } from '../../types/layout/styles';
-import type { HoverPosition } from '../../types/phases';
-import type { HoverConfig as PlotHoverConfig } from '../../types/plots/props';
-/**
- * What `BasePlotLayout` draws from: the end of a plot's pipeline. An axis
- * kind's state is one as is; GeoPlot builds its own.
- */
-export type PlotLayoutState = {
-    /** What the pointer can match, and how the hover reads. */
-    hover?: PlotHoverConfig<any>;
-    /** Where each row sits, for hover matching and the plot's scales. */
-    hoverPosition?: HoverPosition;
-    /** The rows the plot draws and hovers over. */
-    hoverRows?: unknown[];
-    /** The plot's x/y/r/length scales, and the scales a marker without its own inherits. */
-    scales?: object;
-    /** What the plot's position channels are and which way it runs, for what draws inside it. */
-    axes?: PlotAxes;
-    /** Every marker the pipeline resolved. */
-    markers?: object[];
-    /** All resolved series - axis kinds only. */
-    resolvedSeries?: object[];
-    /** Each series' color, by name - axis kinds only. */
-    colorForSeries?: (name: string) => string;
-    /** Per-series marker groups - axis kinds only. */
-    scopedGroups?: object[];
-    /** The plot's `styles`: its frame and, on a map, its tile layer. */
-    styles?: StylesLayoutConfig;
-    /** What an `'auto'` margin side reads as. Defaults to {@link Margins.AXIS_ESTIMATE}. */
-    marginEstimate?: MarginsType;
-    /** The plot's value labels, whose `reach` is the room the margins start from. */
-    valueLabels?: {
-        reach: EdgeBox[];
-    };
-};
+import type { PlotLayoutState } from '../../types/layout/plot';
 import type { Snippet } from 'svelte';
-import type { PlotAxes } from '../../phases/data/PlotAxes';
 import type { CoordinatesConfig } from '../../types/layout/coordinates';
 import type { HoverPoint } from '../../types/layout/hover';
 import type { MarginConfig } from '../../types/plots/props';

package/dist/layout/coordinates/CoordinatesLayout.svelte

@@ -11,6 +11,7 @@
 		createCameraRotateTween
 	} from './camera.svelte';
 	import CameraFit from './CameraFit.svelte';
+	import ProjectionZoom from './ProjectionZoom.svelte';
 	import type { CoordinatesConfig } from '../../types/layout/coordinates';
 
 	type SveltePlotProps = ComponentProps<typeof Plot>;
@@ -19,8 +20,8 @@
 	 * Resolves the active coordinate system (a `d3-geo` projection) and owns
 	 * `<Plot>` itself, since `projection` must be known before it mounts.
 	 * Also owns pan/zoom/rotate gesture state and the declarative `camera`,
-	 * composed into the `<g>` transform wrapper (and, for `camera`/`rotate`
-	 * on `orthographic`, into the projection's own `rotate`). A no-op for
+	 * applied to the projection's output by `ProjectionZoom` (and, for
+	 * `camera`/`rotate` on `orthographic`, to the projection's own `rotate`). A no-op for
 	 * every plot kind but `GeoPlot`.
 	 */
 	let {
@@ -35,7 +36,6 @@
 		locale = undefined,
 		data,
 		containerEl,
-		remountKey = undefined,
 		children
 	}: {
 		width: number;
@@ -53,8 +53,6 @@
 		/** Fed to `resolveProjection`'s `domain: 'data'` sentinel and to `coordinates.camera`'s `{features}` target resolution. */
 		data: TData[];
 		containerEl?: HTMLDivElement;
-		/** See `BasePlotLayout`'s own `remountKey` doc comment - forwarded verbatim to key svelteplot's `<Plot>` itself. */
-		remountKey?: string | number;
 		children: Snippet;
 	} = $props();
 
@@ -131,13 +129,17 @@
 	);
 	const rotateOverrideActive = $derived(cameraOrthoRotate != null || rotateEnabled);
 
+	/** Moving the view past the plot's box needs what is outside it drawn too: the frame clip would cut it at the unmoved box, so the plot's own clip does it instead. */
+	const movesView = $derived(zoomEnabled || panEnabled || cameraActive);
+
 	const finalProjection = $derived.by(() => {
-		if (!rotateOverrideActive) return resolvedProjection;
+		if (!rotateOverrideActive && !movesView) return resolvedProjection;
 		return {
 			...(typeof resolvedProjection === 'string'
 				? { type: resolvedProjection }
 				: resolvedProjection),
-			rotate: activeRotate
+			...(rotateOverrideActive ? { rotate: activeRotate } : {}),
+			...(movesView ? { clip: false } : {})
 		};
 	});
 
@@ -149,41 +151,41 @@
 		transition: () => cameraConfig?.transition
 	});
 	const cameraTransform = $derived(cameraTransformTween.current ?? { x: 0, y: 0, k: 1 });
+	const clipId = `geo-frame-clip-${Math.random().toString(36).slice(2, 9)}`;
 </script>
 
-{#key remountKey}
-	<Plot
-		{width}
-		{height}
-		{margin}
-		{x}
-		{y}
-		{r}
-		{length}
-		{locale}
-		projection={finalProjection as SveltePlotProps['projection']}
-	>
-		{#if cameraActive && resolvedCameraTarget}
-			<CameraFit
-				target={resolvedCameraTarget}
-				anchor={cameraConfig?.anchor}
-				padding={cameraConfig?.padding}
-				zoom={cameraConfig?.zoom}
-				{width}
-				{height}
-				onFit={(fit) => (cameraFit = fit)}
-			/>
-		{/if}
-		<g transform="translate({cameraTransform.x}, {cameraTransform.y}) scale({cameraTransform.k})">
-			<g
-				transform="translate({geoZoom.transform.x}, {geoZoom.transform.y}) scale({geoZoom.transform
-					.k})"
-			>
-				{@render children()}
-			</g>
-		</g>
-	</Plot>
-{/key}
+<Plot
+	{width}
+	{height}
+	{margin}
+	{x}
+	{y}
+	{r}
+	{length}
+	{locale}
+	projection={finalProjection as SveltePlotProps['projection']}
+>
+	{#if cameraActive && resolvedCameraTarget}
+		<CameraFit
+			target={resolvedCameraTarget}
+			anchor={cameraConfig?.anchor}
+			padding={cameraConfig?.padding}
+			zoom={cameraConfig?.zoom}
+			{width}
+			{height}
+			onFit={(fit) => (cameraFit = fit)}
+		/>
+	{/if}
+	<!-- What a zoom or a camera pushes past the plot's box is cut there, so it never covers the legend or the chrome around it. -->
+	<defs>
+		<clipPath id={clipId}><rect x="0" y="0" {width} {height} /></clipPath>
+	</defs>
+	<g clip-path="url(#{clipId})">
+		<ProjectionZoom inner={geoZoom.transform} outer={cameraTransform}>
+			{@render children()}
+		</ProjectionZoom>
+	</g>
+</Plot>
 
 <style>
 	:global(figure.svelteplot svg) {

package/dist/layout/coordinates/CoordinatesLayout.svelte.d.ts

@@ -17,8 +17,6 @@ declare function $$render<TData extends Record<string, unknown>>(): {
         /** Fed to `resolveProjection`'s `domain: 'data'` sentinel and to `coordinates.camera`'s `{features}` target resolution. */
         data: TData[];
         containerEl?: HTMLDivElement;
-        /** See `BasePlotLayout`'s own `remountKey` doc comment - forwarded verbatim to key svelteplot's `<Plot>` itself. */
-        remountKey?: string | number;
         children: Snippet;
     };
     exports: {};

package/dist/layout/coordinates/ProjectionZoom.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { getContext, setContext, type Snippet } from 'svelte';
+	import { ZoomedProjection } from './ZoomedProjection';
+	import type { GeoZoomTransform } from './zoom.svelte';
+	import type { StreamingProjection } from '../../plots/utils/tiles';
+
+	/**
+	 * Draws everything inside it through the plot's projection moved by `inner`
+	 * then `outer`, instead of scaling the drawn SVG: a zoom moves and spreads the
+	 * positions, while dots, text and strokes keep their size. Works by handing
+	 * the marks below a view of svelteplot's plot state whose `scales.projection`
+	 * is the moved one.
+	 */
+	let {
+		inner,
+		outer,
+		children
+	}: { inner: GeoZoomTransform; outer: GeoZoomTransform; children: Snippet } = $props();
+
+	type Scales = { projection?: StreamingProjection & { aspectRatio?: number } } | undefined;
+	type PlotState = { scales: Scales; publicState: object };
+	type PlotContext = { getPlotState: () => PlotState } & Record<string, unknown>;
+
+	const context = getContext<PlotContext>('svelteplot');
+	const state = context.getPlotState();
+
+	const scales = $derived.by((): Scales => {
+		const own = state.scales;
+		return own?.projection
+			? { ...own, projection: ZoomedProjection.of(own.projection, inner, outer) }
+			: own;
+	});
+
+	const publicState = new Proxy(state.publicState, {
+		get: (target, key) => (key === 'scales' ? scales : Reflect.get(target, key, target))
+	});
+	const movedState = new Proxy(state, {
+		get: (target, key) => {
+			if (key === 'scales') return scales;
+			if (key === 'publicState') return publicState;
+			return Reflect.get(target, key, target);
+		}
+	});
+
+	setContext('svelteplot', { ...context, getPlotState: () => movedState });
+</script>
+
+{@render children()}

package/dist/layout/coordinates/ProjectionZoom.svelte.d.ts

@@ -0,0 +1,10 @@
+import { type Snippet } from 'svelte';
+import type { GeoZoomTransform } from './zoom.svelte';
+type $$ComponentProps = {
+    inner: GeoZoomTransform;
+    outer: GeoZoomTransform;
+    children: Snippet;
+};
+declare const ProjectionZoom: import("svelte").Component<$$ComponentProps, {}, "">;
+type ProjectionZoom = ReturnType<typeof ProjectionZoom>;
+export default ProjectionZoom;

package/dist/layout/coordinates/ZoomedProjection.d.ts

@@ -0,0 +1,11 @@
+import type { GeoZoomTransform } from './zoom.svelte';
+import type { StreamingProjection } from '../../plots/utils/tiles';
+/** A fitted projection with a pan and scale applied to where it puts things, so positions move and zoom while what is drawn at them keeps its size. */
+export declare class ZoomedProjection {
+    /** `projection`, then `outer` over `inner` (each a pan and scale) as one move in pixels. */
+    static of(projection: StreamingProjection & {
+        aspectRatio?: number;
+    }, inner: GeoZoomTransform, outer: GeoZoomTransform): StreamingProjection & {
+        aspectRatio?: number;
+    };
+}

package/dist/layout/coordinates/ZoomedProjection.js

@@ -0,0 +1,24 @@
+import { geoTransform } from 'd3-geo';
+/** A fitted projection with a pan and scale applied to where it puts things, so positions move and zoom while what is drawn at them keeps its size. */
+export class ZoomedProjection {
+    /** `projection`, then `outer` over `inner` (each a pan and scale) as one move in pixels. */
+    static of(projection, inner, outer) {
+        const k = inner.k * outer.k;
+        const x = outer.k * inner.x + outer.x;
+        const y = outer.k * inner.y + outer.y;
+        if (k === 1 && x === 0 && y === 0)
+            return projection;
+        const move = geoTransform({
+            point(px, py) {
+                this.stream.point(px * k + x, py * k + y);
+            }
+        });
+        return {
+            aspectRatio: projection.aspectRatio,
+            invert: projection.invert
+                ? ([px, py]) => projection.invert([(px - x) / k, (py - y) / k])
+                : undefined,
+            stream: (sink) => projection.stream(move.stream(sink))
+        };
+    }
+}