@mstone6969/graph 0.1.0 → 0.2.0

package/dist/charts/comparison/TrellisChart.js

@@ -1,158 +0,0 @@
-import { ChartFamily, DataShape, Dimension, LegendPosition } from "../../core/enums.js";
-import { SampleData } from "../../data/SampleData.js";
-import { PanelChart, PanelFlow } from "./PanelChart.js";
-import { Tally } from "./Tally.js";
-import { settleMarks } from "./settleMarks.js";
-import { area, group, line, max, mean, min, scaleLinear, scaleUtc, utcFormat } from "d3";
-// src/charts/comparison/TrellisChart.ts
-var TrellisMark = /* @__PURE__ */ function(TrellisMark) {
-	TrellisMark["Line"] = "line";
-	TrellisMark["Area"] = "area";
-	TrellisMark["Dots"] = "dots";
-	return TrellisMark;
-}({});
-var DAY = utcFormat("%b %-d");
-/** Cleveland's trellis: one panel per group on common axes, with the other groups as faint context. */
-var TrellisChart = class extends PanelChart {
-	static meta = {
-		id: "comparison-trellis",
-		name: "Trellis chart",
-		family: ChartFamily.Comparison,
-		dimension: Dimension.Two,
-		shape: DataShape.Table,
-		description: "Repeats an x-y panel per group on shared axes, untangling many series that would overlap in one plot.",
-		tags: [
-			"lattice",
-			"facet grid",
-			"small multiples",
-			"spaghetti alternative"
-		],
-		sample: (seed) => SampleData.timeSeries(seed, 48, 6).map((row) => ({
-			series: row.series,
-			date: row.date,
-			value: row.value
-		})),
-		variants: {
-			mark: [
-				"line",
-				"area",
-				"dots"
-			],
-			fit: [false, true],
-			context: [true, false],
-			freeScale: [false, true],
-			flow: [
-				PanelFlow.Auto,
-				PanelFlow.Row,
-				PanelFlow.Column
-			]
-		},
-		valid: (values) => !(values.context && values.freeScale)
-	};
-	defaults() {
-		return {
-			legend: LegendPosition.None,
-			facet: "series",
-			x: "date",
-			y: "value",
-			mark: "line",
-			fit: false,
-			context: true,
-			freeScale: false,
-			flow: PanelFlow.Auto
-		};
-	}
-	plotMargin() {
-		return {
-			top: 6,
-			right: 16,
-			bottom: 8,
-			left: 16
-		};
-	}
-	points() {
-		const { data, facet, x, y } = this.options;
-		return data.flatMap((row) => {
-			const cell = row[x], time = cell instanceof Date, at = Tally.num(cell), value = Tally.num(row[y]);
-			return at === null || value === null ? [] : [{
-				facet: String(row[facet] ?? ""),
-				x: at,
-				y: value,
-				time
-			}];
-		}).sort((a, b) => a.x - b.x);
-	}
-	trend(points) {
-		const mx = mean(points, (d) => d.x) ?? 0, my = mean(points, (d) => d.y) ?? 0;
-		let top = 0, bottom = 0;
-		for (const d of points) {
-			top += (d.x - mx) * (d.y - my);
-			bottom += (d.x - mx) ** 2;
-		}
-		const slope = bottom ? top / bottom : 0;
-		return [points[0], points[points.length - 1]].map((d) => ({
-			...d,
-			y: my + slope * (d.x - mx)
-		}));
-	}
-	draw(ctx) {
-		const { mark, fit, context, freeScale } = this.options;
-		const points = this.points();
-		const groups = group(points, (d) => d.facet);
-		const low = min(points, (d) => d.x) ?? 0, high = max(points, (d) => d.x) ?? 1;
-		const span = [low, high > low ? high : low + 1];
-		const floor = (list) => mark === "area" ? Math.min(0, min(list, (d) => d.y) ?? 0) : min(list, (d) => d.y) ?? 0;
-		const reach = Tally.width(Math.round(max(points, (d) => Math.abs(d.y)) ?? 0).toLocaleString("en")) + 8;
-		const panels = this.panels(ctx, [...groups.keys()], {
-			left: reach,
-			bottom: 16,
-			gapX: freeScale ? reach + 6 : 12
-		});
-		const time = points[0]?.time ?? false;
-		this.eachPanel(ctx, panels, (panel, parent) => {
-			const own = groups.get(panel.key);
-			const basis = freeScale ? own : points;
-			const top = max(basis, (d) => d.y) ?? 1, bottom = floor(basis);
-			const y = scaleLinear([bottom, top > bottom ? top : bottom + 1], [panel.height, 0]).nice();
-			const x = time ? scaleUtc().domain(span).range([0, panel.width]) : scaleLinear(span, [0, panel.width]);
-			const px = (d) => x(d.x), py = (d) => y(d.y);
-			const color = ctx.palette.color(panel.key);
-			const draw = line().x(px).y(py);
-			const tip = (d) => ({
-				title: panel.key,
-				color,
-				rows: [[time ? new Date(d.x).toISOString().slice(0, 10) : Tally.format(d.x), Tally.format(d.y)]]
-			});
-			this.panelGrid(ctx, parent, panel, y, "y", freeScale || panel.left);
-			this.xLabels(ctx, parent, panel, x, time);
-			const others = context ? [...groups].filter(([key]) => key !== panel.key) : [];
-			const ghosts = ctx.marks("ghosts", "path", others, ([key]) => key, parent).attr("fill", "none").attr("stroke", ctx.theme.axis).attr("stroke-width", 1);
-			settleMarks(ctx, ghosts, { d: ([, list]) => draw(list) });
-			const shade = ctx.marks("area", "path", mark === "area" ? [own] : [], (_, i) => i, parent).attr("fill", color).attr("fill-opacity", .28);
-			settleMarks(ctx, shade, { d: (list) => area().x(px).y0(y(Math.max(0, y.domain()[0]))).y1(py)(list) });
-			const path = ctx.marks("line", "path", mark === "dots" ? [] : [own], (_, i) => i, parent).attr("fill", "none").attr("stroke", color).attr("stroke-width", 2);
-			settleMarks(ctx, path, { d: (list) => draw(list) }, { d: (list) => line().x(px).y(panel.height)(list) });
-			ctx.hover(path, () => ({
-				title: panel.key,
-				color,
-				rows: [["Latest", Tally.format(own[own.length - 1].y)], ["Points", own.length]]
-			}));
-			const dots = ctx.marks("dots", "circle", mark === "dots" ? own : own.slice(-1), (d) => d.x, parent).attr("fill", color).attr("stroke", ctx.theme.surface).attr("stroke-width", mark === "dots" ? 1 : 2);
-			settleMarks(ctx, dots, {
-				cx: px,
-				cy: py,
-				r: mark === "dots" ? 2.5 : 4
-			}, { r: 0 });
-			ctx.hover(dots, tip);
-			const trend = ctx.marks("trend", "path", fit ? [this.trend(own)] : [], (_, i) => i, parent).attr("fill", "none").attr("stroke", ctx.theme.ink).attr("stroke-width", 2).attr("stroke-dasharray", "5 3");
-			settleMarks(ctx, trend, { d: (list) => draw(list) });
-		});
-	}
-	/** x labels for the bottom row, spaced by the panel's width and kept off its corners. */
-	xLabels(ctx, parent, panel, x, time) {
-		const ticks = x.ticks(Math.max(2, Math.floor(panel.width / 64)));
-		const shown = panel.bottom ? ticks.filter((tick) => x(tick) > 16 && x(tick) < panel.width - 16) : [];
-		ctx.text(ctx.marks("x-ticks", "text", shown, (tick) => +tick, parent), 10, "muted").attr("text-anchor", "middle").attr("x", (tick) => x(tick)).attr("y", panel.height + 12).text((tick) => time ? DAY(/* @__PURE__ */ new Date(+tick)) : Tally.format(+tick));
-	}
-};
-export { TrellisChart, TrellisMark };

package/dist/charts/distribution/RidgeSlabs3DChart.js

@@ -1,169 +0,0 @@
-import { Chart3D } from "../../core/Chart3D.js";
-import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
-import { readable } from "./DistributionChart.js";
-import { DistributionSamples } from "./DistributionSamples.js";
-import { DistributionStats } from "./DistributionStats.js";
-import { GroupOrder, KernelKind, KernelSmoothing, Ridge3DForm, RidgeScaling } from "./enums.js";
-import { max, scaleLinear } from "d3";
-import { BufferAttribute, BufferGeometry, DoubleSide, ExtrudeGeometry, Mesh, MeshStandardMaterial, PlaneGeometry, Shape } from "three";
-// src/charts/distribution/RidgeSlabs3DChart.ts
-var STEPS = 72;
-var FLOOR = -.7;
-var RISE = 1.1;
-/** Density curves stood up in depth: slabs, thin blades or one lofted terrain, for a shift across ordered groups. */
-var RidgeSlabs3DChart = class extends Chart3D {
-	static meta = {
-		id: "distribution-ridgeline-3d",
-		name: "3D ridgeline",
-		family: ChartFamily.Distribution,
-		dimension: Dimension.Three,
-		shape: DataShape.Table,
-		description: "Extrudes each group density into depth, or lofts them into a terrain, to show a shift across ordered groups.",
-		tags: [
-			"joyplot",
-			"density surface",
-			"distribution terrain"
-		],
-		sample: (seed) => DistributionSamples.uneven(seed, 140, 6),
-		variants: {
-			form: [
-				Ridge3DForm.Slabs,
-				Ridge3DForm.Blades,
-				Ridge3DForm.Terrain
-			],
-			smoothing: [
-				KernelSmoothing.Balanced,
-				KernelSmoothing.Tight,
-				KernelSmoothing.Loose
-			],
-			order: [GroupOrder.Given, GroupOrder.Ascending],
-			ridgeScaling: [RidgeScaling.Shared, RidgeScaling.Row]
-		}
-	};
-	defaults() {
-		return {
-			value: "value",
-			group: "group",
-			form: Ridge3DForm.Slabs,
-			smoothing: KernelSmoothing.Balanced,
-			order: GroupOrder.Given,
-			ridgeScaling: RidgeScaling.Shared,
-			distance: 5,
-			elevation: 32
-		};
-	}
-	ordered() {
-		const samples = DistributionStats.samples(Array.isArray(this.options.data) ? this.options.data : [], this.options.value, this.options.group);
-		return this.options.order === GroupOrder.Ascending ? samples.sort((a, b) => a.summary.median - b.summary.median) : samples;
-	}
-	build(ctx) {
-		const { form, smoothing, ridgeScaling } = this.options;
-		const samples = this.ordered();
-		const floor = new Mesh(new PlaneGeometry(2.1, 2.1), new MeshStandardMaterial({ color: ctx.theme.grid }));
-		floor.rotation.x = -Math.PI / 2;
-		floor.position.y = FLOOR;
-		floor.receiveShadow = true;
-		ctx.root.add(floor);
-		if (!samples.length) return;
-		const curves = samples.map((s) => DistributionStats.density(s.values, KernelKind.Gaussian, smoothing));
-		const lo = Math.min(...curves.map((c) => c[0].v)), hi = Math.max(...curves.map((c) => c[c.length - 1].v));
-		const value = scaleLinear([lo, hi || lo + 1], [-1, .74]).nice();
-		const grid = Array.from({ length: 73 }, (_, i) => value.domain()[0] + (value.domain()[1] - value.domain()[0]) * i / STEPS);
-		const inside = (curve, v) => v < curve[0].v || v > curve[curve.length - 1].v ? 0 : DistributionStats.at(curve, v);
-		const raw = curves.map((curve) => grid.map((v) => inside(curve, v)));
-		const shared = max(raw.flat()) || 1;
-		const heights = raw.map((row) => {
-			const top = ridgeScaling === RidgeScaling.Row ? max(row) || 1 : shared;
-			return row.map((d) => d / top * RISE);
-		});
-		const depth = (i) => samples.length > 1 ? -.9 + 1.8 * i / (samples.length - 1) : 0;
-		const pitch = samples.length > 1 ? 1.8 / (samples.length - 1) : .8;
-		if (form === Ridge3DForm.Terrain) this.terrain(ctx, samples, heights, grid.map((v) => value(v)), depth);
-		else samples.forEach((sample, i) => {
-			const outline = new Shape();
-			outline.moveTo(value(grid[0]), 0);
-			grid.forEach((v, g) => outline.lineTo(value(v), Math.max(.002, heights[i][g])));
-			outline.lineTo(value(grid[STEPS]), 0);
-			const thick = form === Ridge3DForm.Blades ? Math.min(.05, pitch * .25) : pitch * .82;
-			const geometry = new ExtrudeGeometry(outline, {
-				depth: thick,
-				bevelEnabled: false,
-				curveSegments: 1
-			});
-			geometry.translate(0, 0, depth(i) - thick / 2);
-			const mesh = new Mesh(geometry, new MeshStandardMaterial({
-				color: ctx.color(ctx.palette.color(sample.name)),
-				roughness: .6
-			}));
-			mesh.position.y = FLOOR;
-			mesh.castShadow = mesh.receiveShadow = true;
-			ctx.reveal((p) => mesh.scale.set(1, Math.max(.001, p), 1), .9, i * .06);
-			ctx.root.add(mesh);
-			ctx.pick(mesh, () => this.tell(sample));
-		});
-		for (const tick of value.ticks(5)) ctx.label(readable(tick), [
-			value(tick),
-			-.75,
-			1
-		], "secondary", 10);
-		samples.forEach((sample, i) => {
-			if (sample.name) ctx.label(sample.name, [
-				.86,
-				FLOOR,
-				depth(i)
-			], "secondary", 10);
-		});
-	}
-	tell(sample) {
-		const s = sample.summary;
-		return {
-			title: sample.name || this.options.value,
-			rows: [
-				["n", s.n],
-				["Median", readable(s.median)],
-				["Mean", readable(s.mean)]
-			]
-		};
-	}
-	terrain(ctx, samples, heights, xs, depth) {
-		const across = xs.length, rows = samples.length;
-		const positions = new Float32Array(across * rows * 3), colors = new Float32Array(across * rows * 3);
-		const indices = [];
-		samples.forEach((_, r) => xs.forEach((x, c) => {
-			const y = heights[r][c], at = (r * across + c) * 3, tone = ctx.color(ctx.palette.sequential(.15 + .85 * y / RISE));
-			positions.set([
-				x,
-				y,
-				depth(r)
-			], at);
-			colors.set([
-				tone.r,
-				tone.g,
-				tone.b
-			], at);
-			if (r < rows - 1 && c < across - 1) {
-				const a = r * across + c, b = a + 1, d = a + across, e = d + 1;
-				indices.push(a, d, b, b, d, e);
-			}
-		}));
-		const geometry = new BufferGeometry();
-		geometry.setAttribute("position", new BufferAttribute(positions, 3));
-		geometry.setAttribute("color", new BufferAttribute(colors, 3));
-		geometry.setIndex(indices);
-		geometry.computeVertexNormals();
-		const mesh = new Mesh(geometry, new MeshStandardMaterial({
-			vertexColors: true,
-			roughness: .7,
-			side: DoubleSide
-		}));
-		mesh.position.y = -.692;
-		mesh.castShadow = mesh.receiveShadow = true;
-		ctx.reveal((p) => mesh.scale.set(1, Math.max(.001, p), 1));
-		ctx.root.add(mesh);
-		ctx.pick(mesh, () => ({
-			title: this.meta.name,
-			rows: [["Groups", rows]]
-		}));
-	}
-};
-export { RidgeSlabs3DChart };

package/dist/charts/financial/Candlestick3D.js

@@ -1,157 +0,0 @@
-import { Chart3D } from "../../core/Chart3D.js";
-import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
-import { SampleData } from "../../data/SampleData.js";
-import { Candle3DDepth } from "./financeEnums.js";
-import { FinanceMath } from "./FinanceMath.js";
-import { Quotes } from "./Quotes.js";
-import { extent, scaleBand, scaleLinear, scaleSqrt } from "d3";
-import { BoxGeometry, CatmullRomCurve3, InstancedMesh, Mesh, MeshStandardMaterial, Object3D, PlaneGeometry, TubeGeometry, Vector3 } from "three";
-// src/charts/financial/Candlestick3D.ts
-var BASE = -.7;
-/** Candlesticks as solid objects: use it for presentation views where volume adds a physical third dimension. */
-var Candlestick3D = class extends Chart3D {
-	static meta = {
-		id: "candlestick-3d",
-		name: "3D candlestick chart",
-		family: ChartFamily.Financial,
-		dimension: Dimension.Three,
-		shape: DataShape.Table,
-		description: "Stands each session as a solid candle on a floor, with depth or a rear wall carrying traded volume.",
-		tags: [
-			"ohlc",
-			"stock",
-			"volume",
-			"solid"
-		],
-		sample: (seed) => SampleData.ohlc(seed, 36),
-		variants: {
-			depth: [Candle3DDepth.Uniform, Candle3DDepth.Volume],
-			volumeWall: [true, false],
-			ribbon: [false, true]
-		}
-	};
-	defaults() {
-		return {
-			date: "date",
-			open: "open",
-			high: "high",
-			low: "low",
-			close: "close",
-			volume: "volume",
-			depth: Candle3DDepth.Uniform,
-			volumeWall: true,
-			ribbon: false
-		};
-	}
-	build(ctx) {
-		const { depth, volumeWall, ribbon } = this.options;
-		const bars = Quotes.read(this.options.data, this.options);
-		const floor = new Mesh(new PlaneGeometry(2.4, 1.4), new MeshStandardMaterial({ color: ctx.theme.grid }));
-		floor.rotation.x = -Math.PI / 2;
-		floor.position.y = BASE;
-		floor.receiveShadow = true;
-		ctx.root.add(floor);
-		if (!bars.length) return;
-		const band = scaleBand(bars.map((bar) => String(bar.index)), [-1.05, 1.05]).padding(.22);
-		const [low, high] = [Math.min(...bars.map((bar) => bar.low)), Math.max(...bars.map((bar) => bar.high))];
-		const price = scaleLinear([low, high === low ? low + 1 : high], [-.62, .7]);
-		const heaviest = Math.max(1, ...bars.map((bar) => bar.volume));
-		const width = band.bandwidth();
-		const deep = scaleSqrt([0, heaviest], [width * .5, width * 5]);
-		const center = (i) => band(String(i)) + width / 2;
-		const dummy = new Object3D();
-		const bodies = new InstancedMesh(new BoxGeometry(width, 1, 1), new MeshStandardMaterial({ roughness: .45 }), bars.length);
-		const wicks = new InstancedMesh(new BoxGeometry(width * .16, 1, width * .16), new MeshStandardMaterial({ roughness: .6 }), bars.length);
-		bodies.castShadow = wicks.castShadow = true;
-		const tone = (rising) => ctx.color(ctx.palette.diverging(rising ? -1 : 1));
-		bars.forEach((bar, i) => {
-			bodies.setColorAt(i, tone(bar.close >= bar.open));
-			wicks.setColorAt(i, tone(bar.close >= bar.open));
-		});
-		const place = (progress) => {
-			bars.forEach((bar, i) => {
-				const mid = (price(bar.open) + price(bar.close)) / 2;
-				const tall = Math.max(.012, Math.abs(price(bar.close) - price(bar.open))) * progress + 5e-4;
-				dummy.position.set(center(i), BASE + (mid - BASE) * progress, 0);
-				dummy.scale.set(1, tall, depth === Candle3DDepth.Volume ? deep(bar.volume) : width * 1.4);
-				dummy.updateMatrix();
-				bodies.setMatrixAt(i, dummy.matrix);
-				dummy.position.set(center(i), BASE + ((price(bar.high) + price(bar.low)) / 2 - BASE) * progress, 0);
-				dummy.scale.set(1, Math.max(.001, (price(bar.high) - price(bar.low)) * progress), 1);
-				dummy.updateMatrix();
-				wicks.setMatrixAt(i, dummy.matrix);
-			});
-			bodies.instanceMatrix.needsUpdate = wicks.instanceMatrix.needsUpdate = true;
-		};
-		ctx.reveal(place);
-		ctx.root.add(bodies, wicks);
-		const tip = (i) => {
-			const bar = bars[i];
-			return {
-				title: bar.label,
-				rows: [
-					["Open", Quotes.money(bar.open)],
-					["High", Quotes.money(bar.high)],
-					["Low", Quotes.money(bar.low)],
-					["Close", Quotes.money(bar.close)],
-					["Volume", Quotes.compact(bar.volume)]
-				]
-			};
-		};
-		ctx.pick(bodies, tip);
-		if (volumeWall) {
-			const height = scaleLinear([0, heaviest], [.005, .5]);
-			const wall = new InstancedMesh(new BoxGeometry(width, 1, .04), new MeshStandardMaterial({
-				roughness: .8,
-				color: ctx.theme.inkMuted
-			}), bars.length);
-			wall.castShadow = true;
-			const raise = (progress) => {
-				bars.forEach((bar, i) => {
-					const tall = Math.max(.002, height(bar.volume) * progress);
-					dummy.position.set(center(i), BASE + tall / 2, -.62);
-					dummy.scale.set(1, tall, 1);
-					dummy.updateMatrix();
-					wall.setMatrixAt(i, dummy.matrix);
-				});
-				wall.instanceMatrix.needsUpdate = true;
-			};
-			ctx.reveal(raise, .9, .2);
-			ctx.root.add(wall);
-			ctx.pick(wall, tip);
-		}
-		if (ribbon) {
-			const knots = FinanceMath.ema(bars.map((bar) => bar.close), Math.min(10, Math.max(2, Math.floor(bars.length / 3)))).flatMap((value, i) => value === null ? [] : [new Vector3(center(i), price(value), .34)]);
-			if (knots.length > 1) {
-				const tube = new Mesh(new TubeGeometry(new CatmullRomCurve3(knots), knots.length * 3, .012, 8), new MeshStandardMaterial({
-					color: ctx.theme.categorical[1],
-					roughness: .4
-				}));
-				tube.castShadow = true;
-				ctx.root.add(tube);
-			}
-		}
-		const [first, last] = extent(bars, (bar) => bar.index);
-		ctx.label(bars[first].label, [
-			center(first),
-			-.7999999999999999,
-			.82
-		], "secondary", 10);
-		ctx.label(bars[last].label, [
-			center(last),
-			-.7999999999999999,
-			.82
-		], "secondary", 10);
-		ctx.label(Quotes.money(high), [
-			-1.2,
-			.7,
-			0
-		], "muted", 10);
-		ctx.label(Quotes.money(low), [
-			-1.2,
-			-.62,
-			0
-		], "muted", 10);
-	}
-};
-export { Candlestick3D };

package/dist/charts/flow/BumpFlow.js

@@ -1,212 +0,0 @@
-import { ChartFamily, CurveKind, DataShape, Dimension, Orientation } from "../../core/enums.js";
-import { Scales } from "../../core/Scales.js";
-import { SampleData } from "../../data/SampleData.js";
-import { FlowChart } from "./FlowChart.js";
-import { FlowRibbon, FlowRouter, FlowSort } from "./flowEnums.js";
-import { FlowGeometry } from "./FlowPathKit.js";
-import { FlowTable } from "./FlowTable.js";
-import { line, scaleLinear, scalePoint } from "d3";
-// src/charts/flow/BumpFlow.ts
-/** `Line` is rank alone. `Ribbon` also makes thickness proportional to value. */
-var BumpMark = /* @__PURE__ */ function(BumpMark) {
-	BumpMark["Line"] = "line";
-	BumpMark["Ribbon"] = "ribbon";
-	return BumpMark;
-}({});
-/** `Rank` spaces positions evenly; `Value` keeps rank order but spaces by actual gap. */
-var BumpSpacing = /* @__PURE__ */ function(BumpSpacing) {
-	BumpSpacing["Rank"] = "rank";
-	BumpSpacing["Value"] = "value";
-	return BumpSpacing;
-}({});
-var BumpLeader = /* @__PURE__ */ function(BumpLeader) {
-	BumpLeader["Top"] = "top";
-	BumpLeader["Bottom"] = "bottom";
-	return BumpLeader;
-}({});
-/** Track how rankings change over time when position matters more than the underlying value. */
-var BumpFlow = class extends FlowChart {
-	static meta = {
-		id: "bump-flow",
-		name: "Bump flow",
-		family: ChartFamily.Flow,
-		dimension: Dimension.Two,
-		shape: DataShape.Table,
-		description: "Follows each series through its rank in every period, making overtakes and streaks easy to read.",
-		tags: [
-			"bump chart",
-			"ranking",
-			"league table"
-		],
-		sample: (seed) => SampleData.categories(seed, 7, 6),
-		variants: {
-			mark: ["line", "ribbon"],
-			curve: [
-				CurveKind.Bump,
-				CurveKind.Linear,
-				CurveKind.StepAfter,
-				CurveKind.Monotone
-			],
-			spacing: ["rank", "value"],
-			leader: ["top", "bottom"],
-			dots: [true, false],
-			orientation: [Orientation.Horizontal, Orientation.Vertical]
-		},
-		valid: (v) => v.mark === "line" || v.curve !== CurveKind.Monotone && v.dots === false
-	};
-	defaults() {
-		return {
-			x: "category",
-			series: "series",
-			y: "value",
-			mark: "line",
-			curve: CurveKind.Bump,
-			spacing: "rank",
-			leader: "top",
-			dots: true,
-			orientation: Orientation.Horizontal
-		};
-	}
-	plotMargin() {
-		return this.options.orientation === Orientation.Vertical ? {
-			top: 8,
-			right: 10,
-			bottom: 8,
-			left: 58
-		} : {
-			top: 10,
-			right: 12,
-			bottom: 26,
-			left: 12
-		};
-	}
-	draw(ctx) {
-		const { data, x, series, y, mark, curve, spacing, leader, dots, orientation } = this.options;
-		const vertical = orientation === Orientation.Vertical;
-		const to = FlowGeometry.project(orientation);
-		const [length, breadth] = vertical ? [ctx.plot.height, ctx.plot.width] : [ctx.plot.width, ctx.plot.height];
-		const table = FlowTable.pivot(data, x, series, y);
-		const gutter = vertical ? 0 : Math.min(length * .16, 12 + Math.max(0, ...table.series.map((name) => FlowTable.width(name))));
-		const along = scalePoint(table.columns.map((_, c) => c), vertical ? [18, length - 18] : [gutter, length - gutter]);
-		const rows = Math.max(1, table.series.length);
-		const inset = 12;
-		const rankScale = scaleLinear([1, Math.max(2, rows)], leader === "top" ? [inset, breadth - inset] : [breadth - inset, inset]);
-		const values = table.columns.flatMap((_, c) => table.series.map((name) => table.at(c, name)));
-		const valueScale = scaleLinear([Math.min(0, ...values), Math.max(1, ...values)], leader === "top" ? [breadth - inset, inset] : [inset, breadth - inset]);
-		const stops = table.series.map((name) => ({
-			name,
-			stops: []
-		}));
-		table.columns.forEach((_, c) => {
-			FlowTable.sorted(table.series, FlowSort.Descending, (name) => table.at(c, name)).forEach((name, i) => {
-				const value = table.at(c, name);
-				stops.find((row) => row.name === name).stops.push({
-					series: name,
-					column: c,
-					rank: i + 1,
-					value,
-					u: along(c),
-					v: spacing === "value" ? valueScale(value) : rankScale(i + 1),
-					label: table.labels[c]
-				});
-			});
-		});
-		const color = (name) => ctx.palette.color(name);
-		for (const name of table.series) color(name);
-		const peak = Math.max(1, ...values);
-		const room = breadth / rows * .8;
-		const trace = line().curve(Scales.curve(curve)).x((d) => to(d.u, d.v)[0]).y((d) => to(d.u, d.v)[1]);
-		const form = curve === CurveKind.Linear ? FlowRibbon.Angular : curve === CurveKind.StepAfter ? FlowRibbon.Shoulder : FlowRibbon.Curved;
-		const lanes = ctx.marks("lanes", "path", mark === "line" ? stops : [], (d) => d.name).attr("fill", "none").attr("stroke", (d) => color(d.name)).attr("stroke-width", 3).attr("stroke-linecap", "round").attr("stroke-linejoin", "round");
-		const lanePath = (d) => vertical && curve === CurveKind.Bump ? FlowGeometry.route(d.stops.map((stop) => [stop.u, stop.v]), FlowRouter.Curved, to) : trace(d.stops) ?? "";
-		this.stroke(ctx, lanes, lanePath);
-		ctx.hover(lanes, (d) => ({
-			title: d.name,
-			color: color(d.name),
-			rows: d.stops.map((stop) => [stop.label, `#${stop.rank}`])
-		}));
-		const pieces = mark === "ribbon" ? stops.flatMap((row) => row.stops.slice(1).map((stop, i) => {
-			const a = row.stops[i];
-			const half = (value) => Math.max(1, value / peak * room) / 2;
-			return {
-				key: `${row.name}#${i}`,
-				from: color(row.name),
-				datum: row,
-				d: FlowGeometry.ribbon({
-					u: a.u,
-					v0: a.v - half(a.value),
-					v1: a.v + half(a.value)
-				}, {
-					u: stop.u,
-					v0: stop.v - half(stop.value),
-					v1: stop.v + half(stop.value)
-				}, form, to)
-			};
-		})) : [];
-		this.bands(ctx, "ribbons", pieces, (row) => ({
-			title: row.name,
-			color: color(row.name),
-			rows: row.stops.map((stop) => [stop.label, stop.value])
-		}), .72);
-		const all = stops.flatMap((row) => row.stops);
-		const dotted = dots ? all : [];
-		const marks = ctx.marks("dots", "circle", dotted, (d) => `${d.series}/${d.column}`).attr("fill", (d) => color(d.series)).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
-		const at = (d) => to(d.u, d.v);
-		ctx.set(marks, {
-			cx: (d) => at(d)[0],
-			cy: (d) => at(d)[1],
-			r: 5
-		}, {
-			cx: (d) => at(d)[0],
-			cy: (d) => at(d)[1],
-			r: 0
-		}, 4);
-		ctx.hover(marks, (d) => ({
-			title: d.series,
-			color: color(d.series),
-			rows: [[d.label, d.value], ["Rank", `#${d.rank}`]]
-		}));
-		this.labels(ctx, "names", vertical ? stops.flatMap(({ name, stops: list }) => {
-			const end = list[list.length - 1];
-			return end ? [{
-				key: name,
-				x: at(end)[0],
-				y: at(end)[1] + 11,
-				text: name,
-				anchor: "middle",
-				tone: "ink",
-				halo: true
-			}] : [];
-		}) : stops.flatMap(({ name, stops: list }) => {
-			const start = list[0], end = list[list.length - 1];
-			if (!start || !end) return [];
-			return [{
-				key: `${name}<`,
-				x: at(start)[0] - 9,
-				y: at(start)[1],
-				text: name,
-				anchor: "end"
-			}, {
-				key: `${name}>`,
-				x: at(end)[0] + 9,
-				y: at(end)[1],
-				text: name,
-				tone: "ink"
-			}];
-		}));
-		this.ticks(ctx, "columns", table.columns.map((_, c) => vertical ? {
-			key: `c${c}`,
-			x: -6,
-			y: along(c),
-			text: table.labels[c],
-			anchor: "end"
-		} : {
-			key: `c${c}`,
-			x: along(c),
-			y: 0,
-			text: table.labels[c],
-			anchor: "middle"
-		}), vertical ? "left" : "bottom");
-	}
-};
-export { BumpFlow, BumpLeader, BumpMark, BumpSpacing };