@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/scatter/ConvexHullScatter.js

@@ -0,0 +1,168 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { ScatterGeometry } from "./ScatterGeometry.js";
+import { ScatterBase } from "./ScatterBase.js";
+import { curveCatmullRomClosed, curveLinearClosed, group, line, packEnclose, polygonArea, polygonHull } from "d3";
+// src/charts/scatter/ConvexHullScatter.ts
+var HullShape = /* @__PURE__ */ function(HullShape) {
+	HullShape["Convex"] = "convex";
+	HullShape["Concave"] = "concave";
+	HullShape["Box"] = "bounding-box";
+	HullShape["Circle"] = "enclosing-circle";
+	HullShape["Onion"] = "onion-layers";
+	return HullShape;
+}({});
+var HullScope = /* @__PURE__ */ function(HullScope) {
+	HullScope["PerGroup"] = "per-group";
+	HullScope["Overall"] = "overall";
+	return HullScope;
+}({});
+var MAX_LAYERS = 5;
+/** Marks each group's territory with a hull, box, circle or onion layers. */
+var ConvexHullScatter = class extends ScatterBase {
+	static meta = {
+		id: "hull-scatter",
+		name: "Convex hull scatter",
+		family: ChartFamily.Relationship,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Wraps each group of points in a boundary to compare extent, overlap and shape.",
+		tags: [
+			"convex hull",
+			"alpha shape",
+			"concave hull",
+			"onion peeling",
+			"bagplot"
+		],
+		sample: (seed) => SampleData.points(seed, 90, 3),
+		variants: {
+			shape: [
+				"convex",
+				"concave",
+				"bounding-box",
+				"enclosing-circle",
+				"onion-layers"
+			],
+			scope: ["per-group", "overall"],
+			offset: [
+				10,
+				0,
+				20
+			],
+			smooth: [true, false],
+			markers: [true, false]
+		},
+		valid: (v) => (v.shape === "convex" || v.shape === "onion-layers" ? v.smooth === true || v.offset === 0 : v.smooth === false) && (v.shape === "convex" || v.shape === "bounding-box" || v.shape === "enclosing-circle" || v.offset === 0)
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			shape: "convex",
+			scope: "per-group",
+			offset: 10,
+			smooth: true,
+			markers: true,
+			radius: 4
+		};
+	}
+	legendItems() {
+		return this.options.scope === "overall" && !this.options.markers ? [] : super.legendItems();
+	}
+	inset() {
+		return this.options.offset + 4;
+	}
+	pathOf(vertices) {
+		const curve = this.options.smooth ? curveCatmullRomClosed : curveLinearClosed;
+		return line().curve(curve)(vertices) ?? "";
+	}
+	wrapped(vertices) {
+		const offset = this.options.offset;
+		if (!offset) return vertices;
+		return polygonHull(vertices.flatMap((vertex) => ScatterGeometry.ring(vertex, offset))) ?? vertices;
+	}
+	outlines(ctx, key, set) {
+		const { shape, offset } = this.options;
+		const vertices = set.map((point) => [point.px, point.py]);
+		const outline = (id, ring, layer = 0) => ({
+			id: `${key}/${id}`,
+			key,
+			d: this.pathOf(ring),
+			area: Math.abs(polygonArea(ring)),
+			count: set.length,
+			layer
+		});
+		if (shape === "bounding-box") {
+			const xs = vertices.map((v) => v[0]), ys = vertices.map((v) => v[1]), pad = offset;
+			const [x0, x1, y0, y1] = [
+				Math.min(...xs) - pad,
+				Math.max(...xs) + pad,
+				Math.min(...ys) - pad,
+				Math.max(...ys) + pad
+			];
+			return [outline("box", [
+				[x0, y0],
+				[x1, y0],
+				[x1, y1],
+				[x0, y1]
+			])];
+		}
+		if (shape === "enclosing-circle") {
+			const { x, y, r } = packEnclose(set.map((point) => ({
+				x: point.px,
+				y: point.py,
+				r: 0
+			})));
+			const { width, height } = ctx.plot;
+			return [outline("circle", ScatterGeometry.ring([x, y], r + offset, 64).map(([px, py]) => [Math.max(1, Math.min(width - 1, px)), Math.max(1, Math.min(height - 1, py))]))];
+		}
+		if (shape === "concave") return this.concave(key, vertices, set.length);
+		if (shape === "onion-layers") return this.onion(key, vertices, set.length);
+		const hull = polygonHull(vertices);
+		return hull ? [outline("hull", this.wrapped(hull))] : vertices.length > 1 ? [outline("hull", vertices)] : [];
+	}
+	concave(key, vertices, count) {
+		const edges = ScatterGeometry.delaunayEdges(vertices).map((edge) => edge.length).sort((a, b) => a - b);
+		const typical = edges[Math.floor(edges.length / 2)] ?? 1;
+		return ScatterGeometry.concave(vertices, typical * 2.4).map((loop, i) => ({
+			id: `${key}/loop${i}`,
+			key,
+			d: this.pathOf(loop),
+			area: Math.abs(polygonArea(loop)),
+			count,
+			layer: 0
+		}));
+	}
+	onion(key, vertices, count) {
+		const layers = [];
+		let rest = vertices;
+		for (let layer = 0; layer < MAX_LAYERS && rest.length > 2; layer++) {
+			const hull = polygonHull(rest);
+			if (!hull) break;
+			const on = new Set(hull.map(String));
+			rest = rest.filter((vertex) => !on.has(String(vertex)));
+			layers.push({
+				id: `${key}/layer${layer}`,
+				key,
+				d: this.pathOf(hull),
+				area: Math.abs(polygonArea(hull)),
+				count,
+				layer
+			});
+		}
+		return layers;
+	}
+	plotPoints(ctx, _axes, points) {
+		const overall = this.options.scope === "overall";
+		const shapes = (overall ? points.length ? [["All", points]] : [] : [...group(points, (point) => point.group)]).flatMap(([key, set]) => this.outlines(ctx, key, set));
+		const ink = (key) => overall ? ctx.theme.inkSecondary : ctx.palette.color(key);
+		const marks = ctx.marks("hulls", "path", shapes, (d) => d.id).attr("fill", (d) => ink(d.key)).attr("fill-opacity", .1).attr("stroke", (d) => ink(d.key)).attr("stroke-width", 2).attr("stroke-linejoin", "round");
+		ctx.set(marks, { d: (d) => d.d });
+		ctx.hover(marks, (d) => ({
+			title: d.key,
+			color: ink(d.key),
+			rows: [["Points", d.count], ["Area px²", Math.round(d.area)]]
+		}));
+		this.drawDots(ctx, this.options.markers ? points : []);
+	}
+};
+export { ConvexHullScatter, HullScope, HullShape };

package/dist/charts/scatter/DropLineScatter.js

@@ -0,0 +1,121 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { ScatterBase, ScatterMarker, ScatterScaling } from "./ScatterBase.js";
+import { mean, median } from "d3";
+// src/charts/scatter/DropLineScatter.ts
+var DropAxis = /* @__PURE__ */ function(DropAxis) {
+	DropAxis["Vertical"] = "vertical-drops";
+	DropAxis["Horizontal"] = "horizontal-drops";
+	DropAxis["Both"] = "both-drops";
+	return DropAxis;
+}({});
+var DropReference = /* @__PURE__ */ function(DropReference) {
+	DropReference["Axis"] = "to-axis";
+	DropReference["Mean"] = "to-mean";
+	DropReference["Median"] = "to-median";
+	return DropReference;
+}({});
+/** Points stemmed to an axis or an average, so small samples read as deviations from a reference. */
+var DropLineScatter = class extends ScatterBase {
+	static meta = {
+		id: "dropline-scatter",
+		name: "Drop-line scatter",
+		family: ChartFamily.Relationship,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Connects each point to an axis or average so exact positions and deviations are easy to read.",
+		tags: [
+			"stem plot",
+			"lollipop scatter",
+			"deviation",
+			"drop lines"
+		],
+		sample: (seed) => SampleData.points(seed, 26, 3),
+		variants: {
+			drop: [
+				"vertical-drops",
+				"horizontal-drops",
+				"both-drops"
+			],
+			reference: [
+				"to-axis",
+				"to-mean",
+				"to-median"
+			],
+			marker: [ScatterMarker.Circle, ScatterMarker.PerGroup],
+			scaling: [
+				ScatterScaling.Linear,
+				ScatterScaling.SemilogX,
+				ScatterScaling.SemilogY,
+				ScatterScaling.LogLog
+			]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			drop: "vertical-drops",
+			reference: "to-axis"
+		};
+	}
+	target(values, fallback, scale) {
+		const { reference } = this.options;
+		if (reference === "to-axis" || !values.length) return fallback;
+		return scale(reference === "to-mean" ? mean(values) : median(values));
+	}
+	plotPoints(ctx, axes, points) {
+		const { drop, reference } = this.options, { left, right, top, bottom } = this.frame(ctx);
+		const toY = this.target(points.map((p) => p.y), bottom, axes.y), toX = this.target(points.map((p) => p.x), left, axes.x);
+		const down = drop !== "horizontal-drops", across = drop !== "vertical-drops";
+		const stems = points.flatMap((point) => [...down ? [{
+			id: `${point.index}/v`,
+			x1: point.px,
+			x2: point.px,
+			y1: point.py,
+			y2: toY,
+			point
+		}] : [], ...across ? [{
+			id: `${point.index}/h`,
+			x1: point.px,
+			x2: toX,
+			y1: point.py,
+			y2: point.py,
+			point
+		}] : []]);
+		const lines = ctx.marks("stems", "line", stems, (d) => d.id).attr("stroke", (d) => this.hue(ctx, d.point)).attr("stroke-width", 1.5).attr("stroke-opacity", .5);
+		ctx.set(lines, {
+			x1: (d) => d.x1,
+			x2: (d) => d.x2,
+			y1: (d) => d.y1,
+			y2: (d) => d.y2
+		}, {
+			x1: (d) => d.x1,
+			x2: (d) => d.x1,
+			y1: (d) => d.y1,
+			y2: (d) => d.y1
+		}, 4);
+		ctx.hover(lines, (d) => this.tooltip(ctx, d.point));
+		const rules = reference === "to-axis" ? [] : [...down ? [{
+			id: "y",
+			x1: left,
+			x2: right,
+			y1: toY,
+			y2: toY
+		}] : [], ...across ? [{
+			id: "x",
+			x1: toX,
+			x2: toX,
+			y1: top,
+			y2: bottom
+		}] : []];
+		const guides = ctx.marks("reference", "line", rules, (d) => d.id).attr("stroke", ctx.theme.inkSecondary).attr("stroke-width", 1.5).attr("stroke-dasharray", "5 4");
+		ctx.set(guides, {
+			x1: (d) => d.x1,
+			x2: (d) => d.x2,
+			y1: (d) => d.y1,
+			y2: (d) => d.y2
+		});
+		this.drawDots(ctx, points);
+	}
+};
+export { DropAxis, DropLineScatter, DropReference };

package/dist/charts/scatter/EllipseScatter.js

@@ -0,0 +1,194 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { ScatterBase } from "./ScatterBase.js";
+import { curveLinearClosed, group, line, mean } from "d3";
+// src/charts/scatter/EllipseScatter.ts
+var EllipseEstimator = /* @__PURE__ */ function(EllipseEstimator) {
+	EllipseEstimator["Classical"] = "classical";
+	EllipseEstimator["Robust"] = "robust";
+	return EllipseEstimator;
+}({});
+var EllipseScope = /* @__PURE__ */ function(EllipseScope) {
+	EllipseScope["PerGroup"] = "per-group";
+	EllipseScope["Overall"] = "overall";
+	return EllipseScope;
+}({});
+var NESTED = [
+	.95,
+	.8,
+	.5
+];
+var TRIM = .9;
+var STEPS = 72;
+var reach = (level) => Math.sqrt(-2 * Math.log(1 - level));
+/** Mean and covariance, optionally re-estimated without the outlying 10% and rescaled for consistency. */
+function moments(xs, ys, estimator) {
+	const fit = (keep) => {
+		const cx = mean(keep, (i) => xs[i]), cy = mean(keep, (i) => ys[i]), dof = Math.max(1, keep.length - 1);
+		const sum = (f) => keep.reduce((total, i) => total + f(i), 0) / dof;
+		return {
+			cx,
+			cy,
+			xx: sum((i) => (xs[i] - cx) ** 2),
+			yy: sum((i) => (ys[i] - cy) ** 2),
+			xy: sum((i) => (xs[i] - cx) * (ys[i] - cy))
+		};
+	};
+	let current = fit(xs.map((_, i) => i));
+	if (estimator !== "robust" || xs.length < 8) return current;
+	for (let round = 0; round < 3; round++) {
+		const m = current, det = m.xx * m.yy - m.xy ** 2 || 1e-9;
+		const distance = (i) => {
+			const dx = xs[i] - m.cx, dy = ys[i] - m.cy;
+			return (m.yy * dx * dx - 2 * m.xy * dx * dy + m.xx * dy * dy) / det;
+		};
+		current = fit(xs.map((_, i) => i).sort((a, b) => distance(a) - distance(b)).slice(0, Math.ceil(xs.length * TRIM)));
+	}
+	const factor = TRIM / (1 - .09999999999999998 * (1 + -2 * Math.log(.09999999999999998) / 2));
+	return {
+		...current,
+		xx: current.xx * factor,
+		yy: current.yy * factor,
+		xy: current.xy * factor
+	};
+}
+function axesOf({ xx, yy, xy }) {
+	const middle = (xx + yy) / 2, delta = Math.sqrt(((xx - yy) / 2) ** 2 + xy ** 2);
+	return {
+		major: Math.sqrt(Math.max(0, middle + delta)),
+		minor: Math.sqrt(Math.max(0, middle - delta)),
+		angle: Math.atan2(2 * xy, xx - yy) / 2
+	};
+}
+/** Group clouds summarised by covariance ellipses: how far, how tilted, how overlapping. */
+var EllipseScatter = class extends ScatterBase {
+	static meta = {
+		id: "ellipse-scatter",
+		name: "Confidence ellipse scatter",
+		family: ChartFamily.Statistical,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Summarises each group with a covariance ellipse showing its centre, spread and correlation.",
+		tags: [
+			"confidence ellipse",
+			"covariance",
+			"pca",
+			"bivariate normal"
+		],
+		sample: (seed) => SampleData.points(seed, 120, 3),
+		variants: {
+			level: [
+				.95,
+				.5,
+				.99
+			],
+			nested: [false, true],
+			estimator: ["classical", "robust"],
+			scope: ["per-group", "overall"],
+			centroids: [true, false],
+			principalAxes: [false, true],
+			markers: [true, false]
+		},
+		valid: (v) => !v.nested || v.level === .95
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			level: .95,
+			nested: false,
+			estimator: "classical",
+			scope: "per-group",
+			centroids: true,
+			principalAxes: false,
+			markers: true,
+			radius: 3.5
+		};
+	}
+	legendItems() {
+		return this.options.scope === "overall" && !this.options.markers ? [] : super.legendItems();
+	}
+	sets(points) {
+		return this.options.scope === "overall" ? [["All", points]] : [...group(points, (point) => point.group)];
+	}
+	get levels() {
+		return this.options.nested ? NESTED : [this.options.level];
+	}
+	extents(points, value, varianceOf) {
+		const widest = Math.max(...this.levels);
+		return this.sets(points).filter(([, set]) => set.length > 2).flatMap(([, set]) => {
+			const m = moments(set.map((p) => p.x), set.map((p) => p.y), this.options.estimator);
+			const center = varianceOf === varianceX ? m.cx : m.cy, half = reach(widest) * Math.sqrt(varianceOf(m));
+			return [center - half, center + half];
+		}).concat(points.map(value));
+	}
+	xValues(points) {
+		return this.extents(points, (p) => p.x, varianceX);
+	}
+	yValues(points) {
+		return this.extents(points, (p) => p.y, varianceY);
+	}
+	plotPoints(ctx, _axes, points) {
+		const { markers, centroids, principalAxes, estimator } = this.options;
+		const clouds = this.sets(points).filter(([, set]) => set.length > 2).map(([key, set]) => {
+			const m = moments(set.map((p) => p.px), set.map((p) => p.py), estimator);
+			return {
+				key,
+				count: set.length,
+				m,
+				...axesOf(m)
+			};
+		});
+		const ink = (key) => this.options.scope === "overall" ? ctx.theme.inkSecondary : ctx.palette.color(key);
+		const shapes = clouds.flatMap((cloud) => this.levels.map((level) => ({
+			...cloud,
+			level,
+			id: `${cloud.key}/${level}`
+		})));
+		const outline = line().curve(curveLinearClosed);
+		const path = (d) => {
+			const k = reach(d.level), cos = Math.cos(d.angle), sin = Math.sin(d.angle);
+			return outline(Array.from({ length: STEPS }, (_, i) => {
+				const t = i / STEPS * Math.PI * 2, u = k * d.major * Math.cos(t), v = k * d.minor * Math.sin(t);
+				return [d.m.cx + u * cos - v * sin, d.m.cy + u * sin + v * cos];
+			}));
+		};
+		const areas = ctx.marks("ellipses", "path", shapes, (d) => d.id).attr("fill", (d) => ink(d.key)).attr("fill-opacity", .1).attr("stroke", (d) => ink(d.key)).attr("stroke-width", 2);
+		ctx.set(areas, { d: path });
+		ctx.hover(areas, (d) => ({
+			title: d.key,
+			color: ink(d.key),
+			rows: [["Contains", `${Math.round(d.level * 100)}%`], ["Points", d.count]]
+		}));
+		this.drawDots(ctx, markers ? points : [], {});
+		const span = principalAxes ? clouds.flatMap((c) => {
+			const k = reach(Math.max(...this.levels));
+			const ends = (length, angle) => ({
+				x1: c.m.cx - k * length * Math.cos(angle),
+				y1: c.m.cy - k * length * Math.sin(angle),
+				x2: c.m.cx + k * length * Math.cos(angle),
+				y2: c.m.cy + k * length * Math.sin(angle)
+			});
+			return [{
+				id: `${c.key}/major`,
+				key: c.key,
+				...ends(c.major, c.angle)
+			}, {
+				id: `${c.key}/minor`,
+				key: c.key,
+				...ends(c.minor, c.angle + Math.PI / 2)
+			}];
+		}) : [];
+		const rules = ctx.marks("principal", "line", span, (d) => d.id).attr("stroke", (d) => ink(d.key)).attr("stroke-width", 1.5).attr("stroke-dasharray", "4 3");
+		ctx.set(rules, {
+			x1: (d) => d.x1,
+			x2: (d) => d.x2,
+			y1: (d) => d.y1,
+			y2: (d) => d.y2
+		});
+		const crosses = ctx.marks("centroids", "path", centroids ? clouds : [], (d) => d.key).attr("fill", ctx.theme.ink).attr("stroke", ctx.theme.surface).attr("stroke-width", 1.5).attr("d", "M-1.8,-6H1.8V-1.8H6V1.8H1.8V6H-1.8V1.8H-6V-1.8H-1.8Z");
+		ctx.set(crosses, { transform: (d) => `translate(${d.m.cx},${d.m.cy})` });
+	}
+};
+var varianceX = (m) => m.xx;
+var varianceY = (m) => m.yy;
+export { EllipseEstimator, EllipseScatter, EllipseScope };

package/dist/charts/scatter/ErrorBarScatter.js

@@ -0,0 +1,177 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { ScatterBase, scatterNumber } from "./ScatterBase.js";
+// src/charts/scatter/ErrorBarScatter.ts
+var ErrorStyle = /* @__PURE__ */ function(ErrorStyle) {
+	ErrorStyle["Cap"] = "capped";
+	ErrorStyle["Bare"] = "bare";
+	ErrorStyle["Box"] = "error-box";
+	ErrorStyle["Nested"] = "nested";
+	return ErrorStyle;
+}({});
+var ErrorDirection = /* @__PURE__ */ function(ErrorDirection) {
+	ErrorDirection["Y"] = "y-error";
+	ErrorDirection["X"] = "x-error";
+	ErrorDirection["Both"] = "xy-error";
+	return ErrorDirection;
+}({});
+var ErrorSide = /* @__PURE__ */ function(ErrorSide) {
+	ErrorSide["TwoSided"] = "two-sided";
+	ErrorSide["Upper"] = "upper";
+	ErrorSide["Lower"] = "lower";
+	return ErrorSide;
+}({});
+var CAP = 4;
+/** Measurements with their uncertainty, as capped bars, boxes or nested intervals. */
+var ErrorBarScatter = class extends ScatterBase {
+	static meta = {
+		id: "errorbar-scatter",
+		name: "Error bar scatter",
+		family: ChartFamily.Statistical,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Shows each measurement with its uncertainty along one or both axes.",
+		tags: [
+			"error bars",
+			"uncertainty",
+			"whisker",
+			"confidence interval"
+		],
+		sample: (seed) => SampleData.points(seed, 18, 3).map((row) => ({
+			...row,
+			xError: +(+row.size / 7).toFixed(2),
+			yError: +(+row.size / 4).toFixed(2)
+		})),
+		variants: {
+			errorStyle: [
+				"capped",
+				"bare",
+				"error-box",
+				"nested"
+			],
+			direction: [
+				"y-error",
+				"x-error",
+				"xy-error"
+			],
+			side: [
+				"two-sided",
+				"upper",
+				"lower"
+			],
+			markers: [true, false]
+		},
+		valid: (v) => v.errorStyle !== "error-box" || v.direction === "xy-error" && v.side === "two-sided"
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			xError: "xError",
+			yError: "yError",
+			xLow: "xLow",
+			xHigh: "xHigh",
+			yLow: "yLow",
+			yHigh: "yHigh",
+			errorStyle: "capped",
+			direction: "y-error",
+			side: "two-sided",
+			markers: true
+		};
+	}
+	span(point, center, error, lowKey, highKey) {
+		const half = scatterNumber(point.row[error]);
+		const low = scatterNumber(point.row[lowKey]), high = scatterNumber(point.row[highKey]);
+		const reach = Number.isFinite(half) ? Math.abs(half) : 0;
+		const { side } = this.options;
+		return {
+			low: side === "upper" ? center : Number.isFinite(low) ? low : center - reach,
+			high: side === "lower" ? center : Number.isFinite(high) ? high : center + reach
+		};
+	}
+	xSpan(point) {
+		const { xError, xLow, xHigh, direction } = this.options;
+		return direction === "y-error" ? {
+			low: point.x,
+			high: point.x
+		} : this.span(point, point.x, xError, xLow, xHigh);
+	}
+	ySpan(point) {
+		const { yError, yLow, yHigh, direction } = this.options;
+		return direction === "x-error" ? {
+			low: point.y,
+			high: point.y
+		} : this.span(point, point.y, yError, yLow, yHigh);
+	}
+	xValues(points) {
+		return points.flatMap((point) => {
+			const { low, high } = this.xSpan(point);
+			return [low, high];
+		});
+	}
+	yValues(points) {
+		return points.flatMap((point) => {
+			const { low, high } = this.ySpan(point);
+			return [low, high];
+		});
+	}
+	segments(axes, point) {
+		const { errorStyle, direction } = this.options, x = this.xSpan(point), y = this.ySpan(point);
+		const parts = [];
+		const add = (id, x1, y1, x2, y2, width = 1.5, opacity = 1) => parts.push({
+			id: `${point.index}/${id}`,
+			x1,
+			y1,
+			x2,
+			y2,
+			width,
+			opacity,
+			point
+		});
+		const lx = axes.x(x.low), hx = axes.x(x.high), ly = axes.y(y.low), hy = axes.y(y.high);
+		const vertical = direction !== "x-error", horizontal = direction !== "y-error";
+		if (errorStyle === "nested") {
+			const half = (a, center) => center + (a - center) / 2;
+			if (vertical) {
+				add("y2", point.px, ly, point.px, hy, 2, .35);
+				add("y1", point.px, half(ly, point.py), point.px, half(hy, point.py), 6, .5);
+			}
+			if (horizontal) {
+				add("x2", lx, point.py, hx, point.py, 2, .35);
+				add("x1", half(lx, point.px), point.py, half(hx, point.px), point.py, 6, .5);
+			}
+			return parts;
+		}
+		if (vertical) add("y", point.px, ly, point.px, hy);
+		if (horizontal) add("x", lx, point.py, hx, point.py);
+		if (errorStyle !== "capped") return parts;
+		if (vertical && ly !== point.py) add("yl", point.px - CAP, ly, point.px + CAP, ly);
+		if (vertical && hy !== point.py) add("yh", point.px - CAP, hy, point.px + CAP, hy);
+		if (horizontal && lx !== point.px) add("xl", lx, point.py - CAP, lx, point.py + CAP);
+		if (horizontal && hx !== point.px) add("xh", hx, point.py - CAP, hx, point.py + CAP);
+		return parts;
+	}
+	plotPoints(ctx, axes, points) {
+		const { errorStyle } = this.options;
+		const boxes = errorStyle === "error-box" ? points : [];
+		const rects = ctx.marks("error-boxes", "rect", boxes, (d) => d.index).attr("fill", (d) => this.hue(ctx, d)).attr("fill-opacity", .16).attr("rx", 3);
+		const lowX = (d) => axes.x(this.xSpan(d).low), highX = (d) => axes.x(this.xSpan(d).high);
+		const lowY = (d) => axes.y(this.ySpan(d).low), highY = (d) => axes.y(this.ySpan(d).high);
+		ctx.set(rects, {
+			x: lowX,
+			y: highY,
+			width: (d) => Math.max(0, highX(d) - lowX(d)),
+			height: (d) => Math.max(0, lowY(d) - highY(d))
+		});
+		ctx.hover(rects, (d) => this.tooltip(ctx, d));
+		const bars = ctx.marks("error-lines", "line", points.flatMap((point) => this.segments(axes, point)), (d) => d.id).attr("stroke", (d) => this.hue(ctx, d.point)).attr("stroke-width", (d) => d.width).attr("stroke-opacity", (d) => d.opacity);
+		ctx.set(bars, {
+			x1: (d) => d.x1,
+			x2: (d) => d.x2,
+			y1: (d) => d.y1,
+			y2: (d) => d.y2
+		});
+		ctx.hover(bars, (d) => this.tooltip(ctx, d.point));
+		this.drawDots(ctx, this.options.markers ? points : [], { radius: this.options.radius - .5 });
+	}
+};
+export { ErrorBarScatter, ErrorDirection, ErrorSide, ErrorStyle };