@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/radial/radialEnums.js

@@ -0,0 +1,201 @@
+// src/charts/radial/radialEnums.ts
+var PolarSort = /* @__PURE__ */ function(PolarSort) {
+	PolarSort["Data"] = "data";
+	PolarSort["Descending"] = "descending";
+	PolarSort["Ascending"] = "ascending";
+	return PolarSort;
+}({});
+/** Angular extent: whole circle, 270° dial, or upper half disc. */
+var PolarSpan = /* @__PURE__ */ function(PolarSpan) {
+	PolarSpan["Full"] = "full";
+	PolarSpan["Gauge"] = "gauge";
+	PolarSpan["Half"] = "half";
+	return PolarSpan;
+}({});
+var PolarLabels = /* @__PURE__ */ function(PolarLabels) {
+	PolarLabels["Rim"] = "rim";
+	PolarLabels["Tip"] = "tip";
+	PolarLabels["None"] = "none";
+	return PolarLabels;
+}({});
+var PolarDirection = /* @__PURE__ */ function(PolarDirection) {
+	PolarDirection["Outward"] = "outward";
+	PolarDirection["Inward"] = "inward";
+	return PolarDirection;
+}({});
+var PolarLayout = /* @__PURE__ */ function(PolarLayout) {
+	PolarLayout["Overlay"] = "overlay";
+	PolarLayout["Concentric"] = "concentric";
+	return PolarLayout;
+}({});
+var RadarGrid = /* @__PURE__ */ function(RadarGrid) {
+	RadarGrid["Polygon"] = "polygon";
+	RadarGrid["Circle"] = "circle";
+	return RadarGrid;
+}({});
+var RadarScaling = /* @__PURE__ */ function(RadarScaling) {
+	RadarScaling["Linear"] = "linear";
+	RadarScaling["Sqrt"] = "sqrt";
+	RadarScaling["Log"] = "log";
+	RadarScaling["PerAxis"] = "per-axis";
+	return RadarScaling;
+}({});
+var RadarLayout = /* @__PURE__ */ function(RadarLayout) {
+	RadarLayout["Overlay"] = "overlay";
+	RadarLayout["Facets"] = "facets";
+	return RadarLayout;
+}({});
+var RadialBarStack = /* @__PURE__ */ function(RadialBarStack) {
+	RadialBarStack["Total"] = "total";
+	RadialBarStack["Stacked"] = "stacked";
+	RadialBarStack["Grouped"] = "grouped";
+	return RadialBarStack;
+}({});
+var CircularBarplotArrange = /* @__PURE__ */ function(CircularBarplotArrange) {
+	CircularBarplotArrange["Grouped"] = "grouped";
+	CircularBarplotArrange["Stacked"] = "stacked";
+	return CircularBarplotArrange;
+}({});
+var RadialColumnMark = /* @__PURE__ */ function(RadialColumnMark) {
+	RadialColumnMark["Column"] = "column";
+	RadialColumnMark["Lollipop"] = "lollipop";
+	return RadialColumnMark;
+}({});
+var RadialBaseline = /* @__PURE__ */ function(RadialBaseline) {
+	RadialBaseline["Hole"] = "hole";
+	RadialBaseline["Mean"] = "mean";
+	RadialBaseline["Range"] = "range";
+	return RadialBaseline;
+}({});
+var RadialStackOffset = /* @__PURE__ */ function(RadialStackOffset) {
+	RadialStackOffset["None"] = "none";
+	RadialStackOffset["Expand"] = "expand";
+	RadialStackOffset["Silhouette"] = "silhouette";
+	RadialStackOffset["Wiggle"] = "wiggle";
+	return RadialStackOffset;
+}({});
+var RadialStackOrder = /* @__PURE__ */ function(RadialStackOrder) {
+	RadialStackOrder["Data"] = "data";
+	RadialStackOrder["Ascending"] = "ascending";
+	RadialStackOrder["InsideOut"] = "inside-out";
+	return RadialStackOrder;
+}({});
+var TimeSpiralMark = /* @__PURE__ */ function(TimeSpiralMark) {
+	TimeSpiralMark["Ribbon"] = "ribbon";
+	TimeSpiralMark["Bars"] = "bars";
+	TimeSpiralMark["Heat"] = "heat";
+	TimeSpiralMark["Dots"] = "dots";
+	TimeSpiralMark["Line"] = "line";
+	return TimeSpiralMark;
+}({});
+var TimeSpiralGrowth = /* @__PURE__ */ function(TimeSpiralGrowth) {
+	TimeSpiralGrowth["Archimedean"] = "archimedean";
+	TimeSpiralGrowth["Logarithmic"] = "logarithmic";
+	return TimeSpiralGrowth;
+}({});
+var CoxcombLayering = /* @__PURE__ */ function(CoxcombLayering) {
+	CoxcombLayering["LargestBack"] = "largest-back";
+	CoxcombLayering["Stacked"] = "stacked";
+	return CoxcombLayering;
+}({});
+var CoxcombLayout = /* @__PURE__ */ function(CoxcombLayout) {
+	CoxcombLayout["Single"] = "single";
+	CoxcombLayout["Twin"] = "twin";
+	return CoxcombLayout;
+}({});
+var ClockMark = /* @__PURE__ */ function(ClockMark) {
+	ClockMark["Wedges"] = "wedges";
+	ClockMark["Area"] = "area";
+	ClockMark["Heat"] = "heat";
+	ClockMark["Dots"] = "dots";
+	return ClockMark;
+}({});
+var ClockDial = /* @__PURE__ */ function(ClockDial) {
+	ClockDial["Day"] = "day";
+	ClockDial["Split"] = "split";
+	return ClockDial;
+}({});
+var ClockOrigin = /* @__PURE__ */ function(ClockOrigin) {
+	ClockOrigin["Midnight"] = "midnight";
+	ClockOrigin["Noon"] = "noon";
+	return ClockOrigin;
+}({});
+var WindBinning = /* @__PURE__ */ function(WindBinning) {
+	WindBinning["Equal"] = "equal";
+	WindBinning["Quantile"] = "quantile";
+	return WindBinning;
+}({});
+var CircularHeatCell = /* @__PURE__ */ function(CircularHeatCell) {
+	CircularHeatCell["Arc"] = "arc";
+	CircularHeatCell["Dot"] = "dot";
+	return CircularHeatCell;
+}({});
+var CircularHeatOrder = /* @__PURE__ */ function(CircularHeatOrder) {
+	CircularHeatOrder["Data"] = "data";
+	CircularHeatOrder["RowMean"] = "row-mean";
+	return CircularHeatOrder;
+}({});
+var RadialHistogramBinning = /* @__PURE__ */ function(RadialHistogramBinning) {
+	RadialHistogramBinning["Sturges"] = "sturges";
+	RadialHistogramBinning["Scott"] = "scott";
+	RadialHistogramBinning["SquareRoot"] = "square-root";
+	return RadialHistogramBinning;
+}({});
+var RadialHistogramMark = /* @__PURE__ */ function(RadialHistogramMark) {
+	RadialHistogramMark["Wedge"] = "wedge";
+	RadialHistogramMark["Rose"] = "rose";
+	RadialHistogramMark["Outline"] = "outline";
+	return RadialHistogramMark;
+}({});
+var SunburstBarSizing = /* @__PURE__ */ function(SunburstBarSizing) {
+	SunburstBarSizing["Bars"] = "bars";
+	SunburstBarSizing["Partition"] = "partition";
+	return SunburstBarSizing;
+}({});
+var SunburstBarLevels = /* @__PURE__ */ function(SunburstBarLevels) {
+	SunburstBarLevels["All"] = "all";
+	SunburstBarLevels["Top"] = "top";
+	return SunburstBarLevels;
+}({});
+var PolarOverlay = /* @__PURE__ */ function(PolarOverlay) {
+	PolarOverlay["None"] = "none";
+	PolarOverlay["Centroids"] = "centroids";
+	PolarOverlay["Hull"] = "hull";
+	return PolarOverlay;
+}({});
+var RadialDumbbellConnector = /* @__PURE__ */ function(RadialDumbbellConnector) {
+	RadialDumbbellConnector["Line"] = "line";
+	RadialDumbbellConnector["Capsule"] = "capsule";
+	RadialDumbbellConnector["Arrow"] = "arrow";
+	return RadialDumbbellConnector;
+}({});
+var RadialDumbbellSort = /* @__PURE__ */ function(RadialDumbbellSort) {
+	RadialDumbbellSort["Data"] = "data";
+	RadialDumbbellSort["Gap"] = "gap";
+	RadialDumbbellSort["High"] = "high";
+	return RadialDumbbellSort;
+}({});
+var RadialBoxMark = /* @__PURE__ */ function(RadialBoxMark) {
+	RadialBoxMark["Box"] = "box";
+	RadialBoxMark["Violin"] = "violin";
+	RadialBoxMark["Strip"] = "strip";
+	return RadialBoxMark;
+}({});
+var RadialWhisker = /* @__PURE__ */ function(RadialWhisker) {
+	RadialWhisker["Tukey"] = "tukey";
+	RadialWhisker["Percentile"] = "percentile";
+	RadialWhisker["MinMax"] = "min-max";
+	return RadialWhisker;
+}({});
+var RadialGanttLayout = /* @__PURE__ */ function(RadialGanttLayout) {
+	RadialGanttLayout["Rows"] = "rows";
+	RadialGanttLayout["Packed"] = "packed";
+	return RadialGanttLayout;
+}({});
+var RadialGanttSort = /* @__PURE__ */ function(RadialGanttSort) {
+	RadialGanttSort["Start"] = "start";
+	RadialGanttSort["Group"] = "group";
+	RadialGanttSort["Duration"] = "duration";
+	return RadialGanttSort;
+}({});
+export { CircularBarplotArrange, CircularHeatCell, CircularHeatOrder, ClockDial, ClockMark, ClockOrigin, CoxcombLayering, CoxcombLayout, PolarDirection, PolarLabels, PolarLayout, PolarOverlay, PolarSort, PolarSpan, RadarGrid, RadarLayout, RadarScaling, RadialBarStack, RadialBaseline, RadialBoxMark, RadialColumnMark, RadialDumbbellConnector, RadialDumbbellSort, RadialGanttLayout, RadialGanttSort, RadialHistogramBinning, RadialHistogramMark, RadialStackOffset, RadialStackOrder, RadialWhisker, SunburstBarLevels, SunburstBarSizing, TimeSpiralGrowth, TimeSpiralMark, WindBinning };

package/dist/charts/scatter/BubbleChart.js

@@ -0,0 +1,123 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { ScatterBase, ScatterMarker, ScatterScaling } from "./ScatterBase.js";
+import { descending, forceCollide, forceSimulation, forceX, forceY, format, max, scaleSqrt } from "d3";
+// src/charts/scatter/BubbleChart.ts
+var BubblePlacement = /* @__PURE__ */ function(BubblePlacement) {
+	BubblePlacement["Exact"] = "exact";
+	BubblePlacement["Separated"] = "separated";
+	return BubblePlacement;
+}({});
+/** Scatter with a third measure in bubble area. Separated placement trades exact position for legibility. */
+var BubbleChart = class extends ScatterBase {
+	static meta = {
+		id: "bubble-scatter",
+		name: "Bubble chart",
+		family: ChartFamily.Relationship,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Adds a third measure to a scatter plot by mapping value to bubble area.",
+		tags: [
+			"bubble",
+			"three measures",
+			"gapminder"
+		],
+		sample: (seed) => SampleData.points(seed, 26).map((row, i) => ({
+			...row,
+			label: `${String(row.group)[0]}${i + 1}`
+		})),
+		variants: {
+			scaling: [
+				ScatterScaling.Linear,
+				ScatterScaling.SemilogX,
+				ScatterScaling.SemilogY,
+				ScatterScaling.LogLog
+			],
+			maxRadius: [
+				24,
+				16,
+				30
+			],
+			placement: ["exact", "separated"],
+			sizeKey: [true, false],
+			labelled: [3, 0]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			maxRadius: 24,
+			placement: "exact",
+			sizeKey: true,
+			labelled: 3,
+			marker: ScatterMarker.Circle
+		};
+	}
+	inset() {
+		return this.options.maxRadius;
+	}
+	bubbles(points, area) {
+		const bubbles = points.map((point) => ({
+			...point,
+			radius: Math.max(2, area(Math.max(0, point.size)))
+		})).sort((a, b) => descending(a.radius, b.radius));
+		if (this.options.placement !== "separated") return bubbles;
+		const nodes = bubbles.map((bubble) => ({
+			...bubble,
+			x: bubble.px,
+			y: bubble.py,
+			home: [bubble.px, bubble.py]
+		}));
+		forceSimulation(nodes).stop().force("x", forceX((d) => d.home[0]).strength(.25)).force("y", forceY((d) => d.home[1]).strength(.25)).force("collide", forceCollide((d) => d.radius + 1.5).iterations(3)).tick(120);
+		return bubbles.map((bubble, i) => ({
+			...bubble,
+			px: nodes[i].x,
+			py: nodes[i].y
+		}));
+	}
+	plotPoints(ctx, _axes, points) {
+		const { width, height } = ctx.plot;
+		const top = max(points, (point) => point.size) || 1;
+		const area = scaleSqrt([0, top], [0, this.options.maxRadius]);
+		const bubbles = this.bubbles(points, area).map((bubble) => ({
+			...bubble,
+			px: Math.min(width - bubble.radius, Math.max(bubble.radius, bubble.px)),
+			py: Math.min(height - bubble.radius, Math.max(bubble.radius, bubble.py))
+		}));
+		this.drawDots(ctx, bubbles, {
+			radius: (point) => point.radius,
+			marker: ScatterMarker.Circle
+		}).attr("fill-opacity", .82);
+		this.drawLabels(ctx, bubbles);
+		if (this.options.sizeKey) this.drawSizeKey(ctx, area, top, bubbles);
+	}
+	drawLabels(ctx, bubbles) {
+		const named = bubbles.filter((bubble) => bubble.label && bubble.label.length * 5.8 < bubble.radius * 2 - 4).slice(0, this.options.labelled);
+		const labels = ctx.marks("bubble-labels", "text", named, (d) => d.index).attr("text-anchor", "middle").attr("dy", "0.35em").attr("pointer-events", "none").text((d) => d.label);
+		ctx.text(labels, 10.5).attr("fill", (d) => ctx.palette.inkOn(this.hue(ctx, d)));
+		ctx.set(labels, {
+			x: (d) => d.px,
+			y: (d) => d.py
+		});
+	}
+	drawSizeKey(ctx, area, top, bubbles) {
+		const round = +top.toPrecision(1), steps = [round, round / 4];
+		const biggest = area(round);
+		const corner = this.quietCorner(ctx, bubbles);
+		const cx = corner.anchor === "start" ? corner.x + biggest : corner.x - biggest - 26;
+		const base = corner.y < ctx.plot.height / 2 ? corner.y - 8 + biggest * 2 : corner.y + 12;
+		const rings = ctx.marks("size-key", "circle", steps, (d) => d).attr("fill", "none").attr("stroke", ctx.theme.axis);
+		ctx.set(rings, {
+			cx,
+			cy: (d) => base - area(d),
+			r: (d) => area(d)
+		});
+		const notes = ctx.marks("size-key-text", "text", steps, (d) => d).text((d) => format("~s")(d));
+		ctx.text(notes, 10, "muted");
+		ctx.set(notes, {
+			x: cx + biggest + 4,
+			y: (d) => base - area(d) * 2 + 8
+		});
+	}
+};
+export { BubbleChart, BubblePlacement };

package/dist/charts/scatter/CategoryScatterBase.js

@@ -0,0 +1,164 @@
+import { CartesianChart } from "../../core/CartesianChart.js";
+import { Orientation, ScaleKind } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { scatterNumber, thinLogTicks } from "./ScatterBase.js";
+import { ascending, extent, group, median, quantile, scaleBand } from "d3";
+// src/charts/scatter/CategoryScatterBase.ts
+var CategorySort = /* @__PURE__ */ function(CategorySort) {
+	CategorySort["Data"] = "data-order";
+	CategorySort["Descending"] = "descending";
+	return CategorySort;
+}({});
+var CategorySummary = /* @__PURE__ */ function(CategorySummary) {
+	CategorySummary["None"] = "no-summary";
+	CategorySummary["Mean"] = "mean";
+	CategorySummary["Median"] = "median";
+	CategorySummary["Box"] = "box";
+	return CategorySummary;
+}({});
+/** One measure across categorical lanes, in either orientation. Children decide each point's spread. */
+var CategoryScatterBase = class extends CartesianChart {
+	defaults() {
+		return {
+			group: "group",
+			value: "value",
+			orientation: Orientation.Vertical,
+			scale: ScaleKind.Linear,
+			sort: "data-order",
+			summary: "no-summary",
+			radius: 4
+		};
+	}
+	/** ScatterLane a group sits in; override to merge groups onto one axis. */
+	laneOf(group) {
+		return group;
+	}
+	get vertical() {
+		return this.options.orientation === Orientation.Vertical;
+	}
+	/** Screen coordinates for a value on the measure axis and an offset across its lane. */
+	place(axes, lane, value, offset) {
+		const along = axes.value(value), across = lane.center + offset;
+		return this.vertical ? [across, along] : [along, across];
+	}
+	rows() {
+		const { data, group, value, scale } = this.options;
+		return (data ?? []).flatMap((row, index) => {
+			const measure = scatterNumber(row[value]);
+			if (!Number.isFinite(measure) || scale === ScaleKind.Log && measure <= 0) return [];
+			const name = String(row[group] ?? "All");
+			return [{
+				lane: this.laneOf(name),
+				group: name,
+				value: measure,
+				row,
+				index
+			}];
+		});
+	}
+	order(rows) {
+		const groups = [...group(rows, (row) => row.lane)];
+		if (this.options.sort === "descending") groups.sort((a, b) => (median(b[1], (row) => row.value) ?? 0) - (median(a[1], (row) => row.value) ?? 0));
+		return groups.map(([key]) => key);
+	}
+	scales(ctx) {
+		const rows = this.rows(), { width, height } = ctx.plot;
+		const [low = 0, high = 1] = extent(rows, (row) => row.value);
+		const pad = (high - low) * .05 || Math.abs(high) * .1 || 1;
+		const log = this.options.scale === ScaleKind.Log;
+		const value = Scales.continuous(this.options.scale).domain(log ? [low / 1.1, Math.max(high * 1.1, low * 2)] : [low - pad, high + pad]).range(this.vertical ? [height, 0] : [0, width]);
+		if (!log) value.nice();
+		const band = scaleBand(this.order(rows), this.vertical ? [0, width] : [0, height]).padding(.12);
+		const typed = value;
+		return this.vertical ? {
+			band,
+			value: typed,
+			x: band,
+			y: typed
+		} : {
+			band,
+			value: typed,
+			x: typed,
+			y: band
+		};
+	}
+	tickFormat(scale) {
+		return thinLogTicks(scale, super.tickFormat(scale));
+	}
+	plotMarks(ctx, axes) {
+		const rows = this.rows();
+		if (!this.vertical && this.options.grid !== false) {
+			const ticks = axes.value.ticks(Math.floor(ctx.plot.width / 80));
+			ctx.marks("grid-x", "line", ticks).attr("stroke", ctx.theme.grid).attr("stroke-width", 1).attr("x1", (tick) => axes.value(tick)).attr("x2", (tick) => axes.value(tick)).attr("y1", 0).attr("y2", ctx.plot.height);
+			ctx.group("grid-x").lower();
+		}
+		const lanes = axes.band.domain().map((group) => ({
+			group,
+			points: rows.filter((row) => row.lane === group),
+			center: axes.band(group) + axes.band.bandwidth() / 2,
+			breadth: axes.band.bandwidth()
+		}));
+		this.plotLanes(ctx, axes, lanes);
+		this.drawSummaries(ctx, axes, lanes);
+	}
+	tooltip(ctx, point) {
+		return {
+			title: point.group,
+			color: ctx.palette.color(point.group),
+			rows: [[this.options.value, point.value]]
+		};
+	}
+	drawSummaries(ctx, axes, lanes) {
+		const kind = this.options.summary;
+		const stats = (kind === "no-summary" ? [] : lanes.filter((lane) => lane.points.length)).map((lane) => {
+			const sorted = lane.points.map((point) => point.value).sort(ascending);
+			return {
+				lane,
+				mean: sorted.reduce((a, b) => a + b, 0) / sorted.length,
+				q1: quantile(sorted, .25),
+				median: quantile(sorted, .5),
+				q3: quantile(sorted, .75)
+			};
+		});
+		const half = (lane) => Math.min(lane.breadth * .42, 34);
+		const box = kind === "box" ? stats : [];
+		const frames = ctx.marks("summary-box", "rect", box, (d) => d.lane.group).attr("fill", ctx.theme.inkMuted).attr("fill-opacity", .14).attr("stroke", ctx.theme.inkSecondary).attr("stroke-width", 1.5).attr("rx", 3);
+		ctx.set(frames, this.vertical ? {
+			x: (d) => d.lane.center - half(d.lane),
+			width: (d) => half(d.lane) * 2,
+			y: (d) => axes.value(d.q3),
+			height: (d) => Math.abs(axes.value(d.q1) - axes.value(d.q3))
+		} : {
+			y: (d) => d.lane.center - half(d.lane),
+			height: (d) => half(d.lane) * 2,
+			x: (d) => axes.value(d.q1),
+			width: (d) => Math.abs(axes.value(d.q3) - axes.value(d.q1))
+		});
+		ctx.hover(frames, (d) => ({
+			title: d.lane.group,
+			rows: [
+				["Q1", +d.q1.toFixed(2)],
+				["Median", +d.median.toFixed(2)],
+				["Q3", +d.q3.toFixed(2)]
+			]
+		}));
+		const at = (d) => axes.value(kind === "mean" ? d.mean : d.median);
+		const bars = ctx.marks("summary-bar", "line", stats, (d) => d.lane.group).attr("stroke", ctx.theme.ink).attr("stroke-width", 2).attr("stroke-linecap", "round");
+		ctx.set(bars, this.vertical ? {
+			x1: (d) => d.lane.center - half(d.lane),
+			x2: (d) => d.lane.center + half(d.lane),
+			y1: at,
+			y2: at
+		} : {
+			y1: (d) => d.lane.center - half(d.lane),
+			y2: (d) => d.lane.center + half(d.lane),
+			x1: at,
+			x2: at
+		});
+		ctx.hover(bars, (d) => ({
+			title: d.lane.group,
+			rows: [[kind === "mean" ? "Mean" : "Median", +(kind === "mean" ? d.mean : d.median).toFixed(2)]]
+		}));
+	}
+};
+export { CategoryScatterBase, CategorySort, CategorySummary };

package/dist/charts/scatter/ChangeScatter.js

@@ -0,0 +1,142 @@
+import { ChartFamily, DataShape, Dimension, ScaleKind } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { ScatterBase, ScatterScaling, scatterNumber } from "./ScatterBase.js";
+// src/charts/scatter/ChangeScatter.ts
+var ChangeStyle = /* @__PURE__ */ function(ChangeStyle) {
+	ChangeStyle["Arrow"] = "arrow";
+	ChangeStyle["Comet"] = "comet";
+	ChangeStyle["Dumbbell"] = "dumbbell";
+	return ChangeStyle;
+}({});
+var ChangePath = /* @__PURE__ */ function(ChangePath) {
+	ChangePath["Straight"] = "straight";
+	ChangePath["Arc"] = "arc";
+	return ChangePath;
+}({});
+/** Before-and-after movement of each entity through two measures. */
+var ChangeScatter = class extends ScatterBase {
+	static meta = {
+		id: "change-scatter",
+		name: "Change scatter",
+		family: ChartFamily.Relationship,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Draws each entity moving from a first to a second position across two measures.",
+		tags: [
+			"vector scatter",
+			"arrow plot",
+			"before after",
+			"dumbbell",
+			"movement"
+		],
+		sample: (seed) => {
+			const end = SampleData.points(seed + 1, 22, 3);
+			return SampleData.points(seed, 22, 3).map((row, i) => ({
+				...row,
+				x2: +(+row.x + (+end[i].x - +row.x) * .45 + 6).toFixed(2),
+				y2: +(+row.y + (+end[i].y - +row.y) * .45 + 5).toFixed(2)
+			}));
+		},
+		variants: {
+			style: [
+				"arrow",
+				"comet",
+				"dumbbell"
+			],
+			path: ["straight", "arc"],
+			rebased: [false, true],
+			scaling: [ScatterScaling.Linear, ScatterScaling.LogLog]
+		},
+		valid: (v) => !(v.rebased && v.scaling === ScatterScaling.LogLog) && !(v.style === "comet" && v.path === "arc")
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			x2: "x2",
+			y2: "y2",
+			style: "arrow",
+			path: "straight",
+			rebased: false
+		};
+	}
+	get xKind() {
+		return this.options.rebased ? ScaleKind.Linear : super.xKind;
+	}
+	get yKind() {
+		return this.options.rebased ? ScaleKind.Linear : super.yKind;
+	}
+	end(point) {
+		const x = scatterNumber(point.row[this.options.x2]), y = scatterNumber(point.row[this.options.y2]);
+		return [Number.isFinite(x) ? x : point.x, Number.isFinite(y) ? y : point.y];
+	}
+	points() {
+		const clean = super.points();
+		return this.options.rebased ? clean.map((point) => ({
+			...point,
+			x: 0,
+			y: 0
+		})) : clean;
+	}
+	delta(point) {
+		const { x, y, x2, y2 } = this.options, change = (to, from) => scatterNumber(point.row[to]) - scatterNumber(point.row[from]);
+		return [change(x2, x) || 0, change(y2, y) || 0];
+	}
+	target(point) {
+		return this.options.rebased ? this.delta(point) : this.end(point);
+	}
+	xValues(points) {
+		return points.flatMap((point) => [point.x, this.target(point)[0]]);
+	}
+	yValues(points) {
+		return points.flatMap((point) => [point.y, this.target(point)[1]]);
+	}
+	arc(d) {
+		const { sx, sy, tx, ty } = d, bend = .22;
+		return `M${sx},${sy}Q${(sx + tx) / 2 - (ty - sy) * bend},${(sy + ty) / 2 + (tx - sx) * bend} ${tx},${ty}`;
+	}
+	comet(d) {
+		const length = Math.hypot(d.tx - d.sx, d.ty - d.sy) || 1, nx = -(d.ty - d.sy) / length, ny = (d.tx - d.sx) / length, half = 4;
+		return `M${d.tx + nx * half},${d.ty + ny * half}L${d.sx},${d.sy}L${d.tx - nx * half},${d.ty - ny * half}A${half},${half} 0 1 0 ${d.tx + nx * half},${d.ty + ny * half}Z`;
+	}
+	plotPoints(ctx, axes, points) {
+		const { style, path } = this.options;
+		const moves = points.map((point) => {
+			const [ex, ey] = this.target(point);
+			return {
+				point,
+				sx: point.px,
+				sy: point.py,
+				tx: axes.x(ex),
+				ty: axes.y(ey),
+				hasEnd: ex !== point.x || ey !== point.y
+			};
+		});
+		const color = (d) => this.hue(ctx, d.point);
+		const comets = style === "comet" ? moves : [];
+		const tails = ctx.marks("comets", "path", comets, (d) => d.point.index).attr("fill", color).attr("fill-opacity", .75);
+		ctx.set(tails, { d: (d) => this.comet(d) });
+		ctx.hover(tails, (d) => this.tooltip(ctx, d.point));
+		const shafts = style === "comet" ? [] : moves;
+		const lines = ctx.marks("shafts", "path", shafts, (d) => d.point.index).attr("fill", "none").attr("stroke", color).attr("stroke-width", 2).attr("stroke-opacity", style === "dumbbell" ? .45 : .85).attr("stroke-linecap", "round");
+		ctx.set(lines, { d: (d) => path === "arc" ? this.arc(d) : `M${d.sx},${d.sy}L${d.tx},${d.ty}` });
+		ctx.drawOn(lines);
+		ctx.hover(lines, (d) => this.tooltip(ctx, d.point));
+		const arrows = style === "arrow" ? moves.filter((d) => d.hasEnd) : [];
+		const heads = ctx.marks("heads", "path", arrows, (d) => d.point.index).attr("fill", color).attr("d", "M1,0L-7,-4.5L-5,0L-7,4.5Z");
+		ctx.set(heads, { transform: (d) => {
+			const bend = .22, fromX = path === "arc" ? (d.sx + d.tx) / 2 - (d.ty - d.sy) * bend : d.sx, fromY = path === "arc" ? (d.sy + d.ty) / 2 + (d.tx - d.sx) * bend : d.sy;
+			return `translate(${d.tx},${d.ty}) rotate(${Math.atan2(d.ty - fromY, d.tx - fromX) * (180 / Math.PI)})`;
+		} });
+		const starts = style === "dumbbell" || !this.options.rebased ? points : [];
+		this.drawDots(ctx, style === "comet" ? [] : starts, { radius: style === "dumbbell" ? 4 : 2.5 });
+		const ends = style === "dumbbell" ? moves : [];
+		const tips = ctx.marks("ends", "circle", ends, (d) => d.point.index).attr("fill", color).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
+		ctx.set(tips, {
+			cx: (d) => d.tx,
+			cy: (d) => d.ty,
+			r: 5
+		});
+		ctx.hover(tips, (d) => this.tooltip(ctx, d.point));
+	}
+};
+export { ChangePath, ChangeScatter, ChangeStyle };