@opendata-ai/openchart-engine 8.5.1 → 8.6.0

package/dist/index.js

@@ -2618,16 +2618,16 @@ function computeStackedBars(data, valueField, categoryField, colorField, xScale,
     }
     let cumulativeValue = stackMode === "center" ? -categoryTotal / 2 : 0;
     for (const row of rows) {
-      const groupKey3 = String(row[colorField] ?? "");
+      const groupKey4 = String(row[colorField] ?? "");
       const rawValue = Number(row[valueField] ?? 0);
       if (!Number.isFinite(rawValue) || rawValue <= 0) continue;
       const value = stackMode === "normalize" && categoryTotal > 0 ? rawValue / categoryTotal : rawValue;
-      const color = getColor(scales, groupKey3);
+      const color = getColor(scales, groupKey4);
       const xLeft = xScale(cumulativeValue);
       const xRight = xScale(cumulativeValue + value);
       const barWidth = Math.max(Math.abs(xRight - xLeft), MIN_BAR_WIDTH);
       const aria = {
-        label: `${category}, ${groupKey3}: ${formatLabelValue(rawValue)}`
+        label: `${category}, ${groupKey4}: ${formatLabelValue(rawValue)}`
       };
       marks.push({
         type: "rect",
@@ -2637,7 +2637,7 @@ function computeStackedBars(data, valueField, categoryField, colorField, xScale,
         height: bandwidth,
         fill: isGradientDef(color) ? orientGradientForHorizontalBar(color) : color,
         cornerRadius: 0,
-        seriesKey: groupKey3,
+        seriesKey: groupKey4,
         data: row,
         aria,
         orient: "horizontal",
@@ -2676,16 +2676,16 @@ function computeGroupedBars(data, valueField, categoryField, colorField, xScale,
     const bandY = yScale(category);
     if (bandY === void 0) continue;
     for (const row of rows) {
-      const groupKey3 = String(row[colorField] ?? "");
+      const groupKey4 = String(row[colorField] ?? "");
       const value = Number(row[valueField] ?? 0);
       if (!Number.isFinite(value)) continue;
-      const groupIndex = groupIndexMap.get(groupKey3) ?? 0;
-      const color = getColor(scales, groupKey3);
+      const groupIndex = groupIndexMap.get(groupKey4) ?? 0;
+      const color = getColor(scales, groupKey4);
       const xPos = value >= 0 ? baseline : xScale(value);
       const barWidth = Math.max(Math.abs(xScale(value) - baseline), MIN_BAR_WIDTH);
       const subY = bandY + groupOffset + groupIndex * (subBandHeight + gap);
       const aria = {
-        label: `${category}, ${groupKey3}: ${formatLabelValue(value)}`
+        label: `${category}, ${groupKey4}: ${formatLabelValue(value)}`
       };
       marks.push({
         type: "rect",
@@ -2696,7 +2696,7 @@ function computeGroupedBars(data, valueField, categoryField, colorField, xScale,
         fill: isGradientDef(color) ? orientGradientForHorizontalBar(color) : color,
         cornerRadius: BAR_CORNER_RADIUS,
         cornerRadiusSides: valueEndCorners("horizontal", value < 0),
-        seriesKey: groupKey3,
+        seriesKey: groupKey4,
         data: row,
         aria,
         orient: "horizontal"
@@ -2713,12 +2713,12 @@ function computeColoredBars(data, valueField, categoryField, colorField, xScale,
     if (!Number.isFinite(value)) continue;
     const bandY = yScale(category);
     if (bandY === void 0) continue;
-    const groupKey3 = String(row[colorField] ?? "");
-    const color = getColor(scales, groupKey3);
+    const groupKey4 = String(row[colorField] ?? "");
+    const color = getColor(scales, groupKey4);
     const xPos = value >= 0 ? baseline : xScale(value);
     const barWidth = Math.max(Math.abs(xScale(value) - baseline), MIN_BAR_WIDTH);
     const aria = {
-      label: `${category}, ${groupKey3}: ${formatLabelValue(value)}`
+      label: `${category}, ${groupKey4}: ${formatLabelValue(value)}`
     };
     marks.push({
       type: "rect",
@@ -2729,7 +2729,7 @@ function computeColoredBars(data, valueField, categoryField, colorField, xScale,
       fill: isGradientDef(color) ? orientGradientForHorizontalBar(color) : color,
       cornerRadius: BAR_CORNER_RADIUS,
       cornerRadiusSides: valueEndCorners("horizontal", value < 0),
-      seriesKey: groupKey3,
+      seriesKey: groupKey4,
       data: row,
       aria,
       orient: "horizontal"
@@ -3248,6 +3248,140 @@ var beeswarmRenderer = (spec, scales, chartArea, strategy, theme) => {
   return computeBeeswarmMarks(spec, scales, chartArea, strategy, theme);
 };
 
+// src/charts/binned-bar/compute.ts
+import { formatNumber } from "@opendata-ai/openchart-core";
+var OVERLAP_FILL_OPACITY = 0.55;
+var BIN_GAP = 1;
+var MIN_BIN_WIDTH = 1;
+var MIN_BAR_HEIGHT = 1;
+function computeBinnedBarMarks(spec, scales, _chartArea, _strategy, theme) {
+  const encoding = spec.encoding;
+  const xChannel = encoding.x;
+  const x2Channel = encoding.x2;
+  const yChannel = encoding.y;
+  if (!xChannel || !x2Channel || !yChannel || !scales.x || !scales.y) return [];
+  const xScale = scales.x.scale;
+  const yScale = scales.y.scale;
+  const yDomain = yScale.domain();
+  const yIncludesZero = yDomain[0] <= 0 && yDomain[1] >= 0;
+  const baseline = yIncludesZero ? yScale(0) : yScale(yDomain[0]);
+  const colorEnc = encoding.color && "field" in encoding.color ? encoding.color : void 0;
+  const colorField = colorEnc?.type === "quantitative" ? void 0 : colorEnc?.field;
+  const groups = groupByField(spec.data, colorField);
+  const stackEnabled = groups.size > 1 && (yChannel.stack === true || yChannel.stack === "zero" || yChannel.stack === "normalize" || yChannel.stack === "center");
+  const marks = groups.size > 1 && stackEnabled ? stackedBins(groups, spec, scales, xScale, yScale, baseline, theme) : overlappingBins(groups, spec, scales, xScale, yScale, baseline, colorField);
+  stampKeys(marks, xChannel.field, colorField);
+  return marks;
+}
+function binGeometry(row, xField, x2Field, xScale) {
+  const start = Number(row[xField]);
+  const end = Number(row[x2Field]);
+  if (!Number.isFinite(start) || !Number.isFinite(end)) return void 0;
+  const px0 = xScale(start);
+  const px1 = xScale(end);
+  const left = Math.min(px0, px1);
+  const span = Math.abs(px1 - px0);
+  return { x: left, width: Math.max(span - BIN_GAP, MIN_BIN_WIDTH) };
+}
+function ariaFor(row, xField, x2Field, yField, seriesKey) {
+  const start = Number(row[xField]);
+  const end = Number(row[x2Field]);
+  const value = Number(row[yField]);
+  const range = `${formatNumber(start)} to ${formatNumber(end)}`;
+  const prefix = seriesKey ? `${seriesKey}, ` : "";
+  return { label: `${prefix}${range}: ${formatNumber(value)}` };
+}
+function overlappingBins(groups, spec, scales, xScale, yScale, baseline, colorField) {
+  const encoding = spec.encoding;
+  const xField = encoding.x.field;
+  const x2Field = encoding.x2.field;
+  const yField = encoding.y.field;
+  const multi = groups.size > 1;
+  const fillOpacity = multi ? spec.markDef.fillOpacity ?? OVERLAP_FILL_OPACITY : spec.markDef.fillOpacity;
+  const marks = [];
+  for (const [key, rows] of groups) {
+    const fill = getColor(scales, key);
+    for (const row of rows) {
+      const geom = binGeometry(row, xField, x2Field, xScale);
+      if (!geom) continue;
+      const value = Number(row[yField]);
+      if (!Number.isFinite(value)) continue;
+      const endY = yScale(value);
+      const top = Math.min(baseline, endY);
+      const height = Math.max(Math.abs(baseline - endY), MIN_BAR_HEIGHT);
+      marks.push({
+        type: "rect",
+        x: geom.x,
+        y: top,
+        width: geom.width,
+        height,
+        fill,
+        fillOpacity,
+        // Histogram bars are contiguous; rounded corners read as gaps.
+        cornerRadius: 0,
+        orient: "vertical",
+        ...colorField ? { seriesKey: key } : {},
+        data: row,
+        aria: ariaFor(row, xField, x2Field, yField, colorField ? key : void 0)
+      });
+    }
+  }
+  return marks;
+}
+function stackedBins(groups, spec, scales, xScale, yScale, baseline, theme) {
+  const encoding = spec.encoding;
+  const xField = encoding.x.field;
+  const x2Field = encoding.x2.field;
+  const yField = encoding.y.field;
+  const offsets = /* @__PURE__ */ new Map();
+  const seam = stackSeamStroke(theme);
+  const marks = [];
+  for (const [key, rows] of groups) {
+    const fill = getColor(scales, key);
+    for (const row of rows) {
+      const geom = binGeometry(row, xField, x2Field, xScale);
+      if (!geom) continue;
+      const value = Number(row[yField]);
+      if (!Number.isFinite(value) || value <= 0) continue;
+      const binKey = serializeKeyValue(row[xField]);
+      const used = offsets.get(binKey) ?? 0;
+      const segmentHeight = Math.max(baseline - yScale(value), MIN_BAR_HEIGHT);
+      const top = baseline - used - segmentHeight;
+      offsets.set(binKey, used + segmentHeight);
+      marks.push({
+        type: "rect",
+        x: geom.x,
+        y: top,
+        width: geom.width,
+        height: segmentHeight,
+        fill,
+        cornerRadius: 0,
+        orient: "vertical",
+        stackGroup: binKey,
+        stroke: seam,
+        strokeWidth: 1,
+        seriesKey: key,
+        data: row,
+        aria: ariaFor(row, xField, x2Field, yField, key)
+      });
+    }
+  }
+  return marks;
+}
+function stampKeys(marks, xField, colorField) {
+  const raw = marks.map((m) => {
+    const series = colorField ? String(m.data[colorField] ?? "") : "";
+    return `${series}|${serializeKeyValue(m.data[xField])}`;
+  });
+  const keys = dedupeKeys(raw);
+  for (let i = 0; i < marks.length; i++) {
+    marks[i].key = keys[i];
+  }
+}
+
+// src/charts/binned-bar/index.ts
+var binnedBarRenderer = (spec, scales, chartArea, strategy, theme) => computeBinnedBarMarks(spec, scales, chartArea, strategy, theme);
+
 // src/charts/calendar/compute.ts
 import { defaultNumberFormatter as defaultNumberFormatter4, formatDate } from "@opendata-ai/openchart-core";
 import { utcDay, utcMonday, utcSunday } from "d3-time";
@@ -3604,13 +3738,13 @@ function computeColoredColumns(data, categoryField, valueField, colorField, xSca
     if (!Number.isFinite(value)) continue;
     const bandX = xScale(category);
     if (bandX === void 0) continue;
-    const groupKey3 = String(row[colorField] ?? "");
-    const color = getColor(scales, groupKey3);
+    const groupKey4 = String(row[colorField] ?? "");
+    const color = getColor(scales, groupKey4);
     const yPos = yScale(value);
     const columnHeight = Math.max(Math.abs(baseline - yPos), MIN_COLUMN_HEIGHT);
     const y = value >= 0 ? yPos : baseline;
     const aria = {
-      label: `${category}, ${groupKey3}: ${formatLabelValue(value)}`
+      label: `${category}, ${groupKey4}: ${formatLabelValue(value)}`
     };
     marks.push({
       type: "rect",
@@ -3621,7 +3755,7 @@ function computeColoredColumns(data, categoryField, valueField, colorField, xSca
       fill: color,
       cornerRadius: BAR_CORNER_RADIUS,
       cornerRadiusSides: valueEndCorners("vertical", value < 0),
-      seriesKey: groupKey3,
+      seriesKey: groupKey4,
       data: row,
       aria,
       orient: "vertical"
@@ -3650,17 +3784,17 @@ function computeGroupedColumns(data, categoryField, valueField, colorField, xSca
     const bandX = xScale(category);
     if (bandX === void 0) continue;
     for (const row of rows) {
-      const groupKey3 = String(row[colorField] ?? "");
+      const groupKey4 = String(row[colorField] ?? "");
       const value = Number(row[valueField] ?? 0);
       if (!Number.isFinite(value)) continue;
-      const groupIndex = groupIndexMap.get(groupKey3) ?? 0;
-      const color = getColor(scales, groupKey3);
+      const groupIndex = groupIndexMap.get(groupKey4) ?? 0;
+      const color = getColor(scales, groupKey4);
       const yPos = yScale(value);
       const columnHeight = Math.max(Math.abs(baseline - yPos), MIN_COLUMN_HEIGHT);
       const y = value >= 0 ? yPos : baseline;
       const subX = bandX + groupIndex * (subBandWidth + gap);
       const aria = {
-        label: `${category}, ${groupKey3}: ${formatLabelValue(value)}`
+        label: `${category}, ${groupKey4}: ${formatLabelValue(value)}`
       };
       marks.push({
         type: "rect",
@@ -3671,7 +3805,7 @@ function computeGroupedColumns(data, categoryField, valueField, colorField, xSca
         fill: color,
         cornerRadius: BAR_CORNER_RADIUS,
         cornerRadiusSides: valueEndCorners("vertical", value < 0),
-        seriesKey: groupKey3,
+        seriesKey: groupKey4,
         data: row,
         aria,
         orient: "vertical"
@@ -3693,16 +3827,16 @@ function computeStackedColumns(data, categoryField, valueField, colorField, xSca
     }
     let cumulativeValue = stackMode === "center" ? -categoryTotal / 2 : 0;
     for (const row of rows) {
-      const groupKey3 = String(row[colorField] ?? "");
+      const groupKey4 = String(row[colorField] ?? "");
       const rawValue = Number(row[valueField] ?? 0);
       if (!Number.isFinite(rawValue) || rawValue <= 0) continue;
       const value = stackMode === "normalize" && categoryTotal > 0 ? rawValue / categoryTotal : rawValue;
-      const color = getColor(scales, groupKey3);
+      const color = getColor(scales, groupKey4);
       const yTop = yScale(cumulativeValue + value);
       const yBottom = yScale(cumulativeValue);
       const columnHeight = Math.max(Math.abs(yBottom - yTop), MIN_COLUMN_HEIGHT);
       const aria = {
-        label: `${category}, ${groupKey3}: ${formatLabelValue(rawValue)}`
+        label: `${category}, ${groupKey4}: ${formatLabelValue(rawValue)}`
       };
       marks.push({
         type: "rect",
@@ -3712,7 +3846,7 @@ function computeStackedColumns(data, categoryField, valueField, colorField, xSca
         height: columnHeight,
         fill: color,
         cornerRadius: 0,
-        seriesKey: groupKey3,
+        seriesKey: groupKey4,
         data: row,
         aria,
         orient: "vertical",
@@ -4515,7 +4649,10 @@ function computeSingleArea(spec, scales, _chartArea, theme) {
     let fillOpacity;
     if (markFill != null) {
       fillValue = markFill;
-      fillOpacity = isGradientDef3(markFill) ? 1 : spec.markDef.opacity ?? (y2Channel ? 0.25 : DEFAULT_FILL_OPACITY);
+      fillOpacity = isGradientDef3(markFill) ? 1 : spec.markDef.fillOpacity ?? spec.markDef.opacity ?? (y2Channel ? 0.25 : DEFAULT_FILL_OPACITY);
+    } else if (spec.markDef.fillOpacity != null) {
+      fillValue = getRepresentativeColor6(color);
+      fillOpacity = spec.markDef.fillOpacity;
     } else {
       const colorStr = getRepresentativeColor6(color);
       fillValue = buildGradientFill(colorStr, defaultGradientStops);
@@ -4625,10 +4762,10 @@ function computeStackedArea(spec, scales, chartArea, theme) {
     let fillOpacity;
     if (markFill != null) {
       fillValue = markFill;
-      fillOpacity = isGradientDef3(markFill) ? 1 : spec.markDef.opacity ?? 0.7;
+      fillOpacity = isGradientDef3(markFill) ? 1 : spec.markDef.fillOpacity ?? spec.markDef.opacity ?? 0.7;
     } else {
       fillValue = getRepresentativeColor6(color);
-      fillOpacity = STACKED_FILL_OPACITY;
+      fillOpacity = spec.markDef.fillOpacity ?? STACKED_FILL_OPACITY;
     }
     const rawPointKeys = validPoints.map((_p, idx) => serializeKeyValue(layer[idx]?.data.__x__));
     marks.push({
@@ -5659,7 +5796,7 @@ var rangeRenderer = (spec, scales, chartArea, strategy, theme) => {
 };
 
 // src/charts/rect/index.ts
-import { formatNumber } from "@opendata-ai/openchart-core";
+import { formatNumber as formatNumber2 } from "@opendata-ai/openchart-core";
 function bandwidthOf(scale) {
   const band = scale?.scale;
   return typeof band?.bandwidth === "function" ? band.bandwidth() : 0;
@@ -5690,7 +5827,7 @@ function computeRectMarks(spec, scales, _chartArea) {
       fill = getColor(scales, "__default__");
     }
     const colorValue = colorEnc ? row[colorEnc.field] : void 0;
-    const colorLabel = colorEnc && colorValue != null ? `, ${colorEnc.field}: ${typeof colorValue === "number" ? formatNumber(colorValue) : String(colorValue)}` : "";
+    const colorLabel = colorEnc && colorValue != null ? `, ${colorEnc.field}: ${typeof colorValue === "number" ? formatNumber2(colorValue) : String(colorValue)}` : "";
     const aria = {
       label: `${row[xChannel.field]}, ${row[yChannel.field]}${colorLabel}`
     };
@@ -6228,6 +6365,14 @@ var builtinRenderers = {
   // horizontal bars
   "bar:vertical": columnRenderer,
   // vertical bars (old 'column')
+  "bar:binned": binnedBarRenderer,
+  // histogram: rects sized from a linear x scale via x2
+  // Safety net. `compileChart` always expands sugar before dispatch, so these
+  // keys should be unreachable — but an unregistered key yields zero marks
+  // with no error, i.e. a silently blank chart, which is the exact failure
+  // this whole mark family exists to remove.
+  histogram: binnedBarRenderer,
+  density: areaRenderer,
   point: scatterRenderer,
   // old 'scatter'
   arc: pieRenderer,
@@ -6270,7 +6415,7 @@ import {
 } from "@opendata-ai/openchart-core";
 
 // src/compile/spec-sugar.ts
-import { resolveSchemeName } from "@opendata-ai/openchart-core";
+import { inferFieldType, resolveSchemeName } from "@opendata-ai/openchart-core";
 
 // src/transforms/aggregate.ts
 function computeAggregate(op, values) {
@@ -6382,9 +6527,11 @@ function uniqueFieldStrings(data, field) {
   }
   return out;
 }
-function expandEncodingSugar(spec) {
+function expandEncodingSugar(spec, inheritedData) {
   const encoding = spec.encoding;
   if (!encoding) return spec;
+  const markType = markTypeOf(spec);
+  const specData = Array.isArray(spec.data) ? spec.data : inheritedData;
   const generatedTransforms = [];
   const updatedEncoding = { ...encoding };
   let changed = false;
@@ -6394,14 +6541,26 @@ function expandEncodingSugar(spec) {
     if (ch.bin != null && ch.bin !== false) {
       const field = ch.field;
       const outputField = `bin_${field}`;
+      const resolvedType = ch.type ?? (specData && specData.length > 0 ? inferFieldType(specData, field) : void 0);
+      const emitInterval = channel === "x" && resolvedType === "quantitative" && markType === "bar";
+      const endField = `${outputField}_end`;
       const binTransform = {
         bin: ch.bin === true ? true : ch.bin,
         field,
-        as: outputField
+        as: emitInterval ? [outputField, endField] : outputField
       };
       generatedTransforms.push(binTransform);
       const { bin: _bin, ...rest } = ch;
-      updatedEncoding[channel] = { ...rest, field: outputField };
+      updatedEncoding[channel] = {
+        ...rest,
+        field: outputField,
+        // The axis should read `amount`, not `bin_amount`. Scoped to the same
+        // guard: retitling every binned channel would move existing baselines.
+        ...emitInterval && rest.title == null ? { title: field } : {}
+      };
+      if (emitInterval) {
+        updatedEncoding.x2 = { field: endField, type: "quantitative" };
+      }
       changed = true;
     }
     const current = updatedEncoding[channel] ?? ch;
@@ -6622,7 +6781,9 @@ function expandChannelSugar(spec, warnings) {
 }
 var COUNT_GROUP_CHANNELS = [
   "x",
+  "x2",
   "y",
+  "y2",
   "color",
   "detail",
   "strokeDash",
@@ -6743,6 +6904,123 @@ function resolveSortSugar(spec, inheritedData) {
   }
   return changed ? { ...spec, encoding: updated } : spec;
 }
+var HISTOGRAM_DEFAULT_MAXBINS = 20;
+var PROPORTION_FIELD = "__proportion";
+var GROUP_TOTAL_FIELD = "__group_total";
+function expandHistogramMark(spec) {
+  if (markTypeOf(spec) !== "histogram") return spec;
+  const markDef = typeof spec.mark === "string" ? {} : { ...spec.mark };
+  const { binCount, normalize, ...restMark } = markDef;
+  const encoding = { ...spec.encoding ?? {} };
+  const x = { ...encoding.x ?? {} };
+  if (x.bin == null) {
+    x.bin = { maxbins: typeof binCount === "number" ? binCount : HISTOGRAM_DEFAULT_MAXBINS };
+  }
+  x.type = x.type ?? "quantitative";
+  encoding.x = x;
+  if (encoding.y == null) {
+    encoding.y = { aggregate: "count" };
+  }
+  const out = {
+    ...spec,
+    mark: { ...restMark, type: "bar" },
+    encoding
+  };
+  if (normalize === true) {
+    out.__histogramNormalize = true;
+  }
+  return out;
+}
+var DENSITY_OVERLAP_FILL_OPACITY = 0.4;
+function distributionGroupFields(encoding) {
+  const fields = [];
+  for (const channel of ["color", "detail"]) {
+    const ch = encoding[channel];
+    if (typeof ch?.field === "string" && !fields.includes(ch.field)) fields.push(ch.field);
+  }
+  return fields;
+}
+var DENSITY_VALUE_FIELD = "value";
+var DENSITY_OUTPUT_FIELD = "density";
+function expandDensityMark(spec) {
+  if (markTypeOf(spec) !== "density") return spec;
+  const markDef = typeof spec.mark === "string" ? {} : { ...spec.mark };
+  const { bandwidth, cumulative, steps, ...restMark } = markDef;
+  const encoding = { ...spec.encoding ?? {} };
+  const x = { ...encoding.x ?? {} };
+  const field = typeof x.field === "string" ? x.field : void 0;
+  if (field == null) return spec;
+  const groupFields = distributionGroupFields(encoding);
+  const densityTransform = {
+    density: field,
+    as: [DENSITY_VALUE_FIELD, DENSITY_OUTPUT_FIELD]
+  };
+  if (groupFields.length > 0) densityTransform.groupby = groupFields;
+  if (typeof bandwidth === "number") densityTransform.bandwidth = bandwidth;
+  if (cumulative === true) densityTransform.cumulative = true;
+  if (typeof steps === "number") densityTransform.steps = steps;
+  const transforms = (spec.transform ?? []).slice().concat(densityTransform);
+  encoding.x = {
+    ...x,
+    field: DENSITY_VALUE_FIELD,
+    type: "quantitative",
+    ...x.title == null ? { title: field } : {}
+  };
+  const y = { ...encoding.y ?? {} };
+  encoding.y = {
+    title: cumulative === true ? "Cumulative share" : "Density",
+    // A density's absolute height is not a quantity readers interpret, so the
+    // axis is off unless the author asks for it.
+    axis: false,
+    ...y,
+    field: DENSITY_OUTPUT_FIELD,
+    type: "quantitative",
+    // Areas stack by default on a color field; overlapping translucent curves
+    // are the whole point of a density comparison.
+    stack: y.stack ?? null
+  };
+  const out = {
+    ...spec,
+    mark: {
+      interpolate: "linear",
+      ...groupFields.length > 0 ? { fillOpacity: DENSITY_OVERLAP_FILL_OPACITY } : {},
+      ...restMark,
+      type: "area"
+    },
+    encoding,
+    transform: transforms
+  };
+  if (out.crosshair === void 0) out.crosshair = false;
+  if (out.endpointLabels === void 0) out.endpointLabels = false;
+  return out;
+}
+function applyHistogramNormalize(spec) {
+  if (spec.__histogramNormalize !== true) return spec;
+  const { __histogramNormalize: _flag, ...rest } = spec;
+  const encoding = { ...rest.encoding ?? {} };
+  const y = { ...encoding.y ?? {} };
+  const countField = typeof y.field === "string" ? y.field : "__count";
+  const groupby = distributionGroupFields(encoding);
+  const transforms = (rest.transform ?? []).slice();
+  transforms.push({
+    joinaggregate: [{ op: "sum", field: countField, as: GROUP_TOTAL_FIELD }],
+    groupby
+  });
+  transforms.push({
+    calculate: { op: "/", field: countField, field2: GROUP_TOTAL_FIELD },
+    as: PROPORTION_FIELD
+  });
+  encoding.y = {
+    ...y,
+    field: PROPORTION_FIELD,
+    type: "quantitative",
+    title: y.title === "Count" || y.title == null ? "Share" : y.title,
+    // `axis: false` is an author turning the axis off; don't spread it into an
+    // object and hand back an axis they asked not to have.
+    axis: y.axis === false || y.axis === null ? y.axis : { format: "percent", ...y.axis ?? {} }
+  };
+  return { ...rest, encoding, transform: transforms };
+}
 function expandChartSugar(spec, warnings, inheritedData) {
   let out = unwrapDataValues(spec);
   out = expandTopLevelTitle(out);
@@ -6752,9 +7030,12 @@ function expandChartSugar(spec, warnings, inheritedData) {
   out = applyFixedSizeDefault(out);
   out = expandAnnotationSugar(out, warnings);
   out = expandChannelSugar(out, warnings);
-  out = expandEncodingSugar(out);
+  out = expandHistogramMark(out);
+  out = expandDensityMark(out);
+  out = expandEncodingSugar(out, inheritedData);
   out = resolveSortSugar(out, inheritedData);
   out = expandCountAggregate(out);
+  out = applyHistogramNormalize(out);
   return out;
 }
 function expandLayerSugar(spec, warnings, inheritedData, parentEncoding) {
@@ -7074,7 +7355,7 @@ function normalizeChrome(chrome) {
     brand: normalizeChromeField(chrome.brand)
   };
 }
-function inferFieldType(data, field) {
+function inferFieldType2(data, field) {
   const sampleSize = Math.min(50, data.length);
   let numericCount = 0;
   let dateCount = 0;
@@ -7116,13 +7397,13 @@ function inferEncodingTypes(encoding, data, warnings) {
     if ("condition" in spec) continue;
     if (!("field" in spec)) continue;
     if (!spec.type) {
-      const inferred = inferFieldType(data, spec.field);
+      const inferred = inferFieldType2(data, spec.field);
       result[channel] = { ...spec, type: inferred };
       warnings.push(
         `Inferred encoding.${channel}.type as "${inferred}" from data values for field "${spec.field}"`
       );
     } else {
-      const actualType = inferFieldType(data, spec.field);
+      const actualType = inferFieldType2(data, spec.field);
       if (spec.type === "nominal" && actualType === "temporal") {
         warnings.push(`Field "${spec.field}" looks temporal but was declared as nominal`);
       }
@@ -7599,7 +7880,7 @@ function flattenLayers(spec, parentData, parentEncoding, parentTransforms, paren
 
 // src/compiler/validate.ts
 import {
-  inferFieldType as inferFieldType2,
+  inferFieldType as inferFieldType3,
   MARK_ENCODING_RULES,
   MARK_TYPES,
   resolveSchemeName as resolveSchemeName2,
@@ -7718,8 +7999,8 @@ function validateRangeSpec(spec, errors) {
   if (!x?.field || typeof x.field !== "string" || !y?.field || typeof y.field !== "string") {
     return;
   }
-  const xType = x.type ?? inferFieldType2(data, x.field);
-  const yType = y.type ?? inferFieldType2(data, y.field);
+  const xType = x.type ?? inferFieldType3(data, x.field);
+  const yType = y.type ?? inferFieldType3(data, y.field);
   const xIsCategory = xType === "nominal" || xType === "ordinal";
   const yIsCategory = yType === "nominal" || yType === "ordinal";
   if (xIsCategory && yIsCategory) {
@@ -7856,7 +8137,7 @@ function validateCalendarSpec(spec, errors) {
   }
   const x = encoding.x;
   if (!x?.field || typeof x.field !== "string") return;
-  const xType = x.type ?? inferFieldType2(data, x.field);
+  const xType = x.type ?? inferFieldType3(data, x.field);
   if (xType !== "temporal") {
     if (!x.type) {
       errors.push({
@@ -8065,12 +8346,16 @@ function validateChartSpec(spec, errors) {
           if (typeof f === "string") transformFields.add(f);
         }
       }
-      const opList = t.aggregate ?? t.window;
+      const opList = t.aggregate ?? t.window ?? t.joinaggregate;
       if (Array.isArray(opList)) {
         for (const op of opList) {
           if (op && typeof op.as === "string") transformFields.add(op.as);
         }
       }
+      if (typeof t.density === "string" && t.as == null) {
+        transformFields.add("value");
+        transformFields.add("density");
+      }
       if (Array.isArray(t.groupby)) {
         for (const g of t.groupby) {
           if (typeof g === "string") transformFields.add(g);
@@ -8205,7 +8490,7 @@ function validateChartSpec(spec, errors) {
           suggestion: "Provide a series name (string) or an array of series names."
         });
       } else {
-        const colorType = colorCh.type ?? (colorCh.field && Array.isArray(spec.data) && spec.data.length > 0 ? inferFieldType2(spec.data, colorCh.field) : void 0);
+        const colorType = colorCh.type ?? (colorCh.field && Array.isArray(spec.data) && spec.data.length > 0 ? inferFieldType3(spec.data, colorCh.field) : void 0);
         if (colorType === "quantitative") {
           errors.push({
             message: "Spec error: encoding.color.highlight is not supported on quantitative color channels",
@@ -8336,7 +8621,7 @@ function validateChartSpec(spec, errors) {
       const data = Array.isArray(spec.data) ? spec.data : [];
       const colorCh = encoding?.color;
       if (colorCh && typeof colorCh === "object" && typeof colorCh.field === "string") {
-        const colorType = colorCh.type ?? inferFieldType2(data, colorCh.field);
+        const colorType = colorCh.type ?? inferFieldType3(data, colorCh.field);
         if (colorType !== "quantitative") {
           const distinct = new Set(data.map((row) => row[colorCh.field]));
           if (distinct.size > 1) {
@@ -9756,8 +10041,14 @@ function computeBandRowObstacles(marks, scales) {
   }
   return obstacles;
 }
+function isBinnedBarEncoding(markType, encoding) {
+  return markType === "bar" && encoding.x?.type === "quantitative" && !!encoding.x2 && encoding.y?.type === "quantitative";
+}
 function resolveRendererKey(markType, encoding, markDef) {
   if (markType === "bar") {
+    if (isBinnedBarEncoding(markType, encoding)) {
+      return "bar:binned";
+    }
     const xType = encoding.x?.type;
     const yType = encoding.y?.type;
     const isVertical = (xType === "nominal" || xType === "ordinal" || xType === "temporal") && yType === "quantitative";
@@ -10750,10 +11041,25 @@ function computeScales(spec, chartArea, data) {
       }
     }
   }
+  if (spec.markType === "area" && encoding.x?.type === "quantitative" && encoding.x.scale?.zero === void 0) {
+    if (!encoding.x.scale) {
+      encoding.x.scale = { zero: false };
+    } else {
+      encoding.x.scale.zero = false;
+    }
+  }
+  const binnedX = isBinnedBarEncoding(spec.markType, encoding) ? encoding.x : void 0;
+  if (binnedX && binnedX.scale?.zero === void 0) {
+    if (!binnedX.scale) {
+      binnedX.scale = { zero: false };
+    } else {
+      binnedX.scale.zero = false;
+    }
+  }
   if (encoding.x) {
     let xData = data;
     let xChannel = encoding.x;
-    if (spec.markType === "range" && encoding.x2 && encoding.x.type === "quantitative") {
+    if ((spec.markType === "range" || spec.markType === "bar") && encoding.x2 && encoding.x.type === "quantitative") {
       const xField = encoding.x.field;
       const x2Field = encoding.x2.field;
       xData = [...data, ...data.map((row) => ({ [xField]: row[x2Field] }))];
@@ -10825,7 +11131,7 @@ function computeScales(spec, chartArea, data) {
   if (encoding.y) {
     let yData = data;
     let yChannel = encoding.y;
-    if (spec.markType === "range" && encoding.y2 && encoding.y.type === "quantitative") {
+    if ((spec.markType === "range" || spec.markType === "bar") && encoding.y2 && encoding.y.type === "quantitative") {
       const yField = encoding.y.field;
       const y2Field = encoding.y2.field;
       yData = [...data, ...data.map((row) => ({ [yField]: row[y2Field] }))];
@@ -11378,7 +11684,7 @@ import {
   abbreviateNumber,
   buildD3Formatter,
   estimateTextWidth as estimateTextWidth13,
-  formatNumber as formatNumber2
+  formatNumber as formatNumber3
 } from "@opendata-ai/openchart-core";
 import { scaleLinear as scaleLinear3, scaleSqrt as scaleSqrt3 } from "d3-scale";
 var LABEL_GAP = 6;
@@ -11399,7 +11705,7 @@ function formatValue(value, formatStr) {
     if (fmt2) return fmt2(value);
   }
   if (Math.abs(value) >= 1e3) return abbreviateNumber(value);
-  return formatNumber2(value);
+  return formatNumber3(value);
 }
 function niceFloor(value) {
   if (!Number.isFinite(value) || value <= 0) return value;
@@ -12321,7 +12627,8 @@ function resolveLayoutPlan(chartSpec, renderSpec, options, theme, strategy, wate
   const yAxisSuppressed = encoding.y?.axis === false;
   let leftGutter = hPad + axisMargin;
   if (encoding.y && !isRadial && !yAxisSuppressed && !yIsInline) {
-    if (encoding.y.type === "nominal" || encoding.y.type === "ordinal" || renderSpec.markType === "bar" || renderSpec.markType === "circle" || renderSpec.markType === "lollipop") {
+    const isBinnedBar = isBinnedBarEncoding(renderSpec.markType, encoding);
+    if (!isBinnedBar && (encoding.y.type === "nominal" || encoding.y.type === "ordinal" || renderSpec.markType === "bar" || renderSpec.markType === "circle" || renderSpec.markType === "lollipop")) {
       const yField = encoding.y.field;
       const yLabelField = yAxisCfg?.labelField;
       let maxLabelWidth = 0;
@@ -13364,7 +13671,7 @@ import {
   CATEGORICAL_PALETTE as CATEGORICAL_PALETTE2,
   computeChrome as computeChrome3,
   estimateTextWidth as estimateTextWidth18,
-  formatNumber as formatNumber3,
+  formatNumber as formatNumber4,
   getBreakpoint,
   HPAD_COMPACT_FRACTION as HPAD_COMPACT_FRACTION2,
   HPAD_COMPACT_MIN as HPAD_COMPACT_MIN2,
@@ -13816,7 +14123,7 @@ function compileGeoMap(spec, options) {
     compileWarnings.push(...filteredJoinWarnings);
   }
   const droppedFeatures = [];
-  const formatter = buildD3Formatter2(mapSpec.encoding?.color?.format ?? mapSpec.valueFormat) ?? formatNumber3;
+  const formatter = buildD3Formatter2(mapSpec.encoding?.color?.format ?? mapSpec.valueFormat) ?? formatNumber4;
   const neutralFill = isDarkMode ? theme.colors.neutral[800] : theme.colors.neutral[100];
   const noDataPattern = {
     type: "diagonal",
@@ -15727,7 +16034,8 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
   const yAxisSuppressed = encoding.y?.axis === false;
   const yIsInline = yIsInlinePre;
   if (encoding.y && !isRadial && !yAxisSuppressed && !yIsInline) {
-    if (!plan && (spec.markType === "bar" || spec.markType === "circle" || spec.markType === "lollipop" || encoding.y.type === "nominal" || encoding.y.type === "ordinal")) {
+    const isBinnedBar = isBinnedBarEncoding(spec.markType, encoding);
+    if (!plan && !isBinnedBar && (spec.markType === "bar" || spec.markType === "circle" || spec.markType === "lollipop" || encoding.y.type === "nominal" || encoding.y.type === "ordinal")) {
       const yField = encoding.y.field;
       const yLabelField = encoding.y.axis?.labelField;
       let maxLabelWidth = 0;
@@ -18593,6 +18901,60 @@ function computeWaffleTooltips(spec, marks) {
   }
   return descriptors;
 }
+function isBinnedBarSpec(spec) {
+  return isBinnedBarEncoding(spec.markType, spec.encoding);
+}
+function computeBinnedBarTooltips(spec, marks) {
+  const encoding = spec.encoding;
+  const descriptors = /* @__PURE__ */ new Map();
+  const xCh = encoding.x;
+  const x2Ch = encoding.x2;
+  const yCh = encoding.y;
+  if (!xCh || !x2Ch || !yCh) return descriptors;
+  const colorEnc = encoding.color && "field" in encoding.color ? encoding.color : void 0;
+  const allChannels = [
+    xCh,
+    yCh,
+    colorEnc,
+    ...encoding.tooltip ? Array.isArray(encoding.tooltip) ? encoding.tooltip : [encoding.tooltip] : []
+  ].filter((ch) => !!ch && "field" in ch);
+  const fmtCache = buildFormatterCache(spec.data, allChannels);
+  const xFormatter = getFormatter(fmtCache, xCh);
+  const stackTotals = computeRectStackTotals(marks, encoding, fmtCache);
+  for (let i = 0; i < marks.length; i++) {
+    const mark = marks[i];
+    if (mark.type !== "rect") continue;
+    const row = mark.data;
+    const start = formatValue2(row[xCh.field], "quantitative", xFormatter);
+    const end = formatValue2(row[x2Ch.field], "quantitative", xFormatter);
+    const title = `${start} \u2013 ${end}`;
+    if (encoding.tooltip) {
+      const channels = Array.isArray(encoding.tooltip) ? encoding.tooltip : [encoding.tooltip];
+      descriptors.set(`rect-${i}`, {
+        title,
+        fields: buildExplicitTooltipFields(row, channels, fmtCache)
+      });
+      continue;
+    }
+    const fields = [];
+    if (colorEnc) {
+      fields.push({
+        label: resolveLabel(colorEnc),
+        value: String(row[colorEnc.field] ?? ""),
+        color: getRepresentativeColor14(mark.fill)
+      });
+    }
+    fields.push({
+      label: resolveLabel(yCh),
+      value: formatValue2(row[yCh.field], yCh.type, getFormatter(fmtCache, yCh)),
+      ...colorEnc ? {} : { color: getRepresentativeColor14(mark.fill) }
+    });
+    const total = mark.stackGroup !== void 0 ? stackTotals?.get(mark.stackGroup) : void 0;
+    if (total) fields.push(total);
+    descriptors.set(`rect-${i}`, { title, fields });
+  }
+  return descriptors;
+}
 function computeParliamentTooltips(spec, marks) {
   const encoding = spec.encoding;
   const descriptors = /* @__PURE__ */ new Map();
@@ -18657,6 +19019,9 @@ function computeTooltipDescriptors(spec, marks) {
   if (spec.markType === "parliament") {
     return computeParliamentTooltips(spec, marks);
   }
+  if (isBinnedBarSpec(spec)) {
+    return computeBinnedBarTooltips(spec, marks);
+  }
   const encoding = spec.encoding;
   const descriptors = /* @__PURE__ */ new Map();
   const allChannels = [
@@ -18788,6 +19153,135 @@ function runCalculate(data, transform) {
   }));
 }
 
+// src/transforms/density.ts
+import { deviation, quantile } from "d3-array";
+var DEFAULT_STEPS = 200;
+var MAX_STEPS = 1e4;
+var EXTENT_PADDING_BANDWIDTHS = 3;
+var DEGENERATE_BANDWIDTH = 1;
+var SQRT_2PI = Math.sqrt(2 * Math.PI);
+function silvermanBandwidth(values) {
+  const n = values.length;
+  if (n < 2) return DEGENERATE_BANDWIDTH;
+  const sd = deviation(values) ?? 0;
+  const sorted = [...values].sort((a, b) => a - b);
+  const q1 = quantile(sorted, 0.25) ?? 0;
+  const q3 = quantile(sorted, 0.75) ?? 0;
+  const iqrScale = (q3 - q1) / 1.34;
+  const spread = iqrScale > 0 ? Math.min(sd, iqrScale) : sd;
+  if (!(spread > 0)) return DEGENERATE_BANDWIDTH;
+  return 1.06 * spread * n ** (-1 / 5);
+}
+function resolveSteps(requested) {
+  if (requested == null || !Number.isFinite(requested)) return DEFAULT_STEPS;
+  return Math.min(MAX_STEPS, Math.max(2, Math.round(requested)));
+}
+function isUsableExtent(extent3) {
+  const [lo, hi] = extent3;
+  return Number.isFinite(lo) && Number.isFinite(hi) && hi > lo;
+}
+function gaussian(u) {
+  return Math.exp(-0.5 * u * u) / SQRT_2PI;
+}
+function groupRows(data, groupby) {
+  if (groupby.length === 0) return /* @__PURE__ */ new Map([["", data]]);
+  const groups = /* @__PURE__ */ new Map();
+  for (const row of data) {
+    const key = groupby.map((f) => String(row[f] ?? "")).join("\0");
+    const bucket = groups.get(key);
+    if (bucket) bucket.push(row);
+    else groups.set(key, [row]);
+  }
+  return groups;
+}
+function runDensity(data, transform) {
+  const field = transform.density;
+  const groupby = transform.groupby ?? [];
+  const steps = resolveSteps(transform.steps);
+  const [valueAs, densityAs] = transform.as ?? ["value", "density"];
+  const cumulative = transform.cumulative === true;
+  const counts = transform.counts === true;
+  const groups = groupRows(data, groupby);
+  const prepared = [];
+  let widestBandwidth = 0;
+  for (const rows of groups.values()) {
+    const samples = [];
+    for (const r of rows) {
+      const raw = r[field];
+      if (raw == null || raw === "") continue;
+      const v = Number(raw);
+      if (Number.isFinite(v)) samples.push(v);
+    }
+    if (samples.length === 0) continue;
+    const bandwidth = transform.bandwidth && transform.bandwidth > 0 ? transform.bandwidth : silvermanBandwidth(samples);
+    widestBandwidth = Math.max(widestBandwidth, bandwidth);
+    prepared.push({ rows, samples, bandwidth });
+  }
+  if (prepared.length === 0) return [];
+  let lo;
+  let hi;
+  if (transform.extent && isUsableExtent(transform.extent)) {
+    [lo, hi] = transform.extent;
+  } else {
+    let dataMin = Number.POSITIVE_INFINITY;
+    let dataMax = Number.NEGATIVE_INFINITY;
+    for (const p of prepared) {
+      for (const v of p.samples) {
+        if (v < dataMin) dataMin = v;
+        if (v > dataMax) dataMax = v;
+      }
+    }
+    const pad = widestBandwidth * EXTENT_PADDING_BANDWIDTHS;
+    lo = dataMin - pad;
+    hi = dataMax + pad;
+  }
+  if (!(hi > lo)) {
+    lo -= DEGENERATE_BANDWIDTH;
+    hi += DEGENERATE_BANDWIDTH;
+  }
+  const stride = (hi - lo) / (steps - 1);
+  const out = [];
+  for (const { rows, samples, bandwidth } of prepared) {
+    const groupValues = {};
+    for (const f of groupby) groupValues[f] = rows[0][f];
+    const n = samples.length;
+    const scale = counts ? n : 1;
+    const densities = new Array(steps);
+    for (let i = 0; i < steps; i++) {
+      const x = lo + i * stride;
+      let sum = 0;
+      for (const v of samples) sum += gaussian((x - v) / bandwidth);
+      densities[i] = sum / (n * bandwidth);
+    }
+    if (cumulative) {
+      const running = new Array(steps);
+      let acc = 0;
+      running[0] = 0;
+      for (let i = 1; i < steps; i++) {
+        acc += (densities[i] + densities[i - 1]) / 2 * stride;
+        running[i] = acc;
+      }
+      const total = running[steps - 1] || 1;
+      for (let i = 0; i < steps; i++) {
+        out.push({
+          ...groupValues,
+          [valueAs]: lo + i * stride,
+          [densityAs]: running[i] / total * scale
+        });
+      }
+      continue;
+    }
+    for (let i = 0; i < steps; i++) {
+      out.push({
+        ...groupValues,
+        [valueAs]: lo + i * stride,
+        [densityAs]: densities[i] * scale
+      });
+    }
+  }
+  return out;
+}
+
 // src/transforms/filter.ts
 function applyOffset2(anchor, offset, unit) {
   const d = new Date(anchor.getTime());
@@ -18887,6 +19381,31 @@ function runFold(data, transform) {
   return result;
 }
 
+// src/transforms/joinaggregate.ts
+function groupKey2(row, groupby) {
+  return groupby.map((f) => String(row[f] ?? "")).join("\0");
+}
+function runJoinAggregate(data, transform) {
+  const groupby = transform.groupby ?? [];
+  const groups = /* @__PURE__ */ new Map();
+  for (const row of data) {
+    const key = groupKey2(row, groupby);
+    const bucket = groups.get(key);
+    if (bucket) bucket.push(row);
+    else groups.set(key, [row]);
+  }
+  const summaries = /* @__PURE__ */ new Map();
+  for (const [key, rows] of groups) {
+    const summary = {};
+    for (const { op, field, as } of transform.joinaggregate) {
+      const values = op === "count" ? rows.map(() => 1) : rows.map((r) => Number(r[field])).filter((v) => Number.isFinite(v));
+      summary[as] = computeAggregate(op, values);
+    }
+    summaries.set(key, summary);
+  }
+  return data.map((row) => ({ ...row, ...summaries.get(groupKey2(row, groupby)) }));
+}
+
 // src/transforms/timeunit.ts
 function extractTimeUnit(date, unit) {
   switch (unit) {
@@ -18953,7 +19472,7 @@ function runTimeUnit(data, transform) {
 }
 
 // src/transforms/window.ts
-function groupKey2(row, groupby) {
+function groupKey3(row, groupby) {
   return groupby.map((f) => String(row[f] ?? "")).join("\0");
 }
 function tryParseDate(val) {
@@ -18985,7 +19504,7 @@ function runWindow(data, transform) {
   const indexed = data.map((row, i) => ({ row, originalIndex: i }));
   const groups = /* @__PURE__ */ new Map();
   for (const entry of indexed) {
-    const key = groupby.length > 0 ? groupKey2(entry.row, groupby) : "";
+    const key = groupby.length > 0 ? groupKey3(entry.row, groupby) : "";
     const existing = groups.get(key);
     if (existing) {
       existing.push(entry);
@@ -19091,6 +19610,10 @@ function runTransforms(data, transforms) {
       result = runTimeUnit(result, transform);
     } else if ("aggregate" in transform) {
       result = runAggregate(result, transform);
+    } else if ("joinaggregate" in transform) {
+      result = runJoinAggregate(result, transform);
+    } else if ("density" in transform) {
+      result = runDensity(result, transform);
     } else if ("fold" in transform) {
       result = runFold(result, transform);
     } else if ("window" in transform) {
@@ -19455,6 +19978,14 @@ function compileChart(spec, optionsInput) {
       height: chartArea.height
     };
   }
+  if (chartSpec.userExplicit.labels && chartSpec.labels?.density !== "none" && isBinnedBarEncoding(chartSpec.markType, renderSpec.encoding)) {
+    emitSpecWarnings(
+      [
+        "[openchart] `labels` has no effect on a histogram (binned bar): a value over every bin obscures the distribution. Remove it, or use mark: 'bar' over pre-aggregated categories if you need per-bar values."
+      ],
+      options.onWarn
+    );
+  }
   const scales = computeScales(renderSpec, scaleArea, renderSpec.data);
   emitSpecWarnings(
     applyColorScaleRange(