A piecewise log – linear – log scale for D3 that keeps extreme outliers on screen without crushing the majority of your data.

Most real-world financial data is lumpy: 84% of the values bunch into a narrow band, then a handful of outliers run two or three orders of magnitude past them. On a linear scale the cluster collapses into an unreadable sliver; on a log scale the cluster's internal structure distorts. scaleAdaptive splits the axis into three regions — a logarithmic tail on each side of a linear focus window — and allocates pixels so both the cluster and the outliers stay readable.

The linear window is draggable, pannable and keyboard-accessible in the accompanying chart, and the compression in each log tail is made visible by tail rulers: equal-dollar chunks rendered at shrinking pixel widths.

import { scaleAdaptive } from './src/scale/adaptive-scale.js';

const x = scaleAdaptive()
  .data(values)          // raw numbers — used for breakpoint detection
  .range([0, width]);

x(42_000);               // domain → pixel
x.invert(310);           // pixel → domain
x.ticks(8);              // "nice" ticks aware of all three regions

import { createAdaptiveChart } from './src/chart/adaptive-chart.js';

const chart = createAdaptiveChart(loans, {
  x: d => d.principal,
  y: d => d.apr,
  label: d => d.borrower,
  width: 900,
  height: 400,
  xLabel: 'Loan principal (USD)',
  yLabel: 'APR (%)',
  xFormat: 'currency',
});
container.append(chart);

Implements the full d3 continuous-scale contract, so it drops into d3.axisBottom(...), brushing, and anything else that expects a scale.

These hold for every configuration, enforced by the test suite:

1. Monotonicity — scale(a) < scale(b) whenever a < b.
2. Invertibility — scale.invert(scale(v)) ≈ v to floating-point tolerance.
3. Boundary continuity — the pixel at a region boundary is identical whether approached from the log or the linear side. The tail slope is solved (bisection on the symlog constant) to match the linear window's slope at the joint, so the transition is visually seamless.
4. Graceful degradation — no outliers → plain linear scale; outliers on one side only → one tail.

Returns a detached <svg> node (the Observable cell pattern). All options are optional.

The returned SVG node exposes imperative hooks for callers that persist state across re-renders:

Colours are CSS custom properties with dark-theme fallbacks baked in, so the chart renders standalone. Define the tokens to theme it:

--dot-fill, --axis-color, --axis-text, --label-color,
--tooltip-bg, --tooltip-border, --tooltip-text, --tooltip-text-muted,
--ruler-tint, --chart-surface

• Drag the window body to pan; push past an edge and it docks and auto-scrolls.
• Drag a handle to move one boundary; the axis, rulers and dots update live.
• Click a tail chunk (or press ←/→) to travel: that chunk's data fills the linear window and everything else becomes tail.
• Shift+←/→ fine-pans; double-click resets to the automatic window.
• The window is capped so it can never swallow an outlier tail — a structural guarantee, not a heuristic (see windowBounds()).

src/scale/   pure math, zero DOM — testable with vitest
src/chart/   D3 rendering, interaction, transitions

The scale layer never touches the DOM. npm test runs 86 tests across monotonicity, invertibility, boundary continuity, edge cases (negative/zero-crossing domains included), tick generation and graceful degradation.

npm install
npm run dev      # Vite dev server — full interactive harness with dataset switcher
npm test         # vitest