graphein 0.10.0 → 0.12.0

package/dist/index.js

@@ -6245,6 +6245,10 @@ function yGridEnabled(model) {
   return model.spec.axes?.y?.grid !== false;
 }
 function drawAxesUnderlay(surface, model) {
+  if (model.orientation === "horizontal") {
+    drawHorizontalAxesUnderlay(surface, model);
+    return;
+  }
   const ctx = surface.marks.ctx;
   const { plot, tokens } = model;
   const x0 = plot.x;
@@ -6318,6 +6322,58 @@ function drawAxesUnderlay(surface, model) {
   }
   ctx.restore();
 }
+function drawHorizontalAxesUnderlay(surface, model) {
+  const ctx = surface.marks.ctx;
+  const { plot, tokens } = model;
+  const x0 = plot.x;
+  const y0 = plot.y;
+  const y1 = plot.y + plot.height;
+  ctx.save();
+  ctx.lineWidth = 1;
+  const pen = model.sketch ? new RoughPen(ctx, model.sketch) : null;
+  const seg = (sx0, sy0, sx1, sy1, stroke) => {
+    pen.polyline([{ x: sx0, y: sy0 }, { x: sx1, y: sy1 }], {
+      stroke,
+      strokeWidth: 1,
+      roughness: model.sketch.roughness * 0.5,
+      bowing: model.sketch.bowing * 0.55
+    });
+  };
+  if (yGridEnabled(model)) {
+    if (pen) {
+      for (const t of model.yTicks) seg(t.pos, y0, t.pos, y1, tokens.color.grid);
+    } else {
+      ctx.strokeStyle = tokens.color.grid;
+      ctx.beginPath();
+      for (const t of model.yTicks) {
+        const x = crisp(t.pos);
+        ctx.moveTo(x, y0);
+        ctx.lineTo(x, y1);
+      }
+      ctx.stroke();
+    }
+  }
+  if (model.spec.axes?.x?.show !== false) {
+    if (pen) {
+      seg(x0, y0, x0, y1, tokens.color.axis);
+      for (const t of model.xTicks) seg(x0 - TICK_SIZE, t.pos, x0, t.pos, tokens.color.axis);
+    } else {
+      ctx.strokeStyle = tokens.color.axis;
+      ctx.beginPath();
+      ctx.moveTo(crisp(x0), y0);
+      ctx.lineTo(crisp(x0), y1);
+      ctx.stroke();
+      ctx.beginPath();
+      for (const t of model.xTicks) {
+        const y = crisp(t.pos);
+        ctx.moveTo(x0 - TICK_SIZE, y);
+        ctx.lineTo(x0, y);
+      }
+      ctx.stroke();
+    }
+  }
+  ctx.restore();
+}
 function thinXTicks(model, avgCharPx) {
   const ticks2 = model.xTicks;
   if (ticks2.length <= 1) return ticks2;
@@ -6388,9 +6444,12 @@ function drawOverlay(surface, model) {
   const { plot, tokens, frame } = model;
   const f = tokens.font;
   const smallFont = fontString(f.size.small, f.family, f.weight.normal);
-  if (model.spec.axes?.y?.labels !== false) {
+  const horizontal = model.orientation === "horizontal";
+  const gutterTicks = horizontal ? model.xTicks : model.yTicks;
+  const gutterLabelsOn = horizontal ? model.spec.axes?.x?.labels !== false : model.spec.axes?.y?.labels !== false;
+  if (gutterLabelsOn) {
     const gutterRight = plot.x - TICK_SIZE - 4;
-    for (const t of model.yTicks) {
+    for (const t of gutterTicks) {
       addText(surface, smallFont, {
         left: 0,
         top: t.pos,
@@ -6403,20 +6462,34 @@ function drawOverlay(surface, model) {
       });
     }
   }
-  if (model.spec.axes?.x?.labels !== false) {
+  const bottomLabelsOn = horizontal ? model.spec.axes?.y?.labels !== false : model.spec.axes?.x?.labels !== false;
+  if (bottomLabelsOn) {
     const top = plot.y + plot.height + TICK_SIZE + 3;
-    const rotated = frame.xLabelAngle > 0;
-    for (const p of resolveXLabels(model)) {
-      addText(surface, smallFont, {
-        left: p.left,
-        top,
-        text: p.text,
-        color: tokens.color.textMuted,
-        size: f.size.small,
-        align: rotated ? "right" : void 0,
-        transform: p.transform,
-        transformOrigin: rotated ? "100% 0%" : void 0
-      });
+    if (horizontal) {
+      for (const p of placeXLabels(model.yTicks, frame.originX, frame.width, smallFont)) {
+        addText(surface, smallFont, {
+          left: p.left,
+          top,
+          text: p.text,
+          color: tokens.color.textMuted,
+          size: f.size.small,
+          transform: p.transform
+        });
+      }
+    } else {
+      const rotated = frame.xLabelAngle > 0;
+      for (const p of resolveXLabels(model)) {
+        addText(surface, smallFont, {
+          left: p.left,
+          top,
+          text: p.text,
+          color: tokens.color.textMuted,
+          size: f.size.small,
+          align: rotated ? "right" : void 0,
+          transform: p.transform,
+          transformOrigin: rotated ? "100% 0%" : void 0
+        });
+      }
     }
   }
   drawAxisTitles(surface, model);
@@ -6428,6 +6501,32 @@ function drawAxisTitles(surface, model) {
   const f = tokens.font;
   const baseFont = fontString(f.size.base, f.family, f.weight.medium);
   const xTitle = model.spec.axes?.x?.title ?? model.spec.encoding.x.title;
+  const yTitle = model.spec.axes?.y?.title ?? model.spec.encoding.y.title;
+  if (model.orientation === "horizontal") {
+    if (yTitle) {
+      addText(surface, baseFont, {
+        left: plot.x + plot.width / 2,
+        top: frame.originY + frame.height - Math.round(f.size.base * 1.35),
+        text: yTitle,
+        color: tokens.color.text,
+        size: f.size.base,
+        weight: f.weight.medium,
+        transform: "translateX(-50%)"
+      });
+    }
+    if (xTitle) {
+      addText(surface, baseFont, {
+        left: frame.originX + Math.round(f.size.base * 0.4),
+        top: plot.y + plot.height / 2,
+        text: xTitle,
+        color: tokens.color.text,
+        size: f.size.base,
+        weight: f.weight.medium,
+        transform: "translate(-50%, -50%) rotate(-90deg)"
+      });
+    }
+    return;
+  }
   if (xTitle) {
     addText(surface, baseFont, {
       left: plot.x + plot.width / 2,
@@ -6439,7 +6538,6 @@ function drawAxisTitles(surface, model) {
       transform: "translateX(-50%)"
     });
   }
-  const yTitle = model.spec.axes?.y?.title ?? model.spec.encoding.y.title;
   if (yTitle) {
     addText(surface, baseFont, {
       left: frame.originX + Math.round(f.size.base * 0.4),
@@ -6642,6 +6740,7 @@ function buildCartesianModel(spec, tokens, opts) {
   const yField = enc.y.field;
   const xType = fieldType(spec, enc.x, "nominal");
   const xKind = xKindFor(spec, xType);
+  const horizontal = spec.type === "bar" && spec.orientation === "horizontal";
   const seriesField = resolveSeriesField(spec);
   const rawSeries = groupBySeries(data, seriesField);
   const seriesKeys = rawSeries.map((s) => s.key);
@@ -6797,6 +6896,19 @@ function buildCartesianModel(spec, tokens, opts) {
   }));
   const padding = { ...DEFAULT_PADDING, ...spec.padding };
   const titleInput4 = resolveTitle(spec);
+  const categoryAxisInput = {
+    show: xShow,
+    labels: xLabels,
+    title: resolveAxisTitle(enc.x, xAxisCfg),
+    edgeAnchored: !categories,
+    labelAngle: xAxisCfg.labelAngle
+  };
+  const valueAxisInput = {
+    show: yShow,
+    labels: yLabels,
+    title: resolveAxisTitle(enc.y, yAxisCfg),
+    edgeAnchored: true
+  };
   const frame = computeFrame({
     width: opts.width,
     height: opts.height,
@@ -6806,8 +6918,8 @@ function buildCartesianModel(spec, tokens, opts) {
     font: tokens.font,
     title: titleInput4,
     legend: legend.show && legendItems.length > 1 ? { items: legendItems, position: legend.position } : void 0,
-    xAxis: { show: xShow, labels: xLabels, title: resolveAxisTitle(enc.x, xAxisCfg), edgeAnchored: !categories, labelAngle: xAxisCfg.labelAngle },
-    yAxis: { show: yShow, labels: yLabels, title: resolveAxisTitle(enc.y, yAxisCfg) }
+    xAxis: horizontal ? valueAxisInput : categoryAxisInput,
+    yAxis: horizontal ? categoryAxisInput : valueAxisInput
   });
   const legendHits = legendInteractive(spec) && seriesField && frame.legendItems ? frame.legendItems.map((item, i) => {
     const rowH = Math.max(LEGEND_SWATCH2, Math.round(tokens.font.size.small * 1.35));
@@ -6825,16 +6937,18 @@ function buildCartesianModel(spec, tokens, opts) {
     };
   }) : void 0;
   const plot = frame.plot;
-  const yRange = [plot.y + plot.height, plot.y];
-  const yScale = yIsLog ? logScale({ domain: yDomain, range: yRange, base: yBase, clamp: yClamp }) : linearScale({ domain: yDomain, range: yRange, clamp: yClamp });
+  const valueRange = horizontal ? [plot.x, plot.x + plot.width] : [plot.y + plot.height, plot.y];
+  const yScale = yIsLog ? logScale({ domain: yDomain, range: valueRange, base: yBase, clamp: yClamp }) : linearScale({ domain: yDomain, range: valueRange, clamp: yClamp });
   const yPixel = (value) => yScale.map(toNumber(value));
-  const baseline = yIsLog ? plot.y + plot.height : clampPx(yScale.map(0), plot.y, plot.y + plot.height);
+  const valueMin = horizontal ? plot.x : plot.y;
+  const valueMax = horizontal ? plot.x + plot.width : plot.y + plot.height;
+  const baseline = yIsLog ? horizontal ? plot.x : plot.y + plot.height : clampPx(yScale.map(0), valueMin, valueMax);
   const xModel = buildXModel(xKind, {
     field: xField,
     type: xType,
     categories,
     domainNum: xDomainNum,
-    range: [plot.x, plot.x + plot.width],
+    range: horizontal ? [plot.y, plot.y + plot.height] : [plot.x, plot.x + plot.width],
     paddingInner: spec.type === "bar" ? 0.2 : spec.type === "box" ? 0.32 : 0.5,
     scaleCfg: enc.x.scale
   });
@@ -6857,6 +6971,8 @@ function buildCartesianModel(spec, tokens, opts) {
     series,
     seriesField,
     stacked,
+    orientation: horizontal ? "horizontal" : "vertical",
+    project: horizontal ? (catPixel, valPixel) => ({ x: valPixel, y: catPixel }) : (catPixel, valPixel) => ({ x: catPixel, y: valPixel }),
     xTicks,
     yTicks,
     colorOf,
@@ -7254,14 +7370,11 @@ function finite2(value) {
 function defaultRadius(model, spec) {
   return Math.max(0, spec.cornerRadius ?? Math.min(4, model.tokens.radius.sm));
 }
-function cornerSideFor(baseY, valueY) {
-  if (valueY < baseY) return "top";
-  if (valueY > baseY) return "bottom";
-  return "none";
-}
 function makeRadii(side, radius) {
   if (side === "top") return [radius, radius, 0, 0];
   if (side === "bottom") return [0, 0, radius, radius];
+  if (side === "right") return [0, radius, radius, 0];
+  if (side === "left") return [radius, 0, 0, radius];
   return 0;
 }
 function drawRect(ctx, rect, radius, pen, alpha = 1) {
@@ -7281,28 +7394,39 @@ function drawRect(ctx, rect, radius, pen, alpha = 1) {
   ctx.fill();
   if (alpha !== 1) ctx.globalAlpha = prevAlpha;
 }
-function barRect(x, width, baseY, valueY, color) {
-  if (!finite2(x) || !finite2(width) || !finite2(baseY) || !finite2(valueY)) return null;
-  const y = Math.min(baseY, valueY);
-  const height = Math.abs(valueY - baseY);
-  if (width <= 0 || height <= 0) return null;
+function orientedRect(horizontal, catStart, catThick, base, value, color) {
+  if (!finite2(catStart) || !finite2(catThick) || !finite2(base) || !finite2(value)) return null;
+  const lo = Math.min(base, value);
+  const len = Math.abs(value - base);
+  if (catThick <= 0 || len <= 0) return null;
+  if (horizontal) {
+    return {
+      x: lo,
+      y: catStart,
+      width: len,
+      height: catThick,
+      color,
+      cornerSide: value > base ? "right" : value < base ? "left" : "none"
+    };
+  }
   return {
-    x,
-    y,
-    width,
-    height,
+    x: catStart,
+    y: lo,
+    width: catThick,
+    height: len,
     color,
-    cornerSide: cornerSideFor(baseY, valueY)
+    cornerSide: value < base ? "top" : value > base ? "bottom" : "none"
   };
 }
 function drawGroupedBars(ctx, model, radius, pen) {
   const readX = accessor(model.x.field);
   const readY = accessor(model.y.field ?? "");
+  const horizontal = model.orientation === "horizontal";
   const seriesCount = model.series.length;
   const bandWidth = model.x.bandwidth;
   const subWidth = seriesCount > 1 ? bandWidth / seriesCount : bandWidth;
   const gap = seriesCount > 1 && subWidth > 3 ? Math.min(1, subWidth * 0.15) : 0;
-  const barWidth = Math.max(0, subWidth - gap);
+  const barThick = Math.max(0, subWidth - gap);
   model.series.forEach((series, seriesIndex) => {
     ctx.fillStyle = series.color;
     for (const row of series.rows) {
@@ -7311,8 +7435,8 @@ function drawGroupedBars(ctx, model, radius, pen) {
       if (raw == null || raw === "" || !finite2(value)) continue;
       const center2 = model.x.pixel(readX(row));
       if (center2 == null) continue;
-      const left = center2 - bandWidth / 2 + seriesIndex * subWidth + gap / 2;
-      const rect = barRect(left, barWidth, model.y.baseline, model.y.pixel(value), series.color);
+      const catStart = center2 - bandWidth / 2 + seriesIndex * subWidth + gap / 2;
+      const rect = orientedRect(horizontal, catStart, barThick, model.y.baseline, model.y.pixel(value), series.color);
       if (rect) drawRect(ctx, rect, radius, pen, rowAlpha(model.emphasis, row));
     }
   });
@@ -7320,6 +7444,7 @@ function drawGroupedBars(ctx, model, radius, pen) {
 function drawStackedBars(ctx, model, radius, pen) {
   const readX = accessor(model.x.field);
   const readY = accessor(model.y.field ?? "");
+  const horizontal = model.orientation === "horizontal";
   const positiveTotals = /* @__PURE__ */ new Map();
   const negativeTotals = /* @__PURE__ */ new Map();
   const segments = [];
@@ -7339,7 +7464,7 @@ function drawStackedBars(ctx, model, radius, pen) {
       const base = totals.get(categoryKey2) ?? 0;
       const top = base + value;
       totals.set(categoryKey2, top);
-      const rect = barRect(center2 - bandWidth / 2, bandWidth, model.y.pixel(base), model.y.pixel(top), series.color);
+      const rect = orientedRect(horizontal, center2 - bandWidth / 2, bandWidth, model.y.pixel(base), model.y.pixel(top), series.color);
       if (!rect) continue;
       segments.push({ ...rect, stackEndKey, alpha: rowAlpha(model.emphasis, row) });
       roundedEnds.set(stackEndKey, segments.length - 1);
@@ -10034,7 +10159,7 @@ function buildTable(opts) {
     overflow: "auto",
     pointerEvents: "auto",
     boxSizing: "border-box",
-    border: `1px solid ${tokens.color.border}`,
+    border: `1px solid ${opts.sketch ? "transparent" : tokens.color.border}`,
     borderRadius: opts.sketch ? SKETCH_BORDER_RADIUS2 : `${tokens.radius.sm}px`,
     background: tokens.color.background
   });
@@ -10065,14 +10190,23 @@ function paintTableCanvas(opts) {
   const available = Math.max(0, rect.width - 2);
   const widths = computeFittedWidths(opts.columns, available);
   opts.widths = widths;
+  const pen = opts.sketch ? new RoughPen(ctx, opts.sketch) : null;
+  const w = Math.max(0, rect.width);
+  const h = Math.max(0, rect.height);
   ctx.save();
   ctx.beginPath();
-  roundedRect(ctx, rect.x, rect.y, Math.max(0, rect.width), Math.max(0, rect.height), tokens.radius.sm);
-  ctx.fillStyle = tokens.color.background;
-  ctx.fill();
-  ctx.lineWidth = 1;
-  ctx.strokeStyle = tokens.color.border;
-  ctx.stroke();
+  if (pen) {
+    ctx.rect(rect.x, rect.y, w, h);
+    ctx.fillStyle = tokens.color.background;
+    ctx.fill();
+  } else {
+    roundedRect(ctx, rect.x, rect.y, w, h, tokens.radius.sm);
+    ctx.fillStyle = tokens.color.background;
+    ctx.fill();
+    ctx.lineWidth = 1;
+    ctx.strokeStyle = tokens.color.border;
+    ctx.stroke();
+  }
   ctx.clip();
   const headerRows = normalizedHeaderRows(opts);
   const headerHeight = headerRows.length * metrics.headerHeight;
@@ -10084,17 +10218,18 @@ function paintTableCanvas(opts) {
   const clipped = visibleRows < opts.rowCount;
   const cueReserve = clipped && opts.clippedCue !== false && visibleRows > 0 ? metrics.rowHeight : 0;
   const rowsToDraw = Math.max(0, visibleRows - (cueReserve > 0 ? 1 : 0));
-  paintHeaderCanvas(opts, widths, headerRows, metrics);
+  paintHeaderCanvas(opts, widths, headerRows, metrics, pen);
   for (let rowIndex = 0; rowIndex < rowsToDraw; rowIndex += 1) {
-    paintBodyRowCanvas(opts, widths, rowIndex, bodyTop + rowIndex * metrics.rowHeight, metrics);
+    paintBodyRowCanvas(opts, widths, rowIndex, bodyTop + rowIndex * metrics.rowHeight, metrics, pen);
   }
   if (cueReserve > 0) {
     paintClippedCueCanvas(opts, bodyTop + rowsToDraw * metrics.rowHeight, metrics, opts.rowCount - rowsToDraw);
   }
   if (opts.footerRow) {
-    paintFooterCanvas(opts, widths, rect.y + rect.height - metrics.rowHeight, metrics);
+    paintFooterCanvas(opts, widths, rect.y + rect.height - metrics.rowHeight, metrics, pen);
   }
   ctx.restore();
+  if (pen) pen.rect(rect.x, rect.y, w, h, { stroke: tokens.color.border });
 }
 var FILL_EPS = 0.5;
 var cachedScrollbarWidth = null;
@@ -10187,14 +10322,14 @@ function makeHeaderCell(opts, title2, colIndex, align, rowIndex = 0) {
   th.textContent = title2;
   const isSorted = colIndex != null && opts.sortState?.col === colIndex;
   if (isSorted) th.setAttribute("aria-sort", opts.sortState?.dir === "desc" ? "descending" : "ascending");
-  setCellBaseStyles(th, opts.tokens, align ?? "left", opts.stickyHeader !== false, metrics.padding);
+  setCellBaseStyles(th, opts.tokens, align ?? "left", opts.stickyHeader !== false, metrics.padding, gridBorderColor(opts));
   setStyles(th, {
     top: `${rowIndex * metrics.headerHeight}px`,
     zIndex: "4",
     background: opts.tokens.color.surface,
     color: opts.tokens.color.text,
     fontWeight: String(opts.tokens.font.weight.bold),
-    borderBottom: `1px solid ${opts.tokens.color.border}`,
+    borderBottom: `1px solid ${gridBorderColor(opts)}`,
     userSelect: "none",
     height: `${metrics.headerHeight}px`
   });
@@ -10252,19 +10387,19 @@ function makeBodyRow(opts, rowIndex, rowHeight) {
     const td = document.createElement("td");
     const cell = opts.getCell(rowIndex, colIndex);
     const rowBg = rowBackground(opts, rowIndex, cls);
-    setCellBaseStyles(td, opts.tokens, column.align, false, metrics.padding);
+    setCellBaseStyles(td, opts.tokens, column.align, false, metrics.padding, gridBorderColor(opts));
     setStyles(td, {
       position: colIndex < (opts.rowHeaderSpan ?? 0) ? "sticky" : "relative",
       background: rowBg,
       fontWeight: cls === "normal" ? String(opts.tokens.font.weight.normal) : String(opts.tokens.font.weight.bold),
       color: opts.tokens.color.text,
-      borderBottom: `1px solid ${opts.tokens.color.border}`,
+      borderBottom: `1px solid ${gridBorderColor(opts)}`,
       height: rowHeight ? `${rowHeight}px` : `${metrics.rowHeight}px`,
       whiteSpace: column.wrap === true ? "normal" : "nowrap"
     });
     const indent = opts.cellIndent?.(rowIndex, colIndex) ?? 0;
     if (indent > 0) td.style.paddingLeft = `${metrics.paddingX + indent}px`;
-    applyConditionalFormatting(td, opts, column, colIndex, cell, rowBg);
+    applyConditionalFormatting(td, opts, column, colIndex, cell, rowBg, rowIndex);
     if (td.childNodes.length === 0) {
       td.textContent = formatDisplayValue(cell.value, column);
       applyNegativeStyle(td, cell.value, column);
@@ -10282,7 +10417,7 @@ function buildFooter(opts) {
   opts.columns.forEach((column, colIndex) => {
     const td = document.createElement("td");
     const cell = opts.footerRow?.cells[colIndex] ?? { value: null};
-    setCellBaseStyles(td, opts.tokens, column.align, false, metrics.padding);
+    setCellBaseStyles(td, opts.tokens, column.align, false, metrics.padding, gridBorderColor(opts));
     setStyles(td, {
       position: colIndex < (opts.rowHeaderSpan ?? 0) ? "sticky" : "sticky",
       bottom: "0",
@@ -10290,8 +10425,8 @@ function buildFooter(opts) {
       background: opts.tokens.color.surface,
       color: opts.tokens.color.text,
       fontWeight: String(opts.tokens.font.weight.bold),
-      borderTop: `1px solid ${opts.tokens.color.border}`,
-      borderBottom: `1px solid ${opts.tokens.color.border}`,
+      borderTop: `1px solid ${gridBorderColor(opts)}`,
+      borderBottom: `1px solid ${gridBorderColor(opts)}`,
       height: `${metrics.rowHeight}px`,
       whiteSpace: column.wrap === true ? "normal" : "nowrap"
     });
@@ -10317,7 +10452,7 @@ function makeSpacerRow(opts, height) {
   tr.appendChild(td);
   return tr;
 }
-function applyConditionalFormatting(td, opts, column, colIndex, cell, rowBg) {
+function applyConditionalFormatting(td, opts, column, colIndex, cell, rowBg, rowIndex = 0) {
   const cf = column.conditionalFormat;
   const raw = cell.raw;
   const domain = opts.conditionalDomains?.[colIndex] ?? null;
@@ -10362,13 +10497,27 @@ function applyConditionalFormatting(td, opts, column, colIndex, cell, rowBg) {
   }
   if (!domain) return;
   const ratio = normalized(numeric, domain);
-  const bar = document.createElement("div");
   const diverging2 = cf.negativeColor !== void 0 || cf.baseline === "zero";
   const positive = numeric >= 0;
   const barColor = alphaColor(positive ? cf.color ?? opts.tokens.color.accent : cf.negativeColor ?? opts.tokens.color.negative, 0.85);
   const baseline = diverging2 ? normalized(0, domain) : 0;
   const left = diverging2 ? Math.min(baseline, normalized(numeric, domain)) : 0;
   const width = diverging2 ? Math.abs(normalized(numeric, domain) - baseline) : ratio;
+  const text = document.createElement("span");
+  text.textContent = cf.showValue === false ? "" : formatDisplayValue(cell.value, column);
+  setStyles(text, overlayTextStyles(opts.tokens.color.text));
+  td.style.background = rowBg;
+  if (opts.sketch) {
+    const colWidth = opts.widths?.[colIndex] ?? column.width ?? defaultColumnWidth(column);
+    const rowHeight = densityMetrics(opts.density).rowHeight;
+    const seed = (opts.sketch.seed ^ Math.imul(rowIndex + 1, 374761393) ^ Math.imul(colIndex + 1, 668265263)) >>> 0;
+    const canvas = buildSketchDataBar(opts.sketch, barColor, colWidth, rowHeight, left, width, seed);
+    if (canvas) td.appendChild(canvas);
+    td.appendChild(text);
+    applyNegativeStyle(text, cell.value, column);
+    return;
+  }
+  const bar = document.createElement("div");
   setStyles(bar, {
     position: "absolute",
     left: `calc(${Math.round(left * 1e3) / 10}% + 4px)`,
@@ -10380,14 +10529,38 @@ function applyConditionalFormatting(td, opts, column, colIndex, cell, rowBg) {
     opacity: "0.9",
     pointerEvents: "none"
   });
-  const text = document.createElement("span");
-  text.textContent = cf.showValue === false ? "" : formatDisplayValue(cell.value, column);
-  setStyles(text, overlayTextStyles(opts.tokens.color.text));
-  td.style.background = rowBg;
   td.append(bar, text);
   applyNegativeStyle(text, cell.value, column);
 }
-function setCellBaseStyles(cell, tokens, align, sticky, padding = "6px 10px") {
+function buildSketchDataBar(sketch, color, colWidth, rowHeight, leftRatio, widthRatio, seed) {
+  const avail = Math.max(0, colWidth - 8);
+  const barW = widthRatio * avail;
+  const barH = Math.max(0, rowHeight - 10);
+  if (barW <= 0.5 || barH <= 0) return null;
+  const pad3 = 3;
+  const leftPx = 4 + leftRatio * avail;
+  const dpr = getDevicePixelRatio();
+  const canvas = document.createElement("canvas");
+  const cssW = barW + pad3 * 2;
+  const cssH = barH + pad3 * 2;
+  canvas.width = Math.max(1, Math.round(cssW * dpr));
+  canvas.height = Math.max(1, Math.round(cssH * dpr));
+  setStyles(canvas, {
+    position: "absolute",
+    left: `${leftPx - pad3}px`,
+    top: `${5 - pad3}px`,
+    width: `${cssW}px`,
+    height: `${cssH}px`,
+    pointerEvents: "none"
+  });
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return null;
+  ctx.scale(dpr, dpr);
+  const pen = new RoughPen(ctx, { ...sketch, seed });
+  pen.rect(pad3, pad3, barW, barH, { stroke: color, fill: color, fillAlpha: 0.9, strokeAlpha: 0.9 });
+  return canvas;
+}
+function setCellBaseStyles(cell, tokens, align, sticky, padding = "6px 10px", borderColor = tokens.color.border) {
   setStyles(cell, {
     boxSizing: "border-box",
     padding,
@@ -10395,11 +10568,14 @@ function setCellBaseStyles(cell, tokens, align, sticky, padding = "6px 10px") {
     whiteSpace: "nowrap",
     overflow: "hidden",
     textOverflow: "ellipsis",
-    borderRight: `1px solid ${tokens.color.border}`,
+    borderRight: `1px solid ${borderColor}`,
     verticalAlign: "middle"
   });
   if (sticky) cell.style.position = "sticky";
 }
+function gridBorderColor(opts) {
+  return opts.sketch ? "transparent" : opts.tokens.color.border;
+}
 function renderIconValue(td, icon, color, value, position) {
   const iconSpan = document.createElement("span");
   iconSpan.textContent = icon;
@@ -10453,7 +10629,7 @@ function normalizedHeaderRows(opts) {
     }))
   ];
 }
-function paintHeaderCanvas(opts, widths, rows, metrics) {
+function paintHeaderCanvas(opts, widths, rows, metrics, pen) {
   rows.forEach((row, rowIndex) => {
     let cursor = 0;
     for (const cell of row) {
@@ -10464,7 +10640,7 @@ function paintHeaderCanvas(opts, widths, rows, metrics) {
       const y = opts.rect.y + rowIndex * metrics.headerHeight;
       const w = sumWidths(widths.slice(start, start + colSpan));
       const h = metrics.headerHeight * rowSpan;
-      paintCellBox(opts.ctx, x, y, w, h, opts.tokens.color.surface, opts.tokens.color.border);
+      paintCellBox(opts.ctx, x, y, w, h, opts.tokens.color.surface, opts.tokens.color.border, false, pen);
       paintCellText(opts, {
         x,
         y,
@@ -10480,7 +10656,7 @@ function paintHeaderCanvas(opts, widths, rows, metrics) {
     }
   });
 }
-function paintBodyRowCanvas(opts, widths, rowIndex, y, metrics) {
+function paintBodyRowCanvas(opts, widths, rowIndex, y, metrics, pen) {
   const cls = opts.rowClass?.(rowIndex) ?? "normal";
   let x = opts.rect.x;
   for (let colIndex = 0; colIndex < opts.columns.length; colIndex += 1) {
@@ -10490,8 +10666,8 @@ function paintBodyRowCanvas(opts, widths, rowIndex, y, metrics) {
     const baseBg = canvasRowBackground(opts, rowIndex, cls);
     const conditional = resolveCanvasConditional(opts, column, colIndex, cell, baseBg);
     const bg = conditional.background ?? baseBg;
-    paintCellBox(opts.ctx, x, y, width, metrics.rowHeight, bg, opts.tokens.color.border);
-    if (conditional.bar) paintDataBar(opts, x, y, width, metrics.rowHeight, conditional.bar);
+    paintCellBox(opts.ctx, x, y, width, metrics.rowHeight, bg, opts.tokens.color.border, false, pen);
+    if (conditional.bar) paintDataBar(opts, x, y, width, metrics.rowHeight, conditional.bar, pen);
     const indent = opts.cellIndent?.(rowIndex, colIndex) ?? 0;
     const text = conditional.showValue === false ? "" : formatDisplayValue(cell.value, column);
     const color = negativeTextColor(cell.value, column, conditional.color ?? opts.tokens.color.text);
@@ -10513,13 +10689,13 @@ function paintBodyRowCanvas(opts, widths, rowIndex, y, metrics) {
     x += width;
   }
 }
-function paintFooterCanvas(opts, widths, y, metrics) {
+function paintFooterCanvas(opts, widths, y, metrics, pen) {
   let x = opts.rect.x;
   for (let colIndex = 0; colIndex < opts.columns.length; colIndex += 1) {
     const column = opts.columns[colIndex];
     const width = widths[colIndex] ?? 0;
     const cell = opts.footerRow?.cells[colIndex] ?? { value: null};
-    paintCellBox(opts.ctx, x, y, width, metrics.rowHeight, opts.tokens.color.surface, opts.tokens.color.border, true);
+    paintCellBox(opts.ctx, x, y, width, metrics.rowHeight, opts.tokens.color.surface, opts.tokens.color.border, true, pen);
     paintCellText(opts, {
       x,
       y,
@@ -10548,10 +10724,25 @@ function paintClippedCueCanvas(opts, y, metrics, remaining) {
     paddingX: metrics.paddingX
   });
 }
-function paintCellBox(ctx, x, y, width, height, background, border, topBorder = false) {
+function paintCellBox(ctx, x, y, width, height, background, border, topBorder = false, pen) {
   ctx.save();
   ctx.fillStyle = background;
   ctx.fillRect(x, y, width, height);
+  if (pen) {
+    pen.polyline(
+      [
+        { x: x + width, y },
+        { x: x + width, y: y + height },
+        { x, y: y + height }
+      ],
+      { stroke: border, strokeWidth: 1 }
+    );
+    if (topBorder) {
+      pen.polyline([{ x, y }, { x: x + width, y }], { stroke: border, strokeWidth: 1 });
+    }
+    ctx.restore();
+    return;
+  }
   ctx.strokeStyle = border;
   ctx.lineWidth = 1;
   ctx.beginPath();
@@ -10662,9 +10853,18 @@ function resolveCanvasConditional(opts, column, colIndex, cell, rowBg) {
   const color = alphaColor(positive ? cf.color ?? opts.tokens.color.accent : cf.negativeColor ?? opts.tokens.color.negative, 0.85);
   return { background: rowBg, showValue: cf.showValue !== false, bar: { leftRatio, widthRatio, color } };
 }
-function paintDataBar(opts, x, y, width, height, bar) {
+function paintDataBar(opts, x, y, width, height, bar, pen) {
   const left = x + 4 + bar.leftRatio * Math.max(0, width - 8);
   const barW = bar.widthRatio * Math.max(0, width - 8);
+  if (pen) {
+    pen.rect(left, y + 5, barW, Math.max(0, height - 10), {
+      stroke: bar.color,
+      fill: bar.color,
+      fillAlpha: 0.9,
+      strokeAlpha: 0.9
+    });
+    return;
+  }
   opts.ctx.save();
   opts.ctx.globalAlpha *= 0.9;
   opts.ctx.beginPath();
@@ -10673,6 +10873,72 @@ function paintDataBar(opts, x, y, width, height, bar) {
   opts.ctx.fill();
   opts.ctx.restore();
 }
+function createSketchGridCanvas(rect) {
+  const dpr = getDevicePixelRatio();
+  const w = Math.max(0, rect.width);
+  const h = Math.max(0, rect.height);
+  const canvas = document.createElement("canvas");
+  canvas.width = Math.max(1, Math.round(w * dpr));
+  canvas.height = Math.max(1, Math.round(h * dpr));
+  setStyles(canvas, {
+    position: "absolute",
+    left: `${rect.x}px`,
+    top: `${rect.y}px`,
+    width: `${w}px`,
+    height: `${h}px`,
+    pointerEvents: "none"
+  });
+  return { canvas, ctx: canvas.getContext("2d"), dpr };
+}
+function paintSketchGridOverlay(ctx, o) {
+  const w = Math.max(0, o.rect.width);
+  const h = Math.max(0, o.rect.height);
+  ctx.save();
+  ctx.setTransform(o.dpr, 0, 0, o.dpr, 0, 0);
+  ctx.clearRect(0, 0, w, h);
+  const metrics = densityMetrics(o.density);
+  const headerHeight = o.headerRowCount * metrics.headerHeight;
+  const footerHeight = o.hasFooter ? metrics.rowHeight : 0;
+  const bodyTop = headerHeight;
+  const bodyBottom = Math.max(bodyTop, h - footerHeight);
+  const border = o.tokens.color.border;
+  const base = o.sketch.seed >>> 0;
+  const stroke = (x1, y1, x2, y2, seed) => {
+    const pen = new RoughPen(ctx, { ...o.sketch, seed: seed >>> 0 });
+    pen.polyline(
+      [
+        { x: x1, y: y1 },
+        { x: x2, y: y2 }
+      ],
+      { stroke: border, strokeWidth: 1 }
+    );
+  };
+  let cursor = 0;
+  for (let i = 0; i < o.columns.length - 1; i += 1) {
+    cursor += o.widths[i] ?? 0;
+    const pinned = i < (o.rowHeaderSpan ?? 0);
+    const x = pinned ? cursor : cursor - o.scrollLeft;
+    if (x <= 0 || x >= w) continue;
+    stroke(x, 0, x, h, base ^ Math.imul(i + 1, 2246822519));
+  }
+  ctx.save();
+  ctx.beginPath();
+  ctx.rect(0, bodyTop, w, Math.max(0, bodyBottom - bodyTop));
+  ctx.clip();
+  const firstRow = Math.max(0, Math.floor(o.scrollTop / metrics.rowHeight) - 1);
+  for (let r = firstRow; r < o.rowCount; r += 1) {
+    const y = bodyTop + (r + 1) * metrics.rowHeight - o.scrollTop;
+    if (y <= bodyTop) continue;
+    if (y >= bodyBottom) break;
+    stroke(0, y, w, y, base ^ Math.imul(r + 1, 3266489917));
+  }
+  ctx.restore();
+  if (headerHeight > 0 && headerHeight < h) stroke(0, headerHeight, w, headerHeight, (base ^ 2654435769) >>> 0);
+  if (footerHeight > 0 && bodyBottom > bodyTop) stroke(0, bodyBottom, w, bodyBottom, (base ^ 2246822507) >>> 0);
+  const framePen = new RoughPen(ctx, { ...o.sketch, seed: base });
+  framePen.rect(1.5, 1.5, Math.max(0, w - 3), Math.max(0, h - 3), { stroke: border, strokeWidth: 1 });
+  ctx.restore();
+}
 function canvasRowBackground(opts, rowIndex, cls) {
   if (cls !== "normal") return opts.tokens.color.surface;
   if (opts.striped === true && rowIndex % 2 === 1) return subtleStripe(opts.tokens);
@@ -10775,7 +11041,7 @@ function drawTableCanvas(surface, spec, tokens, size) {
     headerRows: buildTableHeaderRows(columns),
     footerRow: buildTotalsRow(sortedRows, columns, read, spec),
     density: spec.density,
-    sketch: resolveSketch(spec) != null
+    sketch: resolveSketch(spec)
   });
 }
 function renderTable(surface, spec, tokens, size) {
@@ -10783,7 +11049,7 @@ function renderTable(surface, spec, tokens, size) {
   const data = spec.data ?? [];
   const columns = resolveColumns(data, spec);
   const read = columns.map((column) => accessor(column.key));
-  const sketch = resolveSketch(spec) != null;
+  const sketch = resolveSketch(spec);
   let sortState = initialSortState(spec, columns);
   let sortedRows = sortRows(data, columns, read, sortState);
   const domains = columns.map(
@@ -10794,6 +11060,9 @@ function renderTable(surface, spec, tokens, size) {
   );
   const host = document.createElement("div");
   surface.overlay.appendChild(host);
+  const headerRowCount = buildTableHeaderRows(columns)?.length ?? 1;
+  const overlay = sketch ? createSketchGridCanvas(rect) : null;
+  if (overlay) surface.overlay.appendChild(overlay.canvas);
   let frame = 0;
   const renderWindow = () => {
     const scrollTop = host.scrollTop || 0;
@@ -10801,7 +11070,8 @@ function renderTable(surface, spec, tokens, size) {
     const start = Math.max(0, Math.floor(scrollTop / rowHeight) - BUFFER_ROWS);
     const visible = Math.ceil(Math.max(rect.height, host.clientHeight || rect.height) / rowHeight) + BUFFER_ROWS * 2;
     const end = Math.min(sortedRows.length, start + visible);
-    buildTable({
+    const footerRow = buildTotalsRow(sortedRows, columns, read, spec);
+    const buildOpts = {
       container: host,
       tokens,
       rect,
@@ -10822,11 +11092,28 @@ function renderTable(surface, spec, tokens, size) {
       sortState: sortState ?? void 0,
       conditionalDomains: domains,
       headerRows: buildTableHeaderRows(columns),
-      footerRow: buildTotalsRow(sortedRows, columns, read, spec),
+      footerRow,
       density: spec.density,
       visibleRange: { start, end, rowHeight },
       sketch
-    });
+    };
+    buildTable(buildOpts);
+    if (sketch && overlay?.ctx) {
+      paintSketchGridOverlay(overlay.ctx, {
+        sketch,
+        tokens,
+        rect,
+        dpr: overlay.dpr,
+        columns,
+        widths: buildOpts.widths ?? [],
+        rowCount: sortedRows.length,
+        headerRowCount,
+        hasFooter: Boolean(footerRow),
+        density: spec.density,
+        scrollLeft: host.scrollLeft || 0,
+        scrollTop
+      });
+    }
   };
   host.addEventListener("scroll", () => {
     if (frame !== 0) return;
@@ -10983,15 +11270,16 @@ function drawMatrixCanvas(surface, spec, tokens, size) {
     conditionalDomains: prepared.bodyDomains,
     headerRows: prepared.headerRows,
     density: spec.density,
-    sketch: resolveSketch(spec) != null
+    sketch: resolveSketch(spec)
   });
 }
 function renderMatrix(surface, spec, tokens, size) {
   const rect = drawTitleBlock(surface, tokens, size, spec.title);
   const prepared = prepareMatrix(spec);
+  const sketch = resolveSketch(spec);
   const host = document.createElement("div");
   surface.overlay.appendChild(host);
-  buildTable({
+  const buildOpts = {
     container: host,
     tokens,
     rect,
@@ -11018,8 +11306,45 @@ function renderMatrix(surface, spec, tokens, size) {
     conditionalDomains: prepared.bodyDomains,
     headerRows: prepared.headerRows,
     density: spec.density,
-    sketch: resolveSketch(spec) != null
-  });
+    sketch
+  };
+  buildTable(buildOpts);
+  if (sketch) {
+    const overlay = createSketchGridCanvas(rect);
+    if (overlay.ctx) {
+      surface.overlay.appendChild(overlay.canvas);
+      const ctx = overlay.ctx;
+      const draw = () => {
+        paintSketchGridOverlay(ctx, {
+          sketch,
+          tokens,
+          rect,
+          dpr: overlay.dpr,
+          columns: prepared.columns,
+          widths: buildOpts.widths ?? [],
+          rowCount: prepared.rows.length,
+          headerRowCount: prepared.headerRows.length,
+          hasFooter: false,
+          rowHeaderSpan: 1,
+          density: spec.density,
+          scrollLeft: host.scrollLeft || 0,
+          scrollTop: host.scrollTop || 0
+        });
+      };
+      draw();
+      let frame = 0;
+      host.addEventListener("scroll", () => {
+        if (frame !== 0) return;
+        frame = typeof requestAnimationFrame === "function" ? requestAnimationFrame(() => {
+          frame = 0;
+          draw();
+        }) : window.setTimeout(() => {
+          frame = 0;
+          draw();
+        }, 16);
+      });
+    }
+  }
 }
 function prepareMatrix(spec) {
   const data = spec.data ?? [];
@@ -12454,6 +12779,7 @@ function indexInteraction(model) {
   const xFormat = model.spec.encoding.x?.format;
   const yFormat = model.spec.encoding.y?.format;
   const band = x.kind === "band";
+  const horizontal = model.orientation === "horizontal";
   const showDots = !model.stacked && !band;
   const stopByKey = /* @__PURE__ */ new Map();
   const lookups = [];
@@ -12488,7 +12814,7 @@ function indexInteraction(model) {
   };
   const hitTest = (px, py) => {
     if (!inside(plot, px, py, 6)) return null;
-    const best = nearestStop(px);
+    const best = nearestStop(horizontal ? py : px);
     const rows = [];
     const dots = [];
     let nearestDy = Infinity;
@@ -12516,15 +12842,19 @@ function indexInteraction(model) {
     const anchorY = showDots && nearestIdx >= 0 ? dots[nearestIdx].py : py;
     return {
       key: best.key,
-      anchorX: best.px,
-      anchorY,
+      anchorX: horizontal ? px : best.px,
+      anchorY: horizontal ? best.px : anchorY,
       content: { title: formatValue(best.value, xFormat), rows },
       draw: (ctx) => {
         ctx.save();
         if (band) {
           const half = x.bandwidth / 2;
           ctx.fillStyle = withAlpha(model.tokens.color.text, 0.06);
-          ctx.fillRect(best.px - half, plot.y, x.bandwidth, plot.height);
+          if (horizontal) {
+            ctx.fillRect(plot.x, best.px - half, plot.width, x.bandwidth);
+          } else {
+            ctx.fillRect(best.px - half, plot.y, x.bandwidth, plot.height);
+          }
         } else {
           ctx.strokeStyle = withAlpha(model.tokens.color.text, 0.28);
           ctx.lineWidth = 1;
@@ -12553,7 +12883,7 @@ function indexInteraction(model) {
   };
   const pick = (px, py) => {
     if (!inside(plot, px, py, 6)) return null;
-    const best = nearestStop(px);
+    const best = nearestStop(horizontal ? py : px);
     return { kind: "point", fields: [xField], tuples: [[best.value]] };
   };
   return { region: plot, hitTest, pick };
@@ -12920,6 +13250,8 @@ function buildComboModel(spec, tokens, opts) {
       series: [{ key: "", label: name, color, value: name, rows: data }],
       seriesField: void 0,
       stacked: false,
+      orientation: "vertical",
+      project: (c, v) => ({ x: c, y: v }),
       xTicks,
       yTicks: sideTicks,
       colorOf: () => color,
@@ -12947,6 +13279,8 @@ function buildComboModel(spec, tokens, opts) {
     series: [],
     seriesField: void 0,
     stacked: false,
+    orientation: "vertical",
+    project: (c, v) => ({ x: c, y: v }),
     xTicks,
     yTicks: leftTicks,
     colorOf: () => "",
@@ -13184,6 +13518,8 @@ function buildHistogramModel(spec, tokens, opts) {
     series: [],
     seriesField: void 0,
     stacked: false,
+    orientation: "vertical",
+    project: (c, v) => ({ x: c, y: v }),
     xTicks,
     yTicks,
     colorOf: () => color,
@@ -14387,6 +14723,8 @@ function buildWaterfallModel(spec, tokens, opts) {
     series: [],
     seriesField: void 0,
     stacked: false,
+    orientation: "vertical",
+    project: (c, v) => ({ x: c, y: v }),
     xTicks,
     yTicks,
     colorOf: () => incColor,
@@ -14648,6 +14986,8 @@ function buildSlopeModel(spec, tokens, opts) {
     series: [],
     seriesField: void 0,
     stacked: false,
+    orientation: "vertical",
+    project: (c, v) => ({ x: c, y: v }),
     xTicks,
     yTicks,
     colorOf: () => tokens.color.text,
@@ -15122,9 +15462,14 @@ function toPixel(model, axis, value) {
   return px != null && Number.isFinite(px) ? px : void 0;
 }
 function pointPixels(model, ann) {
-  const px = toPixel(model, "x", ann.x);
-  const py = toPixel(model, "y", ann.y);
-  return px === void 0 || py === void 0 ? void 0 : { px, py };
+  const cat = toPixel(model, "x", ann.x);
+  const val = toPixel(model, "y", ann.y);
+  if (cat === void 0 || val === void 0) return void 0;
+  const { x, y } = model.project(cat, val);
+  return { px: x, py: y };
+}
+function drawsHorizontalRule(model, axis) {
+  return model.orientation === "horizontal" ? axis === "x" : axis === "y";
 }
 function anchorPixel(model, ann, axis, kind) {
   if (kind === "line") return toPixel(model, axis, ann.value);
@@ -15173,6 +15518,7 @@ function drawAnnotations(surface, model) {
     }
     const axis = ann.axis === "x" ? "x" : "y";
     const color = ann.color ?? tokens.color.textMuted;
+    const ruleHorizontal = drawsHorizontalRule(model, axis);
     if (kindOf(ann) === "line") {
       const p = toPixel(model, axis, ann.value);
       if (p === void 0) continue;
@@ -15181,7 +15527,7 @@ function drawAnnotations(surface, model) {
       ctx.lineWidth = ann.strokeWidth ?? 1.5;
       ctx.setLineDash(ann.strokeDash ?? DEFAULT_DASH);
       ctx.beginPath();
-      if (axis === "y") {
+      if (ruleHorizontal) {
         const y = crisp(p);
         ctx.moveTo(plot.x, y);
         ctx.lineTo(x1, y);
@@ -15202,7 +15548,7 @@ function drawAnnotations(surface, model) {
     ctx.save();
     ctx.globalAlpha = ann.fillOpacity ?? DEFAULT_FILL_OPACITY;
     ctx.fillStyle = color;
-    if (axis === "y") ctx.fillRect(plot.x, lo, plot.width, hi - lo);
+    if (ruleHorizontal) ctx.fillRect(plot.x, lo, plot.width, hi - lo);
     else ctx.fillRect(lo, plot.y, hi - lo, plot.height);
     ctx.restore();
     ctx.save();
@@ -15211,7 +15557,7 @@ function drawAnnotations(surface, model) {
     ctx.lineWidth = 1;
     ctx.setLineDash(ann.strokeDash ?? [4, 4]);
     ctx.beginPath();
-    if (axis === "y") {
+    if (ruleHorizontal) {
       ctx.moveTo(plot.x, crisp(lo));
       ctx.lineTo(x1, crisp(lo));
       ctx.moveTo(plot.x, crisp(hi));
@@ -15227,10 +15573,10 @@ function drawAnnotations(surface, model) {
   }
   ctx.restore();
 }
-function labelBox(model, axis, pos, p) {
+function labelBox(model, horizontalRule, pos, p) {
   const { plot } = model;
   const inset = 6;
-  if (axis === "y") {
+  if (horizontalRule) {
     const top = p - 3;
     const transform3 = "translateY(-100%)";
     if (pos === "start") return { left: plot.x + inset, top, width: plot.width - inset, align: "left", transform: transform3 };
@@ -15266,7 +15612,7 @@ function drawAnnotationLabels(surface, model) {
       const axis = ann.axis === "x" ? "x" : "y";
       const p = anchorPixel(model, ann, axis, kindOf(ann));
       if (p === void 0) continue;
-      box = labelBox(model, axis, ann.labelPosition ?? "end", p);
+      box = labelBox(model, drawsHorizontalRule(model, axis), ann.labelPosition ?? "end", p);
     }
     const color = ann.color ?? tokens.color.text;
     const pill = { background: withAlpha4(tokens.color.background, 0.72), radius: 3, padX: 3, padY: 1 };
@@ -16087,7 +16433,8 @@ function checkClippedMarks(model, spec, add) {
   const pHi = model.y.pixel(hi);
   const pLo = model.y.pixel(lo);
   const EPS = 0.75;
-  if (pHi < top - EPS || pLo > bottom + EPS) {
+  const clipped = model.orientation === "horizontal" ? pLo < model.plot.x - EPS || pHi > model.plot.x + model.plot.width + EPS : pHi < top - EPS || pLo > bottom + EPS;
+  if (clipped) {
     add({
       code: "marks-clipped",
       severity: "warning",
@@ -16103,7 +16450,8 @@ function checkClippedMarks(model, spec, add) {
 function checkAxisLabelOverlap(model, spec, tokens, add) {
   const ticks2 = model.xTicks;
   if (ticks2.length < 2) return;
-  if (model.frame.xLabelAngle > 0) return;
+  const horizontal = model.orientation === "horizontal";
+  if (!horizontal && model.frame.xLabelAngle > 0) return;
   const font = fontString(tokens.font.size.small, tokens.font.family, tokens.font.weight.normal);
   const GAP3 = 4;
   let collisions = 0;
@@ -16111,7 +16459,7 @@ function checkAxisLabelOverlap(model, spec, tokens, add) {
     const prev = ticks2[i - 1];
     const cur = ticks2[i];
     const spacing = Math.abs(cur.pos - prev.pos);
-    const half = (measureText(prev.label, font).width + measureText(cur.label, font).width) / 2;
+    const half = horizontal ? tokens.font.size.small : (measureText(prev.label, font).width + measureText(cur.label, font).width) / 2;
     if (half + GAP3 > spacing) collisions++;
   }
   if (collisions > 0) {