@mstone6969/graph 0.1.0 → 0.2.0

package/dist/PdfWriter-6HJFYMCO.cjs

@@ -0,0 +1,205 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }
+
+var _chunkVX54A7KAcjs = require('./chunk-VX54A7KA.cjs');
+
+
+var _chunk753UBLV2cjs = require('./chunk-753UBLV2.cjs');
+
+
+
+var _chunkZ3JPIJSCcjs = require('./chunk-Z3JPIJSC.cjs');
+
+// src/core/PdfWriter.ts
+var _pdflib = require('pdf-lib');
+var SIZES = { ["a4" /* A4 */]: _pdflib.PageSizes.A4, ["letter" /* Letter */]: _pdflib.PageSizes.Letter };
+var MARGIN = 36;
+var TITLE = 16;
+var TEXT = 8;
+var FOOTER = 7;
+var ROW = 14;
+var PADDING = 4;
+var [MIN_COLUMN, MAX_COLUMN] = [44, 180];
+var MEASURED = 500;
+var MAX_ROWS = 25e3;
+var SHARPNESS = 4;
+var [ASCENT, DESCENT] = [1.05, 0.35];
+var FALLBACK_FONT = 'Helvetica, Arial, "Noto Sans", sans-serif';
+var INK = _pdflib.rgb.call(void 0, 0.1, 0.1, 0.1);
+var QUIET = _pdflib.rgb.call(void 0, 0.4, 0.4, 0.4);
+var RULE = _pdflib.rgb.call(void 0, 0.8, 0.8, 0.8);
+var BAND = _pdflib.rgb.call(void 0, 0.94, 0.94, 0.94);
+var PdfWriter = class _PdfWriter {
+  #doc;
+  #regular;
+  #bold;
+  #glyphs;
+  #pictures = /* @__PURE__ */ new Map();
+  #ruler = null;
+  #width;
+  #height;
+  constructor(doc, regular, bold, size) {
+    this.#doc = doc;
+    this.#regular = regular;
+    this.#bold = bold;
+    this.#glyphs = new Set(regular.getCharacterSet());
+    [this.#width, this.#height] = size;
+  }
+  static async write(chart, options = {}) {
+    const table = options.table ? _chunk753UBLV2cjs.ExportText.rows(chart, "A PDF data table") : null;
+    return _PdfWriter.file(await chart.toPNG({ scale: _nullishCoalesce(options.scale, () => ( 3)) }), table, options);
+  }
+  static async file(png, table, options) {
+    const { pageSize = "a4" /* A4 */, orientation = "auto" /* Auto */, title } = options;
+    const size = SIZES[pageSize];
+    if (!size) throw new RangeError(`Unknown PDF page size ${pageSize}.`);
+    if (!Object.values(_chunkVX54A7KAcjs.PdfOrientation).includes(orientation)) throw new RangeError(`Unknown PDF orientation ${orientation}.`);
+    if (table && table.rows.length > MAX_ROWS) throw new (0, _chunkZ3JPIJSCcjs.ChartExportError)("unsupported" /* Unsupported */, `A PDF table holds ${MAX_ROWS} rows and this one has ${table.rows.length}. Use Excel or CSV for the data.`);
+    const doc = await _pdflib.PDFDocument.create();
+    doc.setCreator("@mstone6969/graph");
+    doc.setProducer("pdf-lib");
+    if (title) doc.setTitle(title);
+    const chart = await doc.embedPng(await png.arrayBuffer());
+    const [narrow, wide] = size;
+    const landscape = orientation === "landscape" /* Landscape */ || orientation === "auto" /* Auto */ && chart.width >= chart.height;
+    const writer = new _PdfWriter(doc, await doc.embedFont(_pdflib.StandardFonts.Helvetica), await doc.embedFont(_pdflib.StandardFonts.HelveticaBold), landscape ? [wide, narrow] : [narrow, wide]);
+    await writer.#chartPage(chart, title);
+    if (table) await writer.#tablePages(table);
+    await writer.#numberPages();
+    return new Blob([await doc.save()], { type: "application/pdf" });
+  }
+  #page() {
+    return this.#doc.addPage([this.#width, this.#height]);
+  }
+  get #room() {
+    return this.#width - MARGIN * 2;
+  }
+  async #chartPage(chart, title) {
+    const page = this.#page();
+    let top = this.#height - MARGIN;
+    if (title) {
+      top -= TITLE;
+      await this.#text(page, title, MARGIN, top, this.#room, { size: TITLE, bold: true });
+      top -= TITLE;
+    }
+    const fit = Math.min(this.#room / chart.width, (top - MARGIN) / chart.height);
+    const [width, height] = [chart.width * fit, chart.height * fit];
+    page.drawImage(chart, { x: (this.#width - width) / 2, y: top - height, width, height });
+  }
+  async #tablePages({ columns, rows }) {
+    const texts = rows.map((row) => columns.map((_, c) => _chunk753UBLV2cjs.ExportText.of(row[c])));
+    const natural = columns.map((column, c) => {
+      const widest = texts.slice(0, MEASURED).reduce((most, row) => Math.max(most, this.#textWidth(_PdfWriter.#clean(row[c]), TEXT)), this.#textWidth(_PdfWriter.#clean(column), TEXT, true));
+      return Math.min(MAX_COLUMN, Math.max(MIN_COLUMN, widest + PADDING * 2));
+    });
+    for (const block of this.#blocks(natural)) {
+      const used = block.reduce((sum, c) => sum + natural[c], 0);
+      const widths = block.map((c) => natural[c] * this.#room / used);
+      let page = null, y = 0;
+      for (const [r, row] of texts.entries()) {
+        if (!page || y < MARGIN + ROW) {
+          page = this.#page();
+          y = this.#height - MARGIN - ROW;
+          page.drawRectangle({ x: MARGIN, y: y - PADDING, width: this.#room, height: ROW, color: BAND });
+          await this.#row(page, block.map((c) => columns[c]), block.map((c) => typeof rows[0][c] === "number"), widths, y, true);
+          y -= ROW;
+        }
+        await this.#row(page, block.map((c) => row[c]), block.map((c) => typeof rows[r][c] === "number"), widths, y, false);
+        page.drawLine({ start: { x: MARGIN, y: y - PADDING }, end: { x: MARGIN + this.#room, y: y - PADDING }, thickness: 0.25, color: RULE });
+        y -= ROW;
+      }
+    }
+  }
+  /** Greedy runs of columns that fit a page. Later runs repeat the first column, so their rows can still be told apart. */
+  #blocks(widths) {
+    const blocks = [];
+    let used = Infinity;
+    widths.forEach((width, c) => {
+      if (used + width > this.#room) {
+        blocks.push(c ? [0, c] : [c]);
+        used = (c ? widths[0] : 0) + width;
+      } else {
+        blocks.at(-1).push(c);
+        used += width;
+      }
+    });
+    return blocks;
+  }
+  async #row(page, cells, right, widths, y, bold) {
+    let x = MARGIN;
+    for (const [c, cell] of cells.entries()) {
+      const room = widths[c] - PADDING * 2;
+      await this.#text(page, cell, right[c] ? x + PADDING + room : x + PADDING, y, room, { size: TEXT, bold, right: right[c] });
+      x += widths[c];
+    }
+  }
+  async #numberPages() {
+    const pages = this.#doc.getPages();
+    if (pages.length < 2) return;
+    for (const [i, page] of pages.entries()) {
+      await this.#text(page, `Page ${i + 1} of ${pages.length}`, this.#width - MARGIN, MARGIN / 2, this.#room, { size: FOOTER, color: QUIET, right: true });
+    }
+  }
+  static #clean(text) {
+    return text.replace(/\s+/g, " ").trim();
+  }
+  #encodable(text) {
+    for (const char of text) if (!this.#glyphs.has(char.codePointAt(0))) return false;
+    return true;
+  }
+  #font(bold) {
+    return bold ? this.#bold : this.#regular;
+  }
+  #cssFont(px, bold) {
+    return `${bold ? "bold " : ""}${px}px ${FALLBACK_FONT}`;
+  }
+  #textWidth(text, size, bold) {
+    if (this.#encodable(text)) return this.#font(bold).widthOfTextAtSize(text, size);
+    this.#ruler ??= _chunkZ3JPIJSCcjs.ChartExporter.paint(_chunkZ3JPIJSCcjs.ChartExporter.canvas(1, 1));
+    this.#ruler.font = this.#cssFont(size * SHARPNESS, bold);
+    return this.#ruler.measureText(text).width / SHARPNESS;
+  }
+  /** Cuts by code point, so an ellipsis never lands inside a surrogate pair. */
+  #fit(text, room, size, bold) {
+    if (this.#textWidth(text, size, bold) <= room) return text;
+    const chars = [...text];
+    let [low, high] = [0, chars.length];
+    while (low < high) {
+      const middle = Math.ceil((low + high) / 2);
+      if (this.#textWidth(`${chars.slice(0, middle).join("")}\u2026`, size, bold) <= room) low = middle;
+      else high = middle - 1;
+    }
+    return `${chars.slice(0, low).join("").trimEnd()}\u2026`;
+  }
+  /** The 14 built-in fonts cover Western European text only. Anything else is drawn as a small picture, so it shows but cannot be selected. */
+  async #text(page, text, x, y, room, style) {
+    const { size, bold, color = INK, right } = style;
+    const clean = _PdfWriter.#clean(text);
+    if (!clean) return;
+    const shown = this.#fit(clean, room, size, bold);
+    const width = this.#textWidth(shown, size, bold);
+    const left = right ? x - width : x;
+    if (this.#encodable(shown)) {
+      page.drawText(shown, { x: left, y, size, font: this.#font(bold), color });
+      return;
+    }
+    const picture = await this.#picture(shown, width, size, bold);
+    page.drawImage(picture, { x: left, y: y - size * DESCENT, width: picture.width / SHARPNESS, height: picture.height / SHARPNESS });
+  }
+  async #picture(text, width, size, bold) {
+    const key = `${size}|${bold}|${text}`;
+    const known = this.#pictures.get(key);
+    if (known) return known;
+    const canvas = _chunkZ3JPIJSCcjs.ChartExporter.canvas(Math.ceil(width * SHARPNESS), Math.ceil(size * (ASCENT + DESCENT) * SHARPNESS));
+    const paint = _chunkZ3JPIJSCcjs.ChartExporter.paint(canvas);
+    paint.font = this.#cssFont(size * SHARPNESS, bold);
+    paint.fillStyle = "#1a1a1a";
+    paint.textBaseline = "alphabetic";
+    paint.fillText(text, 0, size * ASCENT * SHARPNESS);
+    const picture = await this.#doc.embedPng(await (await _chunkZ3JPIJSCcjs.ChartExporter.png(canvas)).arrayBuffer());
+    this.#pictures.set(key, picture);
+    return picture;
+  }
+};
+
+
+exports.PdfWriter = PdfWriter;

package/dist/catalog-YWX6FHRM.cjs

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

package/dist/catalog.js

@@ -28,6 +28,10 @@ import { genomicsCatalog } from "./charts/genomics/index.js";
 import { earthscienceCatalog } from "./charts/earthscience/index.js";
 import { demographyCatalog } from "./charts/demography/index.js";
 import { structureCatalog } from "./charts/structure/index.js";
+import { diagramsCatalog } from "./charts/diagrams/index.js";
+import { mlchartsCatalog } from "./charts/mlcharts/index.js";
+import { frameworksCatalog } from "./charts/frameworks/index.js";
+import { lifescienceCatalog } from "./charts/lifescience/index.js";
 import { threebarsCatalog } from "./charts/threebars/index.js";
 import { threesurfacesCatalog } from "./charts/threesurfaces/index.js";
 import { threevolumeCatalog } from "./charts/threevolume/index.js";
@@ -36,5 +40,5 @@ import { threeglobeCatalog } from "./charts/threeglobe/index.js";
 import { ChartRegistry } from "./core/ChartRegistry.js";
 // src/catalog.ts
 /** Every chart class in the library, and every chart type they expand to. */
-var catalog = new ChartRegistry().register(...barsCatalog, ...linesareasCatalog, ...scatterCatalog, ...distributionCatalog, ...financialCatalog, ...comparisonCatalog, ...proportionCatalog, ...radialCatalog, ...hierarchyCatalog, ...indicatorsCatalog, ...timelineCatalog, ...pictorialCatalog, ...networkCatalog, ...flowCatalog, ...matrixCatalog, ...densityCatalog, ...multivariateCatalog, ...statisticsCatalog, ...geomapsCatalog, ...geoflowsCatalog, ...scientificCatalog, ...engineeringCatalog, ...mathematicalCatalog, ...signalsCatalog, ...massiveCatalog, ...businessCatalog, ...genomicsCatalog, ...earthscienceCatalog, ...demographyCatalog, ...structureCatalog, ...threebarsCatalog, ...threesurfacesCatalog, ...threevolumeCatalog, ...threenetworkCatalog, ...threeglobeCatalog);
+var catalog = new ChartRegistry().register(...barsCatalog, ...linesareasCatalog, ...scatterCatalog, ...distributionCatalog, ...financialCatalog, ...comparisonCatalog, ...proportionCatalog, ...radialCatalog, ...hierarchyCatalog, ...indicatorsCatalog, ...timelineCatalog, ...pictorialCatalog, ...networkCatalog, ...flowCatalog, ...matrixCatalog, ...densityCatalog, ...multivariateCatalog, ...statisticsCatalog, ...geomapsCatalog, ...geoflowsCatalog, ...scientificCatalog, ...engineeringCatalog, ...mathematicalCatalog, ...signalsCatalog, ...massiveCatalog, ...businessCatalog, ...genomicsCatalog, ...earthscienceCatalog, ...demographyCatalog, ...structureCatalog, ...diagramsCatalog, ...mlchartsCatalog, ...frameworksCatalog, ...lifescienceCatalog, ...threebarsCatalog, ...threesurfacesCatalog, ...threevolumeCatalog, ...threenetworkCatalog, ...threeglobeCatalog);
 export { catalog };

package/dist/charts/bars/index.js

@@ -2,21 +2,16 @@ import { BarFrame } from "./BarFrame.js";
 import { BarAggregate, BarRows, BarSort } from "./BarRows.js";
 import { BandChart } from "./BandChart.js";
 import { BarChart } from "./BarChart.js";
-import { BulletBar, BulletBarMeasure, BulletBarScale, BulletBarTarget } from "./BulletBar.js";
 import { MirrorChart, MirrorMark } from "./MirrorChart.js";
 import { ButterflyChart, ButterflyChartScale, ButterflyChartSort } from "./ButterflyChart.js";
 import { DateBarChart, DateBarInterval } from "./DateBarChart.js";
 import { DivergingBarCenter, DivergingBarChart, DivergingBarLabels, DivergingBarLayout } from "./DivergingBarChart.js";
 import { DotPlot, DotPlotDomain, DotPlotGuide, DotPlotLayout } from "./DotPlot.js";
 import { DumbbellChart, DumbbellChartConnector, DumbbellChartSort } from "./DumbbellChart.js";
-import { ErrorBarColumn, ErrorBarInterval, ErrorBarMark } from "./ErrorBarColumn.js";
 import { FacetedBarChart, FacetedBarMark, FacetedBarScale, FacetedBarSort } from "./FacetedBarChart.js";
 import { GroupedStackedBar } from "./GroupedStackedBar.js";
-import { HistogramBar, HistogramBarBinning, HistogramBarLayout } from "./HistogramBar.js";
 import { IconlessRankAlign, IconlessRankBar, IconlessRankLayout } from "./IconlessRankBar.js";
 import { LollipopChart, LollipopChartBaseline } from "./LollipopChart.js";
-import { MarimekkoBar, MekkoMode } from "./MarimekkoBar.js";
-import { ParetoBar, ParetoBarLine } from "./ParetoBar.js";
 import { PercentChangeBar, PercentChangeMark, PercentChangeMeasure } from "./PercentChangeBar.js";
 import { PopulationPyramid } from "./PopulationPyramid.js";
 import { ProgressBars, ProgressBarsLabel, ProgressBarsTrack } from "./ProgressBars.js";
@@ -32,19 +27,14 @@ var barsCatalog = [
 	DivergingBarChart,
 	ButterflyChart,
 	WaterfallChart,
-	MarimekkoBar,
-	HistogramBar,
 	RangeBarChart,
 	PopulationPyramid,
-	BulletBar,
 	ProgressBars,
 	GroupedStackedBar,
 	PercentChangeBar,
 	TripleBarOverlay,
 	IconlessRankBar,
-	ParetoBar,
 	DateBarChart,
-	FacetedBarChart,
-	ErrorBarColumn
+	FacetedBarChart
 ];
-export { BandChart, BarAggregate, BarChart, BarFrame, BarRows, BarSort, BulletBar, BulletBarMeasure, BulletBarScale, BulletBarTarget, ButterflyChart, ButterflyChartScale, ButterflyChartSort, DateBarChart, DateBarInterval, DivergingBarCenter, DivergingBarChart, DivergingBarLabels, DivergingBarLayout, DotPlot, DotPlotDomain, DotPlotGuide, DotPlotLayout, DumbbellChart, DumbbellChartConnector, DumbbellChartSort, ErrorBarColumn, ErrorBarInterval, ErrorBarMark, FacetedBarChart, FacetedBarMark, FacetedBarScale, FacetedBarSort, GroupedStackedBar, HistogramBar, HistogramBarBinning, HistogramBarLayout, IconlessRankAlign, IconlessRankBar, IconlessRankLayout, LollipopChart, LollipopChartBaseline, MarimekkoBar, MekkoMode, MirrorChart, MirrorMark, OverlayFront, OverlayNesting, ParetoBar, ParetoBarLine, PercentChangeBar, PercentChangeMark, PercentChangeMeasure, PopulationPyramid, ProgressBars, ProgressBarsLabel, ProgressBarsTrack, RangeBarChart, RangeBarMark, RangeBarSort, RangeBarSpread, TripleBarOverlay, WaterfallChart, WaterfallChartStep, WaterfallChartTotals, barsCatalog };
+export { BandChart, BarAggregate, BarChart, BarFrame, BarRows, BarSort, ButterflyChart, ButterflyChartScale, ButterflyChartSort, DateBarChart, DateBarInterval, DivergingBarCenter, DivergingBarChart, DivergingBarLabels, DivergingBarLayout, DotPlot, DotPlotDomain, DotPlotGuide, DotPlotLayout, DumbbellChart, DumbbellChartConnector, DumbbellChartSort, FacetedBarChart, FacetedBarMark, FacetedBarScale, FacetedBarSort, GroupedStackedBar, IconlessRankAlign, IconlessRankBar, IconlessRankLayout, LollipopChart, LollipopChartBaseline, MirrorChart, MirrorMark, OverlayFront, OverlayNesting, PercentChangeBar, PercentChangeMark, PercentChangeMeasure, PopulationPyramid, ProgressBars, ProgressBarsLabel, ProgressBarsTrack, RangeBarChart, RangeBarMark, RangeBarSort, RangeBarSpread, TripleBarOverlay, WaterfallChart, WaterfallChartStep, WaterfallChartTotals, barsCatalog };

package/dist/charts/comparison/EffectForestPlot.js

@@ -114,7 +114,7 @@ var EffectForestPlot = class extends BandValueChart {
 				pooled: false
 			}];
 		});
-		const items = sort === "effect" ? rows.sort((a, b) => b.effect - a.effect) : sort === "precision" ? rows.sort((a, b) => a.high / a.low - b.high / b.low) : rows;
+		const items = sort === "effect" ? rows.sort((a, b) => b.effect - a.effect) : sort === "precision" ? rows.sort((a, b) => on(a.high) - on(a.low) - (on(b.high) - on(b.low))) : rows;
 		const summary = pooled ? this.pool(items, on) : null;
 		if (summary) items.push(summary);
 		const values = [...this.logged && noEffect <= 0 ? [] : [noEffect], ...items.flatMap((d) => [d.low, d.high])];

package/dist/charts/comparison/index.js

@@ -14,11 +14,7 @@ import { ProfileScale, RadarLikeProfileChart } from "./RadarLikeProfileChart.js"
 import { RangeDotChart, RangeDotLink } from "./RangeDotChart.js";
 import { RankedDotChart, RankedLeader } from "./RankedDotChart.js";
 import { RankedSlopeLabels, RankedSlopePosition, RankedSlopeSpan, SlopeGraphRanked } from "./SlopeGraphRanked.js";
-import { PanelChart, PanelFlow } from "./PanelChart.js";
-import { BarFacet, SmallMultipleBars } from "./SmallMultipleBars.js";
-import { SpanChart, SpanMarker } from "./SpanChart.js";
 import { LensBaseline, LensMark, LensScale, LensSort, TableLensChart } from "./TableLensChart.js";
-import { TrellisChart, TrellisMark } from "./TrellisChart.js";
 // src/charts/comparison/index.ts
 var comparisonCatalog = [
 	RadarLikeProfileChart,
@@ -28,16 +24,13 @@ var comparisonCatalog = [
 	ErrorBarChart,
 	EffectForestPlot,
 	GaugeBarsComparison,
-	SpanChart,
 	FloatingBarChart,
 	DeviationChart,
 	RangeDotChart,
 	PairedBarChart,
-	SmallMultipleBars,
 	CycleChart,
-	TrellisChart,
 	MeanLineChart,
 	IntervalChart,
 	RankedDotChart
 ];
-export { BandValueChart, BarFacet, BarMeanChart, BarMeanRaw, ComparisonCenter, ComparisonSort, ComparisonSpread, CycleAggregate, CycleChart, CycleMark, CycleReference, CycleUnit, DeviationChart, DeviationMark, DeviationReference, DeviationUnit, EffectForestPlot, ErrorBarChart, ErrorBarLink, FloatReference, FloatShape, FloatingBarChart, ForestMarker, ForestSort, GaugeBarMarker, GaugeBarScale, GaugeBarTrack, GaugeBarsComparison, IntervalChart, IntervalStyle, LensBaseline, LensMark, LensScale, LensSort, MeanLineChart, MeanRibbon, PairedBarChart, PairedLayout, PairedSort, PairedUnit, PanelChart, PanelFlow, ProfileScale, RadarLikeProfileChart, RangeDotChart, RangeDotLink, RankedDotChart, RankedLeader, RankedSlopeLabels, RankedSlopePosition, RankedSlopeSpan, SlopeGraphRanked, SmallMultipleBars, SpanChart, SpanMarker, TableLensChart, Tally, TrellisChart, TrellisMark, comparisonCatalog };
+export { BandValueChart, BarMeanChart, BarMeanRaw, ComparisonCenter, ComparisonSort, ComparisonSpread, CycleAggregate, CycleChart, CycleMark, CycleReference, CycleUnit, DeviationChart, DeviationMark, DeviationReference, DeviationUnit, EffectForestPlot, ErrorBarChart, ErrorBarLink, FloatReference, FloatShape, FloatingBarChart, ForestMarker, ForestSort, GaugeBarMarker, GaugeBarScale, GaugeBarTrack, GaugeBarsComparison, IntervalChart, IntervalStyle, LensBaseline, LensMark, LensScale, LensSort, MeanLineChart, MeanRibbon, PairedBarChart, PairedLayout, PairedSort, PairedUnit, ProfileScale, RadarLikeProfileChart, RangeDotChart, RangeDotLink, RankedDotChart, RankedLeader, RankedSlopeLabels, RankedSlopePosition, RankedSlopeSpan, SlopeGraphRanked, TableLensChart, Tally, comparisonCatalog };

package/dist/charts/demography/Nomogram.js

@@ -229,14 +229,14 @@ var Nomogram = class extends Chart2D {
 	}
 	#drawRails(ctx, frame) {
 		const { at, rails, tick } = frame;
-		const lines = ctx.marks("rails", "path", rails, (d) => d.rail).attr("stroke", ctx.theme.inkSecondary).attr("stroke-width", 2).attr("stroke-linecap", "round").attr("fill", "none");
+		const lines = ctx.marks("axis-rails", "path", rails, (d) => d.rail).attr("stroke", ctx.theme.inkSecondary).attr("stroke-width", 2).attr("stroke-linecap", "round").attr("fill", "none");
 		ctx.set(lines, { d: (d) => DemographyMarks.segment(at(d.across, 0), at(d.across, 1)) });
 		const stroke = (name, pick, size) => {
 			const ticks = ctx.marks(name, "path", rails, (d) => d.rail).attr("stroke", ctx.theme.inkSecondary).attr("stroke-width", 1).attr("fill", "none");
 			ctx.set(ticks, { d: (d) => pick(d).map((value) => tick(d, value, size)).join("") });
 		};
-		stroke("ticks-major", (d) => d.marks.major, MAJOR);
-		stroke("ticks-minor", (d) => d.marks.minor, MINOR);
+		stroke("axis-major", (d) => d.marks.major, MAJOR);
+		stroke("axis-minor", (d) => d.marks.minor, MINOR);
 		const numbers = rails.flatMap((rail) => rail.marks.major.map((value) => {
 			const [x, y] = at(rail.across, rail.scale.place(value));
 			const out = 11;

package/dist/charts/density/HexbinChart.js

@@ -1,4 +1,4 @@
-import { ChartFamily, DataShape, Dimension, Orientation } from "../../core/enums.js";
+import { ChartFamily, DataShape, Dimension, Orientation, ScaleKind } from "../../core/enums.js";
 import { SampleData } from "../../data/SampleData.js";
 import { PlaneGeometry } from "./PlaneGeometry.js";
 import { PointDensityChart } from "./PointDensityChart.js";
@@ -65,7 +65,8 @@ var HexbinChart = class extends PointDensityChart {
 			aggregate: "count",
 			orientation: Orientation.Vertical,
 			mesh: false,
-			labels: false
+			labels: false,
+			toneScale: ScaleKind.Linear
 		};
 	}
 	get sizeEncoded() {
@@ -76,7 +77,7 @@ var HexbinChart = class extends PointDensityChart {
 		return aggregate === "count" ? points.length : aggregate === "sum" ? sum(points, (d) => d.w) : mean(points, (d) => d.w) ?? 0;
 	}
 	drawDensity(ctx, _axes, points) {
-		const { radius, encoding, orientation, mesh, labels } = this.options;
+		const { radius, encoding, orientation, mesh, labels, toneScale } = this.options;
 		const { width, height } = ctx.plot;
 		const flat = orientation === Orientation.Horizontal;
 		const lay = (a, b) => flat ? [b, a] : [a, b];
@@ -96,7 +97,8 @@ var HexbinChart = class extends PointDensityChart {
 		const lattice = ctx.marks("mesh", "path", mesh ? [binner.centers().map(([a, b]) => lay(a, b)).filter(fits).map(([x, y]) => shape(x, y, radius - 1)).join("")] : []).attr("fill", "none").attr("stroke", ctx.theme.grid);
 		ctx.set(lattice, { d: (d) => d });
 		const scale = (value) => Math.sqrt(value / top);
-		const tone = (d) => ctx.palette.sequential(encoding === "tone" ? .12 + .88 * d.value / top : .72);
+		const curve = (value) => toneScale === ScaleKind.Log ? Math.log1p(value) : toneScale === ScaleKind.Sqrt ? Math.sqrt(value) : value;
+		const tone = (d) => ctx.palette.sequential(encoding === "tone" ? .12 + .88 * curve(d.value) / curve(top) : .72);
 		const gapped = radius - 1;
 		const inner = (d) => encoding === "tone" ? gapped : Math.max(1.5, gapped * scale(d.value));
 		const isDot = encoding === "dot";

package/dist/charts/diagrams/ArchitectureCanvas.js

@@ -0,0 +1,68 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { ArchitectureShapes } from "./ArchitectureShapes.js";
+// src/charts/diagrams/ArchitectureCanvas.ts
+var HEAD = 9;
+var CORNER = 8;
+var LINE = 12;
+/** Connectors and link labels shared by both diagrams. `stage` is the context the diagram draws into. */
+var ArchitectureCanvas = class extends Chart2D {
+	plotMargin() {
+		return {
+			top: 8,
+			right: 12,
+			bottom: 8,
+			left: 12
+		};
+	}
+	table() {
+		const links = this.options.data?.links ?? [], columns = [
+			"source",
+			"target",
+			...this.linkFields
+		];
+		return {
+			columns,
+			rows: links.map((link) => columns.map((column) => link[column]))
+		};
+	}
+	drawLinks(stage, views, ratio) {
+		const { theme } = stage;
+		const head = Math.min(18, HEAD / ratio);
+		const shorten = (view) => {
+			if (!view.arrow) return view.route;
+			const tip = view.route[view.route.length - 1], before = view.route[view.route.length - 2];
+			const length = Math.hypot(tip.x - before.x, tip.y - before.y) || 1, pull = Math.min(head * .8, length / 2);
+			return [...view.route.slice(0, -1), {
+				x: tip.x + (before.x - tip.x) * pull / length,
+				y: tip.y + (before.y - tip.y) * pull / length
+			}];
+		};
+		const lines = stage.marks("links", "path", views, (d) => d.key).attr("fill", "none").attr("stroke", theme.inkSecondary).attr("stroke-width", 2 / ratio).attr("stroke-linejoin", "round");
+		stage.set(lines, { d: (d) => ArchitectureShapes.route(shorten(d), CORNER) });
+		stage.drawOn(lines);
+		stage.hover(lines, (d) => d.tip);
+		const heads = stage.marks("heads", "path", views.filter((view) => view.arrow), (d) => d.key).attr("fill", theme.inkSecondary).style("pointer-events", "none");
+		stage.set(heads, { d: (d) => ArchitectureShapes.arrow(d.route[d.route.length - 2], d.route[d.route.length - 1], head) });
+	}
+	drawLinkLabels(stage, views, placed, size) {
+		const backs = stage.marks("link-backs", "rect", placed, (d) => views[d.index].key).attr("fill", stage.theme.surface).attr("rx", 2).style("pointer-events", "none");
+		stage.set(backs, {
+			x: (d) => d.rect.x,
+			y: (d) => d.rect.y,
+			width: (d) => d.rect.width,
+			height: (d) => d.rect.height
+		});
+		const lines = placed.flatMap((label) => label.lines.map((text, i) => ({
+			key: `${views[label.index].key}:${i}`,
+			text,
+			x: label.rect.x + label.rect.width / 2,
+			y: label.rect.y + (i + 1) * LINE * size / 10
+		})));
+		const words = stage.text(stage.marks("link-text", "text", lines, (d) => d.key), size, "secondary").attr("text-anchor", "middle").style("pointer-events", "none").text((d) => d.text);
+		stage.set(words, {
+			x: (d) => d.x,
+			y: (d) => d.y
+		});
+	}
+};
+export { ArchitectureCanvas };