@opendata-ai/openchart-engine 7.11.0 → 8.0.0-rc.2

package/src/charts/rect/index.ts

@@ -0,0 +1,127 @@
+/**
+ * Rect mark renderer (heatmap cells).
+ *
+ * The Vega-Lite `rect` mark: one cell per row, positioned by x and y, colored
+ * by the `color` channel. The canonical use is a two-way heatmap (nominal x
+ * nominal, quantitative color), which is what this renderer is built for.
+ *
+ * `rect` used to alias `columnRenderer`, which hard-requires a band x-scale and
+ * a *linear* y-scale (it anchors every cell to `yScale(0)`). A heatmap has a
+ * band scale on both axes, so `columnRenderer` bailed at its bandwidth guard and
+ * emitted nothing: `mark: 'rect'` rendered a blank chart, with no error.
+ *
+ * Not to be confused with `RectMark`, the layout primitive that columns, waffle
+ * cells, calendar cells, and dot stems all emit. That was never broken; only the
+ * spec-level `mark: 'rect'` was.
+ */
+
+import type { Encoding, Mark, MarkAria, Rect, RectMark } from '@opendata-ai/openchart-core';
+import { formatNumber } from '@opendata-ai/openchart-core';
+import type { ScaleBand } from 'd3-scale';
+
+import { dedupeKeys, serializeKeyValue } from '../../compiler/keys';
+import type { NormalizedChartSpec } from '../../compiler/types';
+import type { ResolvedScales } from '../../layout/scales';
+import type { ChartRenderer } from '../registry';
+import { getColor, getSequentialColor, scaleValue } from '../utils';
+
+/**
+ * Cell extent along one axis. `resolveScale` gives `rect` a band scale on both
+ * axes (see the `chartType === 'rect'` branch in layout/scales.ts), so the
+ * bandwidth *is* the cell size. A non-band scale means a quantitative axis,
+ * which would need binning to have a cell width at all: return 0 so the caller
+ * can bail rather than emit degenerate zero-area cells.
+ */
+function bandwidthOf(scale: ResolvedScales['x']): number {
+  const band = scale?.scale as Partial<ScaleBand<string>> | undefined;
+  return typeof band?.bandwidth === 'function' ? band.bandwidth() : 0;
+}
+
+/**
+ * Compute rect (heatmap cell) marks from a normalized spec and resolved scales.
+ *
+ * Both axes are band scales, so a cell's x/y is the scaled value directly (a
+ * band places the cell's leading corner there) and its size is the bandwidth.
+ */
+export function computeRectMarks(
+  spec: NormalizedChartSpec,
+  scales: ResolvedScales,
+  _chartArea: Rect,
+): RectMark[] {
+  const encoding = spec.encoding as Encoding;
+  const xChannel = encoding.x;
+  const yChannel = encoding.y;
+
+  if (!xChannel || !yChannel || !scales.x || !scales.y) return [];
+
+  const colorEnc = encoding.color && 'field' in encoding.color ? encoding.color : undefined;
+  const isSequential = colorEnc?.type === 'quantitative';
+
+  const cellWidth = bandwidthOf(scales.x);
+  const cellHeight = bandwidthOf(scales.y);
+  // A quantitative axis yields no bandwidth. Cells would be zero-area and
+  // invisible, so emit nothing rather than pretend: `rect` wants two
+  // categorical axes (bin the field first to heatmap a continuous one).
+  if (cellWidth <= 0 || cellHeight <= 0) return [];
+
+  const marks: RectMark[] = [];
+
+  for (const row of spec.data) {
+    const xVal = scaleValue(scales.x.scale, scales.x.type, row[xChannel.field]);
+    const yVal = scaleValue(scales.y.scale, scales.y.type, row[yChannel.field]);
+    if (xVal == null || yVal == null) continue;
+
+    // A quantitative color channel drives a sequential/binned ramp (the heatmap
+    // case); a nominal one picks a categorical swatch.
+    let fill: RectMark['fill'];
+    if (colorEnc && isSequential) {
+      const value = Number(row[colorEnc.field]);
+      if (!Number.isFinite(value)) continue;
+      fill = getSequentialColor(scales, value);
+    } else if (colorEnc) {
+      fill = getColor(scales, String(row[colorEnc.field] ?? '__default__'));
+    } else {
+      fill = getColor(scales, '__default__');
+    }
+
+    const colorValue = colorEnc ? row[colorEnc.field] : undefined;
+    const colorLabel =
+      colorEnc && colorValue != null
+        ? `, ${colorEnc.field}: ${
+            typeof colorValue === 'number' ? formatNumber(colorValue) : String(colorValue)
+          }`
+        : '';
+    const aria: MarkAria = {
+      label: `${row[xChannel.field]}, ${row[yChannel.field]}${colorLabel}`,
+    };
+
+    marks.push({
+      type: 'rect',
+      x: xVal,
+      y: yVal,
+      width: cellWidth,
+      height: cellHeight,
+      fill,
+      data: row as Record<string, unknown>,
+      aria,
+    });
+  }
+
+  // Key on the cell's coordinates: the x/y pair is what identifies a cell across
+  // a data update, which is what the transition driver matches on.
+  const rawKeys = marks.map(
+    (m) =>
+      `${serializeKeyValue(m.data[xChannel.field])}|${serializeKeyValue(m.data[yChannel.field])}`,
+  );
+  const keys = dedupeKeys(rawKeys);
+  for (let i = 0; i < marks.length; i++) {
+    marks[i].key = keys[i];
+  }
+
+  return marks;
+}
+
+/** Rect (heatmap) chart renderer. */
+export const rectRenderer: ChartRenderer = (spec, scales, chartArea, _strategy, _theme) => {
+  return computeRectMarks(spec, scales, chartArea) as Mark[];
+};

package/src/charts/scatter/compute.ts

@@ -16,10 +16,8 @@ import type {
   PointMark,
   Rect,
 } from '@opendata-ai/openchart-core';
-import { max, min } from 'd3-array';
 import type { ScaleBand, ScaleLinear, ScalePoint, ScaleTime } from 'd3-scale';
-import { scaleSqrt } from 'd3-scale';
-
+import { buildSizeScale, SIZE_SCALE_DEFAULTS } from '../../compile/size-scale';
 import { dedupeKeys, serializeKeyValue } from '../../compiler/keys';
 import type { NormalizedChartSpec } from '../../compiler/types';
 import type { ResolvedScales } from '../../layout/scales';
@@ -30,8 +28,6 @@ import { getColor, getSequentialColor } from '../utils';
 // ---------------------------------------------------------------------------
 
 const DEFAULT_POINT_RADIUS = 5;
-const MIN_BUBBLE_RADIUS = 3;
-const MAX_BUBBLE_RADIUS = 30;
 
 // ---------------------------------------------------------------------------
 // Helpers
@@ -117,22 +113,12 @@ export function computeScatterMarks(
   const sizeEnc = encoding.size && 'field' in encoding.size ? encoding.size : undefined;
   const sizeField = sizeEnc?.field;
 
-  // Build a size scale for bubble variant. Domain and radius range are
-  // author-overridable via `encoding.size.scale.{domain,range}`: an explicit
-  // domain (e.g. [0, 900]) keeps the largest datum below the max radius so
-  // dense clusters don't blob together, and an explicit range caps the radii.
-  let sizeScale: ((v: number) => number) | undefined;
-  if (sizeField) {
-    const sizeValues = spec.data.map((d) => Number(d[sizeField])).filter((v) => Number.isFinite(v));
-
-    const explicitDomain = sizeEnc?.scale?.domain as [number, number] | undefined;
-    const [sizeMin, sizeMax] = explicitDomain ?? [min(sizeValues) ?? 0, max(sizeValues) ?? 1];
-
-    const explicitRange = sizeEnc?.scale?.range as [number, number] | undefined;
-    const [radiusMin, radiusMax] = explicitRange ?? [MIN_BUBBLE_RADIUS, MAX_BUBBLE_RADIUS];
-
-    sizeScale = scaleSqrt().domain([sizeMin, sizeMax]).range([radiusMin, radiusMax]).clamp(true);
-  }
+  // Bubbles: sqrt so perceived magnitude tracks disc *area*. Author overrides
+  // (`encoding.size.scale.{domain,range}`) and the degenerate-domain fallback
+  // live in the shared builder, which the size legend also calls so the key and
+  // the marks can never resolve different scales.
+  const resolvedSize = buildSizeScale(sizeEnc, spec.data, SIZE_SCALE_DEFAULTS.point);
+  const sizeScale = resolvedSize?.scale;
 
   const keyEnc = encoding.key && 'field' in encoding.key ? encoding.key : undefined;
   const keyField = keyEnc?.field;

package/src/charts/text/__tests__/compute.test.ts

@@ -0,0 +1,307 @@
+import type { ChartSpec, LayerSpec, PointMark, TextMarkLayout } from '@opendata-ai/openchart-core';
+import { describe, expect, it } from 'vitest';
+import { compileChart, compileLayer } from '../../../compile';
+
+// ---------------------------------------------------------------------------
+// Shared fixtures
+// ---------------------------------------------------------------------------
+
+/**
+ * Ten US states, GDP (trillions) vs population (millions). The low end clusters
+ * tightly, which is what made the scale-domain bug so visible: the further a
+ * point sat from the shared upper bound, the further its label drifted.
+ */
+const states = [
+  { label: 'CA', gdp: 3.9, pop: 39.0 },
+  { label: 'TX', gdp: 2.6, pop: 30.5 },
+  { label: 'NY', gdp: 2.1, pop: 19.6 },
+  { label: 'FL', gdp: 1.6, pop: 22.6 },
+  { label: 'IL', gdp: 1.1, pop: 12.5 },
+  { label: 'PA', gdp: 1.0, pop: 12.9 },
+  { label: 'OH', gdp: 0.9, pop: 11.8 },
+  { label: 'GA', gdp: 0.8, pop: 11.0 },
+  { label: 'NJ', gdp: 0.8, pop: 9.3 },
+  { label: 'WA', gdp: 0.8, pop: 7.8 },
+];
+
+/** A points layer plus a text layer, both encoding the *same* x/y fields. */
+function labeledScatter(textMark: ChartSpec['mark'] = { type: 'text' }): LayerSpec {
+  return {
+    layer: [
+      {
+        mark: { type: 'point' },
+        data: [...states],
+        encoding: {
+          x: { field: 'gdp', type: 'quantitative' },
+          y: { field: 'pop', type: 'quantitative' },
+        },
+      },
+      {
+        mark: textMark,
+        data: [...states],
+        encoding: {
+          x: { field: 'gdp', type: 'quantitative' },
+          y: { field: 'pop', type: 'quantitative' },
+          text: { field: 'label', type: 'nominal' },
+        },
+      },
+    ],
+  };
+}
+
+function textMarksOf(spec: ChartSpec): TextMarkLayout[] {
+  const layout = compileChart(spec, { width: 900, height: 500 });
+  return layout.marks.filter((m): m is TextMarkLayout => m.type === 'textMark');
+}
+
+/** Standalone text chart over the states, with an overridable mark def. */
+function textChart(mark: ChartSpec['mark'] = { type: 'text' }): ChartSpec {
+  return {
+    mark,
+    data: [...states],
+    encoding: {
+      x: { field: 'gdp', type: 'quantitative' },
+      y: { field: 'pop', type: 'quantitative' },
+      text: { field: 'label', type: 'nominal' },
+    },
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Scale alignment
+// ---------------------------------------------------------------------------
+
+describe('text marks in a layer', () => {
+  /**
+   * Regression: text is a position-encoding mark, so it must resolve its domain
+   * the same way `point`/`beeswarm`/`range` do (tight, not zero-anchored). When
+   * it didn't, a text layer and a point layer over identical fields resolved
+   * *different* domains across the same pixel range, and every label drifted off
+   * the dot it was labeling — by up to 160px at the low end of the domain.
+   */
+  it('positions each label exactly on the point it labels', () => {
+    const layout = compileLayer(labeledScatter(), { width: 900, height: 500 });
+
+    const points = layout.marks.filter((m): m is PointMark => m.type === 'point');
+    const texts = layout.marks.filter((m): m is TextMarkLayout => m.type === 'textMark');
+
+    expect(points).toHaveLength(states.length);
+    expect(texts).toHaveLength(states.length);
+
+    for (const text of texts) {
+      const point = points.find((p) => p.data?.label === text.text);
+      expect(point, `no point for label ${text.text}`).toBeDefined();
+
+      expect(text.x).toBeCloseTo((point as PointMark).cx, 5);
+      expect(text.y).toBeCloseTo((point as PointMark).cy, 5);
+    }
+  });
+
+  it('offsets labels off their points by exactly dy, keeping x aligned', () => {
+    const layout = compileLayer(labeledScatter({ type: 'text', dy: -10 }), {
+      width: 900,
+      height: 500,
+    });
+
+    const points = layout.marks.filter((m): m is PointMark => m.type === 'point');
+    const texts = layout.marks.filter((m): m is TextMarkLayout => m.type === 'textMark');
+
+    for (const text of texts) {
+      const point = points.find((p) => p.data?.label === text.text) as PointMark;
+      expect(text.x).toBeCloseTo(point.cx, 5);
+      expect(text.y).toBeCloseTo(point.cy - 10, 5);
+    }
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Offsets
+// ---------------------------------------------------------------------------
+
+describe('dx / dy', () => {
+  it('bakes the offset into x/y and retains the pre-offset anchor', () => {
+    const plain = textMarksOf(textChart());
+    const offset = textMarksOf(textChart({ type: 'text', dx: 6, dy: -10 }));
+
+    for (let i = 0; i < plain.length; i++) {
+      expect(offset[i].x).toBeCloseTo(plain[i].x + 6, 5);
+      expect(offset[i].y).toBeCloseTo(plain[i].y - 10, 5);
+      // The anchor is what a leader line would point back to.
+      expect(offset[i].anchorX).toBeCloseTo(plain[i].x, 5);
+      expect(offset[i].anchorY).toBeCloseTo(plain[i].y, 5);
+    }
+  });
+
+  it('leaves the anchor unset when the mark is not offset', () => {
+    for (const mark of textMarksOf(textChart())) {
+      expect(mark.anchorX).toBeUndefined();
+      expect(mark.anchorY).toBeUndefined();
+    }
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Alignment / baseline
+// ---------------------------------------------------------------------------
+
+describe('align and baseline', () => {
+  it('centers on the data point by default', () => {
+    for (const mark of textMarksOf(textChart())) {
+      expect(mark.textAnchor).toBe('middle');
+      expect(mark.dominantBaseline).toBe('central');
+    }
+  });
+
+  it('maps align/baseline onto SVG anchor and baseline', () => {
+    const marks = textMarksOf(textChart({ type: 'text', align: 'left', baseline: 'top' }));
+    for (const mark of marks) {
+      expect(mark.textAnchor).toBe('start');
+      expect(mark.dominantBaseline).toBe('hanging');
+    }
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Size channel
+// ---------------------------------------------------------------------------
+
+describe('size channel', () => {
+  const sized = (): ChartSpec => ({
+    mark: { type: 'text' },
+    data: [...states],
+    encoding: {
+      x: { field: 'gdp', type: 'quantitative' },
+      y: { field: 'pop', type: 'quantitative' },
+      text: { field: 'label', type: 'nominal' },
+      size: { field: 'gdp', type: 'quantitative' },
+    },
+  });
+
+  it('maps the size field linearly onto the default font range', () => {
+    const marks = textMarksOf(sized());
+    const byLabel = new Map(marks.map((m) => [m.text, m]));
+
+    // gdp spans 0.8 (WA) to 3.9 (CA) -> the default 11..32px range.
+    expect(byLabel.get('WA')?.fontSize).toBeCloseTo(11, 5);
+    expect(byLabel.get('CA')?.fontSize).toBeCloseTo(32, 5);
+
+    // Linear, not sqrt: interior values interpolate proportionally. A sqrt scale
+    // would land NY well above this.
+    const ny = byLabel.get('NY') as TextMarkLayout; // gdp 2.1
+    const expectedNy = 11 + (32 - 11) * ((2.1 - 0.8) / (3.9 - 0.8));
+    expect(ny.fontSize).toBeCloseTo(expectedNy, 5);
+  });
+
+  it('honors an explicit scale range', () => {
+    const spec = sized();
+    (spec.encoding.size as { scale?: unknown }).scale = { range: [10, 20] };
+
+    const marks = textMarksOf(spec);
+    const byLabel = new Map(marks.map((m) => [m.text, m]));
+    expect(byLabel.get('WA')?.fontSize).toBeCloseTo(10, 5);
+    expect(byLabel.get('CA')?.fontSize).toBeCloseTo(20, 5);
+  });
+
+  it('falls back to mark.fontSize when there is no size encoding', () => {
+    for (const mark of textMarksOf(textChart({ type: 'text', fontSize: 14 }))) {
+      expect(mark.fontSize).toBe(14);
+    }
+  });
+
+  it('defaults to 12px with no size encoding and no fontSize', () => {
+    for (const mark of textMarksOf(textChart())) {
+      expect(mark.fontSize).toBe(12);
+    }
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Subset label layers
+// ---------------------------------------------------------------------------
+
+describe('a label layer over a subset of the points', () => {
+  /**
+   * Direct labeling usually names only the notable points, so the text layer
+   * carries fewer rows than the point layer. The two must still resolve the same
+   * domain — a subset must not re-fit the scale to its own narrower extent.
+   */
+  it('keeps subset labels aligned with the full point layer', () => {
+    const labeled = new Set(['CA', 'TX', 'NY', 'FL', 'IL', 'WA']);
+    const spec: LayerSpec = {
+      layer: [
+        {
+          mark: { type: 'point' },
+          data: [...states],
+          encoding: {
+            x: { field: 'gdp', type: 'quantitative' },
+            y: { field: 'pop', type: 'quantitative' },
+          },
+        },
+        {
+          mark: { type: 'text', dy: -14 },
+          data: states.filter((d) => labeled.has(d.label)),
+          encoding: {
+            x: { field: 'gdp', type: 'quantitative' },
+            y: { field: 'pop', type: 'quantitative' },
+            text: { field: 'label', type: 'nominal' },
+          },
+        },
+      ],
+    };
+
+    const layout = compileLayer(spec, { width: 900, height: 500 });
+    const points = layout.marks.filter((m): m is PointMark => m.type === 'point');
+    const texts = layout.marks.filter((m): m is TextMarkLayout => m.type === 'textMark');
+
+    expect(points).toHaveLength(states.length);
+    expect(texts).toHaveLength(labeled.size);
+
+    for (const text of texts) {
+      const point = points.find((p) => p.data?.label === text.text) as PointMark;
+      expect(text.x).toBeCloseTo(point.cx, 5);
+      expect(text.y).toBeCloseTo(point.cy - 14, 5);
+    }
+  });
+});
+
+describe('a subset whose extent is narrower than the point layer', () => {
+  /**
+   * Dropping the min-x row from the label layer narrows *its* data extent. If
+   * each leaf resolves its own domain, the label layer re-fits [1.1, 3.9] while
+   * the points keep [0.8, 3.9], and every label slides left off its dot.
+   */
+  it('still aligns when the label subset omits the extreme point', () => {
+    const labeled = new Set(['CA', 'TX', 'NY', 'FL', 'IL']); // no WA (the min gdp)
+    const spec: LayerSpec = {
+      layer: [
+        {
+          mark: { type: 'point' },
+          data: [...states],
+          encoding: {
+            x: { field: 'gdp', type: 'quantitative' },
+            y: { field: 'pop', type: 'quantitative' },
+          },
+        },
+        {
+          mark: { type: 'text' },
+          data: states.filter((d) => labeled.has(d.label)),
+          encoding: {
+            x: { field: 'gdp', type: 'quantitative' },
+            y: { field: 'pop', type: 'quantitative' },
+            text: { field: 'label', type: 'nominal' },
+          },
+        },
+      ],
+    };
+
+    const layout = compileLayer(spec, { width: 900, height: 500 });
+    const points = layout.marks.filter((m): m is PointMark => m.type === 'point');
+    const texts = layout.marks.filter((m): m is TextMarkLayout => m.type === 'textMark');
+
+    for (const text of texts) {
+      const point = points.find((p) => p.data?.label === text.text) as PointMark;
+      expect(text.x, `label ${text.text} drifted in x`).toBeCloseTo(point.cx, 5);
+      expect(text.y, `label ${text.text} drifted in y`).toBeCloseTo(point.cy, 5);
+    }
+  });
+});

package/src/charts/text/index.ts

@@ -8,13 +8,28 @@
 
 import type { Encoding, Mark, MarkAria, TextMarkLayout } from '@opendata-ai/openchart-core';
 import { getRepresentativeColor } from '@opendata-ai/openchart-core';
-
+import { buildSizeScale, SIZE_SCALE_DEFAULTS } from '../../compile/size-scale';
 import { dedupeKeys, serializeKeyValue } from '../../compiler/keys';
 import type { NormalizedChartSpec } from '../../compiler/types';
 import type { ResolvedScales } from '../../layout/scales';
 import type { ChartRenderer } from '../registry';
 import { getColor, scaleValue } from '../utils';
 
+/** Font size for text marks with no `size` encoding and no `mark.fontSize`. */
+const DEFAULT_FONT_SIZE = 12;
+
+const ALIGN_TO_ANCHOR = {
+  left: 'start',
+  center: 'middle',
+  right: 'end',
+} as const satisfies Record<string, TextMarkLayout['textAnchor']>;
+
+const BASELINE_TO_DOMINANT = {
+  top: 'hanging',
+  middle: 'central',
+  bottom: 'text-after-edge',
+} as const satisfies Record<string, NonNullable<TextMarkLayout['dominantBaseline']>>;
+
 /**
  * Compute text marks from spec data and resolved scales.
  */
@@ -34,6 +49,22 @@ export function computeTextMarks(
   const colorField = colorEncoding?.field;
   const sizeEncoding = encoding.size && 'field' in encoding.size ? encoding.size : undefined;
 
+  const markDef = spec.markDef ?? {};
+  const dx = markDef.dx ?? 0;
+  const dy = markDef.dy ?? 0;
+  const isOffset = dx !== 0 || dy !== 0;
+  const textAnchor = ALIGN_TO_ANCHOR[markDef.align ?? 'center'];
+  const dominantBaseline = BASELINE_TO_DOMINANT[markDef.baseline ?? 'middle'];
+
+  // Map the `size` field onto a font-size range. Linear, not sqrt: sqrt is right
+  // for bubbles because perceived magnitude tracks *area* (∝ r²), but a glyph
+  // reads by its height, which is linear in font size.
+  //
+  // Unlike scatter/beeswarm, this channel is *not* keyed: the library ships no
+  // font-size legend, and no publication uses one. Treat it as emphasis, not as
+  // a channel a reader is expected to decode back into a value.
+  const fontSizeScale = buildSizeScale(sizeEncoding, spec.data, SIZE_SCALE_DEFAULTS.text)?.scale;
+
   for (const row of spec.data) {
     // Resolve x position (center of chart if no x encoding)
     let x = 0;
@@ -60,22 +91,28 @@ export function computeTextMarks(
         : getColor(scales, '__default__'),
     );
 
-    const fontSize = sizeEncoding
-      ? Math.max(8, Math.min(48, Number(row[sizeEncoding.field]) || 12))
-      : 12;
+    const fallbackFontSize = markDef.fontSize ?? DEFAULT_FONT_SIZE;
+    const sizeValue = sizeEncoding ? Number(row[sizeEncoding.field]) : Number.NaN;
+    const fontSize =
+      fontSizeScale && Number.isFinite(sizeValue) ? fontSizeScale(sizeValue) : fallbackFontSize;
 
     const aria: MarkAria = {
       label: text,
     };
 
+    // Bake the offset into x/y rather than emitting SVG dx/dy: the transition
+    // driver tweens the x/y attributes and rotation pivots on them, so a
+    // separate offset attribute would leave both reading the un-offset anchor.
     marks.push({
       type: 'textMark',
-      x,
-      y,
+      x: x + dx,
+      y: y + dy,
+      ...(isOffset ? { anchorX: x, anchorY: y } : {}),
       text,
       fill: color,
       fontSize,
-      textAnchor: 'middle',
+      textAnchor,
+      dominantBaseline,
       angle:
         encoding.angle && 'field' in encoding.angle
           ? Number(row[encoding.angle.field]) || 0

package/src/charts/tick/__tests__/compute.test.ts

@@ -0,0 +1,75 @@
+import type { TickMarkLayout } from '@opendata-ai/openchart-core';
+import { describe, expect, it } from 'vitest';
+import { compileChart } from '../../../compile';
+
+const OPTIONS = { width: 800, height: 500 };
+
+const ROWS = [
+  { group: '20-29', hours: 3.1 },
+  { group: '20-29', hours: 4.7 },
+  { group: '60+', hours: 4.1 },
+  { group: '60+', hours: 7.0 },
+];
+
+function tickMarks(layout: ReturnType<typeof compileChart>): TickMarkLayout[] {
+  return layout.marks.filter((m): m is TickMarkLayout => m.type === 'tick');
+}
+
+describe('tick marks', () => {
+  it('draws vertical strokes when the value axis is x', () => {
+    const layout = compileChart(
+      {
+        mark: 'tick',
+        data: ROWS,
+        encoding: {
+          x: { field: 'hours', type: 'quantitative' },
+          y: { field: 'group', type: 'nominal' },
+        },
+      },
+      OPTIONS,
+    );
+
+    const marks = tickMarks(layout);
+    expect(marks).toHaveLength(ROWS.length);
+    // Perpendicular to the quantitative axis: values run left-to-right, so each
+    // observation is a vertical stroke. Horizontal strokes would lie along the
+    // value axis and butt end-to-end into a solid bar.
+    expect(marks.every((m) => m.orient === 'vertical')).toBe(true);
+  });
+
+  it('draws horizontal strokes when the value axis is y', () => {
+    const layout = compileChart(
+      {
+        mark: 'tick',
+        data: ROWS,
+        encoding: {
+          x: { field: 'group', type: 'nominal' },
+          y: { field: 'hours', type: 'quantitative' },
+        },
+      },
+      OPTIONS,
+    );
+
+    expect(tickMarks(layout).every((m) => m.orient === 'horizontal')).toBe(true);
+  });
+
+  it('separates observations within a category along the value axis', () => {
+    const layout = compileChart(
+      {
+        mark: 'tick',
+        data: ROWS,
+        encoding: {
+          x: { field: 'hours', type: 'quantitative' },
+          y: { field: 'group', type: 'nominal' },
+        },
+      },
+      OPTIONS,
+    );
+
+    const young = tickMarks(layout).filter((m) => m.data.group === '20-29');
+    expect(young).toHaveLength(2);
+    // Same row, different x: the strip plot's entire job.
+    expect(young[0].y).toBe(young[1].y);
+    expect(young[0].x).not.toBe(young[1].x);
+  });
+});

package/src/charts/tick/index.ts

@@ -41,9 +41,12 @@ export function computeTickMarks(
   const colorField = colorEncoding?.field;
   const marks: TickMarkLayout[] = [];
 
-  // Determine orientation: ticks are perpendicular to the quantitative axis
-  const isHorizontal = xChannel.type === 'quantitative' && yChannel.type !== 'quantitative';
-  const orient: 'horizontal' | 'vertical' = isHorizontal ? 'horizontal' : 'vertical';
+  // Ticks run perpendicular to the quantitative axis: a quantitative x (values
+  // spread left-to-right along a categorical row) gets vertical strokes, and a
+  // quantitative y gets horizontal ones. Drawing them parallel instead makes
+  // neighbouring observations butt end-to-end and read as one continuous bar.
+  const isQuantX = xChannel.type === 'quantitative' && yChannel.type !== 'quantitative';
+  const orient: 'horizontal' | 'vertical' = isQuantX ? 'vertical' : 'horizontal';
 
   for (const row of spec.data) {
     const xVal = scaleValue(scales.x.scale, scales.x.type, row[xChannel.field]);
@@ -78,7 +81,7 @@ export function computeTickMarks(
   }
 
   // Stamp keys: position-defining value, fall back to index
-  const posField = isHorizontal ? xChannel.field : yChannel.field;
+  const posField = isQuantX ? xChannel.field : yChannel.field;
   const rawKeys = marks.map((m) => serializeKeyValue(m.data[posField]));
   const keys = dedupeKeys(rawKeys);
   for (let i = 0; i < marks.length; i++) {