svelteplot 0.0.1-alpha.9 → 0.1.3-next.3

package/dist/helpers/arrowPath.js

@@ -0,0 +1,129 @@
+/**
+ * @license
+ * Copyright 2020-2023 Observable, Inc.
+ *
+ * Permission to use, copy, modify, and/or distribute this software for any purpose
+ * with or without fee is hereby granted, provided that the above copyright notice
+ * and this permission notice appear in all copies.
+ */
+import { ascending, descending } from 'd3-array';
+const RADIANS = Math.PI / 180;
+export function arrowPath(x1, y1, x2, y2, insetStart, insetEnd, headAngle, headLength, bend, strokeWidth, sweep) {
+    // The angle between the arrow’s shaft and one of the wings; the “head”
+    // angle between the wings is twice this value.
+    const wingAngle = (headAngle * RADIANS) / 2;
+    // The length of the arrowhead’s “wings” (the line segments that extend from
+    // the end point) relative to the stroke width.
+    const wingScale = headLength / 1.5;
+    // The start ⟨x1,y1⟩ and end ⟨x2,y2⟩ points may be inset, and the
+    // ending line angle may be altered for inset swoopy arrows.
+    const lineLength = Math.hypot(x2 - x1, y2 - y1);
+    if (lineLength <= insetStart + insetEnd)
+        return null;
+    let lineAngle = Math.atan2(y2 - y1, x2 - x1);
+    // We don’t allow the wing length to be too large relative to the
+    // length of the arrow. (Plot.vector allows arbitrarily large
+    // wings, but that’s okay since vectors are usually small.)
+    const headLength_ = Math.min(wingScale * strokeWidth, lineLength / 3);
+    // When bending, the offset between the straight line between the two points
+    // and the outgoing tangent from the start point. (Also the negative
+    // incoming tangent to the end point.) This must be within ±π/2. A positive
+    // angle will produce a clockwise curve; a negative angle will produce a
+    // counterclockwise curve; zero will produce a straight line.
+    const bendAngle = sweep(x1, y1, x2, y2) * bend * RADIANS;
+    // The radius of the circle that intersects with the two endpoints
+    // and has the specified bend angle.
+    const r = Math.hypot(lineLength / Math.tan(bendAngle), lineLength) / 2;
+    // Apply insets.
+    if (insetStart || insetEnd) {
+        if (r < 1e5) {
+            // For inset swoopy arrows, compute the circle-circle
+            // intersection between a circle centered around the
+            // respective arrow endpoint and the center of the circle
+            // segment that forms the shaft of the arrow.
+            const sign = Math.sign(bendAngle);
+            const [cx, cy] = pointPointCenter([x1, y1], [x2, y2], r, sign);
+            if (insetStart) {
+                [x1, y1] = circleCircleIntersect([cx, cy, r], [x1, y1, insetStart], -sign * Math.sign(insetStart));
+            }
+            // For the end inset, rotate the arrowhead so that it aligns
+            // with the truncated end of the arrow. Since the arrow is a
+            // segment of the circle centered at ⟨cx,cy⟩, we can compute
+            // the angular difference to the new endpoint.
+            if (insetEnd) {
+                const [x, y] = circleCircleIntersect([cx, cy, r], [x2, y2, insetEnd], sign * Math.sign(insetEnd));
+                lineAngle += Math.atan2(y - cy, x - cx) - Math.atan2(y2 - cy, x2 - cx);
+                (x2 = x), (y2 = y);
+            }
+        }
+        else {
+            // For inset straight arrows, offset along the straight line.
+            const dx = x2 - x1, dy = y2 - y1, d = Math.hypot(dx, dy);
+            if (insetStart)
+                (x1 += (dx / d) * insetStart), (y1 += (dy / d) * insetStart);
+            if (insetEnd)
+                (x2 -= (dx / d) * insetEnd), (y2 -= (dy / d) * insetEnd);
+        }
+    }
+    // The angle of the arrow as it approaches the endpoint, and the
+    // angles of the adjacent wings. Here “left” refers to if the
+    // arrow is pointing up.
+    const endAngle = lineAngle + bendAngle;
+    const leftAngle = endAngle + wingAngle;
+    const rightAngle = endAngle - wingAngle;
+    // The endpoints of the two wings.
+    const x3 = x2 - headLength_ * Math.cos(leftAngle);
+    const y3 = y2 - headLength_ * Math.sin(leftAngle);
+    const x4 = x2 - headLength_ * Math.cos(rightAngle);
+    const y4 = y2 - headLength_ * Math.sin(rightAngle);
+    // If the radius is very large (or even infinite, as when the bend
+    // angle is zero), then render a straight line.
+    const a = r < 1e5 ? `A${r},${r} 0,0,${bendAngle > 0 ? 1 : 0} ` : `L`;
+    const h = headLength_ ? `M${x3},${y3}L${x2},${y2}L${x4},${y4}` : '';
+    return `M${x1},${y1}${a}${x2},${y2}${h}`;
+}
+// Returns the center of a circle that goes through the two given points ⟨ax,ay⟩
+// and ⟨bx,by⟩ and has radius r. There are two such points; use the sign +1 or
+// -1 to choose between them. Returns [NaN, NaN] if r is too small.
+function pointPointCenter([ax, ay], [bx, by], r, sign) {
+    const dx = bx - ax, dy = by - ay, d = Math.hypot(dx, dy);
+    const k = (sign * Math.sqrt(r * r - (d * d) / 4)) / d;
+    return [(ax + bx) / 2 - dy * k, (ay + by) / 2 + dx * k];
+}
+// Given two circles, one centered at ⟨ax,ay⟩ with radius ar, and the other
+// centered at ⟨bx,by⟩ with radius br, returns a point at which the two circles
+// intersect. There are typically two such points; use the sign +1 or -1 to
+// chose between them. Returns [NaN, NaN] if there is no intersection.
+// https://mathworld.wolfram.com/Circle-CircleIntersection.html
+function circleCircleIntersect([ax, ay, ar], [bx, by, br], sign) {
+    const dx = bx - ax, dy = by - ay, d = Math.hypot(dx, dy);
+    const x = (dx * dx + dy * dy - br * br + ar * ar) / (2 * d);
+    const y = sign * Math.sqrt(ar * ar - x * x);
+    return [ax + (dx * x + dy * y) / d, ay + (dy * x - dx * y) / d];
+}
+export function constant(x) {
+    return () => x;
+}
+// Validates the specified required string against the allowed list of keywords.
+export function keyword(input, name, allowed) {
+    const i = `${input}`.toLowerCase();
+    if (!allowed.includes(i))
+        throw new Error(`invalid ${name}: ${input}`);
+    return i;
+}
+export function maybeSweep(sweep = 1) {
+    if (typeof sweep === 'number')
+        return constant(Math.sign(sweep));
+    if (typeof sweep === 'function')
+        return (x1, y1, x2, y2) => Math.sign(sweep(x1, y1, x2, y2));
+    switch (keyword(sweep, 'sweep', ['+x', '-x', '+y', '-y'])) {
+        case '+x':
+            return (x1, y1, x2) => ascending(x1, x2);
+        case '-x':
+            return (x1, y1, x2) => descending(x1, x2);
+        case '+y':
+            return (x1, y1, x2, y2) => ascending(y1, y2);
+        case '-y':
+            return (x1, y1, x2, y2) => descending(y1, y2);
+    }
+}

package/dist/helpers/autoProjection.d.ts

@@ -0,0 +1,19 @@
+export declare function namedProjection(projection: string): {
+    type: ({ width, height, rotate, precision, clip }: {
+        width: any;
+        height: any;
+        rotate: any;
+        precision?: number | undefined;
+        clip: any;
+    }) => any;
+    aspectRatio: number;
+} | {
+    type: () => {
+        stream: (stream: any) => any;
+    };
+} | {
+    type: () => {
+        invert(x: any, y: any): any[];
+        stream(s: import("d3-geo").GeoStream): import("d3-geo").GeoTransformPrototype & import("d3-geo").GeoStream;
+    };
+};

package/dist/helpers/autoProjection.js

@@ -0,0 +1,87 @@
+import { geoAlbers, geoAlbersUsa, geoAzimuthalEqualArea, geoAzimuthalEquidistant, geoConicConformal, geoConicEqualArea, geoConicEquidistant, geoEqualEarth, geoEquirectangular, geoGnomonic, geoMercator, geoOrthographic, geoStereographic, geoTransverseMercator, geoTransform } from 'd3-geo';
+import { constant } from './index.js';
+const identity = constant({ stream: (stream) => stream });
+const reflectY = constant({
+    ...geoTransform({
+        point(x, y) {
+            this.stream.point(x, -y);
+        }
+    }),
+    invert(x, y) {
+        return [x, -y];
+    }
+});
+const pi = Math.PI;
+const tau = 2 * pi;
+export function namedProjection(projection) {
+    switch (`${projection}`.toLowerCase()) {
+        case 'albers-usa':
+            return scaleProjection(geoAlbersUsa, 0.7463, 0.4673);
+        case 'albers':
+            return conicProjection(geoAlbers, 0.7463, 0.4673);
+        case 'azimuthal-equal-area':
+            return scaleProjection(geoAzimuthalEqualArea, 4, 4);
+        case 'azimuthal-equidistant':
+            return scaleProjection(geoAzimuthalEquidistant, tau, tau);
+        case 'conic-conformal':
+            return conicProjection(geoConicConformal, tau, tau);
+        case 'conic-equal-area':
+            return conicProjection(geoConicEqualArea, 6.1702, 2.9781);
+        case 'conic-equidistant':
+            return conicProjection(geoConicEquidistant, 7.312, 3.6282);
+        case 'equal-earth':
+            return scaleProjection(geoEqualEarth, 5.4133, 2.6347);
+        case 'equirectangular':
+            return scaleProjection(geoEquirectangular, tau, pi);
+        case 'gnomonic':
+            return scaleProjection(geoGnomonic, 3.4641, 3.4641);
+        case 'identity':
+            return { type: identity };
+        case 'reflect-y':
+            return { type: reflectY };
+        case 'mercator':
+            return scaleProjection(geoMercator, tau, tau);
+        case 'orthographic':
+            return scaleProjection(geoOrthographic, 2, 2);
+        case 'stereographic':
+            return scaleProjection(geoStereographic, 2, 2);
+        case 'transverse-mercator':
+            return scaleProjection(geoTransverseMercator, tau, tau);
+        default:
+            throw new Error(`unknown projection type: ${projection}`);
+    }
+}
+function scaleProjection(createProjection, kx, ky) {
+    return {
+        type: ({ width, height, rotate, precision = 0.15, clip }) => {
+            const projection = createProjection();
+            if (precision != null)
+                projection.precision?.(precision);
+            if (rotate != null)
+                projection.rotate?.(rotate);
+            if (typeof clip === 'number')
+                projection.clipAngle?.(clip);
+            projection.scale(Math.min(width / kx, height / ky));
+            projection.translate([width / 2, height / 2]);
+            return projection;
+        },
+        aspectRatio: ky / kx
+    };
+}
+function conicProjection(createProjection, kx, ky) {
+    const { type, aspectRatio } = scaleProjection(createProjection, kx, ky);
+    return {
+        type: (options) => {
+            const { parallels, domain, width, height } = options;
+            const projection = type(options);
+            if (parallels != null) {
+                projection.parallels(parallels);
+                if (domain === undefined) {
+                    projection.fitSize([width, height], { type: 'Sphere' });
+                }
+            }
+            return projection;
+        },
+        aspectRatio
+    };
+}

package/dist/helpers/autoScales.d.ts

@@ -0,0 +1,23 @@
+import type { ColorScaleOptions, PlotDefaults, PlotOptions, RawValue, ScaleName, ScaleOptions, ScaleType } from '../types.js';
+export declare function autoScale({ name, type, domain, scaleOptions, plotOptions, plotWidth, plotHeight, plotHasFilledDotMarks, plotDefaults }: {
+    name: ScaleName;
+    type: ScaleType;
+    domain: RawValue[];
+    scaleOptions: ScaleOptions;
+    plotOptions: PlotOptions;
+    plotWidth: number;
+    plotHeight: number;
+    plotHasFilledDotMarks: boolean;
+    plotDefaults: PlotDefaults;
+}): Record<string, (v: any) => void>;
+export declare function autoScaleColor({ type, domain, scaleOptions, plotOptions, plotWidth, plotHeight, plotHasFilledDotMarks, plotDefaults }: {
+    name: ScaleName;
+    type: ScaleType;
+    domain: RawValue[];
+    scaleOptions: ColorScaleOptions;
+    plotOptions: PlotOptions;
+    plotWidth: number;
+    plotHeight: number;
+    plotHasFilledDotMarks: boolean;
+    plotDefaults: PlotDefaults;
+}): any;

package/dist/helpers/autoScales.js

@@ -0,0 +1,203 @@
+import { scaleBand, scaleDiverging, scaleDivergingLog, scaleDivergingPow, scaleDivergingSqrt, scaleDivergingSymlog, scaleLinear, scaleLog, scaleOrdinal, scalePoint, scalePow, scaleQuantile, scaleQuantize, scaleSequential, scaleSequentialLog, scaleSequentialPow, scaleSequentialQuantile, scaleSequentialSqrt, scaleSequentialSymlog, scaleSqrt, scaleSymlog, scaleThreshold, scaleTime } from 'd3-scale';
+import { range as d3Range } from 'd3-array';
+import { categoricalSchemes, isCategoricalScheme, isDivergingScheme, isOrdinalScheme, isQuantitativeScheme, ordinalScheme, quantitativeScheme } from './colors.js';
+import callWithProps from './callWithProps.js';
+import { interpolateLab, interpolateRound } from 'd3-interpolate';
+import { coalesce, maybeNumber } from './index.js';
+import { getLogTicks } from './getLogTicks.js';
+const Scales = {
+    point: scalePoint,
+    band: scaleBand,
+    linear: scaleLinear,
+    time: scaleTime,
+    sqrt: scaleSqrt,
+    pow: scalePow,
+    log: scaleLog,
+    symlog: scaleSymlog,
+    ordinal: scaleOrdinal,
+    sequential: scaleSequential,
+    diverging: scaleDiverging
+};
+const SequentialScales = {
+    linear: scaleSequential,
+    log: scaleSequentialLog,
+    symlog: scaleSequentialSymlog,
+    pow: scaleSequentialPow,
+    sqrt: scaleSequentialSqrt,
+    'quantile-cont': scaleSequentialQuantile
+};
+const DivergingScales = {
+    diverging: scaleDiverging,
+    'diverging-log': scaleDivergingLog,
+    'diverging-symlog': scaleDivergingSymlog,
+    'diverging-pow': scaleDivergingPow,
+    'diverging-sqrt': scaleDivergingSqrt
+};
+const ThresholdScales = {
+    // custom thresholds
+    threshold: scaleThreshold,
+    // quantile scales
+    quantize: scaleQuantize,
+    quantile: scaleQuantile
+};
+export function autoScale({ name, type, domain, scaleOptions, plotOptions, plotWidth, plotHeight, plotHasFilledDotMarks, plotDefaults }) {
+    let fn;
+    let range;
+    range =
+        scaleOptions?.range ||
+            getScaleRange(name, scaleOptions, plotOptions, plotWidth, plotHeight, plotHasFilledDotMarks);
+    if (scaleOptions.reverse)
+        range.reverse();
+    const niceTickCount = name === 'x' || name === 'y'
+        ? Math.round(Math.abs(range[0] - range[1]) / scaleOptions.tickSpacing)
+        : undefined;
+    const scaleProps = {
+        domain,
+        range,
+        ...((type === 'linear' || type === 'log') && scaleOptions.nice
+            ? {
+                nice: scaleOptions.nice ? niceTickCount : true
+            }
+            : {}),
+        ...(type === 'linear'
+            ? {
+                clamp: scaleOptions.clamp,
+                ...(scaleOptions.round ? { interpolate: interpolateRound } : {})
+            }
+            : {}),
+        ...(type === 'log'
+            ? {
+                base: scaleOptions.base || 10
+            }
+            : {}),
+        ...(type === 'symlog'
+            ? {
+                constant: scaleOptions.constant || 1
+            }
+            : {}),
+        ...(type === 'band' || type === 'point'
+            ? {
+                align: scaleOptions.align,
+                padding: maybeNumber(coalesce(scaleOptions.padding, plotOptions.padding, 0.15))
+            }
+            : {})
+    };
+    fn = callWithProps(Scales[type], [], scaleProps);
+    if (type === 'band' || type === 'point') {
+        fn.ticks = () => domain;
+    }
+    if (type === 'log') {
+        fn.ticks = (count) => getLogTicks(domain, count);
+    }
+    else if (type === 'symlog') {
+        const maxabs = Math.max(Math.abs(domain[0]), Math.abs(domain[1]));
+        fn.ticks = (count) => {
+            const ticks = getLogTicks([scaleProps.constant + 1, maxabs], count / 2);
+            return [...ticks.map((t) => -t).reverse(), 0, ...ticks];
+        };
+    }
+    return fn;
+}
+export function autoScaleColor({ type, domain, scaleOptions, plotOptions, plotWidth, plotHeight, plotHasFilledDotMarks, plotDefaults }) {
+    let fn;
+    let range;
+    // special treatment for color scales
+    const { scheme, interpolate, pivot, n = type === 'threshold' ? domain.length + 1 : 9 } = scaleOptions;
+    if (type === 'categorical' || type === 'ordinal') {
+        // categorical
+        const scheme_ = scheme || plotDefaults.categoricalColorScheme;
+        // categorical scale
+        range = Array.isArray(scheme_)
+            ? scheme_
+            : isCategoricalScheme(scheme_)
+                ? categoricalSchemes.get(scheme_)
+                : ordinalScheme(scheme_)(domain.length);
+        fn = scaleOrdinal().domain(domain).range(range);
+    }
+    else if (!!ThresholdScales[type]) {
+        const scheme_ = scheme || plotDefaults.colorScheme;
+        range =
+            Array.isArray(scheme_) && (scaleOptions.n == null || scaleOptions.n === scheme_.length)
+                ? scheme_.slice(0)
+                : Array.isArray(scheme_)
+                    ? // interpolate n colors from custom colors
+                        d3Range(n)
+                            .map((i) => i / (n - 1))
+                            .map(scaleLinear(scheme_.map((c, i) => i / (scheme_.length - 1)), scheme_).interpolate(interpolateLab))
+                    : interpolate
+                        ? d3Range(n).map((i) => interpolate(i / (n - 1)))
+                        : isOrdinalScheme(scheme_)
+                            ? ordinalScheme(scheme_)(n)
+                            : null;
+        if (range == null) {
+            throw new Error('unknown ordinal scheme ' + scheme_);
+        }
+        if (scaleOptions.reverse)
+            range = range.toReversed();
+        fn = ThresholdScales[type]().domain(domain).range(range);
+    }
+    else if (!!SequentialScales[type] || !!DivergingScales[type]) {
+        // continuous color scale
+        const scale = SequentialScales[type] || DivergingScales[type];
+        const scheme_ = scheme || plotDefaults.colorScheme;
+        if (interpolate) {
+            // user-defined interpolation function [0, 1] -> color
+            fn = scale(domain, interpolate);
+        }
+        else if (Array.isArray(scheme_)) {
+            // custom user-defined colors to interpolate from
+            const step = 1 / (scheme_.length - 1);
+            fn = scale(domain, (type === 'linear' ? scaleLinear : scaleLog)(d3Range(0, 1 + step / 2, step), scheme_).interpolate(interpolateLab));
+        }
+        else if (!!DivergingScales[type] ||
+            (scaleOptions.type === 'auto' && isDivergingScheme(scheme_))) {
+            // diverging color scheme, explicit or auto-detected
+            const maxabs = Math.max(Math.abs(domain[0]), Math.abs(domain[1]));
+            const domain_ = pivot != null ? [domain[0], pivot, domain[1]] : [-maxabs, 0, maxabs];
+            fn = scale(domain_, quantitativeScheme(scheme_));
+        }
+        else if (!!SequentialScales[type] ||
+            (scaleOptions.type === 'auto' && isQuantitativeScheme(scheme_))) {
+            // sequential
+            fn = scale(domain, quantitativeScheme(scheme_));
+        }
+        if (type === 'log') {
+            fn.ticks = (count) => getLogTicks(domain, count);
+        }
+    }
+    if (!fn) {
+        console.warn('color problem', type);
+        // problem
+        fn = () => 'red';
+        fn.range = () => ['red'];
+    }
+    return fn;
+}
+function getScaleRange(name, scaleOptions, plotOptions, plotWidth, plotHeight, plotHasFilledDotMarks) {
+    const { marginTop, marginLeft, inset } = plotOptions;
+    const { insetLeft, insetRight, insetTop, insetBottom } = scaleOptions;
+    return name === 'opacity'
+        ? [0, 1]
+        : name === 'length'
+            ? [0, 20]
+            : name === 'x'
+                ? [
+                    marginLeft + (insetLeft || inset || 0),
+                    marginLeft + plotWidth - (insetRight || inset || 0)
+                ]
+                : name === 'y'
+                    ? [
+                        plotHeight + marginTop - (insetBottom || inset || 0),
+                        marginTop + (insetTop || inset || 0)
+                    ]
+                    : name === 'r'
+                        ? [0, 10]
+                        : name === 'symbol'
+                            ? // Plot is smart enough to pick different default shapes depending on wether
+                                // or not there are filled dot marks in the plot, so we have to pass this
+                                // information all the way here
+                                plotHasFilledDotMarks
+                                    ? ['circle', 'cross', 'diamond', 'square', 'star', 'triangle', 'wye']
+                                    : ['circle', 'plus', 'times', 'triangle2', 'asterisk', 'square2', 'diamond2']
+                            : [];
+}

package/dist/helpers/autoTicks.d.ts

@@ -0,0 +1,3 @@
+import type { RawValue, ScaleType } from '../types.js';
+export declare function maybeInterval(interval: null | number | string | (<T>(d: T) => T)): any;
+export declare function autoTicks(type: ScaleType, ticks: RawValue[], interval: string | number | null, domain: RawValue[], scaleFn: any, count: number): any;

package/dist/helpers/autoTicks.js

@@ -0,0 +1,40 @@
+import { maybeTimeInterval } from './time.js';
+import { range as rangei } from 'd3-array';
+export function maybeInterval(interval) {
+    if (interval == null)
+        return;
+    if (typeof interval === 'number') {
+        if (0 < interval && interval < 1 && Number.isInteger(1 / interval))
+            interval = -1 / interval;
+        const n = Math.abs(interval);
+        return interval < 0
+            ? {
+                floor: (d) => Math.floor(d * n) / n,
+                round: (d) => Math.round(d * n) / n,
+                offset: (d) => (d * n + 1) / n, // note: no optional step for simplicity
+                range: (lo, hi) => rangei(Math.ceil(lo * n), hi * n).map((x) => x / n)
+            }
+            : {
+                floor: (d) => Math.floor(d / n) * n,
+                round: (d) => Math.round(d / n) * n,
+                offset: (d) => d + n, // note: no optional step for simplicity
+                range: (lo, hi) => rangei(Math.ceil(lo / n), hi / n).map((x) => x * n)
+            };
+    }
+    if (typeof interval === 'string')
+        return maybeTimeInterval(interval);
+    if (typeof interval.floor !== 'function')
+        throw new Error('invalid interval; missing floor method');
+    if (typeof interval.offset !== 'function')
+        throw new Error('invalid interval; missing offset method');
+    return interval;
+}
+export function autoTicks(type, ticks, interval, domain, scaleFn, count) {
+    return ticks
+        ? ticks
+        : interval
+            ? maybeInterval(interval, type).range(domain[0], domain[1])
+            : typeof scaleFn.ticks === 'function'
+                ? scaleFn.ticks(count)
+                : [];
+}

package/dist/helpers/autoTimeFormat.d.ts

@@ -1,2 +1,2 @@
-import type { Channel } from '../classes/Channel.svelte';
-export default function autoTimeFormat(x: Channel, plotWidth: number): (date: Date) => string[];
+import type { Scale } from '../classes/Scale.svelte.js';
+export default function autoTimeFormat(x: Scale, plotWidth: number, plotLocale: string): (date: Date) => string[];

package/dist/helpers/autoTimeFormat.js

@@ -1,9 +1,38 @@
-import dayjs from 'dayjs';
-import { isDate } from 'underscore';
-export default function autoTimeFormat(x, plotWidth) {
+import { isDate } from './typeChecks';
+const DATE_TIME = {
+    hour: 'numeric',
+    minute: 'numeric',
+    month: 'short',
+    day: 'numeric'
+};
+const autoFormatDateTime = (locale) => {
+    const format = new Intl.DateTimeFormat(locale, DATE_TIME).format;
+    return (date) => format(date).replace(', ', '\n');
+};
+const DAY_MONTH = {
+    month: 'short',
+    day: 'numeric'
+};
+const autoFormatDayMonth = (locale) => {
+    const format = new Intl.DateTimeFormat(locale, DAY_MONTH).format;
+    return (date) => format(date).replace(' ', '\n');
+};
+const MONTH_YEAR = {
+    month: 'short',
+    year: 'numeric'
+};
+const autoFormatMonthYear = (locale) => {
+    const format = new Intl.DateTimeFormat(locale, MONTH_YEAR).format;
+    return (date) => format(date).replace(' ', '\n');
+};
+export default function autoTimeFormat(x, plotWidth, plotLocale) {
     const daysPer100Px = ((toNumber(x.domain[1]) - toNumber(x.domain[0])) / plotWidth / 864e5) * 100;
-    const format = daysPer100Px < 1 ? 'HH:mm\nMMM DD' : daysPer100Px < 30 ? 'DD\nMMM' : 'MMM\nYYYY';
-    return (date) => dayjs(date).format(format).split('\n');
+    const format = daysPer100Px < 1
+        ? autoFormatDateTime(plotLocale)
+        : daysPer100Px < 30
+            ? autoFormatDayMonth(plotLocale)
+            : autoFormatMonthYear(plotLocale);
+    return (date) => format(date).split('\n');
 }
 function toNumber(d) {
     return isDate(d) ? d.getTime() : +d;

package/dist/helpers/callWithProps.d.ts

@@ -0,0 +1,8 @@
+import type { RawValue } from '../types.js';
+type Setter = (v: any) => void;
+/**
+ * Helper function to call a D3 "function class" while also calling
+ * porperty setter functions on the result.
+ */
+export default function (d3func: () => Record<string, Setter>, args: RawValue[], props?: Record<string, RawValue>): Record<string, Setter>;
+export {};

package/dist/helpers/callWithProps.js

@@ -0,0 +1,13 @@
+/**
+ * Helper function to call a D3 "function class" while also calling
+ * porperty setter functions on the result.
+ */
+export default function (d3func, args, props = {}) {
+    const res = d3func(...args);
+    for (const [key, val] of Object.entries(props)) {
+        if (typeof res[key] !== 'function')
+            throw new Error(`function ${key} does not exist`);
+        res[key](val);
+    }
+    return res;
+}

package/dist/helpers/colors.js

@@ -1,9 +1,22 @@
 import { interpolateBlues, interpolateBrBG, interpolateBuGn, interpolateBuPu, interpolateGnBu, interpolateGreens, interpolateGreys, interpolateOranges, interpolateOrRd, interpolatePiYG, interpolatePRGn, interpolatePuBu, interpolatePuBuGn, interpolatePuOr, interpolatePuRd, interpolatePurples, interpolateRdBu, interpolateRdGy, interpolateRdPu, interpolateRdYlBu, interpolateRdYlGn, interpolateReds, interpolateSpectral, interpolateYlGn, interpolateYlGnBu, interpolateYlOrBr, interpolateYlOrRd, interpolateTurbo, interpolateViridis, interpolateMagma, interpolateInferno, interpolatePlasma, interpolateCividis, interpolateCubehelixDefault, interpolateWarm, interpolateCool, interpolateRainbow, interpolateSinebow, schemeAccent, schemeBlues, schemeBrBG, schemeBuGn, schemeBuPu, schemeCategory10, schemeDark2, schemeGnBu, schemeGreens, schemeGreys, schemeOranges, schemeOrRd, schemePaired, schemePastel1, schemePastel2, schemePiYG, schemePRGn, schemePuBu, schemePuBuGn, schemePuOr, schemePuRd, schemePurples, schemeRdBu, schemeRdGy, schemeRdPu, schemeRdYlBu, schemeRdYlGn, schemeReds, schemeSet1, schemeSet2, schemeSet3, schemeSpectral, schemeTableau10, schemeYlGn, schemeYlGnBu, schemeYlOrBr, schemeYlOrRd } from 'd3-scale-chromatic';
 import { quantize } from 'd3-interpolate';
+const schemeObservable10 = [
+    '#4269d0',
+    '#efb118',
+    '#ff725c',
+    '#6cc5b0',
+    '#3ca951',
+    '#ff8ab7',
+    '#a463f2',
+    '#97bbf5',
+    '#9c6b4e',
+    '#9498a0'
+];
 export const categoricalSchemes = new Map([
     ['accent', schemeAccent],
     ['category10', schemeCategory10],
     ['dark2', schemeDark2],
+    ['observable10', schemeObservable10],
     ['paired', schemePaired],
     ['pastel1', schemePastel1],
     ['pastel2', schemePastel2],
@@ -32,6 +45,7 @@ const ordinalSchemes = new Map([
     // sequential (single-hue)
     ['blues', scheme9(schemeBlues, interpolateBlues)],
     ['greens', scheme9(schemeGreens, interpolateGreens)],
+    ['grays', scheme9(schemeGreys, interpolateGreys)],
     ['greys', scheme9(schemeGreys, interpolateGreys)],
     ['oranges', scheme9(schemeOranges, interpolateOranges)],
     ['purples', scheme9(schemePurples, interpolatePurples)],
@@ -63,7 +77,7 @@ const ordinalSchemes = new Map([
     ['sinebow', schemeicyclical(interpolateSinebow)]
 ]);
 export function isOrdinalScheme(scheme) {
-    return ordinalSchemes.has(scheme);
+    return ordinalSchemes.has(`${scheme}`.toLowerCase());
 }
 function scheme9(scheme, interpolate) {
     return (n) => {
@@ -143,6 +157,7 @@ const quantitativeSchemes = new Map([
     // sequential (single-hue)
     ['blues', interpolateBlues],
     ['greens', interpolateGreens],
+    ['grays', interpolateGreys],
     ['greys', interpolateGreys],
     ['purples', interpolatePurples],
     ['reds', interpolateReds],
@@ -174,7 +189,7 @@ const quantitativeSchemes = new Map([
     ['sinebow', interpolateSinebow]
 ]);
 export function isQuantitativeScheme(scheme) {
-    return quantitativeSchemes.has(scheme);
+    return quantitativeSchemes.has(String(scheme).toLowerCase());
 }
 export function quantitativeScheme(scheme) {
     const s = `${scheme}`.toLowerCase();

package/dist/helpers/curves.d.ts

@@ -0,0 +1,3 @@
+import type { Curve } from '../types.js';
+import { type CurveFactory } from 'd3-shape';
+export declare function maybeCurve(curve: Curve | CurveFactory, tension: number): any;