@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/threesurfaces/SliceSurface.js

@@ -0,0 +1,101 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { GridSurfaceBase } from "./GridSurfaceBase.js";
+import { SurfaceGeometry } from "./SurfaceGeometry.js";
+import { FLOOR, SurfaceSpace } from "./SurfaceSpace.js";
+import { TubeBatch } from "./TubeBatch.js";
+// src/charts/threesurfaces/SliceSurface.ts
+var SliceAxis = /* @__PURE__ */ function(SliceAxis) {
+	SliceAxis["Depth"] = "along-depth";
+	SliceAxis["Width"] = "along-width";
+	SliceAxis["Radial"] = "radial";
+	return SliceAxis;
+}({});
+var SliceMark = /* @__PURE__ */ function(SliceMark) {
+	SliceMark["Plate"] = "plate";
+	SliceMark["Fin"] = "fin";
+	SliceMark["Outline"] = "outline";
+	return SliceMark;
+}({});
+/** The surface cut into parallel sections: for reading cross-sections, like the frames of a ship's hull. */
+var SliceSurface = class extends GridSurfaceBase {
+	static meta = {
+		id: "slice-surface",
+		name: "Slice surface",
+		family: ChartFamily.Scientific,
+		dimension: Dimension.Three,
+		shape: DataShape.Grid,
+		description: "Sections a height field into separated parallel or radial slices, so individual cross-sections can be read.",
+		tags: [
+			"cross section",
+			"fence diagram",
+			"sections",
+			"joy division",
+			"laser cut"
+		],
+		sample: (seed) => SampleData.surface(seed, 64),
+		variants: {
+			axis: [
+				"along-depth",
+				"along-width",
+				"radial"
+			],
+			mark: [
+				"plate",
+				"fin",
+				"outline"
+			],
+			slices: [
+				18,
+				11,
+				28
+			]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			axis: "along-depth",
+			mark: "plate",
+			slices: 18
+		};
+	}
+	build(ctx) {
+		const { axis, mark, slices } = this.options;
+		const field = this.field();
+		const space = new SurfaceSpace(field);
+		const paint = this.painter(ctx, field.zDomain);
+		this.box(ctx, this.axes(space));
+		const lift = this.rise(ctx);
+		if (!field.hasData) return;
+		const count = slices, samples = 72;
+		const low = paint(field.zDomain[0]);
+		const outline = new TubeBatch(mark === "outline" ? .0085 : .0042);
+		const profiles = Array.from({ length: count }, (_, s) => {
+			const t = (s + .5) / count;
+			const read = (k) => {
+				const u = k / 71;
+				if (axis === "along-depth") return [u, t];
+				if (axis === "along-width") return [t, u];
+				const angle = t * Math.PI, r = 2 * u - 1;
+				return [.5 + .5 * r * Math.cos(angle) * .999, .5 + .5 * r * Math.sin(angle) * .999];
+			};
+			return Array.from({ length: samples }, (_, k) => {
+				const [u, v] = read(k);
+				return [u * (field.nx - 1), v * (field.ny - 1)];
+			});
+		});
+		const thickness = axis === "radial" ? .03 : 2 / count * .52;
+		profiles.forEach((profile, s) => {
+			const top = profile.map(([i, j]) => space.at(i, j));
+			const heat = (k) => paint(field.sample(...profile[k]));
+			const angle = (s + .5) / count * Math.PI;
+			const across = axis === "along-depth" ? [0, thickness] : axis === "along-width" ? [thickness, 0] : [Math.sin(angle) * thickness, Math.cos(angle) * thickness];
+			if (mark === "plate") this.solid(ctx, SurfaceGeometry.slab(top, across, FLOOR, heat, () => low), lift);
+			if (mark === "fin") this.solid(ctx, SurfaceGeometry.curtain(top, FLOOR, heat, () => low), lift);
+			if (mark !== "plate") outline.add(top, heat);
+		});
+		this.tubes(outline, lift);
+	}
+};
+export { SliceAxis, SliceMark, SliceSurface };

package/dist/charts/threesurfaces/Spectrogram3DChart.js

@@ -0,0 +1,92 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { GridSurfaceBase } from "./GridSurfaceBase.js";
+import { ShortTimeTransform, SpectrogramWindow } from "./ShortTimeTransform.js";
+import { SurfaceField } from "./SurfaceField.js";
+import { SurfaceGeometry } from "./SurfaceGeometry.js";
+import { SurfaceSpace } from "./SurfaceSpace.js";
+import { TubeBatch } from "./TubeBatch.js";
+import { SpectrumAmplitude } from "./Waterfall3DSpectrum.js";
+// src/charts/threesurfaces/Spectrogram3DChart.ts
+var SpectrogramMark = /* @__PURE__ */ function(SpectrogramMark) {
+	SpectrogramMark["Surface"] = "surface";
+	SpectrogramMark["Ridges"] = "ridges";
+	SpectrogramMark["Columns"] = "columns";
+	return SpectrogramMark;
+}({});
+/** Runs a short-time Fourier transform on your signal: for when frequency content, not the waveform, is the story. */
+var Spectrogram3DChart = class extends GridSurfaceBase {
+	static meta = {
+		id: "spectrogram-3d",
+		name: "3D spectrogram",
+		family: ChartFamily.Scientific,
+		dimension: Dimension.Three,
+		shape: DataShape.Table,
+		description: "Computes a short-time Fourier transform of a signal and raises its magnitude over the time and frequency plane.",
+		tags: [
+			"stft",
+			"fft",
+			"time frequency",
+			"audio",
+			"chirp"
+		],
+		sample: (seed) => ShortTimeTransform.sampleSignal(seed),
+		variants: {
+			window: Object.values(SpectrogramWindow),
+			size: [64, 32],
+			overlap: [.75, .5],
+			scale: [SpectrumAmplitude.Linear, SpectrumAmplitude.Decibel],
+			mark: [
+				"surface",
+				"ridges",
+				"columns"
+			]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			value: "value",
+			window: SpectrogramWindow.Hann,
+			size: 64,
+			overlap: .75,
+			scale: SpectrumAmplitude.Linear,
+			mark: "surface",
+			xLabel: "cycles / sample",
+			yLabel: "sample"
+		};
+	}
+	field() {
+		const { data, value, size, overlap, window, scale } = this.options;
+		const signal = Array.isArray(data) ? data.map((row) => +(row[value] ?? 0)) : [];
+		if (!signal.length) return SurfaceField.empty();
+		const grid = ShortTimeTransform.spectrogram(signal, size, Math.max(1, Math.round(size * (1 - overlap))), window);
+		const field = SurfaceField.from(grid).capped(96);
+		if (scale !== SpectrumAmplitude.Decibel) return field;
+		const peak = Math.max(field.zMax, 1e-12);
+		return field.map((z) => Math.max(-48, 20 * Math.log10(Math.max(z / peak, 1e-6))));
+	}
+	build(ctx) {
+		const { mark } = this.options;
+		const field = this.field();
+		const space = new SurfaceSpace(field);
+		const [lo, hi] = field.zDomain;
+		const base = this.painter(ctx, [0, 1]);
+		const paint = (value) => base((value - lo) / (hi - lo));
+		this.box(ctx, this.axes(space));
+		const lift = this.rise(ctx);
+		if (mark === "surface") {
+			this.solid(ctx, SurfaceGeometry.grid(field.nx, field.ny, (i, j) => space.at(i, j), (i, j) => paint(field.at(i, j))), lift, this.gridTip(space));
+			return;
+		}
+		if (mark === "ridges") {
+			const batch = new TubeBatch(.0055);
+			for (let j = 0; j < field.ny; j += 2) batch.add(Array.from({ length: field.nx }, (_, i) => space.at(i, j)), (k) => paint(field.at(k, j)));
+			this.tubes(batch, lift);
+			return;
+		}
+		const stems = new TubeBatch(.0085, 4), stepX = Math.ceil(field.nx / 26), stepY = Math.ceil(field.ny / 26);
+		for (let j = 0; j < field.ny; j += stepY) for (let i = 0; i < field.nx; i += stepX) if (field.at(i, j) > lo + (hi - lo) * .02) stems.add([space.floor(i, j), space.at(i, j)], (k) => paint(k ? field.at(i, j) : lo));
+		this.tubes(stems, lift);
+	}
+};
+export { Spectrogram3DChart, SpectrogramMark, SpectrogramWindow };

package/dist/charts/threesurfaces/SurfaceBase.js

@@ -0,0 +1,333 @@
+import { Chart3D } from "../../core/Chart3D.js";
+import { ColorScale } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { ColorRamp } from "./ColorRamp.js";
+import { SurfaceGeometry } from "./SurfaceGeometry.js";
+import { SurfaceMesh } from "./SurfaceMesh.js";
+import { CEIL, FLOOR } from "./SurfaceSpace.js";
+import { TubeBatch } from "./TubeBatch.js";
+import { scaleLinear } from "d3";
+import { BufferGeometry, DoubleSide, Float32BufferAttribute, Group, InstancedMesh, LineBasicMaterial, LineSegments, Mesh, MeshStandardMaterial, Object3D, PlaneGeometry, ShadowMaterial, SphereGeometry } from "three";
+// src/charts/threesurfaces/SurfaceBase.ts
+/** Marks drawn on top of a surface. */
+var SurfaceOverlay = /* @__PURE__ */ function(SurfaceOverlay) {
+	SurfaceOverlay["None"] = "bare";
+	SurfaceOverlay["Mesh"] = "mesh-lines";
+	SurfaceOverlay["Contours"] = "contour-lines";
+	return SurfaceOverlay;
+}({});
+/** Shadows of the surface cast onto the box around it. */
+var SurfaceProjection = /* @__PURE__ */ function(SurfaceProjection) {
+	SurfaceProjection["None"] = "unprojected";
+	SurfaceProjection["FloorContours"] = "floor-contours";
+	SurfaceProjection["FloorHeatmap"] = "floor-heatmap";
+	SurfaceProjection["Walls"] = "wall-profiles";
+	return SurfaceProjection;
+}({});
+var LINE = .0065;
+/** Stage and shared marks of every surface chart: a matplotlib-style box whose walls stay behind the data, tubes, dots and overlays. */
+var SurfaceBase = class extends Chart3D {
+	defaults() {
+		return {
+			azimuth: 38,
+			elevation: 26,
+			distance: 5.2
+		};
+	}
+	ticks(domain, map, count = 4) {
+		const reach = Math.abs(domain[1] - domain[0]);
+		return scaleLinear(domain, [0, 1]).ticks(count).map((value) => [map(value), Scales.format(value, reach)]);
+	}
+	/** Back walls and floor with gridlines at the ticks. The walls swap sides as the camera orbits, so they never block the data. */
+	box(ctx, { x, y, z }, { walls = true, bottom = FLOOR, outline = true } = {}) {
+		const stage = new Group();
+		const grid = new LineBasicMaterial({ color: ctx.theme.grid }), edge = new LineBasicMaterial({ color: ctx.theme.axis });
+		const lines = (points, material) => {
+			const geometry = new BufferGeometry();
+			geometry.setAttribute("position", new Float32BufferAttribute(points, 3));
+			return new LineSegments(geometry, material);
+		};
+		const top = walls ? Math.max(CEIL, bottom) : bottom;
+		stage.add(lines([...x.flatMap(([at]) => [
+			at,
+			bottom,
+			-1,
+			at,
+			bottom,
+			1
+		]), ...y.flatMap(([at]) => [
+			-1,
+			bottom,
+			at,
+			1,
+			bottom,
+			at
+		])], grid));
+		if (outline) stage.add(lines([
+			-1,
+			bottom,
+			-1,
+			1,
+			bottom,
+			-1,
+			1,
+			bottom,
+			-1,
+			1,
+			bottom,
+			1,
+			1,
+			bottom,
+			1,
+			-1,
+			bottom,
+			1,
+			-1,
+			bottom,
+			1,
+			-1,
+			bottom,
+			-1
+		], edge));
+		const catcher = new Mesh(new PlaneGeometry(2, 2), new ShadowMaterial({ opacity: .16 }));
+		catcher.rotation.x = -Math.PI / 2;
+		catcher.position.y = bottom - .002;
+		catcher.receiveShadow = true;
+		stage.add(catcher);
+		if (walls) {
+			const across = lines([...x.flatMap(([at]) => [
+				at,
+				bottom,
+				-1,
+				at,
+				top,
+				-1
+			]), ...z.flatMap(([at]) => [
+				-1,
+				at,
+				-1,
+				1,
+				at,
+				-1
+			])], grid);
+			const along = lines([...y.flatMap(([at]) => [
+				-1,
+				bottom,
+				at,
+				-1,
+				top,
+				at
+			]), ...z.flatMap(([at]) => [
+				-1,
+				at,
+				-1,
+				-1,
+				at,
+				1
+			])], grid);
+			stage.add(across, along);
+			catcher.onBeforeRender = (_renderer, _scene, camera) => {
+				across.position.z = camera.position.z >= 0 ? 0 : 2;
+				along.position.x = camera.position.x >= 0 ? 0 : 2;
+				across.updateMatrixWorld();
+				along.updateMatrixWorld();
+			};
+		}
+		ctx.root.add(stage);
+		const { xLabel, yLabel, zLabel } = this.options;
+		for (const [at, text] of x) ctx.label(text, [
+			at,
+			bottom - .03,
+			1.12
+		], "muted", 10);
+		for (const [at, text] of y) ctx.label(text, [
+			1.13,
+			bottom - .03,
+			at
+		], "muted", 10);
+		if (walls) for (const [at, text] of z) ctx.label(text, [
+			-1.1,
+			at,
+			1.02
+		], "muted", 10);
+		const longest = Math.max(0, ...y.map(([, text]) => text.length));
+		if (xLabel && x.some(([, text]) => text)) ctx.label(xLabel, [
+			0,
+			bottom - .03,
+			1.5
+		], "secondary", 11);
+		if (yLabel && y.some(([, text]) => text)) ctx.label(yLabel, [
+			1.4 + longest * .04,
+			bottom - .03,
+			0
+		], "secondary", 11);
+		if (zLabel && walls) ctx.label(zLabel, [
+			-1.1,
+			CEIL + .12,
+			1.02
+		], "secondary", 11);
+	}
+	/** Group that grows out of the floor on entry. */
+	rise(ctx, floor = FLOOR) {
+		const group = new Group();
+		ctx.reveal((progress) => {
+			group.scale.y = Math.max(.001, progress);
+			group.position.y = floor * (1 - group.scale.y);
+		}, 1.1);
+		ctx.root.add(group);
+		return group;
+	}
+	/** Group that scales and turns into place, for free-standing shapes. */
+	bloom(ctx) {
+		const group = new Group();
+		ctx.reveal((progress) => {
+			group.scale.setScalar(Math.max(.001, progress));
+			group.rotation.y = (progress - 1) * 1.2;
+		}, 1.3);
+		ctx.root.add(group);
+		return group;
+	}
+	/** Height colour: polarity when the data crosses zero, magnitude otherwise. */
+	painter(ctx, [lo, hi]) {
+		if ((this.options.color ?? (lo < 0 && hi > 0 ? ColorScale.Diverging : ColorScale.Sequential)) === ColorScale.Diverging) {
+			const ramp = new ColorRamp(ctx.palette.diverging, -1, 1), reach = Math.max(Math.abs(lo), Math.abs(hi)) || 1;
+			return (value) => ramp.at(value / reach);
+		}
+		const ramp = new ColorRamp(ctx.palette.sequential);
+		return (value) => ramp.at(.05 + .95 * (value - lo) / (hi - lo || 1));
+	}
+	material(overrides = {}) {
+		return new MeshStandardMaterial({
+			vertexColors: true,
+			side: DoubleSide,
+			roughness: .62,
+			metalness: 0,
+			...overrides
+		});
+	}
+	/** Painted, shadow-casting surface. `pick` receives the nearest vertex. */
+	solid(ctx, geometry, parent, pick, overrides) {
+		const mesh = new SurfaceMesh(geometry, this.material(overrides));
+		mesh.castShadow = true;
+		parent.add(mesh);
+		if (pick) ctx.pick(mesh, pick);
+		return mesh;
+	}
+	/** Draw a tube batch. Pass `color` for a single tone; otherwise the batch's own colours are used. */
+	tubes(batch, parent, color, opacity = 1) {
+		if (batch.empty) return null;
+		const mesh = new Mesh(batch.geometry(), this.material({
+			vertexColors: !color,
+			side: 0,
+			roughness: .5,
+			...color ? { color } : {},
+			transparent: opacity < 1,
+			opacity
+		}));
+		parent.add(mesh);
+		return mesh;
+	}
+	/** Round markers on one instanced mesh; sizes in world units. */
+	dots(ctx, points, radius, paint, parent, pick) {
+		if (!points.length) return null;
+		const mesh = new InstancedMesh(new SphereGeometry(1, 12, 10), new MeshStandardMaterial({ roughness: .45 }), points.length);
+		const dummy = new Object3D();
+		points.forEach((point, k) => {
+			dummy.position.set(...point);
+			dummy.scale.setScalar(typeof radius === "number" ? radius : radius(k));
+			dummy.updateMatrix();
+			mesh.setMatrixAt(k, dummy.matrix);
+			mesh.setColorAt(k, paint(k));
+		});
+		mesh.castShadow = true;
+		parent.add(mesh);
+		if (pick) ctx.pick(mesh, pick);
+		return mesh;
+	}
+	/** Thin surface-coloured lattice that reveals the shape of the mesh without adding a new hue. */
+	meshLines(ctx, space, parent, cells = 12) {
+		const { nx, ny } = space.field;
+		const batch = new TubeBatch(LINE * .7), stepX = Math.max(1, Math.round((nx - 1) / cells)), stepY = Math.max(1, Math.round((ny - 1) / cells));
+		const columns = Array.from({ length: Math.ceil(nx / stepX) }, (_, k) => k * stepX), rows = Array.from({ length: Math.ceil(ny / stepY) }, (_, k) => k * stepY);
+		for (const i of columns) batch.add(Array.from({ length: ny }, (_, j) => space.at(i, j, .003)));
+		for (const j of rows) batch.add(Array.from({ length: nx }, (_, i) => space.at(i, j, .003)));
+		this.tubes(batch, parent, ctx.theme.surface, .8);
+	}
+	thresholds({ zMin, zMax, zDomain }, levels) {
+		if (zMax === zMin) return [zDomain[0]];
+		return Array.from({ length: levels }, (_, k) => zMin + (k + 1) * (zMax - zMin) / (levels + 1));
+	}
+	contourLines(ctx, space, parent, levels = 8) {
+		const batch = new TubeBatch(LINE * .6);
+		for (const { paths } of space.field.lines(this.thresholds(space.field, levels))) for (const path of paths) batch.add(path.map(([i, j]) => space.at(i, j, .004)));
+		this.tubes(batch, parent, ctx.theme.ink, .55);
+	}
+	floorContours(ctx, space, paint, levels = 8) {
+		const batch = new TubeBatch(LINE * .7);
+		for (const { value, paths } of space.field.lines(this.thresholds(space.field, levels))) {
+			const color = paint(value);
+			for (const path of paths) batch.add(path.map(([i, j]) => space.floor(i, j, .006)), color);
+		}
+		this.tubes(batch, ctx.root);
+	}
+	floorHeatmap(ctx, space, paint) {
+		const { field } = space;
+		this.solid(ctx, SurfaceGeometry.grid(field.nx, field.ny, (i, j) => Number.isNaN(field.at(i, j)) ? [
+			NaN,
+			NaN,
+			NaN
+		] : space.floor(i, j, .004), (i, j) => paint(field.at(i, j))), ctx.root).castShadow = false;
+	}
+	/** The surface's upper envelope along each axis, drawn as a silhouette on the back walls. */
+	wallProfiles(ctx, space, paint) {
+		const { field } = space;
+		const envelope = (count, across, read) => Array.from({ length: count }, (_, k) => {
+			let top = -Infinity;
+			for (let c = 0; c < across; c++) {
+				const value = read(k, c);
+				if (value > top) top = value;
+			}
+			return top;
+		});
+		const low = paint(field.zDomain[0]);
+		const wall = (peaks, place) => {
+			const top = peaks.map((peak, k) => place(k, Number.isFinite(peak) ? space.level(peak) : NaN));
+			const batch = new TubeBatch(LINE).add(top, (k) => paint(peaks[k]));
+			this.solid(ctx, SurfaceGeometry.curtain(top, FLOOR, (k) => paint(peaks[k]), () => low), ctx.root, void 0, {
+				transparent: true,
+				opacity: .4,
+				depthWrite: false
+			}).castShadow = false;
+			this.tubes(batch, ctx.root);
+		};
+		wall(envelope(field.nx, field.ny, (i, j) => field.at(i, j)), (i, h) => [
+			space.ground(i, 0)[0],
+			h,
+			-.995
+		]);
+		wall(envelope(field.ny, field.nx, (j, i) => field.at(i, j)), (j, h) => [
+			-.995,
+			h,
+			space.ground(0, j)[1]
+		]);
+	}
+	/** Vertical wall from the surface's boundary to the floor, turning the sheet into a solid. */
+	skirt(ctx, space, paint, parent, sides = [
+		0,
+		1,
+		2,
+		3
+	], closed = false) {
+		const { nx, ny } = space.field;
+		const edges = [
+			Array.from({ length: nx }, (_, i) => [i, 0]),
+			Array.from({ length: ny }, (_, j) => [nx - 1, j]),
+			Array.from({ length: nx }, (_, i) => [i, ny - 1]),
+			Array.from({ length: ny }, (_, j) => [0, j])
+		];
+		const low = paint(space.field.zDomain[0]);
+		const parts = sides.map((side) => closed ? [...edges[side], edges[side][0]] : edges[side]).map((edge) => SurfaceGeometry.curtain(edge.map(([i, j]) => space.at(i, j)), FLOOR, (k) => paint(space.field.at(...edge[k])), () => low));
+		this.solid(ctx, SurfaceGeometry.merge(parts), parent);
+	}
+};
+export { SurfaceBase, SurfaceOverlay, SurfaceProjection };

package/dist/charts/threesurfaces/SurfaceChart.js

@@ -0,0 +1,75 @@
+import { ChartFamily, DataShape, Dimension, ScaleKind } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { GridSurfaceBase } from "./GridSurfaceBase.js";
+import { SurfaceOverlay, SurfaceProjection } from "./SurfaceBase.js";
+import { SurfaceGeometry } from "./SurfaceGeometry.js";
+import { SurfaceSpace } from "./SurfaceSpace.js";
+// src/charts/threesurfaces/SurfaceChart.ts
+var SurfaceShading = /* @__PURE__ */ function(SurfaceShading) {
+	SurfaceShading["Smooth"] = "smooth";
+	SurfaceShading["Faceted"] = "faceted";
+	return SurfaceShading;
+}({});
+/** Continuous height field: for reading the overall shape of `z = f(x, y)`, peaks and valleys first. */
+var SurfaceChart = class extends GridSurfaceBase {
+	static meta = {
+		id: "surface-3d",
+		name: "3D surface",
+		family: ChartFamily.Scientific,
+		dimension: Dimension.Three,
+		shape: DataShape.Grid,
+		description: "Draws a shaded height field over an x and y grid, with optional contour, mesh and floor projections.",
+		tags: [
+			"surface",
+			"height field",
+			"plot3d"
+		],
+		sample: (seed) => SampleData.surface(seed, 48),
+		variants: {
+			overlay: [
+				SurfaceOverlay.Mesh,
+				SurfaceOverlay.Contours,
+				SurfaceOverlay.None
+			],
+			projection: [
+				SurfaceProjection.FloorContours,
+				SurfaceProjection.None,
+				SurfaceProjection.FloorHeatmap,
+				SurfaceProjection.Walls
+			],
+			scale: [
+				ScaleKind.Linear,
+				ScaleKind.Sqrt,
+				ScaleKind.Symlog
+			],
+			shading: ["smooth", "faceted"],
+			solidBase: [false, true]
+		},
+		valid: ({ projection, solidBase }) => !(solidBase && projection === SurfaceProjection.FloorHeatmap)
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			overlay: SurfaceOverlay.Mesh,
+			projection: SurfaceProjection.FloorContours,
+			scale: ScaleKind.Linear,
+			shading: "smooth",
+			solidBase: false
+		};
+	}
+	build(ctx) {
+		const { overlay, projection, scale, shading, solidBase } = this.options;
+		const field = this.field();
+		const space = new SurfaceSpace(field, scale);
+		const paint = this.painter(ctx, field.zDomain);
+		this.box(ctx, this.axes(space));
+		const lift = this.rise(ctx);
+		const sheet = SurfaceGeometry.grid(field.nx, field.ny, (i, j) => space.at(i, j), (i, j) => paint(field.at(i, j)));
+		this.solid(ctx, shading === "faceted" ? SurfaceGeometry.faceted(sheet) : sheet, lift, this.gridTip(space));
+		if (solidBase) this.skirt(ctx, space, paint, lift);
+		if (overlay === SurfaceOverlay.Mesh) this.meshLines(ctx, space, lift);
+		if (overlay === SurfaceOverlay.Contours) this.contourLines(ctx, space, lift);
+		this.project(ctx, space, projection, paint);
+	}
+};
+export { SurfaceChart, SurfaceShading };