@rokkit/chart 1.0.0-next.147 → 1.0.0-next.148

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

@@ -0,0 +1,75 @@
+/**
+ * Builds box geometry for box plot charts.
+ * Input data rows must already contain { q1, median, q3, iqr_min, iqr_max } —
+ * computed by applyBoxStat before reaching this function.
+ *
+ * When `fill` differs from `x`, boxes are sub-grouped within each x-band
+ * (one narrower box per fill value per x category, like grouped bars).
+ * 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
+ *   `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
+ * @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
+
+  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: 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
+
+  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

@@ -0,0 +1,48 @@
+import { line, curveCatmullRom, curveStep } from 'd3-shape'
+
+/**
+ * @param {Object[]} data
+ * @param {{ x: string, y: string, color?: string }} channels
+ * @param {Function} xScale
+ * @param {Function} yScale
+ * @param {Map} colors
+ * @param {'linear'|'smooth'|'step'} [curve]
+ * @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 sortByX = (rows) => [...rows].sort((a, b) => a[xf] < b[xf] ? -1 : a[xf] > b[xf] ? 1 : 0)
+
+  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
+}

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

@@ -0,0 +1,57 @@
+import { symbol, symbolCircle, symbolSquare, symbolTriangle, symbolDiamond, symbolCross, symbolStar } from 'd3-shape'
+
+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
+ * @returns {Map<unknown, string>}
+ */
+export function assignSymbols(values) {
+  return new Map(values.map((v, i) => [v, SYMBOL_NAMES[i % SYMBOL_NAMES.length]]))
+}
+
+/**
+ * Builds an SVG path string for a given shape name and radius.
+ * @param {string} shapeName
+ * @param {number} r
+ * @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)() ?? ''
+}
+
+/**
+ * Builds point geometry for scatter/bubble charts.
+ * @param {Object[]} data
+ * @param {{ x: string, y: string, color?: string, size?: string, symbol?: string }} channels
+ * @param {Function} xScale
+ * @param {Function} yScale
+ * @param {Map} colors
+ * @param {Function|null} sizeScale
+ * @param {Map<unknown, string>|null} symbolMap  — maps symbol field value → shape name
+ * @param {number} defaultRadius
+ */
+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
+    }
+  })
+}

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

@@ -0,0 +1,90 @@
+import { line, curveCatmullRom } from 'd3-shape'
+
+// Relative widths at each stat anchor (fraction of max half-width)
+const DENSITY_AT = { iqr_min: 0.08, q1: 0.55, median: 1.0, q3: 0.55, iqr_max: 0.08 }
+const ANCHOR_ORDER = ['iqr_max', 'q3', 'median', 'q1', 'iqr_min']
+
+/**
+ * Builds a closed violin shape path for each group.
+ * Input rows must have { q1, median, q3, iqr_min, iqr_max } from applyBoxStat.
+ *
+ * When `fill` differs from `x`, violins are sub-grouped within each x-band
+ * (one narrower violin per fill value per x category, like grouped bars).
+ * Violin body uses the lighter fill shade; outline uses the darker stroke shade.
+ *
+ * @param {Object[]} data
+ * @param {{ x: string, fill?: string }} channels
+ *   `fill` drives violin interior and outline (defaults to x-field).
+ * @param {import('d3-scale').ScaleBand} xScale
+ * @param {import('d3-scale').ScaleLinear} yScale
+ * @param {Map} colors
+ * @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 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
+
+    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])
+      }))
+
+      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
+
+  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])
+    }))
+
+    return {
+      data: d,
+      cx,
+      d:      pathGen([...rightPts, ...leftPts, rightPts[0]]),
+      fill:   colorEntry.fill,
+      stroke: colorEntry.stroke
+    }
+  })
+}

package/src/lib/brewing/patterns.js

@@ -0,0 +1,31 @@
+/**
+ * Converts a data key to a safe SVG element ID for pattern references.
+ * Spaces and non-word characters are replaced to avoid broken url(#...) refs.
+ * @param {unknown} key
+ * @returns {string}
+ */
+export function toPatternId(key) {
+  return `chart-pat-${String(key).replace(/\s+/g, '-').replace(/[^\w-]/g, '_')}`
+}
+
+// Keys must match the keys in packages/chart/src/patterns/patterns.js
+export const PATTERN_ORDER = [
+  'diagonal',
+  'dots',
+  'triangles',
+  'hatch',
+  'lattice',
+  'swell',
+  'checkerboard',
+  'waves',
+  'petals'
+]
+
+/**
+ * Assigns patterns from PATTERN_ORDER to an array of distinct values.
+ * @param {unknown[]} values
+ * @returns {Map<unknown, string>}
+ */
+export function assignPatterns(values) {
+  return new Map(values.map((v, i) => [v, PATTERN_ORDER[i % PATTERN_ORDER.length]]))
+}

package/src/lib/brewing/scales.js

@@ -0,0 +1,51 @@
+import { scaleBand, scaleLinear, scaleSqrt } from 'd3-scale'
+import { max, extent } from 'd3-array'
+
+/**
+ * Builds an x scale (band for categorical, linear for numeric).
+ * @param {Object[]} data
+ * @param {string} field
+ * @param {number} width - inner width (pixels)
+ * @param {{ padding?: number }} opts
+ */
+export function buildXScale(data, field, width, opts = {}) {
+  const values = [...new Set(data.map((d) => d[field]))]
+  const isNumeric = values.every((v) => typeof v === 'number' || (!isNaN(Number(v)) && v !== ''))
+  if (isNumeric) {
+    const [minVal, maxVal] = extent(data, (d) => Number(d[field]))
+    return scaleLinear().domain([minVal, maxVal]).range([0, width]).nice()
+  }
+  return scaleBand()
+    .domain(values)
+    .range([0, width])
+    .padding(opts.padding ?? 0.2)
+}
+
+/**
+ * Builds a y linear scale from 0 to max, extended by any layer overrides.
+ * @param {Object[]} data
+ * @param {string} field
+ * @param {number} height - inner height (pixels)
+ * @param {Array<{data?: Object[], y?: string}>} layers
+ */
+export function buildYScale(data, field, height, layers = []) {
+  let maxVal = max(data, (d) => Number(d[field])) ?? 0
+  for (const layer of layers) {
+    if (layer.data && layer.y) {
+      const layerMax = max(layer.data, (d) => Number(d[layer.y])) ?? 0
+      if (layerMax > maxVal) maxVal = layerMax
+    }
+  }
+  return scaleLinear().domain([0, maxVal]).range([height, 0]).nice()
+}
+
+/**
+ * Builds a sqrt scale for bubble/point size.
+ * @param {Object[]} data
+ * @param {string} field
+ * @param {number} maxRadius
+ */
+export function buildSizeScale(data, field, maxRadius = 20) {
+  const maxVal = max(data, (d) => Number(d[field])) ?? 1
+  return scaleSqrt().domain([0, maxVal]).range([0, maxRadius])
+}

package/src/lib/brewing/scales.svelte.js

@@ -1,8 +1,9 @@
 import { SvelteSet } from 'svelte/reactivity'
 import { min, max } from 'd3-array'
-import { scaleBand, scaleLinear, scaleTime, scaleOrdinal } from 'd3-scale'
+import { scaleLinear, scaleOrdinal } from 'd3-scale'
 import { schemeCategory10 } from 'd3-scale-chromatic'
 import {} from './types.js'
+import { buildXScale } from '../xscale.js'
 
 /**
  * @typedef {import('./types').ChartScales} ChartScales
@@ -10,31 +11,6 @@ import {} from './types.js'
  * @typedef {import('./types').ChartDimensions} ChartDimensions
  */
 
-/**
- * @param {Array} xValues
- * @param {Object} dimensions
- * @param {number} padding
- * @returns {import('d3-scale').ScaleContinuousNumeric|import('d3-scale').ScaleBand}
- */
-function buildXScale(xValues, dimensions, padding) {
-	const xIsDate = xValues.some((v) => v instanceof Date)
-	const xIsNumeric = !xIsDate && xValues.every((v) => !isNaN(parseFloat(v)))
-
-	if (xIsDate) {
-		return scaleTime()
-			.domain([min(xValues), max(xValues)])
-			.range([0, dimensions.innerWidth])
-			.nice()
-	}
-	if (xIsNumeric) {
-		return scaleLinear()
-			.domain([min([0, ...xValues]), max(xValues)])
-			.range([0, dimensions.innerWidth])
-			.nice()
-	}
-	return scaleBand().domain(xValues).range([0, dimensions.innerWidth]).padding(padding)
-}
-
 /**
  * @param {Array} data
  * @param {string} colorField

package/src/lib/brewing/stats.js

@@ -0,0 +1,62 @@
+import { sum, mean, min, max, quantile, ascending } from 'd3-array'
+import { dataset } from '@rokkit/data'
+
+function sortedQuantile(values, p) {
+  return quantile([...values].sort(ascending), p)
+}
+
+/**
+ * Built-in reduction functions. Each receives an array of numeric values.
+ * @type {Record<string, (values: number[]) => number>}
+ */
+export const STAT_FNS = {
+  sum,
+  mean,
+  min,
+  max,
+  count: (values) => values.length
+}
+
+/**
+ * Computes box plot quartile statistics grouped by x (and optionally color).
+ * Output rows have { q1, median, q3, iqr_min, iqr_max } replacing the raw y values.
+ *
+ * @param {Object[]} data
+ * @param {{ x?: string, y?: string, color?: string }} channels
+ * @returns {Object[]}
+ */
+export function applyBoxStat(data, channels) {
+  const { x: xf, y: yf, color: cf } = channels
+  if (!xf || !yf) return data
+  const by = [xf, cf].filter(Boolean)
+  return dataset(data)
+    .groupBy(...by)
+    .summarize((row) => row[yf], {
+      q1:      (v) => sortedQuantile(v, 0.25),
+      median:  (v) => sortedQuantile(v, 0.5),
+      q3:      (v) => sortedQuantile(v, 0.75),
+      iqr_min: (v) => { const q1 = sortedQuantile(v, 0.25); const q3 = sortedQuantile(v, 0.75); return q1 - 1.5 * (q3 - q1) },
+      iqr_max: (v) => { const q1 = sortedQuantile(v, 0.25); const q3 = sortedQuantile(v, 0.75); return q3 + 1.5 * (q3 - q1) }
+    })
+    .rollup()
+    .select()
+}
+
+/**
+ * Aggregates data by one or more grouping fields, reducing the value field
+ * using the given stat. Accepts a built-in name or a custom function.
+ *
+ * @param {Object[]} data
+ * @param {{ by: string[], value: string, stat: string|Function }} opts
+ * @returns {Object[]}
+ */
+export function applyAggregate(data, { by, value, stat }) {
+  if (stat === 'identity' || by.length === 0 || value === null || value === undefined) return data
+  const fn = typeof stat === 'function' ? stat : STAT_FNS[stat]
+  if (fn === null || fn === undefined) return data
+  return dataset(data)
+    .groupBy(...by)
+    .summarize((row) => row[value], { [value]: fn })
+    .rollup()
+    .select()
+}

package/src/lib/brewing/symbols.js

@@ -0,0 +1,10 @@
+export const SYMBOL_ORDER = ['circle', 'square', 'triangle', 'diamond', 'plus', 'cross', 'star']
+
+/**
+ * Assigns shapes from SYMBOL_ORDER to an array of distinct values.
+ * @param {unknown[]} values
+ * @returns {Map<unknown, string>}
+ */
+export function assignSymbols(values) {
+  return new Map(values.map((v, i) => [v, SYMBOL_ORDER[i % SYMBOL_ORDER.length]]))
+}

package/src/lib/plot/chartProps.js

@@ -0,0 +1,76 @@
+/**
+ * Shared JSDoc type definitions for chart component props.
+ * Import these in chart components with:
+ *   @type {import('./lib/plot/chartProps.js').ChartProps}
+ */
+
+/**
+ * @typedef {Object} ChartProps
+ * Common props shared by all high-level chart wrappers.
+ *
+ * @property {Object[]} [data=[]]        - Data array to visualize
+ * @property {string}   [x]              - Field name for the X axis
+ * @property {string}   [y]              - Field name for the Y axis
+ * @property {string}   [fill]           - Field name for fill color grouping (alias for color)
+ * @property {string}   [color]          - Field name for color grouping
+ * @property {string}   [pattern]        - Field name for pattern fill grouping
+ * @property {string}   [stat='identity']- Aggregation stat: 'identity' | 'sum' | 'mean' | 'count' | 'min' | 'max' | 'median' | 'boxplot'
+ * @property {number}   [width=600]      - SVG width in pixels
+ * @property {number}   [height=400]     - SVG height in pixels
+ * @property {string}   [mode='light']   - Color mode: 'light' | 'dark'
+ * @property {boolean}  [grid=true]      - Whether to show grid lines
+ * @property {boolean}  [legend=false]   - Whether to show the legend
+ */
+
+/**
+ * @typedef {Object} BarChartProps
+ * @extends ChartProps
+ * @property {boolean} [stack=false]     - Stack bars (true) or group them (false)
+ */
+
+/**
+ * @typedef {Object} PieChartProps
+ * @property {Object[]} [data=[]]        - Data array to visualize
+ * @property {string}   [label]          - Field name for slice labels (drives color key)
+ * @property {string}   [y]              - Field name for slice values (theta)
+ * @property {string}   [fill]           - Alternative to label for color grouping
+ * @property {number}   [innerRadius=0]  - Inner radius as fraction of outer (0=pie, 0.5=donut)
+ * @property {string}   [stat='sum']     - Aggregation stat (default sum for pie charts)
+ * @property {number}   [width=400]      - SVG width in pixels
+ * @property {number}   [height=400]     - SVG height in pixels
+ * @property {string}   [mode='light']   - Color mode: 'light' | 'dark'
+ * @property {boolean}  [legend=false]   - Whether to show the legend
+ */
+
+/**
+ * @typedef {Object} BoxViolinChartProps
+ * @property {Object[]} [data=[]]        - Data array to visualize
+ * @property {string}   [x]              - Field name for the category axis (groups)
+ * @property {string}   [y]              - Field name for the value axis (raw observations)
+ * @property {string}   [fill]           - Field name for fill color; when different from x, sub-groups within each x-band (like grouped bars); lighter shade used for body, darker shade for whiskers/outline
+ * @property {number}   [width=600]      - SVG width in pixels
+ * @property {number}   [height=400]     - SVG height in pixels
+ * @property {string}   [mode='light']   - Color mode: 'light' | 'dark'
+ * @property {boolean}  [grid=true]      - Whether to show grid lines
+ * @property {boolean}  [legend=false]   - Whether to show the legend
+ */
+
+/**
+ * @typedef {Object} ScatterBubbleChartProps
+ * @property {Object[]} [data=[]]        - Data array to visualize
+ * @property {string}   [x]              - Field name for X position
+ * @property {string}   [y]              - Field name for Y position
+ * @property {string}   [color]          - Field name for color grouping
+ * @property {string}   [size]           - Field name for point radius (BubbleChart: required)
+ * @property {number}   [width=600]      - SVG width in pixels
+ * @property {number}   [height=400]     - SVG height in pixels
+ * @property {string}   [mode='light']   - Color mode: 'light' | 'dark'
+ * @property {boolean}  [grid=true]      - Whether to show grid lines
+ * @property {boolean}  [legend=false]   - Whether to show the legend
+ */
+
+/**
+ * @typedef {Object} LineAreaChartProps
+ * @extends ChartProps
+ * @property {string}   [curve]          - Line interpolation: 'linear' | 'smooth' | 'step'
+ */

package/src/lib/plot/crossfilter.js

@@ -0,0 +1,16 @@
+/**
+ * Applies dimming state to data rows using crossfilter instance.
+ * Maps each row to { data: row, dimmed: boolean }.
+ *
+ * @param {Object[]} data - raw data array
+ * @param {Object} cf - crossfilter instance (from createCrossFilter)
+ * @param {Object} channels - { x, y, color, ... } field name mapping
+ * @returns {{ data: Object, dimmed: boolean }[]}
+ */
+export function applyDimming(data, cf, channels) {
+  const fields = Object.values(channels).filter(Boolean)
+  return data.map((row) => {
+    const dimmed = fields.some((field) => cf.isDimmed(field, row[field]))
+    return { data: row, dimmed }
+  })
+}

package/src/lib/plot/facet.js

@@ -0,0 +1,58 @@
+import { extent } from 'd3-array'
+
+/**
+ * Splits data into a Map of panels keyed by facet field value.
+ * Preserves insertion order of first occurrence.
+ *
+ * @param {Object[]} data
+ * @param {string} field
+ * @returns {Map<unknown, Object[]>}
+ */
+export function splitByField(data, field) {
+  const map = new Map()
+  for (const row of data) {
+    const key = row[field]
+    if (!map.has(key)) map.set(key, [])
+    map.get(key).push(row)
+  }
+  return map
+}
+
+/**
+ * Computes x/y domains for each panel.
+ *
+ * @param {Map<unknown, Object[]>} panels
+ * @param {{ x: string, y: string }} channels
+ * @param {'fixed'|'free'|'free_x'|'free_y'} scalesMode
+ * @returns {Map<unknown, { xDomain: unknown[], yDomain: [number, number] }>}
+ */
+export function getFacetDomains(panels, channels, scalesMode = 'fixed') {
+  const { x: xf, y: yf } = channels
+  const allData = [...panels.values()].flat()
+
+  // Determine if x is categorical (string) or numeric
+  const sampleXVal = allData.find(d => d[xf] !== null && d[xf] !== undefined)?.[xf]
+  const xIsCategorical = typeof sampleXVal === 'string'
+
+  // Global domains (for fixed mode)
+  const globalXDomain = xIsCategorical
+    ? [...new Set(allData.map((d) => d[xf]))]
+    : extent(allData, (d) => Number(d[xf]))
+  const globalYDomain = extent(allData, (d) => Number(d[yf]))
+
+  const result = new Map()
+  for (const [key, rows] of panels.entries()) {
+    const freeX = scalesMode === 'free' || scalesMode === 'free_x'
+    const freeY = scalesMode === 'free' || scalesMode === 'free_y'
+
+    const xDomain = freeX
+      ? (xIsCategorical ? [...new Set(rows.map((d) => d[xf]))] : extent(rows, (d) => Number(d[xf])))
+      : globalXDomain
+    const yDomain = freeY
+      ? extent(rows, (d) => Number(d[yf]))
+      : globalYDomain
+
+    result.set(key, { xDomain, yDomain })
+  }
+  return result
+}