@fundar/data-chart-telling 1.1.0 → 1.2.0

package/dist/layout/coordinates/camera.svelte.js

@@ -17,6 +17,11 @@ function tweenState(args) {
     let from;
     let to;
     let raf;
+    function stop() {
+        if (raf != null)
+            cancelAnimationFrame(raf);
+        raf = undefined;
+    }
     function setCurrent(value) {
         current = value;
         lastValue = value;
@@ -37,16 +42,16 @@ function tweenState(args) {
             from = atStart ? target : (lastValue ?? target);
             to = target;
         }
-        if (raf != null) {
-            cancelAnimationFrame(raf);
-            raf = undefined;
-        }
         if (progress != null) {
+            stop();
             setCurrent(args.lerp(from, to, Interpolation.buildEasing(transition?.easing)(clamp01(progress)), direction));
             return;
         }
+        // A rerun with the same target (the caller rebuilds `transition` on every
+        // render) leaves a tween in flight alone.
         if (!changed)
             return;
+        stop();
         const duration = Math.max(0, transition?.duration ?? 750);
         const easing = Interpolation.buildEasing(transition?.easing);
         const startFrom = from;
@@ -58,11 +63,9 @@ function tweenState(args) {
             raf = t < 1 ? requestAnimationFrame(tick) : undefined;
         }
         raf = requestAnimationFrame(tick);
-        return () => {
-            if (raf != null)
-                cancelAnimationFrame(raf);
-        };
     });
+    // Only leaving the page stops a tween the effect above started.
+    $effect(() => stop);
     return {
         get current() {
             return current;

package/dist/layout/coordinates/projections/argentina.js

@@ -1,7 +1,7 @@
 import { geoAzimuthalEquidistant } from 'd3-geo';
 import { pointsToFitFeature } from './fit';
 // Representative extremity points - not real border geometry (which stays
-// out of `src/lib`, see stories/plots/geo/data.ts), just enough for
+// out of `src/lib`, see stories/plots/map/geo/data.ts), just enough for
 // `fitSize` to frame Argentina's full territorial claim sensibly. These are
 // plain real-world coordinates, not derived from any particular dataset, so
 // they work the same way regardless of which Argentina GeoJSON actually

package/dist/layout/coordinates/projections/fit.d.ts

@@ -2,7 +2,7 @@
  * Wraps a handful of representative `[lon, lat]` points as a `MultiPoint`
  * Feature, just so `projection.fitExtent`/`fitSize` has something to
  * measure. Custom projections built on these live in `src/lib` (see
- * `stories/plots/geo/data.ts` for why real border geometry doesn't), so a
+ * `stories/plots/map/geo/data.ts` for why real border geometry doesn't), so a
  * few hand-picked extremity points stand in for a region's true extent.
  */
 export declare function pointsToFitFeature(points: [number, number][]): GeoJSON.Feature;

package/dist/layout/coordinates/projections/fit.js

@@ -2,7 +2,7 @@
  * Wraps a handful of representative `[lon, lat]` points as a `MultiPoint`
  * Feature, just so `projection.fitExtent`/`fitSize` has something to
  * measure. Custom projections built on these live in `src/lib` (see
- * `stories/plots/geo/data.ts` for why real border geometry doesn't), so a
+ * `stories/plots/map/geo/data.ts` for why real border geometry doesn't), so a
  * few hand-picked extremity points stand in for a region's true extent.
  */
 export function pointsToFitFeature(points) {

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

@@ -6,15 +6,14 @@ export type GeoZoomTransform = {
 };
 /**
  * Wires drag-pan + scroll-zoom onto a DOM node via d3-zoom, exposing the
- * resulting transform as reactive Svelte state, applied by the caller as an
- * SVG `<g transform="translate(x,y) scale(k)">` wrapper.
+ * resulting transform as reactive Svelte state, which the caller applies to
+ * the plot's projection (see `ProjectionZoom`).
  *
  * `panEnabled`/`zoomEnabled` gate drag-translate and wheel/pinch-scale
  * independently, as separate `.filter()`s on the same underlying instance.
  *
- * Limitations: hover/tooltip hit-testing doesn't compensate for an active
- * transform. Touch pinch-to-zoom is gated by `panEnabled`, not `zoomEnabled`
- * (d3-zoom can't distinguish a pinch from a one-finger drag until underway).
+ * Touch pinch-to-zoom is gated by `panEnabled`, not `zoomEnabled` (d3-zoom
+ * can't distinguish a pinch from a one-finger drag until underway).
  */
 export declare function createGeoZoom(args: {
     panEnabled: () => boolean;

package/dist/layout/coordinates/zoom.svelte.js

@@ -2,15 +2,14 @@ import { select } from 'd3-selection';
 import { zoom as d3zoom, zoomIdentity } from 'd3-zoom';
 /**
  * Wires drag-pan + scroll-zoom onto a DOM node via d3-zoom, exposing the
- * resulting transform as reactive Svelte state, applied by the caller as an
- * SVG `<g transform="translate(x,y) scale(k)">` wrapper.
+ * resulting transform as reactive Svelte state, which the caller applies to
+ * the plot's projection (see `ProjectionZoom`).
  *
  * `panEnabled`/`zoomEnabled` gate drag-translate and wheel/pinch-scale
  * independently, as separate `.filter()`s on the same underlying instance.
  *
- * Limitations: hover/tooltip hit-testing doesn't compensate for an active
- * transform. Touch pinch-to-zoom is gated by `panEnabled`, not `zoomEnabled`
- * (d3-zoom can't distinguish a pinch from a one-finger drag until underway).
+ * Touch pinch-to-zoom is gated by `panEnabled`, not `zoomEnabled` (d3-zoom
+ * can't distinguish a pinch from a one-finger drag until underway).
  */
 export function createGeoZoom(args) {
     let transform = $state({ x: 0, y: 0, k: 1 });

package/dist/layout/facet/FacetLayout.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" generics="TRow extends Record<string, unknown>">
 	import { isMobile } from '../../stores/device';
-	import { resolveAccessor } from '../../plots/utils/accessors';
+	import { resolveAccessor } from '../../utils/accessors';
 	import FacetIndicator from './FacetIndicator.svelte';
 	import Grid from '../grid/Grid.svelte';
 	import GridCell from '../grid/GridCell.svelte';

package/dist/layout/facet/config.js

@@ -1,4 +1,4 @@
-import { resolveAccessor } from '../../plots/utils/accessors';
+import { resolveAccessor } from '../../utils/accessors';
 /** Whether a facet config wraps one facet per `by` value, rather than laying out a `rows`/`cols` grid. */
 export function isFacetWrap(facet) {
     return facet.by !== undefined;

package/dist/layout/figure/Figure.svelte

@@ -90,6 +90,8 @@
 	// svelte-ignore state_referenced_locally
 	const ownLegend = (legend !== undefined && legend !== false) || !outer;
 	const legendState = ownLegend ? LegendState.provide() : outer!;
+	// svelte-ignore state_referenced_locally
+	if (outer && legend === false) LegendState.silence();
 
 	/** What the figure adds to its automatic legend, when `legend` is `{ items, sections }`. */
 	const extension = $derived(

package/dist/layout/geometry/GeometryLayout.svelte

@@ -23,6 +23,7 @@
 	import RasterMarker from '../../markers/raster/RasterMarker.svelte';
 	import TickMarker from '../../markers/tick/TickMarker.svelte';
 	import TrailMarker from '../../markers/trail/TrailMarker.svelte';
+	import ViolinMarker from '../../markers/violin/ViolinMarker.svelte';
 	import WaffleMarker from '../../markers/waffle/WaffleMarker.svelte';
 	import DotMarker from '../../markers/dot/DotMarker.svelte';
 	import TextMarker from '../../markers/text/TextMarker.svelte';
@@ -39,6 +40,7 @@
 	import ContourClipMarker from '../../markers/contour/ContourClipMarker.svelte';
 	import InsetMarker from '../../markers/inset/InsetMarker.svelte';
 	import FrameClip from './FrameClip.svelte';
+	import MarkerOffset from './MarkerOffset.svelte';
 	import { getConfiguration } from '../../configuration/config.svelte';
 	import { usePlot } from '../plot/usePlot';
 	import { PlotMargins } from '../margins/PlotMargins.svelte';
@@ -48,7 +50,6 @@
 	import type { PlotHover } from '../hover/PlotHover.svelte';
 	import type { ScopedMarkerGroup } from '../../types/layout/geometry';
 	import type { GeoFeature } from '../../types/plots/data/geo';
-	import type { ChannelScalesConfig } from '../../types/layout/scales';
 	import { MarkerGrouping } from '../../phases/statistics/MarkerGrouping';
 	import { FrameClipping } from './FrameClipping';
 
@@ -75,7 +76,6 @@
 		markers = [],
 		seriesData = [],
 		scopedGroups = [],
-		channelScales = undefined,
 		ctrl,
 		numericMargins,
 		data = [],
@@ -91,8 +91,6 @@
 		seriesData?: Series<TSeries>[];
 		/** One entry per series that can own a `series`-scoped marker. Same `TSeries` as `seriesData`. */
 		scopedGroups?: ScopedMarkerGroup<TSeries>[];
-		/** This plot kind's own `color`/`grouping` channel config - the fallback a marker's own `scales` inherits when it sets none of its own. */
-		channelScales?: ChannelScalesConfig;
 		/** `BasePlotLayout`'s own hover controller. */
 		ctrl: PlotHover<TData>;
 		/** The plot's own resolved margins - places the content box an `inset` marker needs. */
@@ -122,7 +120,8 @@
 		const scope = scopedSeriesOf(marker);
 		if (scope) return `${scope}-${marker.type}-${i}`;
 		if (marker.type === 'rule') {
-			const v = typeof marker.value === 'function' ? i : marker.value;
+			// A rule over rows (`data`) has no value of its own to tell it from another one.
+			const v = typeof marker.value === 'function' || marker.data ? i : marker.value;
 			return `rule-${marker.axis}-${v}`;
 		}
 		if (marker.type === 'bar') return `bar-${marker.role}-${i}`;
@@ -130,7 +129,7 @@
 	}
 </script>
 
-{#snippet renderMarker(marker: MarkerConfig, rows: TData[] | TSeries[])}
+{#snippet drawMarker(marker: MarkerConfig, rows: TData[] | TSeries[])}
 	{#if marker.type === 'bar'}
 		<BarMarker marker={{ ...marker, data: marker.data ?? rows }} />
 	{:else if marker.type === 'line'}
@@ -173,12 +172,12 @@
 		<TickMarker marker={{ ...marker, data: marker.data ?? rows }} />
 	{:else if marker.type === 'trail'}
 		<TrailMarker marker={{ ...marker, data: marker.data ?? rows }} />
+	{:else if marker.type === 'violin'}
+		<ViolinMarker marker={{ ...marker, data: marker.data ?? rows }} />
 	{:else if marker.type === 'waffle'}
 		<WaffleMarker marker={{ ...marker, data: marker.data ?? rows }} />
 	{:else if marker.type === 'dot'}
-		<DotMarker
-			marker={{ ...marker, data: marker.data ?? rows, scales: marker.scales ?? channelScales }}
-		/>
+		<DotMarker marker={{ ...marker, data: marker.data ?? rows }} />
 	{:else if marker.type === 'text'}
 		<TextMarker marker={{ ...marker, data: marker.data ?? rows }} />
 	{:else if marker.type === 'rule'}
@@ -236,6 +235,12 @@
 	{/if}
 {/snippet}
 
+{#snippet renderMarker(marker: MarkerConfig, rows: TData[] | TSeries[])}
+	<MarkerOffset {marker}>
+		{@render drawMarker(marker, rows)}
+	</MarkerOffset>
+{/snippet}
+
 {#snippet renderScoped(marker: MarkerConfig, group: ScopedMarkerGroup<TSeries>)}
 	{#if marker.type === 'hover'}
 		{@const seriesPoints = ctrl.points.filter((p) => p.series === group.name)}

package/dist/layout/geometry/GeometryLayout.svelte.d.ts

@@ -4,7 +4,6 @@ import type { TooltipAnchorX, TooltipAnchorY } from '../../types/layout/tooltip'
 import type { PlotHover } from '../hover/PlotHover.svelte';
 import type { ScopedMarkerGroup } from '../../types/layout/geometry';
 import type { GeoFeature } from '../../types/plots/data/geo';
-import type { ChannelScalesConfig } from '../../types/layout/scales';
 declare function $$render<TData extends Record<string, unknown>, TSeries extends Record<string, unknown> = TData>(): {
     props: {
         /** The plot's own outer width/height - sizes the content box an `inset` marker needs. */
@@ -15,8 +14,6 @@ declare function $$render<TData extends Record<string, unknown>, TSeries extends
         seriesData?: Series<TSeries>[];
         /** One entry per series that can own a `series`-scoped marker. Same `TSeries` as `seriesData`. */
         scopedGroups?: ScopedMarkerGroup<TSeries>[];
-        /** This plot kind's own `color`/`grouping` channel config - the fallback a marker's own `scales` inherits when it sets none of its own. */
-        channelScales?: ChannelScalesConfig;
         /** `BasePlotLayout`'s own hover controller. */
         ctrl: PlotHover<TData>;
         /** The plot's own resolved margins - places the content box an `inset` marker needs. */

package/dist/layout/geometry/MarkerOffset.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { RowOffset } from '../../markers/utils/RowOffset';
+	import type { RowOffset as RowOffsetConfig } from '../../types/markers/channels/commonMarkerConfigWithRowOffset';
+
+	/**
+	 * Moves what it draws by the marker's `dx` and `dy` (the numbers; a function of
+	 * the row is each marker's own), as a translate of the whole marker - so any
+	 * marker kind can be offset, on a map too, where svelteplot ignores a mark's
+	 * own `dx`/`dy`. A `text` marker places its own labels, since its lanes and
+	 * flips depend on the offset.
+	 */
+	let {
+		marker,
+		children
+	}: {
+		marker: { type: string; dx?: RowOffsetConfig; dy?: RowOffsetConfig };
+		children: Snippet;
+	} = $props();
+
+	const offset = $derived(marker.type === 'text' ? { dx: 0, dy: 0 } : RowOffset.whole(marker));
+</script>
+
+{#if offset.dx !== 0 || offset.dy !== 0}
+	<g transform="translate({offset.dx},{offset.dy})">{@render children()}</g>
+{:else}
+	{@render children()}
+{/if}

package/dist/layout/geometry/MarkerOffset.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import type { RowOffset as RowOffsetConfig } from '../../types/markers/channels/commonMarkerConfigWithRowOffset';
+type $$ComponentProps = {
+    marker: {
+        type: string;
+        dx?: RowOffsetConfig;
+        dy?: RowOffsetConfig;
+    };
+    children: Snippet;
+};
+declare const MarkerOffset: import("svelte").Component<$$ComponentProps, {}, "">;
+type MarkerOffset = ReturnType<typeof MarkerOffset>;
+export default MarkerOffset;

package/dist/layout/grid/GridCell.svelte

@@ -96,14 +96,12 @@
 		</div>
 	{/if}
 	{#if ready && layout && layout.box.width > 0 && layout.box.height > 0}
-		{#key JSON.stringify(layout.box.margins ?? null)}
-			{@render children({
-				width: layout.box.width,
-				height: layout.box.height,
-				margins: layout.box.margins,
-				edges: layout.edges
-			})}
-		{/key}
+		{@render children({
+			width: layout.box.width,
+			height: layout.box.height,
+			margins: layout.box.margins,
+			edges: layout.edges
+		})}
 	{/if}
 </div>
 

package/dist/layout/legend/ContinuousSection.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { untrack } from 'svelte';
 	import type { ContinuousLegendSection } from '../../types/layout/legend';
-	import { makeColorScale, resolveColorScale } from '../../utils/color';
+	import { ColorRamp } from '../../utils/color';
 	import { getConfiguration } from '../../configuration/config.svelte';
 	import { AxisNumberFormat } from './AxisNumberFormat';
 	import { LegendState } from './LegendState.svelte';
@@ -10,6 +10,7 @@
 
 	const cfg = $derived(getConfiguration());
 	const gradientId = `dct-grad-${Math.random().toString(36).slice(2)}`;
+	const checkerId = `dct-checker-${Math.random().toString(36).slice(2)}`;
 	const barWidth = $derived(section.width ?? 170);
 
 	const fmt = $derived(section.format ?? AxisNumberFormat.of([section.min, section.max], cfg));
@@ -31,6 +32,7 @@
 	const svgHeight = $derived(cfg.legend.continuous.height);
 	const barHeight = $derived(cfg.legend.continuous.barHeight);
 	const barRadius = $derived(cfg.legend.continuous.barRadius);
+	const opacityLook = $derived(cfg.legend.continuous.opacity);
 
 	// Fill/opacity for the excluded-margin rects.
 	const excludedStyle = $derived.by((): { fill: string; opacity: number } => {
@@ -79,16 +81,18 @@
 	);
 	const colorScale = $derived(
 		section.scheme !== undefined
-			? resolveColorScale({ scheme: section.scheme, pivot: section.pivot }, colorDomain, [
+			? ColorRamp.resolve({ scheme: section.scheme, pivot: section.pivot }, colorDomain, [
 					cfg.continuous.min,
 					cfg.continuous.max
 				])
-			: makeColorScale(
-					colorDomain[0],
-					colorDomain[1],
-					section.colorMin ?? cfg.continuous.min,
-					section.colorMax ?? cfg.continuous.max
-				)
+			: cfg.continuous.scheme && section.colorMin === undefined && section.colorMax === undefined
+				? ColorRamp.continuous(cfg, undefined, colorDomain)
+				: ColorRamp.between(
+						colorDomain[0],
+						colorDomain[1],
+						section.colorMin ?? cfg.continuous.min,
+						section.colorMax ?? cfg.continuous.max
+					)
 	);
 
 	const stops = $derived(
@@ -98,7 +102,7 @@
 			return section.opacity
 				? {
 						offset: t * 100,
-						color: section.colorMin ?? 'currentColor',
+						color: section.colorMin ?? opacityLook.color,
 						opacity: section.opacity[0] + t * (section.opacity[1] - section.opacity[0])
 					}
 				: { offset: t * 100, color: colorScale(v), opacity: 1 };
@@ -203,7 +207,38 @@
 					<stop offset="{s.offset}%" stop-color={s.color} stop-opacity={s.opacity} />
 				{/each}
 			</linearGradient>
+			{#if section.opacity}
+				<pattern
+					id={checkerId}
+					width={opacityLook.checker.size * 2}
+					height={opacityLook.checker.size * 2}
+					patternUnits="userSpaceOnUse"
+				>
+					<rect width="100%" height="100%" fill={opacityLook.checker.light} />
+					<rect
+						width={opacityLook.checker.size}
+						height={opacityLook.checker.size}
+						fill={opacityLook.checker.dark}
+					/>
+					<rect
+						x={opacityLook.checker.size}
+						y={opacityLook.checker.size}
+						width={opacityLook.checker.size}
+						height={opacityLook.checker.size}
+						fill={opacityLook.checker.dark}
+					/>
+				</pattern>
+			{/if}
 		</defs>
+		{#if section.opacity}
+			<rect
+				x={handleBleed}
+				width={trackWidth}
+				height={barHeight}
+				rx={barRadius}
+				fill="url(#{checkerId})"
+			/>
+		{/if}
 		<rect
 			x={handleBleed}
 			width={trackWidth}

package/dist/layout/legend/DiscreteBadgeItem.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { contrastTextColor } from '../../utils/color';
+	import { CssColor } from '../../utils/color';
 	import { getConfiguration } from '../../configuration/config.svelte';
 	import { LegendText } from './LegendText';
 	import DiscreteSymbolIcon from './DiscreteSymbolIcon.svelte';
@@ -24,7 +24,7 @@
 		omitMode?: boolean;
 	} = $props();
 	const cfg = $derived(getConfiguration());
-	const textColor = $derived(contrastTextColor(color));
+	const textColor = $derived(CssColor.contrastText(color));
 </script>
 
 <span class="dct-discrete__badge" style:background={color} style:color={textColor}>

package/dist/layout/legend/DiscreteSection.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { SvelteSet } from 'svelte/reactivity';
 	import { getConfiguration } from '../../configuration/config.svelte';
-	import { paletteColor } from '../../utils/color';
+	import { Palette } from '../../utils/color';
 	import { LegendState } from './LegendState.svelte';
 	import { DisabledStyle } from './DisabledStyle';
 	import DiscreteBadgeItem from './DiscreteBadgeItem.svelte';
@@ -167,7 +167,7 @@
 		disabledStyle?.fill ??
 		disabledStyle?.stroke?.stroke ??
 		item.color ??
-		paletteColor(i, cfg.palette)}
+		Palette.at(i, cfg.palette)}
 	{@const itemOpacity = disabledStyle
 		? (disabledStyle.opacity ?? cfg.legend.disabledOpacity)
 		: (item.opacity ?? 1)}

package/dist/layout/legend/DiscreteSymbolIcon.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { LegendItem } from '../../types/layout/legend';
 	import type { LineStyle } from '../../types/plots/constants';
-	import { SymbolPath } from '../../utils/symbol';
+	import { SymbolPath } from '../../utils/SymbolPath';
 
 	/**
 	 * The series' symbol/line-style icon, shared by both discrete item looks

package/dist/layout/legend/LegendChannels.js

@@ -1,11 +1,11 @@
-import { resolveAccessor } from '../../plots/utils/accessors';
+import { resolveAccessor } from '../../utils/accessors';
 import { getConfiguration } from '../../configuration/config.svelte';
 import { ChannelName } from '../../plots/utils/ChannelName';
 import { MarkerKinds } from '../../markers/MarkerKinds';
 import { ContinuousDomain } from '../../utils/ContinuousDomain';
-import { resolveColorScale } from '../../utils/color';
-import { resolveOpacityScale } from '../../utils/opacity';
-import { resolveSymbolScale } from '../../utils/symbol';
+import { ColorRamp } from '../../utils/color';
+import { OpacityScale } from '../../utils/OpacityScale';
+import { SymbolScale } from '../../utils/SymbolScale';
 /**
  * What a plot's value channels - `color`, `opacity`, `r` and `symbol` - draw
  * with, as legend entries: the plot's own (a heatmap's cells, a map's
@@ -17,6 +17,7 @@ export class LegendChannels {
         const taken = new Set((plot.resolvedSeries ?? []).map((s) => s.name));
         return [
             ...LegendChannels.#plotColor(plot),
+            ...LegendChannels.#segmentColors(plot),
             ...markers.flatMap((marker) => LegendChannels.#markerColor(marker, taken)),
             ...LegendChannels.#plotOpacity(plot),
             ...markers.flatMap((marker) => LegendChannels.#markerOpacity(marker, plot)),
@@ -45,6 +46,15 @@ export class LegendChannels {
     static #title(channel, property) {
         return typeof channel === 'string' ? channel : ChannelName.of(channel, property);
     }
+    /** The domain svelteplot sizes with: the configured one or the values' own, taken down to 0 unless `zero` is off. */
+    static #sizeDomain(scale, values) {
+        const [low, high] = scale?.domain ?? [Math.min(...values), Math.max(...values)];
+        return scale?.zero === false ? [low, high] : [Math.min(0, low), Math.max(0, high)];
+    }
+    /** A plot channel's name: its field key, or the name of the function that computes it. */
+    static #sourceTitle(source, property) {
+        return typeof source === 'string' ? source : ChannelName.of(source, property);
+    }
     /** `marker`'s rows read through `channel` (a field or a function), without the missing and non-finite ones. */
     static #values(marker, channel) {
         if (channel === undefined || channel === null || typeof channel === 'number')
@@ -102,6 +112,11 @@ export class LegendChannels {
             LegendChannels.#scaleEntry(typeof source === 'string' ? source : undefined, domain, scale)
         ];
     }
+    /** One continuous ramp per segment that sets its own, over the values of just its own features. */
+    static #segmentColors(plot) {
+        const source = plot.channels?.color?.source;
+        return (plot.colorRamps ?? []).map(({ name, domain, scale }) => LegendChannels.#scaleEntry(typeof source === 'string' ? `${source} (${name})` : name, domain, scale));
+    }
     /**
      * A marker's `color` channel: a continuous scale for numbers; for
      * categories, one item each in the color the marker draws it, unless a
@@ -118,7 +133,7 @@ export class LegendChannels {
             return domain ? [LegendChannels.#scaleEntry(title, domain, scale)] : [];
         }
         const categories = [...new Set(values.map(String))];
-        const colorOf = resolveColorScale(scale, categories, getConfiguration().palette);
+        const colorOf = ColorRamp.resolve(scale, categories, getConfiguration().palette);
         const mark = MarkerKinds.of(marker.type)?.legendSymbol;
         return categories
             .filter((name) => !taken.has(name))
@@ -127,7 +142,7 @@ export class LegendChannels {
     static #opacityEntry(title, domain, scale, color) {
         if (scale?.range !== undefined && !Array.isArray(scale.range))
             return [];
-        const read = resolveOpacityScale(scale, domain, getConfiguration().continuous.opacityRange);
+        const read = OpacityScale.resolve(scale, domain, getConfiguration().continuous.opacityRange);
         return [
             {
                 type: 'opacity',
@@ -141,13 +156,20 @@ export class LegendChannels {
             }
         ];
     }
-    /** The plot's own numeric `opacity` channel, over the `opacityDomain` it hands over. */
+    /**
+     * The plot's own numeric `opacity` channel, over the `opacityDomain` it hands
+     * over, in its series' color - unless a `color` channel colors the marks, and
+     * no one color stands for them.
+     */
     static #plotOpacity(plot) {
         if (!plot.opacityDomain)
             return [];
         const source = plot.channels?.opacity?.source;
         const name = plot.resolvedSeries?.[0]?.name;
-        const color = name !== undefined && name !== 'default' ? plot.colorForSeries?.(name) : undefined;
+        const colored = plot.channels?.color?.source !== undefined || !!plot.colorDomain;
+        const color = !colored && name !== undefined && name !== 'default'
+            ? plot.colorForSeries?.(name)
+            : undefined;
         return LegendChannels.#opacityEntry(typeof source === 'string' ? source : undefined, plot.opacityDomain, plot.scales?.opacity, color);
     }
     /** A marker's numeric `opacity` channel, in the color the marker draws. */
@@ -176,13 +198,14 @@ export class LegendChannels {
         if (values.length === 0)
             return [];
         const { filled, color, symbol } = LegendChannels.look(sized);
-        const source = plot.channels?.r?.source ?? LegendChannels.#title(sized[0].r, 'r');
+        const source = LegendChannels.#sourceTitle(plot.channels?.r?.source, 'r') ??
+            LegendChannels.#title(sized[0].r, 'r');
         return [
             {
                 type: 'size',
                 channel: 'r',
                 ...(typeof source === 'string' ? { title: source } : {}),
-                domain: plot.scales?.r?.domain ?? [0, Math.max(...values)],
+                domain: LegendChannels.#sizeDomain(plot.scales?.r, values),
                 range: plot.scales?.r?.range ?? [0, 10],
                 ...(color ? { color } : {}),
                 filled,
@@ -204,9 +227,10 @@ export class LegendChannels {
             shaped.flatMap((marker) => LegendChannels.#values(marker, marker.symbol).map(String))).filter((value, i, all) => all.indexOf(value) === i);
         if (domain.length === 0)
             return [];
-        const shapeOf = resolveSymbolScale(config, domain, getConfiguration().symbols);
+        const shapeOf = SymbolScale.resolve(config, domain, getConfiguration().symbols);
         const { filled, color } = LegendChannels.look(shaped);
-        const source = plot.channels?.symbol?.source ?? LegendChannels.#title(shaped[0].symbol, 'symbol');
+        const source = LegendChannels.#sourceTitle(plot.channels?.symbol?.source, 'symbol') ??
+            LegendChannels.#title(shaped[0].symbol, 'symbol');
         return [
             {
                 type: 'symbol',

package/dist/layout/legend/LegendLayout.svelte

@@ -15,10 +15,18 @@
 	const defaultItemsLayout = $derived<LegendItemsLayout>(
 		sections.length === 1 ? { type: 'horizontal' } : { type: 'vertical' }
 	);
+
+	// Sections of different channels can share a title, so a key leads with its channel; a repeat takes its position.
+	const keys = $derived.by(() => {
+		const bases = sections.map(
+			(section) => `${'channel' in section ? section.channel : section.type}:${section.title ?? ''}`
+		);
+		return bases.map((base, i) => (bases.indexOf(base) === i ? base : `${base}:${i}`));
+	});
 </script>
 
 <div class="dct-legend">
-	{#each sections as section, i (section.title ?? i)}
+	{#each sections as section, i (keys[i])}
 		<div class="dct-legend__section">
 			{#if section.title}
 				<div class="dct-legend__title">{section.title}</div>

package/dist/layout/legend/LegendState.svelte.d.ts

@@ -18,6 +18,10 @@ export declare class LegendState {
     static current(): LegendState | null;
     /** A new legend, shared with everything below. Call during component init. */
     static provide(): LegendState;
+    /** Keeps the plots below out of the enclosing legend: they still follow its toggles, but add nothing to it. Call during component init. */
+    static silence(): void;
+    /** Whether the plots here are kept out of the enclosing legend (see {@link silence}). Call during component init. */
+    static isSilenced(): boolean;
     /** The enclosing figure's legend, or a private one for a legend drawn outside any. Call during component init. */
     static ensure(): LegendState;
     /** Whether `value` lies within `range`; a missing value always does. */