matterviz 0.3.7 → 0.4.0

package/dist/plot/core/interactions.js

@@ -0,0 +1,195 @@
+import { LOG_EPS } from '../../math';
+import { get_arcsinh_threshold, get_scale_type_name } from './types';
+// Get coordinates of a mouse event relative to an element (the event's
+// currentTarget by default; pass `element` when the handler is delegated and the
+// reference frame differs, e.g. coordinates relative to the svg root)
+export function get_relative_coords(evt, element = evt.currentTarget) {
+    if (!(element instanceof Element))
+        return null;
+    const box = element.getBoundingClientRect();
+    if (!box)
+        return null;
+    return { x: evt.clientX - box.left, y: evt.clientY - box.top };
+}
+// Resolve a delegated event to the integer value of the nearest ancestor's data
+// attribute (e.g. data-sunburst-node-idx), scoped to `root` so targets outside the
+// component don't leak in. Returns null when the event didn't hit an indexed element.
+export function closest_data_idx(event, attr, root) {
+    const target = event.target instanceof Element ? event.target.closest(`[${attr}]`) : null;
+    if (!target || (root && !root.contains(target)))
+        return null;
+    const idx = Number(target.getAttribute(attr));
+    return Number.isInteger(idx) ? idx : null;
+}
+// Normalize Y2 sync config (handle shorthand string vs full object)
+export function normalize_y2_sync(sync) {
+    if (!sync || sync === `none`)
+        return { mode: `none` };
+    if (typeof sync === `string`)
+        return { mode: sync };
+    return sync;
+}
+// Helper to check if all values in ranges are finite
+const all_finite = (...ranges) => ranges.every(([a, b]) => Number.isFinite(a) && Number.isFinite(b));
+// Calculate synced y2 range based on sync mode
+export function sync_y2_range(y1_range, y2_base_range, sync) {
+    if (sync.mode === `none`)
+        return y2_base_range;
+    if (!all_finite(y1_range, y2_base_range))
+        return y2_base_range;
+    // Synced: Y2 has exact same range as Y1
+    if (sync.mode === `synced`) {
+        return [y1_range[0], y1_range[1]];
+    }
+    // Align: Position so align_val (default 0) is at same relative position on both axes
+    // Y2 range expands as needed to show all data while maintaining alignment
+    if (sync.mode === `align`) {
+        const align_val = sync.align_value ?? 0;
+        const y1_span = y1_range[1] - y1_range[0];
+        if (y1_span === 0)
+            return y2_base_range;
+        // Where is align_val in Y1's range? (0 = bottom, 1 = top)
+        const rel_pos = (align_val - y1_range[0]) / y1_span;
+        // Ensure Y2 range includes both align_val and all data
+        const y2_min_data = Math.min(y2_base_range[0], align_val);
+        const y2_max_data = Math.max(y2_base_range[1], align_val);
+        // Calculate minimum span needed to fit all data while keeping align_val at rel_pos
+        // Constraints: y2_min <= y2_min_data AND y2_max >= y2_max_data
+        let y2_span = y2_max_data - y2_min_data;
+        if (rel_pos > 0) {
+            y2_span = Math.max(y2_span, (align_val - y2_min_data) / rel_pos);
+        }
+        if (rel_pos < 1) {
+            y2_span = Math.max(y2_span, (y2_max_data - align_val) / (1 - rel_pos));
+        }
+        const y2_min_computed = align_val - rel_pos * y2_span;
+        const y2_max_computed = align_val + (1 - rel_pos) * y2_span;
+        // When align_val is outside y1_range (rel_pos < 0 or > 1), the formula can produce
+        // a range that omits y2_base_range or align_val. Ensure both are always included.
+        const y2_min = Math.min(y2_min_computed, y2_base_range[0], align_val);
+        const y2_max = Math.max(y2_max_computed, y2_base_range[1], align_val);
+        return [y2_min, y2_max];
+    }
+    return y2_base_range;
+}
+// Forward/inverse transform pair mapping an axis's data values onto its visual
+// metric (the space where equal pixel steps are equal steps; identity for
+// linear/time). Pan and pinch must be uniform in *screen* space - doing the math
+// linearly on a log axis stretches one end of the view and shifts past zero into
+// an all-NaN domain. log clamps at LOG_EPS so a non-positive bound (stale explicit
+// range) recovers instead of propagating -Infinity.
+function axis_transform(scale_type) {
+    const name = get_scale_type_name(scale_type);
+    if (name === `log`) {
+        return { to: (val) => Math.log(Math.max(val, LOG_EPS)), from: Math.exp };
+    }
+    if (name === `arcsinh`) {
+        const threshold = get_arcsinh_threshold(scale_type);
+        const to = (val) => Math.asinh(val / threshold);
+        const from = (val) => Math.sinh(val) * threshold;
+        return { to, from };
+    }
+    return { to: (val) => val, from: (val) => val };
+}
+// Pan a range by a pixel delta, uniformly in screen space: linear axes shift by a
+// constant amount, log axes by a constant factor (which also can't cross zero).
+// `pixel_span` is the plot's pixel extent along the axis.
+export function pan_range_by_pixels(range, pixel_delta, pixel_span, scale_type) {
+    if (pixel_span === 0)
+        return range;
+    const { to, from } = axis_transform(scale_type);
+    const [t0, t1] = [to(range[0]), to(range[1])];
+    const t_delta = (pixel_delta / pixel_span) * (t1 - t0);
+    return [from(t0 + t_delta), from(t1 + t_delta)];
+}
+// Zoom a range about its screen-space center by `factor` (pinch: >1 zooms in).
+// On log axes the fixed point is the geometric mean - the visual center.
+export function zoom_range_by_factor(range, factor, scale_type) {
+    // Guard invalid factors (0/negative/NaN) that would emit Infinity/NaN into axis state
+    if (!Number.isFinite(factor) || factor <= 0)
+        return range;
+    const { to, from } = axis_transform(scale_type);
+    const [t0, t1] = [to(range[0]), to(range[1])];
+    const center = (t0 + t1) / 2;
+    const half_span = (t1 - t0) / factor / 2;
+    return [from(center - half_span), from(center + half_span)];
+}
+// Coerce a scale.invert result (number, or Date for time scales) to an epoch number
+export const to_epoch_num = (val) => val instanceof Date ? val.getTime() : val;
+// Remove window drag/pan listeners and reset the body cursor. Call from onDestroy:
+// a component unmounting mid-drag would otherwise leak its listeners and leave the
+// cursor stuck (the mouseup that normally cleans up never fires after unmount).
+export function remove_drag_listeners(move_handlers, up_handlers) {
+    if (typeof window === `undefined`)
+        return;
+    for (const handler of move_handlers) {
+        window.removeEventListener(`mousemove`, handler);
+    }
+    for (const handler of up_handlers) {
+        window.removeEventListener(`mouseup`, handler);
+    }
+    document.body.style.cursor = ``;
+}
+// Sorted [min, max] from two scalar bounds (rect-zoom inverts drag start/end,
+// which arrive in either order depending on drag direction)
+export const sorted_range = (a, b) => [Math.min(a, b), Math.max(a, b)];
+// Strict per-bound equality of two [min, max] ranges
+export const vec2_equal = (a, b) => a[0] === b[0] && a[1] === b[1];
+// True when all four axis ranges match. The range-sync effects use this to skip
+// no-op writes that would otherwise re-trigger the effect and loop.
+export const axis_ranges_equal = (a, b) => vec2_equal(a.x, b.x) &&
+    vec2_equal(a.x2, b.x2) &&
+    vec2_equal(a.y, b.y) &&
+    vec2_equal(a.y2, b.y2);
+// Merge each axis's explicit range over its auto range (per-bound: a null bound
+// falls back to the auto value). Returns null if any resolved bound is non-finite so
+// the caller can skip the sync - writing NaN breaks scales and, since NaN !== NaN,
+// makes the change comparison never settle (an infinite effect loop).
+export function resolve_axis_ranges(axes, auto) {
+    const resolve = (axis, fallback) => [
+        axis.range?.[0] ?? fallback[0],
+        axis.range?.[1] ?? fallback[1],
+    ];
+    const next = {
+        x: resolve(axes.x, auto.x),
+        x2: resolve(axes.x2, auto.x2),
+        y: resolve(axes.y, auto.y),
+        y2: resolve(axes.y2, auto.y2),
+    };
+    for (const [lo, hi] of [next.x, next.x2, next.y, next.y2]) {
+        if (!Number.isFinite(lo) || !Number.isFinite(hi))
+            return null;
+    }
+    return next;
+}
+// Threshold for distinguishing pinch-zoom from pan in touch gestures
+// Scale change > this value triggers zoom instead of pan
+export const PINCH_ZOOM_THRESHOLD = 0.1;
+// Minimum start distance (px) between two touches to treat the gesture as a valid pinch.
+// Guards curr_dist / start_dist scale from blowing up on near-coincident touches
+export const MIN_TOUCH_DISTANCE_PIXELS = 10;
+// Helper to check if range is the default [0, 1] sentinel (no data)
+// Note: min === 0 handles -0 correctly since -0 === 0 in JavaScript
+const is_default_range = ([min, max]) => min === 0 && max === 1;
+// Adopt the new data range, unless all series were hidden (sentinel [0, 1] fallback).
+// NOTE: [0, 1] is the "no data" sentinel - when all series are hidden, auto ranges
+// fall back to [0, 1]. Actual data spanning exactly [0, 1] is a rare edge case.
+export function expand_range_if_needed(current, new_range) {
+    // Guard against NaN/Infinity - prefer valid range, fall back to sentinel [0, 1] if both invalid
+    const current_valid = all_finite(current);
+    const new_valid = all_finite(new_range);
+    if (!current_valid && !new_valid)
+        return { range: [0, 1], changed: true };
+    if (!new_valid)
+        return { range: current, changed: false };
+    if (!current_valid)
+        return { range: new_range, changed: true };
+    // When all series are hidden, auto ranges fall back to [0, 1] sentinel.
+    // Don't shrink to that — preserve the current view so it doesn't jump.
+    if (!is_default_range(current) && is_default_range(new_range)) {
+        return { range: current, changed: false };
+    }
+    // Otherwise adopt the new range directly (both expand and shrink)
+    const changed = new_range[0] !== current[0] || new_range[1] !== current[1];
+    return { range: new_range, changed };
+}

package/dist/plot/{layout.d.ts → core/layout.d.ts}

@@ -6,6 +6,7 @@ export type Sides = {
     r?: number;
 };
 export declare const LABEL_GAP_DEFAULT = 30;
+export declare function y2_axis_label_x(axis: AxisConfig, width: number, pad_r: number, max_tick_width: number): number;
 export declare const filter_padding: (padding: Partial<Sides> | undefined | null, defaults: Required<Sides>) => Required<Sides>;
 export declare function measure_text_width(text: string, font?: string): number;
 export declare function measure_full_footprint(el: HTMLElement): {

package/dist/plot/{layout.js → core/layout.js}

@@ -1,7 +1,15 @@
-import { format_value } from '../labels';
-import { euclidean_dist } from '../math';
+import { format_value } from '../../labels';
+import { euclidean_dist } from '../../math';
 // Default gap between tick labels and axis labels
 export const LABEL_GAP_DEFAULT = 30;
+// X position for a right-side (y2) axis label: past the plot edge plus tick shift and
+// measured tick-label width (both zero when tick labels render inside the plot)
+export function y2_axis_label_x(axis, width, pad_r, max_tick_width) {
+    const inside = axis.tick?.label?.inside ?? false;
+    const tick_shift = inside ? 0 : (axis.tick?.label?.shift?.x ?? 0) + 8;
+    const label_offset = (inside ? 0 : max_tick_width) + LABEL_GAP_DEFAULT + (axis.label_shift?.x ?? 0);
+    return width - pad_r + tick_shift + label_offset;
+}
 // Filter undefined values from padding to prevent overriding defaults when spreading
 // Guards against undefined/null padding inputs (common for optional props)
 export const filter_padding = (padding, defaults) => ({
@@ -157,10 +165,9 @@ export function sample_series_obstacle_points(pixel_points, draws_line, step) {
             const n_samples = Math.floor(Math.hypot(point.x - prev.x, point.y - prev.y) / step);
             for (let idx = 1; idx < n_samples; idx++) {
                 const frac = idx / n_samples;
-                obstacles.push({
-                    x: prev.x + (point.x - prev.x) * frac,
-                    y: prev.y + (point.y - prev.y) * frac,
-                });
+                const x = prev.x + (point.x - prev.x) * frac;
+                const y = prev.y + (point.y - prev.y) * frac;
+                obstacles.push({ x, y });
             }
         }
         prev = point;
@@ -254,8 +261,9 @@ export function compute_element_placement(config) {
             const min_distance = min_distance_sq === Infinity ? 0 : Math.sqrt(min_distance_sq);
             // Corner preference: use element's actual corner (not center) for distance
             // This ensures a wide element at the left edge gets proper corner credit
-            const elem_right = cand_x + element_size.width;
-            const elem_bottom = cand_y + element_size.height;
+            // (measured footprint, same as cand_rect — not the element_size fallback)
+            const elem_right = cand_x + elem_width;
+            const elem_bottom = cand_y + elem_height;
             // Distance from element's matching corner to each plot corner
             const min_corner_dist = Math.min(euclidean_dist([cand_x, cand_y], [plot_left, plot_top]), // top-left
             euclidean_dist([elem_right, cand_y], [plot_right, plot_top]), // top-right

package/dist/plot/{reference-line.d.ts → core/reference-line.d.ts}

@@ -2,7 +2,7 @@ import type { RefLine, RefLineValue } from './types';
 export type IndexedRefLine = RefLine & {
     idx: number;
 };
-export declare function index_ref_lines(ref_lines: RefLine[] | undefined): IndexedRefLine[];
+export declare const index_ref_lines: (ref_lines: RefLine[] | undefined) => IndexedRefLine[];
 export interface RefLinesByZIndex {
     below_grid: IndexedRefLine[];
     below_lines: IndexedRefLine[];

package/dist/plot/{reference-line.js → core/reference-line.js}

@@ -1,9 +1,7 @@
 // Create indexed ref_lines, filtering out invisible ones
-export function index_ref_lines(ref_lines) {
-    return (ref_lines ?? [])
-        .filter((line) => line.visible !== false)
-        .map((line, idx) => ({ ...line, idx }));
-}
+export const index_ref_lines = (ref_lines) => (ref_lines ?? [])
+    .filter((line) => line.visible !== false)
+    .map((line, idx) => ({ ...line, idx }));
 // Map z-index type values to object keys
 const Z_INDEX_KEY_MAP = {
     'below-grid': `below_grid`,
@@ -158,31 +156,18 @@ export function resolve_line_endpoints(ref_line, { x_min, x_max, y_min, y_max, }
             }
         }
         if (!handled_as_vertical) {
-            // Clip line to y bounds
-            let x1 = x_min;
-            let x2 = x_max;
-            let y1 = slope * x_min + intercept;
-            let y2 = slope * x_max + intercept;
-            if (slope === 0) {
-                if (y1 < y_min || y1 > y_max)
-                    return null;
-            }
-            else {
-                // Clip each endpoint to y bounds
-                const clip_y = (x, y, bound) => y < y_min || y > y_max ? [(bound - intercept) / slope, bound] : [x, y];
-                [x1, y1] = clip_y(x1, y1, y1 < y_min ? y_min : y_max);
-                [x2, y2] = clip_y(x2, y2, y2 < y_min ? y_min : y_max);
-                // If both endpoints clipped to same point, line is entirely outside bounds
-                if (x1 === x2 && y1 === y2)
-                    return null;
-            }
-            // Ensure consistent ordering before applying span constraints
-            const [x_lo, x_hi] = x1 <= x2 ? [x1, x2] : [x2, x1];
-            const [y_lo, y_hi] = y1 <= y2 ? [y1, y2] : [y2, y1];
-            [x1_data, x2_data] = apply_x_span(x_lo, x_hi);
-            [y1_data, y2_data] = apply_y_span(y_lo, y_hi);
-            if (x1_data > x_max || x2_data < x_min)
+            // Intersect bounds with span constraints, then clip the line segment spanning the
+            // clipped x-extent to that rect — keeps endpoints paired on y = slope·x + intercept
+            const [x_lo, x_hi] = apply_x_span(x_min, x_max);
+            const [y_lo, y_hi] = apply_y_span(y_min, y_max);
+            if (x_lo > x_hi || y_lo > y_hi)
+                return null;
+            const [y_at_lo, y_at_hi] = [slope * x_lo + intercept, slope * x_hi + intercept];
+            const seg = clip_segment_to_rect(x_lo, y_at_lo, x_hi, y_at_hi, x_lo, x_hi, y_lo, y_hi);
+            // Degenerate (single-point) result means the line only grazes a corner
+            if (!seg || (seg[0] === seg[2] && seg[1] === seg[3]))
                 return null;
+            [x1_data, y1_data, x2_data, y2_data] = seg;
         }
     }
     else if (line_type === `segment`) {
@@ -243,19 +228,21 @@ export function calculate_annotation_position(x1, y1, x2, y2, annotation) {
         // Perpendicular vector (normalized)
         const nx = -dy / len;
         const ny = dx / len;
+        let sign;
         if (side === `above` || side === `below`) {
             // In SVG, y increases downward. Flip sign if 'above' and perpendicular points down (ny > 0),
             // or if 'below' and perpendicular points up (ny <= 0), to ensure offset is in correct direction
-            const sign = (side === `above`) === ny > 0 ? -1 : 1;
-            perp_x = sign * nx * gap;
-            perp_y = sign * ny * gap;
+            sign = (side === `above`) === ny > 0 ? -1 : 1;
         }
         else {
-            // left = perpendicular to the "left" of direction vector, right = opposite
-            const sign = side === `left` ? 1 : -1;
-            perp_x = sign * nx * gap;
-            perp_y = sign * ny * gap;
+            // left/right offset to the side of the line in screen space (right -> +x, left -> -x), stable
+            // regardless of endpoint order — vertical ref lines are stored bottom->top, which flips the
+            // perpendicular. Horizontal lines (nx == 0) fall back to right = up (-y), left = down (+y).
+            const want_right = side === `right`;
+            sign = Math.abs(nx) > 1e-9 ? (want_right ? 1 : -1) * Math.sign(nx) : want_right ? -1 : 1;
         }
+        perp_x = sign * nx * gap;
+        perp_y = sign * ny * gap;
     }
     const final_x = base_x + perp_x + offset_x;
     const final_y = base_y + perp_y + offset_y;

package/dist/plot/{scales.d.ts → core/scales.d.ts}

@@ -1,5 +1,5 @@
-import type { D3ColorSchemeName, D3InterpolateName } from '../colors';
-import type { Point, ScaleType, TimeInterval } from './';
+import type { D3ColorSchemeName, D3InterpolateName } from '../../colors';
+import type { Point, ScaleType, TimeInterval } from '..';
 import type { ScaleContinuousNumeric, ScaleTime } from 'd3-scale';
 export type TicksOption = number | number[] | TimeInterval | Record<number, string>;
 export interface ArcsinhScale {

package/dist/plot/{scales.js → core/scales.js}

@@ -1,5 +1,5 @@
-import * as math from '../math';
-import { get_arcsinh_threshold, get_scale_type_name, is_time_scale } from './types';
+import * as math from '../../math';
+import { get_arcsinh_threshold, get_scale_type_name, is_time_scale, } from './types';
 import { extent, range } from 'd3-array';
 import { scaleLinear, scaleLog, scaleSequential, scaleSequentialLog, scaleTime, } from 'd3-scale';
 import * as d3_sc from 'd3-scale-chromatic';
@@ -83,9 +83,8 @@ export function scale_arcsinh(threshold = 1) {
     return scale;
 }
 // Generate nice tick values for arcsinh scale
-// Strategy: symmetric around zero when possible, with powers of 10 for large values
-// Note: For small count values (1 or 2) on mixed ranges, zero takes priority as the
-// most important tick. E.g., count=1 yields [0], count=2 yields [0] plus one boundary.
+// Strategy: symmetric around zero when possible, with powers of 10 for large values.
+// On mixed ranges, count=1 yields just [0]; count>=2 yields zero plus symmetric powers per side.
 export function generate_arcsinh_ticks(min, max, threshold = 1, count = 10) {
     // Guard against invalid/non-positive threshold to prevent division issues
     const safe_threshold = Math.max(threshold, Number.EPSILON);
@@ -101,9 +100,10 @@ export function generate_arcsinh_ticks(min, max, threshold = 1, count = 10) {
             .map((tick) => -tick)
             .toReversed();
     }
-    // Mixed range: symmetric ticks around zero (includes_zero is always true here)
-    // For very small counts, we prioritize zero as the most meaningful tick
-    const half_count = Math.floor((count - 1) / 2);
+    // Mixed range: symmetric ticks around zero (includes_zero is always here). Split the budget
+    // across both sides (zero is shared/free) so e.g. count=4 yields ~5 ticks (0, ±a, ±b) rather
+    // than collapsing to 3 — matching how linear/log colorbars render a similar count.
+    const half_count = Math.floor(count / 2);
     const ticks = [0];
     // Add positive ticks
     const pos_ticks = generate_positive_arcsinh_ticks(0, hi, safe_threshold, half_count);
@@ -111,19 +111,6 @@ export function generate_arcsinh_ticks(min, max, threshold = 1, count = 10) {
     // Add negative ticks (mirror of positive)
     const neg_ticks = generate_positive_arcsinh_ticks(0, -lo, safe_threshold, half_count);
     ticks.push(...neg_ticks.filter((tick) => tick > 0).map((tick) => -tick));
-    // For small counts where half_count is 0 or 1, ensure at least some boundary coverage
-    if (half_count <= 1 && count >= 2) {
-        // Add boundaries if not already present and we have room
-        const sorted = dedupe_sort(ticks);
-        if (sorted.length < count) {
-            // Snap the larger-magnitude boundary to a clean power of 10 (raw extremes would render
-            // as long unrounded labels); keeps some coverage for very small tick counts.
-            const boundary = Math.abs(hi) >= Math.abs(lo) ? hi : lo;
-            const nice = Math.sign(boundary) * 10 ** Math.floor(Math.log10(Math.abs(boundary)));
-            if (Number.isFinite(nice) && nice !== 0 && !sorted.includes(nice))
-                ticks.push(nice);
-        }
-    }
     return dedupe_sort(ticks);
 }
 // Generate positive arcsinh ticks (helper)
@@ -133,46 +120,49 @@ function generate_positive_arcsinh_ticks(min, max, threshold, count) {
     if (count <= 0 || max <= min)
         return [];
     const ticks = [];
-    // For values near threshold, use linear-like spacing
-    // For values >> threshold, use log-like spacing (powers of 10)
+    // Small range near threshold: use linear-like spacing
     if (max <= threshold * 2) {
-        // Small range: use linear ticks
         const step = (max - min) / count;
         for (let idx = 0; idx <= count; idx++) {
             const val = min + step * idx;
             if (val >= min && val <= max)
                 ticks.push(val);
         }
+        return dedupe_sort(ticks);
     }
-    else {
-        // Large range: combine linear near zero with powers of 10.
-        // Domain endpoints are intentionally NOT added as ticks: raw extremes render as long
-        // unrounded labels (e.g. 1325.8239811994677). Powers of 10 plus 2x/5x multiples below
-        // already give clean round ticks; pass axis.ticks/axis.format for custom labels.
-        // Add threshold as a tick if in range
-        if (threshold >= min && threshold <= max)
-            ticks.push(threshold);
-        // Add powers of 10 that are in range
-        const min_power = Math.floor(Math.log10(Math.max(min, threshold / 10)));
-        const max_power = Math.ceil(Math.log10(max));
-        for (let power = min_power; power <= max_power; power++) {
-            const val = Math.pow(10, power);
-            if (val >= min && val <= max)
-                ticks.push(val);
-        }
-        // Add intermediate values (2x, 5x) for sparser regions
-        if (ticks.length < count) {
-            for (let power = min_power; power < max_power; power++) {
-                const base = Math.pow(10, power);
-                for (const mult of [2, 5]) {
-                    const val = base * mult;
-                    if (val >= min && val <= max)
-                        ticks.push(val);
-                }
+    // Large range: log-like spacing via powers of 10.
+    // Domain endpoints are intentionally NOT added as ticks: raw extremes render as long
+    // unrounded labels (e.g. 1325.8239811994677). Powers of 10 plus 2x/5x multiples below
+    // already give clean round ticks; pass axis.ticks/axis.format for custom labels.
+    // Add threshold as a tick if in range
+    if (threshold >= min && threshold <= max)
+        ticks.push(threshold);
+    // Add powers of 10 that are in range. Start at the threshold (not a decade below): values
+    // below it sit in arcsinh's near-linear region and map almost onto 0, so sub-threshold powers
+    // (e.g. ±1 when threshold=10) would pile up on the zero tick and overlap.
+    const min_power = Math.floor(Math.log10(Math.max(min, threshold)));
+    const max_power = Math.ceil(Math.log10(max));
+    for (let power = min_power; power <= max_power; power++) {
+        const val = 10 ** power;
+        if (val >= min && val <= max)
+            ticks.push(val);
+    }
+    // Add intermediate values (2x, 5x) for sparser regions
+    if (ticks.length < count) {
+        for (let power = min_power; power < max_power; power++) {
+            const base = 10 ** power;
+            for (const mult of [2, 5]) {
+                const val = base * mult;
+                if (val >= min && val <= max)
+                    ticks.push(val);
             }
         }
     }
-    return dedupe_sort(ticks);
+    const result = dedupe_sort(ticks);
+    // Respect `count`: surplus small powers sit near zero in arcsinh space (their values map almost
+    // onto 0) and crowd the labels. Keep the largest-magnitude ticks — they anchor the range extent
+    // and are the most spread out — dropping near-zero ones first.
+    return result.length > count ? result.slice(-count) : result;
 }
 // Create a scale function based on type, domain, and range
 // Note: Time scales are handled separately via create_time_scale() since ScaleTime
@@ -182,8 +172,13 @@ export function create_scale(scale_type, domain, output_range) {
     const [min_val, max_val] = domain;
     const type_name = get_scale_type_name(scale_type);
     if (type_name === `log`) {
+        // Clamp BOTH ends to the positive floor: panning shifts ranges linearly, so a
+        // log axis panned past zero can arrive with max <= 0 — an unclamped max makes
+        // every scale output (and invert) NaN, blanking the chart and polluting axis
+        // ranges. A clamped degenerate domain just renders flat and stays recoverable.
+        const lo = Math.max(min_val, math.LOG_EPS);
         return scaleLog()
-            .domain([Math.max(min_val, math.LOG_EPS), max_val])
+            .domain([lo, Math.max(max_val, lo)])
             .range(output_range);
     }
     if (type_name === `arcsinh`) {
@@ -284,15 +279,15 @@ export function get_nice_data_range(points, get_value, limits, scale_type, paddi
             const span = data_max - data_min;
             if (is_time) {
                 const padding_ms = span * padding_factor;
-                data_min = data_min - padding_ms;
-                data_max = data_max + padding_ms;
+                data_min -= padding_ms;
+                data_max += padding_ms;
             }
             else if (type_name === `log`) {
                 const log_min = Math.log10(Math.max(data_min, math.LOG_EPS));
                 const log_max = Math.log10(Math.max(data_max, math.LOG_EPS));
                 const log_span = log_max - log_min;
-                data_min = Math.pow(10, log_min - log_span * padding_factor);
-                data_max = Math.pow(10, log_max + log_span * padding_factor);
+                data_min = 10 ** (log_min - log_span * padding_factor);
+                data_max = 10 ** (log_max + log_span * padding_factor);
             }
             else if (type_name === `arcsinh`) {
                 // Arcsinh: apply padding in arcsinh-transformed space
@@ -307,35 +302,33 @@ export function get_nice_data_range(points, get_value, limits, scale_type, paddi
             else {
                 // Linear scale
                 const padding_abs = span * padding_factor;
-                data_min = data_min - padding_abs;
-                data_max = data_max + padding_abs;
+                data_min -= padding_abs;
+                data_max += padding_abs;
             }
+            // Handle single data point case with fixed relative padding
+        }
+        else if (is_time) {
+            const one_day = 86_400_000; // milliseconds in a day
+            data_min -= one_day;
+            data_max += one_day;
+        }
+        else if (type_name === `log`) {
+            data_min = Math.max(math.LOG_EPS, data_min / 1.1); // 10% multiplicative padding
+            data_max *= 1.1;
+        }
+        else if (type_name === `arcsinh`) {
+            // Arcsinh: 10% padding in transformed space
+            // Guard against extremely small thresholds that could cause precision issues
+            const threshold = Math.max(get_arcsinh_threshold(scale_type), Number.EPSILON);
+            const asinh_val = Math.asinh(data_min / threshold);
+            const padding = Math.abs(asinh_val) * 0.1 || 0.1; // Use 0.1 if transformed value is 0 (i.e. data_min = 0)
+            data_min = Math.sinh(asinh_val - padding) * threshold;
+            data_max = Math.sinh(asinh_val + padding) * threshold;
         }
         else {
-            // Handle single data point case with fixed relative padding
-            if (is_time) {
-                const one_day = 86_400_000; // milliseconds in a day
-                data_min = data_min - one_day;
-                data_max = data_max + one_day;
-            }
-            else if (type_name === `log`) {
-                data_min = Math.max(math.LOG_EPS, data_min / 1.1); // 10% multiplicative padding
-                data_max = data_max * 1.1;
-            }
-            else if (type_name === `arcsinh`) {
-                // Arcsinh: 10% padding in transformed space
-                // Guard against extremely small thresholds that could cause precision issues
-                const threshold = Math.max(get_arcsinh_threshold(scale_type), Number.EPSILON);
-                const asinh_val = Math.asinh(data_min / threshold);
-                const padding = Math.abs(asinh_val) * 0.1 || 0.1; // Use 0.1 if transformed value is 0 (i.e. data_min = 0)
-                data_min = Math.sinh(asinh_val - padding) * threshold;
-                data_max = Math.sinh(asinh_val + padding) * threshold;
-            }
-            else {
-                const padding_abs = data_min === 0 ? 1 : Math.abs(data_min * 0.1); // 10% additive padding, or 1 if value is 0
-                data_min = data_min - padding_abs;
-                data_max = data_max + padding_abs;
-            }
+            const padding_abs = data_min === 0 ? 1 : Math.abs(data_min * 0.1); // 10% additive padding, or 1 if value is 0
+            data_min -= padding_abs;
+            data_max += padding_abs;
         }
     }
     // If time or no range after padding, return the (potentially padded) domain directly
@@ -371,20 +364,26 @@ export function generate_log_ticks(min, max, ticks_option) {
     const range_size = max_power - min_power;
     const extended_min_power = range_size <= 2 ? min_power - 1 : min_power - Math.max(1, Math.floor(range_size / 4));
     const extended_max_power = range_size <= 2 ? max_power + 1 : max_power;
-    const powers = range(extended_min_power, extended_max_power + 1).map((power) => Math.pow(10, power));
+    const powers = range(extended_min_power, extended_max_power + 1).map((power) => 10 ** power);
     // For narrow ranges, include intermediate values
     if (max_power - min_power < 3 && typeof ticks_option === `number` && ticks_option > 5) {
         const detailed_ticks = [];
         powers.forEach((power) => {
             detailed_ticks.push(power);
-            if (power * 2 <= Math.pow(10, extended_max_power))
+            if (power * 2 <= 10 ** extended_max_power)
                 detailed_ticks.push(power * 2);
-            if (power * 5 <= Math.pow(10, extended_max_power))
+            if (power * 5 <= 10 ** extended_max_power)
                 detailed_ticks.push(power * 5);
         });
         return detailed_ticks.filter((tick) => tick >= min && tick <= max);
     }
-    return powers.filter((power) => power >= min && power <= max);
+    const filtered_powers = powers.filter((power) => power >= min && power <= max);
+    if (filtered_powers.length >= 2)
+        return filtered_powers;
+    // Sub-decade domains (e.g. after zoom) have <2 powers of 10 — use d3's mantissa log ticks
+    const tick_count = typeof ticks_option === `number` && ticks_option > 0 ? ticks_option : 5;
+    const fallback = scaleLog().domain([min, max]).ticks(tick_count);
+    return fallback.length > 0 ? fallback : filtered_powers;
 }
 // Get custom label for a tick value if provided, otherwise return null
 export function get_tick_label(tick_value, ticks_option) {

package/dist/plot/core/svg.d.ts

@@ -0,0 +1,2 @@
+export declare function violin_path(grid_px: readonly number[], half_offsets_px: readonly number[], center: number, side: `both` | `positive` | `negative`, orient: (cross: number, val: number) => [number, number]): string;
+export declare function bar_path(x: number, y: number, w: number, h: number, r: number, vertical?: boolean): string;