@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/network/ArcDiagram.js

@@ -0,0 +1,129 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { GraphOrder } from "./GraphOrder.js";
+import { NetworkFlip, NetworkMetric, NetworkOrder } from "./networkEnums.js";
+import { NetworkChart } from "./NetworkChart.js";
+import { NetworkSamples } from "./NetworkSamples.js";
+// src/charts/network/ArcDiagram.ts
+/** Which side of the baseline arcs travel. Mirror splits within-group from between-group links. */
+var ArcSide = /* @__PURE__ */ function(ArcSide) {
+	ArcSide["Above"] = "above";
+	ArcSide["Below"] = "below";
+	ArcSide["Mirror"] = "mirror";
+	return ArcSide;
+}({});
+var ArcCurve = /* @__PURE__ */ function(ArcCurve) {
+	ArcCurve["Ellipse"] = "ellipse";
+	ArcCurve["Parabola"] = "parabola";
+	return ArcCurve;
+}({});
+/** A one-dimensional node layout: reach for it when node order matters, as in a sequence or a timeline. */
+var ArcDiagram = class extends NetworkChart {
+	static meta = {
+		id: "arc-diagram",
+		name: "Arc diagram",
+		family: ChartFamily.Network,
+		dimension: Dimension.Two,
+		shape: DataShape.Graph,
+		description: "Lines nodes up on one axis and draws links as arcs, exposing clusters and long-range ties along an order.",
+		tags: [
+			"network",
+			"arc",
+			"linear layout"
+		],
+		sample: (seed) => NetworkSamples.clustered(seed, 30, 4),
+		variants: {
+			order: [
+				NetworkOrder.Group,
+				NetworkOrder.Input,
+				NetworkOrder.Degree,
+				NetworkOrder.Community
+			],
+			side: [
+				"above",
+				"below",
+				"mirror"
+			],
+			curve: ["ellipse", "parabola"],
+			orientation: [NetworkFlip.Horizontal, NetworkFlip.Vertical],
+			nodeSize: [NetworkMetric.Degree, NetworkMetric.Uniform]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			order: NetworkOrder.Group,
+			side: "above",
+			curve: "ellipse",
+			orientation: NetworkFlip.Horizontal,
+			nodeSize: NetworkMetric.Degree
+		};
+	}
+	bulge(link) {
+		const { side } = this.options;
+		if (side === "mirror") return link.source.group === link.target.group ? 1 : -1;
+		return side === "above" ? 1 : -1;
+	}
+	drawNetwork(ctx, model) {
+		const { order, side, curve, orientation, nodeSize } = this.options;
+		const vertical = orientation === NetworkFlip.Vertical;
+		const { width, height } = ctx.plot;
+		const sorted = GraphOrder.sort(model, order);
+		const ticks = 34, length = vertical ? height : width;
+		const radii = this.capped(this.radii(model, nodeSize, ctx), length / Math.max(1, sorted.length) * .62);
+		const pad = Math.max(...radii) + 1;
+		const along = length - pad * 2, total = vertical ? width : height;
+		const step = along / Math.max(1, sorted.length - 1);
+		const spot = new Map(sorted.map((node, i) => [node.id, sorted.length > 1 ? pad + i * step : pad + along / 2]));
+		const longest = Math.max(1, ...model.links.map((link) => Math.abs(spot.get(link.source.id) - spot.get(link.target.id))));
+		const mirror = side === "mirror";
+		const reach = (mirror ? total / 2 : total - ticks) - pad - 2;
+		const lift = Math.min(1, reach / (longest / 2));
+		const slack = Math.max(0, reach - longest / 2 * lift) / 2;
+		const base = mirror ? total / 2 : side === "below" ? pad + ticks + slack : total - ticks - pad - slack;
+		const point = (t, h) => vertical ? [base - h, t] : [t, base - h];
+		const width2 = this.widths(model, true);
+		const edges = model.links.map((link) => {
+			const a = Math.min(spot.get(link.source.id), spot.get(link.target.id)), b = Math.max(spot.get(link.source.id), spot.get(link.target.id));
+			const bulge = this.bulge(link), span = b - a, [x0, y0] = point(a, 0), [x1, y1] = point(b, 0);
+			const h = span / 2 * lift;
+			return {
+				link,
+				d: curve === "parabola" ? (() => {
+					const [qx, qy] = point((a + b) / 2, bulge * h * 2);
+					return `M${x0.toFixed(2)},${y0.toFixed(2)}Q${qx.toFixed(2)},${qy.toFixed(2)} ${x1.toFixed(2)},${y1.toFixed(2)}`;
+				})() : `M${x0.toFixed(2)},${y0.toFixed(2)}A${(vertical ? h : span / 2).toFixed(2)},${(vertical ? span / 2 : h).toFixed(2)} 0 0 ${bulge > 0 !== vertical ? 1 : 0} ${x1.toFixed(2)},${y1.toFixed(2)}`,
+				...this.edgeTone(ctx, link),
+				width: width2(link)
+			};
+		});
+		const paths = this.paintEdges(ctx, edges);
+		const placed = sorted.map((node) => {
+			const [x, y] = point(spot.get(node.id), 0);
+			return {
+				node,
+				x,
+				y,
+				r: radii[node.index]
+			};
+		});
+		this.paintNodes(ctx, model, placed, paths);
+		const every = Math.max(1, Math.ceil(13 / step));
+		const below = side === "below" ? -1 : 1;
+		const labels = placed.filter((_, i) => i % every === 0).map(({ node, x, y, r }) => vertical ? {
+			key: node.id,
+			text: node.label.slice(0, 5),
+			x: x + below * (r + 3),
+			y,
+			anchor: below > 0 ? "start" : "end"
+		} : {
+			key: node.id,
+			text: node.label.slice(0, 5),
+			x,
+			y: y + below * (r + 3),
+			rotate: -90,
+			anchor: below > 0 ? "end" : "start"
+		});
+		this.paintAxisLabels(ctx, labels);
+	}
+};
+export { ArcCurve, ArcDiagram, ArcSide };

package/dist/charts/network/BioFabricChart.js

@@ -0,0 +1,173 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { GraphOrder } from "./GraphOrder.js";
+import { NetworkFlip, NetworkOrder } from "./networkEnums.js";
+import { NetworkChart } from "./NetworkChart.js";
+import { NetworkSamples } from "./NetworkSamples.js";
+// src/charts/network/BioFabricChart.ts
+var BioFabricEdges = /* @__PURE__ */ function(BioFabricEdges) {
+	BioFabricEdges["Node"] = "node";
+	BioFabricEdges["Group"] = "group";
+	BioFabricEdges["Weight"] = "weight";
+	return BioFabricEdges;
+}({});
+/** BioFabric draws nodes as lines and links as perpendicular bars, so even huge graphs never tangle. */
+var BioFabricChart = class extends NetworkChart {
+	static meta = {
+		id: "biofabric",
+		name: "BioFabric",
+		family: ChartFamily.Network,
+		dimension: Dimension.Two,
+		shape: DataShape.Graph,
+		description: "Draws nodes as parallel lines and links as perpendicular bars, so every edge of a large graph stays visible.",
+		tags: [
+			"network",
+			"biofabric",
+			"large graph",
+			"linear layout"
+		],
+		sample: (seed) => NetworkSamples.clustered(seed, 30, 4),
+		variants: {
+			order: [
+				NetworkOrder.Group,
+				NetworkOrder.Input,
+				NetworkOrder.Degree,
+				NetworkOrder.Community,
+				NetworkOrder.CuthillMcKee
+			],
+			edgeOrder: [
+				"node",
+				"group",
+				"weight"
+			],
+			orientation: [NetworkFlip.Horizontal, NetworkFlip.Vertical],
+			caps: [true, false]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			order: NetworkOrder.Group,
+			edgeOrder: "node",
+			orientation: NetworkFlip.Horizontal,
+			caps: true
+		};
+	}
+	columns(model, row) {
+		const { edgeOrder } = this.options;
+		const span = (link) => [row.get(link.source.id), row.get(link.target.id)].sort((a, b) => a - b);
+		const within = (link) => link.source.group === link.target.group ? 0 : 1;
+		return [...model.links].sort((a, b) => {
+			const [a0, a1] = span(a), [b0, b1] = span(b);
+			if (edgeOrder === "weight") return b.value - a.value || a0 - b0 || a1 - b1;
+			if (edgeOrder === "group") return within(a) - within(b) || a0 - b0 || a1 - b1;
+			return a0 - b0 || a1 - b1;
+		}).map((link, at) => {
+			const [top, bottom] = span(link);
+			return {
+				link,
+				at,
+				top,
+				bottom
+			};
+		});
+	}
+	drawNetwork(ctx, model) {
+		const { order, orientation, caps } = this.options;
+		const flip = orientation === NetworkFlip.Vertical;
+		const sorted = GraphOrder.sort(model, order), row = new Map(sorted.map((node, i) => [node.id, i]));
+		const columns = this.columns(model, row);
+		const gutter = 34, along = (flip ? ctx.plot.height : ctx.plot.width) - gutter;
+		const rowStep = ((flip ? ctx.plot.width : ctx.plot.height) - 6) / Math.max(1, sorted.length), columnStep = along / Math.max(1, columns.length);
+		const y = (at) => 3 + (at + .5) * rowStep, x = (at) => gutter + (at + .5) * columnStep;
+		const seg = (a0, c0, a1, c1) => flip ? {
+			x1: c0,
+			y1: a0,
+			x2: c1,
+			y2: a1
+		} : {
+			x1: a0,
+			y1: c0,
+			x2: a1,
+			y2: c1
+		};
+		const spans = /* @__PURE__ */ new Map();
+		for (const { link, at } of columns) for (const { id } of [link.source, link.target]) {
+			const hit = spans.get(id);
+			spans.set(id, hit ? {
+				from: Math.min(hit.from, at),
+				to: Math.max(hit.to, at)
+			} : {
+				from: at,
+				to: at
+			});
+		}
+		const rows = sorted.map((node, at) => ({
+			node,
+			at,
+			from: spans.get(node.id)?.from ?? 0,
+			to: spans.get(node.id)?.to ?? 0
+		}));
+		const rowAt = (d) => seg(x(d.from) - 2, y(d.at), x(d.to) + 2, y(d.at));
+		const lines = ctx.marks("rows", "line", rows, (d) => d.node.id).attr("stroke", (d) => ctx.palette.color(d.node.group)).attr("stroke-width", Math.min(2, rowStep * .5)).attr("stroke-linecap", "round").attr("stroke-opacity", .75);
+		ctx.set(lines, {
+			x1: (d) => rowAt(d).x1,
+			y1: (d) => rowAt(d).y1,
+			x2: (d) => rowAt(d).x2,
+			y2: (d) => rowAt(d).y2
+		}, {
+			x1: (d) => rowAt(d).x1,
+			y1: (d) => rowAt(d).y1,
+			x2: (d) => rowAt(d).x1,
+			y2: (d) => rowAt(d).y1
+		}, 6);
+		ctx.hover(lines, (d) => this.nodeTip(ctx, d.node));
+		const colAt = (d) => seg(x(d.at), y(d.top), x(d.at), y(d.bottom));
+		const bars = ctx.marks("columns", "line", columns, (d) => d.link.key).attr("stroke", (d) => this.edgeTone(ctx, d.link).color).attr("stroke-width", Math.max(1, Math.min(2, columnStep * .55)));
+		ctx.set(bars, {
+			x1: (d) => colAt(d).x1,
+			y1: (d) => colAt(d).y1,
+			x2: (d) => colAt(d).x2,
+			y2: (d) => colAt(d).y2
+		}, {
+			x1: (d) => colAt(d).x1,
+			y1: (d) => colAt(d).y1,
+			x2: (d) => colAt(d).x1,
+			y2: (d) => colAt(d).y1
+		}, 2);
+		ctx.hover(bars, (d) => this.linkTip(d.link));
+		const r = Math.max(1.5, Math.min(3, columnStep * .5, rowStep * .45));
+		const ends = caps ? columns.flatMap((d) => [d.top, d.bottom].map((at, side) => ({
+			key: `${d.link.key}/${side}`,
+			at,
+			c: d.at,
+			color: this.edgeTone(ctx, d.link).color
+		}))) : [];
+		const dots = ctx.marks("caps", "circle", ends, (d) => d.key).attr("fill", (d) => d.color);
+		ctx.set(dots, {
+			cx: (d) => flip ? y(d.at) : x(d.c),
+			cy: (d) => flip ? x(d.c) : y(d.at),
+			r
+		}, {
+			cx: (d) => flip ? y(d.at) : x(d.c),
+			cy: (d) => flip ? x(d.c) : y(d.at),
+			r: 0
+		});
+		const every = Math.max(1, Math.ceil(12 / rowStep));
+		const labels = rows.filter((d) => d.at % every === 0).map((d) => flip ? {
+			key: d.node.id,
+			text: d.node.label.slice(0, 5),
+			x: y(d.at),
+			y: 30,
+			rotate: -90,
+			anchor: "start"
+		} : {
+			key: d.node.id,
+			text: d.node.label.slice(0, 5),
+			x: 30,
+			y: y(d.at),
+			anchor: "end"
+		});
+		this.paintAxisLabels(ctx, labels, "axis-labels", 10);
+	}
+};
+export { BioFabricChart, BioFabricEdges };

package/dist/charts/network/BipartiteChart.js

@@ -0,0 +1,135 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { EdgeRouter } from "./EdgeRouter.js";
+import { GraphOrder } from "./GraphOrder.js";
+import { NetworkEdge, NetworkMetric, NetworkOrder } from "./networkEnums.js";
+import { NetworkSamples } from "./NetworkSamples.js";
+import { NodeLinkNetwork } from "./NodeLinkNetwork.js";
+// src/charts/network/BipartiteChart.ts
+var BipartiteLayout = /* @__PURE__ */ function(BipartiteLayout) {
+	BipartiteLayout["Columns"] = "columns";
+	BipartiteLayout["Rows"] = "rows";
+	BipartiteLayout["Arcs"] = "arcs";
+	return BipartiteLayout;
+}({});
+var BipartiteOrder = /* @__PURE__ */ function(BipartiteOrder) {
+	BipartiteOrder["Barycentre"] = "barycentre";
+	BipartiteOrder["Degree"] = "degree";
+	BipartiteOrder["Input"] = "input";
+	return BipartiteOrder;
+}({});
+/** Two kinds of thing and the ties between them: people and projects, buyers and products. The first group is one side. */
+var BipartiteChart = class extends NodeLinkNetwork {
+	static meta = {
+		id: "bipartite-graph",
+		name: "Bipartite graph",
+		family: ChartFamily.Network,
+		dimension: Dimension.Two,
+		shape: DataShape.Graph,
+		description: "Separates two kinds of node into facing sides, with links crossing between them, ordered to reduce tangles.",
+		tags: [
+			"network",
+			"bipartite",
+			"two-mode",
+			"affiliation"
+		],
+		sample: (seed) => NetworkSamples.bipartite(seed),
+		variants: {
+			layout: [
+				"columns",
+				"rows",
+				"arcs"
+			],
+			sideOrder: [
+				"barycentre",
+				"degree",
+				"input"
+			],
+			edge: [
+				NetworkEdge.Bump,
+				NetworkEdge.Straight,
+				NetworkEdge.Curve
+			],
+			nodeSize: [
+				NetworkMetric.Degree,
+				NetworkMetric.Uniform,
+				NetworkMetric.Value
+			]
+		},
+		valid: ({ layout, edge }) => layout === "arcs" ? edge !== NetworkEdge.Bump : edge !== NetworkEdge.Curve
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			layout: "columns",
+			sideOrder: "barycentre",
+			edge: NetworkEdge.Bump
+		};
+	}
+	view(model) {
+		const first = model.groups[0];
+		return model.subgraph(model.nodes, (link) => link.source.group === first !== (link.target.group === first));
+	}
+	sides(model) {
+		const { sideOrder } = this.options, first = model.groups[0];
+		const sorted = sideOrder === "input" ? model.nodes : GraphOrder.sort(model, NetworkOrder.Degree);
+		let left = sorted.filter((node) => node.group === first), right = sorted.filter((node) => node.group !== first);
+		if (sideOrder !== "barycentre") return [left, right];
+		const rank = (list) => new Map(list.map((node, i) => [node.id, i]));
+		for (let round = 0; round < 8; round++) {
+			right = GraphOrder.barycentre(right, model, rank(left));
+			left = GraphOrder.barycentre(left, model, rank(right));
+		}
+		return [left, right];
+	}
+	longest(model) {
+		const [a, b] = this.sides(model);
+		return Math.max(a.length, b.length, 1);
+	}
+	radii(model, metric, ctx) {
+		const along = this.options.layout === "rows" ? ctx.plot.width : ctx.plot.height;
+		return this.capped(super.radii(model, metric, ctx), along / this.longest(model) * .5);
+	}
+	place(ctx, model, radii) {
+		const { layout } = this.options, { width, height } = ctx.plot, sides = this.sides(model), pad = Math.max(...radii) + 2;
+		const gutter = 58, points = [];
+		const ease = (i, n) => n > 1 ? i / (n - 1) : .5;
+		sides.forEach((list, s) => list.forEach((node, i) => {
+			const t = ease(i, list.length);
+			if (layout === "rows") points[node.index] = {
+				x: pad + t * (width - pad * 2),
+				y: s ? height - 16 : 16
+			};
+			else if (layout === "arcs") {
+				const turn = (t - .5) * Math.PI * .8, rx = width / 2 - gutter, ry = height / 2 - pad;
+				points[node.index] = {
+					x: width / 2 + (s ? 1 : -1) * Math.cos(turn) * rx,
+					y: height / 2 + Math.sin(turn) * ry
+				};
+			} else points[node.index] = {
+				x: s ? width - gutter : gutter,
+				y: pad + t * (height - pad * 2)
+			};
+		}));
+		return points;
+	}
+	routeEdge(_link, input) {
+		return EdgeRouter.route(this.options.edge, {
+			...input,
+			axis: this.options.layout === "rows" ? "y" : "x"
+		});
+	}
+	edgeTone(ctx, link) {
+		return {
+			color: ctx.palette.color(link.source.group),
+			opacity: .4
+		};
+	}
+	drawLabelSide(ctx, placed) {
+		const rows = this.options.layout === "rows", { x, y } = this.centre(ctx);
+		return placed.map((d) => ({
+			...d,
+			side: rows ? d.y < y ? "top" : "bottom" : d.x < x ? "left" : "right"
+		}));
+	}
+};
+export { BipartiteChart, BipartiteLayout, BipartiteOrder };

package/dist/charts/network/ChordDiagram.js

@@ -0,0 +1,143 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { NetworkChart } from "./NetworkChart.js";
+import { NetworkSamples } from "./NetworkSamples.js";
+import { arc, chord, chordDirected, descending, ribbon, ribbonArrow, ticks } from "d3";
+// src/charts/network/ChordDiagram.ts
+var ChordAggregate = /* @__PURE__ */ function(ChordAggregate) {
+	ChordAggregate["Node"] = "node";
+	ChordAggregate["Group"] = "group";
+	return ChordAggregate;
+}({});
+/** Symmetric chords show ties, directed chords show flow, arrows name its direction. */
+var ChordRibbon = /* @__PURE__ */ function(ChordRibbon) {
+	ChordRibbon["Symmetric"] = "symmetric";
+	ChordRibbon["Directed"] = "directed";
+	ChordRibbon["Arrow"] = "arrow";
+	return ChordRibbon;
+}({});
+var ChordSort = /* @__PURE__ */ function(ChordSort) {
+	ChordSort["Input"] = "input";
+	ChordSort["Largest"] = "largest";
+	return ChordSort;
+}({});
+/** Shows how much flows between a handful of entities, where each entity's total matters as much as each pair. */
+var ChordDiagram = class extends NetworkChart {
+	static meta = {
+		id: "chord-diagram",
+		name: "Chord diagram",
+		family: ChartFamily.Network,
+		dimension: Dimension.Two,
+		shape: DataShape.Graph,
+		description: "Shows weighted flows between entities as ribbons inside a ring sized by each entity’s total.",
+		tags: [
+			"network",
+			"chord",
+			"flow",
+			"radial"
+		],
+		sample: (seed) => NetworkSamples.clustered(seed, 14, 4, 3),
+		variants: {
+			aggregate: ["group", "node"],
+			ribbonStyle: [
+				"symmetric",
+				"directed",
+				"arrow"
+			],
+			sort: ["input", "largest"],
+			sortRibbons: [true, false],
+			rimTicks: [false, true],
+			rim: [.9, .8]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			aggregate: "group",
+			ribbonStyle: "symmetric",
+			sort: "input",
+			sortRibbons: true,
+			rimTicks: false,
+			rim: .9
+		};
+	}
+	matrix(model) {
+		const byGroup = this.options.aggregate === "group";
+		const names = byGroup ? model.groups : model.nodes.map((node) => node.id);
+		const slot = new Map(names.map((name, i) => [name, i]));
+		const matrix = names.map(() => names.map(() => 0));
+		const symmetric = this.options.ribbonStyle === "symmetric";
+		for (const { source, target, value } of model.links) {
+			const a = slot.get(byGroup ? source.group : source.id), b = slot.get(byGroup ? target.group : target.id);
+			matrix[a][b] += value;
+			if (symmetric && a !== b) matrix[b][a] += value;
+		}
+		return {
+			names,
+			matrix,
+			byGroup
+		};
+	}
+	drawNetwork(ctx, model) {
+		const { ribbonStyle, sort, sortRibbons, rimTicks, rim } = this.options;
+		const { names, matrix, byGroup } = this.matrix(model);
+		const outer = Math.max(10, Math.min(ctx.plot.width, ctx.plot.height) / 2 - (rimTicks ? 30 : 20)), inner = outer * rim;
+		const layout = (ribbonStyle === "symmetric" ? chord() : chordDirected()).padAngle(names.length > 8 ? .03 : .05);
+		if (sort === "largest") layout.sortGroups(descending);
+		if (sortRibbons) layout.sortSubgroups(descending);
+		const chords = layout(matrix);
+		const colour = (i) => ctx.palette.color(byGroup ? names[i] : model.nodes[i].group);
+		const stage = ctx.nest(`translate(${ctx.plot.width / 2},${ctx.plot.height / 2})`, "chord");
+		const ribbonPath = (ribbonStyle === "arrow" ? ribbonArrow().headRadius(outer * .04) : ribbon()).radius(inner - 2);
+		const links = stage.marks("ribbons", "path", chords, (d) => `${d.source.index}/${d.target.index}`).attr("fill", (d) => colour(d.source.index)).attr("stroke", "none");
+		stage.set(links, {
+			d: ribbonPath,
+			opacity: .62
+		}, {
+			d: ribbonPath,
+			opacity: 0
+		});
+		stage.hover(links, (d) => ({
+			title: `${names[d.source.index]} ↔ ${names[d.target.index]}`,
+			color: colour(d.source.index),
+			rows: [["Value", d.source.value], ...ribbonStyle === "symmetric" ? [] : [["Return", d.target.value]]]
+		}));
+		const rimPath = arc().innerRadius(inner).outerRadius(outer).cornerRadius(2);
+		const arcs = stage.marks("rim", "path", chords.groups, (d) => d.index).attr("fill", (d) => colour(d.index));
+		stage.set(arcs, { d: rimPath }, { d: rimPath }, 20);
+		stage.hover(arcs, (d) => ({
+			title: names[d.index],
+			color: colour(d.index),
+			rows: [["Total", Math.round(d.value)]]
+		}));
+		arcs.on("pointermove.network", (_, d) => links.style("opacity", (c) => c.source.index === d.index || c.target.index === d.index ? null : .12)).on("pointerleave.network", () => links.style("opacity", null));
+		const total = chords.groups.reduce((sum, group) => sum + group.value, 0) || 1;
+		const step = ticks(0, total, Math.round(Math.PI * outer * 2 / 40))[1] ?? total;
+		const marks = !rimTicks ? [] : chords.groups.flatMap((group) => ticks(0, group.value, Math.floor(group.value / step)).map((value) => ({
+			key: `${group.index}/${value}`,
+			angle: group.startAngle + value / (group.value || 1) * (group.endAngle - group.startAngle)
+		})));
+		const tick = stage.marks("ticks", "line", marks, (d) => d.key).attr("stroke", ctx.theme.axis).attr("stroke-width", 1);
+		const polar = (angle, r) => [Math.sin(angle) * r, -Math.cos(angle) * r];
+		stage.set(tick, {
+			x1: (d) => polar(d.angle, outer + 1)[0],
+			y1: (d) => polar(d.angle, outer + 1)[1],
+			x2: (d) => polar(d.angle, outer + 5)[0],
+			y2: (d) => polar(d.angle, outer + 5)[1]
+		});
+		const room = rimTicks ? 10 : 6, min = 11 / (outer + room);
+		const labels = chords.groups.filter((group) => group.endAngle - group.startAngle > min).map((group) => {
+			const angle = (group.startAngle + group.endAngle) / 2, [x, y] = polar(angle, outer + room), right = angle < Math.PI;
+			const degrees = angle * 180 / Math.PI - 90;
+			return {
+				key: names[group.index],
+				text: names[group.index].slice(0, 8),
+				x,
+				y,
+				rotate: right ? degrees : degrees + 180,
+				anchor: right ? "start" : "end"
+			};
+		});
+		this.paintAxisLabels(stage, labels);
+	}
+};
+export { ChordAggregate, ChordDiagram, ChordRibbon, ChordSort };