@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/proportion/WaffleChart.js

@@ -0,0 +1,184 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { ShareChart } from "./ShareChart.js";
+import { ShareData } from "./ShareData.js";
+import { MarkShape, ShareSort } from "./ShareEnums.js";
+import { range } from "d3";
+// src/charts/proportion/WaffleChart.ts
+/** Path the units follow through the grid. */
+var WaffleRoute = /* @__PURE__ */ function(WaffleRoute) {
+	WaffleRoute["Rows"] = "fill-rows";
+	WaffleRoute["Columns"] = "fill-columns";
+	WaffleRoute["Snake"] = "fill-snake";
+	WaffleRoute["Spiral"] = "fill-spiral";
+	return WaffleRoute;
+}({});
+/** `Single` shares one grid; `Panels` gives each part its own grid over an empty track. */
+var WaffleArrange = /* @__PURE__ */ function(WaffleArrange) {
+	WaffleArrange["Single"] = "single-grid";
+	WaffleArrange["Panels"] = "panels";
+	return WaffleArrange;
+}({});
+/** Cell visiting order, from the bottom-left corner unless the path says otherwise. */
+function route(fill, columns, rows) {
+	if (fill === "fill-columns") return range(columns).flatMap((c) => range(rows).map((r) => [c, rows - 1 - r]));
+	if (fill === "fill-snake") return range(rows).flatMap((r) => range(columns).map((c) => [r % 2 ? columns - 1 - c : c, rows - 1 - r]));
+	if (fill !== "fill-spiral") return range(rows).flatMap((r) => range(columns).map((c) => [c, rows - 1 - r]));
+	const cells = [];
+	let [left, top, right, bottom] = [
+		0,
+		0,
+		columns - 1,
+		rows - 1
+	];
+	while (left <= right && top <= bottom) {
+		for (let c = left; c <= right; c++) cells.push([c, bottom]);
+		for (let r = bottom - 1; r >= top; r--) cells.push([right, r]);
+		if (top < bottom) for (let c = right - 1; c >= left; c--) cells.push([c, top]);
+		if (left < right) for (let r = top + 1; r < bottom; r++) cells.push([left, r]);
+		left++;
+		right--;
+		top++;
+		bottom--;
+	}
+	return cells;
+}
+/** Reads percentages as countable units: more exact than a pie and friendlier than a table. */
+var WaffleChart = class extends ShareChart {
+	static meta = {
+		id: "waffle",
+		name: "Waffle chart",
+		family: ChartFamily.Composition,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Fills a grid of unit cells so each part of a whole can be read as a countable number of cells.",
+		tags: [
+			"square pie",
+			"unit chart",
+			"grid"
+		],
+		sample: (seed) => SampleData.categories(seed, 5, 1),
+		variants: {
+			columns: [
+				10,
+				20,
+				5
+			],
+			fill: [
+				"fill-rows",
+				"fill-columns",
+				"fill-snake",
+				"fill-spiral"
+			],
+			symbol: [
+				MarkShape.Square,
+				MarkShape.Circle,
+				MarkShape.Diamond
+			],
+			layout: ["single-grid", "panels"]
+		},
+		valid: (values) => !(values.layout === "panels" && values.symbol === MarkShape.Diamond)
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			sort: ShareSort.Descending,
+			fill: "fill-rows",
+			symbol: MarkShape.Square,
+			layout: "single-grid",
+			columns: 10
+		};
+	}
+	get grid() {
+		const columns = Math.max(1, Math.round(this.options.columns));
+		return [columns, this.options.rows ?? Math.max(1, Math.round(100 / columns))];
+	}
+	single(ctx, shares) {
+		const [columns, rows] = this.grid;
+		const step = Math.min(ctx.plot.width / columns, ctx.plot.height / rows);
+		const originX = (ctx.plot.width - step * columns) / 2, originY = (ctx.plot.height - step * rows) / 2;
+		const owners = shares.flatMap((share, i) => Array.from({ length: ShareData.allocate(shares, columns * rows)[i] }, () => share));
+		return route(this.options.fill, columns, rows).map(([c, r], i) => ({
+			key: `${c}.${r}`,
+			x: originX + c * step,
+			y: originY + r * step,
+			size: step,
+			share: owners[i] ?? null,
+			panel: 0
+		}));
+	}
+	panels(ctx, shares) {
+		const [columns, rows] = this.grid;
+		const { width, height } = ctx.plot;
+		const across = Math.max(1, Math.round(Math.sqrt(shares.length * width * rows / Math.max(1, height * columns))));
+		const down = Math.ceil(shares.length / across), slotW = width / across, slotH = height / down;
+		const step = Math.max(2, Math.min((slotW - 12) / columns, (slotH - 18) / rows));
+		const order = route(this.options.fill, columns, rows);
+		const titles = [];
+		return {
+			cells: shares.flatMap((share, panel) => {
+				const originX = panel % across * slotW + (slotW - step * columns) / 2;
+				const originY = Math.floor(panel / across) * slotH + 16;
+				titles.push({
+					share,
+					x: originX,
+					y: originY - 5,
+					room: step * columns
+				});
+				const filled = Math.round(share.fraction * columns * rows);
+				return order.map(([c, r], i) => ({
+					key: `${panel}.${c}.${r}`,
+					x: originX + c * step,
+					y: originY + r * step,
+					size: step,
+					share: i < filled ? share : null,
+					panel
+				}));
+			}),
+			titles
+		};
+	}
+	shape(selection, ctx) {
+		const { symbol } = this.options;
+		const gap = (d) => Math.min(2, Math.max(1, d.size * .14));
+		const side = (d) => Math.max(1, d.size - gap(d)) * (symbol === MarkShape.Diamond ? .74 : 1);
+		const lead = (d) => (d.size - side(d)) / 2;
+		ctx.set(selection, {
+			x: (d) => (d.x + lead(d)).toFixed(2),
+			y: (d) => (d.y + lead(d)).toFixed(2),
+			width: (d) => side(d).toFixed(2),
+			height: (d) => side(d).toFixed(2),
+			rx: (d) => (symbol === MarkShape.Circle ? side(d) / 2 : Math.min(3, side(d) * .2)).toFixed(2),
+			transform: (d) => symbol === MarkShape.Diamond ? `rotate(45,${(d.x + d.size / 2).toFixed(2)},${(d.y + d.size / 2).toFixed(2)})` : null
+		}, {
+			width: 0,
+			height: 0
+		}, 2);
+	}
+	drawShares(ctx, shares) {
+		const { cells, titles } = this.options.layout === "panels" ? this.panels(ctx, shares) : {
+			cells: this.single(ctx, shares),
+			titles: []
+		};
+		const marks = ctx.marks("cells", "rect", cells, (d) => d.key).attr("fill", (d) => d.share ? ShareData.fill(ctx, d.share) : ctx.theme.grid);
+		this.shape(marks, ctx);
+		const { value } = this.options;
+		ctx.hover(marks, (d) => d.share ? {
+			title: d.share.name,
+			color: ShareData.fill(ctx, d.share),
+			rows: [[value, d.share.value], ["Share", ShareData.percent(d.share.fraction)]]
+		} : {
+			title: "Remainder",
+			rows: [["Share", ShareData.percent(1 - (shares[d.panel]?.fraction ?? 0))]]
+		});
+		const captions = ctx.text(ctx.marks("titles", "text", titles, (d) => d.share.name)).text((d) => {
+			const share = ShareData.percent(d.share.fraction), name = ShareData.fit(d.share.name, d.room - ShareData.width(share) - 6);
+			return name ? `${name}  ${share}` : share;
+		});
+		ctx.set(captions, {
+			x: (d) => d.x,
+			y: (d) => d.y
+		});
+	}
+};
+export { WaffleArrange, WaffleChart, WaffleRoute };

package/dist/charts/proportion/index.js

@@ -0,0 +1,57 @@
+import { MarkShape, PieAnchor, PieLabel, PieSweep, ShareSort } from "./ShareEnums.js";
+import { ShareData } from "./ShareData.js";
+import { ShareChart } from "./ShareChart.js";
+import { ConeApex, ConeDepth, ConeFunnel, ConeProfile } from "./ConeFunnel.js";
+import { ExtrudedPieChart, PieHeight, PiePull } from "./ExtrudedPieChart.js";
+import { UpSetOrder, UpSetPlot } from "./UpSetPlot.js";
+import { SetData } from "./SetData.js";
+import { UnitPath, UnitShape, Waffle3DChart, WaffleSolid } from "./Waffle3DChart.js";
+import { EulerDiagram } from "./EulerDiagram.js";
+import { EulerLayout } from "./EulerLayout.js";
+import { SetRegions } from "./SetRegions.js";
+import { SetDiagram, SetFill, SetLabel } from "./SetDiagram.js";
+import { AreaArrange, AreaLabel, ProportionalAreaChart } from "./ProportionalAreaChart.js";
+import { VennDiagram, VennPose } from "./VennDiagram.js";
+import { VoronoiBoundary, VoronoiLabel, VoronoiShareChart } from "./VoronoiShareChart.js";
+import { PowerDiagram, SeedPattern } from "./PowerDiagram.js";
+import { FunnelAlign, FunnelChart, FunnelDepth, FunnelForm, FunnelNote } from "./FunnelChart.js";
+import { MosaicChart, MosaicLabel, MosaicMode } from "./MosaicChart.js";
+import { ParliamentChart, ParliamentLayout, SeatOrder } from "./ParliamentChart.js";
+import { PyramidApex, PyramidChart, PyramidForm, PyramidLabel, PyramidSizing } from "./PyramidChart.js";
+import { BarLabel, BarThickness, BarTile, TreemapBar } from "./TreemapBar.js";
+import { BarOfPie, BreakoutForm, BreakoutSide } from "./BarOfPie.js";
+import { DotMatrixChart, DotMatrixLayout, DotRemainder } from "./DotMatrixChart.js";
+import { NestedDonut, NestedMode, RingSizing, RingSweep } from "./NestedDonut.js";
+import { FacetArrange, FacetForm, FacetSizing, PiePerCategory } from "./PiePerCategory.js";
+import { WaffleArrange, WaffleChart, WaffleRoute } from "./WaffleChart.js";
+import { PieBase } from "./PieBase.js";
+import { DonutCentre, DonutChart } from "./DonutChart.js";
+import { ExplodedPie, PieExplode } from "./ExplodedPie.js";
+import { PieChart } from "./PieChart.js";
+import { SemiDonutChart, SemiOpening } from "./SemiDonutChart.js";
+// src/charts/proportion/index.ts
+var proportionCatalog = [
+	PieChart,
+	DonutChart,
+	SemiDonutChart,
+	ExplodedPie,
+	BarOfPie,
+	NestedDonut,
+	PiePerCategory,
+	WaffleChart,
+	DotMatrixChart,
+	MosaicChart,
+	FunnelChart,
+	PyramidChart,
+	TreemapBar,
+	ParliamentChart,
+	ProportionalAreaChart,
+	VoronoiShareChart,
+	VennDiagram,
+	EulerDiagram,
+	UpSetPlot,
+	ConeFunnel,
+	ExtrudedPieChart,
+	Waffle3DChart
+];
+export { AreaArrange, AreaLabel, BarLabel, BarOfPie, BarThickness, BarTile, BreakoutForm, BreakoutSide, ConeApex, ConeDepth, ConeFunnel, ConeProfile, DonutCentre, DonutChart, DotMatrixChart, DotMatrixLayout, DotRemainder, EulerDiagram, EulerLayout, ExplodedPie, ExtrudedPieChart, FacetArrange, FacetForm, FacetSizing, FunnelAlign, FunnelChart, FunnelDepth, FunnelForm, FunnelNote, MarkShape, MosaicChart, MosaicLabel, MosaicMode, NestedDonut, NestedMode, ParliamentChart, ParliamentLayout, PieAnchor, PieBase, PieChart, PieExplode, PieHeight, PieLabel, PiePerCategory, PiePull, PieSweep, PowerDiagram, ProportionalAreaChart, PyramidApex, PyramidChart, PyramidForm, PyramidLabel, PyramidSizing, RingSizing, RingSweep, SeatOrder, SeedPattern, SemiDonutChart, SemiOpening, SetData, SetDiagram, SetFill, SetLabel, SetRegions, ShareChart, ShareData, ShareSort, TreemapBar, UnitPath, UnitShape, UpSetOrder, UpSetPlot, VennDiagram, VennPose, VoronoiBoundary, VoronoiLabel, VoronoiShareChart, Waffle3DChart, WaffleArrange, WaffleChart, WaffleRoute, WaffleSolid, proportionCatalog };

package/dist/charts/radial/CircularBarplot.js

@@ -0,0 +1,122 @@
+import { DataShape, ScaleKind } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { Polar, TAU } from "./Polar.js";
+import { PolarBase, polarMeta } from "./PolarBase.js";
+import { CircularBarplotArrange, PolarDirection, PolarSort } from "./radialEnums.js";
+// src/charts/radial/CircularBarplot.ts
+var LABEL_ROOM = .36;
+/** Fit many categories in a square: bars rise from a hole, labels read along each spoke. */
+var CircularBarplot = class extends PolarBase {
+	static meta = {
+		...polarMeta,
+		id: "circular-barplot",
+		name: "Circular barplot",
+		shape: DataShape.Table,
+		description: "Wraps a long bar chart round a circle so that dozens of categories fit a square, with gaps between groups.",
+		tags: ["circular bar", "grouped"],
+		sample: (seed) => SampleData.categories(seed, 12, 3),
+		variants: {
+			arrange: [CircularBarplotArrange.Grouped, CircularBarplotArrange.Stacked],
+			direction: [PolarDirection.Outward, PolarDirection.Inward],
+			hole: [
+				.35,
+				.5,
+				.2
+			],
+			sort: [PolarSort.Data, PolarSort.Descending],
+			labels: [true, false]
+		}
+	};
+	defaults() {
+		return {
+			category: "category",
+			series: "series",
+			value: "value",
+			arrange: CircularBarplotArrange.Grouped,
+			direction: PolarDirection.Outward,
+			hole: .35,
+			sort: PolarSort.Data,
+			labels: true
+		};
+	}
+	bars(categories, names, at) {
+		const grouped = this.options.arrange === CircularBarplotArrange.Grouped;
+		const slots = grouped ? categories.length * (names.length + 1) : categories.length;
+		const step = TAU / Math.max(1, slots);
+		return categories.flatMap((category, i) => {
+			let up = 0, down = 0;
+			return names.map((series, s) => {
+				const value = at(category, series) ?? 0;
+				if (grouped) {
+					const slot = i * (names.length + 1) + s;
+					return {
+						category,
+						series,
+						value,
+						low: 0,
+						high: value,
+						a0: slot * step,
+						a1: (slot + 1) * step
+					};
+				}
+				const low = value < 0 ? down : up;
+				if (value < 0) down += value;
+				else up += value;
+				return {
+					category,
+					series,
+					value,
+					low,
+					high: low + value,
+					a0: i * step,
+					a1: (i + 1) * step
+				};
+			});
+		});
+	}
+	drawRadial(ctx, frame) {
+		const { category, series, value, direction, hole, sort, labels } = this.options;
+		const pivot = Polar.pivot(this.data, category, series, value);
+		const longest = Math.max(0, ...pivot.categories.map((c) => c.length)) * 6.2;
+		const room = labels ? Math.min(longest, frame.radius * LABEL_ROOM) : 0;
+		const disc = this.disc(ctx, frame, labels ? room + 8 : 6);
+		const categories = Polar.sorted(pivot.categories, pivot.total, sort);
+		const bars = this.bars(categories, pivot.series, pivot.at);
+		const inner = disc.radius * hole;
+		const outward = direction === PolarDirection.Outward;
+		const reach = Polar.scale(ScaleKind.Linear, bars.flatMap((bar) => [bar.low, bar.high]), outward ? [inner, disc.radius] : [disc.radius, inner]);
+		this.rings(disc, Polar.ticks(reach).map((tick) => ({
+			r: reach(tick),
+			text: Polar.label(tick)
+		})));
+		this.wedges(disc, bars.map((bar) => {
+			const a = reach(bar.low), b = reach(bar.high), color = ctx.palette.color(bar.series);
+			return {
+				key: `${bar.category}/${bar.series}`,
+				a0: bar.a0,
+				a1: bar.a1,
+				r0: Math.min(a, b),
+				r1: Math.max(a, b),
+				fill: color,
+				tip: {
+					title: bar.category,
+					color,
+					rows: [[bar.series, bar.value]]
+				}
+			};
+		}), { corner: 2 });
+		this.names(disc, bars, categories, labels ? room : 0);
+	}
+	names(disc, bars, categories, room) {
+		const labels = room ? categories.map((c) => {
+			const own = bars.filter((bar) => bar.category === c);
+			return {
+				key: c,
+				text: c,
+				angle: (own[0].a0 + own[own.length - 1].a1) / 2
+			};
+		}) : [];
+		this.radialLabels(disc, labels, disc.radius + 6, room);
+	}
+};
+export { CircularBarplot };

package/dist/charts/radial/CircularHeatmap.js

@@ -0,0 +1,140 @@
+import { DataShape } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { Polar, TAU } from "./Polar.js";
+import { PolarBase, polarMeta } from "./PolarBase.js";
+import { CircularHeatCell, CircularHeatOrder, PolarSpan } from "./radialEnums.js";
+import { extent, mean } from "d3";
+// src/charts/radial/CircularHeatmap.ts
+var SWATCHES = [
+	0,
+	.25,
+	.5,
+	.75,
+	1
+];
+/** A matrix whose columns are cyclic (hours, months, bearings) and whose rows are rings. */
+var CircularHeatmap = class extends PolarBase {
+	static meta = {
+		...polarMeta,
+		id: "circular-heatmap",
+		name: "Circular heatmap",
+		shape: DataShape.Matrix,
+		description: "Wraps a heatmap round a circle so cyclic columns join up and each row becomes one ring of cells.",
+		tags: ["polar heatmap", "radial heatmap"],
+		sample: (seed) => SampleData.matrix(seed, 7, 24),
+		variants: {
+			cell: [CircularHeatCell.Arc, CircularHeatCell.Dot],
+			hole: [
+				.3,
+				.15,
+				.5
+			],
+			span: [PolarSpan.Full, PolarSpan.Gauge],
+			order: [CircularHeatOrder.Data, CircularHeatOrder.RowMean],
+			labels: [true, false]
+		}
+	};
+	swatches = [];
+	defaults() {
+		return {
+			cell: CircularHeatCell.Arc,
+			hole: .3,
+			span: PolarSpan.Full,
+			order: CircularHeatOrder.Data,
+			labels: true
+		};
+	}
+	legendItems() {
+		return this.swatches;
+	}
+	table() {
+		const { rows = [], columns = [], values = [] } = this.options.data ?? {};
+		return {
+			columns: ["row", ...columns],
+			rows: rows.map((row, r) => [row, ...values[r] ?? []])
+		};
+	}
+	drawRadial(ctx, frame) {
+		const disc = this.dial(ctx, frame, this.options.span);
+		const { cell, hole, span, order, labels } = this.options;
+		const { rows = [], columns = [], values = [] } = this.options.data ?? {};
+		const means = rows.map((_, r) => mean(values[r] ?? []) ?? 0);
+		const ranks = rows.map((_, r) => r);
+		if (order === CircularHeatOrder.RowMean) ranks.sort((a, b) => means[b] - means[a]);
+		const ringOf = (r) => ranks.indexOf(r);
+		const all = values.flat().filter((v) => Number.isFinite(v));
+		const [low = 0, high = 1] = extent(all);
+		const polar = low < 0 && high > 0, reach = Math.max(Math.abs(low), Math.abs(high)) || 1;
+		const shade = (v) => polar ? ctx.palette.diverging(v / reach) : ctx.palette.sequential(high > low ? (v - low) / (high - low) : .5);
+		this.swatches = SWATCHES.map((t) => {
+			const v = polar ? (t * 2 - 1) * reach : low + t * (high - low);
+			return {
+				key: Polar.label(+v.toFixed(2)),
+				color: shade(v)
+			};
+		});
+		const [start, end] = span === PolarSpan.Full ? [0, TAU] : Polar.span(span);
+		const step = (end - start) / Math.max(1, columns.length);
+		const inner = disc.radius * hole, thick = (disc.radius - inner) / Math.max(1, rows.length);
+		const cells = rows.flatMap((name, r) => columns.map((column, slot) => {
+			const value = values[r]?.[slot];
+			return {
+				row: name,
+				column,
+				value: Number.isFinite(value) ? value : null,
+				ring: ringOf(r),
+				slot
+			};
+		})).filter((d) => d.value !== null);
+		const tip = (d) => ({
+			title: `${d.row} · ${d.column}`,
+			color: shade(d.value),
+			rows: [["value", d.value]]
+		});
+		this.wedges(disc, cell === CircularHeatCell.Arc ? cells.map((d) => ({
+			key: `${d.row}/${d.column}`,
+			a0: start + d.slot * step,
+			a1: start + (d.slot + 1) * step,
+			r0: inner + d.ring * thick + 1,
+			r1: inner + (d.ring + 1) * thick - 1,
+			fill: shade(d.value),
+			tip: tip(d)
+		})) : [], {
+			stagger: 1,
+			corner: 2
+		});
+		const center = (d) => Polar.point(start + (d.slot + .5) * step, inner + (d.ring + .5) * thick);
+		const dotSize = (d) => {
+			const room = Math.min(thick, (inner + (d.ring + .5) * thick) * step) / 2 - 1;
+			return Math.max(1.5, room * Math.sqrt(Math.abs(d.value) / reach));
+		};
+		const dots = ctx.marks("dots", "circle", cell === CircularHeatCell.Dot ? cells : [], (d) => `${d.row}/${d.column}`).attr("fill", (d) => shade(d.value));
+		ctx.set(dots, {
+			cx: (d) => center(d)[0],
+			cy: (d) => center(d)[1],
+			r: dotSize
+		}, {
+			cx: (d) => center(d)[0],
+			cy: (d) => center(d)[1],
+			r: 0
+		}, 1);
+		ctx.hover(dots, tip);
+		this.rimLabels(disc, labels ? columns.map((column, slot) => ({
+			angle: start + (slot + .5) * step,
+			text: column
+		})) : []);
+		const showRows = labels && thick >= 12;
+		const names = ctx.marks("row-labels", "text", showRows ? rows.map((name, r) => ({
+			name,
+			ring: ringOf(r)
+		})) : [], (d) => d.name).attr("paint-order", "stroke").attr("stroke", ctx.theme.surface).attr("stroke-width", 3);
+		ctx.text(names, 10).attr("text-anchor", "middle").attr("dy", ".35em").text((d) => Polar.fit(d.name, 40));
+		const place = (d) => Polar.point(start, inner + (d.ring + .5) * thick);
+		const at = {
+			x: (d) => place(d)[0],
+			y: (d) => place(d)[1]
+		};
+		ctx.set(names, at, at);
+	}
+};
+export { CircularHeatmap };