@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/statistics/ReferenceLaw.js

@@ -0,0 +1,64 @@
+import { StatMath } from "./StatMath.js";
+// src/charts/statistics/ReferenceLaw.ts
+/** Standard reference distributions for quantile and probability plots. */
+var ReferenceDistribution = /* @__PURE__ */ function(ReferenceDistribution) {
+	ReferenceDistribution["Normal"] = "normal";
+	ReferenceDistribution["Uniform"] = "uniform";
+	ReferenceDistribution["Exponential"] = "exponential";
+	ReferenceDistribution["Logistic"] = "logistic";
+	ReferenceDistribution["Gumbel"] = "gumbel";
+	return ReferenceDistribution;
+}({});
+var clamp01 = (p) => Math.max(0, Math.min(1, p));
+var LAWS = {
+	["normal"]: {
+		quantile: StatMath.normalQuantile,
+		cdf: StatMath.normalCdf,
+		pdf: StatMath.normalPdf,
+		mean: 0,
+		deviation: 1
+	},
+	["uniform"]: {
+		quantile: (p) => p,
+		cdf: clamp01,
+		pdf: (x) => x >= 0 && x <= 1 ? 1 : 0,
+		mean: .5,
+		deviation: Math.sqrt(1 / 12)
+	},
+	["exponential"]: {
+		quantile: (p) => -Math.log(1 - p),
+		cdf: (x) => x <= 0 ? 0 : 1 - Math.exp(-x),
+		pdf: (x) => x < 0 ? 0 : Math.exp(-x),
+		mean: 1,
+		deviation: 1
+	},
+	["logistic"]: {
+		quantile: (p) => Math.log(p / (1 - p)),
+		cdf: (x) => 1 / (1 + Math.exp(-x)),
+		pdf: (x) => Math.exp(-x) / (1 + Math.exp(-x)) ** 2,
+		mean: 0,
+		deviation: Math.PI / Math.sqrt(3)
+	},
+	["gumbel"]: {
+		quantile: (p) => -Math.log(-Math.log(p)),
+		cdf: (x) => Math.exp(-Math.exp(-x)),
+		pdf: (x) => Math.exp(-x - Math.exp(-x)),
+		mean: .5772156649,
+		deviation: Math.PI / Math.sqrt(6)
+	}
+};
+/** Looks up the quantile, CDF and density of a reference distribution. */
+var ReferenceLaw = class {
+	static of(kind = "normal") {
+		return LAWS[kind];
+	}
+	/** Location and scale that map the law's quartiles onto a sorted sample's quartiles. */
+	static quartileFit(law, q1, q3) {
+		const t1 = law.quantile(.25), t3 = law.quantile(.75), slope = (q3 - q1) / (t3 - t1);
+		return {
+			slope,
+			intercept: q1 - slope * t1
+		};
+	}
+};
+export { ReferenceDistribution, ReferenceLaw };

package/dist/charts/statistics/RegressionFit.js

@@ -0,0 +1,79 @@
+import { mean, sum } from "d3";
+// src/charts/statistics/RegressionFit.ts
+var invert = (matrix) => {
+	const n = matrix.length;
+	const a = matrix.map((row, i) => [...row, ...row.map((_, j) => i === j ? 1 : 0)]);
+	for (let c = 0; c < n; c++) {
+		let pivot = c;
+		for (let r = c + 1; r < n; r++) if (Math.abs(a[r][c]) > Math.abs(a[pivot][c])) pivot = r;
+		[a[c], a[pivot]] = [a[pivot], a[c]];
+		const head = a[c][c];
+		if (Math.abs(head) < 1e-10) {
+			a[c].fill(0);
+			continue;
+		}
+		a[c] = a[c].map((value) => value / head);
+		for (let r = 0; r < n; r++) {
+			const factor = a[r][c];
+			if (r !== c && factor) a[r] = a[r].map((value, j) => value - factor * a[c][j]);
+		}
+	}
+	return a.map((row) => row.slice(n));
+};
+/** Ordinary least squares on a design matrix, with the diagnostics regression charts plot. */
+var RegressionFit = class {
+	beta;
+	fitted;
+	residuals;
+	/** Diagonal of the hat matrix. */
+	leverage;
+	/** Residual standard deviation. */
+	sigma;
+	parameters;
+	centre;
+	spread;
+	degree;
+	/** Fits `y` on an explicit design matrix with one row per observation. */
+	static onDesign(design, y) {
+		const width = design[0]?.length ?? 0;
+		const inverse = invert(Array.from({ length: width }, (_, a) => Array.from({ length: width }, (_, b) => sum(design, (row) => row[a] * row[b]))));
+		const xty = Array.from({ length: width }, (_, a) => sum(design, (row, i) => row[a] * y[i]));
+		return inverse.map((row) => sum(row, (value, i) => value * xty[i]));
+	}
+	/** Polynomial fit of `y` on `x`. The predictor is standardised to keep the system stable. */
+	constructor(x, y, degree = 1) {
+		this.degree = degree;
+		this.centre = mean(x) ?? 0;
+		this.spread = Math.sqrt(mean(x, (value) => (value - this.centre) ** 2) ?? 0) || 1;
+		const design = x.map((value) => this.terms(value));
+		const width = degree + 1;
+		const inverse = invert(Array.from({ length: width }, (_, a) => Array.from({ length: width }, (_, b) => sum(design, (row) => row[a] * row[b]))));
+		const xty = Array.from({ length: width }, (_, a) => sum(design, (row, i) => row[a] * y[i]));
+		this.beta = inverse.map((row) => sum(row, (value, i) => value * xty[i]));
+		this.fitted = design.map((row) => sum(row, (value, i) => value * this.beta[i]));
+		this.residuals = y.map((value, i) => value - this.fitted[i]);
+		this.leverage = design.map((row) => sum(row, (value, a) => value * sum(row, (other, b) => other * inverse[a][b])));
+		this.parameters = width;
+		this.sigma = Math.sqrt(sum(this.residuals, (e) => e * e) / Math.max(1, y.length - width));
+	}
+	terms(value) {
+		const z = (value - this.centre) / this.spread;
+		return Array.from({ length: this.degree + 1 }, (_, power) => z ** power);
+	}
+	predict(x) {
+		return sum(this.terms(x), (value, i) => value * this.beta[i]);
+	}
+	/** Internally studentised residuals. */
+	get standardized() {
+		return this.residuals.map((e, i) => this.sigma ? e / (this.sigma * Math.sqrt(Math.max(1e-9, 1 - this.leverage[i]))) : 0);
+	}
+	/** Externally studentised residuals (leave-one-out sigma). */
+	get studentized() {
+		const df = this.residuals.length - this.parameters;
+		return this.standardized.map((r) => r * Math.sqrt(Math.max(0, (df - 1) / Math.max(1e-9, df - r * r))));
+	}
+	get cooks() {
+		return this.standardized.map((r, i) => r * r * this.leverage[i] / (this.parameters * Math.max(1e-9, 1 - this.leverage[i])));
+	}
+};
+export { RegressionFit };

package/dist/charts/statistics/RegressionInfluencePlot.js

@@ -0,0 +1,148 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { RegressionFit } from "./RegressionFit.js";
+import { RegressionForm } from "./ResidualPlot.js";
+import { StatisticalChart } from "./StatisticalChart.js";
+// src/charts/statistics/RegressionInfluencePlot.ts
+/** Whether bubble area shows influence. */
+var InfluenceEncoding = /* @__PURE__ */ function(InfluenceEncoding) {
+	InfluenceEncoding["Fixed"] = "fixed-dots";
+	InfluenceEncoding["CooksArea"] = "cooks-area";
+	return InfluenceEncoding;
+}({});
+/** Finds the few observations that steer a fit: high leverage combined with a large residual. */
+var RegressionInfluencePlot = class extends StatisticalChart {
+	static meta = {
+		id: "regression-influence-plot",
+		name: "Residuals vs leverage",
+		family: ChartFamily.Statistical,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Plots studentized residuals against leverage with Cook's distance contours to find influential observations.",
+		tags: [
+			"regression",
+			"leverage",
+			"cook's distance",
+			"outlier",
+			"diagnostic"
+		],
+		sample: (seed) => SampleData.points(seed, 60, 3),
+		variants: {
+			model: Object.values(RegressionForm),
+			encoding: Object.values(InfluenceEncoding),
+			contours: [true, false],
+			labels: [true, false]
+		}
+	};
+	defaults() {
+		return {
+			x: "x",
+			y: "y",
+			label: "label",
+			model: RegressionForm.Linear,
+			encoding: "fixed-dots",
+			contours: true,
+			labels: true
+		};
+	}
+	axisTitles() {
+		return {
+			x: "Leverage",
+			y: "Standardized residual"
+		};
+	}
+	parameters = 2;
+	points() {
+		const { data, x, y, model, label } = this.options;
+		const rows = this.complete(data, x, y);
+		if (rows.length < 4) return [];
+		const fit = new RegressionFit(rows.map((row) => +row[x]), rows.map((row) => +row[y]), model === RegressionForm.Quadratic ? 2 : 1);
+		const { standardized, cooks } = fit;
+		this.parameters = fit.parameters;
+		return rows.map((row, index) => ({
+			index,
+			name: String(row[label] ?? index + 1),
+			leverage: fit.leverage[index],
+			residual: standardized[index],
+			cook: cooks[index]
+		}));
+	}
+	contour(distance, sign, top, reach) {
+		return Array.from({ length: 30 }, (_, i) => {
+			const h = .002 + i / 29 * (top - .002);
+			return [h, sign * Math.sqrt(distance * this.parameters * (1 - h) / h)];
+		}).filter((d) => Math.abs(d[1]) <= reach);
+	}
+	scales(ctx) {
+		const points = this.points();
+		const top = Math.max(.16, ...points.map((d) => d.leverage)) * 1.12;
+		const reach = Math.max(3.2, ...points.map((d) => Math.abs(d.residual))) * 1.15;
+		return {
+			x: this.linear([0, top], [0, ctx.plot.width]),
+			y: this.linear([-reach, reach], [ctx.plot.height, 0])
+		};
+	}
+	plotMarks(ctx, axes) {
+		const { encoding, contours, labels } = this.options;
+		const points = this.points();
+		const [, top] = axes.x.domain(), [, reach] = axes.y.domain();
+		this.rules(ctx, "zero", [{
+			key: "zero",
+			from: [0, 0],
+			to: [top, 0],
+			strong: true
+		}], axes);
+		const levels = contours ? [.5, 1].flatMap((level) => [1, -1].map((sign) => ({
+			level,
+			sign,
+			points: this.contour(level, sign, top, reach)
+		}))).filter((d) => d.points.length > 1) : [];
+		this.traces(ctx, "contours", levels.map((d) => ({
+			key: `${d.level}/${d.sign}`,
+			color: ctx.theme.inkMuted,
+			dash: "5 4",
+			width: 1.5,
+			points: d.points,
+			tip: { title: `Cook's distance ${d.level}` }
+		})), axes);
+		this.notes(ctx, "contour-labels", levels.filter((d) => d.sign > 0).map((d) => {
+			const [x, y] = d.points.at(-1);
+			return {
+				key: `${d.level}`,
+				text: `D = ${d.level}`,
+				x: axes.x(x) - 2,
+				y: axes.y(y) - 5,
+				anchor: "end",
+				tone: "muted"
+			};
+		}));
+		const largest = Math.max(1e-9, ...points.map((d) => d.cook));
+		const radius = (d) => encoding === "cooks-area" ? Math.max(4, 16 * Math.sqrt(d.cook / largest)) : 4;
+		const concern = 4 / (points.length || 1);
+		const color = (d) => ctx.palette.sequential(.35 + .65 * Math.min(1, d.cook / (largest || 1)));
+		this.dots(ctx, "points", points, (d) => [axes.x(d.leverage), axes.y(d.residual)], color, (d) => ({
+			title: d.name,
+			color: color(d),
+			rows: [
+				["Leverage", +d.leverage.toFixed(3)],
+				["Residual", +d.residual.toFixed(3)],
+				["Cook's distance", +d.cook.toFixed(3)]
+			]
+		}), {
+			r: radius,
+			key: (d) => d.index,
+			ring: true,
+			opacity: 1
+		});
+		const top3 = labels ? [...points].sort((a, b) => b.cook - a.cook).slice(0, 3).filter((d) => d.cook > concern / 4) : [];
+		this.notes(ctx, "labels", top3.map((d) => ({
+			key: `${d.index}`,
+			text: d.name,
+			x: axes.x(d.leverage) - radius(d) - 3,
+			y: axes.y(d.residual) + 4,
+			anchor: "end",
+			tone: "ink"
+		})));
+	}
+};
+export { InfluenceEncoding, RegressionInfluencePlot };

package/dist/charts/statistics/ResidualPlot.js

@@ -0,0 +1,173 @@
+import { ChartFamily, CurveKind, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { RegressionFit } from "./RegressionFit.js";
+import { StatMath } from "./StatMath.js";
+import { StatisticalChart } from "./StatisticalChart.js";
+// src/charts/statistics/ResidualPlot.ts
+/** Shape of the regression being diagnosed. */
+var RegressionForm = /* @__PURE__ */ function(RegressionForm) {
+	RegressionForm["Linear"] = "linear-model";
+	RegressionForm["Quadratic"] = "quadratic-model";
+	return RegressionForm;
+}({});
+/** Residual scale on the vertical axis. */
+var ResidualScale = /* @__PURE__ */ function(ResidualScale) {
+	ResidualScale["Raw"] = "raw";
+	ResidualScale["Studentized"] = "studentized";
+	ResidualScale["ScaleLocation"] = "scale-location";
+	return ResidualScale;
+}({});
+/** What residuals are plotted against. */
+var ResidualHorizontal = /* @__PURE__ */ function(ResidualHorizontal) {
+	ResidualHorizontal["Fitted"] = "fitted";
+	ResidualHorizontal["Predictor"] = "predictor";
+	ResidualHorizontal["Order"] = "order";
+	return ResidualHorizontal;
+}({});
+/** Regression diagnostics: any pattern left in the residuals means the model missed something. */
+var ResidualPlot = class extends StatisticalChart {
+	static meta = {
+		id: "residual-plot",
+		name: "Residual plot",
+		family: ChartFamily.Statistical,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Plots regression residuals to reveal non-linearity, changing variance and outliers the fit has missed.",
+		tags: [
+			"regression",
+			"diagnostic",
+			"heteroscedasticity",
+			"scale-location"
+		],
+		sample: (seed) => SampleData.points(seed, 90, 3),
+		variants: {
+			model: Object.values(RegressionForm),
+			scale: Object.values(ResidualScale),
+			horizontal: Object.values(ResidualHorizontal),
+			smoother: [true, false],
+			envelope: [false, true],
+			stems: [false, true]
+		},
+		valid: ({ scale, envelope }) => !(scale === "scale-location" && envelope)
+	};
+	defaults() {
+		return {
+			x: "x",
+			y: "y",
+			group: "group",
+			model: "linear-model",
+			scale: "raw",
+			horizontal: "fitted",
+			smoother: true,
+			envelope: false,
+			stems: false
+		};
+	}
+	axisTitles() {
+		const { scale, horizontal } = this.options;
+		return {
+			x: {
+				["fitted"]: "Fitted value",
+				["predictor"]: "Predictor",
+				["order"]: "Observation order"
+			}[horizontal],
+			y: {
+				["raw"]: "Residual",
+				["studentized"]: "Studentized residual",
+				["scale-location"]: "√|standardized residual|"
+			}[scale]
+		};
+	}
+	fit() {
+		const { data, x, y, model, scale, horizontal } = this.options;
+		const rows = this.complete(data, x, y);
+		if (rows.length < 3) return {
+			fit: null,
+			points: []
+		};
+		const xs = rows.map((row) => +row[x]), ys = rows.map((row) => +row[y]);
+		const fit = new RegressionFit(xs, ys, model === "quadratic-model" ? 2 : 1);
+		const values = scale === "raw" ? fit.residuals : scale === "studentized" ? fit.studentized : fit.standardized.map((r) => Math.sqrt(Math.abs(r)));
+		return {
+			fit,
+			points: rows.map((row, index) => ({
+				index,
+				row,
+				value: values[index],
+				residual: fit.residuals[index],
+				fitted: fit.fitted[index],
+				along: horizontal === "fitted" ? fit.fitted[index] : horizontal === "predictor" ? xs[index] : index + 1
+			}))
+		};
+	}
+	limit(fit) {
+		return this.options.scale === "raw" ? 2 * (fit?.sigma ?? 0) : 2;
+	}
+	scales(ctx) {
+		const { fit, points } = this.fit();
+		const { scale, envelope } = this.options;
+		const values = points.map((d) => d.value);
+		const reach = Math.max(1e-9, ...values.map(Math.abs), envelope ? this.limit(fit) : 0) * 1.08;
+		return {
+			x: this.linear(this.span(points.map((d) => d.along)), [0, ctx.plot.width]),
+			y: this.linear(scale === "scale-location" ? [0, reach] : [-reach, reach], [ctx.plot.height, 0])
+		};
+	}
+	plotMarks(ctx, axes) {
+		const { smoother, envelope, stems, scale, group } = this.options;
+		const { fit, points } = this.fit();
+		const [left, right] = axes.x.domain();
+		const location = scale === "scale-location";
+		const color = (d) => ctx.palette.color(String(d.row[group] ?? "Observations"));
+		const limit = this.limit(fit);
+		this.ribbons(ctx, "envelope", envelope ? [{
+			key: "two-sigma",
+			color: ctx.theme.inkMuted,
+			opacity: .12,
+			points: [[
+				left,
+				-limit,
+				limit
+			], [
+				right,
+				-limit,
+				limit
+			]]
+		}] : [], axes);
+		this.rules(ctx, "zero", location ? [] : [{
+			key: "zero",
+			from: [left, 0],
+			to: [right, 0],
+			strong: true
+		}], axes);
+		const base = axes.y(0);
+		const lines = ctx.marks("stems", "line", stems ? points : [], (d) => d.index).attr("stroke", color).attr("stroke-width", 2).attr("stroke-opacity", .45);
+		ctx.set(lines, {
+			x1: (d) => axes.x(d.along),
+			x2: (d) => axes.x(d.along),
+			y1: base,
+			y2: (d) => axes.y(d.value)
+		});
+		const flagged = (d) => Math.abs(d.value) > limit && !location;
+		this.dots(ctx, "points", points, (d) => [axes.x(d.along), axes.y(d.value)], color, (d) => ({
+			title: `Observation ${d.index + 1}`,
+			color: color(d),
+			rows: [
+				[this.axisTitles().y, +d.value.toFixed(3)],
+				["Residual", +d.residual.toFixed(3)],
+				["Fitted", +d.fitted.toFixed(3)]
+			]
+		}), {
+			r: (d) => flagged(d) ? 6 : 4,
+			key: (d) => d.index,
+			stagger: 1
+		});
+		this.traces(ctx, "smoother", smoother && points.length > 4 ? [{
+			key: "LOWESS",
+			color: ctx.theme.ink,
+			curve: CurveKind.Monotone,
+			points: StatMath.lowess(points.map((d) => [d.along, d.value]))
+		}] : [], axes);
+	}
+};
+export { RegressionForm, ResidualHorizontal, ResidualPlot, ResidualScale };

package/dist/charts/statistics/ScreePlot.js

@@ -0,0 +1,210 @@
+import { ChartFamily, DataShape, Dimension, ScaleKind } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { StatMath } from "./StatMath.js";
+import { StatisticalChart } from "./StatisticalChart.js";
+import { group, mean, sum } from "d3";
+// src/charts/statistics/ScreePlot.ts
+/** Quantity on the vertical axis of a scree plot. */
+var ScreeMetric = /* @__PURE__ */ function(ScreeMetric) {
+	ScreeMetric["Eigenvalue"] = "eigenvalue";
+	ScreeMetric["Variance"] = "variance-share";
+	ScreeMetric["Cumulative"] = "cumulative-share";
+	return ScreeMetric;
+}({});
+/** Marks used for components. */
+var ScreeMarks = /* @__PURE__ */ function(ScreeMarks) {
+	ScreeMarks["Line"] = "line";
+	ScreeMarks["Bars"] = "bars";
+	ScreeMarks["Pareto"] = "pareto";
+	return ScreeMarks;
+}({});
+/** Retention rule drawn on the plot. */
+var ScreeReference = /* @__PURE__ */ function(ScreeReference) {
+	ScreeReference["None"] = "no-reference";
+	ScreeReference["Kaiser"] = "kaiser";
+	ScreeReference["BrokenStick"] = "broken-stick";
+	return ScreeReference;
+}({});
+/** Decides how many principal components or factors to keep, by finding where extra ones stop paying. */
+var ScreePlot = class extends StatisticalChart {
+	static meta = {
+		id: "scree-plot",
+		name: "Scree plot",
+		family: ChartFamily.Statistical,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Plots eigenvalues in descending order to choose how many principal components or factors to retain.",
+		tags: [
+			"pca",
+			"factor analysis",
+			"eigenvalues",
+			"dimensionality reduction"
+		],
+		sample: (seed) => {
+			const walks = SampleData.timeSeries(seed, 40, 8);
+			const standard = [...group(walks, (row) => row.series).values()].map((rows) => rows.map((row) => +row.value)).map((column) => {
+				const centre = mean(column), spread = Math.sqrt(sum(column, (v) => (v - centre) ** 2)) || 1;
+				return column.map((v) => (v - centre) / spread);
+			});
+			const correlation = standard.map((a) => standard.map((b) => sum(a, (v, i) => v * b[i])));
+			return StatMath.eigenvalues(correlation).map((eigenvalue, i) => ({
+				component: `PC${i + 1}`,
+				eigenvalue: +Math.max(.001, eigenvalue).toFixed(4)
+			}));
+		},
+		variants: {
+			metric: Object.values(ScreeMetric),
+			marks: Object.values(ScreeMarks),
+			reference: Object.values(ScreeReference),
+			scale: [ScaleKind.Linear, ScaleKind.Log],
+			elbow: [false, true]
+		},
+		valid: ({ metric, marks, reference, scale }) => {
+			if (scale === ScaleKind.Log) return metric === "eigenvalue" && marks === "line";
+			if (marks === "pareto" && metric !== "variance-share") return false;
+			return !(reference !== "no-reference" && metric === "cumulative-share");
+		}
+	};
+	defaults() {
+		return {
+			component: "component",
+			eigenvalue: "eigenvalue",
+			metric: "eigenvalue",
+			marks: "line",
+			reference: "no-reference",
+			scale: ScaleKind.Linear,
+			elbow: false
+		};
+	}
+	axisTitles() {
+		return {
+			x: "Component",
+			y: {
+				["eigenvalue"]: "Eigenvalue",
+				["variance-share"]: "Variance explained",
+				["cumulative-share"]: "Cumulative variance"
+			}[this.options.metric]
+		};
+	}
+	bars() {
+		const { data, component, eigenvalue, metric } = this.options;
+		const rows = this.complete(data, eigenvalue).sort((a, b) => +b[eigenvalue] - +a[eigenvalue]);
+		const total = sum(rows, (row) => Math.max(0, +row[eigenvalue])) || 1;
+		let running = 0;
+		return rows.map((row, index) => {
+			const value = Math.max(0, +row[eigenvalue]), share = value / total;
+			running += share;
+			return {
+				index,
+				name: String(row[component] ?? index + 1),
+				eigenvalue: value,
+				share,
+				running,
+				value: metric === "eigenvalue" ? value : metric === "variance-share" ? share : running
+			};
+		});
+	}
+	/** The component furthest from the chord joining first and last, which is the usual elbow. */
+	elbowIndex(bars) {
+		const last = bars.length - 1;
+		if (last < 2) return 0;
+		const reach = (i) => Math.abs(bars[i].value - (bars[0].value + (bars[last].value - bars[0].value) * i / last));
+		return bars.reduce((best, _, i) => reach(i) > reach(best) ? i : best, 1);
+	}
+	brokenStick(i, count, scale) {
+		return sum(Array.from({ length: count - i }, (_, k) => 1 / (i + k + 1))) / count * scale;
+	}
+	scales(ctx) {
+		const { metric, marks, scale } = this.options;
+		const bars = this.bars();
+		const stops = bars.map((d, i) => [i, d.name.length > 6 ? `${i + 1}` : d.name]).filter((_, i) => bars.length * 34 <= ctx.plot.width || i % Math.ceil(bars.length * 34 / ctx.plot.width) === 0);
+		const x = this.labelled(this.linear([-.6, Math.max(1, bars.length - 1) + .6], [0, ctx.plot.width]), stops);
+		const top = Math.max(1e-9, ...bars.map((d) => d.value), metric === "eigenvalue" ? 1 : 0) * 1.08;
+		if (scale === ScaleKind.Log) {
+			const low = Math.min(top / 10, ...bars.map((d) => d.value).filter((v) => v > 0));
+			return {
+				x,
+				y: this.logarithmic([low * .8, top], [ctx.plot.height, 0])
+			};
+		}
+		return {
+			x,
+			y: this.linear([0, marks === "pareto" || metric === "cumulative-share" ? 1.02 : top], [ctx.plot.height, 0])
+		};
+	}
+	plotMarks(ctx, axes) {
+		const { marks, reference, elbow, metric } = this.options;
+		const bars = this.bars(), ink = ctx.palette.color("Components");
+		const point = (d) => [axes.x(d.index), axes.y(d.value)];
+		const tip = (d) => ({
+			title: d.name,
+			color: ink,
+			rows: [
+				["Eigenvalue", +d.eigenvalue.toFixed(3)],
+				["Variance", `${(d.share * 100).toFixed(1)}%`],
+				["Cumulative", `${(d.running * 100).toFixed(1)}%`]
+			]
+		});
+		const [left, right] = axes.x.domain();
+		const scale = metric === "eigenvalue" ? sum(bars, (d) => d.eigenvalue) : 1;
+		const kaiser = metric === "eigenvalue" ? 1 : 1 / (bars.length || 1);
+		this.rules(ctx, "kaiser", reference === "kaiser" ? [{
+			key: "kaiser",
+			from: [left, kaiser],
+			to: [right, kaiser],
+			dash: "5 4"
+		}] : [], axes);
+		this.traces(ctx, "stick", reference === "broken-stick" ? [{
+			key: "Broken stick",
+			color: ctx.theme.inkMuted,
+			dash: "5 4",
+			points: bars.map((d) => [d.index, this.brokenStick(d.index, bars.length, scale)])
+		}] : [], axes);
+		this.notes(ctx, "reference-label", reference === "kaiser" ? [{
+			key: "kaiser",
+			text: "Kaiser criterion",
+			x: ctx.plot.width - 4,
+			y: axes.y(kaiser) - 5,
+			anchor: "end",
+			tone: "muted"
+		}] : []);
+		const barred = marks !== "line";
+		const step = axes.x(1) - axes.x(0), thick = Math.max(2, Math.min(step * .7, 40)), base = axes.y(axes.y.domain()[0]);
+		const rects = ctx.marks("bars", "rect", barred ? bars : [], (d) => d.index).attr("fill", ink).attr("rx", 3).attr("fill-opacity", marks === "pareto" ? .55 : 1);
+		const x = (d) => axes.x(d.index) - thick / 2;
+		ctx.set(rects, {
+			x,
+			width: thick,
+			y: (d) => axes.y(d.value),
+			height: (d) => base - axes.y(d.value)
+		}, {
+			x,
+			width: thick,
+			y: base,
+			height: 0
+		}, 20);
+		ctx.hover(rects, tip);
+		const line = marks === "pareto" ? bars.map((d) => [d.index, d.running]) : marks === "line" ? bars.map((d) => [d.index, d.value]) : [];
+		this.traces(ctx, "line", line.length ? [{
+			key: marks === "pareto" ? "Cumulative share" : "Scree",
+			color: marks === "pareto" ? ctx.theme.ink : ink,
+			points: line
+		}] : [], axes);
+		const markers = marks === "bars" ? [] : bars;
+		const place = (d) => marks === "pareto" ? [axes.x(d.index), axes.y(d.running)] : point(d);
+		this.dots(ctx, "points", markers, place, () => marks === "pareto" ? ctx.theme.ink : ink, tip, { key: (d) => d.index });
+		const bend = elbow && bars.length > 2 ? [bars[this.elbowIndex(bars)]] : [];
+		this.dots(ctx, "elbow", bend, point, () => ctx.theme.ink, tip, {
+			r: 7,
+			key: (d) => d.index
+		});
+		this.notes(ctx, "elbow-label", bend.map((d) => ({
+			key: "elbow",
+			text: "Elbow",
+			x: point(d)[0] + 11,
+			y: point(d)[1] - 8,
+			tone: "ink"
+		})));
+	}
+};
+export { ScreeMarks, ScreeMetric, ScreePlot, ScreeReference };