@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/scatter/MarginalScatter.js

@@ -0,0 +1,251 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { ScatterBinRule } from "./GridBinScatter.js";
+import { ScatterBase, ScatterScaling } from "./ScatterBase.js";
+import { ascending, bin, deviation, group, line, max, quantile, range, thresholdFreedmanDiaconis, thresholdScott, thresholdSturges } from "d3";
+// src/charts/scatter/MarginalScatter.ts
+var MarginalKind = /* @__PURE__ */ function(MarginalKind) {
+	MarginalKind["Histogram"] = "histogram";
+	MarginalKind["Density"] = "density";
+	MarginalKind["Box"] = "box";
+	MarginalKind["Violin"] = "violin";
+	return MarginalKind;
+}({});
+var MarginalSides = /* @__PURE__ */ function(MarginalSides) {
+	MarginalSides["Both"] = "both-margins";
+	MarginalSides["Top"] = "top-margin";
+	MarginalSides["Right"] = "right-margin";
+	return MarginalSides;
+}({});
+var MarginalSplit = /* @__PURE__ */ function(MarginalSplit) {
+	MarginalSplit["Overall"] = "overall";
+	MarginalSplit["PerGroup"] = "per-group";
+	return MarginalSplit;
+}({});
+var RULES = {
+	[ScatterBinRule.Sturges]: thresholdSturges,
+	[ScatterBinRule.Scott]: thresholdScott,
+	[ScatterBinRule.FreedmanDiaconis]: thresholdFreedmanDiaconis
+};
+var GAP = 8;
+/** The joint distribution beside both marginals: the classic joint plot. */
+var MarginalScatter = class extends ScatterBase {
+	static meta = {
+		id: "marginal-scatter",
+		name: "Marginal scatter",
+		family: ChartFamily.Relationship,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Frames a scatter plot with the distribution of each axis as a histogram, density, box or violin.",
+		tags: [
+			"joint plot",
+			"marginal histogram",
+			"seaborn jointplot"
+		],
+		sample: (seed) => SampleData.points(seed, 320, 3),
+		variants: {
+			marginal: [
+				"histogram",
+				"density",
+				"box",
+				"violin"
+			],
+			sides: [
+				"both-margins",
+				"top-margin",
+				"right-margin"
+			],
+			split: ["overall", "per-group"],
+			rule: [ScatterBinRule.Sturges, ScatterBinRule.FreedmanDiaconis],
+			scaling: [ScatterScaling.Linear, ScatterScaling.LogLog]
+		},
+		valid: (v) => v.marginal === "histogram" || v.rule === ScatterBinRule.Sturges
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			marginal: "histogram",
+			sides: "both-margins",
+			split: "overall",
+			rule: ScatterBinRule.Sturges,
+			marginSize: 52,
+			radius: 4.5
+		};
+	}
+	get onTop() {
+		return this.options.sides !== "right-margin";
+	}
+	get onRight() {
+		return this.options.sides !== "top-margin";
+	}
+	frame(ctx) {
+		const room = Math.min(this.options.marginSize, ctx.plot.height / 3, ctx.plot.width / 3) + GAP;
+		return {
+			left: 0,
+			right: ctx.plot.width - (this.onRight ? room : 0),
+			top: this.onTop ? room : 0,
+			bottom: ctx.plot.height
+		};
+	}
+	series(points, axis) {
+		const value = (point) => axis === "x" ? point.px : point.py;
+		return (this.options.split === "per-group" ? [...group(points, (point) => point.group)] : [["All", points]]).map(([key, set]) => ({
+			key,
+			points: set,
+			values: set.map(value)
+		}));
+	}
+	fill(ctx, key) {
+		return this.options.split === "per-group" ? ctx.palette.color(key) : ctx.theme.inkMuted;
+	}
+	/** Maps (along, depth) in margin coordinates to plot coordinates: depth grows away from the frame. */
+	toPlot(ctx, axis) {
+		const { right, top } = this.frame(ctx);
+		return axis === "x" ? (along, depth) => [along, top - GAP - depth] : (along, depth) => [right + GAP + depth, along];
+	}
+	span(ctx, axis) {
+		const { left, right, top, bottom } = this.frame(ctx);
+		return axis === "x" ? [left, right] : [top, bottom];
+	}
+	room(ctx) {
+		const { top } = this.frame(ctx);
+		return (this.onTop ? top : ctx.plot.width - this.frame(ctx).right) - GAP;
+	}
+	plotPoints(ctx, _axes, points) {
+		this.drawDots(ctx, points);
+		const axes = [...this.onTop ? ["x"] : [], ...this.onRight ? ["y"] : []];
+		const { marginal } = this.options;
+		const bars = marginal === "histogram" ? axes.flatMap((axis) => this.histogram(ctx, points, axis).map((bar) => ({
+			...bar,
+			axis
+		}))) : [];
+		const curves = marginal === "density" ? axes.flatMap((axis) => this.densities(ctx, points, axis, false)) : marginal === "violin" ? axes.flatMap((axis) => this.densities(ctx, points, axis, true)) : [];
+		const boxes = marginal === "box" ? axes.flatMap((axis) => this.boxes(ctx, points, axis)) : [];
+		const rects = ctx.marks("margin-bars", "rect", bars, (d) => d.id).attr("fill", (d) => this.fill(ctx, d.key)).attr("rx", 1.5);
+		ctx.set(rects, {
+			x: (d) => d.axis === "x" ? d.start : this.toPlot(ctx, "y")(0, d.low)[0],
+			y: (d) => d.axis === "x" ? this.toPlot(ctx, "x")(0, d.high)[1] : d.start,
+			width: (d) => d.axis === "x" ? Math.max(.5, d.end - d.start - 2) : d.high - d.low,
+			height: (d) => d.axis === "x" ? d.high - d.low : Math.max(.5, d.end - d.start - 2)
+		});
+		ctx.hover(rects, (d) => ({
+			title: d.key,
+			color: this.fill(ctx, d.key),
+			rows: [["Count", d.count]]
+		}));
+		const shapes = ctx.marks("margin-curves", "path", curves, (d) => d.id).attr("fill", (d) => this.fill(ctx, d.key)).attr("fill-opacity", .32).attr("stroke", (d) => this.fill(ctx, d.key)).attr("stroke-width", 1.5);
+		ctx.set(shapes, { d: (d) => d.d });
+		ctx.hover(shapes, (d) => ({
+			title: d.key,
+			color: this.fill(ctx, d.key)
+		}));
+		this.drawBoxes(ctx, boxes);
+	}
+	histogram(ctx, points, axis) {
+		const [low, high] = this.span(ctx, axis), all = this.series(points, axis), room = this.room(ctx);
+		const values = all.flatMap((set) => set.values);
+		if (!values.length) return [];
+		const count = RULES[this.options.rule](values, low, high) || 1;
+		const edges = range(1, count).map((i) => low + (high - low) * i / count);
+		const make = bin().domain([low, high]).thresholds(edges);
+		const layers = all.map((set) => ({
+			key: set.key,
+			bins: make(set.values)
+		}));
+		const totals = layers[0].bins.map((_, i) => layers.reduce((sum, layer) => sum + layer.bins[i].length, 0));
+		const peak = max(totals) || 1;
+		return totals.flatMap((_, i) => {
+			let cursor = 0;
+			return layers.flatMap((layer) => {
+				const cell = layer.bins[i], start = cursor;
+				cursor += cell.length;
+				return cell.length ? [{
+					id: `${axis}/${layer.key}/${i}`,
+					key: layer.key,
+					start: cell.x0,
+					end: cell.x1,
+					low: start / peak * room,
+					high: cursor / peak * room,
+					count: cell.length
+				}] : [];
+			});
+		});
+	}
+	densities(ctx, points, axis, mirrored) {
+		const [low, high] = this.span(ctx, axis), all = this.series(points, axis), place = this.toPlot(ctx, axis), room = this.room(ctx);
+		const grid = range(0, 61).map((i) => low + (high - low) * i / 60);
+		const curves = all.filter((set) => set.values.length > 1).map((set) => {
+			const bandwidth = 1.06 * (deviation(set.values) || 1) * set.values.length ** -.2;
+			return {
+				key: set.key,
+				heights: grid.map((at) => set.values.reduce((sum, v) => sum + Math.exp(-(((at - v) / bandwidth) ** 2) / 2), 0) / bandwidth)
+			};
+		});
+		const peak = max(curves.flatMap((curve) => curve.heights)) || 1;
+		const thick = room / (mirrored ? curves.length : 1);
+		return curves.map((curve, i) => {
+			const base = mirrored ? thick * i + thick / 2 : 0, scale = (mirrored ? thick / 2 : room) / peak;
+			const samples = grid.map((at, k) => ({
+				at,
+				reach: curve.heights[k] * scale
+			}));
+			const outer = samples.map((s) => place(s.at, base + s.reach)), inner = samples.map((s) => place(s.at, mirrored ? base - s.reach : 0));
+			const contour = line()([...outer, ...inner.reverse()]);
+			return {
+				id: `${axis}/${curve.key}`,
+				key: curve.key,
+				d: `${contour}Z`
+			};
+		});
+	}
+	boxes(ctx, points, axis) {
+		const all = this.series(points, axis).filter((set) => set.values.length), room = this.room(ctx);
+		const thick = Math.min(room / (all.length || 1), 22);
+		return all.map((set, i) => {
+			const sorted = [...set.values].sort(ascending);
+			const q1 = quantile(sorted, .25), median = quantile(sorted, .5), q3 = quantile(sorted, .75), iqr = q3 - q1;
+			const low = sorted.find((v) => v >= q1 - 1.5 * iqr), high = [...sorted].reverse().find((v) => v <= q3 + 1.5 * iqr);
+			return {
+				id: `${axis}/${set.key}`,
+				key: set.key,
+				axis,
+				q1,
+				median,
+				q3,
+				low,
+				high,
+				lane: thick * i + thick / 2,
+				thick: thick - 4
+			};
+		});
+	}
+	drawBoxes(ctx, boxes) {
+		const along = (d, a, depth) => this.toPlot(ctx, d.axis)(a, depth);
+		const whiskers = ctx.marks("margin-whiskers", "line", boxes, (d) => d.id).attr("stroke", (d) => this.fill(ctx, d.key)).attr("stroke-width", 1.5);
+		ctx.set(whiskers, {
+			x1: (d) => along(d, d.low, d.lane)[0],
+			y1: (d) => along(d, d.low, d.lane)[1],
+			x2: (d) => along(d, d.high, d.lane)[0],
+			y2: (d) => along(d, d.high, d.lane)[1]
+		});
+		const frames = ctx.marks("margin-boxes", "rect", boxes, (d) => d.id).attr("fill", (d) => this.fill(ctx, d.key)).attr("rx", 2);
+		ctx.set(frames, {
+			x: (d) => d.axis === "x" ? Math.min(d.q1, d.q3) : along(d, 0, d.lane - d.thick / 2)[0],
+			y: (d) => d.axis === "x" ? along(d, 0, d.lane + d.thick / 2)[1] : Math.min(d.q1, d.q3),
+			width: (d) => d.axis === "x" ? Math.abs(d.q3 - d.q1) : d.thick,
+			height: (d) => d.axis === "x" ? d.thick : Math.abs(d.q3 - d.q1)
+		});
+		ctx.hover(frames, (d) => ({
+			title: d.key,
+			color: this.fill(ctx, d.key)
+		}));
+		const medians = ctx.marks("margin-medians", "line", boxes, (d) => d.id).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
+		ctx.set(medians, {
+			x1: (d) => along(d, d.median, d.lane - d.thick / 2)[0],
+			y1: (d) => along(d, d.median, d.lane - d.thick / 2)[1],
+			x2: (d) => along(d, d.median, d.lane + d.thick / 2)[0],
+			y2: (d) => along(d, d.median, d.lane + d.thick / 2)[1]
+		});
+	}
+};
+export { MarginalKind, MarginalScatter, MarginalSides, MarginalSplit };

package/dist/charts/scatter/ParetoScatter.js

@@ -0,0 +1,146 @@
+import { ChartFamily, CurveKind, DataShape, Dimension } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { SampleData } from "../../data/SampleData.js";
+import { ScatterBase } from "./ScatterBase.js";
+import { ascending, line } from "d3";
+// src/charts/scatter/ParetoScatter.ts
+var ParetoGoal = /* @__PURE__ */ function(ParetoGoal) {
+	ParetoGoal["MaxMax"] = "maximise-both";
+	ParetoGoal["MaxMin"] = "maximise-x-minimise-y";
+	ParetoGoal["MinMax"] = "minimise-x-maximise-y";
+	ParetoGoal["MinMin"] = "minimise-both";
+	return ParetoGoal;
+}({});
+var ParetoStep = /* @__PURE__ */ function(ParetoStep) {
+	ParetoStep["Stairs"] = "stairs";
+	ParetoStep["Straight"] = "straight";
+	ParetoStep["Smooth"] = "smooth";
+	return ParetoStep;
+}({});
+/** Finds the non-dominated trade-off frontier in a two-objective cloud. */
+var ParetoScatter = class extends ScatterBase {
+	static meta = {
+		id: "pareto-scatter",
+		name: "Pareto frontier scatter",
+		family: ChartFamily.Relationship,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Traces the points no other point beats on both objectives, exposing the best trade-offs.",
+		tags: [
+			"pareto front",
+			"efficient frontier",
+			"skyline",
+			"trade-off"
+		],
+		sample: (seed) => SampleData.points(seed, 110, 3).map((row) => ({
+			...row,
+			y: +(120 - +row.y - +row.x * .2).toFixed(2)
+		})),
+		variants: {
+			goal: [
+				"maximise-both",
+				"maximise-x-minimise-y",
+				"minimise-x-maximise-y",
+				"minimise-both"
+			],
+			step: ["stairs", "straight"],
+			fronts: [
+				1,
+				2,
+				3
+			],
+			dominated: [true, false]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			goal: "maximise-both",
+			step: "stairs",
+			fronts: 1,
+			dominated: true
+		};
+	}
+	get xUp() {
+		return this.options.goal === "maximise-both" || this.options.goal === "maximise-x-minimise-y";
+	}
+	get yUp() {
+		return this.options.goal === "maximise-both" || this.options.goal === "minimise-x-maximise-y";
+	}
+	dominates(a, b) {
+		const dx = (a.x - b.x) * (this.xUp ? 1 : -1), dy = (a.y - b.y) * (this.yUp ? 1 : -1);
+		return dx >= 0 && dy >= 0 && (dx > 0 || dy > 0);
+	}
+	peel(points) {
+		const layers = [];
+		let rest = points;
+		while (rest.length && layers.length < this.options.fronts) {
+			const front = rest.filter((point) => !rest.some((other) => this.dominates(other, point)));
+			layers.push(front.sort((a, b) => ascending(a.px, b.px) || ascending(a.py, b.py)));
+			const taken = new Set(front);
+			rest = rest.filter((point) => !taken.has(point));
+		}
+		return layers;
+	}
+	/** Stair vertices: a maximised x keeps the next point's height, a minimised x holds the last. */
+	vertices(front) {
+		const corners = [];
+		front.forEach((point, i) => {
+			const prior = front[i - 1];
+			if (prior && this.options.step === "stairs") corners.push(this.xUp ? [prior.px, point.py] : [point.px, prior.py]);
+			corners.push([point.px, point.py]);
+		});
+		return corners;
+	}
+	plotPoints(ctx, _axes, points) {
+		const { left, right, top, bottom } = this.frame(ctx), { step, dominated } = this.options;
+		const layers = this.peel(points);
+		const trace = line().curve(Scales.curve(step === "smooth" ? CurveKind.Monotone : CurveKind.Linear));
+		const paths = layers.filter((front) => front.length > 1).map((front, i) => ({
+			rank: i,
+			corners: this.vertices(front)
+		}));
+		const color = (rank) => ctx.palette.color(`Front ${rank + 1}`);
+		const first = paths[0]?.corners;
+		const worstY = this.yUp ? bottom : top;
+		const region = dominated && first ? [[
+			[first[0][0], worstY],
+			...first,
+			[first[first.length - 1][0], worstY]
+		]] : [];
+		const reach = dominated && first ? [{
+			x: this.xUp ? left : first[first.length - 1][0],
+			w: this.xUp ? first[0][0] - left : right - first[first.length - 1][0]
+		}] : [];
+		const fill = ctx.marks("dominated", "path", region).attr("fill", ctx.theme.inkMuted).attr("fill-opacity", .12).attr("stroke", "none");
+		ctx.set(fill, { d: (d) => `${line()(d)}Z` });
+		const side = ctx.marks("dominated-side", "rect", reach).attr("fill", ctx.theme.inkMuted).attr("fill-opacity", .12);
+		const outer = this.xUp ? first?.[0]?.[1] : first?.[first.length - 1]?.[1];
+		ctx.set(side, {
+			x: (d) => d.x,
+			width: (d) => Math.max(0, d.w),
+			y: this.yUp ? outer ?? 0 : top,
+			height: Math.max(0, this.yUp ? bottom - (outer ?? 0) : (outer ?? 0) - top)
+		});
+		const onFront = new Map(layers.flatMap((front, rank) => front.map((point) => [point.index, rank])));
+		this.drawDots(ctx, points.filter((point) => !onFront.has(point.index)), {
+			name: "context",
+			fill: () => ctx.theme.inkMuted,
+			radius: this.options.radius - 1.5
+		});
+		const lines = ctx.marks("fronts", "path", paths, (d) => d.rank).attr("fill", "none").attr("stroke", (d) => color(d.rank)).attr("stroke-width", 2).attr("stroke-linejoin", "round");
+		ctx.set(lines, { d: (d) => trace(d.corners) });
+		ctx.drawOn(lines);
+		ctx.hover(lines, (d) => ({
+			title: `Front ${d.rank + 1}`,
+			color: color(d.rank),
+			rows: [["Points", layers[d.rank].length]]
+		}));
+		this.drawDots(ctx, points.filter((point) => onFront.has(point.index)), { fill: (point) => color(onFront.get(point.index)) });
+	}
+	registerColors() {}
+	hue(ctx) {
+		return ctx.theme.inkMuted;
+	}
+};
+export { ParetoGoal, ParetoScatter, ParetoStep };

package/dist/charts/scatter/QuadrantChart.js

@@ -0,0 +1,195 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { ScatterBase, ScatterScaling } from "./ScatterBase.js";
+import { extent, mean, median } from "d3";
+// src/charts/scatter/QuadrantChart.ts
+var QuadrantSplit = /* @__PURE__ */ function(QuadrantSplit) {
+	QuadrantSplit["Mean"] = "mean";
+	QuadrantSplit["Median"] = "median";
+	QuadrantSplit["Midrange"] = "midrange";
+	return QuadrantSplit;
+}({});
+/** Splits two measures at a threshold into four named zones, for priority and positioning matrices. */
+var QuadrantChart = class extends ScatterBase {
+	static meta = {
+		id: "quadrant-scatter",
+		name: "Quadrant chart",
+		family: ChartFamily.Relationship,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Divides a scatter plot into four zones around chosen thresholds to classify every point.",
+		tags: [
+			"magic quadrant",
+			"priority matrix",
+			"impact effort",
+			"bcg"
+		],
+		sample: (seed) => SampleData.points(seed, 70, 3),
+		variants: {
+			split: [
+				"mean",
+				"median",
+				"midrange"
+			],
+			shading: [true, false],
+			zoneLabels: [true, false],
+			diagonal: [false, true],
+			scaling: [
+				ScatterScaling.Linear,
+				ScatterScaling.SemilogX,
+				ScatterScaling.SemilogY,
+				ScatterScaling.LogLog
+			]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			split: "mean",
+			shading: true,
+			zoneLabels: true,
+			diagonal: false,
+			zones: [
+				"High–high",
+				"High–low",
+				"Low–low",
+				"Low–high"
+			]
+		};
+	}
+	cut = {
+		x: 0,
+		y: 0
+	};
+	threshold(values) {
+		const { split } = this.options;
+		if (split === "median") return median(values) ?? 0;
+		if (split === "midrange") {
+			const [low = 0, high = 0] = extent(values);
+			return (low + high) / 2;
+		}
+		return mean(values) ?? 0;
+	}
+	zoneName(point, xCut, yCut) {
+		const [tr, br, bl, tl] = this.options.zones;
+		return point.x >= xCut ? point.y >= yCut ? tr : br : point.y >= yCut ? tl : bl;
+	}
+	legendItems() {
+		return this.options.zoneLabels ? [] : super.legendItems();
+	}
+	plotPoints(ctx, axes, points) {
+		const { xSplit, ySplit, zones, shading, zoneLabels, diagonal } = this.options;
+		const { left, right, top, bottom } = this.frame(ctx);
+		const xCut = xSplit ?? this.threshold(points.map((point) => point.x));
+		const yCut = ySplit ?? this.threshold(points.map((point) => point.y));
+		this.cut = {
+			x: xCut,
+			y: yCut
+		};
+		const finite = (value, fallback) => Number.isFinite(value) ? value : fallback;
+		const midX = finite(axes.x(xCut), (left + right) / 2), midY = finite(axes.y(yCut), (top + bottom) / 2);
+		const count = (name) => points.filter((point) => this.zoneName(point, xCut, yCut) === name).length;
+		const [tr, br, bl, tl] = zones;
+		const layout = [
+			{
+				name: tr,
+				x0: midX,
+				x1: right,
+				y0: top,
+				y1: midY,
+				count: count(tr),
+				right: true,
+				high: true
+			},
+			{
+				name: br,
+				x0: midX,
+				x1: right,
+				y0: midY,
+				y1: bottom,
+				count: count(br),
+				right: true,
+				high: false
+			},
+			{
+				name: bl,
+				x0: left,
+				x1: midX,
+				y0: midY,
+				y1: bottom,
+				count: count(bl),
+				right: false,
+				high: false
+			},
+			{
+				name: tl,
+				x0: left,
+				x1: midX,
+				y0: top,
+				y1: midY,
+				count: count(tl),
+				right: false,
+				high: true
+			}
+		];
+		const tint = ctx.marks("zones", "rect", shading ? layout : [], (d) => d.name).attr("fill", (d) => ctx.palette.color(d.name)).attr("fill-opacity", .08);
+		ctx.set(tint, {
+			x: (d) => d.x0,
+			y: (d) => d.y0,
+			width: (d) => Math.max(0, d.x1 - d.x0),
+			height: (d) => Math.max(0, d.y1 - d.y0)
+		});
+		ctx.hover(tint, (d) => ({
+			title: d.name,
+			color: ctx.palette.color(d.name),
+			rows: [["Points", d.count]]
+		}));
+		const rules = [{
+			x1: midX,
+			x2: midX,
+			y1: top,
+			y2: bottom
+		}, {
+			x1: left,
+			x2: right,
+			y1: midY,
+			y2: midY
+		}];
+		const cuts = ctx.marks("splits", "line", rules).attr("stroke", ctx.theme.inkSecondary).attr("stroke-width", 1.5);
+		ctx.set(cuts, {
+			x1: (d) => d.x1,
+			x2: (d) => d.x2,
+			y1: (d) => d.y1,
+			y2: (d) => d.y2
+		});
+		const [xLow, xHigh] = axes.x.domain(), [yLow, yHigh] = axes.y.domain();
+		const from = Math.max(xLow, yLow), to = Math.min(xHigh, yHigh);
+		const parity = diagonal && from < to ? [{
+			x1: axes.x(from),
+			y1: axes.y(from),
+			x2: axes.x(to),
+			y2: axes.y(to)
+		}] : [];
+		const dashes = ctx.marks("parity", "line", parity).attr("stroke", ctx.theme.axis).attr("stroke-width", 1.5).attr("stroke-dasharray", "4 4");
+		ctx.set(dashes, {
+			x1: (d) => d.x1,
+			x2: (d) => d.x2,
+			y1: (d) => d.y1,
+			y2: (d) => d.y2
+		});
+		this.drawDots(ctx, points);
+		const named = zoneLabels ? layout.filter((d) => d.x1 - d.x0 > 70 && d.y1 - d.y0 > 20) : [];
+		const titles = ctx.marks("zone-labels", "text", named, (d) => d.name).attr("text-anchor", (d) => d.right ? "end" : "start").text((d) => `${d.name} · ${d.count}`);
+		ctx.text(titles, 11, "secondary").attr("font-weight", 600);
+		this.halo(titles, ctx);
+		ctx.set(titles, {
+			x: (d) => d.right ? d.x1 - 6 : d.x0 + 6,
+			y: (d) => d.high ? d.y0 + 14 : d.y1 - 7
+		});
+	}
+	registerColors() {}
+	hue(ctx, point) {
+		return ctx.palette.color(this.zoneName(point, this.cut.x, this.cut.y));
+	}
+};
+export { QuadrantChart, QuadrantSplit };