@opendata-ai/openchart-engine 3.0.0 → 6.1.0

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

@@ -20,7 +20,8 @@ const fullStrategy: LayoutStrategy = {
 
 function makeBasicScatterSpec(): NormalizedChartSpec {
   return {
-    type: 'scatter',
+    markType: 'point',
+    markDef: { type: 'point' },
     data: [
       { x: 10, y: 20 },
       { x: 30, y: 50 },
@@ -43,7 +44,8 @@ function makeBasicScatterSpec(): NormalizedChartSpec {
 
 function makeBubbleSpec(): NormalizedChartSpec {
   return {
-    type: 'scatter',
+    markType: 'point',
+    markDef: { type: 'point' },
     data: [
       { gdp: 10, life: 60, population: 1000 },
       { gdp: 30, life: 70, population: 5000 },
@@ -66,7 +68,8 @@ function makeBubbleSpec(): NormalizedChartSpec {
 
 function makeColoredScatterSpec(): NormalizedChartSpec {
   return {
-    type: 'scatter',
+    markType: 'point',
+    markDef: { type: 'point' },
     data: [
       { x: 10, y: 20, group: 'A' },
       { x: 30, y: 50, group: 'A' },
@@ -202,7 +205,8 @@ describe('computeScatterMarks', () => {
   describe('edge cases', () => {
     it('returns empty array when no x encoding', () => {
       const spec: NormalizedChartSpec = {
-        type: 'scatter',
+        markType: 'point',
+        markDef: { type: 'point' },
         data: [{ y: 10 }],
         encoding: {
           y: { field: 'y', type: 'quantitative' },
@@ -221,7 +225,8 @@ describe('computeScatterMarks', () => {
 
     it('skips rows with non-finite values', () => {
       const spec: NormalizedChartSpec = {
-        type: 'scatter',
+        markType: 'point',
+        markDef: { type: 'point' },
         data: [
           { x: 10, y: 20 },
           { x: NaN, y: 30 },

package/src/charts/scatter/compute.ts

@@ -20,7 +20,7 @@ import { scaleSqrt } from 'd3-scale';
 
 import type { NormalizedChartSpec } from '../../compiler/types';
 import type { ResolvedScales } from '../../layout/scales';
-import { getColor } from '../utils';
+import { getColor, getSequentialColor } from '../utils';
 
 // ---------------------------------------------------------------------------
 // Constants
@@ -58,8 +58,10 @@ export function computeScatterMarks(
   const xScale = scales.x.scale as ScaleLinear<number, number>;
   const yScale = scales.y.scale as ScaleLinear<number, number>;
 
-  const colorField = encoding.color?.field;
-  const sizeField = encoding.size?.field;
+  const colorEnc = encoding.color && 'field' in encoding.color ? encoding.color : undefined;
+  const isSequentialColor = colorEnc?.type === 'quantitative';
+  const colorField = colorEnc?.field;
+  const sizeField = encoding.size && 'field' in encoding.size ? encoding.size.field : undefined;
 
   // Build a size scale for bubble variant
   let sizeScale: ((v: number) => number) | undefined;
@@ -85,8 +87,16 @@ export function computeScatterMarks(
     const cx = xScale(xVal);
     const cy = yScale(yVal);
 
-    const category = colorField ? String(row[colorField] ?? '') : undefined;
-    const color = getColor(scales, category ?? '__default__');
+    const category = colorField && !isSequentialColor ? String(row[colorField] ?? '') : undefined;
+    let color: string;
+    if (isSequentialColor && colorField) {
+      const val = Number(row[colorField]);
+      color = Number.isFinite(val)
+        ? getSequentialColor(scales, val)
+        : getColor(scales, '__default__');
+    } else {
+      color = getColor(scales, category ?? '__default__');
+    }
 
     let radius = DEFAULT_POINT_RADIUS;
     if (sizeScale && sizeField) {

package/src/charts/text/index.ts

@@ -0,0 +1,92 @@
+/**
+ * Text mark renderer.
+ *
+ * Computes TextMarkLayout marks from a normalized chart spec.
+ * Positions text at data coordinates using x/y encoding channels,
+ * with content from the text encoding channel.
+ */
+
+import type { Encoding, Mark, MarkAria, TextMarkLayout } from '@opendata-ai/openchart-core';
+
+import type { NormalizedChartSpec } from '../../compiler/types';
+import type { ResolvedScales } from '../../layout/scales';
+import type { ChartRenderer } from '../registry';
+import { getColor, scaleValue } from '../utils';
+
+/**
+ * Compute text marks from spec data and resolved scales.
+ */
+export function computeTextMarks(
+  spec: NormalizedChartSpec,
+  scales: ResolvedScales,
+): TextMarkLayout[] {
+  const encoding = spec.encoding as Encoding;
+  const xChannel = encoding.x;
+  const yChannel = encoding.y;
+  const textChannel = encoding.text;
+
+  if (!textChannel || !('field' in textChannel)) return [];
+
+  const marks: TextMarkLayout[] = [];
+  const colorEncoding = encoding.color && 'field' in encoding.color ? encoding.color : undefined;
+  const colorField = colorEncoding?.field;
+  const sizeEncoding = encoding.size && 'field' in encoding.size ? encoding.size : undefined;
+
+  for (const row of spec.data) {
+    // Resolve x position (center of chart if no x encoding)
+    let x = 0;
+    if (xChannel && scales.x) {
+      const xVal = scaleValue(scales.x.scale, scales.x.type, row[xChannel.field]);
+      if (xVal == null) continue;
+      x = xVal;
+    }
+
+    // Resolve y position (center of chart if no y encoding)
+    let y = 0;
+    if (yChannel && scales.y) {
+      const yVal = scaleValue(scales.y.scale, scales.y.type, row[yChannel.field]);
+      if (yVal == null) continue;
+      y = yVal;
+    }
+
+    const text = String(row[textChannel.field] ?? '');
+    if (!text) continue;
+
+    const color = colorField
+      ? getColor(scales, String(row[colorField] ?? '__default__'))
+      : getColor(scales, '__default__');
+
+    const fontSize = sizeEncoding
+      ? Math.max(8, Math.min(48, Number(row[sizeEncoding.field]) || 12))
+      : 12;
+
+    const aria: MarkAria = {
+      label: text,
+    };
+
+    marks.push({
+      type: 'textMark',
+      x,
+      y,
+      text,
+      fill: color,
+      fontSize,
+      textAnchor: 'middle',
+      angle:
+        encoding.angle && 'field' in encoding.angle
+          ? Number(row[encoding.angle.field]) || 0
+          : undefined,
+      data: row as Record<string, unknown>,
+      aria,
+    });
+  }
+
+  return marks;
+}
+
+/**
+ * Text chart renderer.
+ */
+export const textRenderer: ChartRenderer = (spec, scales, _chartArea, _strategy, _theme) => {
+  return computeTextMarks(spec, scales) as Mark[];
+};

package/src/charts/tick/index.ts

@@ -0,0 +1,84 @@
+/**
+ * Tick mark renderer.
+ *
+ * Computes TickMarkLayout marks from a normalized chart spec.
+ * Ticks are short line segments used for strip/rug plots.
+ * Each data point produces a small tick perpendicular to the data axis.
+ */
+
+import type { Encoding, Mark, MarkAria, Rect, TickMarkLayout } from '@opendata-ai/openchart-core';
+
+import type { NormalizedChartSpec } from '../../compiler/types';
+import type { ResolvedScales } from '../../layout/scales';
+import type { ChartRenderer } from '../registry';
+import { getColor, scaleValue } from '../utils';
+
+/** Default tick length in pixels. */
+const DEFAULT_TICK_LENGTH = 18;
+
+/**
+ * Compute tick marks from spec data and resolved scales.
+ *
+ * Orientation is inferred from the encoding:
+ * - If x is quantitative and y is categorical (or vice versa), ticks are
+ *   perpendicular to the quantitative axis.
+ * - Default: vertical ticks (short vertical lines at each x position).
+ */
+export function computeTickMarks(
+  spec: NormalizedChartSpec,
+  scales: ResolvedScales,
+  _chartArea: Rect,
+): TickMarkLayout[] {
+  const encoding = spec.encoding as Encoding;
+  const xChannel = encoding.x;
+  const yChannel = encoding.y;
+
+  if (!xChannel || !yChannel || !scales.x || !scales.y) return [];
+
+  const colorEncoding = encoding.color && 'field' in encoding.color ? encoding.color : undefined;
+  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';
+
+  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;
+
+    const color = colorField
+      ? getColor(scales, String(row[colorField] ?? '__default__'))
+      : getColor(scales, '__default__');
+
+    const aria: MarkAria = {
+      label: `${row[xChannel.field]}, ${row[yChannel.field]}`,
+    };
+
+    marks.push({
+      type: 'tick',
+      x: xVal,
+      y: yVal,
+      length: DEFAULT_TICK_LENGTH,
+      orient,
+      stroke: color,
+      strokeWidth: 1,
+      opacity:
+        encoding.opacity && 'field' in encoding.opacity
+          ? Math.max(0, Math.min(1, Number(row[encoding.opacity.field]) || 1))
+          : undefined,
+      data: row as Record<string, unknown>,
+      aria,
+    });
+  }
+
+  return marks;
+}
+
+/**
+ * Tick chart renderer.
+ */
+export const tickRenderer: ChartRenderer = (spec, scales, chartArea, _strategy, _theme) => {
+  return computeTickMarks(spec, scales, chartArea) as Mark[];
+};

package/src/charts/utils.ts

@@ -32,7 +32,7 @@ export const DEFAULT_COLOR = '#1b7fa3';
 export function scaleValue(scale: D3Scale, scaleType: string, value: unknown): number | null {
   if (value == null) return null;
 
-  if (scaleType === 'time') {
+  if (scaleType === 'time' || scaleType === 'utc') {
     const date = value instanceof Date ? value : new Date(String(value));
     if (Number.isNaN(date.getTime())) return null;
     return (scale as ScaleTime<number, number>)(date);

package/src/compile.ts

@@ -13,8 +13,10 @@
 
 import type {
   ChartLayout,
+  ChartSpec,
   CompileOptions,
   CompileTableOptions,
+  LayerSpec,
   Mark,
   PointMark,
   Rect,
@@ -41,21 +43,39 @@ import { dotRenderer } from './charts/dot';
 import { areaRenderer, lineRenderer } from './charts/line';
 import { donutRenderer, pieRenderer } from './charts/pie';
 import { type ChartRenderer, getChartRenderer, registerChartRenderer } from './charts/registry';
+import { ruleRenderer } from './charts/rule';
 import { scatterRenderer } from './charts/scatter';
-import { compile as compileSpec } from './compiler/index';
-
-// Register all built-in chart renderers. Explicit imports ensure bundlers
-// cannot tree-shake the registrations away (bare side-effect imports are
-// treated as dead code by esbuild).
+import { textRenderer } from './charts/text';
+import { tickRenderer } from './charts/tick';
+import { compile as compileSpec, flattenLayers } from './compiler/index';
+
+// Register all built-in chart renderers under the new Vega-Lite mark type names.
+// Explicit imports ensure bundlers cannot tree-shake the registrations away.
+//
+// Mark type mapping from old chart types:
+// - 'bar' -> barRenderer (horizontal bars, old 'bar')
+// - 'bar:vertical' is handled by columnRenderer (old 'column')
+// - 'arc' -> pieRenderer (old 'pie'); donutRenderer is also registered
+// - 'point' -> scatterRenderer (old 'scatter')
+// - 'circle' -> dotRenderer (old 'dot')
+// - 'line' and 'area' unchanged
+// - 'text', 'rule', 'tick' are new Vega-Lite mark types
+//
+// For 'bar', orientation is resolved at compile time to dispatch to the right renderer.
+// We register both barRenderer and columnRenderer; the compile function picks based on orientation.
 const builtinRenderers: Record<string, ChartRenderer> = {
   line: lineRenderer,
   area: areaRenderer,
-  bar: barRenderer,
-  column: columnRenderer,
-  scatter: scatterRenderer,
-  pie: pieRenderer,
-  donut: donutRenderer,
-  dot: dotRenderer,
+  bar: barRenderer, // horizontal bars
+  'bar:vertical': columnRenderer, // vertical bars (old 'column')
+  point: scatterRenderer, // old 'scatter'
+  arc: pieRenderer, // old 'pie' (donut handled via innerRadius)
+  'arc:donut': donutRenderer, // old 'donut'
+  circle: dotRenderer, // old 'dot'
+  text: textRenderer,
+  rule: ruleRenderer,
+  tick: tickRenderer,
+  rect: columnRenderer, // rect uses column renderer (RectMark output) as baseline for heatmaps
 };
 for (const [type, renderer] of Object.entries(builtinRenderers)) {
   registerChartRenderer(type, renderer);
@@ -71,6 +91,7 @@ import { computeScales, type ResolvedScales } from './layout/scales';
 import { computeLegend } from './legend/compute';
 import { compileTableLayout } from './tables/compile-table';
 import { computeTooltipDescriptors } from './tooltips/compute';
+import { runTransforms } from './transforms';
 
 // ---------------------------------------------------------------------------
 // Mark obstacles for annotation collision avoidance
@@ -182,15 +203,25 @@ export function compileChart(spec: unknown, options: CompileOptions): ChartLayou
   // Validate + normalize
   const { spec: normalized } = compileSpec(spec);
 
-  if (normalized.type === 'table') {
+  if ('type' in normalized && (normalized as unknown as Record<string, unknown>).type === 'table') {
     throw new Error('compileChart received a table spec. Use compileTable instead.');
   }
-  if (normalized.type === 'graph') {
+  if ('type' in normalized && (normalized as unknown as Record<string, unknown>).type === 'graph') {
     throw new Error('compileChart received a graph spec. Use compileGraph instead.');
   }
 
   let chartSpec = normalized as NormalizedChartSpec;
 
+  // Run data transforms (filter, bin, calculate, timeUnit) before any other data processing.
+  // Transforms are defined on the original spec, not the normalized spec, since
+  // NormalizedChartSpec doesn't carry the transform field.
+  const rawTransforms = (spec as Record<string, unknown>).transform as
+    | import('@opendata-ai/openchart-core').Transform[]
+    | undefined;
+  if (rawTransforms && rawTransforms.length > 0) {
+    chartSpec = { ...chartSpec, data: runTransforms(chartSpec.data, rawTransforms) };
+  }
+
   // Responsive strategy
   const breakpoint = getBreakpoint(options.width);
   const heightClass = getHeightClass(options.height);
@@ -292,7 +323,11 @@ export function compileChart(spec: unknown, options: CompileOptions): ChartLayou
   let renderData = chartSpec.data;
 
   // Filter hidden series: removed from rendering but kept in legend (dimmed in the adapter)
-  if (chartSpec.hiddenSeries.length > 0 && chartSpec.encoding.color) {
+  if (
+    chartSpec.hiddenSeries.length > 0 &&
+    chartSpec.encoding.color &&
+    'field' in chartSpec.encoding.color
+  ) {
     const colorField = chartSpec.encoding.color.field;
     const hiddenSet = new Set(chartSpec.hiddenSeries);
     renderData = renderData.filter((row) => !hiddenSet.has(String(row[colorField])));
@@ -338,8 +373,8 @@ export function compileChart(spec: unknown, options: CompileOptions): ChartLayou
   // Set default color for single-series charts (no color encoding)
   scales.defaultColor = theme.colors.categorical[0];
 
-  // Pie/donut charts don't use axes or gridlines
-  const isRadial = chartSpec.type === 'pie' || chartSpec.type === 'donut';
+  // Arc charts (pie/donut) don't use axes or gridlines
+  const isRadial = chartSpec.markType === 'arc';
 
   // Compute axes (skip for radial charts)
   const axes = isRadial
@@ -351,8 +386,28 @@ export function compileChart(spec: unknown, options: CompileOptions): ChartLayou
     computeGridlines(axes, chartArea);
   }
 
-  // Get chart renderer and compute marks (using filtered data)
-  const renderer = getChartRenderer(renderSpec.type);
+  // Get chart renderer and compute marks (using filtered data).
+  // For 'bar' mark, resolve orientation to pick horizontal vs vertical renderer.
+  // For 'arc' mark, resolve innerRadius to pick pie vs donut renderer.
+  let rendererKey = renderSpec.markType as string;
+  if (rendererKey === 'bar') {
+    // Infer orientation from encoding: if x is quantitative and y is categorical, horizontal (default)
+    // If x is categorical and y is quantitative, vertical (old 'column')
+    const xType = renderSpec.encoding.x?.type;
+    const yType = renderSpec.encoding.y?.type;
+    const isVertical =
+      (xType === 'nominal' || xType === 'ordinal' || xType === 'temporal') &&
+      yType === 'quantitative';
+    if (isVertical) {
+      rendererKey = 'bar:vertical';
+    }
+  } else if (rendererKey === 'arc') {
+    const innerRadius = renderSpec.markDef.innerRadius;
+    if (innerRadius && innerRadius > 0) {
+      rendererKey = 'arc:donut';
+    }
+  }
+  const renderer = getChartRenderer(rendererKey);
   const marks: Mark[] = renderer ? renderer(renderSpec, scales, chartArea, strategy, theme) : [];
 
   // Compute annotations from spec, passing legend + mark + brand bounds as obstacles
@@ -364,7 +419,7 @@ export function compileChart(spec: unknown, options: CompileOptions): ChartLayou
 
   // Add visible data label bounds as obstacles so annotations avoid overlapping them
   for (const mark of marks) {
-    if (mark.type !== 'area' && mark.label?.visible) {
+    if ('label' in mark && mark.label?.visible) {
       obstacles.push(computeLabelBounds(mark.label));
     }
   }
@@ -395,7 +450,7 @@ export function compileChart(spec: unknown, options: CompileOptions): ChartLayou
   // Compute accessibility
   const altText = generateAltText(
     {
-      type: chartSpec.type,
+      mark: chartSpec.markType,
       data: chartSpec.data,
       encoding: chartSpec.encoding,
       chrome: chartSpec.chrome,
@@ -404,7 +459,7 @@ export function compileChart(spec: unknown, options: CompileOptions): ChartLayou
   );
   const dataTableFallback = generateDataTable(
     {
-      type: chartSpec.type,
+      mark: chartSpec.markType,
       data: chartSpec.data,
       encoding: chartSpec.encoding,
     },
@@ -436,6 +491,101 @@ export function compileChart(spec: unknown, options: CompileOptions): ChartLayou
   };
 }
 
+// ---------------------------------------------------------------------------
+// Layer compilation
+// ---------------------------------------------------------------------------
+
+/**
+ * Compile a LayerSpec into a single ChartLayout.
+ *
+ * Flattens nested layers, merges inherited data/encoding/transforms,
+ * compiles each leaf layer independently, unions scale domains (shared
+ * by default), and concatenates marks in layer order.
+ *
+ * @param spec - A LayerSpec with child layers.
+ * @param options - Compile options (width, height, theme, darkMode).
+ * @returns A single ChartLayout with combined marks from all layers.
+ */
+export function compileLayer(spec: LayerSpec, options: CompileOptions): ChartLayout {
+  // Flatten nested layers into leaf ChartSpecs with merged data/encoding/transforms
+  const leaves = flattenLayers(spec);
+
+  if (leaves.length === 0) {
+    throw new Error('LayerSpec has no leaf chart specs after flattening');
+  }
+
+  // If there's only one layer, just compile it directly
+  if (leaves.length === 1) {
+    const singleSpec = buildPrimarySpec(leaves, spec);
+    return compileChart(singleSpec, options);
+  }
+
+  // Build primary spec with unioned data for shared scale computation.
+  // The primary layout provides chrome, axes, dimensions, legend, and a11y.
+  const primarySpec = buildPrimarySpec(leaves, spec);
+  const primaryLayout = compileChart(primarySpec, options);
+
+  // Compile each leaf layer independently but with the full unioned data
+  // so they all share the same scale domains.
+  const allMarks: Mark[] = [];
+  const seenLabels = new Set<string>();
+  const mergedLegendEntries = [...primaryLayout.legend.entries];
+  for (const entry of mergedLegendEntries) {
+    seenLabels.add(entry.label);
+  }
+
+  for (const leaf of leaves) {
+    // Compile each leaf with its own data so marks correspond to its rows only.
+    // Scale domains may differ slightly between layers, but this prevents
+    // duplicate marks from feeding unioned data into every renderer.
+    const leafLayout = compileChart(leaf as unknown, options);
+
+    allMarks.push(...leafLayout.marks);
+
+    // Deduplicate legend entries across layers
+    for (const entry of leafLayout.legend.entries) {
+      if (!seenLabels.has(entry.label)) {
+        seenLabels.add(entry.label);
+        mergedLegendEntries.push(entry);
+      }
+    }
+  }
+
+  return {
+    ...primaryLayout,
+    marks: allMarks,
+    legend: {
+      ...primaryLayout.legend,
+      entries: mergedLegendEntries,
+    },
+  };
+}
+
+/**
+ * Build the primary ChartSpec from all leaves for shared compilation.
+ * Unions all data rows across layers so scales see the full domain.
+ * Uses the first leaf's mark/encoding as the base, with layer-level chrome.
+ */
+function buildPrimarySpec(leaves: ChartSpec[], layerSpec: LayerSpec): ChartSpec {
+  // Union all data across layers for domain computation
+  const allData = leaves.flatMap((leaf) => leaf.data);
+
+  const primary = {
+    ...leaves[0],
+    data: allData,
+    // Layer-level chrome overrides leaf chrome
+    chrome: layerSpec.chrome ?? leaves[0].chrome,
+    labels: layerSpec.labels ?? leaves[0].labels,
+    legend: layerSpec.legend ?? leaves[0].legend,
+    responsive: layerSpec.responsive ?? leaves[0].responsive,
+    theme: layerSpec.theme ?? leaves[0].theme,
+    darkMode: layerSpec.darkMode ?? leaves[0].darkMode,
+    hiddenSeries: layerSpec.hiddenSeries ?? leaves[0].hiddenSeries,
+  };
+
+  return primary;
+}
+
 // ---------------------------------------------------------------------------
 // Table compilation
 // ---------------------------------------------------------------------------
@@ -454,8 +604,10 @@ export function compileChart(spec: unknown, options: CompileOptions): ChartLayou
 export function compileTable(spec: unknown, options: CompileTableOptions): TableLayout {
   const { spec: normalized } = compileSpec(spec);
 
-  if (normalized.type !== 'table') {
-    throw new Error(`compileTable received a ${normalized.type} spec. Use compileChart instead.`);
+  const normType =
+    'type' in normalized ? (normalized as unknown as Record<string, unknown>).type : undefined;
+  if (normType !== 'table') {
+    throw new Error(`compileTable received a non-table spec. Use compileChart instead.`);
   }
 
   const tableSpec = normalized as NormalizedTableSpec;

package/src/compiler/__tests__/compile.test.ts

@@ -4,7 +4,7 @@ import type { NormalizedChartSpec } from '../types';
 
 describe('compile (validate + normalize pipeline)', () => {
   const validSpec = {
-    type: 'line',
+    mark: 'line',
     data: [
       { date: '2020-01-01', value: 10 },
       { date: '2021-01-01', value: 20 },
@@ -19,7 +19,7 @@ describe('compile (validate + normalize pipeline)', () => {
   it('returns a normalized spec for valid input', () => {
     const result = compile(validSpec);
     expect(result.spec).toBeDefined();
-    expect(result.spec.type).toBe('line');
+    expect((result.spec as NormalizedChartSpec).markType).toBe('line');
     expect(result.warnings).toBeInstanceOf(Array);
   });
 
@@ -42,7 +42,7 @@ describe('compile (validate + normalize pipeline)', () => {
     expect(() => compile({})).toThrow('Invalid spec');
     expect(() =>
       compile({
-        type: 'line',
+        mark: 'line',
         data: [],
         encoding: {},
       }),
@@ -51,7 +51,7 @@ describe('compile (validate + normalize pipeline)', () => {
 
   it('produces warnings for inferred types', () => {
     const spec = {
-      type: 'scatter',
+      mark: 'point',
       data: [
         { x: 10, y: 20 },
         { x: 30, y: 40 },

package/src/compiler/__tests__/normalize.test.ts

@@ -15,7 +15,7 @@ import type { NormalizedChartSpec, NormalizedGraphSpec, NormalizedTableSpec } fr
 // ---------------------------------------------------------------------------
 
 const lineSpec: ChartSpec = {
-  type: 'line',
+  mark: 'line',
   data: [
     { date: '2020-01-01', value: 10, country: 'US' },
     { date: '2021-01-01', value: 20, country: 'UK' },
@@ -76,7 +76,7 @@ describe('normalizeSpec', () => {
     it('infers encoding types from data when not specified', () => {
       const warnings: string[] = [];
       const spec: ChartSpec = {
-        type: 'scatter',
+        mark: 'point',
         data: [
           { x: 10, y: 20 },
           { x: 30, y: 40 },
@@ -97,7 +97,7 @@ describe('normalizeSpec', () => {
     it('infers temporal type from date strings', () => {
       const warnings: string[] = [];
       const spec: ChartSpec = {
-        type: 'line',
+        mark: 'line',
         data: [
           { date: '2020-01-01', value: 10 },
           { date: '2021-06-15', value: 20 },
@@ -116,7 +116,7 @@ describe('normalizeSpec', () => {
     it('warns on type mismatch (temporal declared as nominal)', () => {
       const warnings: string[] = [];
       const spec: ChartSpec = {
-        type: 'line',
+        mark: 'line',
         data: [
           { date: '2020-01-01', value: 10 },
           { date: '2021-06-15', value: 20 },