@fundar/data-chart-telling 1.1.0 → 1.2.0

package/dist/markers/text/TextMarker.svelte

@@ -3,6 +3,8 @@
 	import { usePlot } from '../../layout/plot/usePlot';
 	import { getConfiguration } from '../../configuration/config.svelte';
 	import { BandNudge } from '../utils/BandNudge';
+	import { RowOffset } from '../utils/RowOffset';
+	import RowOffsetMarks from '../utils/RowOffsetMarks.svelte';
 	import { Declutter } from './Declutter';
 	import { PlotMargins } from '../../layout/margins/PlotMargins.svelte';
 	import { Box } from '../../layout/margins/Box';
@@ -34,7 +36,12 @@
 	const text = $derived(marker.text ?? '');
 	const styles = $derived(marker.styles);
 
-	const displayData = $derived(data.length > 0 ? data : [{} as TData]);
+	// A label placed by a literal (or by the frame) draws once without rows; one placed by a field of its rows draws nothing.
+	const placedByRows = (position: unknown) =>
+		['string', 'function', 'symbol'].includes(typeof position);
+	const displayData = $derived(
+		data.length > 0 ? data : placedByRows(x) || placedByRows(y) ? [] : [{} as TData]
+	);
 	// Per-row accessors give literal values; an empty one takes the flat default.
 	const flatFill = $derived(styles?.fill ?? 'currentColor');
 	const fill = $derived.by(() => {
@@ -50,14 +57,27 @@
 	const fontWeight = $derived(styles?.fontWeight ?? 'normal');
 	const fontStyleProp = $derived(styles?.fontStyle ?? 'normal');
 	// An unresolved `'outside'` falls back to `'start'`.
-	const textAnchor = $derived<Exclude<TextAnchor, 'outside'>>(
-		styles?.textAnchor === 'outside' ? 'start' : (styles?.textAnchor ?? 'middle')
+	const anchorOf = (anchor: TextAnchor | undefined): Exclude<TextAnchor, 'outside'> =>
+		anchor === 'outside' ? 'start' : (anchor ?? 'middle');
+	const textAnchor = $derived(
+		anchorOf(
+			typeof marker.textAnchor === 'function'
+				? undefined
+				: (marker.textAnchor ?? styles?.textAnchor)
+		)
 	);
 	const lineAnchor = $derived(styles?.lineAnchor ?? 'middle');
 	// A label in a slice of its band sits off the band's middle, at its drawn width.
 	const nudge = $derived(BandNudge.of(plot.scales, marker.bandSlice));
-	const dx = $derived((styles?.dx ?? 0) + nudge.dx);
-	const dy = $derived((styles?.dy ?? 0) + nudge.dy);
+	// The fixed offset, which `declutter` and `edgeAware` place labels by; a function of the row moves each label after that, through `RowOffsetMarks`.
+	const fixedOffset = $derived(
+		RowOffset.whole(marker, { dx: styles?.dx ?? 0, dy: styles?.dy ?? 0 })
+	);
+	const dx = $derived(fixedOffset.dx + nudge.dx);
+	const dy = $derived(fixedOffset.dy + nudge.dy);
+	const anchorAt = (d: TData) =>
+		typeof marker.textAnchor === 'function' ? anchorOf(marker.textAnchor(d)) : textAnchor;
+	const projected = $derived(!!plot.scales.projection);
 
 	const declutter = $derived.by(() => {
 		if (!marker.declutter) return undefined;
@@ -67,11 +87,17 @@
 			elbowGap: own.elbowGap ?? defaults.elbowGap,
 			laneStep: own.laneStep ?? defaults.laneStep,
 			labelGap: own.labelGap ?? defaults.labelGap,
+			aligned: own.aligned,
+			flip: own.flip,
 			connector: { ...defaults.connector, ...own.connector }
 		};
 	});
 	const perRow = $derived(
-		!!declutter || !!marker.edgeAware || !!marker.onPointerEnter || !!marker.onPointerLeave
+		!!declutter ||
+			!!marker.edgeAware ||
+			!!marker.onPointerEnter ||
+			!!marker.onPointerLeave ||
+			typeof marker.textAnchor === 'function'
 	);
 	const dir = $derived(Math.sign(dx) || 1);
 
@@ -99,9 +125,13 @@
 		if ((!declutter && !marker.edgeAware) || !xScale || !yScale) return undefined;
 		const xOf = channel(x ?? 0);
 		const yOf = channel(y ?? 0);
+		// A band's position is its start; a mark sits at its middle.
+		const middle = (scale: typeof plot.scales.x) =>
+			scale?.type === 'band' ? scale.fn.bandwidth() / 2 : 0;
+		const [dx0, dy0] = [middle(plot.scales.x), middle(plot.scales.y)];
 		return displayData.map((d) => ({
-			px: Number(xScale(xOf(d) as never)),
-			py: Number(yScale(yOf(d) as never))
+			px: Number(xScale(xOf(d) as never)) + dx0,
+			py: Number(yScale(yOf(d) as never)) + dy0
 		}));
 	});
 
@@ -112,6 +142,8 @@
 					dx,
 					fontSize,
 					geometry: declutter,
+					forceAligned: declutter.aligned,
+					flip: declutter.flip,
 					bounds
 				})
 			: undefined
@@ -157,33 +189,40 @@
 	rowAnchor: typeof textAnchor,
 	rowLineAnchor: typeof lineAnchor
 )}
-	<Text
-		data={rows}
-		x={x ?? 0}
-		y={y ?? 0}
-		text={text ?? ''}
-		dx={rowDx}
-		dy={rowDy}
-		fill={fill as never}
-		fillOpacity={fillOpacity as never}
-		{fontSize}
-		{fontWeight}
-		textAnchor={rowAnchor}
-		lineAnchor={rowLineAnchor}
-		fontStyle={fontStyleProp}
-		lineHeight={styles?.lineHeight}
-		rotate={styles?.rotate}
-		stroke={styles?.stroke}
-		strokeWidth={styles?.strokeWidth}
-		paintOrder={styles?.paintOrder}
-		class={styles?.class}
-		textClass={styles?.textClass}
-	/>
+	<g transform={projected ? `translate(${rowDx},${rowDy})` : undefined}>
+		<Text
+			data={rows}
+			x={x ?? (marker.frameAnchor ? undefined : 0)}
+			y={y ?? (marker.frameAnchor ? undefined : 0)}
+			frameAnchor={marker.frameAnchor}
+			text={text ?? ''}
+			dx={projected ? 0 : rowDx}
+			dy={projected ? 0 : rowDy}
+			fill={fill as never}
+			fillOpacity={fillOpacity as never}
+			{fontSize}
+			{fontWeight}
+			textAnchor={rowAnchor}
+			lineAnchor={rowLineAnchor}
+			fontStyle={fontStyleProp}
+			lineHeight={styles?.lineHeight}
+			rotate={styles?.rotate}
+			stroke={styles?.stroke}
+			strokeWidth={styles?.strokeWidth}
+			paintOrder={styles?.paintOrder}
+			class={styles?.class}
+			textClass={styles?.textClass}
+		/>
+	</g>
 {/snippet}
 
 {#snippet labels()}
 	{#if !perRow}
-		{@render label(displayData, dx, dy, textAnchor, lineAnchor)}
+		<RowOffsetMarks {marker} rows={displayData}>
+			{#snippet mark(rows)}
+				{@render label(rows, dx, dy, textAnchor, lineAnchor)}
+			{/snippet}
+		</RowOffsetMarks>
 	{:else if (!declutter && !marker.edgeAware) || points}
 		<!-- A decluttered or edge-aware label waits for both scales. -->
 		{#each displayData as d, i (i)}
@@ -213,23 +252,27 @@
 				onpointerenter={marker.onPointerEnter && (() => marker.onPointerEnter?.(d))}
 				onpointerleave={marker.onPointerLeave && (() => marker.onPointerLeave?.(d))}
 			>
-				{#if placement}
-					{@render label(
-						[d],
-						placement.dx,
-						placement.dy + extraDy,
-						placement.textAnchor,
-						placement.lineAnchor
-					)}
-				{:else}
-					{@render label(
-						[d],
-						labelDx,
-						dy + extraDy,
-						lane?.aligned && laneDir !== dir ? flipAnchor(textAnchor) : textAnchor,
-						lineAnchor
-					)}
-				{/if}
+				<RowOffsetMarks {marker} rows={[d]}>
+					{#snippet mark(rows)}
+						{#if placement}
+							{@render label(
+								rows,
+								placement.dx,
+								placement.dy + extraDy,
+								placement.textAnchor,
+								placement.lineAnchor
+							)}
+						{:else}
+							{@render label(
+								rows,
+								labelDx,
+								dy + extraDy,
+								lane?.aligned && laneDir !== dir ? flipAnchor(anchorAt(d)) : anchorAt(d),
+								lineAnchor
+							)}
+						{/if}
+					{/snippet}
+				</RowOffsetMarks>
 			</g>
 		{/each}
 	{/if}

package/dist/markers/tick/TickMarker.svelte

@@ -10,35 +10,37 @@
 
 	const plot = usePlot();
 	const isHorizontal = $derived(plot.axes?.isHorizontal ?? false);
+	const TickMark = $derived(isHorizontal ? TickX : TickY);
 
 	const cfg = $derived(getConfiguration());
 	const data = $derived(marker.data ?? []);
 	const channelStroke = $derived(MarkerChannels.buildFill(data, marker.color, marker.scales, cfg));
 	const stroke = $derived(channelStroke ?? marker.styles?.stroke ?? 'currentColor');
+
+	/**
+	 * A tick across a band axis spans the whole band, whatever `tickLength` says -
+	 * svelteplot reads it only off a band-less axis. A fixed `tickLength` there is
+	 * made true by insetting the tick from both edges of its band.
+	 */
+	const inset = $derived.by(() => {
+		const length = marker.tickLength;
+		const across = plot.svelteplot.scales[isHorizontal ? 'y' : 'x'];
+		if (typeof length !== 'number' || across.type !== 'band') return undefined;
+		return Math.max(0, (across.fn.bandwidth() - length) / 2);
+	});
+	/** svelteplot's tick marks read `inset` though their types do not list it. */
+	const insetProps = $derived((inset === undefined ? {} : { inset }) as Record<string, unknown>);
 </script>
 
-{#if isHorizontal}
-	<TickX
-		{data}
-		x={marker.x}
-		y={marker.y}
-		tickLength={marker.tickLength}
-		{stroke}
-		strokeWidth={marker.styles?.strokeWidth}
-		strokeOpacity={marker.styles?.strokeOpacity}
-		strokeDasharray={marker.styles?.strokeDasharray}
-		strokeLinecap={marker.styles?.strokeLinecap}
-	/>
-{:else}
-	<TickY
-		{data}
-		x={marker.x}
-		y={marker.y}
-		tickLength={marker.tickLength}
-		{stroke}
-		strokeWidth={marker.styles?.strokeWidth}
-		strokeOpacity={marker.styles?.strokeOpacity}
-		strokeDasharray={marker.styles?.strokeDasharray}
-		strokeLinecap={marker.styles?.strokeLinecap}
-	/>
-{/if}
+<TickMark
+	{data}
+	x={marker.x}
+	y={marker.y}
+	tickLength={marker.tickLength}
+	{...insetProps}
+	{stroke}
+	strokeWidth={marker.styles?.strokeWidth}
+	strokeOpacity={marker.styles?.strokeOpacity}
+	strokeDasharray={marker.styles?.strokeDasharray}
+	strokeLinecap={marker.styles?.strokeLinecap}
+/>

package/dist/markers/utils/MarkerChannels.d.ts

@@ -1,4 +1,5 @@
 import type { ChannelScalesConfig } from '../../types/layout/scales';
+import type { ProcessedData } from '../../types/phases';
 import type { SymbolType } from '../../types/plots/constants';
 import type { PlotStylesConfig } from '../../types/configuration/styling';
 /** One resolved opacity bucket: every row in `data` renders at exactly `value`. */
@@ -11,6 +12,29 @@ export type OpacityBucket<TData> = {
  * over its rows, shared by every marker kind that intersects `CommonMarkerConfig`.
  */
 export declare class MarkerChannels {
+    /**
+     * The scales a marker with none of its own draws with: the plot's, except
+     * a numeric color `domain` - it spans the plot's own values, so the
+     * marker's own values would all land at one end of it. The scheme (and
+     * pivot) carry over; the domain is read from the marker's own rows.
+     */
+    static inheritScales(own: ChannelScalesConfig | undefined, plot: ChannelScalesConfig | undefined): ChannelScalesConfig | undefined;
+    /** `markers`, each `dot` with no scales of its own carrying the plot's ({@link inheritScales}). */
+    static inheritAll<TMarker extends {
+        type: string;
+        scales?: ChannelScalesConfig;
+    }>(markers: TMarker[], plot: ChannelScalesConfig | undefined): TMarker[];
+    /**
+     * `markers`, each `bollinger` that draws the plot's own rows (it sets no `data`)
+     * and no `x` or `y` of its own, reading the plot's: they are the same rows, so
+     * the same channels place them.
+     */
+    static inheritPosition<TMarker extends {
+        type: string;
+        data?: unknown;
+        x?: unknown;
+        y?: unknown;
+    }>(markers: TMarker[], processed: ProcessedData | undefined): TMarker[];
     /**
      * Resolves a `CommonMarkerConfig` pair into a per-row fill accessor, or
      * `undefined` when `color` is unset (caller falls back to its own flat

package/dist/markers/utils/MarkerChannels.js

@@ -1,11 +1,45 @@
-import { resolveColorScale } from '../../utils/color';
-import { resolveOpacityScale } from '../../utils/opacity';
-import { resolveSymbolScale } from '../../utils/symbol';
+import { resolveAccessor } from '../../utils/accessors';
+import { ColorRamp } from '../../utils/color';
+import { OpacityScale } from '../../utils/OpacityScale';
+import { SymbolScale } from '../../utils/SymbolScale';
 /**
  * What a marker's own `color`, `symbol` and `opacity` channels resolve to,
  * over its rows, shared by every marker kind that intersects `CommonMarkerConfig`.
  */
 export class MarkerChannels {
+    /**
+     * The scales a marker with none of its own draws with: the plot's, except
+     * a numeric color `domain` - it spans the plot's own values, so the
+     * marker's own values would all land at one end of it. The scheme (and
+     * pivot) carry over; the domain is read from the marker's own rows.
+     */
+    static inheritScales(own, plot) {
+        if (own || !plot?.color)
+            return own ?? plot;
+        const { domain, ...color } = plot.color;
+        const numeric = Array.isArray(domain) && domain.every((v) => typeof v === 'number');
+        return { ...plot, color: numeric ? color : plot.color };
+    }
+    /** `markers`, each `dot` with no scales of its own carrying the plot's ({@link inheritScales}). */
+    static inheritAll(markers, plot) {
+        return markers.map((marker) => marker.type === 'dot' && !marker.scales
+            ? { ...marker, scales: MarkerChannels.inheritScales(undefined, plot) }
+            : marker);
+    }
+    /**
+     * `markers`, each `bollinger` that draws the plot's own rows (it sets no `data`)
+     * and no `x` or `y` of its own, reading the plot's: they are the same rows, so
+     * the same channels place them.
+     */
+    static inheritPosition(markers, processed) {
+        if (!processed)
+            return markers;
+        const read = (channel) => channel === undefined ? undefined : resolveAccessor(channel);
+        const plot = { x: read(processed.channels.x), y: read(processed.channels.y) };
+        return markers.map((marker) => marker.type === 'bollinger' && marker.data === undefined
+            ? { ...marker, x: marker.x ?? plot.x, y: marker.y ?? plot.y }
+            : marker);
+    }
     /**
      * Resolves a `CommonMarkerConfig` pair into a per-row fill accessor, or
      * `undefined` when `color` is unset (caller falls back to its own flat
@@ -29,8 +63,9 @@ export class MarkerChannels {
         const domain = allNumeric
             ? [Math.min(...rawVals.map(Number)), Math.max(...rawVals.map(Number))]
             : [...new Set(rawVals.map(String))];
-        const defaultScheme = allNumeric ? [cfg.continuous.min, cfg.continuous.max] : cfg.palette;
-        const colorScale = resolveColorScale(scales?.color, domain, defaultScheme);
+        const colorScale = allNumeric
+            ? ColorRamp.continuous(cfg, scales?.color, domain)
+            : ColorRamp.resolve(scales?.color, domain, cfg.palette);
         return (d) => colorScale(colorFn(d));
     }
     /**
@@ -51,7 +86,7 @@ export class MarkerChannels {
         ];
         if (!domain.length)
             return undefined;
-        const scale = resolveSymbolScale(scales?.symbol, domain, cfg.symbols);
+        const scale = SymbolScale.resolve(scales?.symbol, domain, cfg.symbols);
         return (d) => scale(symbolFn(d));
     }
     /**
@@ -83,7 +118,7 @@ export class MarkerChannels {
         const domain = allNumeric
             ? [Math.min(...rawVals.map(Number)), Math.max(...rawVals.map(Number))]
             : [...new Set(rawVals.map(String))];
-        const scale = resolveOpacityScale(scales?.opacity, domain, cfg.continuous.opacityRange);
+        const scale = OpacityScale.resolve(scales?.opacity, domain, cfg.continuous.opacityRange);
         const buckets = new Map();
         for (const d of data) {
             const resolved = scale(opacityFn(d));

package/dist/markers/utils/RowOffset.d.ts

@@ -0,0 +1,23 @@
+import type { RowOffset as RowOffsetConfig } from '../../types/markers/channels/commonMarkerConfigWithRowOffset';
+type Offsets = {
+    dx?: RowOffsetConfig;
+    dy?: RowOffsetConfig;
+};
+type Pixels = {
+    dx: number;
+    dy: number;
+};
+/**
+ * A marker's `dx`/`dy`: numbers move the whole marker (drawn once by
+ * `MarkerOffset`), functions move each row (drawn by the marker itself, with
+ * `RowOffsetMarks`), so no part is applied twice.
+ */
+export declare class RowOffset {
+    /** The numeric part, for the whole marker; a part left unset takes `fallback`, a function counts as none. */
+    static whole(marker: Offsets, fallback?: Pixels): Pixels;
+    /** Whether any part of the offset is a function of the row. */
+    static isPerRow(marker: Offsets): boolean;
+    /** The functional part, for one row. */
+    static ofRow(marker: Offsets, row: unknown): Pixels;
+}
+export {};

package/dist/markers/utils/RowOffset.js

@@ -0,0 +1,23 @@
+/**
+ * A marker's `dx`/`dy`: numbers move the whole marker (drawn once by
+ * `MarkerOffset`), functions move each row (drawn by the marker itself, with
+ * `RowOffsetMarks`), so no part is applied twice.
+ */
+export class RowOffset {
+    /** The numeric part, for the whole marker; a part left unset takes `fallback`, a function counts as none. */
+    static whole(marker, fallback = { dx: 0, dy: 0 }) {
+        const part = (own, otherwise) => typeof own === 'function' ? 0 : (own ?? otherwise);
+        return { dx: part(marker.dx, fallback.dx), dy: part(marker.dy, fallback.dy) };
+    }
+    /** Whether any part of the offset is a function of the row. */
+    static isPerRow(marker) {
+        return typeof marker.dx === 'function' || typeof marker.dy === 'function';
+    }
+    /** The functional part, for one row. */
+    static ofRow(marker, row) {
+        return {
+            dx: typeof marker.dx === 'function' ? (marker.dx(row) ?? 0) : 0,
+            dy: typeof marker.dy === 'function' ? (marker.dy(row) ?? 0) : 0
+        };
+    }
+}

package/dist/markers/utils/RowOffsetMarks.svelte

@@ -0,0 +1,30 @@
+<script lang="ts" generics="TRow">
+	import type { Snippet } from 'svelte';
+	import { RowOffset } from './RowOffset';
+	import type { RowOffset as RowOffsetConfig } from '../../types/markers/channels/commonMarkerConfigWithRowOffset';
+
+	/**
+	 * Draws a marker's rows through `mark`, each moved by the marker's per-row
+	 * `dx`/`dy` (a function of the row). A fixed offset is not applied here -
+	 * `MarkerOffset` moves the whole marker. With no function offset, the rows
+	 * are drawn together as they are.
+	 */
+	let {
+		marker,
+		rows,
+		mark
+	}: {
+		marker: { dx?: RowOffsetConfig; dy?: RowOffsetConfig };
+		rows: TRow[];
+		mark: Snippet<[TRow[]]>;
+	} = $props();
+</script>
+
+{#if RowOffset.isPerRow(marker)}
+	{#each rows as row, index (index)}
+		{@const { dx, dy } = RowOffset.ofRow(marker, row)}
+		<g transform="translate({dx},{dy})">{@render mark([row])}</g>
+	{/each}
+{:else}
+	{@render mark(rows)}
+{/if}

package/dist/markers/utils/RowOffsetMarks.svelte.d.ts

@@ -0,0 +1,33 @@
+import type { Snippet } from 'svelte';
+import type { RowOffset as RowOffsetConfig } from '../../types/markers/channels/commonMarkerConfigWithRowOffset';
+declare function $$render<TRow>(): {
+    props: {
+        marker: {
+            dx?: RowOffsetConfig;
+            dy?: RowOffsetConfig;
+        };
+        rows: TRow[];
+        mark: Snippet<[TRow[]]>;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TRow> {
+    props(): ReturnType<typeof $$render<TRow>>['props'];
+    events(): ReturnType<typeof $$render<TRow>>['events'];
+    slots(): ReturnType<typeof $$render<TRow>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TRow>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TRow>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TRow>['props']>, ReturnType<__sveltets_Render<TRow>['events']>, ReturnType<__sveltets_Render<TRow>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TRow>['bindings']>;
+    } & ReturnType<__sveltets_Render<TRow>['exports']>;
+    <TRow>(internal: unknown, props: ReturnType<__sveltets_Render<TRow>['props']> & {}): ReturnType<__sveltets_Render<TRow>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const RowOffsetMarks: $$IsomorphicComponent;
+type RowOffsetMarks<TRow> = InstanceType<typeof RowOffsetMarks<TRow>>;
+export default RowOffsetMarks;

package/dist/markers/utils/RowStroke.d.ts

@@ -0,0 +1,31 @@
+import type { StrokeStyle } from '../../types/plots/styling';
+/** A stroke channel per row: a field key of the row, or a function of it. */
+type RowChannel<T> = string | ((d: never) => T) | undefined;
+/**
+ * The stroke of a line-like marker that takes it row by row (a `rule`, an
+ * `arrow`): each of `stroke`, `strokeWidth` and `strokeOpacity` is a field of
+ * the row or a function of it, else the marker's own `styles`, else a default.
+ * A color and an opacity per row are drawn as they are - svelteplot would map
+ * them through its own color and opacity scales.
+ */
+export declare class RowStroke {
+    #private;
+    /** The props a mark takes for `channels`, over `styles` and the given `fallback`s. */
+    static of(channels: {
+        stroke?: RowChannel<string | undefined>;
+        strokeWidth?: RowChannel<number>;
+        strokeOpacity?: RowChannel<number>;
+    }, styles: StrokeStyle | undefined, fallback: {
+        stroke: string;
+        strokeWidth?: number;
+        strokeOpacity?: number;
+    }): {
+        stroke: string | {
+            value: (d: Record<string, unknown>) => string | undefined;
+            scale: null;
+        };
+        strokeWidth: number | ((d: Record<string, unknown>) => number) | undefined;
+        strokeOpacity: never;
+    };
+}
+export {};

package/dist/markers/utils/RowStroke.js

@@ -0,0 +1,28 @@
+/**
+ * The stroke of a line-like marker that takes it row by row (a `rule`, an
+ * `arrow`): each of `stroke`, `strokeWidth` and `strokeOpacity` is a field of
+ * the row or a function of it, else the marker's own `styles`, else a default.
+ * A color and an opacity per row are drawn as they are - svelteplot would map
+ * them through its own color and opacity scales.
+ */
+export class RowStroke {
+    /** A per-row channel as the function svelteplot reads. */
+    static #accessor(channel) {
+        return typeof channel === 'string'
+            ? (d) => d[channel]
+            : channel;
+    }
+    /** The props a mark takes for `channels`, over `styles` and the given `fallback`s. */
+    static of(channels, styles, fallback) {
+        const color = RowStroke.#accessor(channels.stroke);
+        const width = RowStroke.#accessor(channels.strokeWidth);
+        const opacity = RowStroke.#accessor(channels.strokeOpacity);
+        return {
+            stroke: color ? { value: color, scale: null } : (styles?.stroke ?? fallback.stroke),
+            strokeWidth: width ?? styles?.strokeWidth ?? fallback.strokeWidth,
+            strokeOpacity: (opacity
+                ? { value: opacity, scale: null }
+                : (styles?.strokeOpacity ?? fallback.strokeOpacity))
+        };
+    }
+}

package/dist/markers/violin/ViolinMarker.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import { usePlot } from '../../layout/plot/usePlot';
+	import { getConfiguration } from '../../configuration/config.svelte';
+	import { resolveAccessor } from '../../utils/accessors';
+	import { ViolinProfiles } from './ViolinProfiles';
+	import type { ViolinMarkerConfig } from '../../types/markers/common';
+	import type { ProcessedRow } from '../../types/phases';
+
+	/**
+	 * Renders one `'violin'` marker: for each category of its rows, the density
+	 * curve mirrored around the middle of the category's band, or of the share of
+	 * it the marker's `slot` takes. The curve is drawn on the plot's own scales;
+	 * the plot's axes say which of `x`/`y` holds the category.
+	 */
+	let { marker }: { marker: ViolinMarkerConfig } = $props();
+
+	const plot = usePlot();
+	const cfg = $derived(getConfiguration());
+	const isHorizontal = $derived(plot.axes?.isHorizontal ?? false);
+	const categoryScale = $derived(
+		isHorizontal ? plot.svelteplot.scales.y : plot.svelteplot.scales.x
+	);
+	const valueScale = $derived(isHorizontal ? plot.svelteplot.scales.x : plot.svelteplot.scales.y);
+
+	const data = $derived((marker.data ?? []) as ProcessedRow[]);
+	const profiles = $derived(
+		ViolinProfiles.of(
+			data,
+			{
+				category: resolveAccessor((isHorizontal ? marker.y : marker.x) as never),
+				value: resolveAccessor((isHorizontal ? marker.x : marker.y) as never)
+			},
+			{ kernel: marker.kernel, bandwidth: marker.bandwidth, trim: marker.trim }
+		)
+	);
+
+	const slotIndex = $derived(marker.slot?.index ?? 0);
+	const slotCount = $derived(marker.slot?.count ?? 1);
+	const bandwidth = $derived(categoryScale?.type === 'band' ? categoryScale.fn.bandwidth() : 0);
+	const share = $derived(bandwidth / slotCount);
+
+	/** The pixel point at `along` the value axis and `across` the category axis. */
+	const point = (across: number, along: number): [number, number] =>
+		isHorizontal ? [along, across] : [across, along];
+	const at = (value: number) => Number(valueScale?.fn?.(value as never));
+
+	const shapes = $derived.by(() => {
+		if (categoryScale?.type !== 'band' || !valueScale?.fn) return [];
+		return profiles.flatMap((profile) => {
+			const start = Number(categoryScale.fn(profile.category as never));
+			if (!Number.isFinite(start)) return [];
+			const center = start + share * slotIndex + share / 2;
+			const full = marker.peak ?? Math.max(...profile.curve.map((p) => p.density));
+			const half = (density: number) => (full > 0 ? (density / full) * (share / 2) : 0);
+			const side = (sign: 1 | -1) =>
+				profile.curve.map((p) => point(center + sign * half(p.density), at(p.value)));
+			const outline = [...side(-1), ...side(1).reverse()];
+			return [outline.map(([x, y], i) => `${i ? 'L' : 'M'}${x},${y}`).join('') + 'Z'];
+		});
+	});
+</script>
+
+<g class="dct-violin">
+	{#each shapes as d, i (i)}
+		<path
+			{d}
+			fill={marker.styles?.fill}
+			fill-opacity={marker.styles?.fillOpacity ?? cfg.violin.fillOpacity}
+			stroke={marker.styles?.stroke}
+			stroke-width={marker.styles?.strokeWidth}
+			stroke-opacity={marker.styles?.strokeOpacity}
+			stroke-dasharray={marker.styles?.strokeDasharray}
+		/>
+	{/each}
+</g>

package/dist/markers/violin/ViolinMarker.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { ViolinMarkerConfig } from '../../types/markers/common';
+type $$ComponentProps = {
+    marker: ViolinMarkerConfig;
+};
+declare const ViolinMarker: import("svelte").Component<$$ComponentProps, {}, "">;
+type ViolinMarker = ReturnType<typeof ViolinMarker>;
+export default ViolinMarker;