@mstone6969/graph 0.1.0 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mstone6969/graph",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Class-based React chart library: 2D d3 and 3D three.js charts modelled as classes, enums and interfaces.",
   "type": "module",
   "license": "MIT",
@@ -30,7 +30,8 @@
   ],
   "scripts": {
     "dev": "vite gallery",
-    "generate": "node scripts/generate.mjs",
+    "generate": "node scripts/generate.mjs && node scripts/generate-docs.mjs",
+    "generate:docs": "node scripts/generate-docs.mjs",
     "build": "rm -rf dist && vite build --config vite.lib.config.ts && tsup",
     "build:gallery": "vite build gallery",
     "typecheck": "tsc --noEmit",
@@ -43,7 +44,9 @@
     "e2e:keyboard": "node e2e/keyboard.mjs",
     "e2e:zoom": "node e2e/zoom.mjs",
     "e2e:export": "node e2e/export.mjs",
-    "e2e:massive": "node e2e/massive.mjs"
+    "e2e:massive": "node e2e/massive.mjs",
+    "e2e:site": "node e2e/site.mjs",
+    "e2e:style": "node e2e/style.mjs"
   },
   "peerDependencies": {
     "react": ">=18",
@@ -58,11 +61,15 @@
     "d3-hexbin": "^0.2.2",
     "d3-sankey": "^0.12.3",
     "d3-transition": "^3.0.2",
+    "fflate": "^0.8.3",
     "motion": "^14.9.1",
+    "pdf-lib": "^1.17.1",
     "three": "^0.187.0",
     "topojson-client": "^3.1.0"
   },
   "devDependencies": {
+    "@codemirror/lang-javascript": "^6.2.5",
+    "@codemirror/theme-one-dark": "^6.1.3",
     "@tailwindcss/vite": "^4.3.4",
     "@tanstack/react-virtual": "^3.14.26",
     "@types/d3-cloud": "^1.2.9",
@@ -78,6 +85,7 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "cn": "^0.5.2",
+    "codemirror": "^6.0.2",
     "d3-cloud": "^2.0.0",
     "esbuild": "^0.28.2",
     "jsdom": "^30.1.3",
@@ -86,6 +94,8 @@
     "radix-ui": "^1.8.1",
     "react": "^19.3.1",
     "react-dom": "^19.3.1",
+    "shiki": "^4.6.0",
+    "sucrase": "^3.35.1",
     "tailwind-merge": "^3.7.0",
     "tailwindcss": "^4.3.4",
     "tsup": "^9.0.0",

package/dist/catalog-4UP2YFNR.cjs

@@ -1,7 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
-
-var _chunkW5GAAAZYcjs = require('./chunk-W5GAAAZY.cjs');
-require('./chunk-KGSYGPLS.cjs');
-
-
-exports.catalog = _chunkW5GAAAZYcjs.catalog;

package/dist/charts/bars/BulletBar.js

@@ -1,184 +0,0 @@
-import { ChartFamily, DataShape, Dimension, LegendPosition, Orientation } from "../../core/enums.js";
-import { SampleData } from "../../data/SampleData.js";
-import { BandChart } from "./BandChart.js";
-import { BarRows, BarSort } from "./BarRows.js";
-import { descending, max, symbol, symbolTriangle } from "d3";
-// src/charts/bars/BulletBar.ts
-var BulletBarScale = /* @__PURE__ */ function(BulletBarScale) {
-	BulletBarScale["Shared"] = "shared";
-	BulletBarScale["Target"] = "target";
-	return BulletBarScale;
-}({});
-var BulletBarTarget = /* @__PURE__ */ function(BulletBarTarget) {
-	BulletBarTarget["Line"] = "line";
-	BulletBarTarget["Triangle"] = "triangle";
-	BulletBarTarget["Dot"] = "target-dot";
-	return BulletBarTarget;
-}({});
-var BulletBarMeasure = /* @__PURE__ */ function(BulletBarMeasure) {
-	BulletBarMeasure["Bar"] = "bar";
-	BulletBarMeasure["Dot"] = "measure-dot";
-	return BulletBarMeasure;
-}({});
-var sample = (seed) => {
-	const rows = SampleData.categories(seed, 5, 3);
-	return rows.filter((_, i) => i % 3 === 0).map((row, i) => {
-		const goal = +rows[i * 3 + 1].value + 15;
-		return {
-			category: row.category,
-			value: row.value,
-			target: goal,
-			poor: Math.round(goal * .5),
-			fair: Math.round(goal * .85),
-			good: Math.round(goal * 1.25)
-		};
-	});
-};
-/** Stephen Few's bullet graph: a measure against a target and qualitative ranges, in a compact row. */
-var BulletBar = class extends BandChart {
-	static meta = {
-		id: "bar-bullet",
-		name: "Bullet bar",
-		family: ChartFamily.Indicator,
-		dimension: Dimension.Two,
-		shape: DataShape.Table,
-		description: "Shows a measure against its target and poor-to-good ranges, replacing gauges in tight dashboards.",
-		tags: [
-			"target",
-			"kpi",
-			"gauge alternative",
-			"few"
-		],
-		sample,
-		variants: {
-			orientation: [Orientation.Horizontal, Orientation.Vertical],
-			scale: ["shared", "target"],
-			targetMark: [
-				"line",
-				"triangle",
-				"target-dot"
-			],
-			rangeCount: [
-				3,
-				2,
-				0
-			],
-			measure: ["bar", "measure-dot"],
-			sort: [BarSort.Data, BarSort.Descending]
-		},
-		valid: (values) => !(values.rangeCount === 0 && values.measure === "measure-dot")
-	};
-	defaults() {
-		return {
-			x: "category",
-			y: "value",
-			target: "target",
-			ranges: [
-				"poor",
-				"fair",
-				"good"
-			],
-			rangeCount: 3,
-			orientation: Orientation.Horizontal,
-			scale: "shared",
-			targetMark: "line",
-			measure: "bar",
-			sort: BarSort.Data
-		};
-	}
-	get bullets() {
-		const { data, x, y, target, ranges, rangeCount, scale, sort } = this.options;
-		const fields = rangeCount ? ranges.slice(-rangeCount) : [];
-		const normal = scale === "target";
-		const rows = (data ?? []).flatMap((row) => {
-			const raw = BarRows.number(row[y]);
-			if (raw === null) return [];
-			const rawGoal = BarRows.number(row[target]) ?? raw;
-			const factor = normal ? 100 / (rawGoal || 1) : 1;
-			return [{
-				band: BarRows.label(row[x]),
-				raw,
-				rawGoal,
-				value: raw * factor,
-				goal: rawGoal * factor,
-				ranges: fields.map((field) => (BarRows.number(row[field]) ?? 0) * factor)
-			}];
-		});
-		const unique = [...new Map(rows.map((row) => [row.band, row])).values()];
-		return sort === BarSort.Descending ? unique.sort((a, b) => descending(a.raw / (a.rawGoal || 1), b.raw / (b.rawGoal || 1))) : unique;
-	}
-	bandNames() {
-		return this.bullets.map((bullet) => bullet.band);
-	}
-	bandPadding() {
-		return .22;
-	}
-	unit() {
-		return this.options.scale === "target" ? "%" : "";
-	}
-	valueExtent() {
-		const edges = this.bullets.flatMap((bullet) => [
-			bullet.value,
-			bullet.goal,
-			...bullet.ranges
-		]);
-		return [Math.min(0, ...edges), Math.max(0, max(edges) ?? 1)];
-	}
-	get legendPosition() {
-		return LegendPosition.None;
-	}
-	drawBands(ctx, frame) {
-		const { bullets } = this;
-		const { measure, targetMark, y } = this.options;
-		const color = ctx.palette.color(y);
-		const thick = Math.min(frame.thick, 34);
-		const start = (band) => frame.center(band) - thick / 2;
-		const shades = bullets.flatMap((bullet) => bullet.ranges.map((value, i, all) => ({
-			key: `${bullet.band}/${i}`,
-			band: bullet.band,
-			from: i ? all[i - 1] : 0,
-			to: value,
-			level: i,
-			levels: all.length
-		})));
-		const zones = ctx.marks("ranges", "path", shades, (d) => d.key).attr("fill", ctx.theme.inkMuted).attr("fill-opacity", (d) => .34 - .24 * d.level / Math.max(1, d.levels - 1));
-		ctx.set(zones, { d: (d) => frame.bar(start(d.band), thick, d.from, d.to, 0) }, { d: (d) => frame.bar(start(d.band), thick, d.from, d.from, 0) }, 10);
-		const inner = Math.max(3, thick * .36);
-		const bars = ctx.marks("measures", "path", measure === "bar" ? bullets : [], (d) => d.band).attr("fill", color);
-		ctx.set(bars, { d: (d) => frame.bar(frame.center(d.band) - inner / 2, inner, 0, d.value, 2) }, { d: (d) => frame.bar(frame.center(d.band) - inner / 2, inner, 0, 0, 2) }, 30);
-		const dots = ctx.marks("measure-dots", "circle", measure === "measure-dot" ? bullets : [], (d) => d.band).attr("r", Math.min(6, thick / 3)).attr("fill", color).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
-		ctx.set(dots, {
-			cx: (d) => frame.point(frame.center(d.band), d.value)[0],
-			cy: (d) => frame.point(frame.center(d.band), d.value)[1]
-		});
-		const tip = (d) => ({
-			title: d.band,
-			color,
-			rows: [
-				["Value", d.raw],
-				["Target", d.rawGoal],
-				["Attainment", `${Math.round(d.raw / (d.rawGoal || 1) * 100)}%`]
-			]
-		});
-		ctx.hover(bars, tip);
-		ctx.hover(dots, tip);
-		this.drawTargets(ctx, frame, bullets, targetMark, thick);
-	}
-	drawTargets(ctx, frame, bullets, mark, thick) {
-		const rules = ctx.marks("target-lines", "line", mark === "line" ? bullets : [], (d) => d.band).attr("stroke", ctx.theme.ink).attr("stroke-width", 2.5).attr("stroke-linecap", "round");
-		const rule = (d) => frame.rule(d.goal, frame.center(d.band) - thick * .36, frame.center(d.band) + thick * .36);
-		ctx.set(rules, {
-			x1: (d) => rule(d).x1,
-			y1: (d) => rule(d).y1,
-			x2: (d) => rule(d).x2,
-			y2: (d) => rule(d).y2
-		});
-		const offset = thick / 2 - 1;
-		const pin = (d) => frame.point(frame.center(d.band) + (mark === "triangle" ? offset : 0), d.goal);
-		const glyph = mark === "triangle" ? symbol(symbolTriangle, 60)() : "M-5,0A5,5 0 1 1 5,0A5,5 0 1 1 -5,0Z";
-		const spin = mark === "triangle" && frame.vertical ? " rotate(-90)" : "";
-		const pins = ctx.marks("target-pins", "path", mark === "line" ? [] : bullets, (d) => d.band).attr("d", glyph).attr("fill", ctx.theme.ink).attr("stroke", ctx.theme.surface).attr("stroke-width", 1.5);
-		ctx.set(pins, { transform: (d) => `translate(${pin(d).join(",")})${spin}` });
-	}
-};
-export { BulletBar, BulletBarMeasure, BulletBarScale, BulletBarTarget };

package/dist/charts/bars/ErrorBarColumn.js

@@ -1,147 +0,0 @@
-import { ChartFamily, DataShape, Dimension, LegendPosition, Orientation } from "../../core/enums.js";
-import { SampleData } from "../../data/SampleData.js";
-import { BandChart } from "./BandChart.js";
-import { BarRows, BarSort } from "./BarRows.js";
-import { ascending, descending, deviation, max, mean, min } from "d3";
-// src/charts/bars/ErrorBarColumn.ts
-var ErrorBarInterval = /* @__PURE__ */ function(ErrorBarInterval) {
-	ErrorBarInterval["Deviation"] = "deviation";
-	ErrorBarInterval["StandardError"] = "standard-error";
-	ErrorBarInterval["Ci95"] = "ci95";
-	return ErrorBarInterval;
-}({});
-var ErrorBarMark = /* @__PURE__ */ function(ErrorBarMark) {
-	ErrorBarMark["Bar"] = "bar";
-	ErrorBarMark["Dot"] = "dot";
-	return ErrorBarMark;
-}({});
-/** Group means with their uncertainty, computed from raw rows, for experiment and survey results. */
-var ErrorBarColumn = class extends BandChart {
-	static meta = {
-		id: "bar-error",
-		name: "Error bar column",
-		family: ChartFamily.Statistical,
-		dimension: Dimension.Two,
-		shape: DataShape.Table,
-		description: "Plots each group mean with a deviation, standard-error or 95% interval whisker computed from raw rows.",
-		tags: [
-			"mean",
-			"confidence interval",
-			"uncertainty"
-		],
-		sample: (seed) => SampleData.distribution(seed, 30, 6),
-		variants: {
-			orientation: [Orientation.Vertical, Orientation.Horizontal],
-			interval: [
-				"ci95",
-				"standard-error",
-				"deviation"
-			],
-			mark: ["bar", "dot"],
-			caps: [true, false],
-			sort: [BarSort.Data, BarSort.Descending]
-		}
-	};
-	defaults() {
-		return {
-			x: "group",
-			y: "value",
-			orientation: Orientation.Vertical,
-			interval: "ci95",
-			mark: "bar",
-			caps: true,
-			sort: BarSort.Data
-		};
-	}
-	get estimates() {
-		const { data, x, y, interval, sort } = this.options;
-		const rows = [...BarRows.values(data, x, y)].map(([band, values]) => {
-			const center = mean(values) ?? 0, spread = deviation(values) ?? 0, standard = spread / Math.sqrt(values.length);
-			const reach = interval === "deviation" ? spread : interval === "standard-error" ? standard : standard * 1.96;
-			return {
-				band,
-				center,
-				low: center - reach,
-				high: center + reach,
-				n: values.length
-			};
-		});
-		if (sort === BarSort.Descending) return rows.sort((a, b) => descending(a.center, b.center) || ascending(a.band, b.band));
-		return rows;
-	}
-	get dotted() {
-		return this.options.mark === "dot";
-	}
-	get legendPosition() {
-		return LegendPosition.None;
-	}
-	bandNames() {
-		return this.estimates.map((estimate) => estimate.band);
-	}
-	bandPadding() {
-		return .3;
-	}
-	baseline() {
-		return this.dotted ? null : 0;
-	}
-	reserve() {
-		return this.dotted ? [8, 8] : [0, 6];
-	}
-	valueExtent() {
-		const { estimates } = this;
-		const low = min(estimates, (estimate) => estimate.low) ?? 0, high = max(estimates, (estimate) => estimate.high) ?? 1;
-		return this.dotted ? [low, high] : [Math.min(0, low), Math.max(0, high)];
-	}
-	drawBands(ctx, frame) {
-		const { estimates } = this;
-		const { caps, y } = this.options;
-		const color = ctx.palette.color(y);
-		const at = (d) => frame.band(d.band) ?? 0;
-		const bars = ctx.marks("bars", "path", this.dotted ? [] : estimates, (d) => d.band).attr("fill", color);
-		ctx.set(bars, { d: (d) => frame.bar(at(d), frame.thick, 0, d.center) }, { d: (d) => frame.bar(at(d), frame.thick, 0, 0) }, 20);
-		const tip = (d) => ({
-			title: d.band,
-			color,
-			rows: [
-				["Mean", +d.center.toFixed(2)],
-				["Low", +d.low.toFixed(2)],
-				["High", +d.high.toFixed(2)],
-				["n", d.n]
-			]
-		});
-		ctx.hover(bars, tip);
-		const stroke = this.dotted ? color : ctx.theme.ink;
-		const whiskers = ctx.marks("whiskers", "line", estimates, (d) => d.band).attr("stroke", stroke).attr("stroke-width", 2).attr("stroke-linecap", "round");
-		const line = (d) => frame.stem(frame.center(d.band), d.low, d.high);
-		ctx.set(whiskers, {
-			x1: (d) => line(d).x1,
-			y1: (d) => line(d).y1,
-			x2: (d) => line(d).x2,
-			y2: (d) => line(d).y2
-		});
-		const ends = caps ? estimates.flatMap((d) => [{
-			key: `${d.band}/low`,
-			band: d.band,
-			value: d.low
-		}, {
-			key: `${d.band}/high`,
-			band: d.band,
-			value: d.high
-		}]) : [];
-		const tips = ctx.marks("caps", "line", ends, (d) => d.key).attr("stroke", stroke).attr("stroke-width", 2).attr("stroke-linecap", "round");
-		const cap = (d) => frame.rule(d.value, frame.center(d.band) - 5, frame.center(d.band) + 5);
-		ctx.set(tips, {
-			x1: (d) => cap(d).x1,
-			y1: (d) => cap(d).y1,
-			x2: (d) => cap(d).x2,
-			y2: (d) => cap(d).y2
-		});
-		const dots = ctx.marks("dots", "circle", this.dotted ? estimates : [], (d) => d.band).attr("r", 6).attr("fill", color).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
-		ctx.set(dots, {
-			cx: (d) => frame.point(frame.center(d.band), d.center)[0],
-			cy: (d) => frame.point(frame.center(d.band), d.center)[1]
-		});
-		ctx.hover(dots, tip);
-	}
-};
-export { ErrorBarColumn, ErrorBarInterval, ErrorBarMark };

package/dist/charts/bars/HistogramBar.js

@@ -1,217 +0,0 @@
-import { CartesianChart } from "../../core/CartesianChart.js";
-import { ChartFamily, CurveKind, DataShape, Dimension, LegendPosition, Orientation } from "../../core/enums.js";
-import { Scales } from "../../core/Scales.js";
-import { SampleData } from "../../data/SampleData.js";
-import { BarFrame } from "./BarFrame.js";
-import { BarRows } from "./BarRows.js";
-import { ascending, bin, deviation, extent, line, max, quantile, scaleBand, scaleLinear, sum, thresholdFreedmanDiaconis, thresholdScott, thresholdSturges } from "d3";
-// src/charts/bars/HistogramBar.ts
-var HistogramBarBinning = /* @__PURE__ */ function(HistogramBarBinning) {
-	HistogramBarBinning["Sturges"] = "sturges";
-	HistogramBarBinning["Scott"] = "scott";
-	HistogramBarBinning["FreedmanDiaconis"] = "freedman-diaconis";
-	HistogramBarBinning["Sqrt"] = "sqrt";
-	return HistogramBarBinning;
-}({});
-var HistogramBarLayout = /* @__PURE__ */ function(HistogramBarLayout) {
-	HistogramBarLayout["Single"] = "single";
-	HistogramBarLayout["Stacked"] = "stacked";
-	HistogramBarLayout["Overlaid"] = "overlaid";
-	return HistogramBarLayout;
-}({});
-var ROUND_STEPS = [
-	1,
-	1.5,
-	2,
-	2.5,
-	3,
-	4,
-	5,
-	6,
-	8,
-	10
-];
-/** Snap a raw bin width to a round number, so bin edges read like 30–35 rather than 31.7–36.2. */
-var roundStep = (raw) => {
-	const power = 10 ** Math.floor(Math.log10(raw));
-	return ROUND_STEPS.reduce((best, step) => Math.abs(step * power - raw) < Math.abs(best * power - raw) ? step : best) * power;
-};
-/** The shape of one numeric column, on rounded bins that are easy to read and quote. */
-var HistogramBar = class extends CartesianChart {
-	static meta = {
-		id: "bar-histogram",
-		name: "Histogram",
-		family: ChartFamily.Distribution,
-		dimension: Dimension.Two,
-		shape: DataShape.Table,
-		description: "Counts values into rounded-range bins chosen by a standard rule, to show the shape of a distribution.",
-		tags: [
-			"bins",
-			"frequency",
-			"distribution",
-			"cumulative"
-		],
-		sample: (seed) => SampleData.distribution(seed),
-		variants: {
-			orientation: [Orientation.Vertical, Orientation.Horizontal],
-			binning: [
-				"sturges",
-				"scott",
-				"sqrt"
-			],
-			layout: [
-				"single",
-				"stacked",
-				"overlaid"
-			],
-			cumulative: [false, true],
-			density: [false, true]
-		},
-		valid: (values) => !(values.density && (values.cumulative || values.layout !== "single"))
-	};
-	defaults() {
-		return {
-			y: "value",
-			series: "group",
-			orientation: Orientation.Vertical,
-			binning: "sturges",
-			layout: "single",
-			cumulative: false,
-			density: false
-		};
-	}
-	get vertical() {
-		return this.options.orientation === Orientation.Vertical;
-	}
-	get legendPosition() {
-		return this.options.layout === "single" ? LegendPosition.None : super.legendPosition;
-	}
-	get values() {
-		const { data, y, series, layout } = this.options;
-		return (data ?? []).flatMap((row) => {
-			const value = BarRows.number(row[y]);
-			return value === null ? [] : [{
-				value,
-				series: layout === "single" ? "All" : BarRows.label(row[series])
-			}];
-		});
-	}
-	thresholds(values) {
-		const [low = 0, high = 1] = extent(values);
-		if (low === high) return [low, low + 1];
-		const { binning } = this.options;
-		const count = binning === "scott" ? thresholdScott(values, low, high) : binning === "freedman-diaconis" ? thresholdFreedmanDiaconis(values, low, high) : binning === "sqrt" ? Math.ceil(Math.sqrt(values.length)) : thresholdSturges(values);
-		const step = roundStep((high - low) / Math.max(1, count || 10));
-		const first = Math.floor(low / step), last = Math.ceil(high / step);
-		return Array.from({ length: last - first + 1 }, (_, i) => +((first + i) * step).toPrecision(10));
-	}
-	buckets() {
-		const { values } = this;
-		const edges = this.thresholds(values.map((item) => item.value));
-		const series = [...new Set(values.map((item) => item.series))];
-		const binner = bin().domain([edges[0], edges[edges.length - 1]]).thresholds(edges.slice(1, -1));
-		const counts = series.map((name) => binner(values.filter((item) => item.series === name).map((item) => item.value)));
-		const { cumulative, layout } = this.options;
-		const running = series.map(() => 0);
-		return {
-			buckets: (counts[0] ?? []).flatMap((_, b) => {
-				let stack = 0;
-				return series.map((name, s) => {
-					const bucket = counts[s][b];
-					running[s] += bucket.length;
-					const count = cumulative ? running[s] : bucket.length;
-					const start = layout === "stacked" ? stack : 0;
-					stack += count;
-					return {
-						x0: bucket.x0,
-						x1: bucket.x1,
-						series: name,
-						start,
-						end: start + count,
-						count
-					};
-				});
-			}),
-			series,
-			edges
-		};
-	}
-	scales(ctx) {
-		const { buckets, edges } = this.buckets();
-		const { width, height } = ctx.plot;
-		const top = max(buckets, (bucket) => bucket.end) || 1;
-		const along = scaleLinear([edges[0], edges[edges.length - 1]], this.vertical ? [0, width] : [height, 0]);
-		const count = scaleLinear([0, top], this.vertical ? [height, 0] : [0, width]).nice();
-		return this.vertical ? {
-			x: along,
-			y: count
-		} : {
-			x: count,
-			y: along
-		};
-	}
-	plotMarks(ctx, axes) {
-		const along = this.vertical ? axes.x : axes.y;
-		const count = this.vertical ? axes.y : axes.x;
-		const frame = new BarFrame(this.vertical, count, scaleBand());
-		const { buckets, series } = this.buckets();
-		const { layout, density } = this.options;
-		const single = layout === "single";
-		if (!this.vertical) this.countGrid(ctx, count);
-		const overlaid = layout === "overlaid";
-		const edge = (d) => Math.min(along(d.x0), along(d.x1)) + 1;
-		const size = (d) => Math.max(1, Math.abs(along(d.x1) - along(d.x0)) - 2);
-		const name = (d) => single ? this.options.y : d.series;
-		const shown = overlaid ? [] : buckets;
-		const bars = ctx.marks("bars", "path", shown, (d) => `${d.x0}/${d.series}`).attr("fill", (d) => ctx.palette.color(name(d)));
-		const outer = (d) => d.series === series[series.length - 1];
-		ctx.set(bars, { d: (d) => frame.bar(edge(d), size(d), d.start, d.end, outer(d) ? 3 : 0, d.start ? 2 : 0) }, { d: (d) => frame.bar(edge(d), size(d), d.start, d.start, 0) }, 6);
-		const tip = (d) => ({
-			title: `${d.x0}–${d.x1}`,
-			color: ctx.palette.color(name(d)),
-			rows: [[single ? "Count" : d.series, d.count]]
-		});
-		ctx.hover(bars, tip);
-		const steps = series.map((key) => ({
-			key,
-			path: this.stepPath(buckets.filter((d) => d.series === key), along, count)
-		}));
-		const areas = ctx.marks("outlines", "path", overlaid ? steps : [], (d) => d.key).attr("fill", (d) => this.options.cumulative ? "none" : ctx.palette.color(d.key)).attr("fill-opacity", .16).attr("stroke", (d) => ctx.palette.color(d.key)).attr("stroke-width", 2).attr("stroke-linejoin", "round");
-		ctx.set(areas, { d: (d) => d.path });
-		const zones = ctx.marks("zones", "rect", overlaid ? buckets : [], (d) => `${d.x0}/${d.series}`).attr("fill", "transparent").attr("x", (d) => this.vertical ? edge(d) : 0).attr("y", (d) => this.vertical ? count(d.end) : edge(d)).attr("width", (d) => this.vertical ? size(d) : count(d.end)).attr("height", (d) => this.vertical ? Math.abs(count(0) - count(d.end)) : size(d));
-		ctx.hover(zones, tip);
-		this.drawDensity(ctx, density ? this.kde(buckets) : [], along, count);
-	}
-	stepPath(rows, along, count) {
-		const point = (x, n) => this.vertical ? `${along(x).toFixed(2)},${count(n).toFixed(2)}` : `${count(n).toFixed(2)},${along(x).toFixed(2)}`;
-		if (!rows.length) return "";
-		const close = this.options.cumulative ? [] : [point(rows[rows.length - 1].x1, 0)];
-		return `M${[
-			point(rows[0].x0, 0),
-			...rows.flatMap((row) => [point(row.x0, row.count), point(row.x1, row.count)]),
-			...close
-		].join("L")}`;
-	}
-	countGrid(ctx, count) {
-		const ticks = this.options.grid === false ? [] : count.ticks(Math.min(this.xTicks(), Math.floor(ctx.plot.width / 80)));
-		ctx.group("count-grid").lower().selectAll("line").data(ticks).join("line").attr("x1", (tick) => count(tick)).attr("x2", (tick) => count(tick)).attr("y1", 0).attr("y2", ctx.plot.height).attr("stroke", ctx.theme.grid);
-	}
-	/** Gaussian kernel density with Silverman's bandwidth, scaled to bin counts. */
-	kde(buckets) {
-		const values = this.values.map((item) => item.value).sort(ascending);
-		if (values.length < 2 || !buckets.length) return [];
-		const h = .9 * (Math.min(deviation(values) ?? 1, ((quantile(values, .75) ?? 0) - (quantile(values, .25) ?? 0)) / 1.34) || 1) * values.length ** -.2;
-		const width = buckets[0].x1 - buckets[0].x0;
-		const low = buckets[0].x0, high = buckets[buckets.length - 1].x1;
-		return Array.from({ length: 64 }, (_, i) => {
-			const at = low + (high - low) * i / 63;
-			return [at, sum(values, (value) => Math.exp(-.5 * ((at - value) / h) ** 2)) / (h * Math.sqrt(2 * Math.PI)) * width];
-		});
-	}
-	drawDensity(ctx, points, along, count) {
-		const curve = line().curve(Scales.curve(CurveKind.Monotone)).x((d) => this.vertical ? along(d[0]) : count(d[1])).y((d) => this.vertical ? count(d[1]) : along(d[0]));
-		const paths = ctx.marks("density", "path", points.length ? [points] : []).attr("fill", "none").attr("stroke", ctx.theme.ink).attr("stroke-width", 2).attr("stroke-linecap", "round").attr("d", (d) => curve(d));
-		ctx.drawOn(paths);
-	}
-};
-export { HistogramBar, HistogramBarBinning, HistogramBarLayout };