@rokkit/chart 1.0.0-next.151 → 1.0.0-next.155

package/src/lib/brewing/marks/areas.js

@@ -12,48 +12,61 @@ import { toPatternId } from '../patterns.js'
  * @param {Map} [patternMap]
  */
 export function buildAreas(data, channels, xScale, yScale, colors, curve, patternMap) {
-  const { x: xf, y: yf, pattern: pf } = channels
-  const cf = channels.fill   // fill is the primary aesthetic for area charts
-  const innerHeight = yScale.range()[0]
-  const xPos = (d) => typeof xScale.bandwidth === 'function'
-    ? xScale(d[xf]) + xScale.bandwidth() / 2
-    : xScale(d[xf])
-  const makeGen = () => {
-    const gen = area().x(xPos).y0(innerHeight).y1((d) => yScale(d[yf]))
-    if (curve === 'smooth') gen.curve(curveCatmullRom)
-    else if (curve === 'step') gen.curve(curveStep)
-    return gen
-  }
-  if (!cf) {
-    const colorEntry = colors?.values().next().value ?? { fill: '#888', stroke: '#444' }
-    return [{ d: makeGen()(data), fill: colorEntry.fill, stroke: 'none', colorKey: null, patternKey: null, patternId: null }]
-  }
-  const groups = groupBy(data, cf)
-  return [...groups.entries()].map(([key, rows]) => {
-    const colorEntry = colors?.get(key) ?? { fill: '#888', stroke: '#444' }
-    const patternKey = pf ? (pf === cf ? key : rows[0]?.[pf]) : null
-    const patternName = patternKey !== null && patternKey !== undefined ? patternMap?.get(patternKey) : null
-    const compositePatternKey = (cf && pf && cf !== pf && patternKey !== null && patternKey !== undefined)
-      ? `${key}::${patternKey}`
-      : patternKey
-    return {
-      d: makeGen()(rows),
-      fill: colorEntry.fill,
-      stroke: 'none',
-      key,
-      colorKey: key,
-      patternKey,
-      patternId: patternName ? toPatternId(compositePatternKey) : null
-    }
-  })
+	const { x: xf, y: yf, pattern: pf } = channels
+	const cf = channels.fill // fill is the primary aesthetic for area charts
+	const innerHeight = yScale.range()[0]
+	const xPos = (d) =>
+		typeof xScale.bandwidth === 'function' ? xScale(d[xf]) + xScale.bandwidth() / 2 : xScale(d[xf])
+	const makeGen = () => {
+		const gen = area()
+			.x(xPos)
+			.y0(innerHeight)
+			.y1((d) => yScale(d[yf]))
+		if (curve === 'smooth') gen.curve(curveCatmullRom)
+		else if (curve === 'step') gen.curve(curveStep)
+		return gen
+	}
+	if (!cf) {
+		const colorEntry = colors?.values().next().value ?? { fill: '#888', stroke: '#444' }
+		return [
+			{
+				d: makeGen()(data),
+				fill: colorEntry.fill,
+				stroke: 'none',
+				colorKey: null,
+				patternKey: null,
+				patternId: null
+			}
+		]
+	}
+	const groups = groupBy(data, cf)
+	return [...groups.entries()].map(([key, rows]) => {
+		const colorEntry = colors?.get(key) ?? { fill: '#888', stroke: '#444' }
+		const patternKey = pf ? (pf === cf ? key : rows[0]?.[pf]) : null
+		const patternName =
+			patternKey !== null && patternKey !== undefined ? patternMap?.get(patternKey) : null
+		const compositePatternKey =
+			cf && pf && cf !== pf && patternKey !== null && patternKey !== undefined
+				? `${key}::${patternKey}`
+				: patternKey
+		return {
+			d: makeGen()(rows),
+			fill: colorEntry.fill,
+			stroke: 'none',
+			key,
+			colorKey: key,
+			patternKey,
+			patternId: patternName ? toPatternId(compositePatternKey) : null
+		}
+	})
 }
 
 function groupBy(arr, field) {
-  const map = new Map()
-  for (const item of arr) {
-    const key = item[field]
-    if (!map.has(key)) map.set(key, [])
-    map.get(key).push(item)
-  }
-  return map
+	const map = new Map()
+	for (const item of arr) {
+		const key = item[field]
+		if (!map.has(key)) map.set(key, [])
+		map.get(key).push(item)
+	}
+	return map
 }

package/src/lib/brewing/marks/bars.js

@@ -11,39 +11,39 @@
 import { toPatternId } from '../patterns.js'
 
 export function buildBars(data, channels, xScale, yScale, colors, patternMap) {
-  const { x: xf, y: yf, fill: ff, color: cf, pattern: pf } = channels
-  const barWidth = typeof xScale.bandwidth === 'function' ? xScale.bandwidth() : 10
-  const innerHeight = yScale.range()[0]
+	const { x: xf, y: yf, fill: ff, color: cf, pattern: pf } = channels
+	const barWidth = typeof xScale.bandwidth === 'function' ? xScale.bandwidth() : 10
+	const innerHeight = yScale.range()[0]
 
-  return data.map((d) => {
-    const xVal = d[xf]
-    const fillKey = ff ? d[ff] : xVal           // fill channel drives interior color
-    const strokeKey = cf ? d[cf] : null          // color channel drives border; null = no border
-    const colorEntry = colors?.get(fillKey) ?? { fill: '#888', stroke: '#444' }
-    const strokeEntry = colors?.get(strokeKey) ?? colorEntry
-    const patternKey = pf ? d[pf] : null
-    const patternName = patternKey !== null && patternKey !== undefined ? patternMap?.get(patternKey) : null
-    // When fill and pattern are different fields, bars need a composite pattern def id
-    // so each (region, category) pair gets its uniquely colored+textured pattern.
-    const compositePatternKey = (ff && pf && ff !== pf && patternKey !== null && patternKey !== undefined)
-      ? `${d[ff]}::${patternKey}`
-      : patternKey
-    const barX = typeof xScale.bandwidth === 'function'
-      ? xScale(xVal)
-      : xScale(xVal) - barWidth / 2
-    const barY = yScale(d[yf])
-    return {
-      data: d,
-      key: `${xVal}::${fillKey ?? ''}::${patternKey ?? ''}`,
-      x: barX,
-      y: barY,
-      width: barWidth,
-      height: innerHeight - barY,
-      fill: colorEntry.fill,
-      stroke: strokeKey !== null ? strokeEntry.stroke : null,
-      colorKey: fillKey,
-      patternKey,
-      patternId: patternName ? toPatternId(compositePatternKey) : null
-    }
-  })
+	return data.map((d) => {
+		const xVal = d[xf]
+		const fillKey = ff ? d[ff] : xVal // fill channel drives interior color
+		const strokeKey = cf ? d[cf] : null // color channel drives border; null = no border
+		const colorEntry = colors?.get(fillKey) ?? { fill: '#888', stroke: '#444' }
+		const strokeEntry = colors?.get(strokeKey) ?? colorEntry
+		const patternKey = pf ? d[pf] : null
+		const patternName =
+			patternKey !== null && patternKey !== undefined ? patternMap?.get(patternKey) : null
+		// When fill and pattern are different fields, bars need a composite pattern def id
+		// so each (region, category) pair gets its uniquely colored+textured pattern.
+		const compositePatternKey =
+			ff && pf && ff !== pf && patternKey !== null && patternKey !== undefined
+				? `${d[ff]}::${patternKey}`
+				: patternKey
+		const barX = typeof xScale.bandwidth === 'function' ? xScale(xVal) : xScale(xVal) - barWidth / 2
+		const barY = yScale(d[yf])
+		return {
+			data: d,
+			key: `${xVal}::${fillKey ?? ''}::${patternKey ?? ''}`,
+			x: barX,
+			y: barY,
+			width: barWidth,
+			height: innerHeight - barY,
+			fill: colorEntry.fill,
+			stroke: strokeKey !== null ? strokeEntry.stroke : null,
+			colorKey: fillKey,
+			patternKey,
+			patternId: patternName ? toPatternId(compositePatternKey) : null
+		}
+	})
 }

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

@@ -16,60 +16,60 @@
  * @returns {Array}
  */
 export function buildBoxes(data, channels, xScale, yScale, colors) {
-  const { x: xf, fill: ff } = channels
-  const bw = typeof xScale.bandwidth === 'function' ? xScale.bandwidth() : 20
-  const grouped = ff && ff !== xf
+	const { x: xf, fill: ff } = channels
+	const bw = typeof xScale.bandwidth === 'function' ? xScale.bandwidth() : 20
+	const grouped = ff && ff !== xf
 
-  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
+	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
 
-    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 colorEntry = colors?.get(fillVal) ?? { fill: '#aaa', stroke: '#666' }
+		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 colorEntry = colors?.get(fillVal) ?? { fill: '#aaa', stroke: '#666' }
 
-      return {
-        data: d,
-        cx,
-        q1:      yScale(d.q1),
-        median:  yScale(d.median),
-        q3:      yScale(d.q3),
-        iqr_min: yScale(d.iqr_min),
-        iqr_max: yScale(d.iqr_max),
-        width:   boxWidth,
-        whiskerWidth,
-        fill:   colorEntry.fill,
-        stroke: colorEntry.stroke
-      }
-    })
-  }
+			return {
+				data: d,
+				cx,
+				q1: yScale(d.q1),
+				median: yScale(d.median),
+				q3: yScale(d.q3),
+				iqr_min: yScale(d.iqr_min),
+				iqr_max: yScale(d.iqr_max),
+				width: boxWidth,
+				whiskerWidth,
+				fill: colorEntry.fill,
+				stroke: colorEntry.stroke
+			}
+		})
+	}
 
-  // Non-grouped: one box per x category
-  const boxWidth = bw * 0.6
-  const whiskerWidth = bw * 0.3
+	// Non-grouped: one box per x category
+	const boxWidth = bw * 0.6
+	const whiskerWidth = 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)
-    return {
-      data: d,
-      cx,
-      q1:      yScale(d.q1),
-      median:  yScale(d.median),
-      q3:      yScale(d.q3),
-      iqr_min: yScale(d.iqr_min),
-      iqr_max: yScale(d.iqr_max),
-      width:   boxWidth,
-      whiskerWidth,
-      fill:   colorEntry.fill,
-      stroke: colorEntry.stroke
-    }
-  })
+	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)
+		return {
+			data: d,
+			cx,
+			q1: yScale(d.q1),
+			median: yScale(d.median),
+			q3: yScale(d.q3),
+			iqr_min: yScale(d.iqr_min),
+			iqr_max: yScale(d.iqr_max),
+			width: boxWidth,
+			whiskerWidth,
+			fill: colorEntry.fill,
+			stroke: colorEntry.stroke
+		}
+	})
 }

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

@@ -10,39 +10,46 @@ import { line, curveCatmullRom, curveStep } from 'd3-shape'
  * @returns {{ d: string, fill: string, stroke: string, points: {x:number, y:number, data:Object}[], key?: unknown }[]}
  */
 export function buildLines(data, channels, xScale, yScale, colors, curve) {
-  const { x: xf, y: yf, color: cf } = channels
-  const xPos = (d) => typeof xScale.bandwidth === 'function'
-    ? xScale(d[xf]) + xScale.bandwidth() / 2
-    : xScale(d[xf])
-  const makeGen = () => {
-    const gen = line().x(xPos).y((d) => yScale(d[yf]))
-    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 { x: xf, y: yf, color: cf } = channels
+	const xPos = (d) =>
+		typeof xScale.bandwidth === 'function' ? xScale(d[xf]) + xScale.bandwidth() / 2 : xScale(d[xf])
+	const makeGen = () => {
+		const gen = line()
+			.x(xPos)
+			.y((d) => yScale(d[yf]))
+		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) => a[xf] < b[xf] ? -1 : a[xf] > b[xf] ? 1 : 0)
+	const sortByX = (rows) => [...rows].sort((a, b) => xPos(a) - xPos(b))
 
-  if (!cf) {
-    const sorted = sortByX(data)
-    const stroke = colors?.values().next().value?.stroke ?? '#888'
-    return [{ d: makeGen()(sorted), fill: 'none', stroke, points: toPoints(sorted) }]
-  }
-  const groups = groupBy(data, cf)
-  return [...groups.entries()].map(([key, rows]) => {
-    const sorted = sortByX(rows)
-    const colorEntry = colors?.get(key) ?? { fill: 'none', stroke: '#888' }
-    return { d: makeGen()(sorted), fill: 'none', stroke: colorEntry.stroke, points: toPoints(sorted), key }
-  })
+	if (!cf) {
+		const sorted = sortByX(data)
+		const stroke = colors?.values().next().value?.stroke ?? '#888'
+		return [{ d: makeGen()(sorted), fill: 'none', stroke, points: toPoints(sorted) }]
+	}
+	const groups = groupBy(data, cf)
+	return [...groups.entries()].map(([key, rows]) => {
+		const sorted = sortByX(rows)
+		const colorEntry = colors?.get(key) ?? { fill: 'none', stroke: '#888' }
+		return {
+			d: makeGen()(sorted),
+			fill: 'none',
+			stroke: colorEntry.stroke,
+			points: toPoints(sorted),
+			key
+		}
+	})
 }
 
 function groupBy(arr, field) {
-  const map = new Map()
-  for (const item of arr) {
-    const key = item[field]
-    if (!map.has(key)) map.set(key, [])
-    map.get(key).push(item)
-  }
-  return map
+	const map = new Map()
+	for (const item of arr) {
+		const key = item[field]
+		if (!map.has(key)) map.set(key, [])
+		map.get(key).push(item)
+	}
+	return map
 }

package/src/lib/brewing/marks/points.js

@@ -1,15 +1,33 @@
-import { symbol, symbolCircle, symbolSquare, symbolTriangle, symbolDiamond, symbolCross, symbolStar } from 'd3-shape'
+import {
+	symbol,
+	symbolCircle,
+	symbolSquare,
+	symbolTriangle,
+	symbolDiamond,
+	symbolCross,
+	symbolStar
+} from 'd3-shape'
+import { defaultPreset } from '../../preset.js'
 
-const SYMBOL_TYPES = [symbolCircle, symbolSquare, symbolTriangle, symbolDiamond, symbolCross, symbolStar]
+const SYMBOL_TYPES = [
+	symbolCircle,
+	symbolSquare,
+	symbolTriangle,
+	symbolDiamond,
+	symbolCross,
+	symbolStar
+]
 const SYMBOL_NAMES = ['circle', 'square', 'triangle', 'diamond', 'cross', 'star']
 
 /**
  * Returns a Map assigning shape names to distinct values, cycling through available shapes.
  * @param {unknown[]} values
+ * @param {typeof defaultPreset} preset
  * @returns {Map<unknown, string>}
  */
-export function assignSymbols(values) {
-  return new Map(values.map((v, i) => [v, SYMBOL_NAMES[i % SYMBOL_NAMES.length]]))
+export function assignSymbols(values, preset = defaultPreset) {
+	const names = preset.symbols
+	return new Map(values.map((v, i) => [v, names[i % names.length]]))
 }
 
 /**
@@ -19,9 +37,26 @@ export function assignSymbols(values) {
  * @returns {string}
  */
 export function buildSymbolPath(shapeName, r) {
-  const idx = SYMBOL_NAMES.indexOf(shapeName)
-  const type = idx >= 0 ? SYMBOL_TYPES[idx] : symbolCircle
-  return symbol().type(type).size(Math.PI * r * r)() ?? ''
+	const idx = SYMBOL_NAMES.indexOf(shapeName)
+	const type = idx >= 0 ? SYMBOL_TYPES[idx] : symbolCircle
+	return (
+		symbol()
+			.type(type)
+			.size(Math.PI * r * r)() ?? ''
+	)
+}
+
+/**
+ * Returns a stable pseudo-random offset for a given index.
+ * Uses a linear congruential generator seeded by index — no external dependency,
+ * stable across re-renders.
+ * @param {number} i - row index (seed)
+ * @param {number} range - total spread (jitter is ±range/2)
+ * @returns {number}
+ */
+export function jitterOffset(i, range) {
+	const r = ((i * 1664525 + 1013904223) >>> 0) / 0xffffffff
+	return (r - 0.5) * range
 }
 
 /**
@@ -34,24 +69,37 @@ export function buildSymbolPath(shapeName, r) {
  * @param {Function|null} sizeScale
  * @param {Map<unknown, string>|null} symbolMap  — maps symbol field value → shape name
  * @param {number} defaultRadius
+ * @param {{ width?: number, height?: number }|null} jitter
  */
-export function buildPoints(data, channels, xScale, yScale, colors, sizeScale, symbolMap, defaultRadius = 5) {
-  const { x: xf, y: yf, color: cf, size: sf, symbol: symf } = channels
-  return data.map((d) => {
-    const colorKey = cf ? d[cf] : null
-    const colorEntry = colors?.get(colorKey) ?? { fill: '#888', stroke: '#444' }
-    const r = sf && sizeScale ? sizeScale(d[sf]) : defaultRadius
-    const shapeName = symf && symbolMap ? (symbolMap.get(d[symf]) ?? 'circle') : null
-    const symbolPath = shapeName ? buildSymbolPath(shapeName, r) : null
-    return {
-      data: d,
-      cx: xScale(d[xf]),
-      cy: yScale(d[yf]),
-      r,
-      fill: colorEntry.fill,
-      stroke: colorEntry.stroke,
-      symbolPath,
-      key: colorKey
-    }
-  })
+export function buildPoints(
+	data,
+	channels,
+	xScale,
+	yScale,
+	colors,
+	sizeScale,
+	symbolMap,
+	defaultRadius = 5,
+	jitter = null
+) {
+	const { x: xf, y: yf, color: cf, size: sf, symbol: symf } = channels
+	return data.map((d, i) => {
+		const colorKey = cf ? d[cf] : null
+		const colorEntry = colors?.get(colorKey) ?? { fill: '#888', stroke: '#444' }
+		const r = sf && sizeScale ? sizeScale(d[sf]) : defaultRadius
+		const shapeName = symf && symbolMap ? (symbolMap.get(d[symf]) ?? 'circle') : null
+		const symbolPath = shapeName ? buildSymbolPath(shapeName, r) : null
+		const jx = jitter?.width ? jitterOffset(i, jitter.width) : 0
+		const jy = jitter?.height ? jitterOffset(i + 100000, jitter.height) : 0
+		return {
+			data: d,
+			cx: xScale(d[xf]) + jx,
+			cy: yScale(d[yf]) + jy,
+			r,
+			fill: colorEntry.fill,
+			stroke: colorEntry.stroke,
+			symbolPath,
+			key: colorKey
+		}
+	})
 }

package/src/lib/brewing/marks/violins.js

@@ -21,70 +21,70 @@ const ANCHOR_ORDER = ['iqr_max', 'q3', 'median', 'q1', 'iqr_min']
  * @returns {Array}
  */
 export function buildViolins(data, channels, xScale, yScale, colors) {
-  const { x: xf, fill: ff } = channels
-  const bw = typeof xScale.bandwidth === 'function' ? xScale.bandwidth() : 40
-  const grouped = ff && ff !== xf
+	const { x: xf, fill: ff } = channels
+	const bw = typeof xScale.bandwidth === 'function' ? xScale.bandwidth() : 40
+	const grouped = ff && ff !== xf
 
-  const pathGen = line()
-    .x((pt) => pt.x)
-    .y((pt) => pt.y)
-    .curve(curveCatmullRom.alpha(0.5))
+	const pathGen = line()
+		.x((pt) => pt.x)
+		.y((pt) => pt.y)
+		.curve(curveCatmullRom.alpha(0.5))
 
-  if (grouped) {
-    const fillValues = [...new Set(data.map((d) => d[ff]))]
-    const n = fillValues.length
-    const subBandWidth = bw / n
-    const halfMax = subBandWidth * 0.45
+	if (grouped) {
+		const fillValues = [...new Set(data.map((d) => d[ff]))]
+		const n = fillValues.length
+		const subBandWidth = bw / n
+		const halfMax = subBandWidth * 0.45
 
-    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 colorEntry = colors?.get(fillVal) ?? { fill: '#aaa', stroke: '#666' }
+		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 colorEntry = colors?.get(fillVal) ?? { fill: '#aaa', stroke: '#666' }
 
-      const rightPts = ANCHOR_ORDER.map((key) => ({
-        x: cx + halfMax * DENSITY_AT[key],
-        y: yScale(d[key])
-      }))
-      const leftPts = [...ANCHOR_ORDER].reverse().map((key) => ({
-        x: cx - halfMax * DENSITY_AT[key],
-        y: yScale(d[key])
-      }))
+			const rightPts = ANCHOR_ORDER.map((key) => ({
+				x: cx + halfMax * DENSITY_AT[key],
+				y: yScale(d[key])
+			}))
+			const leftPts = [...ANCHOR_ORDER].reverse().map((key) => ({
+				x: cx - halfMax * DENSITY_AT[key],
+				y: yScale(d[key])
+			}))
 
-      return {
-        data: d,
-        cx,
-        d:      pathGen([...rightPts, ...leftPts, rightPts[0]]),
-        fill:   colorEntry.fill,
-        stroke: colorEntry.stroke
-      }
-    })
-  }
+			return {
+				data: d,
+				cx,
+				d: pathGen([...rightPts, ...leftPts, rightPts[0]]),
+				fill: colorEntry.fill,
+				stroke: colorEntry.stroke
+			}
+		})
+	}
 
-  // Non-grouped: one violin per x category
-  const halfMax = bw * 0.45
+	// Non-grouped: one violin per x category
+	const halfMax = bw * 0.45
 
-  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)
+	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 rightPts = ANCHOR_ORDER.map((key) => ({
-      x: cx + halfMax * DENSITY_AT[key],
-      y: yScale(d[key])
-    }))
-    const leftPts = [...ANCHOR_ORDER].reverse().map((key) => ({
-      x: cx - halfMax * DENSITY_AT[key],
-      y: yScale(d[key])
-    }))
+		const rightPts = ANCHOR_ORDER.map((key) => ({
+			x: cx + halfMax * DENSITY_AT[key],
+			y: yScale(d[key])
+		}))
+		const leftPts = [...ANCHOR_ORDER].reverse().map((key) => ({
+			x: cx - halfMax * DENSITY_AT[key],
+			y: yScale(d[key])
+		}))
 
-    return {
-      data: d,
-      cx,
-      d:      pathGen([...rightPts, ...leftPts, rightPts[0]]),
-      fill:   colorEntry.fill,
-      stroke: colorEntry.stroke
-    }
-  })
+		return {
+			data: d,
+			cx,
+			d: pathGen([...rightPts, ...leftPts, rightPts[0]]),
+			fill: colorEntry.fill,
+			stroke: colorEntry.stroke
+		}
+	})
 }