@rokkit/chart 1.0.0-next.15 → 1.0.0-next.150

package/src/lib/brewing/colors.js

@@ -0,0 +1,22 @@
+import palette from './palette.json'
+
+/**
+ * Extracts distinct values for a given field from the data array.
+ * @param {Object[]} data
+ * @param {string|null} field
+ * @returns {unknown[]}
+ */
+export function distinct(data, field) {
+  if (!field) return []
+  return [...new Set(data.map((d) => d[field]))].filter((v) => v !== null && v !== undefined)
+}
+
+/**
+ * Assigns palette colors to an array of distinct values.
+ * @param {unknown[]} values
+ * @param {'light'|'dark'} mode
+ * @returns {Map<unknown, {fill: string, stroke: string}>}
+ */
+export function assignColors(values, mode = 'light') {
+  return new Map(values.map((v, i) => [v, palette[i % palette.length].shades[mode]]))
+}

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

@@ -0,0 +1,56 @@
+import {} from './types.js'
+
+/**
+ * @typedef {import('./types').ChartMargin} ChartMargin
+ * @typedef {import('./types').ChartDimensions} ChartDimensions
+ */
+
+/**
+ * Default chart margin
+ * @type {ChartMargin}
+ */
+export const DEFAULT_MARGIN = { top: 20, right: 30, bottom: 40, left: 50 }
+
+/**
+ * Creates chart dimensions based on width, height and margins
+ *
+ * @param {number} width - Total chart width
+ * @param {number} height - Total chart height
+ * @param {ChartMargin} margin - Chart margins
+ * @returns {ChartDimensions} Chart dimensions
+ */
+export function createDimensions(width = 600, height = 400, margin = DEFAULT_MARGIN) {
+	return {
+		width,
+		height,
+		margin: { ...margin },
+		innerWidth: width - margin.left - margin.right,
+		innerHeight: height - margin.top - margin.bottom
+	}
+}
+
+/**
+ * Updates existing dimensions with new values
+ *
+ * @param {ChartDimensions} dimensions - Current dimensions
+ * @param {Object} updates - Values to update
+ * @param {number} [updates.width] - New width
+ * @param {number} [updates.height] - New height
+ * @param {ChartMargin} [updates.margin] - New margin
+ * @returns {ChartDimensions} Updated dimensions
+ */
+export function updateDimensions(dimensions, updates = {}) {
+	const newDimensions = { ...dimensions }
+
+	if (updates.width !== undefined) newDimensions.width = updates.width
+	if (updates.height !== undefined) newDimensions.height = updates.height
+	if (updates.margin !== undefined) newDimensions.margin = { ...updates.margin }
+
+	// Recalculate inner dimensions
+	newDimensions.innerWidth =
+		newDimensions.width - newDimensions.margin.left - newDimensions.margin.right
+	newDimensions.innerHeight =
+		newDimensions.height - newDimensions.margin.top - newDimensions.margin.bottom
+
+	return newDimensions
+}

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

@@ -0,0 +1,205 @@
+import { createDimensions, updateDimensions } from './dimensions.svelte.js'
+import { createScales, getOrigin } from './scales.svelte.js'
+import { createBars, filterBars, createGroupedBars } from './bars.svelte.js'
+import { createXAxis, createYAxis, createGrid, createTickAttributes } from './axes.svelte.js'
+import { createLegend, filterByLegend, createLegendItemAttributes } from './legends.svelte.js'
+
+/**
+ * Chart Brewing - A collection of pure functions for chart data preparation
+ */
+export {
+	// Dimensions
+	createDimensions,
+	updateDimensions,
+
+	// Scales
+	createScales,
+	getOrigin,
+
+	// Bars
+	createBars,
+	filterBars,
+	createGroupedBars,
+
+	// Axes
+	createXAxis,
+	createYAxis,
+	createGrid,
+	createTickAttributes,
+
+	// Legends
+	createLegend,
+	filterByLegend,
+	createLegendItemAttributes
+}
+
+/**
+ * Main class that manages chart state and provides access to all brewing functions
+ */
+export class ChartBrewer {
+	#data = []
+	#dimensions = createDimensions()
+	#scales = { x: null, y: null, color: null }
+	#fields = { x: null, y: null, color: null }
+	#options = {
+		padding: 0.2,
+		animationDuration: 300
+	}
+
+	/**
+	 * Creates a new ChartBrewer instance
+	 *
+	 * @param {Object} options Configuration options
+	 */
+	constructor(options = {}) {
+		this.#dimensions = createDimensions(options.width, options.height, options.margin)
+
+		if (options.padding !== undefined) this.#options.padding = options.padding
+		if (options.animationDuration !== undefined)
+			this.#options.animationDuration = options.animationDuration
+	}
+
+	/**
+	 * Sets the data for the chart
+	 *
+	 * @param {Array} data Data array
+	 * @returns {ChartBrewer} this for method chaining
+	 */
+	setData(data) {
+		this.#data = Array.isArray(data) ? data : []
+		return this
+	}
+
+	/**
+	 * Sets the field mappings for axes and color
+	 *
+	 * @param {Object} fields Field mappings
+	 * @returns {ChartBrewer} this for method chaining
+	 */
+	setFields({ x, y, color }) {
+		if (x !== undefined) this.#fields.x = x
+		if (y !== undefined) this.#fields.y = y
+		if (color !== undefined) this.#fields.color = color
+		return this
+	}
+
+	/**
+	 * Sets the dimensions of the chart
+	 *
+	 * @param {Object} dimensions Chart dimensions
+	 * @returns {ChartBrewer} this for method chaining
+	 */
+	setDimensions({ width, height, margin }) {
+		this.#dimensions = updateDimensions(this.#dimensions, { width, height, margin })
+		return this
+	}
+
+	/**
+	 * Creates scales based on data and dimensions
+	 *
+	 * @returns {ChartBrewer} this for method chaining
+	 */
+	createScales() {
+		this.#scales = createScales(this.#data, this.#fields, this.#dimensions, {
+			padding: this.#options.padding
+		})
+		return this
+	}
+
+	/**
+	 * Creates bar data for rendering
+	 *
+	 * @returns {Array} Data for rendering bars
+	 */
+	createBars() {
+		return createBars(this.#data, this.#fields, this.#scales, { dimensions: this.#dimensions })
+	}
+
+	/**
+	 * Creates x-axis tick data for rendering
+	 *
+	 * @param {Object} options Axis options
+	 * @returns {Object} Axis rendering data
+	 */
+	createXAxis(options = {}) {
+		return createXAxis(this.#scales, this.#dimensions, options)
+	}
+
+	/**
+	 * Creates y-axis tick data for rendering
+	 *
+	 * @param {Object} options Axis options
+	 * @returns {Object} Axis rendering data
+	 */
+	createYAxis(options = {}) {
+		return createYAxis(this.#scales, this.#dimensions, options)
+	}
+
+	/**
+	 * Creates grid line data for rendering
+	 *
+	 * @param {Object} options Grid options
+	 * @returns {Object} Grid rendering data
+	 */
+	createGrid(options = {}) {
+		return createGrid(this.#scales, this.#dimensions, options)
+	}
+
+	/**
+	 * Creates legend data for rendering
+	 *
+	 * @param {Object} options Legend options
+	 * @returns {Object} Legend rendering data
+	 */
+	createLegend(options = {}) {
+		return createLegend(this.#data, this.#fields, this.#scales, {
+			...options,
+			dimensions: this.#dimensions
+		})
+	}
+
+	/**
+	 * Gets all chart dimensions
+	 *
+	 * @returns {Object} Chart dimensions
+	 */
+	getDimensions() {
+		return { ...this.#dimensions }
+	}
+
+	/**
+	 * Gets all chart scales
+	 *
+	 * @returns {Object} Chart scales
+	 */
+	getScales() {
+		return { ...this.#scales }
+	}
+
+	/**
+	 * Gets the animation duration
+	 *
+	 * @returns {number} Animation duration in ms
+	 */
+	getAnimationDuration() {
+		return this.#options.animationDuration
+	}
+
+	/**
+	 * Gets the data being used
+	 *
+	 * @returns {Array} Chart data
+	 */
+	getData() {
+		return [...this.#data]
+	}
+
+	/**
+	 * Gets the fields configuration
+	 *
+	 * @returns {Object} Fields configuration
+	 */
+	getFields() {
+		return { ...this.#fields }
+	}
+}

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

@@ -0,0 +1,137 @@
+import { SvelteSet } from 'svelte/reactivity'
+import {} from './types.js'
+
+/**
+ * @typedef {import('./types').LegendItem} LegendItem
+ * @typedef {import('./types').LegendData} LegendData
+ * @typedef {import('./types').ScaleFields} ScaleFields
+ * @typedef {import('./types').ChartScales} ChartScales
+ * @typedef {import('./types').ChartDimensions} ChartDimensions
+ */
+
+const LEGEND_DEFAULTS = { title: '', align: 'right', shape: 'rect', markerSize: 10 }
+
+/**
+ * Compute the x-position for legend alignment
+ * @param {string} align
+ * @param {number} innerWidth
+ * @param {number} approximateWidth
+ * @returns {number}
+ */
+function legendX(align, innerWidth, approximateWidth) {
+	if (align === 'right') return innerWidth - approximateWidth
+	if (align === 'center') return (innerWidth - approximateWidth) / 2
+	return 0
+}
+
+/**
+ * @param {Array} colorValues
+ * @param {Function} colorScale
+ * @param {{ shape: string, markerSize: number, titleOffset: number }} style
+ * @returns {LegendItem[]}
+ */
+function buildLegendItems(colorValues, colorScale, style) {
+	const { shape, markerSize, titleOffset } = style
+	return colorValues.map((value, index) => ({
+		value,
+		color: colorScale(value),
+		y: index * (markerSize + 5) + titleOffset,
+		shape,
+		markerSize
+	}))
+}
+
+/**
+ * @param {Array} colorValues
+ * @param {number} markerSize
+ * @returns {number}
+ */
+function approximateLegendWidth(colorValues, markerSize) {
+	return Math.max(...colorValues.map((v) => v.toString().length)) * 8 + markerSize + 10
+}
+
+/**
+ * @param {Object} options
+ * @returns {{ dimensions: Object, title: string, align: string, shape: string, markerSize: number }}
+ */
+function parseLegendOptions(options) {
+	const merged = Object.assign({}, LEGEND_DEFAULTS, options || {})
+	return {
+		dimensions: merged.dimensions,
+		title: merged.title,
+		align: merged.align,
+		shape: merged.shape,
+		markerSize: merged.markerSize
+	}
+}
+
+/**
+ * @param {Object|undefined} dimensions
+ * @returns {number}
+ */
+function innerWidth(dimensions) {
+	return dimensions ? dimensions.innerWidth : 0
+}
+
+/**
+ * Creates legend data for rendering
+ *
+ * @param {Array} data - Chart data
+ * @param {Object} fields - Field mappings
+ * @param {string} fields.color - Color field
+ * @param {Object} scales - Chart scales
+ * @param {Function} scales.color - Color scale
+ * @param {Object} options - Legend options including dimensions
+ * @param {Object} options.dimensions - Chart dimensions
+ * @param {string} [options.title=''] - Legend title
+ * @param {string} [options.align='right'] - Legend alignment ('left', 'center', or 'right')
+ * @param {string} [options.shape='rect'] - Legend marker shape ('rect' or 'circle')
+ * @param {number} [options.markerSize=10] - Size of legend markers
+ * @returns {LegendData} Legend rendering data
+ */
+export function createLegend(data, fields, scales, options) {
+	if (!data || !fields.color || !scales.color) {
+		return { items: [], title: '', transform: 'translate(0, 0)' }
+	}
+
+	const { dimensions, title, align, shape, markerSize } = parseLegendOptions(options)
+	const colorValues = [...new SvelteSet(data.map((d) => d[fields.color]))]
+	const titleOffset = title ? 15 : 0
+	const style = { shape, markerSize, titleOffset }
+	const items = buildLegendItems(colorValues, scales.color, style)
+	const approxWidth = approximateLegendWidth(colorValues, markerSize)
+	const x = legendX(align, innerWidth(dimensions), approxWidth)
+
+	return { items, title, transform: `translate(${x}, 0)` }
+}
+
+/**
+ * Filter data based on legend selection
+ *
+ * @param {Array} data - Chart data
+ * @param {string} colorField - Field used for color mapping
+ * @param {Array} selectedValues - Selected legend values
+ * @returns {Array} Filtered data
+ */
+export function filterByLegend(data, colorField, selectedValues) {
+	if (!selectedValues || selectedValues.length === 0) {
+		return data
+	}
+
+	return data.filter((d) => selectedValues.includes(d[colorField]))
+}
+
+/**
+ * Create attributes for legend items
+ *
+ * @param {LegendItem} item - Legend item
+ * @returns {Object} Attributes for the legend item
+ */
+export function createLegendItemAttributes(item) {
+	return {
+		'data-plot-legend-item': '',
+		transform: `translate(0, ${item.y})`,
+		role: 'img',
+		'aria-label': `Legend item for ${item.value}`
+	}
+}

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

@@ -0,0 +1,43 @@
+import { pie, arc } from 'd3-shape'
+import { toPatternId } from '../../brewing/patterns.js'
+
+/**
+ * Builds arc geometry for pie/donut charts.
+ * @param {Object[]} data
+ * @param {{ color: string, y: string, pattern?: string }} channels
+ * @param {Map} colors
+ * @param {number} width
+ * @param {number} height
+ * @param {{ innerRadius?: number }} opts
+ * @param {Map<unknown, string>} [patterns]
+ */
+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
+  const pieGen = pie().value((d) => Number(d[yf]))
+  const arcGen = arc().innerRadius(innerRadius).outerRadius(radius)
+  const slices = pieGen(data)
+  const total = slices.reduce((s, sl) => s + (sl.endAngle - sl.startAngle), 0)
+  // Label radius: midpoint between inner and outer (or 70% out for solid pie)
+  const labelRadius = innerRadius > 0 ? (innerRadius + radius) / 2 : radius * 0.65
+  const labelArc = arc().innerRadius(labelRadius).outerRadius(labelRadius)
+  return slices.map((slice) => {
+    const key = slice.data[lf]
+    const colorEntry = colors?.get(key) ?? { fill: '#888', stroke: '#fff' }
+    const patternId = key !== null && key !== undefined && patterns?.has(key)
+      ? toPatternId(String(key)) : null
+    const pct = Math.round(((slice.endAngle - slice.startAngle) / total) * 100)
+    const [cx, cy] = labelArc.centroid(slice)
+    return {
+      d: arcGen(slice),
+      fill: colorEntry.fill,
+      stroke: colorEntry.stroke,
+      key,
+      patternId,
+      pct,
+      centroid: [cx, cy],
+      data: slice.data
+    }
+  })
+}

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

@@ -0,0 +1,59 @@
+import { area, curveCatmullRom, curveStep } from 'd3-shape'
+import { toPatternId } from '../patterns.js'
+
+/**
+ * @param {Object[]} data
+ * @param {{ x: string, y: string, fill?: string, pattern?: string }} channels
+ *   `fill` is the primary aesthetic — drives grouping and interior color.
+ * @param {Function} xScale
+ * @param {Function} yScale
+ * @param {Map} colors
+ * @param {'linear'|'smooth'|'step'} [curve]
+ * @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
+    }
+  })
+}
+
+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/bars.js

@@ -0,0 +1,49 @@
+/**
+ * @param {Object[]} data
+ * @param {{ x: string, y: string, fill?: string, color?: string, pattern?: string }} channels
+ *   `fill` drives the bar interior color. `color` drives the border stroke; falls back to fill.
+ * @param {import('d3-scale').ScaleBand|import('d3-scale').ScaleLinear} xScale
+ * @param {import('d3-scale').ScaleLinear} yScale
+ * @param {Map} colors - value→{fill,stroke}
+ * @param {Map} [patternMap] - value→patternName
+ * @returns {Array}
+ */
+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]
+
+  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

@@ -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
+}