matterviz 0.4.0 → 0.4.2

package/dist/plot/core/pan-zoom.svelte.js

@@ -0,0 +1,221 @@
+// Shared pan/zoom/touch/drag-rect interaction controller for the 2D plot components
+// (BarPlot, BoxPlot, Histogram, ScatterPlot). Owns the interaction state machine;
+// per-component policy (which axis props to write on rect-zoom, reset semantics)
+// stays in the component via the on_rect_zoom/on_reset/set_range callbacks.
+import { MIN_TOUCH_DISTANCE_PIXELS, pan_range_by_pixels, PINCH_ZOOM_THRESHOLD, remove_drag_listeners, snapshot_ranges, zoom_range_by_factor, } from './interactions';
+const AXES = [`x`, `x2`, `y`, `y2`];
+export function create_pan_zoom(opts) {
+    // Rect-zoom drag state
+    let drag_state = $state({ start: null, current: null, bounds: null });
+    // Pan state
+    let is_focused = $state(false);
+    let shift_held = $state(false);
+    let pan_drag_state = $state(null);
+    let touch_state = $state(null);
+    const cancel_rect_drag = () => {
+        drag_state = { start: null, current: null, bounds: null };
+        if (typeof window !== `undefined`) {
+            window.removeEventListener(`mousemove`, on_window_mouse_move);
+            window.removeEventListener(`mouseup`, on_window_mouse_up);
+            document.body.style.cursor = ``;
+        }
+    };
+    const on_window_mouse_move = (evt) => {
+        if (!drag_state.start || !drag_state.bounds)
+            return;
+        const coords = {
+            x: evt.clientX - drag_state.bounds.left,
+            y: evt.clientY - drag_state.bounds.top,
+        };
+        drag_state.current = coords;
+        const inside_svg = coords.x >= 0 &&
+            coords.x <= drag_state.bounds.width &&
+            coords.y >= 0 &&
+            coords.y <= drag_state.bounds.height;
+        opts.on_drag_move?.(coords, inside_svg);
+    };
+    const on_window_mouse_up = () => {
+        if (drag_state.start && drag_state.current) {
+            // Ignore minuscule drag rects (e.g. accidental clicks)
+            const dx = Math.abs(drag_state.start.x - drag_state.current.x);
+            const dy = Math.abs(drag_state.start.y - drag_state.current.y);
+            if (dx > 5 && dy > 5)
+                opts.on_rect_zoom(drag_state.start, drag_state.current);
+        }
+        cancel_rect_drag();
+    };
+    // Pan/zoom all four axes from an interaction-start snapshot, each in its own
+    // scale's transform space (log axes pan by a constant factor, linear by a shift)
+    const pan_all_axes = (init, dx_px, dy_px) => {
+        const dims = opts.plot_dims();
+        for (const axis of AXES) {
+            const horizontal = axis === `x` || axis === `x2`;
+            opts.set_range(axis, pan_range_by_pixels(init[`initial_${axis}_range`], horizontal ? dx_px : dy_px, horizontal ? dims.width : dims.height, opts.scale_type(axis)));
+        }
+    };
+    const zoom_all_axes = (init, factor) => {
+        for (const axis of AXES) {
+            opts.set_range(axis, zoom_range_by_factor(init[`initial_${axis}_range`], factor, opts.scale_type(axis)));
+        }
+    };
+    // Pan drag handler (drag direction inverted on x for natural pan feel)
+    const on_pan_move = (evt) => {
+        if (!pan_drag_state)
+            return;
+        const sensitivity = opts.pan()?.drag_sensitivity ?? 1;
+        pan_all_axes(pan_drag_state, -(evt.clientX - pan_drag_state.start.x) * sensitivity, (evt.clientY - pan_drag_state.start.y) * sensitivity);
+    };
+    const on_pan_end = () => {
+        pan_drag_state = null;
+        document.body.style.cursor = ``;
+        window.removeEventListener(`mousemove`, on_pan_move);
+        window.removeEventListener(`mouseup`, on_pan_end);
+    };
+    const on_mouse_down = (evt) => {
+        const svg = opts.svg();
+        if (!svg)
+            return;
+        // Shift+drag pans (when enabled); plain drag draws the zoom rect
+        const pan_enabled = opts.pan()?.enabled !== false;
+        if (pan_enabled && evt.shiftKey) {
+            evt.preventDefault();
+            pan_drag_state = {
+                start: { x: evt.clientX, y: evt.clientY },
+                ...snapshot_ranges(opts.ranges()),
+            };
+            document.body.style.cursor = `grabbing`;
+            window.addEventListener(`mousemove`, on_pan_move);
+            window.addEventListener(`mouseup`, on_pan_end);
+            return;
+        }
+        // Cache bounds at drag start so window mousemove can compute relative coords
+        const bounds = svg.getBoundingClientRect();
+        const coords = { x: evt.clientX - bounds.left, y: evt.clientY - bounds.top };
+        drag_state = { start: coords, current: coords, bounds };
+        window.addEventListener(`mousemove`, on_window_mouse_move);
+        window.addEventListener(`mouseup`, on_window_mouse_up);
+        document.body.style.cursor = `crosshair`;
+        evt.preventDefault();
+    };
+    // Wheel handler for pan (requires focus and shift). Use shift_held state
+    // (tracked via window keydown/keyup) for compatibility with synthetic events.
+    const on_wheel = (evt) => {
+        const pan_cfg = opts.pan();
+        if (pan_cfg?.enabled === false || !is_focused || !shift_held)
+            return;
+        evt.preventDefault();
+        const dims = opts.plot_dims();
+        const sensitivity = pan_cfg?.wheel_sensitivity ?? 1;
+        const ranges = opts.ranges();
+        // Pan along the dominant wheel direction
+        if (Math.abs(evt.deltaX) > Math.abs(evt.deltaY)) {
+            const dx = evt.deltaX * sensitivity;
+            opts.set_range(`x`, pan_range_by_pixels(ranges.x, dx, dims.width, opts.scale_type(`x`)));
+            opts.set_range(`x2`, pan_range_by_pixels(ranges.x2, dx, dims.width, opts.scale_type(`x2`)));
+        }
+        else {
+            const dy = evt.deltaY * sensitivity;
+            opts.set_range(`y`, pan_range_by_pixels(ranges.y, dy, dims.height, opts.scale_type(`y`)));
+            opts.set_range(`y2`, pan_range_by_pixels(ranges.y2, dy, dims.height, opts.scale_type(`y2`)));
+        }
+    };
+    // Touch handlers for pinch-zoom and two-finger pan
+    const on_touch_start = (evt) => {
+        const pan_cfg = opts.pan();
+        const touch_enabled = pan_cfg?.enabled !== false && pan_cfg?.touch_enabled !== false;
+        if (!touch_enabled || evt.touches.length !== 2)
+            return;
+        evt.preventDefault();
+        touch_state = {
+            start_touches: Array.from(evt.touches).map((touch) => ({
+                x: touch.clientX,
+                y: touch.clientY,
+            })),
+            ...snapshot_ranges(opts.ranges()),
+        };
+    };
+    const on_touch_move = (evt) => {
+        if (!touch_state || evt.touches.length !== 2)
+            return;
+        evt.preventDefault();
+        const [t1, t2] = Array.from(evt.touches);
+        const [s1, s2] = touch_state.start_touches;
+        // Calculate center movement for pan
+        const start_center = { x: (s1.x + s2.x) / 2, y: (s1.y + s2.y) / 2 };
+        const curr_center = { x: (t1.clientX + t2.clientX) / 2, y: (t1.clientY + t2.clientY) / 2 };
+        const dx = curr_center.x - start_center.x;
+        const dy = curr_center.y - start_center.y;
+        // Calculate pinch scale (curr/start so spread = zoom in, pinch = zoom out)
+        const start_dist = Math.hypot(s2.x - s1.x, s2.y - s1.y);
+        // ignore near-coincident touches so curr_dist / start_dist can't blow up the scale
+        if (start_dist < MIN_TOUCH_DISTANCE_PIXELS)
+            return;
+        const curr_dist = Math.hypot(t2.clientX - t1.clientX, t2.clientY - t1.clientY);
+        const scale = curr_dist / start_dist;
+        // Pinch zoom about the view center if scale changed significantly, else pan
+        if (Math.abs(scale - 1) > PINCH_ZOOM_THRESHOLD && scale > Number.EPSILON) {
+            zoom_all_axes(touch_state, scale);
+        }
+        else
+            pan_all_axes(touch_state, -dx, dy);
+    };
+    const on_touch_end = () => {
+        touch_state = null;
+    };
+    // SVG keydown: Escape cancels an in-flight rect drag, Enter/Space resets the view.
+    // Target check keeps focusable plot children (bars, points) from triggering a reset
+    // when their own Enter/Space activation bubbles up.
+    const on_key_down = (evt) => {
+        if (evt.target !== evt.currentTarget)
+            return;
+        if (evt.key === `Escape` && drag_state.start)
+            cancel_rect_drag();
+        if ([`Enter`, ` `].includes(evt.key)) {
+            evt.preventDefault();
+            opts.on_reset();
+        }
+    };
+    return {
+        get drag_start() {
+            return drag_state.start;
+        },
+        get drag_current() {
+            return drag_state.current;
+        },
+        get is_pan_dragging() {
+            return pan_drag_state !== null;
+        },
+        get cursor() {
+            if (pan_drag_state)
+                return `grabbing`;
+            return shift_held && opts.pan()?.enabled !== false ? `grab` : `crosshair`;
+        },
+        set_focused: (focused) => {
+            is_focused = focused;
+        },
+        on_mouse_down,
+        on_wheel,
+        on_touch_start,
+        on_touch_move,
+        on_touch_end,
+        on_key_down,
+        on_window_key_down: (evt) => {
+            if (evt.key === `Shift`)
+                shift_held = true;
+        },
+        on_window_key_up: (evt) => {
+            if (evt.key === `Shift`)
+                shift_held = false;
+        },
+        reset_view: () => opts.on_reset(),
+        // Tear down any window listeners + cursor override if the component unmounts
+        // mid-drag (mouseup/panend would otherwise never fire, leaking listeners and a
+        // stuck cursor). Safe during SSR teardown, where window/document don't exist.
+        destroy: () => {
+            remove_drag_listeners([on_window_mouse_move, on_pan_move], [on_window_mouse_up, on_pan_end]);
+            drag_state = { start: null, current: null, bounds: null };
+            pan_drag_state = null;
+            touch_state = null;
+        },
+    };
+}

package/dist/plot/core/placed-tween.svelte.d.ts

@@ -0,0 +1,21 @@
+import { Tween, type TweenOptions } from 'svelte/motion';
+type Point = {
+    x: number;
+    y: number;
+};
+export declare function create_placed_tween(opts: {
+    placement: () => Point | null;
+    dims: () => {
+        width: number;
+        height: number;
+    };
+    responsive: () => boolean;
+    element: () => Element | null | undefined;
+    tween?: () => TweenOptions<Point> | undefined;
+    suspended?: () => boolean;
+    manual_position?: () => Point | null;
+}): {
+    coords: Tween<Point>;
+    set_locked: (locked: boolean) => void;
+};
+export {};

package/dist/plot/core/placed-tween.svelte.js

@@ -0,0 +1,68 @@
+// Tweened position for auto-placed plot elements (legend, colorbar) with hover lock,
+// debounced release, resize detection, and stability gating
+import { untrack } from 'svelte';
+import { Tween } from 'svelte/motion';
+const HOVER_DEBOUNCE_MS = 300;
+// Tweened position for an auto-placed plot element with the stability gating shared
+// by BarPlot/BoxPlot/Histogram/ScatterPlot legends: snap (no animation) on first
+// placement, follow container resizes, stay put while hovered (debounced hover lock),
+// and track placement continuously only when `responsive`. Creates $effects, so it
+// must be called during component init.
+export function create_placed_tween(opts) {
+    // Hover lock: placement updates pause while the element is hovered; release is
+    // debounced so brief mouse-outs don't cause jumps
+    let hover_locked = $state(false);
+    let unlock_timeout = null;
+    const set_locked = (locked) => {
+        // Always clear any pending unlock so rapid calls don't queue multiple timeouts
+        if (unlock_timeout)
+            clearTimeout(unlock_timeout);
+        if (locked)
+            hover_locked = true;
+        else
+            unlock_timeout = setTimeout(() => (hover_locked = false), HOVER_DEBOUNCE_MS);
+    };
+    // Plain (untracked) flags: only read/written inside the effect below, and outcomes
+    // don't depend on re-running when they flip
+    let prev_dims = null;
+    let has_initial_placement = false;
+    const coords = new Tween({ x: 0, y: 0 }, untrack(() => ({ duration: 400, ...opts.tween?.() })));
+    // Clear pending unlock timeout to prevent state updates after unmount
+    $effect(() => () => {
+        if (unlock_timeout)
+            clearTimeout(unlock_timeout);
+    });
+    // Update position with stability checks
+    $effect(() => {
+        const { width, height } = opts.dims();
+        if (!width || !height)
+            return;
+        if (opts.suspended?.())
+            return;
+        const manual = opts.manual_position?.();
+        if (manual) {
+            // Immediate update (no animation) for manually positioned elements
+            void coords.set({ x: manual.x, y: manual.y }, { duration: 0 });
+            return;
+        }
+        const placement = opts.placement();
+        if (!placement)
+            return;
+        // Track dimensions for resize detection
+        const dims_changed = !prev_dims || prev_dims.width !== width || prev_dims.height !== height;
+        if (dims_changed)
+            prev_dims = { width, height };
+        // Only update if: resize occurred, OR (not hover-locked AND (responsive OR not
+        // yet initially placed))
+        const should_update = dims_changed || (!hover_locked && (opts.responsive() || !has_initial_placement));
+        if (should_update) {
+            void coords.set({ x: placement.x, y: placement.y }, 
+            // Skip animation on initial placement to avoid jump from (0, 0)
+            has_initial_placement ? undefined : { duration: 0 });
+            // Only lock position after the element has an actual measured size
+            if (opts.element())
+                has_initial_placement = true;
+        }
+    });
+    return { coords, set_locked };
+}

package/dist/plot/core/reference-line.d.ts

@@ -1,3 +1,4 @@
+import type { Vec2, Vec4 } from '../../math';
 import type { RefLine, RefLineValue } from './types';
 export type IndexedRefLine = RefLine & {
     idx: number;
@@ -11,18 +12,18 @@ export interface RefLinesByZIndex {
 }
 export declare function group_ref_lines_by_z(lines: IndexedRefLine[]): RefLinesByZIndex;
 export declare function normalize_value(value: RefLineValue): number;
-export declare const normalize_point: (point: [RefLineValue, RefLineValue]) => [number, number];
-export declare function resolve_line_endpoints(ref_line: RefLine, { x_min, x_max, y_min, y_max, }: {
+export declare const normalize_point: (point: [RefLineValue, RefLineValue]) => Vec2;
+export declare function resolve_line_endpoints(ref_line: RefLine, bounds: {
     x_min: number;
     x_max: number;
     y_min: number;
     y_max: number;
-}, { x_scale, x2_scale, y_scale, y2_scale, }: {
+}, scales: {
     x_scale: (val: number) => number;
     x2_scale?: (val: number) => number;
     y_scale: (val: number) => number;
     y2_scale?: (val: number) => number;
-}): [number, number, number, number] | null;
+}): Vec4 | null;
 interface AnnotationPosition {
     x: number;
     y: number;
@@ -45,13 +46,12 @@ export interface Scene3DParams {
     scene_x: number;
     scene_y: number;
     scene_z: number;
-    x_range: [number, number];
-    y_range: [number, number];
-    z_range: [number, number];
+    x_range: Vec2;
+    y_range: Vec2;
+    z_range: Vec2;
 }
-/** Apply span constraints or use full range as fallback */
-export declare const span_or: (span: [number | null, number | null] | undefined, range: [number, number]) => [number, number];
-export declare function normalize_to_scene(value: number, [min_val, max_val]: [number, number], scene_size: number): number;
+export declare const span_or: (span: [number | null, number | null] | undefined, range: Vec2) => Vec2;
+export declare function normalize_to_scene(value: number, [min_val, max_val]: Vec2, scene_size: number): number;
 export declare function create_to_threejs(params: Scene3DParams): (user_x: number, user_y: number, user_z: number) => {
     x: number;
     y: number;

package/dist/plot/core/reference-line.js

@@ -90,7 +90,9 @@ function clip_segment_to_rect(p1x, p1y, p2x, p2y, x_min, x_max, y_min, y_max) {
 }
 // Compute the screen coordinates for a reference line
 // Returns [x1, y1, x2, y2] in pixel coordinates, or null if line is not visible
-export function resolve_line_endpoints(ref_line, { x_min, x_max, y_min, y_max, }, { x_scale, x2_scale, y_scale, y2_scale, }) {
+export function resolve_line_endpoints(ref_line, bounds, scales) {
+    const { x_min, x_max, y_min, y_max } = bounds;
+    const { x_scale, x2_scale, y_scale, y2_scale } = scales;
     // Determine which scales to use based on axis assignment
     const active_x_scale = ref_line.x_axis === `x2` && x2_scale ? x2_scale : x_scale;
     const active_y_scale = ref_line.y_axis === `y2` && y2_scale ? y2_scale : y_scale;
@@ -103,10 +105,8 @@ export function resolve_line_endpoints(ref_line, { x_min, x_max, y_min, y_max, }
     // Relative to data coordinate conversion
     const to_data_x = (rel) => x_min + rel * (x_max - x_min);
     const to_data_y = (rel) => y_min + rel * (y_max - y_min);
-    let x1_data = 0;
-    let y1_data = 0;
-    let x2_data = 0;
-    let y2_data = 0;
+    let [x1_data, x2_data] = [0, 0];
+    let [y1_data, y2_data] = [0, 0];
     const line_type = ref_line.type;
     if (line_type === `horizontal`) {
         const y_val = normalize_value(ref_line.y);
@@ -210,7 +210,7 @@ export function calculate_annotation_position(x1, y1, x2, y2, annotation) {
     // Calculate base position with edge padding applied along line direction
     const dx = x2 - x1;
     const dy = y2 - y1;
-    const len = Math.sqrt(dx * dx + dy * dy);
+    const len = Math.hypot(dx, dy);
     let base_x = x1 + frac * dx;
     let base_y = y1 + frac * dy;
     // Apply edge padding to pull text slightly inward from plot boundaries
@@ -276,7 +276,7 @@ export function calculate_annotation_position(x1, y1, x2, y2, annotation) {
     }
     return { x: final_x, y: final_y, text_anchor, dominant_baseline, rotation };
 }
-/** Apply span constraints or use full range as fallback */
+// Apply span constraints or use full range as fallback
 export const span_or = (span, range) => [span?.[0] ?? range[0], span?.[1] ?? range[1]];
 // Normalize a data value to scene coordinates (centered around 0)
 export function normalize_to_scene(value, [min_val, max_val], scene_size) {

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

@@ -1,13 +1,13 @@
-import type { D3ColorSchemeName, D3InterpolateName } from '../../colors';
-import type { Point, ScaleType, TimeInterval } from '..';
+import type { Vec2 } from '../../math';
+import type { ColorScaleConfig, Point, ScaleType, SizeScaleConfig, TimeInterval } from '..';
 import type { ScaleContinuousNumeric, ScaleTime } from 'd3-scale';
 export type TicksOption = number | number[] | TimeInterval | Record<number, string>;
 export interface ArcsinhScale {
     (value: number | Date): number;
-    domain(): [number, number];
-    domain(domain: [number, number]): ArcsinhScale;
-    range(): [number, number];
-    range(range: [number, number]): ArcsinhScale;
+    domain(): Vec2;
+    domain(domain: Vec2): ArcsinhScale;
+    range(): Vec2;
+    range(range: Vec2): ArcsinhScale;
     invert(value: number): number;
     copy(): ArcsinhScale;
     ticks(count?: number): number[];
@@ -16,33 +16,48 @@ export interface ArcsinhScale {
 export type PlotScaleFn = ScaleContinuousNumeric<number, number> | ScaleTime<number, number> | ArcsinhScale;
 export declare function scale_arcsinh(threshold?: number): ArcsinhScale;
 export declare function generate_arcsinh_ticks(min: number, max: number, threshold?: number, count?: number): number[];
-export declare function create_scale(scale_type: ScaleType, domain: [number, number], output_range: [number, number]): ScaleContinuousNumeric<number, number> | ArcsinhScale;
-export declare const create_time_scale: (domain: [number, number], output_range: [number, number]) => ScaleTime<number, number, never>;
-export declare function generate_ticks(domain: [number, number], scale_type: ScaleType, ticks_option: TicksOption | undefined, scale_fn: PlotScaleFn, // D3 scale function with .ticks() method
+export declare function create_scale(scale_type: ScaleType, domain: Vec2, output_range: Vec2): ScaleContinuousNumeric<number, number> | ArcsinhScale;
+export declare function create_axis_scales<A extends {
+    scale_type?: ScaleType;
+}>(axes: {
+    x: A;
+    x2: A;
+    y: A;
+    y2: A;
+}, ranges: {
+    x: Vec2;
+    x2: Vec2;
+    y: Vec2;
+    y2: Vec2;
+}, pad: {
+    l: number;
+    r: number;
+    t: number;
+    b: number;
+}, width: number, height: number): {
+    x: ArcsinhScale | ScaleContinuousNumeric<number, number, never>;
+    x2: ArcsinhScale | ScaleContinuousNumeric<number, number, never>;
+    y: ArcsinhScale | ScaleContinuousNumeric<number, number, never>;
+    y2: ArcsinhScale | ScaleContinuousNumeric<number, number, never>;
+};
+export declare const create_time_scale: (domain: Vec2, output_range: Vec2) => ScaleTime<number, number, never>;
+export declare function generate_ticks(domain: Vec2, scale_type: ScaleType, ticks_option: TicksOption | undefined, scale_fn: PlotScaleFn, // D3 scale function with .ticks() method
 options?: {
     format?: string;
     default_count?: number;
     interval_padding?: number;
 }): number[];
-export declare function calculate_domain(values: number[], scale_type?: ScaleType): [number, number];
-export declare function get_nice_data_range(points: Point[], get_value: (p: Point) => number, limits: [number | null, number | null], scale_type: ScaleType, padding_factor: number, is_time?: boolean): [number, number];
+export declare function calculate_domain(values: number[], scale_type?: ScaleType): Vec2;
+export declare function get_nice_data_range(points: Point[], get_value: (point: Point) => number, limits: [number | null, number | null], scale_type: ScaleType, padding_factor: number, is_time?: boolean): Vec2;
 export declare function generate_log_ticks(min: number, max: number, ticks_option?: TicksOption): number[];
 export declare function get_tick_label(tick_value: number, ticks_option: TicksOption | undefined): string | null;
-export declare function create_color_scale(color_scale_config: {
-    type?: ScaleType;
-    scheme?: D3ColorSchemeName | D3InterpolateName;
-    value_range?: [number, number];
-} | string, auto_color_range: [number, number]): ((value: number) => string) & {
+export declare function create_color_scale(color_scale_config: ColorScaleConfig | string, auto_color_range: Vec2): ((value: number) => string) & {
     domain: {
-        (): [number, number];
-        (new_domain: [number, number]): ((value: number) => string) & /*elided*/ any;
+        (): Vec2;
+        (new_domain: Vec2): ((value: number) => string) & /*elided*/ any;
     };
 };
-export declare function create_size_scale(config: {
-    type?: ScaleType;
-    radius_range?: [number, number];
-    value_range?: [number, number];
-}, all_size_values: (number | null)[]): import("d3-scale").ScaleLinear<number, number, never> | (((value: number) => number) & {
-    domain: () => [number, number];
-    range: () => [number, number];
+export declare function create_size_scale(config: SizeScaleConfig, all_size_values: (number | null)[]): import("d3-scale").ScaleLinear<number, number, never> | (((value: number) => number) & {
+    domain: () => Vec2;
+    range: () => Vec2;
 });

package/dist/plot/core/scales.js

@@ -1,5 +1,7 @@
 import * as math from '../../math';
-import { get_arcsinh_threshold, get_scale_type_name, is_time_scale, } from './types';
+import { get_d3_interpolator } from '../../colors';
+import { clamp01 } from '../../utils';
+import { get_arcsinh_threshold, get_scale_type_name, is_time_scale, SCALE_DEFAULTS, } 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';
@@ -33,8 +35,8 @@ export function scale_arcsinh(threshold = 1) {
         // Linear interpolation in transformed space
         if (t_max === t_min)
             return (r_min + r_max) / 2;
-        const t = (t_val - t_min) / (t_max - t_min);
-        return r_min + t * (r_max - r_min);
+        const frac = (t_val - t_min) / (t_max - t_min);
+        return r_min + frac * (r_max - r_min);
     });
     // Domain getter/setter
     scale.domain = function (domain) {
@@ -63,8 +65,8 @@ export function scale_arcsinh(threshold = 1) {
         // Inverse linear interpolation
         if (r_max === r_min)
             return (d_min + d_max) / 2;
-        const t = (value - r_min) / (r_max - r_min);
-        const t_val = t_min + t * (t_max - t_min);
+        const frac = (value - r_min) / (r_max - r_min);
+        const t_val = t_min + frac * (t_max - t_min);
         // Inverse transform
         return sinh_transform(t_val);
     };
@@ -188,6 +190,19 @@ export function create_scale(scale_type, domain, output_range) {
     // For 'time' or 'linear', return linear scale (time scales need create_time_scale())
     return scaleLinear().domain(domain).range(output_range);
 }
+// Build the four axis scales for a 2D plot in one call: x/x2 share the horizontal pixel span,
+// y/y2 the inverted vertical one. Shared by BarPlot/BoxPlot/Histogram (identical layout math).
+export function create_axis_scales(axes, ranges, pad, width, height) {
+    const x_px = [pad.l, width - pad.r];
+    const y_px = [height - pad.b, pad.t];
+    const scale = (axis, domain, px) => create_scale(axis.scale_type ?? `linear`, domain, px);
+    return {
+        x: scale(axes.x, ranges.x, x_px),
+        x2: scale(axes.x2, ranges.x2, x_px),
+        y: scale(axes.y, ranges.y, y_px),
+        y2: scale(axes.y2, ranges.y2, y_px),
+    };
+}
 // Create a time scale for time-based data
 export const create_time_scale = (domain, output_range) => scaleTime()
     .domain([new Date(domain[0]), new Date(domain[1])])
@@ -224,15 +239,17 @@ options = {}) {
         const ticks = time_scale.ticks(count);
         if (typeof ticks_option === `string`) {
             if (ticks_option === `month`) {
-                return ticks.filter((d) => d.getDate() === 1).map((d) => d.getTime());
+                return ticks
+                    .filter((date) => date.getDate() === 1)
+                    .map((date) => date.getTime());
             }
             if (ticks_option === `year`) {
                 return ticks
-                    .filter((d) => d.getMonth() === 0 && d.getDate() === 1)
-                    .map((d) => d.getTime());
+                    .filter((date) => date.getMonth() === 0 && date.getDate() === 1)
+                    .map((date) => date.getTime());
             }
         }
-        return ticks.map((d) => d.getTime());
+        return ticks.map((date) => date.getTime());
     }
     const type_name = get_scale_type_name(scale_type);
     // Log scale ticks
@@ -261,9 +278,13 @@ export function calculate_domain(values, scale_type = `linear`) {
     if (min_val === undefined || max_val === undefined)
         return [0, 1];
     const type_name = get_scale_type_name(scale_type);
-    // Only log scale needs domain clamping to positive values
-    // Arcsinh and linear can handle any values
-    return type_name === `log` ? [Math.max(min_val, math.LOG_EPS), max_val] : [min_val, max_val];
+    // log clamps to positive (arcsinh/linear take any value); clamp BOTH ends so all-negative
+    // data can't leave max <= the clamped min and invert/collapse the scale
+    if (type_name === `log`) {
+        const lo = Math.max(min_val, math.LOG_EPS);
+        return [lo, Math.max(max_val, lo)];
+    }
+    return [min_val, max_val];
 }
 // Advanced domain calculation with padding and nice boundaries (from ScatterPlot)
 export function get_nice_data_range(points, get_value, limits, scale_type, padding_factor, is_time = false) {
@@ -272,6 +293,13 @@ export function get_nice_data_range(points, get_value, limits, scale_type, paddi
     let data_min = min ?? min_ext ?? 0;
     let data_max = max ?? max_ext ?? 1;
     const type_name = get_scale_type_name(scale_type);
+    const can_snap_zero = min_ext !== undefined &&
+        max_ext !== undefined &&
+        min_ext < max_ext &&
+        !is_time &&
+        type_name !== `log`;
+    const snap_zero_min = can_snap_zero && min === null && min_ext === 0;
+    const snap_zero_max = can_snap_zero && max === null && max_ext === 0;
     // Apply padding *only if* limits were NOT provided
     if (min === null && max === null && points.length > 0) {
         if (data_min !== data_max) {
@@ -337,7 +365,7 @@ export function get_nice_data_range(points, get_value, limits, scale_type, paddi
     // Use D3's nice() to create pretty boundaries
     // For arcsinh, we don't use D3's nice() - just return padded domain
     if (type_name === `arcsinh`) {
-        return [data_min, data_max];
+        return [snap_zero_min ? 0 : data_min, snap_zero_max ? 0 : data_max];
     }
     // Create the scale with the *padded* data domain
     const scale = type_name === `log`
@@ -348,7 +376,7 @@ export function get_nice_data_range(points, get_value, limits, scale_type, paddi
         : scaleLinear().domain([data_min, data_max]);
     scale.nice();
     const [nice_min = data_min, nice_max = data_max] = scale.domain();
-    return [nice_min, nice_max];
+    return [snap_zero_min ? 0 : nice_min, snap_zero_max ? 0 : nice_max];
 }
 // Generate logarithmic ticks (from ScatterPlot)
 export function generate_log_ticks(min, max, ticks_option) {
@@ -398,16 +426,16 @@ export function create_color_scale(color_scale_config, auto_color_range) {
     const candidate_interpolator = Object.entries(d3_sc).find(([key]) => key === scheme)?.[1];
     const interpolator = typeof candidate_interpolator === `function`
         ? candidate_interpolator
-        : d3_sc.interpolateViridis;
+        : get_d3_interpolator(SCALE_DEFAULTS.scheme);
     const [min_val, max_val] = (typeof color_scale_config === `string` ? undefined : color_scale_config.value_range) ??
         auto_color_range;
     const scale_type = typeof color_scale_config === `string` ? undefined : color_scale_config.type;
     const type_name = get_scale_type_name(scale_type);
     if (type_name === `log`) {
-        return scaleSequentialLog(interpolator).domain([
-            Math.max(min_val, math.LOG_EPS),
-            Math.max(max_val, min_val * 1.1),
-        ]);
+        // clamp both ends (like create_scale): all-negative data otherwise yields an inverted
+        // [LOG_EPS, max<0] domain that maps every input to undefined
+        const lo = Math.max(min_val, math.LOG_EPS);
+        return scaleSequentialLog(interpolator).domain([lo, Math.max(max_val, lo * 1.1)]);
     }
     if (type_name === `arcsinh`) {
         // For arcsinh color scale, we create a custom scale that wraps the interpolator
@@ -434,7 +462,7 @@ function create_arcsinh_color_scale(interpolator, initial_domain, threshold) {
         const t_val = Math.asinh(value / safe_threshold);
         // Normalize to [0, 1]
         const normalized = t_max === t_min ? 0.5 : (t_val - t_min) / (t_max - t_min);
-        return interpolator(Math.max(0, Math.min(1, normalized)));
+        return interpolator(clamp01(normalized));
     });
     // Domain getter/setter for D3 compatibility - returns same scale instance
     scale.domain = function (new_domain) {
@@ -447,7 +475,7 @@ function create_arcsinh_color_scale(interpolator, initial_domain, threshold) {
 }
 // Create a size scale function from configuration
 export function create_size_scale(config, all_size_values) {
-    const [min_radius, max_radius] = config.radius_range ?? [2, 10];
+    const [min_radius, max_radius] = config.radius_range ?? SCALE_DEFAULTS.radius;
     const auto_range = all_size_values.length > 0
         ? extent(all_size_values.filter((val) => val !== null))
         : [0, 1];

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

@@ -1,2 +1,3 @@
-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;
+import type { Vec2 } from '../../math';
+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) => Vec2): string;
 export declare function bar_path(x: number, y: number, w: number, h: number, r: number, vertical?: boolean): string;