@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/threevolume/PointCloudChart.js

@@ -0,0 +1,171 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { PointRowsChart } from "./PointRowsChart.js";
+import { PointCoordinates, PointEnvelope, PointGuides, PointMark, PointNormalization } from "./volumeEnums.js";
+import { VolumeScene } from "./VolumeScene.js";
+import { ascending } from "d3";
+import { BoxGeometry, BufferGeometry, Float32BufferAttribute, IcosahedronGeometry, InstancedMesh, Mesh, Points, PointsMaterial, SphereGeometry, Vector3 } from "three";
+import { ConvexGeometry } from "three/addons/geometries/ConvexGeometry.js";
+// src/charts/threevolume/PointCloudChart.ts
+/** Rows with a `z` column, built from two independent `SampleData.points` draws. */
+var samplePoints3D = (seed, count, groups) => {
+	const depth = SampleData.points(seed + 11, count, groups);
+	return SampleData.points(seed, count, groups).map((row, i) => ({
+		...row,
+		z: depth[count - 1 - i].y
+	}));
+};
+/** Rows positioned in three dimensions: for spotting clusters, shells and outliers that any 2D projection would collapse. */
+var PointCloudChart = class extends PointRowsChart {
+	static meta = {
+		id: "point-cloud",
+		name: "Point cloud",
+		family: ChartFamily.Relationship,
+		dimension: Dimension.Three,
+		shape: DataShape.Table,
+		description: "Plots rows as points in cartesian, cylindrical or spherical space, with optional cluster envelopes.",
+		tags: [
+			"scatter 3d",
+			"lidar",
+			"cluster",
+			"embedding",
+			"pca"
+		],
+		sample: (seed) => samplePoints3D(seed, 240, 4),
+		variants: {
+			mark: Object.values(PointMark),
+			coordinates: Object.values(PointCoordinates),
+			normalization: Object.values(PointNormalization),
+			envelope: Object.values(PointEnvelope),
+			guides: Object.values(PointGuides)
+		},
+		valid: (values) => values.mark !== PointMark.Sprite || values.guides !== PointGuides.Drops
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			mark: PointMark.Sphere,
+			coordinates: PointCoordinates.Cartesian,
+			normalization: PointNormalization.Range,
+			envelope: PointEnvelope.None,
+			guides: PointGuides.None
+		};
+	}
+	normalise(values) {
+		if (this.options.normalization === PointNormalization.Range) return values.map(this.unit(values));
+		const order = values.map((_, i) => i).sort((a, b) => ascending(values[a], values[b]));
+		const rank = new Array(values.length);
+		order.forEach((row, position) => {
+			rank[row] = position / Math.max(1, values.length - 1);
+		});
+		return rank;
+	}
+	locate(a, b, c) {
+		const { coordinates } = this.options;
+		if (coordinates === PointCoordinates.Cylindrical) {
+			const radius = .25 + .65 * a, angle = b * Math.PI * 2;
+			return new Vector3(radius * Math.cos(angle), c * 1.8 - .9, radius * Math.sin(angle));
+		}
+		if (coordinates === PointCoordinates.Spherical) {
+			const radius = .3 + .6 * c, theta = a * Math.PI * 2, phi = .12 + b * (Math.PI - .24);
+			return new Vector3(radius * Math.sin(phi) * Math.cos(theta), radius * Math.cos(phi), radius * Math.sin(phi) * Math.sin(theta));
+		}
+		return new Vector3(a * 1.8 - .9, b * 1.8 - .9, c * 1.8 - .9);
+	}
+	build(ctx) {
+		const { mark, envelope, guides, coordinates, normalization } = this.options;
+		const rows = this.rows();
+		this.rowStage(ctx, coordinates === PointCoordinates.Cartesian && normalization === PointNormalization.Range ? rows : []);
+		if (!rows.length) return;
+		const ax = this.normalise(rows.map((row) => row.x)), ay = this.normalise(rows.map((row) => row.y)), az = this.normalise(rows.map((row) => row.z));
+		const spots = rows.map((_, i) => this.locate(ax[i], ay[i], az[i]));
+		const tint = rows.map((row) => ctx.color(ctx.palette.color(row.group)));
+		const radius = Math.max(.014, .036 - rows.length / 6e4);
+		if (mark === PointMark.Sprite) {
+			const geometry = new BufferGeometry();
+			geometry.setAttribute("position", new Float32BufferAttribute(spots.flatMap((spot) => spot.toArray()), 3));
+			geometry.setAttribute("color", new Float32BufferAttribute(tint.flatMap((color) => color.toArray()), 3));
+			const cloud = new Points(geometry, new PointsMaterial({
+				size: radius * 2.2,
+				vertexColors: true,
+				map: VolumeScene.roundSprite,
+				alphaTest: .4,
+				transparent: true
+			}));
+			ctx.root.add(cloud);
+			this.drawOn(ctx, geometry);
+		} else {
+			const shape = mark === PointMark.Cube ? new BoxGeometry(1.6, 1.6, 1.6) : new IcosahedronGeometry(1, 2);
+			const mesh = new InstancedMesh(shape, this.surface({ roughness: .4 }), rows.length);
+			mesh.castShadow = true;
+			tint.forEach((color, i) => mesh.setColorAt(i, color));
+			this.populate(ctx, mesh, (i, dummy) => {
+				dummy.position.copy(spots[i]);
+				dummy.scale.setScalar(radius);
+			}, (i) => i / rows.length);
+			ctx.root.add(mesh);
+			ctx.pick(mesh, (i) => ({
+				title: rows[i].group,
+				color: ctx.palette.color(rows[i].group),
+				rows: [
+					["x", rows[i].x],
+					["y", rows[i].y],
+					["z", rows[i].z]
+				]
+			}));
+		}
+		if (guides === PointGuides.Drops) ctx.root.add(this.segments(ctx, spots.flatMap((p) => [
+			p.x,
+			p.y,
+			p.z,
+			p.x,
+			-1,
+			p.z
+		]), ctx.theme.axis, .55));
+		if (guides === PointGuides.Shadows) this.shadows(ctx, spots);
+		if (envelope !== PointEnvelope.None) this.envelopes(ctx, rows.map((row) => row.group), spots);
+	}
+	/** Flattened copies of the cloud on the floor and both back walls. */
+	shadows(ctx, spots) {
+		const flat = spots.flatMap((p) => [
+			p.x,
+			-.995,
+			p.z,
+			-.995,
+			p.y,
+			p.z,
+			p.x,
+			p.y,
+			-.995
+		]);
+		const geometry = new BufferGeometry();
+		geometry.setAttribute("position", new Float32BufferAttribute(flat, 3));
+		ctx.root.add(new Points(geometry, new PointsMaterial({
+			size: .03,
+			color: ctx.color(ctx.theme.axis),
+			map: VolumeScene.roundSprite,
+			alphaTest: .4,
+			transparent: true
+		})));
+	}
+	envelopes(ctx, groups, spots) {
+		for (const group of new Set(groups)) {
+			const members = spots.filter((_, i) => groups[i] === group);
+			if (members.length < 5) continue;
+			const material = this.surface({
+				color: ctx.color(ctx.palette.color(group)),
+				transparent: true,
+				opacity: .16,
+				depthWrite: false
+			});
+			if (this.options.envelope === PointEnvelope.Hull) {
+				ctx.root.add(new Mesh(new ConvexGeometry(members), material));
+				continue;
+			}
+			const shell = new Mesh(new SphereGeometry(1, 32, 22), material);
+			shell.applyMatrix4(this.ellipsoid(members));
+			ctx.root.add(shell);
+		}
+	}
+};
+export { PointCloudChart, samplePoints3D };

package/dist/charts/threevolume/PointRowsChart.js

@@ -0,0 +1,137 @@
+import { VolumeScene } from "./VolumeScene.js";
+import { extent } from "d3";
+import { Matrix4, Vector3 } from "three";
+// src/charts/threevolume/PointRowsChart.ts
+var numeric = (cell) => cell instanceof Date ? +cell : cell === null || cell === void 0 || cell === "" ? NaN : Number(cell);
+/** Base for charts of `{ x, y, z }` rows: drops incomplete rows and supplies the shared numeric helpers. */
+var PointRowsChart = class extends VolumeScene {
+	defaults() {
+		return {
+			x: "x",
+			y: "y",
+			z: "z",
+			group: "group"
+		};
+	}
+	rows() {
+		const { data, x, y, z, group } = this.options;
+		if (!Array.isArray(data)) return [];
+		return data.flatMap((row) => {
+			const point = {
+				row,
+				x: numeric(row[x]),
+				y: numeric(row[y]),
+				z: numeric(row[z]),
+				group: String(row[group] ?? "All")
+			};
+			return Number.isFinite(point.x + point.y + point.z) ? [point] : [];
+		});
+	}
+	/** Maps values to 0..1; a constant column lands in the middle. */
+	unit(values) {
+		const [low = 0, high = 1] = extent(values);
+		return (value) => high > low ? (value - low) / (high - low) : .5;
+	}
+	/** `reach` is the world half-extent the data was fitted to, so ticks land on true positions. */
+	rowStage(ctx, points, reach = .9) {
+		const { x, y, z } = this.options;
+		const axis = (name, key) => ({
+			name,
+			domain: extent(points, (point) => point[key]),
+			range: [-reach, reach]
+		});
+		this.stage(ctx, points.length > 1 ? {
+			x: axis(x, "x"),
+			y: axis(y, "y"),
+			z: axis(z, "z")
+		} : {});
+	}
+	/** Principal axes of a point set, as a transform that maps the unit sphere to its 2σ ellipsoid. */
+	ellipsoid(points) {
+		const mean = points.reduce((sum, point) => sum.add(point), new Vector3()).divideScalar(points.length || 1);
+		const c = [
+			[
+				0,
+				0,
+				0
+			],
+			[
+				0,
+				0,
+				0
+			],
+			[
+				0,
+				0,
+				0
+			]
+		];
+		for (const point of points) {
+			const d = [
+				point.x - mean.x,
+				point.y - mean.y,
+				point.z - mean.z
+			];
+			for (let a = 0; a < 3; a++) for (let b = 0; b < 3; b++) c[a][b] += d[a] * d[b] / (points.length || 1);
+		}
+		const { values, vectors } = symmetricEigen(c);
+		const scale = (i) => 2 * Math.sqrt(Math.max(1e-5, values[i]));
+		const axis = (i) => new Vector3(vectors[0][i], vectors[1][i], vectors[2][i]).multiplyScalar(scale(i));
+		return new Matrix4().makeBasis(axis(0), axis(1), axis(2)).setPosition(mean);
+	}
+};
+/** Jacobi eigenvalue iteration for a 3×3 symmetric matrix; columns of `vectors` are eigenvectors. */
+function symmetricEigen(input) {
+	const a = input.map((row) => [...row]);
+	const v = [
+		[
+			1,
+			0,
+			0
+		],
+		[
+			0,
+			1,
+			0
+		],
+		[
+			0,
+			0,
+			1
+		]
+	];
+	for (let sweep = 0; sweep < 12; sweep++) for (const [p, q] of [
+		[0, 1],
+		[0, 2],
+		[1, 2]
+	]) {
+		if (Math.abs(a[p][q]) < 1e-10) continue;
+		const theta = (a[q][q] - a[p][p]) / (2 * a[p][q]);
+		const t = Math.sign(theta || 1) / (Math.abs(theta) + Math.sqrt(theta * theta + 1));
+		const c = 1 / Math.sqrt(t * t + 1), s = t * c;
+		for (let k = 0; k < 3; k++) {
+			const x = a[k][p], y = a[k][q];
+			a[k][p] = c * x - s * y;
+			a[k][q] = s * x + c * y;
+		}
+		for (let k = 0; k < 3; k++) {
+			const x = a[p][k], y = a[q][k];
+			a[p][k] = c * x - s * y;
+			a[q][k] = s * x + c * y;
+		}
+		for (let k = 0; k < 3; k++) {
+			const x = v[k][p], y = v[k][q];
+			v[k][p] = c * x - s * y;
+			v[k][q] = s * x + c * y;
+		}
+	}
+	return {
+		values: [
+			a[0][0],
+			a[1][1],
+			a[2][2]
+		],
+		vectors: v
+	};
+}
+export { PointRowsChart, numeric };

package/dist/charts/threevolume/Slab3DChart.js

@@ -0,0 +1,145 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { SlabRelief, VolumeAggregate, VolumeAxis } from "./volumeEnums.js";
+import { VolumeGridChart } from "./VolumeGridChart.js";
+import { extent } from "d3";
+import { BoxGeometry, InstancedMesh } from "three";
+// src/charts/threevolume/Slab3DChart.ts
+var AXIS_INDEX = {
+	[VolumeAxis.X]: 0,
+	[VolumeAxis.Y]: 1,
+	[VolumeAxis.Z]: 2
+};
+/** Thick-slab projections of a volume: for summarising each section at once, as in maximum-intensity imaging. */
+var Slab3DChart = class extends VolumeGridChart {
+	static meta = {
+		id: "slab-3d",
+		name: "3D slabs",
+		family: ChartFamily.Volumetric,
+		dimension: Dimension.Three,
+		shape: DataShape.Volume,
+		description: "Divides a volume into thick sections and draws each as a tile map of its mean, maximum or minimum.",
+		tags: [
+			"mip",
+			"projection",
+			"slab",
+			"stack",
+			"tomography"
+		],
+		sample: (seed) => SampleData.volume(seed, 28),
+		variants: {
+			axis: [
+				VolumeAxis.Y,
+				VolumeAxis.X,
+				VolumeAxis.Z
+			],
+			slabs: [
+				4,
+				3,
+				6
+			],
+			aggregate: [
+				VolumeAggregate.Max,
+				VolumeAggregate.Mean,
+				VolumeAggregate.Min
+			],
+			relief: Object.values(SlabRelief),
+			exploded: [true, false]
+		}
+	};
+	defaults() {
+		return {
+			axis: VolumeAxis.Y,
+			slabs: 4,
+			aggregate: VolumeAggregate.Max,
+			relief: SlabRelief.Rising,
+			exploded: true,
+			resolution: 16
+		};
+	}
+	build(ctx) {
+		const { axis, slabs, aggregate, relief, exploded, resolution } = this.options;
+		const grid = this.grid;
+		this.volumeStage(ctx, grid);
+		if (grid.empty) return;
+		const main = AXIS_INDEX[axis];
+		const [a, b] = [
+			0,
+			1,
+			2
+		].filter((other) => other !== main);
+		const sizes = [
+			grid.nx,
+			grid.ny,
+			grid.nz
+		];
+		const count = Math.max(1, Math.min(Math.floor(slabs), sizes[main]));
+		const tiles = Math.max(2, Math.floor(resolution));
+		const merge = aggregate === VolumeAggregate.Max ? Math.max : aggregate === VolumeAggregate.Min ? Math.min : (x, y) => x + y;
+		const seed = aggregate === VolumeAggregate.Max ? -Infinity : aggregate === VolumeAggregate.Min ? Infinity : 0;
+		const fields = Array.from({ length: count }, () => new Float32Array(tiles * tiles).fill(seed));
+		const hits = Array.from({ length: count }, () => new Uint32Array(tiles * tiles));
+		const cell = [
+			0,
+			0,
+			0
+		];
+		for (cell[2] = 0; cell[2] < grid.nz; cell[2]++) for (cell[1] = 0; cell[1] < grid.ny; cell[1]++) for (cell[0] = 0; cell[0] < grid.nx; cell[0]++) {
+			const slab = Math.min(count - 1, Math.floor(cell[main] / sizes[main] * count));
+			const tile = Math.floor(cell[a] / sizes[a] * tiles) + Math.floor(cell[b] / sizes[b] * tiles) * tiles;
+			fields[slab][tile] = merge(fields[slab][tile], grid.at(cell[0], cell[1], cell[2]));
+			hits[slab][tile]++;
+		}
+		if (aggregate === VolumeAggregate.Mean) fields.forEach((field, s) => field.forEach((value, t) => {
+			field[t] = value / (hits[s][t] || 1);
+		}));
+		const all = fields.flatMap((field) => [...field].filter(Number.isFinite));
+		const [low = 0, high = 1] = extent(all);
+		const span = high - low || 1;
+		const tone = this.sequential(ctx);
+		const items = [];
+		fields.forEach((field, slab) => field.forEach((value, t) => {
+			const unit = (value - low) / span;
+			if (Number.isFinite(value) && unit > .035) items.push({
+				slab,
+				u: t % tiles,
+				v: Math.floor(t / tiles),
+				value,
+				unit
+			});
+		}));
+		const mesh = new InstancedMesh(new BoxGeometry(1, 1, 1), this.surface({ roughness: .65 }), items.length);
+		mesh.castShadow = true;
+		items.forEach((item, i) => mesh.setColorAt(i, tone(item.unit)));
+		const reach = grid.half[main];
+		const pace = reach * 2 / count * (exploded ? 1 : .8);
+		const pitch = 2 * Math.max(grid.half[a], grid.half[b]) / tiles;
+		const depth = reach * 2 / count * .72;
+		this.populate(ctx, mesh, (i, dummy) => {
+			const item = items[i];
+			const spot = [
+				0,
+				0,
+				0
+			], scale = [
+				pitch * .9,
+				pitch * .9,
+				pitch * .9
+			];
+			const tall = depth * (.1 + .9 * item.unit);
+			const middle = -reach + (item.slab + .5) * pace;
+			spot[a] = ((item.u + .5) / tiles * 2 - 1) * grid.half[a];
+			spot[b] = ((item.v + .5) / tiles * 2 - 1) * grid.half[b];
+			spot[main] = relief === SlabRelief.Rising ? middle - depth / 2 + tall / 2 : middle;
+			scale[main] = tall;
+			dummy.position.set(spot[0], spot[1], spot[2]);
+			dummy.scale.set(scale[0], scale[1], scale[2]);
+		}, (i) => items[i].slab / count);
+		ctx.root.add(mesh);
+		ctx.pick(mesh, (i) => ({
+			title: `Slab ${items[i].slab + 1} of ${count}`,
+			rows: [[aggregate, +items[i].value.toFixed(3)]]
+		}));
+	}
+};
+export { Slab3DChart };

package/dist/charts/threevolume/Streamline3DChart.js

@@ -0,0 +1,106 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { FieldDerivation, StrandStyle, StreamDirection, Streamline3DSeeding } from "./volumeEnums.js";
+import { VectorField3DChart } from "./VectorField3DChart.js";
+import { RIBBON_SECTION, ROUND_SECTION, THIN_SECTION, VolumeStrands } from "./VolumeStrands.js";
+import { Mesh } from "three";
+// src/charts/threevolume/Streamline3DChart.ts
+/** Curves tangent to a vector field: for seeing how flow connects regions, as in airflow or magnetic field lines. */
+var Streamline3DChart = class extends VectorField3DChart {
+	static meta = {
+		id: "streamline-3d",
+		name: "3D streamlines",
+		family: ChartFamily.Scientific,
+		dimension: Dimension.Three,
+		shape: DataShape.Volume,
+		description: "Integrates seed points through a vector field into tubes or ribbons tangent to the flow.",
+		tags: [
+			"streamtube",
+			"flow",
+			"field lines",
+			"cfd",
+			"stream ribbon"
+		],
+		sample: VectorField3DChart.sampleField,
+		variants: {
+			seeding: Object.values(Streamline3DSeeding),
+			direction: Object.values(StreamDirection),
+			style: Object.values(StrandStyle),
+			derivation: Object.values(FieldDerivation)
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			seeding: Streamline3DSeeding.Lattice,
+			direction: StreamDirection.Both,
+			style: StrandStyle.Tube,
+			lines: 48,
+			steps: 90
+		};
+	}
+	seeds([hx, hy, hz]) {
+		const { seeding, lines } = this.options;
+		const count = Math.max(1, Math.floor(lines));
+		const next = this.random();
+		const side = Math.ceil(Math.cbrt(count));
+		if (seeding === Streamline3DSeeding.Scatter) return Array.from({ length: count }, () => [
+			(next() * 2 - 1) * hx * .9,
+			(next() * 2 - 1) * hy * .9,
+			(next() * 2 - 1) * hz * .9
+		]);
+		if (seeding === Streamline3DSeeding.Sphere) return Array.from({ length: count }, (_, i) => {
+			const y = 1 - 2 * (i + .5) / count, ring = Math.sqrt(1 - y * y), angle = i * 2.39996;
+			return [
+				hx * .55 * ring * Math.cos(angle),
+				hy * .55 * y,
+				hz * .55 * ring * Math.sin(angle)
+			];
+		});
+		if (seeding === Streamline3DSeeding.Plane) {
+			const row = Math.ceil(Math.sqrt(count));
+			return Array.from({ length: row * row }, (_, i) => [
+				((i % row + .5) / row * 2 - 1) * hx * .9,
+				-hy * .7,
+				((Math.floor(i / row) + .5) / row * 2 - 1) * hz * .9
+			]);
+		}
+		return Array.from({ length: side ** 3 }, (_, i) => [
+			((i % side + .5) / side * 2 - 1) * hx * .8,
+			((Math.floor(i / side) % side + .5) / side * 2 - 1) * hy * .8,
+			((Math.floor(i / side / side) + .5) / side * 2 - 1) * hz * .8
+		]);
+	}
+	build(ctx) {
+		const { direction, style, steps } = this.options;
+		const field = this.field;
+		this.stage(ctx);
+		if (field.empty) return;
+		const tone = this.speedTone(ctx, field);
+		const strands = new VolumeStrands(style === StrandStyle.Ribbon ? RIBBON_SECTION : style === StrandStyle.Thread ? THIN_SECTION : ROUND_SECTION);
+		const width = style === StrandStyle.Ribbon ? .026 : style === StrandStyle.Thread ? .005 : .0105;
+		let drawn = 0;
+		for (const seed of this.seeds(field.half)) {
+			const path = field.trace(seed, steps, .022, direction);
+			if (path.length < 6) continue;
+			drawn++;
+			const speed = path.map((p) => field.speed(...p));
+			strands.add(path, {
+				radius: (i, f) => width * Math.min(1, Math.min(f, 1 - f) * 8 + .15) * (style === StrandStyle.Thread ? 1 : .65 + Math.sqrt(speed[i] / field.peak)),
+				color: (i) => tone(speed[i])
+			});
+		}
+		const geometry = strands.build();
+		const mesh = new Mesh(geometry, this.surface({
+			vertexColors: true,
+			roughness: .45
+		}));
+		mesh.castShadow = true;
+		ctx.root.add(mesh);
+		ctx.pick(mesh, () => ({
+			title: "Streamlines",
+			rows: [["Lines", drawn], ["Peak speed", +field.peak.toFixed(3)]]
+		}));
+		this.drawOn(ctx, geometry);
+	}
+};
+export { Streamline3DChart };