@rokkit/chart 1.3.6 → 1.3.8

package/dist/geoms/lib/bars.js

@@ -33,27 +33,63 @@ function subBandFields(channels) {
 	return out
 }
 
-export function buildGroupedBars(data, channels, xScale, yScale, colors, innerHeight, patterns) {
+/**
+ * The one bar builder. Expresses each bar in abstract (category, value) space and maps it to
+ * screen via `place()`, so it renders vertical or horizontal (flip) with the same code.
+ *
+ * Category (x) positioning has two modes:
+ * - band (default): a scaleBand slots each category; sub-bands split grouped series.
+ * - continuous (`continuousCategory`): a LINEAR position scale (e.g. a bar-chart race's tweened
+ *   `_rank`). Each bar centres on `xScale(pos)` with a fixed thickness from the scale step, so a
+ *   fractional position tweens smoothly (a band scale can only jump between slots). No sub-banding.
+ */
+export function buildBars(
+	data,
+	channels,
+	xScale,
+	yScale,
+	colors,
+	innerHeight,
+	patterns,
+	place = (x, y) => ({ x, y }),
+	continuousCategory = false
+) {
 	const { x: xf, y: yf, color: cf, pattern: pf } = channels
 
-	const bandScale = ensureBandX(xScale, data, xf)
-
-	// Sub-banding: only fields that differ from x drive grouping within a band
-	const subFields = subBandFields(channels)
+	const subFields = continuousCategory ? [] : subBandFields(channels)
 	const getSubKey = (d) => subFields.map((f) => String(d[f])).join('::')
-	const subDomain = subFields.length > 0 ? [...new Set(data.map(getSubKey))] : []
-	const subScale =
-		subDomain.length > 1
-			? scaleBand().domain(subDomain).range([0, bandScale.bandwidth()]).padding(0.05)
-			: null
-
-	// Baseline for bars: at y=0 when domain spans zero (supports negative bars),
-	// otherwise at the bottom of the chart area.
+
+	let positionOf
+	let thicknessOf
+	if (continuousCategory) {
+		const [r0, r1] = xScale.range()
+		const [d0, d1] = xScale.domain()
+		const step = Math.max(Math.abs(r0 - r1) / Math.max(d1 - d0, 1), 1)
+		const thickness = step * 0.9
+		thicknessOf = () => thickness
+		positionOf = (d) => (xScale(Number(d[xf])) ?? 0) - thickness / 2
+	} else {
+		const bandScale = ensureBandX(xScale, data, xf)
+		const subDomain = subFields.length > 0 ? [...new Set(data.map(getSubKey))] : []
+		const subScale =
+			subDomain.length > 1
+				? scaleBand().domain(subDomain).range([0, bandScale.bandwidth()]).padding(0.05)
+				: null
+		thicknessOf = () => (subScale ? subScale.bandwidth() : bandScale.bandwidth())
+		positionOf = (d) => {
+			const bandX = bandScale(d[xf]) ?? 0
+			const subX = subScale ? (subScale(getSubKey(d)) ?? 0) : 0
+			return bandX + subX
+		}
+	}
+
+	// Value baseline: at value=0 when the domain spans zero (supports negative bars), else the
+	// value-axis origin (yScale.range()[0] — innerHeight when vertical, 0 when flipped).
 	const yDomain = typeof yScale.bandwidth !== 'function' ? yScale.domain?.() : null
 	const baseline =
 		yDomain && yDomain[0] <= 0 && yDomain[yDomain.length - 1] >= 0
-			? (yScale(0) ?? innerHeight)
-			: innerHeight
+			? (yScale(0) ?? yScale.range()[0])
+			: yScale.range()[0]
 
 	return data.map((d, i) => {
 		const xVal = d[xf]
@@ -68,19 +104,26 @@ export function buildGroupedBars(data, channels, xScale, yScale, colors, innerHe
 				? toPatternId(String(patternKey))
 				: null
 
-		const bandX = bandScale(xVal) ?? 0
-		const subX = subScale && subKey ? (subScale(subKey) ?? 0) : 0
-		const barX = bandX + subX
-		const barWidth = subScale ? subScale.bandwidth() : bandScale.bandwidth()
-		const barY = yScale(d[yf]) ?? baseline
+		const barBand = positionOf(d)
+		const barThickness = thicknessOf(d)
+		const barValue = yScale(d[yf]) ?? baseline
+		// Two opposite corners in (band, value) space, placed to screen — transposes under flip.
+		const c1 = place(barBand, baseline)
+		const c2 = place(barBand + barThickness, barValue)
+
+		// Continuous mode keys by _entity so Svelte reuses each bar as its position tweens (a
+		// race's rows reorder every frame); band mode keys by category + sub-band + index.
+		const key = continuousCategory
+			? `${String(d._entity ?? xVal)}::${String(colorKey ?? '')}`
+			: `${String(xVal)}::${subKey}::${i}`
 
 		return {
 			data: d,
-			key: `${String(xVal)}::${subKey}::${i}`,
-			x: barX,
-			y: Math.min(barY, baseline),
-			width: barWidth,
-			height: Math.abs(baseline - barY),
+			key,
+			x: Math.min(c1.x, c2.x),
+			y: Math.min(c1.y, c2.y),
+			width: Math.abs(c2.x - c1.x),
+			height: Math.abs(c2.y - c1.y),
 			fill: colorEntry.fill,
 			stroke: colorEntry.stroke,
 			patternId
@@ -88,7 +131,7 @@ export function buildGroupedBars(data, channels, xScale, yScale, colors, innerHe
 	})
 }
 
-export function buildStackedBars(data, channels, xScale, yScale, colors, innerHeight, patterns) {
+export function buildStackedBars(data, channels, xScale, yScale, colors, innerHeight, patterns, place = (x, y) => ({ x, y })) {
 	const { x: xf, y: yf, color: cf, pattern: pf } = channels
 
 	const bandScale = ensureBandX(xScale, data, xf)
@@ -96,7 +139,7 @@ export function buildStackedBars(data, channels, xScale, yScale, colors, innerHe
 	// Stack dimension: first non-x grouping field (prefer pattern, then color)
 	const subFields = subBandFields(channels)
 	if (subFields.length === 0) {
-		return buildGroupedBars(data, channels, xScale, yScale, colors, innerHeight, patterns)
+		return buildBars(data, channels, xScale, yScale, colors, innerHeight, patterns, place)
 	}
 	const stackField = subFields[0]
 
@@ -152,72 +195,3 @@ export function buildStackedBars(data, channels, xScale, yScale, colors, innerHe
 	}
 	return bars
 }
-
-export function buildHorizontalBars(data, channels, xScale, yScale, colors, _innerHeight) {
-	const { x: xf, y: yf, color: cf } = channels
-	const isBand = typeof yScale?.bandwidth === 'function'
-
-	if (!isBand) {
-		// Linear y-scale: rank-based bar chart race.
-		// Each row has a numeric _rank that tweens smoothly between frames.
-		// No sub-grouping — each rank position holds exactly one entity.
-		const [r0, r1] = yScale.range() // [innerHeight, 0]
-		const [d0, d1] = yScale.domain() // [0, N-1]
-		const step = Math.max(Math.abs(r0 - r1) / Math.max(d1 - d0, 1), 1)
-		const barH = step * 0.9
-
-		return data.map((d) => {
-			const rankVal = Number(d[yf])
-			const colorKey = cf ? d[cf] : null
-			const colorEntry =
-				colors?.get(colorKey) ??
-				colors?.values().next().value ?? { fill: '#888', stroke: '#888' }
-
-			const centerY = yScale(rankVal) ?? 0
-			return {
-				data: d,
-				// Key by entity name (_entity) so Svelte reuses elements as rank tweens
-				key: `${String(d._entity ?? d[yf])}::${String(colorKey ?? '')}`,
-				x: 0,
-				y: centerY - barH / 2,
-				width: xScale(d[xf]) ?? 0,
-				height: barH,
-				fill: colorEntry.fill,
-				stroke: colorEntry.stroke,
-				patternId: null
-			}
-		})
-	}
-
-	// Band scale: standard grouped horizontal bars.
-	// Only create sub-bands when multiple entities share the same y-band (true grouping).
-	const yVals = new Set(data.map((d) => d[yf]))
-	const colorKeys = cf && !isLiteralColor(cf) ? [...new Set(data.map((d) => d[cf]))] : []
-	const hasSubBands = colorKeys.length > 1 && data.length > yVals.size
-	const subScale = hasSubBands
-		? scaleBand().domain(colorKeys).range([0, yScale.bandwidth()]).padding(0.05)
-		: null
-
-	return data.map((d) => {
-		const yVal = d[yf]
-		const colorKey = cf ? d[cf] : null
-		const colorEntry =
-			colors?.get(colorKey) ??
-			colors?.values().next().value ?? { fill: '#888', stroke: '#888' }
-
-		const bandY = yScale(yVal) ?? 0
-		const subY = subScale ? (subScale(colorKey) ?? 0) : 0
-
-		return {
-			data: d,
-			key: `${String(yVal)}::${String(colorKey ?? '')}`,
-			x: 0,
-			y: bandY + subY,
-			width: xScale(d[xf]) ?? 0,
-			height: subScale ? subScale.bandwidth() : yScale.bandwidth(),
-			fill: colorEntry.fill,
-			stroke: colorEntry.stroke,
-			patternId: null
-		}
-	})
-}

package/dist/index.d.ts

@@ -8,6 +8,17 @@ export namespace Plot {
     export { Area };
     export { Point };
     export { Arc };
+    export { Highlight };
+    export { Trend };
+    export { Box };
+    export { Violin };
+    export { Jitter };
+    export { Candlestick };
+    export { Heatmap };
+    export { Hexbin };
+    export { Ribbon };
+    export { Waterfall };
+    export { Rule };
 }
 export namespace PlotLayers { }
 export { default as PlotChart } from "./Plot.svelte";
@@ -28,6 +39,10 @@ export { default as GeomCandlestick } from "./geoms/Candlestick.svelte";
 export { default as GeomWaterfall } from "./geoms/Waterfall.svelte";
 export { default as GeomHexbin } from "./geoms/Hexbin.svelte";
 export { default as GeomRibbon } from "./geoms/Ribbon.svelte";
+export { default as GeomHighlight } from "./geoms/Highlight.svelte";
+export { default as GeomTrend } from "./geoms/Trend.svelte";
+export { default as GeomJitter } from "./geoms/Jitter.svelte";
+export { default as GeomRule } from "./geoms/Rule.svelte";
 export { default as Chart } from "./Chart.svelte";
 export { default as Sparkline } from "./Sparkline.svelte";
 export { default as BarChart } from "./charts/BarChart.svelte";
@@ -53,12 +68,23 @@ export { default as FilterSlider } from "./crossfilter/FilterSlider.svelte";
 export { default as FilterHistogram } from "./crossfilter/FilterHistogram.svelte";
 import Root from './Plot/Root.svelte';
 import Axis from './Plot/Axis.svelte';
-import Bar from './Plot/Bar.svelte';
+import Bar from './geoms/Bar.svelte';
 import Grid from './Plot/Grid.svelte';
 import Legend from './Plot/Legend.svelte';
-import Line from './Plot/Line.svelte';
-import Area from './Plot/Area.svelte';
-import Point from './Plot/Point.svelte';
+import Line from './geoms/Line.svelte';
+import Area from './geoms/Area.svelte';
+import Point from './geoms/Point.svelte';
 import Arc from './Plot/Arc.svelte';
+import Highlight from './geoms/Highlight.svelte';
+import Trend from './geoms/Trend.svelte';
+import Box from './geoms/Box.svelte';
+import Violin from './geoms/Violin.svelte';
+import Jitter from './geoms/Jitter.svelte';
+import Candlestick from './geoms/Candlestick.svelte';
+import Heatmap from './geoms/Heatmap.svelte';
+import Hexbin from './geoms/Hexbin.svelte';
+import Ribbon from './geoms/Ribbon.svelte';
+import Waterfall from './geoms/Waterfall.svelte';
+import Rule from './geoms/Rule.svelte';
 export { createChartPreset, defaultPreset } from "./lib/preset.js";
 export { buildSequentialScale, buildDivergingScale } from "./lib/brewing/colors.js";

package/dist/index.js

@@ -1,12 +1,23 @@
 import Root from './Plot/Root.svelte'
 import Axis from './Plot/Axis.svelte'
-import Bar from './Plot/Bar.svelte'
+import Bar from './geoms/Bar.svelte'
 import Grid from './Plot/Grid.svelte'
 import Legend from './Plot/Legend.svelte'
-import Line from './Plot/Line.svelte'
-import Area from './Plot/Area.svelte'
-import Point from './Plot/Point.svelte'
+import Line from './geoms/Line.svelte'
+import Area from './geoms/Area.svelte'
+import Point from './geoms/Point.svelte'
 import Arc from './Plot/Arc.svelte'
+import Highlight from './geoms/Highlight.svelte'
+import Trend from './geoms/Trend.svelte'
+import Box from './geoms/Box.svelte'
+import Violin from './geoms/Violin.svelte'
+import Jitter from './geoms/Jitter.svelte'
+import Candlestick from './geoms/Candlestick.svelte'
+import Heatmap from './geoms/Heatmap.svelte'
+import Hexbin from './geoms/Hexbin.svelte'
+import Ribbon from './geoms/Ribbon.svelte'
+import Waterfall from './geoms/Waterfall.svelte'
+import Rule from './geoms/Rule.svelte'
 
 // Composable Plot primitives — use as <Plot.Root>, <Plot.Axis>, <Plot.Bar>, etc.
 export const Plot = {
@@ -18,7 +29,18 @@ export const Plot = {
 	Line,
 	Area,
 	Point,
-	Arc
+	Arc,
+	Highlight,
+	Trend,
+	Box,
+	Violin,
+	Jitter,
+	Candlestick,
+	Heatmap,
+	Hexbin,
+	Ribbon,
+	Waterfall,
+	Rule
 }
 
 /** @deprecated Use Plot instead */
@@ -48,6 +70,10 @@ export { default as GeomCandlestick } from './geoms/Candlestick.svelte'
 export { default as GeomWaterfall } from './geoms/Waterfall.svelte'
 export { default as GeomHexbin } from './geoms/Hexbin.svelte'
 export { default as GeomRibbon } from './geoms/Ribbon.svelte'
+export { default as GeomHighlight } from './geoms/Highlight.svelte'
+export { default as GeomTrend } from './geoms/Trend.svelte'
+export { default as GeomJitter } from './geoms/Jitter.svelte'
+export { default as GeomRule } from './geoms/Rule.svelte'
 
 // Export standalone components
 export { default as Chart } from './Chart.svelte'

package/dist/lib/brewing/ViolinBrewer.svelte.d.ts

@@ -3,6 +3,6 @@
  * fill = violin body color, color = outline stroke.
  */
 export class ViolinBrewer extends QuartileBrewer {
-    violins: any[];
+    violins: any;
 }
 import { QuartileBrewer } from './QuartileBrewer.svelte.js';

package/dist/lib/brewing/brewer.svelte.d.ts

@@ -51,6 +51,7 @@ export class ChartBrewer {
             x: number;
             y: number;
             data: Record<string, unknown>;
+            i: number;
         }[];
         key?: unknown;
     }[];

package/dist/lib/brewing/marks/arcs.js

@@ -15,7 +15,13 @@ import { toPatternId } from '../../brewing/patterns.js'
 export function buildArcs(data, channels, colors, width, height, opts = {}, patterns) {
 	const { color: lf, y: yf } = channels
 	const radius = Math.min(width, height) / 2
-	const innerRadius = opts.innerRadius ?? 0
+	// innerRadius: a value <= 1 is a fraction of the radius (responsive donut);
+	// a value > 1 is absolute pixels. Clamp below the outer radius so a bad value
+	// (e.g. a fraction/pixel mixup) can never invert the arc into a giant ring
+	// rendered outside the circle.
+	const rawInner = opts.innerRadius ?? 0
+	const innerPx = rawInner <= 1 ? rawInner * radius : rawInner
+	const innerRadius = Math.max(0, Math.min(innerPx, radius * 0.98))
 	const pieGen = pie().value((d) => Number(d[yf]))
 	const arcGen = arc().innerRadius(innerRadius).outerRadius(radius)
 	const slices = pieGen(data)

package/dist/lib/brewing/marks/boxes.d.ts

@@ -8,17 +8,26 @@
  * Box body uses the lighter fill shade; whiskers and median use the darker stroke shade.
  *
  * @param {Object[]} data - Pre-aggregated rows with quartile fields
- * @param {{ x?: string, fill?: string }} channels
+ * @param {{ x?: string, fill?: string, pattern?: string }} channels
  *   `fill` drives the box and whisker color (defaults to x-field).
  * @param {import('d3-scale').ScaleBand} xScale
  * @param {import('d3-scale').ScaleLinear} yScale
  * @param {Map<unknown, {fill:string, stroke:string}>} colors
+ * @param {{ side?: 'left'|'right'|'center', width?: number, patterns?: Map<unknown, string> }} [opts]
+ *   `side` offsets the box to one half of the band; `width` is the box thickness as a
+ *   fraction of the (sub-)band (for a thin raincloud box); `patterns` maps a pattern-channel
+ *   value to a pattern name for texture fills. Defaults preserve the full box.
  * @returns {Array}
  */
 export function buildBoxes(data: Object[], channels: {
     x?: string;
     fill?: string;
+    pattern?: string;
 }, xScale: import("d3-scale").ScaleBand<any>, yScale: import("d3-scale").ScaleLinear<any, any, never>, colors: Map<unknown, {
     fill: string;
     stroke: string;
-}>): any[];
+}>, opts?: {
+    side?: "left" | "right" | "center";
+    width?: number;
+    patterns?: Map<unknown, string>;
+}): any[];

package/dist/lib/brewing/marks/boxes.js

@@ -1,3 +1,5 @@
+import { toPatternId } from '../patterns.js'
+
 /**
  * Builds box geometry for box plot charts.
  * Input data rows must already contain { q1, median, q3, iqr_min, iqr_max } —
@@ -8,30 +10,42 @@
  * Box body uses the lighter fill shade; whiskers and median use the darker stroke shade.
  *
  * @param {Object[]} data - Pre-aggregated rows with quartile fields
- * @param {{ x?: string, fill?: string }} channels
+ * @param {{ x?: string, fill?: string, pattern?: string }} channels
  *   `fill` drives the box and whisker color (defaults to x-field).
  * @param {import('d3-scale').ScaleBand} xScale
  * @param {import('d3-scale').ScaleLinear} yScale
  * @param {Map<unknown, {fill:string, stroke:string}>} colors
+ * @param {{ side?: 'left'|'right'|'center', width?: number, patterns?: Map<unknown, string> }} [opts]
+ *   `side` offsets the box to one half of the band; `width` is the box thickness as a
+ *   fraction of the (sub-)band (for a thin raincloud box); `patterns` maps a pattern-channel
+ *   value to a pattern name for texture fills. Defaults preserve the full box.
  * @returns {Array}
  */
-export function buildBoxes(data, channels, xScale, yScale, colors) {
-	const { x: xf, fill: ff } = channels
+export function buildBoxes(data, channels, xScale, yScale, colors, opts = {}) {
+	const { x: xf, fill: ff, pattern: pf } = channels
+	const { side = 'center', width, patterns } = opts
 	const bw = typeof xScale.bandwidth === 'function' ? xScale.bandwidth() : 20
 	const grouped = ff && ff !== xf
+	// Offset the box centre to the middle of the chosen half-lane.
+	const laneOffset = (unit) => (side === 'left' ? -unit / 4 : side === 'right' ? unit / 4 : 0)
+	// Texture fill: patternId per box from the pattern channel value (null = solid fill).
+	const patternIdFor = (d) => {
+		const key = pf ? d[pf] : null
+		return key !== null && key !== undefined && patterns?.has(key) ? toPatternId(String(key)) : null
+	}
 
 	if (grouped) {
 		const fillValues = [...new Set(data.map((d) => d[ff]))]
 		const n = fillValues.length
 		const subBandWidth = bw / n
-		const boxWidth = subBandWidth * 0.75
-		const whiskerWidth = subBandWidth * 0.4
+		const boxWidth = width !== undefined ? subBandWidth * width : subBandWidth * 0.75
+		const whiskerWidth = width !== undefined ? boxWidth * 0.53 : subBandWidth * 0.4
 
 		return data.map((d) => {
 			const fillVal = d[ff]
 			const subIndex = fillValues.indexOf(fillVal)
 			const bandStart = xScale(d[xf]) ?? 0
-			const cx = bandStart + subIndex * subBandWidth + subBandWidth / 2
+			const cx = bandStart + subIndex * subBandWidth + subBandWidth / 2 + laneOffset(subBandWidth)
 			const colorEntry = colors?.get(fillVal) ?? { fill: '#aaa', stroke: '#666' }
 
 			return {
@@ -42,22 +56,27 @@ export function buildBoxes(data, channels, xScale, yScale, colors) {
 				q3: yScale(d.q3),
 				iqr_min: yScale(d.iqr_min),
 				iqr_max: yScale(d.iqr_max),
+				outliers: (d.outliers ?? []).map((v) => ({ cy: yScale(v), value: v })),
 				width: boxWidth,
 				whiskerWidth,
 				fill: colorEntry.fill,
-				stroke: colorEntry.stroke
+				stroke: colorEntry.stroke,
+				patternId: patternIdFor(d)
 			}
 		})
 	}
 
 	// Non-grouped: one box per x category
-	const boxWidth = bw * 0.6
-	const whiskerWidth = bw * 0.3
+	const boxWidth = width !== undefined ? bw * width : bw * 0.6
+	const whiskerWidth = width !== undefined ? boxWidth * 0.5 : bw * 0.3
 
 	return data.map((d) => {
 		const fillKey = ff ? d[ff] : d[xf]
 		const colorEntry = colors?.get(fillKey) ?? { fill: '#aaa', stroke: '#666' }
-		const cx = (xScale(d[xf]) ?? 0) + (typeof xScale.bandwidth === 'function' ? bw / 2 : 0)
+		const cx =
+			(xScale(d[xf]) ?? 0) +
+			(typeof xScale.bandwidth === 'function' ? bw / 2 : 0) +
+			laneOffset(bw)
 		return {
 			data: d,
 			cx,
@@ -66,10 +85,12 @@ export function buildBoxes(data, channels, xScale, yScale, colors) {
 			q3: yScale(d.q3),
 			iqr_min: yScale(d.iqr_min),
 			iqr_max: yScale(d.iqr_max),
+			outliers: (d.outliers ?? []).map((v) => ({ cy: yScale(v), value: v })),
 			width: boxWidth,
 			whiskerWidth,
 			fill: colorEntry.fill,
-			stroke: colorEntry.stroke
+			stroke: colorEntry.stroke,
+			patternId: patternIdFor(d)
 		}
 	})
 }

package/dist/lib/brewing/marks/lines.d.ts

@@ -5,13 +5,16 @@
  * @param {Function} yScale
  * @param {Map} colors
  * @param {'linear'|'smooth'|'step'} [curve]
- * @returns {{ d: string | null, fill: string, stroke: string, points: {x:number, y:number, data: Record<string, unknown>}[], key?: unknown }[]}
+ * @returns {{ d: string | null, fill: string, stroke: string, points: {x:number, y:number, data: Record<string, unknown>, i: number}[], key?: unknown }[]}
  */
 export function buildLines(data: Object[], channels: {
     x?: string;
     y?: string;
     color?: string;
-}, xScale: Function, yScale: Function, colors: Map<any, any>, curve?: "linear" | "smooth" | "step"): {
+}, xScale: Function, yScale: Function, colors: Map<any, any>, curve?: "linear" | "smooth" | "step", place?: (x: any, y: any) => {
+    x: any;
+    y: any;
+}): {
     d: string | null;
     fill: string;
     stroke: string;
@@ -19,6 +22,7 @@ export function buildLines(data: Object[], channels: {
         x: number;
         y: number;
         data: Record<string, unknown>;
+        i: number;
     }[];
     key?: unknown;
 }[];

package/dist/lib/brewing/marks/lines.js

@@ -7,38 +7,45 @@ import { line, curveCatmullRom, curveStep } from 'd3-shape'
  * @param {Function} yScale
  * @param {Map} colors
  * @param {'linear'|'smooth'|'step'} [curve]
- * @returns {{ d: string | null, fill: string, stroke: string, points: {x:number, y:number, data: Record<string, unknown>}[], key?: unknown }[]}
+ * @returns {{ d: string | null, fill: string, stroke: string, points: {x:number, y:number, data: Record<string, unknown>, i: number}[], key?: unknown }[]}
  */
-export function buildLines(data, channels, xScale, yScale, colors, curve) {
+export function buildLines(data, channels, xScale, yScale, colors, curve, place = (x, y) => ({ x, y })) {
 	const { x: xf, y: yf, color: cf } = channels
 	const xPos = (d) =>
 		typeof xScale.bandwidth === 'function' ? xScale(d[xf]) + xScale.bandwidth() / 2 : xScale(d[xf])
+	// Screen points, sorted by the x-channel position, each mapped through place() so the
+	// whole line transposes under orientation='horizontal' (identity default → unchanged).
+	const screenPoints = (rows) => {
+		const withIndices = rows.map((d, i) => ({ data: d, i }))
+		withIndices.sort((a, b) => xPos(a.data) - xPos(b.data))
+		return withIndices.map(({ data: d, i }) => {
+			const p = place(xPos(d), yScale(d[yf]))
+			return { x: p.x, y: p.y, data: d, i }
+		})
+	}
 	const makeGen = () => {
 		const gen = line()
-			.x(xPos)
-			.y((d) => yScale(d[yf]))
+			.x((p) => p.x)
+			.y((p) => p.y)
 		if (curve === 'smooth') gen.curve(curveCatmullRom)
 		else if (curve === 'step') gen.curve(curveStep)
 		return gen
 	}
-	const toPoints = (rows) => rows.map((d) => ({ x: xPos(d), y: yScale(d[yf]), data: d }))
-
-	const sortByX = (rows) => [...rows].sort((a, b) => xPos(a) - xPos(b))
 
 	if (!cf) {
-		const sorted = sortByX(data)
+		const pts = screenPoints(data)
 		const stroke = colors?.values().next().value?.stroke ?? '#888'
-		return [{ d: makeGen()(sorted), fill: 'none', stroke, points: toPoints(sorted) }]
+		return [{ d: makeGen()(pts), fill: 'none', stroke, points: pts }]
 	}
 	const groups = groupBy(data, cf)
 	return [...groups.entries()].map(([key, rows]) => {
-		const sorted = sortByX(rows)
+		const pts = screenPoints(rows)
 		const colorEntry = colors?.get(key) ?? { fill: 'none', stroke: '#888' }
 		return {
-			d: makeGen()(sorted),
+			d: makeGen()(pts),
 			fill: 'none',
 			stroke: colorEntry.stroke,
-			points: toPoints(sorted),
+			points: pts,
 			key
 		}
 	})

package/dist/lib/brewing/marks/swarm.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Places one point per datum within each x-band. Two layouts:
+ *  - 'jitter': deterministic horizontal offset seeded by index-in-group.
+ *  - 'swarm':  1-D beeswarm — sort by y, dodge horizontally to avoid overlap.
+ *
+ * @param {Object[]} data - raw rows (stat=identity)
+ * @param {{ x?: string, y?: string, fill?: string }} channels
+ * @param {import('d3-scale').ScaleBand} xScale
+ * @param {import('d3-scale').ScaleLinear} yScale
+ * @param {Map<unknown, {fill:string, stroke:string}>} colors
+ * @param {{ method?: 'jitter'|'swarm', r?: number, side?: 'left'|'right'|'center' }} opts
+ *   `side` confines points to one half of the band (for raincloud/half-plots).
+ * @returns {Array<{ cx:number, cy:number, fill:string, stroke:string, data:Record<string, unknown> }>}
+ */
+export function buildSwarm(data: Object[], channels: {
+    x?: string;
+    y?: string;
+    fill?: string;
+}, xScale: import("d3-scale").ScaleBand<any>, yScale: import("d3-scale").ScaleLinear<any, any, never>, colors: Map<unknown, {
+    fill: string;
+    stroke: string;
+}>, opts?: {
+    method?: "jitter" | "swarm";
+    r?: number;
+    side?: "left" | "right" | "center";
+}): Array<{
+    cx: number;
+    cy: number;
+    fill: string;
+    stroke: string;
+    data: Record<string, unknown>;
+}>;