@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/diagrams/TopologyLayout.js

@@ -0,0 +1,143 @@
+import { forceCollide, forceLink, forceManyBody, forceSimulation, forceX, forceY, hierarchy, mean, tree } from "d3";
+// src/charts/diagrams/TopologyLayout.ts
+var SWEEPS = 12;
+var RELAX = 8;
+/** Device positions for a network diagram, as index-aligned points whose cells stay inside the area. */
+var TopologyLayout = class TopologyLayout {
+	/**
+	* Layered: `tiers[i]` fixes each device's layer, as in the core, distribution and access model,
+	* and barycentre sweeps (Sugiyama, 1981) order each layer to cut crossings.
+	*/
+	static tiered(tiers, links, area, horizontal) {
+		const levels = [...new Set(tiers)].sort((a, b) => a - b);
+		const layers = levels.map((level) => tiers.flatMap((tier, i) => tier === level ? [i] : []));
+		const near = tiers.map(() => []);
+		for (const [a, b] of links) {
+			near[a].push(b);
+			near[b].push(a);
+		}
+		const place = new Array(tiers.length).fill(0);
+		const stamp = () => layers.forEach((layer) => layer.forEach((device, i) => {
+			place[device] = (i + .5) / layer.length;
+		}));
+		stamp();
+		for (let sweep = 0; sweep < SWEEPS; sweep++) for (const layer of sweep % 2 ? [...layers].reverse() : layers) {
+			const score = new Map(layer.map((device) => [device, mean(near[device].filter((other) => tiers[other] !== tiers[device]).map((other) => place[other])) ?? place[device]]));
+			layer.sort((a, b) => score.get(a) - score.get(b) || a - b);
+			layer.forEach((device, i) => {
+				place[device] = (i + .5) / layer.length;
+			});
+		}
+		const length = horizontal ? area.height : area.width, cell = horizontal ? area.cell.height : area.cell.width;
+		const spread = layers.map((layer) => TopologyLayout.#relax(layer, near, place, tiers, length, cell));
+		const depth = horizontal ? area.width : area.height, step = levels.length ? depth / levels.length : depth;
+		const points = new Array(tiers.length);
+		layers.forEach((layer, l) => layer.forEach((device, i) => {
+			const along = step * (l + .5), across = spread[l][i];
+			points[device] = horizontal ? {
+				x: along,
+				y: across
+			} : {
+				x: across,
+				y: along
+			};
+		}));
+		return points;
+	}
+	/** Slides a layer's devices toward their neighbours without changing their order or closing the gaps. */
+	static #relax(layer, near, place, tiers, length, cell) {
+		const gap = Math.min(length / layer.length, cell + 16), low = cell / 2, high = length - cell / 2;
+		let at = layer.map((_, i) => length * (i + .5) / layer.length);
+		for (let round = 0; round < RELAX; round++) {
+			const wish = layer.map((device, i) => mean(near[device].filter((other) => tiers[other] !== tiers[device]).map((other) => place[other] * length)) ?? at[i]);
+			const up = [...wish], down = [...wish];
+			up[0] = Math.max(up[0], low);
+			for (let i = 1; i < up.length; i++) up[i] = Math.max(up[i], up[i - 1] + gap);
+			down[down.length - 1] = Math.min(down[down.length - 1], high);
+			for (let i = down.length - 2; i >= 0; i--) down[i] = Math.min(down[i], down[i + 1] - gap);
+			at = up.map((value, i) => (value + down[i]) / 2);
+			at[at.length - 1] = Math.min(at[at.length - 1], high);
+			for (let i = at.length - 2; i >= 0; i--) at[i] = Math.min(at[i], at[i + 1] - gap);
+			at[0] = Math.max(at[0], low);
+			for (let i = 1; i < at.length; i++) at[i] = Math.max(at[i], at[i - 1] + gap);
+			layer.forEach((device, i) => {
+				place[device] = at[i] / length;
+			});
+		}
+		return at;
+	}
+	/** Radial tree (Eades, 1992) of the shortest-hop tree from `root`: rings count hops, and each branch gets an arc for its leaves. */
+	static radial(count, links, root, area) {
+		const near = Array.from({ length: count }, () => []);
+		for (const [a, b] of links) {
+			near[a].push(b);
+			near[b].push(a);
+		}
+		const seen = /* @__PURE__ */ new Set();
+		const grow = (start) => {
+			const top = {
+				index: start,
+				children: []
+			}, queue = [top];
+			seen.add(start);
+			while (queue.length) {
+				const at = queue.shift();
+				for (const next of near[at.index]) {
+					if (seen.has(next)) continue;
+					seen.add(next);
+					const child = {
+						index: next,
+						children: []
+					};
+					at.children.push(child);
+					queue.push(child);
+				}
+			}
+			return top;
+		};
+		const crowns = [root, ...Array.from({ length: count }, (_, i) => i)].flatMap((start) => seen.has(start) ? [] : [grow(start)]);
+		const whole = crowns.length === 1 ? crowns[0] : {
+			index: -1,
+			children: crowns
+		};
+		const laid = tree().size([2 * Math.PI, 1]).separation((a, b) => (a.parent === b.parent ? 1 : 2) / Math.max(1, a.depth))(hierarchy(whole, (branch) => branch.children));
+		const rings = Math.max(1, laid.height);
+		const ry = Math.max(1, area.height / 2 - area.cell.height / 2), rx = Math.max(1, area.width / 2 - area.cell.width / 2);
+		const points = new Array(count);
+		for (const node of laid.descendants()) {
+			if (node.data.index < 0) continue;
+			const hop = node.depth / rings;
+			points[node.data.index] = {
+				x: area.width / 2 + Math.sin(node.x) * rx * hop,
+				y: area.height / 2 - Math.cos(node.x) * ry * hop
+			};
+		}
+		return points;
+	}
+	/** Force-directed placement (Fruchterman and Reingold, 1991, by d3-force), started from `seed` so it repeats exactly and untangles less. */
+	static force(seed, links, area) {
+		const { width, height, cell } = area;
+		const movers = seed.map((point, index) => ({
+			index,
+			x: point.x - width / 2,
+			y: point.y - height / 2
+		}));
+		const reach = Math.max(cell.width, cell.height), span = Math.sqrt(width * height / Math.max(1, seed.length));
+		const simulation = forceSimulation(movers).stop().force("link", forceLink(links.map(([source, target]) => ({
+			source,
+			target
+		}))).distance(Math.max(reach, span * .9)).strength(.4)).force("charge", forceManyBody().strength(-span * 6)).force("collide", forceCollide(reach * .62)).force("x", forceX(0).strength(.05 * height / Math.max(width, 1))).force("y", forceY(0).strength(.05 * width / Math.max(height, 1)));
+		for (let i = 0; i < 300; i++) {
+			simulation.tick();
+			for (const mover of movers) {
+				mover.x = Math.max(cell.width / 2 - width / 2, Math.min(width / 2 - cell.width / 2, mover.x));
+				mover.y = Math.max(cell.height / 2 - height / 2, Math.min(height / 2 - cell.height / 2, mover.y));
+			}
+		}
+		return movers.map((mover) => ({
+			x: mover.x + width / 2,
+			y: mover.y + height / 2
+		}));
+	}
+};
+export { TopologyLayout };

package/dist/charts/diagrams/architectureEnums.js

@@ -0,0 +1,50 @@
+// src/charts/diagrams/architectureEnums.ts
+/** C4 element types, plus the plain grouping box. `Database` is a container drawn as a cylinder. */
+var ArchitectureKind = /* @__PURE__ */ function(ArchitectureKind) {
+	ArchitectureKind["Person"] = "person";
+	ArchitectureKind["System"] = "system";
+	ArchitectureKind["Container"] = "container";
+	ArchitectureKind["Database"] = "database";
+	ArchitectureKind["Component"] = "component";
+	ArchitectureKind["Boundary"] = "boundary";
+	return ArchitectureKind;
+}({});
+/** The C4 zoom level: each one opens the element type above it into a boundary. */
+var ArchitectureLevel = /* @__PURE__ */ function(ArchitectureLevel) {
+	ArchitectureLevel["Context"] = "context";
+	ArchitectureLevel["Containers"] = "containers";
+	ArchitectureLevel["Components"] = "components";
+	return ArchitectureLevel;
+}({});
+var ArchitectureDirection = /* @__PURE__ */ function(ArchitectureDirection) {
+	ArchitectureDirection["TopDown"] = "top-down";
+	ArchitectureDirection["LeftRight"] = "left-right";
+	return ArchitectureDirection;
+}({});
+/** `Direct` draws straight where the way is clear and goes around boxes where it is not. */
+var ArchitectureRouting = /* @__PURE__ */ function(ArchitectureRouting) {
+	ArchitectureRouting["Orthogonal"] = "orthogonal";
+	ArchitectureRouting["Direct"] = "direct";
+	return ArchitectureRouting;
+}({});
+/** `Full` adds each element's description, which is what makes its box taller. */
+var ArchitectureDetail = /* @__PURE__ */ function(ArchitectureDetail) {
+	ArchitectureDetail["Full"] = "full";
+	ArchitectureDetail["Names"] = "names";
+	return ArchitectureDetail;
+}({});
+var NetworkDeviceKind = /* @__PURE__ */ function(NetworkDeviceKind) {
+	NetworkDeviceKind["Cloud"] = "cloud";
+	NetworkDeviceKind["Router"] = "router";
+	NetworkDeviceKind["Switch"] = "switch";
+	NetworkDeviceKind["Server"] = "server";
+	NetworkDeviceKind["Database"] = "database";
+	return NetworkDeviceKind;
+}({});
+var TopologyArrangement = /* @__PURE__ */ function(TopologyArrangement) {
+	TopologyArrangement["Tiered"] = "tiered";
+	TopologyArrangement["Radial"] = "radial";
+	TopologyArrangement["Force"] = "force";
+	return TopologyArrangement;
+}({});
+export { ArchitectureDetail, ArchitectureDirection, ArchitectureKind, ArchitectureLevel, ArchitectureRouting, NetworkDeviceKind, TopologyArrangement };

package/dist/charts/diagrams/index.js

@@ -0,0 +1,26 @@
+import { ArchitectureDetail, ArchitectureDirection, ArchitectureKind, ArchitectureLevel, ArchitectureRouting, NetworkDeviceKind, TopologyArrangement } from "./architectureEnums.js";
+import { ArchitectureModel } from "./ArchitectureModel.js";
+import { DiagramText } from "./DiagramText.js";
+import { ArchitectureFlow, ArchitectureRouter } from "./ArchitectureRouter.js";
+import { ArchitectureDiagram } from "./ArchitectureDiagram.js";
+import { LogicGateKind, LogicLayering, LogicState, LogicStateLabels, LogicSymbolStyle } from "./logicEnums.js";
+import { LogicCircuit } from "./LogicCircuit.js";
+import { LogicGateSymbol } from "./LogicGateSymbol.js";
+import { LogicCircuitLayout } from "./LogicCircuitLayout.js";
+import { LogicCircuitSamples } from "./LogicCircuitSamples.js";
+import { LogicGateDiagram } from "./LogicGateDiagram.js";
+import { TopologyLayout } from "./TopologyLayout.js";
+import { NetworkTopologyDiagram } from "./NetworkTopologyDiagram.js";
+import { ErCardinality, ErSchema } from "./ErSchema.js";
+import { EntityRelationshipDiagram, ErDetail } from "./EntityRelationshipDiagram.js";
+import { SequenceFragmentKind, SequenceMessageKind, SequenceNoteSide, SequenceNumbering, SequenceParticipantKind, SequenceSpacing } from "./sequenceEnums.js";
+import { SequenceDiagram } from "./SequenceDiagram.js";
+// src/charts/diagrams/index.ts
+var diagramsCatalog = [
+	LogicGateDiagram,
+	EntityRelationshipDiagram,
+	ArchitectureDiagram,
+	NetworkTopologyDiagram,
+	SequenceDiagram
+];
+export { ArchitectureDetail, ArchitectureDiagram, ArchitectureDirection, ArchitectureFlow, ArchitectureKind, ArchitectureLevel, ArchitectureModel, ArchitectureRouter, ArchitectureRouting, DiagramText, EntityRelationshipDiagram, ErCardinality, ErDetail, ErSchema, LogicCircuit, LogicCircuitLayout, LogicCircuitSamples, LogicGateDiagram, LogicGateKind, LogicGateSymbol, LogicLayering, LogicState, LogicStateLabels, LogicSymbolStyle, NetworkDeviceKind, NetworkTopologyDiagram, SequenceDiagram, SequenceFragmentKind, SequenceMessageKind, SequenceNoteSide, SequenceNumbering, SequenceParticipantKind, SequenceSpacing, TopologyArrangement, TopologyLayout, diagramsCatalog };

package/dist/charts/diagrams/logicEnums.js

@@ -0,0 +1,42 @@
+// src/charts/diagrams/logicEnums.ts
+/** Primitive of a logic circuit. `Unknown` marks a row whose type was not recognised. */
+var LogicGateKind = /* @__PURE__ */ function(LogicGateKind) {
+	LogicGateKind["Input"] = "input";
+	LogicGateKind["Output"] = "output";
+	LogicGateKind["And"] = "and";
+	LogicGateKind["Or"] = "or";
+	LogicGateKind["Not"] = "not";
+	LogicGateKind["Nand"] = "nand";
+	LogicGateKind["Nor"] = "nor";
+	LogicGateKind["Xor"] = "xor";
+	LogicGateKind["Xnor"] = "xnor";
+	LogicGateKind["Buffer"] = "buffer";
+	LogicGateKind["Unknown"] = "unknown";
+	return LogicGateKind;
+}({});
+/** Ternary signal value: `Unknown` is X, an undriven or unresolved net. */
+var LogicState = /* @__PURE__ */ function(LogicState) {
+	LogicState["False"] = "0";
+	LogicState["True"] = "1";
+	LogicState["Unknown"] = "X";
+	return LogicState;
+}({});
+/** ANSI/IEEE 91 distinctive shapes, or IEC 60617 rectangles with a function qualifier. */
+var LogicSymbolStyle = /* @__PURE__ */ function(LogicSymbolStyle) {
+	LogicSymbolStyle["Ansi"] = "ansi";
+	LogicSymbolStyle["Iec"] = "iec";
+	return LogicSymbolStyle;
+}({});
+/** Which end gates are pushed to when they have slack: as soon as inputs allow, or as late as outputs allow. */
+var LogicLayering = /* @__PURE__ */ function(LogicLayering) {
+	LogicLayering["Inputs"] = "early";
+	LogicLayering["Outputs"] = "late";
+	return LogicLayering;
+}({});
+/** Where the state text goes: on every net, or only on the circuit's terminals. */
+var LogicStateLabels = /* @__PURE__ */ function(LogicStateLabels) {
+	LogicStateLabels["Nets"] = "nets";
+	LogicStateLabels["Terminals"] = "terminals";
+	return LogicStateLabels;
+}({});
+export { LogicGateKind, LogicLayering, LogicState, LogicStateLabels, LogicSymbolStyle };

package/dist/charts/diagrams/sequenceEnums.js

@@ -0,0 +1,40 @@
+// src/charts/diagrams/sequenceEnums.ts
+/** UML message sorts. `Self` is a call a lifeline makes on itself. */
+var SequenceMessageKind = /* @__PURE__ */ function(SequenceMessageKind) {
+	SequenceMessageKind["Sync"] = "sync";
+	SequenceMessageKind["Async"] = "async";
+	SequenceMessageKind["Return"] = "return";
+	SequenceMessageKind["Self"] = "self";
+	return SequenceMessageKind;
+}({});
+var SequenceFragmentKind = /* @__PURE__ */ function(SequenceFragmentKind) {
+	SequenceFragmentKind["Alt"] = "alt";
+	SequenceFragmentKind["Opt"] = "opt";
+	SequenceFragmentKind["Loop"] = "loop";
+	return SequenceFragmentKind;
+}({});
+var SequenceParticipantKind = /* @__PURE__ */ function(SequenceParticipantKind) {
+	SequenceParticipantKind["Object"] = "object";
+	SequenceParticipantKind["Actor"] = "actor";
+	return SequenceParticipantKind;
+}({});
+var SequenceNoteSide = /* @__PURE__ */ function(SequenceNoteSide) {
+	SequenceNoteSide["Over"] = "over";
+	SequenceNoteSide["Left"] = "left";
+	SequenceNoteSide["Right"] = "right";
+	return SequenceNoteSide;
+}({});
+/** `Nested` numbers calls by their depth (1, 1.1, 1.2), as UML's decimal message numbers do. */
+var SequenceNumbering = /* @__PURE__ */ function(SequenceNumbering) {
+	SequenceNumbering["None"] = "none";
+	SequenceNumbering["Flat"] = "flat";
+	SequenceNumbering["Nested"] = "nested";
+	return SequenceNumbering;
+}({});
+/** `Fitted` widens each gap only as far as its labels need; `Even` makes every gap the widest one. */
+var SequenceSpacing = /* @__PURE__ */ function(SequenceSpacing) {
+	SequenceSpacing["Fitted"] = "fitted";
+	SequenceSpacing["Even"] = "even";
+	return SequenceSpacing;
+}({});
+export { SequenceFragmentKind, SequenceMessageKind, SequenceNoteSide, SequenceNumbering, SequenceParticipantKind, SequenceSpacing };

package/dist/charts/distribution/AxisFrame.js

@@ -0,0 +1,89 @@
+import { curveLinear, line } from "d3";
+// src/charts/distribution/AxisFrame.ts
+var round = (value) => Math.round(value * 100) / 100;
+var toward = (a, b, by) => {
+	const length = Math.hypot(b[0] - a[0], b[1] - a[1]) || 1;
+	return [a[0] + (b[0] - a[0]) * by / length, a[1] + (b[1] - a[1]) * by / length];
+};
+/** Maps (value, cross) to (x, y) so a chart draws one way and flips by orientation. `cross` is always in pixels. */
+var AxisFrame = class {
+	valueOnX;
+	value;
+	constructor(valueOnX, value) {
+		this.valueOnX = valueOnX;
+		this.value = value;
+	}
+	px(along, cross) {
+		return this.valueOnX ? [along, cross] : [cross, along];
+	}
+	at(value, cross) {
+		return this.px(this.value(value), cross);
+	}
+	/** Path through (value, cross) pairs. */
+	path(points, closed = false, curve = curveLinear) {
+		const d = line().curve(curve).x((p) => round(this.at(p[0], p[1])[0])).y((p) => round(this.at(p[0], p[1])[1]))(points) ?? "";
+		return closed && d ? `${d}Z` : d;
+	}
+	/** Same as `path` with the first coordinate already in pixels. */
+	pixelPath(points, closed = false) {
+		const d = points.map((p, i) => {
+			const [x, y] = this.px(p[0], p[1]);
+			return `${i ? "L" : "M"}${round(x)},${round(y)}`;
+		}).join("");
+		return closed && d ? `${d}Z` : d;
+	}
+	rect(v0, v1, c0, c1) {
+		const a = this.at(v0, c0), b = this.at(v1, c1);
+		return {
+			x: Math.min(a[0], b[0]),
+			y: Math.min(a[1], b[1]),
+			width: Math.abs(a[0] - b[0]),
+			height: Math.abs(a[1] - b[1])
+		};
+	}
+	line(v0, c0, v1, c1) {
+		const a = this.at(v0, c0), b = this.at(v1, c1);
+		return {
+			x1: a[0],
+			y1: a[1],
+			x2: b[0],
+			y2: b[1]
+		};
+	}
+	/** Bar from `base` to `tip` across pixel span `a0..a1`, rounded only at its data end. */
+	bar(a0, a1, base, tip, radius = 4) {
+		const p0 = this.px(a0, base), p1 = this.px(a0, tip), p2 = this.px(a1, tip), p3 = this.px(a1, base);
+		const r = Math.min(radius, Math.abs(a1 - a0) / 2, Math.abs(tip - base));
+		const [q0, q1, q2, q3] = [
+			toward(p1, p0, r),
+			toward(p1, p2, r),
+			toward(p2, p1, r),
+			toward(p2, p3, r)
+		];
+		const n = (p) => `${round(p[0])},${round(p[1])}`;
+		return `M${n(p0)}L${n(q0)}Q${n(p1)} ${n(q1)}L${n(q2)}Q${n(p2)} ${n(q3)}L${n(p3)}Z`;
+	}
+};
+/** Frame whose cross axis is a band per group. */
+var BandFrame = class extends AxisFrame {
+	band;
+	constructor(valueOnX, value, band) {
+		super(valueOnX, value);
+		this.band = band;
+	}
+	center(name) {
+		return (this.band(name) ?? 0) + this.band.bandwidth() / 2;
+	}
+	get half() {
+		return this.band.bandwidth() / 2;
+	}
+};
+/** Frame whose cross axis is a continuous measure: frequency, density or probability. */
+var MeasureFrame = class extends AxisFrame {
+	measure;
+	constructor(valueOnX, value, measure) {
+		super(valueOnX, value);
+		this.measure = measure;
+	}
+};
+export { AxisFrame, BandFrame, MeasureFrame };

package/dist/charts/distribution/BackToBackHistogram.js

@@ -0,0 +1,100 @@
+import { ChartFamily, DataShape, Dimension, Orientation } from "../../core/enums.js";
+import { BinnedChart } from "./BinnedChart.js";
+import { readable } from "./DistributionChart.js";
+import { DistributionSamples } from "./DistributionSamples.js";
+import { BinRule, FrequencyScale, HistogramShape } from "./enums.js";
+import { format, max } from "d3";
+// src/charts/distribution/BackToBackHistogram.ts
+/** Two histograms mirrored about a shared baseline: the first two groups, as in a population pyramid. */
+var BackToBackHistogram = class extends BinnedChart {
+	static meta = {
+		id: "back-to-back-histogram",
+		name: "Back-to-back histogram",
+		family: ChartFamily.Distribution,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Mirrors two histograms on one baseline to compare their shapes bin by bin, like a population pyramid.",
+		tags: [
+			"population pyramid",
+			"mirror histogram",
+			"tornado"
+		],
+		sample: (seed) => DistributionSamples.uneven(seed, 220, 2),
+		variants: {
+			orientation: [Orientation.Horizontal, Orientation.Vertical],
+			bins: [
+				BinRule.FreedmanDiaconis,
+				BinRule.Sturges,
+				BinRule.SquareRoot
+			],
+			frequency: [
+				FrequencyScale.Count,
+				FrequencyScale.Percent,
+				FrequencyScale.Density
+			],
+			shape: [HistogramShape.Bars, HistogramShape.Outline]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			orientation: Orientation.Horizontal,
+			shape: HistogramShape.Bars
+		};
+	}
+	showsLegend() {
+		return true;
+	}
+	samples() {
+		return super.samples().slice(0, 2);
+	}
+	sides(samples) {
+		const edges = this.edges(samples);
+		return samples.flatMap((sample, s) => this.bins(sample, edges).map((bin, i) => ({
+			...bin,
+			key: `${sample.name}/${i}`,
+			sample,
+			sign: s ? 1 : -1
+		})));
+	}
+	measureDomain(samples) {
+		const top = max(this.sides(samples), (b) => b.height) ?? 1;
+		return [-top, top];
+	}
+	measureFormat(reach) {
+		const show = super.measureFormat(reach);
+		return (value) => show(Math.abs(value));
+	}
+	plotSeries(ctx, frame, samples) {
+		const { shape, frequency } = this.options;
+		const sides = this.sides(samples), m = frame.measure, base = m(0);
+		const span = (b) => {
+			const a = frame.value(b.lo), z = frame.value(b.hi), gap = Math.min(2, Math.abs(z - a) * .2) * Math.sign(z - a);
+			return [a + gap / 2, z - gap / 2];
+		};
+		const bars = ctx.marks("mirror-bars", "path", shape === HistogramShape.Bars ? sides.filter((b) => b.count) : [], (b) => b.key).attr("fill", (b) => ctx.palette.color(b.sample.name));
+		ctx.set(bars, { d: (b) => frame.bar(...span(b), base, m(b.sign * b.height)) }, { d: (b) => frame.bar(...span(b), base, base) }, 4);
+		const tell = format(".1%");
+		ctx.hover(bars, (b) => ({
+			title: `${readable(b.lo)} – ${readable(b.hi)}`,
+			color: ctx.palette.color(b.sample.name),
+			rows: [[b.sample.name, frequency === FrequencyScale.Percent ? tell(b.height) : b.count]]
+		}));
+		const outline = (sample) => {
+			const own = sides.filter((b) => b.sample === sample);
+			if (!own.length) return "";
+			return frame.path([
+				[own[0].lo, base],
+				...own.flatMap((b) => [[b.lo, m(b.sign * b.height)], [b.hi, m(b.sign * b.height)]]),
+				[own[own.length - 1].hi, base]
+			]);
+		};
+		const lines = ctx.marks("mirror-outline", "path", shape === HistogramShape.Outline ? samples : [], (s) => s.name).attr("fill", (s) => ctx.palette.color(s.name)).attr("fill-opacity", .14).attr("stroke", (s) => ctx.palette.color(s.name)).attr("stroke-width", 2).attr("stroke-linejoin", "round").attr("d", outline);
+		ctx.hover(lines, (s) => this.summaryTip(s, ctx));
+		const axis = ctx.marks("mirror-axis", "line", [0], () => "axis").attr("stroke", ctx.theme.axis).attr("stroke-width", 1);
+		const [lo, hi] = frame.value.domain();
+		const rule = frame.line(lo, base, hi, base);
+		axis.attr("x1", rule.x1).attr("x2", rule.x2).attr("y1", rule.y1).attr("y2", rule.y2);
+	}
+};
+export { BackToBackHistogram };

package/dist/charts/distribution/BarcodePlot.js

@@ -0,0 +1,104 @@
+import { ChartFamily, DataShape, Dimension, Orientation } from "../../core/enums.js";
+import { readable } from "./DistributionChart.js";
+import { DistributionSamples } from "./DistributionSamples.js";
+import { DistributionStats } from "./DistributionStats.js";
+import { BarcodeAlign, BarcodeLength, BarcodeOverlay, GroupOrder } from "./enums.js";
+import { KdeBand } from "./KdeBand.js";
+// src/charts/distribution/BarcodePlot.ts
+/** One thin line per observation, like a printed barcode: clusters and gaps show with no density assumption. */
+var BarcodePlot = class extends KdeBand {
+	static meta = {
+		id: "barcode",
+		name: "Barcode plot",
+		family: ChartFamily.Distribution,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Draws a thin line per observation, so clusters and gaps appear with no binning or smoothing.",
+		tags: [
+			"rug",
+			"strip",
+			"tick plot"
+		],
+		sample: (seed) => DistributionSamples.uneven(seed, 90, 4),
+		variants: {
+			orientation: [Orientation.Horizontal, Orientation.Vertical],
+			length: [BarcodeLength.Constant, BarcodeLength.Density],
+			align: [BarcodeAlign.Center, BarcodeAlign.Base],
+			overlay: [
+				BarcodeOverlay.None,
+				BarcodeOverlay.Median,
+				BarcodeOverlay.Quartiles
+			],
+			order: [GroupOrder.Given, GroupOrder.Descending]
+		},
+		valid: ({ length, align }) => !(length === BarcodeLength.Constant && align === BarcodeAlign.Base)
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			orientation: Orientation.Horizontal,
+			length: BarcodeLength.Constant,
+			align: BarcodeAlign.Center,
+			overlay: BarcodeOverlay.None,
+			trim: true,
+			padding: .3
+		};
+	}
+	plotSamples(ctx, frame, samples) {
+		const { palette, theme } = ctx;
+		const { length, align, overlay, value } = this.options;
+		const scaled = length === BarcodeLength.Density, base = align === BarcodeAlign.Base;
+		const ticks = samples.flatMap((sample) => {
+			const width = this.widthOf(sample), curve = this.curves.get(sample.name);
+			return sample.values.map((v, i) => ({
+				key: `${sample.name}/${i}`,
+				sample,
+				v,
+				reach: scaled ? Math.max(.12, width(DistributionStats.at(curve, v))) : 1
+			}));
+		});
+		const span = (t) => {
+			const c = frame.center(t.sample.name);
+			if (!base) return frame.line(t.v, c - frame.half * t.reach, t.v, c + frame.half * t.reach);
+			const foot = c + frame.half * (frame.valueOnX ? 1 : -1), rise = frame.half * 2 * t.reach * (frame.valueOnX ? -1 : 1);
+			return frame.line(t.v, foot, t.v, foot + rise);
+		};
+		const lines = ctx.marks("barcode-ticks", "line", ticks, (t) => t.key).attr("stroke", (t) => palette.color(t.sample.name)).attr("stroke-width", 2).attr("stroke-opacity", .5);
+		ctx.set(lines, {
+			x1: (t) => span(t).x1,
+			x2: (t) => span(t).x2,
+			y1: (t) => span(t).y1,
+			y2: (t) => span(t).y2
+		});
+		ctx.hover(lines, (t) => ({
+			title: this.title(t.sample),
+			color: palette.color(t.sample.name),
+			rows: [[value, readable(t.v)]]
+		}));
+		const strip = (s) => {
+			const c = frame.center(s.name) + (frame.half + 5) * (frame.valueOnX ? 1 : -1);
+			return frame.rect(s.summary.q1, s.summary.q3, c - 2, c + 2);
+		};
+		const bars = ctx.marks("barcode-quartiles", "rect", overlay === BarcodeOverlay.Quartiles ? samples : [], (s) => s.name).attr("fill", theme.inkSecondary).attr("rx", 2);
+		ctx.set(bars, {
+			x: (s) => strip(s).x,
+			y: (s) => strip(s).y,
+			width: (s) => strip(s).width,
+			height: (s) => strip(s).height
+		});
+		ctx.hover(bars, (s) => this.summaryTip(s, ctx));
+		const rule = (s) => {
+			const c = frame.center(s.name);
+			return frame.line(s.summary.median, c - frame.half - 5, s.summary.median, c + frame.half + 5);
+		};
+		const medians = ctx.marks("barcode-median", "line", overlay === BarcodeOverlay.None ? [] : samples, (s) => s.name).attr("stroke", theme.ink).attr("stroke-width", 2).attr("stroke-linecap", "round");
+		ctx.set(medians, {
+			x1: (s) => rule(s).x1,
+			x2: (s) => rule(s).x2,
+			y1: (s) => rule(s).y1,
+			y2: (s) => rule(s).y2
+		});
+		ctx.hover(medians, (s) => this.summaryTip(s, ctx));
+	}
+};
+export { BarcodePlot };