graphein 0.4.0 → 0.6.0

package/dist/index.js

@@ -456,6 +456,10 @@ function logScale(opts) {
     map(value) {
       const [d0, d1] = transformedDomain;
       const [r0, r1] = range;
+      if (!Number.isFinite(value) || value * sign2 <= 0) return NaN;
+      if (d0 === d1) {
+        return clamp11 ? clampValue2(r0, Math.min(r0, r1), Math.max(r0, r1)) : r0;
+      }
       const transformed = transform(value, sign2, base);
       const mapped = r0 + (transformed - d0) / (d1 - d0) * (r1 - r0);
       return clamp11 ? clampValue2(mapped, Math.min(r0, r1), Math.max(r0, r1)) : mapped;
@@ -463,6 +467,7 @@ function logScale(opts) {
     invert(pixel) {
       const [d0, d1] = transformedDomain;
       const [r0, r1] = range;
+      if (d0 === d1) return domain[0];
       const input = clamp11 ? clampValue2(pixel, Math.min(r0, r1), Math.max(r0, r1)) : pixel;
       return untransform(d0 + (input - r0) / (r1 - r0) * (d1 - d0), sign2, base);
     },
@@ -1938,6 +1943,10 @@ var SI_SYMBOLS = [
 function groupThousands(intDigits) {
   return intDigits.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
 }
+function clampDigits(value, min, max) {
+  if (!Number.isFinite(value)) return min;
+  return Math.min(max, Math.max(min, Math.trunc(value)));
+}
 function applyGroup(numStr, group) {
   if (!group) return numStr;
   const neg = numStr.startsWith("-");
@@ -1957,11 +1966,11 @@ function formatSI(value, precision) {
     if (abs >= factor) {
       const scaled = value / factor;
       const digits2 = precision ?? (Math.abs(scaled) >= 100 ? 0 : Math.abs(scaled) >= 10 ? 1 : 2);
-      return trimZeros(scaled.toFixed(digits2)) + symbol;
+      return trimZeros(scaled.toFixed(clampDigits(digits2, 0, 100))) + symbol;
     }
   }
   const digits = precision ?? (abs >= 100 || abs === 0 ? 0 : abs >= 1 ? 1 : 2);
-  return trimZeros(value.toFixed(digits));
+  return trimZeros(value.toFixed(clampDigits(digits, 0, 100)));
 }
 function formatNumber2(value, spec) {
   if (value == null || Number.isNaN(value)) return "";
@@ -1971,10 +1980,10 @@ function formatNumber2(value, spec) {
   let body;
   switch (type) {
     case "f":
-      body = applyGroup(value.toFixed(precision ?? 2), group);
+      body = applyGroup(value.toFixed(clampDigits(precision ?? 2, 0, 100)), group);
       break;
     case "%":
-      body = applyGroup((value * 100).toFixed(precision ?? 0), group) + "%";
+      body = applyGroup((value * 100).toFixed(clampDigits(precision ?? 0, 0, 100)), group) + "%";
       break;
     case "s":
       body = formatSI(value, precision);
@@ -1983,17 +1992,17 @@ function formatNumber2(value, spec) {
       body = applyGroup(Math.round(value).toString(), group);
       break;
     case "e":
-      body = value.toExponential(precision ?? 2);
+      body = value.toExponential(clampDigits(precision ?? 2, 0, 100));
       break;
     case "g":
-      body = trimZeros(Number(value.toPrecision(precision ?? 6)).toString());
+      body = trimZeros(Number(value.toPrecision(clampDigits(precision ?? 6, 1, 100))).toString());
       body = applyGroup(body, group);
       break;
     default: {
       if (Number.isInteger(value)) {
         body = applyGroup(value.toString(), group);
       } else {
-        const digits = precision ?? 6;
+        const digits = clampDigits(precision ?? 6, 0, 100);
         body = applyGroup(trimZeros(value.toFixed(digits)), group);
       }
     }
@@ -2122,7 +2131,13 @@ function toNumber(value) {
   }
   return NaN;
 }
+var ISO_YEAR_RE = /^(\d{4})$/;
 var ISO_DATE_RE = /^(\d{4})-(\d{2})(?:-(\d{2}))?$/;
+var ISO_DATETIME_RE = /^(\d{4})-(\d{2})-(\d{2})[T ]\d{2}:\d{2}(?::\d{2}(?:\.\d{1,3})?)?(?:Z|[+-]\d{2}:?\d{2})?$/;
+function isLocalCalendarDate(year, month, day) {
+  const d = new Date(year, month - 1, day);
+  return d.getFullYear() === year && d.getMonth() === month - 1 && d.getDate() === day;
+}
 function toDate(value) {
   if (value instanceof Date) return Number.isNaN(value.getTime()) ? null : value;
   if (typeof value === "number") {
@@ -2130,8 +2145,20 @@ function toDate(value) {
     return Number.isNaN(d.getTime()) ? null : d;
   }
   if (typeof value === "string") {
+    const y = ISO_YEAR_RE.exec(value);
+    if (y) {
+      const d = new Date(Date.parse(value));
+      return d.getUTCFullYear() === +y[1] && d.getUTCMonth() === 0 && d.getUTCDate() === 1 ? d : null;
+    }
     const m = ISO_DATE_RE.exec(value);
-    if (m) return new Date(+m[1], +m[2] - 1, m[3] ? +m[3] : 1);
+    if (m) {
+      const year = +m[1];
+      const month = +m[2];
+      const day = m[3] ? +m[3] : 1;
+      return isLocalCalendarDate(year, month, day) ? new Date(year, month - 1, day) : null;
+    }
+    const dt = ISO_DATETIME_RE.exec(value);
+    if (dt && !isLocalCalendarDate(+dt[1], +dt[2], +dt[3])) return null;
     const ms = Date.parse(value);
     return Number.isNaN(ms) ? null : new Date(ms);
   }
@@ -2527,7 +2554,7 @@ function coerceFinite(value) {
   if (value === null || value === void 0) {
     return null;
   }
-  const numberValue = Number(value);
+  const numberValue = toNumber(value);
   return Number.isFinite(numberValue) ? numberValue : null;
 }
 function makePathKey(path) {
@@ -2635,6 +2662,9 @@ function analyzeCategory(rows, categoryField, measureField) {
   });
   return { count: order.length, total, top, bottom, topShare: total > 0 ? top.value / total : 0 };
 }
+function xLabel(x) {
+  return x instanceof Date ? prettyDate(x) : toKey(x);
+}
 function analyzeSeriesFamily(rows, xField, yField, seriesField) {
   const readX = accessor(xField);
   const readY = accessor(yField);
@@ -2653,7 +2683,7 @@ function analyzeSeriesFamily(rows, xField, yField, seriesField) {
     }
     const x = readX(d);
     g.values.push(y);
-    g.labels.push(toKey(x));
+    g.labels.push(xLabel(x));
     g.raws.push(x);
   }
   const out = [];
@@ -3558,7 +3588,7 @@ function computeBins(values, opts = {}) {
     [min, max] = opts.extent;
   } else {
     for (const v of values) {
-      if (Number.isNaN(v)) continue;
+      if (!Number.isFinite(v)) continue;
       if (v < min) min = v;
       if (v > max) max = v;
     }
@@ -3582,7 +3612,7 @@ function applyBin(transform2, data) {
   const finite4 = [];
   for (const row of data) {
     const n = toNumber(read(row));
-    if (!Number.isNaN(n)) finite4.push(n);
+    if (Number.isFinite(n)) finite4.push(n);
   }
   const layout2 = computeBins(finite4, {
     maxbins: transform2.maxbins,
@@ -3596,7 +3626,7 @@ function applyBin(transform2, data) {
     const out = { ...row };
     const v = toNumber(read(row));
     const outside = transform2.extent != null && (v < transform2.extent[0] || v > transform2.extent[1]);
-    if (layout2 == null || Number.isNaN(v) || outside) {
+    if (layout2 == null || !Number.isFinite(v) || outside) {
       out[startField] = null;
       if (endField) out[endField] = null;
       return out;
@@ -4643,6 +4673,26 @@ function validateSpec(spec) {
       }
     }
   }
+  if (isObject3(spec.encoding)) {
+    for (const ch of ["x", "y"]) {
+      const channel = spec.encoding[ch];
+      if (!isObject3(channel) || !isObject3(channel.scale)) continue;
+      const scale = channel.scale;
+      if (scale.type !== "log") continue;
+      const domain = scale.domain;
+      if (Array.isArray(domain) && domain.some((v) => typeof v === "number" && v <= 0)) {
+        warn(
+          `encoding.${ch}.scale.domain`,
+          'A "log" scale needs a strictly positive domain; values <= 0 have no logarithm. The domain will be clamped to the positive data range.',
+          {
+            rule: "log-scale-nonpositive-domain",
+            severity: "warning",
+            fix: [{ op: "remove", path: toPointer(`encoding.${ch}.scale.domain`) }]
+          }
+        );
+      }
+    }
+  }
   if (type === "kpi") {
     const value = spec.value;
     if (value === void 0) {
@@ -6274,6 +6324,21 @@ function stackedYExtent(rows, xField, yField) {
   for (const v of neg.values()) if (v < min) min = v;
   return [min, max];
 }
+function positiveLogDomain(requested, data, field, base) {
+  let lo = requested[0];
+  let hi = requested[1];
+  if (!(lo > 0) || !(hi > 0)) {
+    const read = accessor(field);
+    const positives = data.map((d) => toNumber(read(d))).filter((v) => Number.isFinite(v) && v > 0);
+    const pmin = positives.length ? Math.min(...positives) : 1;
+    const pmax = positives.length ? Math.max(...positives) : base;
+    if (!(lo > 0)) lo = pmin;
+    if (!(hi > 0)) hi = pmax;
+  }
+  if (hi < lo) [lo, hi] = [hi, lo];
+  if (lo === hi) hi = lo * base;
+  return [lo, hi];
+}
 function resolveSeriesField(spec) {
   const enc = spec.encoding;
   if (enc.series?.field) return enc.series.field;
@@ -6335,7 +6400,8 @@ function buildCartesianModel(spec, tokens, opts) {
   let categories;
   let xDomainNum = null;
   if (xKind === "band" || xKind === "point") {
-    categories = opts.shared?.categories ?? uniqueStrings(data, xField);
+    const cfgDomain = enc.x.scale?.domain;
+    categories = opts.shared?.categories ?? (Array.isArray(cfgDomain) && typeof cfgDomain[0] === "string" ? cfgDomain : uniqueStrings(data, xField));
   } else if (xKind === "time") {
     if (opts.shared?.xDomain) {
       xDomainNum = opts.shared.xDomain;
@@ -6348,12 +6414,23 @@ function buildCartesianModel(spec, tokens, opts) {
   } else {
     xDomainNum = extent(data, xField) ?? [0, 1];
     const xScaleCfg = enc.x.scale;
-    if (xScaleCfg?.domain && typeof xScaleCfg.domain[0] === "number") {
+    if (xScaleCfg?.type === "log") {
+      xDomainNum = positiveLogDomain(
+        xScaleCfg.domain && typeof xScaleCfg.domain[0] === "number" ? [xScaleCfg.domain[0], xScaleCfg.domain[1]] : xDomainNum,
+        data,
+        xField,
+        xScaleCfg.base ?? 10
+      );
+    } else if (xScaleCfg?.domain && typeof xScaleCfg.domain[0] === "number") {
       xDomainNum = [xScaleCfg.domain[0], xScaleCfg.domain[1]];
     } else if (xScaleCfg?.nice !== false) {
       xDomainNum = niceDomain(xDomainNum[0], xDomainNum[1], 10);
     }
   }
+  const yScaleCfg = enc.y.scale;
+  const yIsLog = yScaleCfg?.type === "log";
+  const yBase = yScaleCfg?.base ?? 10;
+  const yClamp = yScaleCfg?.clamp === true;
   const sharedY = opts.shared?.yDomain;
   let yDomain;
   if (sharedY) {
@@ -6364,24 +6441,39 @@ function buildCartesianModel(spec, tokens, opts) {
     const ext = extent(data, yField) ?? [0, 1];
     yDomain = [ext[0], ext[1]];
   }
-  if (wantsZeroBaseline(spec) && !sharedY) {
+  const forceZero = yIsLog ? false : yScaleCfg?.zero ?? wantsZeroBaseline(spec);
+  if (forceZero && !sharedY) {
     yDomain = [Math.min(0, yDomain[0]), Math.max(0, yDomain[1])];
   }
-  const yScaleCfg = enc.y.scale;
   const xAxisCfg = axisCfg(spec, "x");
   const yAxisCfg = axisCfg(spec, "y");
   const yTickCount = yAxisCfg.ticks ?? 6;
+  const yExplicitTicks = yAxisCfg.tickValues && yAxisCfg.tickValues.length ? yAxisCfg.tickValues.slice() : null;
   const yExplicit = yScaleCfg?.domain && typeof yScaleCfg.domain[0] === "number" || !!sharedY;
   let yTickValues;
-  if (yExplicit) {
+  if (yIsLog) {
+    if (yScaleCfg?.domain && typeof yScaleCfg.domain[0] === "number") {
+      yDomain = positiveLogDomain([yScaleCfg.domain[0], yScaleCfg.domain[1]], data, yField, yBase);
+    } else if (!sharedY) {
+      yDomain = positiveLogDomain(yDomain, data, yField, yBase);
+    }
+    const lo = Math.min(yDomain[0], yDomain[1]);
+    const hi = Math.max(yDomain[0], yDomain[1]);
+    yTickValues = (yExplicitTicks ?? logScale({ domain: yDomain, range: [0, 1], base: yBase }).ticks()).filter(
+      (v) => v > 0 && v >= lo - 1e-9 && v <= hi + 1e-9
+    );
+  } else if (yExplicit) {
     if (yScaleCfg?.domain && typeof yScaleCfg.domain[0] === "number") {
       yDomain = [yScaleCfg.domain[0], yScaleCfg.domain[1]];
     }
     const lo = Math.min(yDomain[0], yDomain[1]);
     const hi = Math.max(yDomain[0], yDomain[1]);
-    yTickValues = numericTickValues(yDomain[0], yDomain[1], yTickCount).filter(
+    yTickValues = (yExplicitTicks ?? numericTickValues(yDomain[0], yDomain[1], yTickCount)).filter(
       (v) => v >= lo - 1e-9 && v <= hi + 1e-9
     );
+  } else if (yExplicitTicks) {
+    yTickValues = yExplicitTicks;
+    yDomain = [Math.min(yDomain[0], ...yExplicitTicks), Math.max(yDomain[1], ...yExplicitTicks)];
   } else if (yScaleCfg?.nice !== false) {
     yTickValues = numericTickValues(yDomain[0], yDomain[1], yTickCount);
     if (yTickValues.length >= 2) {
@@ -6409,7 +6501,19 @@ function buildCartesianModel(spec, tokens, opts) {
     xStepMs = xt.length > 1 ? xt[1] - xt[0] : 0;
     xLabels = xt.map((v) => enc.x.format ? formatValue(v, enc.x.format) : smartDate(v, xStepMs));
   } else {
-    const xt = numericTickValues(xDomainNum[0], xDomainNum[1], xAxisCfg.ticks ?? 8);
+    const xLo = Math.min(xDomainNum[0], xDomainNum[1]);
+    const xHi = Math.max(xDomainNum[0], xDomainNum[1]);
+    const xExplicitTicks = xAxisCfg.tickValues && xAxisCfg.tickValues.length ? xAxisCfg.tickValues.slice() : null;
+    let xt;
+    if (xExplicitTicks) {
+      xt = xExplicitTicks.filter((v) => v >= xLo - 1e-9 && v <= xHi + 1e-9);
+    } else if (enc.x.scale?.type === "log") {
+      xt = logScale({ domain: xDomainNum, range: [0, 1], base: enc.x.scale.base ?? 10 }).ticks().filter((v) => v > 0 && v >= xLo - 1e-9 && v <= xHi + 1e-9);
+    } else {
+      xt = numericTickValues(xDomainNum[0], xDomainNum[1], xAxisCfg.ticks ?? 8).filter(
+        (v) => v >= xLo - 1e-9 && v <= xHi + 1e-9
+      );
+    }
     xTickValues = xt;
     xLabels = xt.map((v) => formatNumericTick(v, enc.x.format ?? xAxisCfg.format));
   }
@@ -6436,9 +6540,10 @@ function buildCartesianModel(spec, tokens, opts) {
     yAxis: { show: yShow, labels: yLabels, title: resolveAxisTitle(enc.y, yAxisCfg) }
   });
   const plot = frame.plot;
-  const yScale = linearScale({ domain: yDomain, range: [plot.y + plot.height, plot.y] });
+  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 yPixel = (value) => yScale.map(toNumber(value));
-  const baseline = clampPx(yScale.map(0), plot.y, plot.y + plot.height);
+  const baseline = yIsLog ? plot.y + plot.height : clampPx(yScale.map(0), plot.y, plot.y + plot.height);
   const xModel = buildXModel(xKind, {
     field: xField,
     type: xType,
@@ -6514,7 +6619,8 @@ function buildXModel(kind, args) {
     };
   }
   const domain = args.domainNum ?? [0, 1];
-  const continuous = kind === "time" ? timeScale({ domain, range: args.range }) : linearScale({ domain, range: args.range });
+  const clamp11 = args.scaleCfg?.clamp === true;
+  const continuous = kind === "time" ? timeScale({ domain, range: args.range }) : args.scaleCfg?.type === "log" ? logScale({ domain, range: args.range, base: args.scaleCfg.base ?? 10, clamp: clamp11 }) : linearScale({ domain, range: args.range, clamp: clamp11 });
   return {
     kind,
     field: args.field,
@@ -7228,6 +7334,12 @@ function boxProbe(model, geom) {
   if (model.seriesField) probe[model.seriesField] = geom.seriesValue;
   return probe;
 }
+function hitsBoxGeom(model, geom, showOutliers, px, py) {
+  const inWhiskerExtent = px >= geom.left - 4 && px <= geom.right + 4 && py >= geom.top - 6 && py <= geom.bottom + 6;
+  if (inWhiskerExtent) return true;
+  if (!showOutliers || geom.stats.outliers.length === 0) return false;
+  return geom.stats.outliers.some((o) => Math.abs(px - geom.cx) <= 6 && Math.abs(py - model.y.pixel(o)) <= 6);
+}
 function drawBox(surface, model) {
   const layout2 = computeBoxes(model);
   if (!layout2) return;
@@ -7259,9 +7371,7 @@ function buildBoxInteraction(model) {
   return {
     region: model.plot,
     hitTest: (px, py) => {
-      const hit = geoms.find(
-        (g) => px >= g.left - 4 && px <= g.right + 4 && py >= g.top - 6 && py <= g.bottom + 6
-      );
+      const hit = geoms.find((g) => hitsBoxGeom(model, g, showOutliers, px, py));
       if (!hit) return null;
       const s = hit.stats;
       const rows = [
@@ -7294,10 +7404,15 @@ function buildBoxInteraction(model) {
       };
     },
     pick: (px, py) => {
-      const hit = geoms.find(
-        (g) => px >= g.left - 4 && px <= g.right + 4 && py >= g.top - 6 && py <= g.bottom + 6
-      );
+      const hit = geoms.find((g) => hitsBoxGeom(model, g, showOutliers, px, py));
       if (!hit) return null;
+      if (model.series.length > 1 && model.seriesField && hit.seriesValue !== void 0) {
+        return {
+          kind: "point",
+          fields: [model.x.field, model.seriesField],
+          tuples: [[hit.xValue, hit.seriesValue]]
+        };
+      }
       return { kind: "point", fields: [model.x.field], tuples: [[hit.xValue]] };
     }
   };
@@ -7554,6 +7669,18 @@ function measureMax(labels, font) {
   for (const label of labels) max = Math.max(max, measureText(label, font).width);
   return max;
 }
+function heatmapColorDomain(rows, field) {
+  const read = accessor(field);
+  let min = Infinity;
+  let max = -Infinity;
+  for (const row of rows) {
+    const value = toNumber(read(row));
+    if (!finite3(value)) continue;
+    min = Math.min(min, value);
+    max = Math.max(max, value);
+  }
+  return min === Infinity ? null : [min, max];
+}
 function drawRoundedCell(ctx, x, y, width, height, radius) {
   if (!finite3(x) || !finite3(y) || !finite3(width) || !finite3(height) || width <= 0 || height <= 0) return;
   ctx.beginPath();
@@ -7602,7 +7729,7 @@ function drawHeatmap(surface, spec, tokens, size, context) {
   const { x, y, color } = heatmap.encoding;
   const xCats = uniqueStrings(rows, x.field);
   const yCats = uniqueStrings(rows, y.field);
-  const colorDomain = extent(rows, color.field);
+  const colorDomain = heatmapColorDomain(rows, color.field);
   if (xCats.length === 0 || yCats.length === 0 || !colorDomain || content.width <= 0 || content.height <= 0) return;
   const labelSize = tokens.font.size.small;
   const labelFont = fontString(labelSize, tokens.font.family, tokens.font.weight.normal);
@@ -7769,16 +7896,33 @@ function clamp3(value, min, max) {
 function direction(angle) {
   return { x: Math.sin(angle), y: -Math.cos(angle) };
 }
-function formatPercent(share) {
-  const pct = share * 100;
-  const text = pct < 10 ? pct.toFixed(1) : pct.toFixed(0);
-  return `${text.replace(/\.0$/, "")}%`;
+function reconcilePercents(values) {
+  const cleaned = values.map((value) => Number.isFinite(value) && value > 0 ? value : 0);
+  const total = cleaned.reduce((sum, value) => sum + value, 0);
+  if (total <= 0) return cleaned.map(() => 0);
+  const exact = cleaned.map((value, index) => {
+    const pct = value / total * 100;
+    const floor = Math.floor(pct);
+    return { index, floor, remainder: pct - floor };
+  });
+  let remaining = 100 - exact.reduce((sum, item) => sum + item.floor, 0);
+  const out = exact.map((item) => item.floor);
+  for (const item of [...exact].sort((a, b) => b.remainder - a.remainder || a.index - b.index)) {
+    if (remaining <= 0) break;
+    out[item.index]++;
+    remaining--;
+  }
+  return out;
+}
+function formatPercent(percent) {
+  return `${percent}%`;
 }
-function labelText(slice, placement, options) {
+function labelText(slice, placement, options, percents) {
   const content = options.content ?? (placement === "inside" ? "percent" : "category-percent");
+  const percentText = formatPercent(percents.get(slice.index) ?? 0);
   switch (content) {
     case "percent":
-      return formatPercent(slice.share);
+      return percentText;
     case "value":
       return options.formatValue(slice.value);
     case "category":
@@ -7787,7 +7931,7 @@ function labelText(slice, placement, options) {
       return `${slice.label} \xB7 ${options.formatValue(slice.value)}`;
     case "category-percent":
     default:
-      return `${slice.label} \xB7 ${formatPercent(slice.share)}`;
+      return `${slice.label} \xB7 ${percentText}`;
   }
 }
 function relaxColumn(idealYs, lineHeight2, top, bottom) {
@@ -7817,6 +7961,10 @@ function planPieLabels(options) {
   const origInnerR = options.innerR;
   const insideSlices = [];
   const outsideSlices = [];
+  const percents = /* @__PURE__ */ new Map();
+  reconcilePercents(slices.map((slice) => slice.value)).forEach((percent, i) => {
+    percents.set(slices[i].index, percent);
+  });
   const insideLabelR = origInnerR > 0 ? (origInnerR + origOuterR) / 2 : origOuterR * 0.62;
   const radialBand = origInnerR > 0 ? origOuterR - origInnerR : origOuterR;
   for (const slice of slices) {
@@ -7826,20 +7974,20 @@ function planPieLabels(options) {
     if (placement === "inside") goesInside = true;
     else if (placement === "outside") goesInside = false;
     else {
-      const insideText = labelText(slice, "inside", options);
+      const insideText = labelText(slice, "inside", options, percents);
       const tangential = (slice.endAngle - slice.startAngle) * insideLabelR;
       const fitsTangential = measure(insideText) + INSIDE_PAD <= tangential;
       const fitsRadial = lineHeight2 * 0.8 <= radialBand;
       goesInside = fitsTangential && fitsRadial;
     }
     if (goesInside) {
-      insideSlices.push({ slice, mid, text: labelText(slice, "inside", options) });
+      insideSlices.push({ slice, mid, text: labelText(slice, "inside", options, percents) });
     } else {
       const dir = direction(mid);
       outsideSlices.push({
         slice,
         mid,
-        text: labelText(slice, "outside", options),
+        text: labelText(slice, "outside", options, percents),
         side: dir.x >= 0 ? "right" : "left"
       });
     }
@@ -8226,17 +8374,29 @@ function buildStages(spec, palette) {
       order.push(key);
     }
   }
-  return order.map((key) => {
+  const stages = [];
+  for (const key of order) {
     const { category, value } = totals.get(key);
+    if (value <= 0) continue;
     const rgba2 = colorScale.map(key);
-    return {
+    stages.push({
       key,
       label: key === "" ? "(blank)" : key,
       value,
       category,
       color: rgbaToCss(rgba2),
       rgba: rgba2
-    };
+    });
+  }
+  return stages;
+}
+function safeRatio(numerator, denominator) {
+  return Number.isFinite(numerator) && Number.isFinite(denominator) && denominator !== 0 ? numerator / denominator : 0;
+}
+function funnelPercents(stages, mode = "first") {
+  return stages.map((stage, i) => {
+    if (mode === "previous") return i === 0 ? 1 : safeRatio(stage.value, stages[i - 1].value);
+    return safeRatio(stage.value, stages[0]?.value ?? 0);
   });
 }
 function drawFunnel(surface, spec, tokens, size, context) {
@@ -8274,12 +8434,10 @@ function drawFunnel(surface, spec, tokens, size, context) {
   const n = stages.length;
   const gap = Math.min(6, Math.max(2, content.height / n / 12));
   const bandH = content.height / n;
-  const widthOf = (v) => v / maxValue * funnelW;
+  const widthOf = (v) => Math.max(0, v) / maxValue * funnelW;
   const alphaOf = (s) => emphasis ? emphasis.match({ [stageField]: s.category }) ? 1 : emphasis.dim : 1;
-  const pctOf = (i) => {
-    if (mode === "previous") return i === 0 ? 1 : stages[i].value / stages[i - 1].value;
-    return stages[i].value / stages[0].value;
-  };
+  const percents = funnelPercents(stages, mode);
+  const pctOf = (i) => percents[i] ?? 0;
   const sketch = resolveSketch(spec);
   const pen = sketch ? new RoughPen(ctx, sketch) : null;
   const bands = [];
@@ -8423,8 +8581,8 @@ function valueField(ref) {
 function formatDelta(delta, specFormat) {
   const sign2 = delta >= 0 ? "+" : "-";
   const abs = Math.abs(delta);
-  if (abs <= 1) return sign2 + formatNumber2(abs, ".1%");
   if (specFormat) return sign2 + formatValue(abs, specFormat);
+  if (abs <= 1) return sign2 + formatNumber2(abs, ".1%");
   return sign2 + formatNumber2(abs, ",.0f");
 }
 function cardRectFor(surface, tokens, size, spec) {
@@ -8695,11 +8853,13 @@ function buildGraph(spec, palette) {
     target.targetLinks.push(link);
     links.push(link);
   }
-  for (const n of order) {
-    const out = n.sourceLinks.reduce((s, l) => s + l.value, 0);
-    const inc = n.targetLinks.reduce((s, l) => s + l.value, 0);
-    n.value = Math.max(out, inc);
+  const feedback = removeFeedbackLinks(order);
+  if (feedback.size > 0) {
+    for (let i = links.length - 1; i >= 0; i -= 1) {
+      if (feedback.has(links[i])) links.splice(i, 1);
+    }
   }
+  computeNodeValues(order);
   assignLayers(order);
   const maxLayer = order.reduce((m, n) => Math.max(m, n.layer), 0);
   const columns = Array.from({ length: maxLayer + 1 }, () => []);
@@ -8707,6 +8867,7 @@ function buildGraph(spec, palette) {
   return { nodes: order, links, columns, maxLayer };
 }
 function assignLayers(nodes) {
+  for (const n of nodes) n.layer = 0;
   const indeg = /* @__PURE__ */ new Map();
   for (const n of nodes) indeg.set(n, n.targetLinks.length);
   const queue = nodes.filter((n) => (indeg.get(n) ?? 0) === 0);
@@ -8722,14 +8883,58 @@ function assignLayers(nodes) {
       if (d === 0) queue.push(t);
     }
   }
+  for (const n of nodes) {
+    if (!seen.has(n)) {
+      seen.add(n);
+      const incoming = n.targetLinks.reduce((m, l) => Math.max(m, l.source.layer + 1), 0);
+      n.layer = Math.max(n.layer, incoming);
+    }
+  }
   const maxLayer = nodes.reduce((m, n) => Math.max(m, n.layer), 0);
   for (const n of nodes) {
     if (n.sourceLinks.length === 0 && n.targetLinks.length > 0) n.layer = maxLayer;
   }
 }
+function removeFeedbackLinks(nodes) {
+  const visiting = /* @__PURE__ */ new Set();
+  const visited = /* @__PURE__ */ new Set();
+  const feedback = /* @__PURE__ */ new Set();
+  const visit = (n) => {
+    visiting.add(n);
+    for (const link of n.sourceLinks) {
+      const target = link.target;
+      if (visiting.has(target)) {
+        feedback.add(link);
+        continue;
+      }
+      if (!visited.has(target)) visit(target);
+    }
+    visiting.delete(n);
+    visited.add(n);
+  };
+  for (const n of nodes) {
+    if (!visited.has(n)) visit(n);
+  }
+  if (feedback.size === 0) return feedback;
+  for (const n of nodes) {
+    n.sourceLinks = n.sourceLinks.filter((l) => !feedback.has(l));
+    n.targetLinks = n.targetLinks.filter((l) => !feedback.has(l));
+  }
+  return feedback;
+}
+function computeNodeValues(nodes) {
+  for (const n of nodes) {
+    const out = n.sourceLinks.reduce((s, l) => s + l.value, 0);
+    const inc = n.targetLinks.reduce((s, l) => s + l.value, 0);
+    n.value = Math.max(out, inc);
+  }
+}
 function layout(graph, area2, nodeWidth, pad3) {
   const { columns, links, maxLayer } = graph;
   const kx = maxLayer > 0 ? (area2.width - nodeWidth) / maxLayer : 0;
+  const maxColumnSize = columns.reduce((m, col) => Math.max(m, col.length), 0);
+  const desiredPad = Math.max(0, pad3);
+  const effectivePad = maxColumnSize > 1 && desiredPad * (maxColumnSize - 1) >= area2.height && area2.height > 0 ? area2.height * 0.25 / (maxColumnSize - 1) : desiredPad;
   for (const col of columns) {
     for (const n of col) {
       n.x0 = area2.x + n.layer * kx;
@@ -8740,26 +8945,26 @@ function layout(graph, area2, nodeWidth, pad3) {
   for (const col of columns) {
     if (col.length === 0) continue;
     const sum = col.reduce((s, n) => s + n.value, 0);
-    const avail = area2.height - (col.length - 1) * pad3;
-    if (sum > 0 && avail > 0) ky = Math.min(ky, avail / sum);
+    const avail = Math.max(0, area2.height - (col.length - 1) * effectivePad);
+    if (sum > 0) ky = Math.min(ky, avail / sum);
   }
-  if (!Number.isFinite(ky) || ky <= 0) ky = 1;
+  if (!Number.isFinite(ky) || ky < 0) ky = 0;
   for (const col of columns) {
     let y = area2.y;
     for (const n of col) {
       n.y0 = y;
-      n.y1 = y + Math.max(1, n.value * ky);
-      y = n.y1 + pad3;
+      n.y1 = y + Math.max(0, n.value * ky);
+      y = n.y1 + effectivePad;
     }
     centerColumn(col, area2);
   }
-  for (const l of links) l.width = Math.max(1, l.value * ky);
+  for (const l of links) l.width = Math.max(0, l.value * ky);
   for (let i = 0; i < 6; i += 1) {
     const alpha = Math.pow(0.97, i);
     relax(columns, true, alpha);
-    resolveAll(columns, area2, pad3);
+    resolveAll(columns, area2, effectivePad);
     relax(columns, false, alpha);
-    resolveAll(columns, area2, pad3);
+    resolveAll(columns, area2, effectivePad);
   }
   computeLinkBreadths(graph);
 }
@@ -9001,6 +9206,7 @@ function featureKey(feature, featureId) {
     if (featureId === "id" && feature.id != null) return toKey(feature.id);
     const v = feature.properties?.[featureId];
     if (v != null) return toKey(v);
+    return "";
   }
   if (feature.id != null) return toKey(feature.id);
   const props = feature.properties ?? {};
@@ -12012,6 +12218,12 @@ function buildGroups(leaves) {
   }
   return order.map((key) => groups.get(key));
 }
+function tileProbe(treemap, tile) {
+  const probe = { [treemap.encoding.category.field]: tile.category };
+  const groupField = treemap.encoding.group?.field;
+  if (groupField) probe[groupField] = tile.group;
+  return probe;
+}
 function drawRect2(ctx, pen, rect, fill, stroke) {
   if (rect.width <= 0 || rect.height <= 0) return;
   if (pen) {
@@ -12056,6 +12268,7 @@ function addTileLabels(surface, tokens, tile, valueFormat) {
 function drawTreemap(surface, spec, tokens, size, context) {
   const treemap = spec;
   const ctx = surface.marks.ctx;
+  const emphasis = context?.emphasis ?? null;
   const content = drawTitleBlock(surface, tokens, size, treemap.title);
   const leaves = buildLeaves(treemap);
   colorLeaves(leaves, treemap, tokens);
@@ -12077,6 +12290,12 @@ function drawTreemap(surface, spec, tokens, size, context) {
   const tiles = [];
   const stroke = tokens.color.background;
   const groupRects = [];
+  const drawTile = (tile) => {
+    const alpha = emphasis ? emphasis.match(tileProbe(treemap, tile)) ? 1 : emphasis.dim : 1;
+    if (alpha !== 1) ctx.globalAlpha = alpha;
+    drawRect2(ctx, pen, tile.rect, tile.fillCss, stroke);
+    if (alpha !== 1) ctx.globalAlpha = 1;
+  };
   ctx.save();
   if (treemap.encoding.group) {
     const groups = buildGroups(leaves);
@@ -12091,14 +12310,14 @@ function drawTreemap(surface, spec, tokens, size, context) {
       for (const leafNode of layoutTreemap(groupNode.item.leaves, inner)) {
         const tile = { ...leafNode.item, rect: leafNode.rect };
         tiles.push(tile);
-        drawRect2(ctx, pen, tile.rect, tile.fillCss, stroke);
+        drawTile(tile);
       }
     }
   } else {
     for (const leafNode of layoutTreemap(leaves, content)) {
       const tile = { ...leafNode.item, rect: leafNode.rect };
       tiles.push(tile);
-      drawRect2(ctx, pen, tile.rect, tile.fillCss, stroke);
+      drawTile(tile);
     }
   }
   ctx.restore();