@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/threeglobe/TrajectoryGlobe.js

@@ -0,0 +1,138 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { GlobeAltitude, GlobeLand, GlobeSurface, GlobeTrail } from "./GlobeEnums.js";
+import { finite, magnitude } from "./GlobeMath.js";
+import { GlobeSamples } from "./GlobeSamples.js";
+import { MeshBuffer } from "./MeshBuffer.js";
+import { SiteGlobeChart } from "./SiteGlobeChart.js";
+import { ascending, groups } from "d3";
+import { CatmullRomCurve3, SphereGeometry } from "three";
+// src/charts/threeglobe/TrajectoryGlobe.ts
+var HIGH = .2;
+/** Paths through space and time: for ships, storms, flights and migrations. */
+var TrajectoryGlobe = class extends SiteGlobeChart {
+	static meta = {
+		id: "trajectory-globe",
+		name: "Trajectory globe",
+		family: ChartFamily.Geospatial,
+		dimension: Dimension.Three,
+		shape: DataShape.Geo,
+		description: "Traces ordered positions as smooth paths, with altitude free to carry time or a measured value.",
+		tags: [
+			"tracks",
+			"paths",
+			"space-time cube",
+			"storms",
+			"flights"
+		],
+		sample: (seed) => GlobeSamples.tracks(seed),
+		variants: {
+			altitude: [
+				GlobeAltitude.Value,
+				GlobeAltitude.Time,
+				GlobeAltitude.Surface
+			],
+			trail: Object.values(GlobeTrail),
+			head: [true, false],
+			taper: [true, false],
+			surface: Object.values(GlobeSurface)
+		},
+		valid: (v) => !(v.trail === GlobeTrail.Dots && v.taper === false)
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			track: "track",
+			time: "time",
+			altitude: GlobeAltitude.Value,
+			trail: GlobeTrail.Tube,
+			head: true,
+			taper: true,
+			land: GlobeLand.Solid
+		};
+	}
+	get tracks() {
+		const { track, time } = this.options;
+		return groups(this.sites, (site) => String(site.row[track] ?? "")).map(([name, points]) => [name, points.sort((a, b) => ascending(this.order(a, time), this.order(b, time)))]);
+	}
+	order(site, time) {
+		const value = site.row[time];
+		return value instanceof Date ? +value : finite(value);
+	}
+	/** Splits a track where a planar map tears it apart. */
+	runs(points, sites) {
+		const runs = [{
+			points: [points[0]],
+			sites: [sites[0]]
+		}];
+		for (let i = 1; i < points.length; i++) {
+			if (this.flat && points[i].distanceTo(points[i - 1]) > .6) runs.push({
+				points: [],
+				sites: []
+			});
+			runs.at(-1).points.push(points[i]);
+			runs.at(-1).sites.push(sites[i]);
+		}
+		return runs;
+	}
+	draw(ctx) {
+		const { tracks } = this, { altitude, trail, head, taper } = this.options;
+		const size = magnitude(this.sites.map((site) => site.value)), buffer = new MeshBuffer();
+		const dots = [], heads = [];
+		tracks.forEach(([name, sites], owner) => {
+			if (!sites.length) return;
+			const color = ctx.color(ctx.palette.color(name));
+			const lift = (site, i) => .012 + (altitude === GlobeAltitude.Value ? size(site.value) * HIGH : altitude === GlobeAltitude.Time ? i / Math.max(1, sites.length - 1) * HIGH : 0);
+			const raw = sites.map((site, i) => this.body.place(site.lon, site.lat, lift(site, i)));
+			for (const run of this.runs(raw, sites)) {
+				if (run.points.length < 2) continue;
+				const smooth = new CatmullRomCurve3(run.points, false, "centripetal").getPoints(run.points.length * 3);
+				const girth = (t) => taper ? .0016 + .0074 * t : .006;
+				if (trail === GlobeTrail.Tube) buffer.tube(smooth, girth, color, owner);
+				else if (trail === GlobeTrail.Ribbon) buffer.ribbon(smooth, smooth.map((point) => this.body.normal(point)), (t) => girth(t) * 3.4, .003, color, owner);
+				else run.points.forEach((point, i) => dots.push({
+					point,
+					name,
+					site: run.sites[i],
+					t: i / (run.points.length - 1)
+				}));
+			}
+			const last = raw.length - 1;
+			heads.push({
+				point: raw[last],
+				name,
+				site: sites[last],
+				t: 1
+			});
+		});
+		if (buffer.faces) {
+			const mesh = buffer.build(ctx, {
+				sweep: true,
+				duration: 1.8,
+				roughness: .5
+			});
+			mesh.castShadow = true;
+			ctx.root.add(mesh);
+			ctx.pick(mesh, (i) => {
+				const [name, sites] = tracks[i];
+				return {
+					title: name,
+					rows: [["Points", sites.length]],
+					color: ctx.palette.color(name)
+				};
+			});
+		}
+		const spot = (mark) => ({
+			title: mark.name,
+			rows: [[this.options.value, mark.site.value]],
+			color: ctx.palette.color(mark.name)
+		});
+		const pose = (scale) => (mark, _, node, p) => {
+			node.position.copy(mark.point);
+			node.scale.setScalar(Math.max(scale(mark) * p, 1e-4));
+		};
+		if (dots.length) this.stamp(ctx, new SphereGeometry(1, 10, 8), dots, pose((mark) => taper ? .005 + .008 * mark.t : .009), (mark) => ctx.palette.color(mark.name), spot, { grow: true });
+		if (head) this.stamp(ctx, new SphereGeometry(1, 16, 12), heads, pose(() => .02), (mark) => ctx.palette.color(mark.name), spot, { grow: true });
+		for (const mark of heads.slice(0, 5)) this.callout(ctx, mark.name, mark.point.clone().addScaledVector(this.body.normal(mark.point), .05));
+	}
+};
+export { TrajectoryGlobe };

package/dist/charts/threeglobe/index.js

@@ -0,0 +1,59 @@
+import { GlobeAggregate, GlobeAltitude, GlobeArcProfile, GlobeArcStroke, GlobeBubble, GlobeCell, GlobeClassify, GlobeContourMode, GlobeDotPlacement, GlobeFieldWeight, GlobeFootprint, GlobeKernel, GlobeLand, GlobeLineFamily, GlobeLinkWidth, GlobeMarker, GlobeParticle, GlobeProjection, GlobeRelief, GlobeResolution, GlobeRibbonEnd, GlobeRibbonSection, GlobeRingForm, GlobeSeeding, GlobeSizing, GlobeSpike, GlobeStreamStroke, GlobeSurface, GlobeSymbol, GlobeTile, GlobeTrail } from "./GlobeEnums.js";
+import { GlobeSamples } from "./GlobeSamples.js";
+import { GeoSurface } from "./GeoSurface.js";
+import { CylinderSurface } from "./CylinderSurface.js";
+import { GeoMesher } from "./GeoMesher.js";
+import { OwnedMesh } from "./OwnedMesh.js";
+import { MeshBuffer } from "./MeshBuffer.js";
+import { PlaneSurface } from "./PlaneSurface.js";
+import { SphereSurface } from "./SphereSurface.js";
+import { GlobeChart } from "./GlobeChart.js";
+import { LinkGlobeChart } from "./LinkGlobeChart.js";
+import { ArcGlobeChart } from "./ArcGlobeChart.js";
+import { SiteGlobeChart } from "./SiteGlobeChart.js";
+import { Bubble3DMap } from "./Bubble3DMap.js";
+import { RegionGlobeChart } from "./RegionGlobeChart.js";
+import { ChoroplethGlobe } from "./ChoroplethGlobe.js";
+import { ContourGlobe } from "./ContourGlobe.js";
+import { DotDensityGlobe } from "./DotDensityGlobe.js";
+import { MapPlaneChart } from "./MapPlaneChart.js";
+import { ExtrudedMapChart } from "./ExtrudedMapChart.js";
+import { FlatProjectionPlane } from "./FlatProjectionPlane.js";
+import { FlowGlobeChart } from "./FlowGlobeChart.js";
+import { Globe3DChart } from "./Globe3DChart.js";
+import { Graticule3DGlobe } from "./Graticule3DGlobe.js";
+import { HeatGlobe } from "./HeatGlobe.js";
+import { SphereGrid } from "./SphereGrid.js";
+import { HexGlobe } from "./HexGlobe.js";
+import { PointGlobeChart } from "./PointGlobeChart.js";
+import { PrismMapChart } from "./PrismMapChart.js";
+import { RibbonGlobe } from "./RibbonGlobe.js";
+import { RingGlobe } from "./RingGlobe.js";
+import { SpikeGlobeChart } from "./SpikeGlobeChart.js";
+import { StreamGlobe } from "./StreamGlobe.js";
+import { Tile3DMap } from "./Tile3DMap.js";
+import { TrajectoryGlobe } from "./TrajectoryGlobe.js";
+// src/charts/threeglobe/index.ts
+var threeglobeCatalog = [
+	Globe3DChart,
+	ArcGlobeChart,
+	PointGlobeChart,
+	ChoroplethGlobe,
+	SpikeGlobeChart,
+	HexGlobe,
+	ExtrudedMapChart,
+	FlowGlobeChart,
+	RibbonGlobe,
+	Graticule3DGlobe,
+	Bubble3DMap,
+	Tile3DMap,
+	TrajectoryGlobe,
+	HeatGlobe,
+	FlatProjectionPlane,
+	PrismMapChart,
+	RingGlobe,
+	ContourGlobe,
+	StreamGlobe,
+	DotDensityGlobe
+];
+export { ArcGlobeChart, Bubble3DMap, ChoroplethGlobe, ContourGlobe, CylinderSurface, DotDensityGlobe, ExtrudedMapChart, FlatProjectionPlane, FlowGlobeChart, GeoMesher, GeoSurface, Globe3DChart, GlobeAggregate, GlobeAltitude, GlobeArcProfile, GlobeArcStroke, GlobeBubble, GlobeCell, GlobeChart, GlobeClassify, GlobeContourMode, GlobeDotPlacement, GlobeFieldWeight, GlobeFootprint, GlobeKernel, GlobeLand, GlobeLineFamily, GlobeLinkWidth, GlobeMarker, GlobeParticle, GlobeProjection, GlobeRelief, GlobeResolution, GlobeRibbonEnd, GlobeRibbonSection, GlobeRingForm, GlobeSamples, GlobeSeeding, GlobeSizing, GlobeSpike, GlobeStreamStroke, GlobeSurface, GlobeSymbol, GlobeTile, GlobeTrail, Graticule3DGlobe, HeatGlobe, HexGlobe, LinkGlobeChart, MapPlaneChart, MeshBuffer, OwnedMesh, PlaneSurface, PointGlobeChart, PrismMapChart, RegionGlobeChart, RibbonGlobe, RingGlobe, SiteGlobeChart, SphereGrid, SphereSurface, SpikeGlobeChart, StreamGlobe, Tile3DMap, TrajectoryGlobe, threeglobeCatalog };

package/dist/charts/threenetwork/Arc3DDiagram.js

@@ -0,0 +1,105 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { NodeSizing3D } from "./enums.js";
+import { Graph3DBase } from "./Graph3DBase.js";
+import { NetworkMarks3D } from "./NetworkMarks3D.js";
+import { CylinderGeometry, Quaternion, Vector3 } from "three";
+// src/charts/threenetwork/Arc3DDiagram.ts
+/** How arcs fan around the spine. */
+var ArcPlane3D = /* @__PURE__ */ function(ArcPlane3D) {
+	ArcPlane3D["Fan"] = "fan";
+	ArcPlane3D["Sides"] = "sides";
+	ArcPlane3D["Single"] = "single";
+	return ArcPlane3D;
+}({});
+var ArcOrder3D = /* @__PURE__ */ function(ArcOrder3D) {
+	ArcOrder3D["Group"] = "group";
+	ArcOrder3D["Degree"] = "degree";
+	ArcOrder3D["Input"] = "input";
+	return ArcOrder3D;
+}({});
+var ArcProfile3D = /* @__PURE__ */ function(ArcProfile3D) {
+	ArcProfile3D["Circle"] = "circle";
+	ArcProfile3D["Parabola"] = "parabola";
+	return ArcProfile3D;
+}({});
+var UP = new Vector3(0, 1, 0);
+var AXIS = new Vector3(1, 0, 0);
+/** Arc diagram with depth: nodes along a spine, arcs fanned around it so each group gets its own plane. */
+var Arc3DDiagram = class extends Graph3DBase {
+	static meta = {
+		id: "arc-diagram-3d",
+		name: "3D arc diagram",
+		family: ChartFamily.Network,
+		dimension: Dimension.Three,
+		shape: DataShape.Graph,
+		description: "Lines nodes along one axis and fans link arcs around it, exposing clusters and long-range links.",
+		tags: [
+			"arc diagram",
+			"network",
+			"linear layout"
+		],
+		sample: (seed) => SampleData.graph(seed, 44, 4),
+		variants: {
+			plane: Object.values(ArcPlane3D),
+			order: Object.values(ArcOrder3D),
+			profile: Object.values(ArcProfile3D),
+			sizeBy: [NodeSizing3D.Degree, NodeSizing3D.Value]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			plane: "fan",
+			order: "group",
+			profile: "circle",
+			azimuth: 24,
+			elevation: 18,
+			distance: 3.6
+		};
+	}
+	sorted(nodes) {
+		const { order } = this.options;
+		if (order === "input") return nodes;
+		if (order === "degree") return [...nodes].sort((a, b) => b.degree - a.degree || a.index - b.index);
+		return [...nodes].sort((a, b) => a.group.localeCompare(b.group) || a.index - b.index);
+	}
+	/** Plane angle around the spine: 0 is straight up. */
+	angle(link, groups) {
+		const { plane } = this.options;
+		if (plane === "single") return 0;
+		if (plane === "sides") return link.source.group === link.target.group ? 0 : Math.PI;
+		return groups.length > 1 ? (groups.indexOf(link.source.group) / (groups.length - 1) - .5) * Math.PI * .9 : 0;
+	}
+	build(ctx) {
+		const { nodes, links, groups } = this.model();
+		if (!nodes.length) return;
+		const { profile } = this.options;
+		const marks = new NetworkMarks3D(ctx);
+		for (const node of nodes) node.radius *= .62;
+		const order = this.sorted(nodes);
+		const seat = new Map(order.map((node, i) => [node, order.length > 1 ? i / (order.length - 1) * 2 - 1 : 0]));
+		const base = -.3;
+		const route = (link) => {
+			const a = seat.get(link.source), b = seat.get(link.target);
+			const spin = new Quaternion().setFromAxisAngle(AXIS, this.angle(link, groups));
+			const span = Math.abs(b - a) / 2, middle = (a + b) / 2;
+			return Array.from({ length: 29 }, (_, i) => {
+				const t = i / 28, x = a + (b - a) * t;
+				const rise = profile === "circle" ? Math.sin(Math.PI * t) * span : 4 * t * (1 - t) * span * .72;
+				return new Vector3(profile === "circle" ? middle - Math.cos(Math.PI * t) * (b - a) / 2 : x, rise * 1.05, 0).applyQuaternion(spin).add(new Vector3(0, base, 0));
+			});
+		};
+		const at = (node) => new Vector3(seat.get(node), base, 0);
+		marks.instances(new CylinderGeometry(1, 1, 1, 10), [{
+			at: new Vector3(0, base, 0),
+			size: new Vector3(.006, 2.04, .006),
+			color: ctx.theme.axis,
+			spin: new Quaternion().setFromUnitVectors(UP, AXIS)
+		}], { shadow: false });
+		this.drawLinks(ctx, marks, links, route, { opacity: .72 });
+		this.drawNodes(ctx, marks, nodes, at);
+		this.labelHubs(ctx, nodes, at, 3);
+	}
+};
+export { Arc3DDiagram, ArcOrder3D, ArcPlane3D, ArcProfile3D };

package/dist/charts/threenetwork/Calendar3DChart.js

@@ -0,0 +1,179 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { LabelSpacer3D } from "./LabelSpacer3D.js";
+import { NetworkMarks3D } from "./NetworkMarks3D.js";
+import { DAY, Temporal3DBase } from "./Temporal3DBase.js";
+import { rollup, utcFormat } from "d3";
+import { BoxGeometry, CylinderGeometry, SphereGeometry, Vector3 } from "three";
+// src/charts/threenetwork/Calendar3DChart.ts
+var CalendarLayout3D = /* @__PURE__ */ function(CalendarLayout3D) {
+	CalendarLayout3D["Strip"] = "strip";
+	CalendarLayout3D["Months"] = "months";
+	CalendarLayout3D["Ring"] = "ring";
+	return CalendarLayout3D;
+}({});
+var CalendarMark3D = /* @__PURE__ */ function(CalendarMark3D) {
+	CalendarMark3D["Column"] = "column";
+	CalendarMark3D["Cylinder"] = "cylinder";
+	CalendarMark3D["Sphere"] = "sphere";
+	return CalendarMark3D;
+}({});
+var CalendarAggregate3D = /* @__PURE__ */ function(CalendarAggregate3D) {
+	CalendarAggregate3D["Sum"] = "sum";
+	CalendarAggregate3D["Mean"] = "mean";
+	CalendarAggregate3D["Max"] = "max";
+	return CalendarAggregate3D;
+}({});
+var CalendarWeekStart3D = /* @__PURE__ */ function(CalendarWeekStart3D) {
+	CalendarWeekStart3D["Sunday"] = "sunday";
+	CalendarWeekStart3D["Monday"] = "monday";
+	return CalendarWeekStart3D;
+}({});
+var BASE = -.4;
+var RISE = .62;
+var monthName = utcFormat("%b");
+/** A calendar skyline: daily values stand on a week grid, showing weekly rhythm and seasonal swells together. */
+var Calendar3DChart = class extends Temporal3DBase {
+	static meta = {
+		id: "calendar-3d",
+		name: "3D calendar",
+		family: ChartFamily.Temporal,
+		dimension: Dimension.Three,
+		shape: DataShape.Table,
+		description: "Raises each day of a calendar by its value, so weekly habits and long-run swells show in one skyline.",
+		tags: [
+			"calendar heatmap",
+			"skyline",
+			"contribution graph"
+		],
+		sample: (seed) => SampleData.timeSeries(seed, 240, 2).filter((row, i) => row.series === "Alpha" || i % 3 > 0),
+		variants: {
+			layout: Object.values(CalendarLayout3D),
+			mark: Object.values(CalendarMark3D),
+			aggregate: Object.values(CalendarAggregate3D),
+			weekStart: Object.values(CalendarWeekStart3D)
+		}
+	};
+	defaults() {
+		return {
+			date: "date",
+			value: "value",
+			layout: "strip",
+			mark: "column",
+			aggregate: "sum",
+			weekStart: "sunday",
+			azimuth: 28,
+			elevation: 42,
+			distance: 3.7
+		};
+	}
+	geometry() {
+		const { mark } = this.options;
+		if (mark === "sphere") return new SphereGeometry(.5, 14, 10);
+		return mark === "cylinder" ? new CylinderGeometry(.5, .5, 1, 14) : new BoxGeometry(1, 1, 1);
+	}
+	combine(values, aggregate) {
+		const total = values.reduce((a, b) => a + b, 0);
+		if (aggregate === "sum") return total;
+		return aggregate === "mean" ? total / values.length : Math.max(...values);
+	}
+	/** Grid position of one day, with the cell width it gets. */
+	cell(day, first, weeks) {
+		const { layout, weekStart } = this.options;
+		const shift = weekStart === "monday" ? 6 : 0;
+		const weekday = (new Date(day).getUTCDay() + shift) % 7;
+		const firstWeekday = (new Date(first).getUTCDay() + shift) % 7;
+		const week = Math.floor(((day - first) / DAY + firstWeekday) / 7);
+		if (layout === "ring") {
+			const angle = week / Math.max(weeks, 1) * Math.PI * 2 - Math.PI / 2, radius = .42 + weekday * .09;
+			return {
+				x: Math.cos(angle) * radius,
+				z: Math.sin(angle) * radius,
+				width: Math.min(.075, Math.PI * 2 * .42 / Math.max(weeks, 1) * .92)
+			};
+		}
+		if (layout === "months") {
+			const date = new Date(day), index = (date.getUTCFullYear() - new Date(first).getUTCFullYear()) * 12 + date.getUTCMonth() - new Date(first).getUTCMonth();
+			const monthStart = (new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), 1)).getUTCDay() + shift) % 7;
+			const row = Math.floor((date.getUTCDate() - 1 + monthStart) / 7), columns = 4, width = .07;
+			return {
+				x: -.98 + index % columns * .5 + weekday * width * .92,
+				z: -.72 + Math.floor(index / columns) * .46 + row * width * .92,
+				width: width * .84
+			};
+		}
+		const width = Math.min(.09, 2 / Math.max(weeks, 1));
+		return {
+			x: (week - weeks / 2 + .5) * width,
+			z: (weekday - 3) * width * 1.6,
+			width: width * .86
+		};
+	}
+	build(ctx) {
+		const { date, value, aggregate } = this.options;
+		const days = rollup(this.dated(date).filter(({ row }) => Number.isFinite(+row[value]) && row[value] != null), (group) => this.combine(group.map(({ row }) => +row[value]), aggregate), ({ time }) => Math.floor(time / DAY) * DAY);
+		if (!days.size) return;
+		const marks = new NetworkMarks3D(ctx);
+		const list = [...days].sort((a, b) => a[0] - b[0]);
+		const first = list[0][0], last = list.at(-1)[0];
+		const weeks = Math.ceil((last - first) / DAY / 7) + 1;
+		const peak = Math.max(...list.map(([, amount]) => Math.abs(amount)), 1e-6);
+		const signed = list.some(([, amount]) => amount < 0);
+		const sphere = this.options.mark === "sphere";
+		marks.instances(this.geometry(), list.map(([day, amount]) => {
+			const { x, z, width } = this.cell(day, first, weeks), share = Math.abs(amount) / peak, tall = Math.max(share * RISE, .008);
+			const diameter = width * Math.max(Math.cbrt(share), .2) * 1.05;
+			return {
+				at: new Vector3(x, sphere ? BASE + share * RISE : BASE + tall / 2, z),
+				size: sphere ? diameter : new Vector3(width, tall, width),
+				color: signed ? ctx.palette.diverging(amount / peak) : ctx.palette.sequential(.1 + share * .9),
+				tip: {
+					title: new Date(day).toISOString().slice(0, 10),
+					rows: [[String(value), Math.round(amount * 100) / 100]]
+				}
+			};
+		}), {
+			rise: !sphere,
+			roughness: .55
+		});
+		this.labelMonths(ctx, list.map(([day]) => day), first, weeks);
+	}
+	/** Names each month once, at the first day it has data, thinned so long ranges stay near a dozen labels. */
+	labelMonths(ctx, days, first, weeks) {
+		const seen = /* @__PURE__ */ new Set();
+		const opening = days.filter((day) => {
+			const key = new Date(day).toISOString().slice(0, 7), fresh = !seen.has(key);
+			seen.add(key);
+			return fresh;
+		});
+		const stride = Math.ceil(opening.length / 12);
+		const spacer = new LabelSpacer3D(this.options, this.size.height);
+		opening.filter((_, i) => i % stride === 0).forEach((day) => {
+			const spot = this.monthSpot(day, first, weeks), text = monthName(new Date(day));
+			if (spacer.keep(spot, text)) ctx.label(text, spot, "muted", 10);
+		});
+	}
+	monthSpot(day, first, weeks) {
+		const { layout } = this.options;
+		const { x, z } = this.cell(day, first, weeks);
+		if (layout === "ring") {
+			const reach = 1.02 / Math.hypot(x, z);
+			return [
+				x * reach,
+				BASE,
+				z * reach
+			];
+		}
+		if (layout === "months") return [
+			x + .12,
+			BASE,
+			z - .08
+		];
+		return [
+			x,
+			BASE,
+			Math.min(.09, 2 / Math.max(weeks, 1)) * 1.6 * 3.9
+		];
+	}
+};
+export { Calendar3DChart, CalendarAggregate3D, CalendarLayout3D, CalendarMark3D, CalendarWeekStart3D };

package/dist/charts/threenetwork/Chord3DChart.js

@@ -0,0 +1,150 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { Graph3DBase } from "./Graph3DBase.js";
+import { NetworkMarks3D } from "./NetworkMarks3D.js";
+import { Path3D } from "./Path3D.js";
+import { RingSegment3D } from "./RingSegment3D.js";
+import { chord, chordDirected, descending } from "d3";
+import { Vector3 } from "three";
+// src/charts/threenetwork/Chord3DChart.ts
+/** The path a ribbon takes between two rim arcs. */
+var ChordArc3D = /* @__PURE__ */ function(ChordArc3D) {
+	ChordArc3D["Arch"] = "arch";
+	ChordArc3D["Flat"] = "flat";
+	ChordArc3D["Bowl"] = "bowl";
+	ChordArc3D["Tube"] = "tube";
+	return ChordArc3D;
+}({});
+var ChordRim3D = /* @__PURE__ */ function(ChordRim3D) {
+	ChordRim3D["Band"] = "band";
+	ChordRim3D["Wall"] = "wall";
+	return ChordRim3D;
+}({});
+var ChordOrder3D = /* @__PURE__ */ function(ChordOrder3D) {
+	ChordOrder3D["Input"] = "input";
+	ChordOrder3D["Descending"] = "descending";
+	return ChordOrder3D;
+}({});
+var RADIUS = .86;
+var THICK = .012;
+var ACROSS = 6;
+/** Chord diagram with its ribbons lifted off the page, so the crossings that tangle a flat chord diagram separate. */
+var Chord3DChart = class extends Graph3DBase {
+	static meta = {
+		id: "chord-3d",
+		name: "3D chord diagram",
+		family: ChartFamily.Flow,
+		dimension: Dimension.Three,
+		shape: DataShape.Graph,
+		description: "Shows flows between members of one set as ribbons arching across a ring, separating crossings in height.",
+		tags: [
+			"chord",
+			"flow matrix",
+			"migration"
+		],
+		sample: (seed) => SampleData.flow(seed, 4, 2),
+		variants: {
+			arc: Object.values(ChordArc3D),
+			rim: Object.values(ChordRim3D),
+			order: Object.values(ChordOrder3D),
+			directed: [false, true]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			arc: "arch",
+			rim: "band",
+			order: "input",
+			directed: false,
+			elevation: 34,
+			distance: 4.1
+		};
+	}
+	rimPoint(angle) {
+		return new Vector3(RADIUS * Math.cos(angle), -.2, RADIUS * Math.sin(angle));
+	}
+	/** Cross-section between two rim points at `t` along the ribbon, as a quadratic through a raised or sunken centre. */
+	along(a, b, t, height) {
+		const from = this.rimPoint(a), to = this.rimPoint(b), mid = new Vector3(0, -.2 + height, 0);
+		return from.multiplyScalar((1 - t) ** 2).addScaledVector(mid, 2 * t * (1 - t)).addScaledVector(to, t * t);
+	}
+	ribbon({ source, target }, height) {
+		const steps = 30;
+		return Array.from({ length: 31 }, (_, i) => {
+			const t = i / steps;
+			const lower = Array.from({ length: 7 }, (_, j) => {
+				const f = j / ACROSS;
+				return this.along(source.startAngle + (source.endAngle - source.startAngle) * f, target.endAngle + (target.startAngle - target.endAngle) * f, t, height);
+			});
+			return [...lower, ...[...lower].reverse().map((point) => point.clone().add(new Vector3(0, THICK, 0)))];
+		});
+	}
+	build(ctx) {
+		const { nodes, links } = this.model();
+		if (!links.length) return;
+		const { arc, rim, order, directed } = this.options;
+		const marks = new NetworkMarks3D(ctx);
+		const matrix = nodes.map(() => nodes.map(() => 0));
+		for (const { source, target, value } of links) {
+			matrix[source.index][target.index] += value;
+			if (!directed) matrix[target.index][source.index] += value;
+		}
+		const layout = (directed ? chordDirected() : chord()).padAngle(.06);
+		if (order === "descending") layout.sortGroups(descending);
+		const chords = layout(matrix);
+		const colorOf = (index) => nodes.length <= 8 ? ctx.palette.color(nodes[index].id) : ctx.palette.color(nodes[index].group);
+		const heights = (item) => {
+			const gap = Math.abs((item.source.startAngle + item.source.endAngle - (item.target.startAngle + item.target.endAngle)) / 2) % (Math.PI * 2);
+			const reach = Math.min(gap, Math.PI * 2 - gap) / Math.PI;
+			return arc === "bowl" ? -.3 - reach * .75 : arc === "flat" ? 0 : .3 + reach * .95;
+		};
+		const ribbons = chords.map((item, i) => {
+			const tip = {
+				title: `${nodes[item.source.index].id} ↔ ${nodes[item.target.index].id}`,
+				rows: [["Flow", item.source.value]]
+			};
+			const lift = arc === "flat" ? i / chords.length * .06 : 0;
+			const color = marks.faded(colorOf(item.source.index), .18), end = marks.faded(colorOf(item.target.index), .18);
+			if (arc !== "tube") return {
+				rings: this.ribbon(item, heights(item) + 0).map((ring) => ring.map((point) => point.clone().setY(point.y + lift))),
+				color,
+				end,
+				tip
+			};
+			const a = (item.source.startAngle + item.source.endAngle) / 2, b = (item.target.startAngle + item.target.endAngle) / 2;
+			const steps = 26;
+			const path = Array.from({ length: 27 }, (_, s) => this.along(a, b, s / steps, heights(item)));
+			return {
+				rings: Path3D.tube(path, Math.max(.008, Math.sqrt(item.source.endAngle - item.source.startAngle) * .05), 10),
+				color,
+				end,
+				tip
+			};
+		});
+		marks.lofts(ribbons, { sharp: arc !== "tube" }, {
+			opacity: .84,
+			shadow: false
+		});
+		const biggest = Math.max(...chords.groups.map((group) => group.value), 1);
+		const surface = (angle, radius, lift) => new Vector3(radius * Math.cos(angle), lift - .2, radius * Math.sin(angle));
+		marks.lofts(chords.groups.map((group) => ({
+			rings: RingSegment3D.rings(surface, group.startAngle, group.endAngle, .872, .95, -.04, rim === "wall" ? .05 + group.value / biggest * .42 : .05),
+			color: colorOf(group.index),
+			tip: {
+				title: nodes[group.index].id,
+				color: colorOf(group.index),
+				rows: [["Total", group.value]]
+			}
+		})), { sharp: true });
+		for (const group of chords.groups) {
+			const angle = (group.startAngle + group.endAngle) / 2;
+			ctx.label(nodes[group.index].id, [
+				Math.cos(angle) * 1.04,
+				-.14,
+				Math.sin(angle) * 1.04
+			], "secondary", 10);
+		}
+	}
+};
+export { Chord3DChart, ChordArc3D, ChordOrder3D, ChordRim3D };