@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/proportion/DotMatrixChart.js

@@ -0,0 +1,168 @@
+import { ChartFamily, DataShape, Dimension, LegendPosition } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { SampleData } from "../../data/SampleData.js";
+import { ShareChart } from "./ShareChart.js";
+import { ShareData } from "./ShareData.js";
+import { MarkShape, ShareSort } from "./ShareEnums.js";
+// src/charts/proportion/DotMatrixChart.ts
+var DotMatrixLayout = /* @__PURE__ */ function(DotMatrixLayout) {
+	DotMatrixLayout["Rows"] = "rows";
+	DotMatrixLayout["Columns"] = "columns";
+	DotMatrixLayout["Flow"] = "flow";
+	return DotMatrixLayout;
+}({});
+/** `Round` draws whole dots; `Partial` shrinks the last dot to the remainder so no value is rounded away. */
+var DotRemainder = /* @__PURE__ */ function(DotRemainder) {
+	DotRemainder["Round"] = "whole-dots";
+	DotRemainder["Partial"] = "partial-dot";
+	return DotRemainder;
+}({});
+var GUTTER = 72;
+var NOTE = 16;
+/** Absolute amounts as countable tokens, for audiences who distrust areas and angles. */
+var DotMatrixChart = class extends ShareChart {
+	static meta = {
+		id: "dot-matrix",
+		name: "Dot matrix",
+		family: ChartFamily.Composition,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Represents amounts with rows of identical dots, each worth a fixed value, so counts can be compared directly.",
+		tags: [
+			"unit chart",
+			"isotype",
+			"dot plot",
+			"count"
+		],
+		sample: (seed) => SampleData.categories(seed, 6, 1),
+		variants: {
+			layout: [
+				"rows",
+				"columns",
+				"flow"
+			],
+			symbol: [
+				MarkShape.Circle,
+				MarkShape.Square,
+				MarkShape.Diamond
+			],
+			dots: [
+				20,
+				40,
+				12
+			],
+			remainder: ["whole-dots", "partial-dot"],
+			sort: [ShareSort.Descending, ShareSort.Data]
+		},
+		valid: (values) => !(values.layout === "flow" && values.remainder === "whole-dots" && values.sort === ShareSort.Data)
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			sort: ShareSort.Descending,
+			layout: "rows",
+			symbol: MarkShape.Circle,
+			dots: 20,
+			remainder: "whole-dots"
+		};
+	}
+	get legendPosition() {
+		return this.options.legend ?? (this.options.layout === "flow" ? LegendPosition.Top : LegendPosition.None);
+	}
+	/** Dot sizes of a part: full dots, then a scaled last dot when partial remainders are on. */
+	tokens(share, unit) {
+		const exact = share.value / unit;
+		if (this.options.remainder === "whole-dots") return Array.from({ length: Math.round(exact) || 1 }, () => 1);
+		const whole = Math.floor(exact), left = exact - whole;
+		return [...Array.from({ length: whole }, () => 1), ...left > .02 ? [Math.sqrt(left)] : []];
+	}
+	rows(ctx, shares, unit) {
+		const horizontal = this.options.layout === "rows";
+		const { width } = ctx.plot, height = ctx.plot.height - (horizontal ? NOTE : 0);
+		const counts = shares.map((share) => this.tokens(share, unit));
+		const across = Math.max(...counts.map((tokens) => tokens.length));
+		const lanes = horizontal ? height / shares.length : width / shares.length;
+		const runway = horizontal ? width - GUTTER : height - 34;
+		const wrapAt = (pitch) => Math.max(1, Math.floor(lanes * .92 / pitch));
+		let pitch = 26;
+		while (pitch > 3 && Math.ceil(across / wrapAt(pitch)) * pitch > runway) pitch -= .25;
+		const wrap = wrapAt(pitch);
+		return shares.flatMap((share, lane) => counts[lane].map((scale, i) => {
+			const along = (Math.floor(i / wrap) + .5) * pitch, cross = (lane + .5) * lanes + (i % wrap - (wrap - 1) / 2) * pitch;
+			return {
+				key: `${share.name}.${i}`,
+				share,
+				size: pitch * .82 * scale,
+				x: horizontal ? GUTTER + along : cross,
+				y: horizontal ? cross : height - 18 - along
+			};
+		}));
+	}
+	flow(ctx, shares, unit) {
+		const { width } = ctx.plot, height = ctx.plot.height - NOTE;
+		const counts = shares.map((share) => this.tokens(share, unit));
+		const total = counts.reduce((sum, tokens) => sum + tokens.length, 0);
+		const pitch = Math.min(26, Math.sqrt(width * height / Math.max(1, total)) * .94);
+		const columns = Math.max(1, Math.floor(width / pitch));
+		const left = (width - columns * pitch) / 2, top = (height - Math.ceil(total / columns) * pitch) / 2;
+		let at = 0;
+		return shares.flatMap((share, s) => counts[s].map((scale, i) => {
+			const index = at++;
+			return {
+				key: `${share.name}.${i}`,
+				share,
+				size: pitch * .8 * scale,
+				x: left + (index % columns + .5) * pitch,
+				y: top + (Math.floor(index / columns) + .5) * pitch
+			};
+		}));
+	}
+	drawShares(ctx, shares) {
+		const { layout, symbol, dots, value } = this.options;
+		const unit = Math.max(...shares.map((share) => share.value)) / Math.max(1, dots);
+		const placed = layout === "flow" ? this.flow(ctx, shares, unit) : this.rows(ctx, shares, unit);
+		const marks = ctx.marks("dots", "rect", placed, (d) => d.key).attr("fill", (d) => ShareData.fill(ctx, d.share));
+		const side = (d) => d.size * (symbol === MarkShape.Diamond ? .74 : 1);
+		ctx.set(marks, {
+			x: (d) => (d.x - side(d) / 2).toFixed(2),
+			y: (d) => (d.y - side(d) / 2).toFixed(2),
+			width: (d) => side(d).toFixed(2),
+			height: (d) => side(d).toFixed(2),
+			rx: (d) => (symbol === MarkShape.Circle ? side(d) / 2 : Math.min(2, side(d) * .2)).toFixed(2),
+			transform: (d) => symbol === MarkShape.Diamond ? `rotate(45,${d.x.toFixed(2)},${d.y.toFixed(2)})` : null
+		}, {
+			width: 0,
+			height: 0
+		}, 3);
+		ctx.hover(marks, (d) => ({
+			title: d.share.name,
+			color: ShareData.fill(ctx, d.share),
+			rows: [[value, d.share.value], ["One dot", Scales.format(unit, unit)]]
+		}));
+		const { width, height } = ctx.plot;
+		const lanes = shares.map((share, i) => layout === "rows" ? {
+			share,
+			x: 64,
+			y: (i + .5) * (height - NOTE) / shares.length + 4,
+			anchor: "end",
+			room: 62
+		} : {
+			share,
+			x: (i + .5) * width / shares.length,
+			y: height - 2,
+			anchor: "middle",
+			room: width / shares.length - 4
+		});
+		const names = ctx.text(ctx.marks("names", "text", layout === "flow" ? [] : lanes, (d) => d.share.name)).attr("text-anchor", (d) => d.anchor).text((d) => ShareData.fit(d.share.name, d.room));
+		ctx.set(names, {
+			x: (d) => d.x,
+			y: (d) => d.y
+		});
+		const note = ctx.text(ctx.marks("unit", "text", [`One dot = ${Scales.format(unit, unit)}`]).text((d) => d), 10.5, "muted").attr("text-anchor", "end");
+		ctx.set(note, {
+			x: width,
+			y: layout === "columns" ? 9 : height - 2
+		});
+	}
+};
+export { DotMatrixChart, DotMatrixLayout, DotRemainder };

package/dist/charts/proportion/EulerDiagram.js

@@ -0,0 +1,75 @@
+import { ChartFamily, DataShape, Dimension, LegendPosition, Orientation } from "../../core/enums.js";
+import { EulerLayout } from "./EulerLayout.js";
+import { SetData } from "./SetData.js";
+import { SetDiagram, SetLabel } from "./SetDiagram.js";
+// src/charts/proportion/EulerDiagram.ts
+/** Set sizes and overlaps drawn to scale, for when how much matters as much as whether. */
+var EulerDiagram = class extends SetDiagram {
+	static meta = {
+		id: "euler",
+		name: "Euler diagram",
+		family: ChartFamily.Composition,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Sizes circles and their overlaps by the data, leaving out combinations that do not occur.",
+		tags: [
+			"area-proportional venn",
+			"sets",
+			"overlap"
+		],
+		sample: (seed) => {
+			const rows = SetData.sample(seed, 5);
+			const order = rows.filter((row) => !String(row.sets).includes("&")).map((row) => String(row.sets));
+			return rows.filter((row) => {
+				const members = String(row.sets).split("&").map((name) => order.indexOf(name));
+				const chained = members.every((at, i) => !i || at === members[i - 1] + 1);
+				return members.length === 1 || chained && members.length === 2 || chained && members.length === 3 && members[0] === 0;
+			});
+		},
+		variants: {
+			limit: [
+				3,
+				2,
+				4,
+				5
+			],
+			orientation: [Orientation.Horizontal, Orientation.Vertical],
+			labels: [
+				SetLabel.Values,
+				SetLabel.Names,
+				SetLabel.None
+			]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			orientation: Orientation.Horizontal
+		};
+	}
+	get legendPosition() {
+		return this.options.legend ?? (this.options.labels === SetLabel.Names && this.options.limit <= 3 ? LegendPosition.None : LegendPosition.Top);
+	}
+	shapes(ctx, table) {
+		const { width, height } = ctx.plot;
+		const solved = EulerLayout.align(EulerLayout.solve(table), this.options.orientation === Orientation.Horizontal ? 0 : Math.PI / 2);
+		const x0 = Math.min(...solved.map((c) => c.x - c.r)), x1 = Math.max(...solved.map((c) => c.x + c.r));
+		const y0 = Math.min(...solved.map((c) => c.y - c.r)), y1 = Math.max(...solved.map((c) => c.y + c.r));
+		const scale = Math.min((width - 4) / (x1 - x0), (height - 18) / (y1 - y0));
+		return solved.map((c) => ({
+			cx: width / 2 + (c.x - (x0 + x1) / 2) * scale,
+			cy: (height - 14) / 2 + (c.y - (y0 + y1) / 2) * scale,
+			rx: c.r * scale,
+			ry: c.r * scale,
+			angle: 0
+		}));
+	}
+	missing(ctx, count) {
+		const note = ctx.text(ctx.marks("missing", "text", count ? [count] : []), 10.5, "muted").text((d) => `${d} ${d === 1 ? "combination" : "combinations"} cannot be drawn to scale`);
+		ctx.set(note, {
+			x: 0,
+			y: ctx.plot.height - 2
+		});
+	}
+};
+export { EulerDiagram };

package/dist/charts/proportion/EulerLayout.js

@@ -0,0 +1,91 @@
+// src/charts/proportion/EulerLayout.ts
+var lens = (a, b, d) => {
+	if (d >= a + b) return 0;
+	if (d <= Math.abs(a - b)) return Math.PI * Math.min(a, b) ** 2;
+	const x = (d * d + a * a - b * b) / (2 * d), y = d - x;
+	const segment = (r, h) => r * r * Math.acos(Math.max(-1, Math.min(1, h / r))) - h * Math.sqrt(Math.max(0, r * r - h * h));
+	return segment(a, x) + segment(b, y);
+};
+/**
+* Area-proportional circles: each pair's distance is solved exactly from its overlap, then stress
+* minimisation places all circles. Two sets are exact; three or more are the best circular fit.
+*/
+var EulerLayout = class {
+	static distance(a, b, overlap) {
+		let low = Math.abs(a - b), high = a + b;
+		if (overlap <= 0) return high * 1.04;
+		if (overlap >= Math.PI * Math.min(a, b) ** 2 * .999) return low * .9;
+		for (let i = 0; i < 48; i++) {
+			const middle = (low + high) / 2;
+			if (lens(a, b, middle) > overlap) low = middle;
+			else high = middle;
+		}
+		return (low + high) / 2;
+	}
+	static solve(table) {
+		const n = table.names.length;
+		const radii = table.sizes.map((size) => Math.sqrt(size / Math.PI));
+		const overlap = (i, j) => table.regions.reduce((sum, region) => sum + (region.mask & 1 << i && region.mask & 1 << j ? region.value : 0), 0);
+		const pairs = Array.from({ length: n }, (_, i) => Array.from({ length: n }, (_, j) => {
+			if (i >= j) return null;
+			const shared = overlap(i, j);
+			return {
+				i,
+				j,
+				target: this.distance(radii[i], radii[j], shared),
+				disjoint: shared <= 0,
+				nested: shared >= Math.PI * Math.min(radii[i], radii[j]) ** 2 * .999
+			};
+		})).flat().filter((pair) => pair !== null);
+		const spread = radii.reduce((a, b) => a + b, 0) / Math.max(1, n);
+		let best = [], bestStress = Infinity;
+		for (let start = 0; start < 4; start++) {
+			const points = radii.map((_, i) => {
+				const angle = (i * (start % 2 ? 2 : 1) + start * .37) / n * Math.PI * 2;
+				return [Math.cos(angle) * spread, Math.sin(angle) * spread];
+			});
+			let stress = 0;
+			for (let step = 0; step < 500; step++) {
+				stress = 0;
+				for (const { i, j, target, disjoint, nested } of pairs) {
+					const dx = points[j][0] - points[i][0], dy = points[j][1] - points[i][1], d = Math.hypot(dx, dy) || 1e-6;
+					const wrong = d - target;
+					if (disjoint && wrong > 0 || nested && wrong < 0) continue;
+					stress += wrong * wrong;
+					const push = wrong / d * .12;
+					points[i][0] += dx * push;
+					points[i][1] += dy * push;
+					points[j][0] -= dx * push;
+					points[j][1] -= dy * push;
+				}
+			}
+			if (stress < bestStress) {
+				bestStress = stress;
+				best = points;
+			}
+		}
+		return best.map(([x, y], i) => ({
+			x,
+			y,
+			r: radii[i]
+		}));
+	}
+	/** Rotates so the longest spread lies along `angle`. */
+	static align(circles, angle) {
+		const cx = circles.reduce((a, c) => a + c.x, 0) / circles.length, cy = circles.reduce((a, c) => a + c.y, 0) / circles.length;
+		let xx = 0, yy = 0, xy = 0;
+		for (const { x, y } of circles) {
+			xx += (x - cx) ** 2;
+			yy += (y - cy) ** 2;
+			xy += (x - cx) * (y - cy);
+		}
+		const turn = angle - .5 * Math.atan2(2 * xy, xx - yy);
+		const cos = Math.cos(turn), sin = Math.sin(turn);
+		return circles.map((c) => ({
+			...c,
+			x: (c.x - cx) * cos - (c.y - cy) * sin,
+			y: (c.x - cx) * sin + (c.y - cy) * cos
+		}));
+	}
+};
+export { EulerLayout };

package/dist/charts/proportion/ExplodedPie.js

@@ -0,0 +1,70 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { PieBase } from "./PieBase.js";
+import { PieLabel, ShareSort } from "./ShareEnums.js";
+// src/charts/proportion/ExplodedPie.ts
+var PieExplode = /* @__PURE__ */ function(PieExplode) {
+	PieExplode["Largest"] = "pull-largest";
+	PieExplode["Smallest"] = "pull-smallest";
+	PieExplode["TopTwo"] = "pull-top-two";
+	PieExplode["All"] = "pull-all";
+	return PieExplode;
+}({});
+/** A pie that pulls out the slice the story is about. */
+var ExplodedPie = class extends PieBase {
+	static meta = {
+		id: "exploded-pie",
+		name: "Exploded pie",
+		family: ChartFamily.Composition,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Pulls chosen slices away from a pie to draw the eye to them while keeping the whole visible.",
+		tags: ["pulled slice", "emphasis"],
+		sample: (seed) => SampleData.categories(seed, 6, 1),
+		variants: {
+			explode: [
+				"pull-largest",
+				"pull-smallest",
+				"pull-top-two",
+				"pull-all"
+			],
+			distance: [.1, .2],
+			sort: [
+				ShareSort.Descending,
+				ShareSort.Data,
+				ShareSort.Ascending
+			],
+			labels: [
+				PieLabel.Callout,
+				PieLabel.Inside,
+				PieLabel.None
+			]
+		}
+	};
+	pulled = /* @__PURE__ */ new Set();
+	defaults() {
+		return {
+			...super.defaults(),
+			sort: ShareSort.Descending,
+			explode: "pull-largest",
+			distance: .1
+		};
+	}
+	reach() {
+		return 1 + this.options.distance;
+	}
+	prepare(shares) {
+		const ranked = [...shares].sort((a, b) => b.value - a.value);
+		const chosen = {
+			["pull-largest"]: ranked.slice(0, 1),
+			["pull-smallest"]: ranked.slice(-1),
+			["pull-top-two"]: ranked.slice(0, 2),
+			["pull-all"]: ranked
+		};
+		this.pulled = new Set(chosen[this.options.explode].map((share) => share.name));
+	}
+	offset(slice, radius) {
+		return this.pulled.has(slice.data.name) ? radius * this.options.distance : 0;
+	}
+};
+export { ExplodedPie, PieExplode };

package/dist/charts/proportion/ExtrudedPieChart.js

@@ -0,0 +1,123 @@
+import { Chart3D } from "../../core/Chart3D.js";
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { ShareData } from "./ShareData.js";
+import { ShareSort } from "./ShareEnums.js";
+import { pie } from "d3";
+import { ExtrudeGeometry, Mesh, MeshStandardMaterial, PlaneGeometry, ShadowMaterial, Shape } from "three";
+// src/charts/proportion/ExtrudedPieChart.ts
+/** `Flat` is one disc; `ByValue` adds height so the largest slice stands tallest. */
+var PieHeight = /* @__PURE__ */ function(PieHeight) {
+	PieHeight["Flat"] = "flat";
+	PieHeight["ByValue"] = "height-by-value";
+	return PieHeight;
+}({});
+var PiePull = /* @__PURE__ */ function(PiePull) {
+	PiePull["None"] = "no-pull";
+	PiePull["Largest"] = "pull-largest";
+	PiePull["All"] = "pull-all";
+	return PiePull;
+}({});
+var RADIUS = .95;
+var FLOOR = -.32;
+var PAD = .012;
+/** A presentation pie with depth. Height can carry the value too, so tilt never hides the ranking. */
+var ExtrudedPieChart = class extends Chart3D {
+	static meta = {
+		id: "extruded-pie",
+		name: "Extruded pie",
+		family: ChartFamily.Composition,
+		dimension: Dimension.Three,
+		shape: DataShape.Table,
+		description: "Extrudes pie or donut slices into solid wedges, optionally raising each slice by its value.",
+		tags: ["3d donut", "extruded pie"],
+		sample: (seed) => SampleData.categories(seed, 6, 1),
+		variants: {
+			hole: [0, .5],
+			rise: ["height-by-value", "flat"],
+			pull: [
+				"no-pull",
+				"pull-largest",
+				"pull-all"
+			],
+			sort: [ShareSort.Descending, ShareSort.Data],
+			labels: [true, false]
+		}
+	};
+	defaults() {
+		return {
+			category: "category",
+			value: "value",
+			limit: 8,
+			sort: ShareSort.Descending,
+			hole: 0,
+			rise: "height-by-value",
+			pull: "no-pull",
+			labels: true,
+			elevation: 34,
+			distance: 4.4
+		};
+	}
+	wedge(from, to, depth) {
+		const inner = this.options.hole * RADIUS;
+		const pad = to - from > PAD * 4 ? PAD : 0;
+		const shape = new Shape();
+		shape.absarc(0, 0, RADIUS, from + pad, to - pad, false);
+		if (inner > 0) shape.absarc(0, 0, inner, to - pad * 2, from + pad * 2, true);
+		else shape.lineTo(0, 0);
+		shape.closePath();
+		const geometry = new ExtrudeGeometry(shape, {
+			depth,
+			bevelEnabled: true,
+			bevelSize: .012,
+			bevelThickness: .012,
+			bevelSegments: 2,
+			curveSegments: Math.max(8, Math.ceil((to - from) * 24))
+		});
+		geometry.rotateX(-Math.PI / 2);
+		return geometry;
+	}
+	build(ctx) {
+		const { data, category, value, limit, sort, rise, pull, labels } = this.options;
+		const shares = ShareData.collect(data, category, value, sort, limit);
+		ShareData.register(ctx, shares);
+		if (!shares.length) return;
+		const top = Math.max(...shares.map((share) => share.value));
+		const slices = pie().value((share) => share.value).sort(null)(shares);
+		const shadow = new Mesh(new PlaneGeometry(3.4, 3.4), new ShadowMaterial({ opacity: .18 }));
+		shadow.rotation.x = -Math.PI / 2;
+		shadow.position.y = FLOOR;
+		shadow.receiveShadow = true;
+		ctx.root.add(shadow);
+		slices.forEach((slice, i) => {
+			const share = slice.data, mid = (slice.startAngle + slice.endAngle) / 2;
+			const depth = rise === "flat" ? .24 : .1 + .42 * (share.value / top);
+			const pulled = pull === "pull-all" || pull === "pull-largest" && share.value === top ? .12 : 0;
+			const mesh = new Mesh(this.wedge(slice.startAngle, slice.endAngle, depth), new MeshStandardMaterial({
+				color: ShareData.fill(ctx, share),
+				roughness: .46,
+				metalness: .05
+			}));
+			mesh.castShadow = mesh.receiveShadow = true;
+			mesh.position.set(Math.cos(mid) * pulled, -.308, -Math.sin(mid) * pulled);
+			ctx.root.add(mesh);
+			ctx.reveal((t) => {
+				mesh.scale.y = Math.max(.001, t);
+			}, .8, i * .06);
+			ctx.pick(mesh, () => ({
+				title: share.name,
+				color: ShareData.fill(ctx, share),
+				rows: [[value, share.value], ["Share", ShareData.percent(share.fraction)]]
+			}));
+			if (labels && slice.endAngle - slice.startAngle > .2) {
+				const reach = RADIUS + pulled + .14;
+				ctx.label(ShareData.percent(share.fraction), [
+					Math.cos(mid) * reach,
+					FLOOR + depth + .02,
+					-Math.sin(mid) * reach
+				], "ink", 11);
+			}
+		});
+	}
+};
+export { ExtrudedPieChart, PieHeight, PiePull };