svelteplot 0.0.1-alpha.1 → 0.0.1-alpha.3

package/dist/Plot.svelte

@@ -0,0 +1,171 @@
+<script>import { setContext } from "svelte";
+import { Frame, GridX, GridY } from "./";
+import { DEFAULT_PLOT_OPTIONS, Plot } from "./classes/Plot.svelte";
+import mergeDeep from "./helpers/mergeDeep";
+import AxisX from "./marks/AxisX.svelte";
+import AxisY from "./marks/AxisY.svelte";
+import ColorLegend from "./marks/ColorLegend.svelte";
+import SymbolLegend from "./marks/SymbolLegend.svelte";
+let {
+  // snippets
+  header,
+  footer,
+  overlay,
+  children,
+  // props
+  height = "auto",
+  marginLeft = 30,
+  marginRight = 10,
+  marginTop = 20,
+  marginBottom = 40,
+  inset = null,
+  grid = false,
+  frame = false,
+  maxWidth = null,
+  title = "",
+  subtitle = "",
+  caption = "",
+  // scales
+  radius = null,
+  color = null,
+  symbol = null,
+  x = null,
+  y = null,
+  onmousemove = null
+} = $props();
+let width = $state(400);
+const plot = new Plot(600, height || defaultPlotHeight, {
+  marginTop,
+  marginLeft,
+  marginRight,
+  marginBottom,
+  // scales
+  symbol,
+  radius,
+  x,
+  y,
+  color,
+  // other
+  title,
+  subtitle,
+  caption
+});
+setContext("svelteplot", plot);
+$effect(() => {
+  plot.width = width;
+  plot._height = height;
+  plot.options = mergeDeep({}, DEFAULT_PLOT_OPTIONS, {
+    marginBottom,
+    marginLeft,
+    marginRight,
+    marginTop,
+    inset,
+    symbol,
+    radius,
+    color,
+    x,
+    y,
+    title,
+    subtitle,
+    caption
+  });
+});
+function onMouseMove(evt) {
+  if (onmousemove)
+    onmousemove({ ...evt, plot });
+}
+let hasLegend = $derived(color?.legend || symbol?.legend);
+</script>
+
+<figure class="svelteplot" bind:clientWidth={width} style:max-width={maxWidth}>
+    <svg
+        role="document"
+        {width}
+        height={plot.height}
+        onmousemove={onmousemove ? onMouseMove : null}
+    >
+        <!-- automatic grids -->
+        {#if grid || x?.grid}<GridX automatic />{/if}
+        {#if grid || y?.grid}<GridY automatic />{/if}
+
+        {#if !plot.hasAxisXMark && plot.hasChannelX}
+            <!-- automatic x axis -->
+            {#if plot.options.x.axis === 'bottom' || plot.options.x.axis === 'both'}
+                <AxisX anchor="bottom" automatic />
+            {/if}
+            {#if plot.options.x.axis === 'top' || plot.options.x.axis === 'both'}
+                <AxisX anchor="top" automatic />
+            {/if}
+        {/if}
+        {#if !plot.hasAxisYMark && plot.hasChannelY}
+            <!-- automatic y axis -->
+            {#if plot.options.y.axis === 'left' || plot.options.y.axis === 'both'}
+                <AxisY anchor="left" automatic />
+            {/if}
+            {#if plot.options.y.axis === 'right' || plot.options.y.axis === 'both'}
+                <AxisY anchor="right" automatic />
+            {/if}
+        {/if}
+        <!-- automatic frame -->
+        {#if frame}<Frame />{/if}
+        {#if children}{@render children(plot)}{/if}
+    </svg>
+
+    {#if plot.options.title || plot.options.subtitle || header || hasLegend}
+        <div class="plot-header">
+            {#if plot.options.title}
+                <h2>{@html plot.options.title}</h2>
+            {/if}
+            {#if plot.options.subtitle}
+                <h3>{@html plot.options.subtitle}</h3>
+            {/if}
+            {#if color?.legend}
+                <ColorLegend />
+            {/if}
+            {#if symbol?.legend}
+                <SymbolLegend />
+            {/if}
+            {#if header}{@render header(plot)}{/if}
+        </div>
+    {/if}
+
+    {#if footer || plot.options.caption}
+        <div class="plot-footer">
+            {#if plot.options.caption}
+                <figcaption>{@html plot.options.caption}</figcaption>
+            {/if}
+            {#if footer}{@render footer(plot)}{/if}
+        </div>
+    {/if}
+
+    <div class="overlay">
+        {#if overlay}{@render overlay(plot)}{/if}
+    </div>
+</figure>
+
+<style>
+    figure {
+        margin: 1em 0;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+    }
+    figure .plot-header {
+        order: 1;
+    }
+    svg {
+        order: 2;
+        overflow: visible;
+    }
+    figure .plot-footer {
+        order: 3;
+    }
+    .overlay {
+        position: absolute;
+        pointer-events: none;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+    }
+</style>

package/dist/Plot.svelte.d.ts

@@ -0,0 +1,15 @@
+import { SvelteComponent } from "svelte";
+import type { PlotProps } from './types';
+declare const __propDef: {
+    props: PlotProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type PlotProps_ = typeof __propDef.props;
+export { PlotProps_ as PlotProps };
+export type PlotEvents = typeof __propDef.events;
+export type PlotSlots = typeof __propDef.slots;
+export default class Plot extends SvelteComponent<PlotProps, PlotEvents, PlotSlots> {
+}

package/dist/classes/Channel.svelte.js

@@ -0,0 +1,72 @@
+import resolveChannel from '../helpers/resolveChannel';
+import { extent } from 'd3-array';
+import { MARK_PROP_CHANNEL, CHANNEL_TYPES } from '../contants';
+import { isBooleanOrNull, isColorOrNull, isDateOrNull, isNumberOrNull, isStringOrNull } from '../helpers/typeChecks';
+import { uniq } from 'underscore';
+export class Channel {
+    name = undefined;
+    plot = undefined;
+    constructor(name, plot) {
+        this.name = name;
+        this.plot = plot;
+    }
+    // readonly type: ChannelType = CHANNEL_TYPES.position;
+    // all marks that have this channel
+    marks = $derived(this.plot?.marks ?? []);
+    forceDomain = $derived(this.plot && (this.name === 'x' || this.name === 'y')
+        ? this.plot.options[this.name]?.domain || null
+        : null);
+    possibleProps = $derived(Object.entries(MARK_PROP_CHANNEL)
+        .filter(([, channel]) => channel === this.name)
+        .map(([prop]) => prop));
+    activeMarks = $derived(this.marks.filter((mark) => mark.channels.has(this.name) && this.possibleProps.find((prop) => mark.props[prop])));
+    manualActiveMarks = $derived(this.activeMarks.filter((mark) => !mark.automatic));
+    autoTitle = $derived(this.manualActiveMarks.length === 1 &&
+        typeof this.manualActiveMarks[0].props?.[this.name] === 'string'
+        ? this.manualActiveMarks[0].props?.[this.name]
+        : null);
+    uniqueMarkProps = $derived(uniq(this.manualActiveMarks
+        .map((mark) => this.possibleProps
+        .filter((prop) => mark.props[prop])
+        .map((prop) => mark.props[prop]))
+        .flat(2)));
+    dataValues = $derived([
+        ...this.activeMarks
+            // only check marks with data
+            .filter((mark) => mark.props.data.length)
+            .map((mark) => this.possibleProps.map((prop) => mark.props.data.map((row) => resolveChannel(this.name, row, mark.props[prop]))))
+            .flat(3)
+            .filter((d) => d != null),
+        ...(this.forceDomain || [])
+    ]);
+    valueType = $derived(this.dataValues.every((v) => v == null)
+        ? 'null'
+        : this.dataValues.every(isColorOrNull)
+            ? 'color'
+            : this.dataValues.every(isBooleanOrNull)
+                ? 'boolean'
+                : this.dataValues.every(isStringOrNull)
+                    ? 'text'
+                    : this.dataValues.every(isNumberOrNull)
+                        ? 'number'
+                        : this.dataValues.every(isDateOrNull)
+                            ? 'date'
+                            : 'mixed');
+    domain = $derived(!this.dataValues.length
+        ? [0, 1]
+        : this.valueType === 'boolean' ||
+            this.valueType === 'text' ||
+            this.valueType === 'color'
+            ? uniq(this.dataValues)
+            : extent(this.dataValues));
+    scaleType = $derived(this.name === 'radius'
+        ? 'sqrt'
+        : this.valueType === 'date'
+            ? 'time'
+            : this.valueType === 'number'
+                ? 'linear'
+                : this.valueType === 'text'
+                    ? 'band'
+                    : 'linear');
+}
+// opacity: typeof === 'number' && between [0,1]

package/dist/classes/Mark.svelte.js

@@ -0,0 +1,17 @@
+export class Mark {
+    id;
+    type;
+    automatic;
+    channels = $state(new Set());
+    props = $state();
+    constructor(type, channels, automatic, props) {
+        this.id = Symbol();
+        this.type = type;
+        this.automatic = automatic;
+        this.channels = new Set(channels);
+        this.props = props;
+    }
+    toString() {
+        return `Mark[${this.type}]`;
+    }
+}

package/dist/classes/Plot.svelte.js

@@ -0,0 +1,99 @@
+import { createScale, createColorScale } from '../helpers/createScale';
+import mergeDeep from '../helpers/mergeDeep';
+import { Channel } from './Channel.svelte';
+import { uniq } from 'underscore';
+export const DEFAULT_PLOT_OPTIONS = {
+    title: '',
+    subtitle: '',
+    caption: '',
+    marginLeft: 0,
+    marginRight: 0,
+    marginTop: 30,
+    marginBottom: 0,
+    radius: { range: [1, 10] },
+    symbol: {},
+    color: {},
+    x: {
+        domain: undefined,
+        grid: false,
+        ticks: undefined,
+        tickSpacing: 80,
+        axis: 'bottom',
+        log: false,
+        reverse: false
+    },
+    y: {
+        domain: undefined,
+        grid: false,
+        ticks: undefined,
+        tickSpacing: 60,
+        axis: 'left',
+        log: false,
+        reverse: false
+    }
+};
+export class Plot {
+    width = $state(600);
+    _height = $state(400);
+    options = $state(DEFAULT_PLOT_OPTIONS);
+    marks = $state([]);
+    hasChannelX = $derived(!!this.marks.find((mark) => mark.channels.has('x')));
+    hasChannelY = $derived(!!this.marks.find((mark) => mark.channels.has('y')));
+    hasFilledDotMarks = $derived(!!this.marks.find((d) => d.type === 'dot' && d.props?.fill));
+    manualMarks = $derived(this.marks.filter((mark) => !mark.automatic));
+    singlePosChannelMark = $derived(this.manualMarks.length === 1 &&
+        (!this.manualMarks[0].channels.has('x') || !this.manualMarks[0].channels.has('y')));
+    height = $derived(this._height === 'auto' ? (this.hasChannelY ? 400 : 90) : this._height);
+    inset = $derived(typeof this.options.inset === 'number'
+        ? this.options.inset
+        : this.singlePosChannelMark
+            ? 10
+            : 0);
+    // derived props
+    margins = $derived({
+        top: this.options.marginTop,
+        left: this.options.marginLeft,
+        bottom: this.options.marginBottom,
+        right: this.options.marginRight
+    });
+    // margins = $state<Margins>({ left: 0, right: 0, top: 0, bottom: 0 });
+    plotWidth = $derived(this.width - this.margins.left - this.margins.right);
+    plotHeight = $derived(this.height - this.margins.top - this.margins.bottom);
+    x = new Channel('x', this);
+    y = new Channel('y', this);
+    radius = new Channel('radius', this);
+    color = new Channel('color', this);
+    symbol = new Channel('symbol', this);
+    colorSymbolRedundant = $derived(this.color.uniqueMarkProps.length === 1 &&
+        this.symbol.uniqueMarkProps.length === 1 &&
+        this.color.uniqueMarkProps[0] === this.symbol.uniqueMarkProps[0]);
+    xScale = $derived(createScale(this.x.scaleType === 'linear' && this.options.x.log ? 'log' : this.x.scaleType, this.options?.x?.domain || this.x.domain, this.options?.x?.reverse
+        ? [this.margins.left + this.plotWidth - this.inset, this.margins.left + this.inset]
+        : [this.margins.left + this.inset, this.margins.left + this.plotWidth - this.inset], this.x.scaleType === 'linear' && this.options.x.log ? { base: 10 } : {}));
+    yScale = $derived(createScale(this.y.scaleType === 'linear' && this.options.y.log ? 'log' : this.y.scaleType, this.options.y?.domain || this.y.domain, this.options.y?.reverse
+        ? [this.margins.top + this.inset, this.height - this.margins.bottom - this.inset]
+        : [this.height - this.margins.bottom - this.inset, this.margins.top + this.inset], this.y.scaleType === 'linear' && this.options.y.log ? { base: '10' } : {}));
+    radiusScale = $derived(createScale(this.radius.scaleType, [0, Math.max(this.radius.domain[0], this.radius.domain[1])], this.options.radius.range));
+    symbolScale = $derived(createScale('ordinal', this.symbol.domain, this.options.symbol?.range || this.hasFilledDotMarks
+        ? ['circle', 'cross', 'diamond', 'square', 'star', 'triangle', 'wye']
+        : ['circle', 'plus', 'times', 'triangle2', 'asterisk', 'square2', 'diamond2']));
+    colorScale = $derived(createColorScale(this.color.scaleType, this.color.domain, this.options.color.scheme));
+    hasAxisXMark = $derived(!!this.marks.find((mark) => mark.type === 'axis-x' && !mark.automatic));
+    hasAxisYMark = $derived(!!this.marks.find((mark) => mark.type === 'axis-y' && !mark.automatic));
+    constructor(width, height, options) {
+        const opts = mergeDeep({}, DEFAULT_PLOT_OPTIONS, options);
+        this.width = width;
+        this._height = height;
+        this.options = opts;
+    }
+    addMark(mark) {
+        // console.log('addMark: ' + mark);
+        this.marks = [...this.marks, mark];
+        // add mark to respective channels
+        if (mark.channels.has('color'))
+            console.log(this.color.uniqueMarkProps);
+    }
+    removeMark(removeMark) {
+        this.marks = this.marks.filter((mark) => mark.id !== removeMark.id);
+    }
+}

package/dist/contants.d.ts

@@ -0,0 +1,3 @@
+import type { ChannelName, MarkProps, MarkStyleProps } from './types';
+export declare const CHANNEL_TYPES: Record<ChannelName, symbol>;
+export declare const MARK_PROP_CHANNEL: Record<MarkProps & MarkStyleProps, ChannelName>;

package/dist/contants.js

@@ -0,0 +1,40 @@
+export const CHANNEL_TYPES = {
+    opacity: Symbol('opacity'),
+    color: Symbol('color'),
+    x: Symbol('position'),
+    y: Symbol('position'),
+    angle: Symbol('angle'),
+    symbol: Symbol('symbol'),
+    radius: Symbol('radius'),
+    width: Symbol('width')
+};
+export const MARK_PROP_CHANNEL = {
+    x: 'x',
+    x1: 'x',
+    x2: 'x',
+    y: 'y',
+    y1: 'y',
+    y2: 'y',
+    rotate: 'angle',
+    r: 'radius',
+    symbol: 'symbol',
+    fill: 'color',
+    stroke: 'color',
+    opacity: 'opacity',
+    fillOpacity: 'opacity',
+    strokeOpacity: 'opacity',
+    strokeWidth: 'width'
+};
+// export const CHANNEL_MAP: Record<ChannelName, ValueOf<typeof CHANNEL_TYPES>> = {
+// 	x: CHANNEL_TYPES.x,
+// 	y: CHANNEL_TYPES.y,
+// 	opacity: CHANNEL_TYPES.opacity,
+// 	strokeOpacity: CHANNEL_TYPES.opacity,
+// 	strokeWidth: CHANNEL_TYPES.width,
+// 	fillOpacity: CHANNEL_TYPES.opacity,
+// 	stroke: CHANNEL_TYPES.color,
+// 	fill: CHANNEL_TYPES.color,
+// 	r: CHANNEL_TYPES.radius,
+// 	rotate: CHANNEL_TYPES.angle,
+// 	symbol: CHANNEL_TYPES.symbol
+// };

package/dist/helpers/GroupMultiple.svelte

@@ -0,0 +1,8 @@
+<script>let { data = [], ...rest } = $props();
+</script>
+
+{#if data.length !== 1}
+    <g {...rest}><slot /></g>
+{:else}
+    <slot />
+{/if}

package/dist/helpers/GroupMultiple.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { DataRow } from '../types';
+declare const __propDef: {
+    props: {
+        data: DataRow[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type GroupMultipleProps = typeof __propDef.props;
+export type GroupMultipleEvents = typeof __propDef.events;
+export type GroupMultipleSlots = typeof __propDef.slots;
+export default class GroupMultiple extends SvelteComponent<GroupMultipleProps, GroupMultipleEvents, GroupMultipleSlots> {
+}
+export {};

package/dist/helpers/autoTimeFormat.d.ts

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

package/dist/helpers/autoTimeFormat.js

@@ -0,0 +1,10 @@
+import dayjs from 'dayjs';
+import { isDate } from 'underscore';
+export default function autoTimeFormat(x, plotWidth) {
+    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');
+}
+function toNumber(d) {
+    return isDate(d) ? d.getTime() : +d;
+}

package/dist/helpers/colors.d.ts

@@ -0,0 +1,13 @@
+import { interpolateBrBG } from 'd3-scale-chromatic';
+import type { ColorScheme } from '../types';
+export declare const categoricalSchemes: Map<string, readonly string[]>;
+export declare function isCategoricalScheme(scheme: string): boolean;
+type SchemeGetter = (n: number) => readonly string[];
+export declare function isOrdinalScheme(scheme: ColorScheme): boolean;
+export declare function ordinalScheme(scheme: string): SchemeGetter | undefined;
+export declare function ordinalRange(scheme: string, length: number): readonly string[] | undefined;
+export declare function maybeBooleanRange(domain: boolean[], scheme?: string): unknown[] | undefined;
+export declare function isQuantitativeScheme(scheme: string): boolean;
+export declare function quantitativeScheme(scheme: string): typeof interpolateBrBG | undefined;
+export declare function isDivergingScheme(scheme: string): boolean;
+export {};

package/dist/helpers/colors.js

@@ -0,0 +1,200 @@
+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';
+export const categoricalSchemes = new Map([
+    ['accent', schemeAccent],
+    ['category10', schemeCategory10],
+    ['dark2', schemeDark2],
+    ['paired', schemePaired],
+    ['pastel1', schemePastel1],
+    ['pastel2', schemePastel2],
+    ['set1', schemeSet1],
+    ['set2', schemeSet2],
+    ['set3', schemeSet3],
+    ['tableau10', schemeTableau10]
+]);
+export function isCategoricalScheme(scheme) {
+    return scheme != null && categoricalSchemes.has(`${scheme}`.toLowerCase());
+}
+const ordinalSchemes = new Map([
+    // diverging
+    ['brbg', scheme11(schemeBrBG, interpolateBrBG)],
+    ['prgn', scheme11(schemePRGn, interpolatePRGn)],
+    ['piyg', scheme11(schemePiYG, interpolatePiYG)],
+    ['puor', scheme11(schemePuOr, interpolatePuOr)],
+    ['rdbu', scheme11(schemeRdBu, interpolateRdBu)],
+    ['rdgy', scheme11(schemeRdGy, interpolateRdGy)],
+    ['rdylbu', scheme11(schemeRdYlBu, interpolateRdYlBu)],
+    ['rdylgn', scheme11(schemeRdYlGn, interpolateRdYlGn)],
+    ['spectral', scheme11(schemeSpectral, interpolateSpectral)],
+    // reversed diverging (for temperature data)
+    ['burd', scheme11r(schemeRdBu, interpolateRdBu)],
+    ['buylrd', scheme11r(schemeRdYlBu, interpolateRdYlBu)],
+    // sequential (single-hue)
+    ['blues', scheme9(schemeBlues, interpolateBlues)],
+    ['greens', scheme9(schemeGreens, interpolateGreens)],
+    ['greys', scheme9(schemeGreys, interpolateGreys)],
+    ['oranges', scheme9(schemeOranges, interpolateOranges)],
+    ['purples', scheme9(schemePurples, interpolatePurples)],
+    ['reds', scheme9(schemeReds, interpolateReds)],
+    // sequential (multi-hue)
+    ['turbo', schemei(interpolateTurbo)],
+    ['viridis', schemei(interpolateViridis)],
+    ['magma', schemei(interpolateMagma)],
+    ['inferno', schemei(interpolateInferno)],
+    ['plasma', schemei(interpolatePlasma)],
+    ['cividis', schemei(interpolateCividis)],
+    ['cubehelix', schemei(interpolateCubehelixDefault)],
+    ['warm', schemei(interpolateWarm)],
+    ['cool', schemei(interpolateCool)],
+    ['bugn', scheme9(schemeBuGn, interpolateBuGn)],
+    ['bupu', scheme9(schemeBuPu, interpolateBuPu)],
+    ['gnbu', scheme9(schemeGnBu, interpolateGnBu)],
+    ['orrd', scheme9(schemeOrRd, interpolateOrRd)],
+    ['pubu', scheme9(schemePuBu, interpolatePuBu)],
+    ['pubugn', scheme9(schemePuBuGn, interpolatePuBuGn)],
+    ['purd', scheme9(schemePuRd, interpolatePuRd)],
+    ['rdpu', scheme9(schemeRdPu, interpolateRdPu)],
+    ['ylgn', scheme9(schemeYlGn, interpolateYlGn)],
+    ['ylgnbu', scheme9(schemeYlGnBu, interpolateYlGnBu)],
+    ['ylorbr', scheme9(schemeYlOrBr, interpolateYlOrBr)],
+    ['ylorrd', scheme9(schemeYlOrRd, interpolateYlOrRd)],
+    // cyclical
+    ['rainbow', schemeicyclical(interpolateRainbow)],
+    ['sinebow', schemeicyclical(interpolateSinebow)]
+]);
+export function isOrdinalScheme(scheme) {
+    return ordinalSchemes.has(scheme);
+}
+function scheme9(scheme, interpolate) {
+    return (n) => {
+        if (n === 1)
+            return [scheme[3][1]]; // favor midpoint
+        if (n === 2)
+            return [scheme[3][1], scheme[3][2]]; // favor darker
+        n = Math.max(3, Math.floor(n));
+        return n > 9 ? quantize(interpolate, n) : scheme[n];
+    };
+}
+function scheme11(scheme, interpolate) {
+    return (n) => {
+        if (n === 2)
+            return [scheme[3][0], scheme[3][2]]; // favor diverging extrema
+        n = Math.max(3, Math.floor(n));
+        return n > 11 ? quantize(interpolate, n) : scheme[n];
+    };
+}
+function scheme11r(scheme, interpolate) {
+    return (n) => {
+        if (n === 2)
+            return [scheme[3][2], scheme[3][0]]; // favor diverging extrema
+        n = Math.max(3, Math.floor(n));
+        return n > 11 ? quantize((t) => interpolate(1 - t), n) : scheme[n].slice().reverse();
+    };
+}
+function schemei(interpolate) {
+    return (n) => quantize(interpolate, Math.max(2, Math.floor(n)));
+}
+function schemeicyclical(interpolate) {
+    return (n) => quantize(interpolate, Math.floor(n) + 1).slice(0, -1);
+}
+export function ordinalScheme(scheme) {
+    const s = `${scheme}`.toLowerCase();
+    if (!ordinalSchemes.has(s))
+        throw new Error(`unknown ordinal scheme: ${s}`);
+    return ordinalSchemes.get(s);
+}
+export function ordinalRange(scheme, length) {
+    const s = ordinalScheme(scheme);
+    const r = typeof s === 'function' ? s({ length }) : s;
+    return r.length !== length ? r.slice(0, length) : r;
+}
+// If the specified domain contains only booleans (ignoring null and undefined),
+// returns a corresponding range where false is mapped to the low color and true
+// is mapped to the high color of the specified scheme.
+export function maybeBooleanRange(domain, scheme = 'greys') {
+    const range = new Set();
+    const [f, t] = ordinalRange(scheme, 2);
+    for (const value of domain) {
+        if (value == null)
+            continue;
+        if (value === true)
+            range.add(t);
+        else if (value === false)
+            range.add(f);
+        else
+            return;
+    }
+    return [...range];
+}
+const quantitativeSchemes = new Map([
+    // diverging
+    ['brbg', interpolateBrBG],
+    ['prgn', interpolatePRGn],
+    ['piyg', interpolatePiYG],
+    ['puor', interpolatePuOr],
+    ['rdbu', interpolateRdBu],
+    ['rdgy', interpolateRdGy],
+    ['rdylbu', interpolateRdYlBu],
+    ['rdylgn', interpolateRdYlGn],
+    ['spectral', interpolateSpectral],
+    // reversed diverging (for temperature data)
+    ['burd', (t) => interpolateRdBu(1 - t)],
+    ['buylrd', (t) => interpolateRdYlBu(1 - t)],
+    // sequential (single-hue)
+    ['blues', interpolateBlues],
+    ['greens', interpolateGreens],
+    ['greys', interpolateGreys],
+    ['purples', interpolatePurples],
+    ['reds', interpolateReds],
+    ['oranges', interpolateOranges],
+    // sequential (multi-hue)
+    ['turbo', interpolateTurbo],
+    ['viridis', interpolateViridis],
+    ['magma', interpolateMagma],
+    ['inferno', interpolateInferno],
+    ['plasma', interpolatePlasma],
+    ['cividis', interpolateCividis],
+    ['cubehelix', interpolateCubehelixDefault],
+    ['warm', interpolateWarm],
+    ['cool', interpolateCool],
+    ['bugn', interpolateBuGn],
+    ['bupu', interpolateBuPu],
+    ['gnbu', interpolateGnBu],
+    ['orrd', interpolateOrRd],
+    ['pubugn', interpolatePuBuGn],
+    ['pubu', interpolatePuBu],
+    ['purd', interpolatePuRd],
+    ['rdpu', interpolateRdPu],
+    ['ylgnbu', interpolateYlGnBu],
+    ['ylgn', interpolateYlGn],
+    ['ylorbr', interpolateYlOrBr],
+    ['ylorrd', interpolateYlOrRd],
+    // cyclical
+    ['rainbow', interpolateRainbow],
+    ['sinebow', interpolateSinebow]
+]);
+export function isQuantitativeScheme(scheme) {
+    return quantitativeSchemes.has(scheme);
+}
+export function quantitativeScheme(scheme) {
+    const s = `${scheme}`.toLowerCase();
+    if (!quantitativeSchemes.has(s))
+        throw new Error(`unknown quantitative scheme: ${s}`);
+    return quantitativeSchemes.get(s);
+}
+const divergingSchemes = new Set([
+    'brbg',
+    'prgn',
+    'piyg',
+    'puor',
+    'rdbu',
+    'rdgy',
+    'rdylbu',
+    'rdylgn',
+    'spectral',
+    'burd',
+    'buylrd'
+]);
+export function isDivergingScheme(scheme) {
+    return scheme != null && divergingSchemes.has(`${scheme}`.toLowerCase());
+}