decantr 0.9.0

package/src/chart/types/chord.js

@@ -0,0 +1,85 @@
+/**
+ * Chord diagram layout.
+ * Supports: relationship matrix, ribbon connections.
+ * @module types/chord
+ */
+
+import { scene, arc, path, text } from '../_scene.js';
+import { chordLayout } from '../layouts/hierarchy.js';
+import { polar, polarPoint } from '../layouts/polar.js';
+import { chartColor, MARGINS_NONE } from '../layouts/_layout-base.js';
+import { arcToPath } from '../_scene.js';
+import { resolve } from '../_shared.js';
+
+export function layoutChord(spec, width, height) {
+  const rawData = resolve(spec.data);
+  const matrix = resolve(spec.matrix) || (rawData && rawData.matrix) || (Array.isArray(rawData) ? rawData : []);
+  const labels = resolve(spec.labels) || (rawData && rawData.labels) || [];
+
+  const coords = polar(width, height, { padding: 40 });
+  const { cx, cy, radius } = coords;
+  const outerR = radius;
+  const innerR = radius * 0.9;
+  const ribbonR = innerR * 0.95;
+
+  const layout = chordLayout(matrix, labels, cx, cy, outerR, innerR);
+  const children = [];
+  const series = [];
+
+  // Arcs
+  for (const a of layout.arcs) {
+    const color = chartColor(a.index % 8);
+    children.push(arc({
+      cx, cy, innerR, outerR,
+      startAngle: a.startAngle, endAngle: a.endAngle,
+      fill: color, class: 'd-chart-slice',
+      data: { label: a.label, value: a.value, series: a.label,
+        ariaLabel: `${a.label}: ${a.value}` },
+      key: `chord-arc-${a.index}`
+    }));
+
+    // Label
+    const midAngle = (a.startAngle + a.endAngle) / 2;
+    const pt = polarPoint(cx, cy, outerR + 14, midAngle);
+    children.push(text({
+      x: pt.x, y: pt.y + 4,
+      content: a.label, anchor: pt.x > cx ? 'start' : 'end',
+      class: 'd-chart-axis', fontSize: 'var(--d-text-xs)'
+    }));
+
+    series.push({ key: a.label, color });
+  }
+
+  // Ribbons
+  for (let i = 0; i < layout.ribbons.length; i++) {
+    const r = layout.ribbons[i];
+    const color = chartColor(r.source.index % 8);
+
+    // Build ribbon path using cubic Bezier
+    const s1 = polarPoint(cx, cy, ribbonR, r.source.startAngle);
+    const s2 = polarPoint(cx, cy, ribbonR, r.source.endAngle);
+    const t1 = polarPoint(cx, cy, ribbonR, r.target.startAngle);
+    const t2 = polarPoint(cx, cy, ribbonR, r.target.endAngle);
+
+    const d = `M${s1.x},${s1.y}` +
+      `A${ribbonR},${ribbonR},0,${r.source.endAngle - r.source.startAngle > Math.PI ? 1 : 0},1,${s2.x},${s2.y}` +
+      `Q${cx},${cy},${t1.x},${t1.y}` +
+      `A${ribbonR},${ribbonR},0,${r.target.endAngle - r.target.startAngle > Math.PI ? 1 : 0},1,${t2.x},${t2.y}` +
+      `Q${cx},${cy},${s1.x},${s1.y}Z`;
+
+    children.push(path({
+      d, fill: color, opacity: 0.3, class: 'd-chart-area',
+      data: {
+        label: `${labels[r.source.index] || r.source.index} → ${labels[r.target.index] || r.target.index}`,
+        value: r.value, series: 'chord-ribbon'
+      },
+      key: `chord-ribbon-${i}`
+    }));
+  }
+
+  return scene(width, height, children, {
+    type: 'chord', series, layout,
+    margins: MARGINS_NONE, innerW: width, innerH: height,
+    cx, cy, radius, dataLength: matrix.length
+  });
+}

package/src/chart/types/combination.js

@@ -0,0 +1,108 @@
+/**
+ * Combination chart — mixed types on shared axes (layers API).
+ * @module types/combination
+ */
+
+import { scene, group, path, rect, gradient } from '../_scene.js';
+import { pointsToPathD, smoothPathD, areaPathD, smoothAreaPathD } from '../_scene.js';
+import { cartesian } from '../layouts/cartesian.js';
+import { chartColor, buildAnnotations } from '../layouts/_layout-base.js';
+import { resolve, scaleBand } from '../_shared.js';
+
+export function layoutCombination(spec, width, height) {
+  const data = resolve(spec.data);
+  const layers = spec.layers || [];
+  if (!layers.length) {
+    return scene(width, height, [], { type: 'combination', dataLength: 0 });
+  }
+
+  // Gather all Y fields for scale
+  const allYFields = layers.map(l => l.y).filter(Boolean);
+  const coords = cartesian({ ...spec, y: allYFields }, width, height, {
+    bandX: layers.some(l => l.type === 'bar')
+  });
+  const { innerW, innerH, margins, xScale, yScale, xType, axisNodes, gridNodes, categories } = coords;
+
+  const children = [];
+  if (spec.grid !== false) children.push(...gridNodes);
+  children.push(...axisNodes);
+
+  const series = [];
+  const bandW = xType === 'band' && xScale.bandwidth ? xScale.bandwidth() : 0;
+  let barLayerIdx = 0;
+  const barLayers = layers.filter(l => l.type === 'bar');
+
+  for (let li = 0; li < layers.length; li++) {
+    const layer = layers[li];
+    const yField = layer.y;
+    const color = layer.color || chartColor(li);
+    series.push({ key: yField, color });
+
+    if (layer.type === 'bar') {
+      const subBandW = barLayers.length > 1 ? bandW / barLayers.length : bandW;
+      const offset = barLayers.length > 1 ? barLayerIdx * subBandW : 0;
+      barLayerIdx++;
+
+      for (const d of data) {
+        const val = +d[yField] || 0;
+        const x = xScale(d[spec.x]) + offset;
+        children.push(rect({
+          x, y: yScale(val), w: subBandW * 0.85, h: yScale(0) - yScale(val),
+          fill: color, rx: Math.min(4, subBandW * 0.85 / 4), class: 'd-chart-bar',
+          data: { series: yField, value: val, label: String(d[spec.x]) },
+          key: `combo-bar-${li}-${d[spec.x]}`
+        }));
+      }
+    } else if (layer.type === 'area') {
+      const baseline = yScale(0);
+      const points = data.map(d => {
+        const xVal = xType === 'band' ? d[spec.x] : +d[spec.x];
+        const x = xScale(xVal) + (xType === 'band' ? bandW / 2 : 0);
+        return { x, y0: yScale(+d[yField] || 0), y1: baseline };
+      });
+      // Gradient fill
+      const gradId = `combo-area-grad-${li}`;
+      const yMin = Math.min(...points.map(p => p.y0));
+      const yMax = Math.max(...points.map(p => p.y1));
+      children.push(gradient({
+        id: gradId, x1: '0', y1: yMin, x2: '0', y2: yMax,
+        stops: [
+          { offset: '0%', color, opacity: 0.3 },
+          { offset: '100%', color, opacity: 0.02 }
+        ]
+      }));
+      const useSmooth = layer.smooth !== undefined ? layer.smooth : spec.smooth;
+      const areaD = useSmooth ? smoothAreaPathD(points) : areaPathD(points);
+      children.push(path({ d: areaD, fill: `url(#${gradId})`, key: `combo-area-${li}` }));
+      const linePts = points.map(p => ({ x: p.x, y: p.y0 }));
+      const lineD = useSmooth ? smoothPathD(linePts) : pointsToPathD(linePts);
+      children.push(path({
+        d: lineD, stroke: color, strokeWidth: 2, class: 'd-chart-line', key: `combo-area-line-${li}`
+      }));
+    } else {
+      // Line (default)
+      const points = data.map(d => {
+        const xVal = xType === 'band' ? d[spec.x] : +d[spec.x];
+        const x = xScale(xVal) + (xType === 'band' ? bandW / 2 : 0);
+        return { x, y: yScale(+d[yField] || 0) };
+      });
+      const useSmooth = layer.smooth !== undefined ? layer.smooth : spec.smooth;
+      const pathD = useSmooth ? smoothPathD(points) : pointsToPathD(points);
+      children.push(path({
+        d: pathD, stroke: color, strokeWidth: 2,
+        strokeLinecap: 'round', strokeLinejoin: 'round',
+        class: 'd-chart-line',
+        data: { series: yField }, key: `combo-line-${li}`
+      }));
+    }
+  }
+
+  // Annotations
+  if (spec.annotations) {
+    children.push(...buildAnnotations(spec.annotations, xScale, yScale, xType, innerW, innerH));
+  }
+
+  return scene(width, height, [
+    group({ transform: `translate(${margins.left},${margins.top})` }, children)
+  ], { type: 'combination', series, margins, innerW, innerH, dataLength: data.length });
+}

package/src/chart/types/funnel.js

@@ -0,0 +1,68 @@
+/**
+ * Funnel / Pyramid chart layout.
+ * @module types/funnel
+ */
+
+import { scene, polygon, text } from '../_scene.js';
+import { chartColor, MARGINS } from '../layouts/_layout-base.js';
+import { resolve } from '../_shared.js';
+
+export function layoutFunnel(spec, width, height) {
+  const data = resolve(spec.data);
+  const xField = spec.x;
+  const yField = Array.isArray(spec.y) ? spec.y[0] : spec.y;
+  const isPyramid = spec.pyramid === true;
+
+  const margins = { top: 16, right: 40, bottom: 16, left: 40 };
+  const innerW = width - margins.left - margins.right;
+  const innerH = height - margins.top - margins.bottom;
+
+  const maxVal = Math.max(...data.map(d => Math.abs(+d[yField] || 0)), 1);
+  const n = data.length;
+  const segH = innerH / n;
+  const gap = 4;
+
+  const children = [];
+  const series = [];
+
+  for (let i = 0; i < n; i++) {
+    const d = data[i];
+    const val = Math.abs(+d[yField] || 0);
+    const nextVal = i < n - 1 ? Math.abs(+data[i + 1][yField] || 0) : (isPyramid ? 0 : val * 0.5);
+
+    const topW = (val / maxVal) * innerW;
+    const bottomW = (nextVal / maxVal) * innerW;
+    const cx = innerW / 2;
+    const y0 = i * segH + gap / 2;
+    const y1 = (i + 1) * segH - gap / 2;
+
+    const points = [
+      { x: cx - topW / 2, y: y0 },
+      { x: cx + topW / 2, y: y0 },
+      { x: cx + bottomW / 2, y: y1 },
+      { x: cx - bottomW / 2, y: y1 }
+    ];
+
+    const color = chartColor(i);
+    children.push(polygon({
+      points, fill: color, class: 'd-chart-slice',
+      data: { label: d[xField], value: val, series: d[xField],
+        ariaLabel: `${d[xField]}: ${val}` },
+      key: `funnel-${i}`
+    }));
+
+    // Label
+    const ly = (y0 + y1) / 2 + 4;
+    children.push(text({
+      x: cx, y: ly, content: `${d[xField]} (${val})`,
+      anchor: 'middle', fill: 'var(--d-fg)',
+      fontSize: 'var(--d-text-sm)', fontWeight: 'var(--d-fw-title)'
+    }));
+
+    series.push({ key: d[xField], color });
+  }
+
+  return scene(width, height, [
+    { type: 'group', transform: `translate(${margins.left},${margins.top})`, children }
+  ], { type: 'funnel', series, margins, innerW, innerH, dataLength: data.length });
+}

package/src/chart/types/gauge.js

@@ -0,0 +1,163 @@
+/**
+ * Gauge chart layout.
+ * Supports: radial, linear, horizontal, bullet, segments, target markers.
+ * @module types/gauge
+ */
+
+import { scene, arc, line, text, rect, circle } from '../_scene.js';
+import { polar, polarPoint } from '../layouts/polar.js';
+import { MARGINS_NONE } from '../layouts/_layout-base.js';
+import { resolve } from '../_shared.js';
+
+export function layoutGauge(spec, width, height) {
+  const rawData = resolve(spec.data);
+  const val = resolve(spec.value) ?? (typeof rawData === 'number' ? rawData : Array.isArray(rawData) ? (+rawData[0]?.[spec.y] || +rawData[0] || 0) : 0);
+  const min = spec.min ?? 0;
+  const max = spec.max ?? 100;
+  const target = spec.target;
+  const segments = spec.segments || [];
+  const variant = spec.variant || 'radial';
+
+  if (variant === 'bullet' || variant === 'linear' || variant === 'horizontal') {
+    return layoutLinearGauge(spec, val, min, max, target, segments, width, height);
+  }
+
+  return layoutRadialGauge(spec, val, min, max, target, segments, width, height);
+}
+
+function layoutRadialGauge(spec, val, min, max, target, segments, width, height) {
+  const startAngle = -Math.PI * 0.75;
+  const endAngle = Math.PI * 0.75;
+  const totalAngle = endAngle - startAngle;
+  const coords = polar(width, height, { innerRadiusRatio: 0.7, padding: 24, startAngle, endAngle });
+  const { cx, cy, radius, innerRadius } = coords;
+
+  const children = [];
+  const range = max - min || 1;
+  const fraction = Math.max(0, Math.min(1, (val - min) / range));
+
+  // Background track
+  children.push(arc({
+    cx, cy, innerR: innerRadius, outerR: radius,
+    startAngle, endAngle,
+    fill: 'var(--d-border)', opacity: 0.2
+  }));
+
+  // Segments
+  if (segments.length) {
+    for (const seg of segments) {
+      const sa = startAngle + ((seg.from - min) / range) * totalAngle;
+      const ea = startAngle + ((seg.to - min) / range) * totalAngle;
+      children.push(arc({
+        cx, cy, innerR: innerRadius, outerR: radius,
+        startAngle: sa, endAngle: ea,
+        fill: seg.color || 'var(--d-muted)', opacity: 0.3
+      }));
+    }
+  }
+
+  // Value arc
+  const valAngle = startAngle + fraction * totalAngle;
+  const valueColor = getValueColor(fraction);
+  children.push(arc({
+    cx, cy, innerR: innerRadius, outerR: radius,
+    startAngle, endAngle: valAngle,
+    fill: valueColor, class: 'd-chart-slice',
+    data: { label: 'value', value: val, series: 'gauge' },
+    key: 'gauge-value'
+  }));
+
+  // Needle
+  const needlePt = polarPoint(cx, cy, innerRadius - 4, valAngle);
+  children.push(line({ x1: cx, y1: cy, x2: needlePt.x, y2: needlePt.y, stroke: 'var(--d-fg)', strokeWidth: 2 }));
+  children.push(circle({ cx, cy, r: 4, fill: 'var(--d-fg)' }));
+
+  // Target marker
+  if (target != null) {
+    const tFrac = Math.max(0, Math.min(1, (target - min) / range));
+    const tAngle = startAngle + tFrac * totalAngle;
+    const tPt = polarPoint(cx, cy, radius + 6, tAngle);
+    children.push(line({
+      x1: polarPoint(cx, cy, innerRadius - 2, tAngle).x,
+      y1: polarPoint(cx, cy, innerRadius - 2, tAngle).y,
+      x2: tPt.x, y2: tPt.y,
+      stroke: 'var(--d-warning)', strokeWidth: 2
+    }));
+  }
+
+  // Value text
+  children.push(text({
+    x: cx, y: cy + radius * 0.35,
+    content: String(val), anchor: 'middle',
+    fontSize: 'var(--d-text-2xl)', fontWeight: 'var(--d-fw-heading)',
+    fill: 'var(--d-fg)'
+  }));
+
+  // Min/Max labels
+  const minPt = polarPoint(cx, cy, radius + 14, startAngle);
+  const maxPt = polarPoint(cx, cy, radius + 14, endAngle);
+  children.push(text({ x: minPt.x, y: minPt.y + 4, content: String(min), anchor: 'end', class: 'd-chart-axis', fontSize: 'var(--d-text-xs)' }));
+  children.push(text({ x: maxPt.x, y: maxPt.y + 4, content: String(max), anchor: 'start', class: 'd-chart-axis', fontSize: 'var(--d-text-xs)' }));
+
+  return scene(width, height, children, {
+    type: 'gauge', margins: MARGINS_NONE,
+    innerW: width, innerH: height,
+    value: val, min, max, fraction, dataLength: 1
+  });
+}
+
+function layoutLinearGauge(spec, val, min, max, target, segments, width, height) {
+  const margins = { top: 20, right: 16, bottom: 20, left: 16 };
+  const barH = Math.min(24, height / 3);
+  const innerW = width - margins.left - margins.right;
+  const cy = height / 2;
+  const range = max - min || 1;
+  const fraction = Math.max(0, Math.min(1, (val - min) / range));
+
+  const children = [];
+
+  // Background track
+  children.push(rect({ x: 0, y: cy - barH / 2, w: innerW, h: barH, rx: barH / 2, fill: 'var(--d-border)', opacity: 0.2 }));
+
+  // Segments
+  if (segments.length) {
+    for (const seg of segments) {
+      const x0 = ((seg.from - min) / range) * innerW;
+      const x1 = ((seg.to - min) / range) * innerW;
+      children.push(rect({ x: x0, y: cy - barH / 2, w: x1 - x0, h: barH, fill: seg.color || 'var(--d-muted)', opacity: 0.3 }));
+    }
+  }
+
+  // Value bar
+  children.push(rect({
+    x: 0, y: cy - barH / 2, w: fraction * innerW, h: barH,
+    rx: barH / 2, fill: getValueColor(fraction),
+    data: { label: 'value', value: val, series: 'gauge' },
+    key: 'gauge-bar'
+  }));
+
+  // Target line
+  if (target != null) {
+    const tx = ((target - min) / range) * innerW;
+    children.push(line({ x1: tx, y1: cy - barH, x2: tx, y2: cy + barH, stroke: 'var(--d-warning)', strokeWidth: 2 }));
+  }
+
+  // Min/Max labels
+  children.push(text({ x: 0, y: cy + barH / 2 + 16, content: String(min), anchor: 'start', class: 'd-chart-axis', fontSize: 'var(--d-text-xs)' }));
+  children.push(text({ x: innerW, y: cy + barH / 2 + 16, content: String(max), anchor: 'end', class: 'd-chart-axis', fontSize: 'var(--d-text-xs)' }));
+
+  // Value text
+  children.push(text({ x: fraction * innerW, y: cy - barH / 2 - 8, content: String(val), anchor: 'middle', fontSize: 'var(--d-text-base)', fontWeight: 'var(--d-fw-heading)', fill: 'var(--d-fg)' }));
+
+  return scene(width, height, [
+    group({ transform: `translate(${margins.left},0)` }, children)
+  ], { type: 'gauge', margins, innerW, innerH: height, value: val, min, max, fraction, dataLength: 1 });
+}
+
+import { group } from '../_scene.js';
+
+function getValueColor(fraction) {
+  if (fraction < 0.33) return 'var(--d-error)';
+  if (fraction < 0.66) return 'var(--d-warning)';
+  return 'var(--d-success)';
+}

package/src/chart/types/heatmap.js

@@ -0,0 +1,98 @@
+/**
+ * Heatmap chart layout.
+ * Supports: labels, calendar layout, continuous color scale.
+ * @module types/heatmap
+ */
+
+import { scene, group, rect, text, line } from '../_scene.js';
+import { MARGINS, innerDimensions } from '../layouts/_layout-base.js';
+import { resolve, unique } from '../_shared.js';
+
+export function layoutHeatmap(spec, width, height) {
+  const data = resolve(spec.data);
+  const xField = spec.x;
+  const yField = spec.row || spec.series || (Array.isArray(spec.y) ? spec.y[0] : spec.y);
+  const valueField = spec.value || (Array.isArray(spec.y) ? spec.y[1] : 'value');
+
+  const xCats = unique(data, xField);
+  const yCats = unique(data, yField);
+
+  const margins = { ...MARGINS, left: 72 };
+  const { innerW, innerH } = innerDimensions(width, height, margins);
+
+  const cellW = innerW / (xCats.length || 1);
+  const cellH = innerH / (yCats.length || 1);
+
+  // Value range for color mapping
+  let vMin = Infinity, vMax = -Infinity;
+  for (const d of data) {
+    const v = +d[valueField];
+    if (v < vMin) vMin = v;
+    if (v > vMax) vMax = v;
+  }
+
+  const colorStops = spec.colorScale || ['#f0f9ff', '#0369a1'];
+  function cellColor(v) {
+    const t = vMax > vMin ? (v - vMin) / (vMax - vMin) : 0.5;
+    return lerpHex(colorStops[0], colorStops[colorStops.length - 1], t);
+  }
+
+  // Build lookup
+  const lookup = new Map();
+  for (const d of data) lookup.set(`${d[xField]}|${d[yField]}`, d);
+
+  const children = [];
+
+  // X labels
+  for (let i = 0; i < xCats.length; i++) {
+    children.push(text({
+      x: i * cellW + cellW / 2, y: -8,
+      content: String(xCats[i]), anchor: 'middle', class: 'd-chart-axis'
+    }));
+  }
+
+  // Y labels
+  for (let j = 0; j < yCats.length; j++) {
+    children.push(text({
+      x: -8, y: j * cellH + cellH / 2 + 4,
+      content: String(yCats[j]), anchor: 'end', class: 'd-chart-axis'
+    }));
+  }
+
+  // Cells
+  for (let j = 0; j < yCats.length; j++) {
+    for (let i = 0; i < xCats.length; i++) {
+      const d = lookup.get(`${xCats[i]}|${yCats[j]}`);
+      const val = d ? +d[valueField] : 0;
+      const x = i * cellW;
+      const y = j * cellH;
+
+      children.push(rect({
+        x: x + 1, y: y + 1, w: cellW - 2, h: cellH - 2,
+        rx: Math.min(2, (cellW - 2) / 4), fill: cellColor(val),
+        class: 'd-chart-bar',
+        data: { label: `${xCats[i]}, ${yCats[j]}`, value: val, series: 'heatmap' },
+        key: `heat-${i}-${j}`
+      }));
+
+      if (spec.labels && cellW > 30 && cellH > 20) {
+        children.push(text({
+          x: x + cellW / 2, y: y + cellH / 2 + 4,
+          content: String(val), anchor: 'middle', fill: val > (vMin + vMax) / 2 ? '#fff' : '#000',
+          fontSize: 'var(--d-text-xs)'
+        }));
+      }
+    }
+  }
+
+  return scene(width, height, [
+    group({ transform: `translate(${margins.left},${margins.top})` }, children)
+  ], { type: 'heatmap', margins, innerW, innerH, dataLength: data.length });
+}
+
+function lerpHex(hex1, hex2, t) {
+  const r1 = parseInt(hex1.slice(1, 3), 16), g1 = parseInt(hex1.slice(3, 5), 16), b1 = parseInt(hex1.slice(5, 7), 16);
+  const r2 = parseInt(hex2.slice(1, 3), 16), g2 = parseInt(hex2.slice(3, 5), 16), b2 = parseInt(hex2.slice(5, 7), 16);
+  const r = Math.round(r1 + (r2 - r1) * t), g = Math.round(g1 + (g2 - g1) * t), b = Math.round(b1 + (b2 - b1) * t);
+  return '#' + [r, g, b].map(c => Math.max(0, Math.min(255, c)).toString(16).padStart(2, '0')).join('');
+}

package/src/chart/types/histogram.js

@@ -0,0 +1,71 @@
+/**
+ * Histogram chart layout.
+ * Supports: auto/specified bins, missing bins.
+ * @module types/histogram
+ */
+
+import { scene, group, rect, text } from '../_scene.js';
+import { chartColor, MARGINS, innerDimensions, buildGridNodes, buildYAxisNodes } from '../layouts/_layout-base.js';
+import { resolve, scaleLinear, scaleBand, extent } from '../_shared.js';
+import { line } from '../_scene.js';
+
+export function layoutHistogram(spec, width, height) {
+  const data = resolve(spec.data);
+  const field = spec.x || (Array.isArray(spec.y) ? spec.y[0] : (spec.y !== 'y' ? spec.y : null)) || 'value';
+  const values = data.map(d => +d[field]).filter(v => !isNaN(v));
+
+  const margins = { ...MARGINS };
+  const { innerW, innerH } = innerDimensions(width, height, margins);
+
+  // Compute bins
+  const binCount = spec.bins || Math.max(5, Math.ceil(Math.sqrt(values.length)));
+  const [minVal, maxVal] = extent(data, field);
+  const binWidth = spec.binWidth || (maxVal - minVal) / binCount || 1;
+  const bins = [];
+
+  for (let i = 0; i < binCount; i++) {
+    const lo = minVal + i * binWidth;
+    const hi = lo + binWidth;
+    const count = values.filter(v => v >= lo && (i === binCount - 1 ? v <= hi : v < hi)).length;
+    bins.push({ lo, hi, count, label: `${lo.toFixed(1)}-${hi.toFixed(1)}` });
+  }
+
+  const xScale = scaleLinear([minVal, minVal + binCount * binWidth], [0, innerW]);
+  const maxCount = Math.max(...bins.map(b => b.count), 1);
+  const yScale = scaleLinear([0, maxCount * 1.1], [innerH, 0]);
+
+  const children = [];
+
+  // Grid
+  if (spec.grid !== false) children.push(...buildGridNodes(yScale, innerW));
+
+  // X axis
+  children.push(line({ x1: 0, y1: innerH, x2: innerW, y2: innerH, stroke: 'var(--d-border)', class: 'd-chart-axis' }));
+  for (const bin of bins) {
+    const x = xScale((bin.lo + bin.hi) / 2);
+    children.push(text({ x, y: innerH + 18, content: bin.lo.toFixed(0), anchor: 'middle', class: 'd-chart-axis' }));
+  }
+
+  // Y axis
+  children.push(...buildYAxisNodes(yScale, innerH, spec));
+
+  // Bars
+  const gap = 1;
+  for (let i = 0; i < bins.length; i++) {
+    const bin = bins[i];
+    const x = xScale(bin.lo) + gap;
+    const w = xScale(bin.hi) - xScale(bin.lo) - gap * 2;
+    const y = yScale(bin.count);
+    const h = innerH - y;
+    children.push(rect({
+      x, y, w: Math.max(0, w), h: Math.max(0, h),
+      rx: Math.min(4, w / 4), fill: chartColor(0), class: 'd-chart-bar',
+      data: { label: bin.label, value: bin.count, series: field },
+      key: `hist-${i}`
+    }));
+  }
+
+  return scene(width, height, [
+    group({ transform: `translate(${margins.left},${margins.top})` }, children)
+  ], { type: 'histogram', bins, margins, innerW, innerH, dataLength: data.length });
+}