svelteplot 0.0.1-alpha.11 → 0.0.1-alpha.12

package/dist/marks/Area.svelte

@@ -1,3 +1,5 @@
+<script context="module"></script>
+
 <script>import resolveChannel from "../helpers/resolveChannel.js";
 import { getContext } from "svelte";
 import BaseMark from "./BaseMark.svelte";
@@ -5,51 +7,63 @@ import getBaseStyles from "../helpers/getBaseStyles.js";
 import { area } from "d3-shape";
 import { groupBy } from "underscore";
 import callWithProps from "../helpers/callWithProps.js";
+import { maybeCurve } from "../helpers/curves.js";
 const BaseMark_Area = BaseMark;
 const plot = getContext("svelteplot");
 let {
   data,
+  curve,
+  tension,
   x1 = null,
   x2 = null,
   y1 = null,
   y2 = null,
   z = null,
-  fill,
-  stroke,
-  sort,
+  fill = null,
+  stroke = null,
+  sort = null,
   ...styleProps
 } = $props();
+let channels = $derived({
+  x1,
+  x2,
+  y1,
+  y2,
+  fill,
+  stroke,
+  z,
+  sort
+});
 let groups = $derived(
-  z || fill || stroke ? Object.values(groupBy(data, (d) => resolveChannel("z", d, z || fill || stroke))) : [data]
+  z || fill || stroke ? Object.values(groupBy(data, (d) => resolveChannel("z", d, channels))) : [data]
 );
 let sortedGroups = $derived(
   sort ? groups.sort(
-    (a, b) => resolveChannel("sort", a[0], sort) > resolveChannel("sort", b[0], sort) ? 1 : -1
+    (a, b) => resolveChannel("sort", a[0], channels) > resolveChannel("sort", b[0], channels) ? 1 : -1
   ) : groups
 );
 let areaPath = $derived(
-  callWithProps(
-    area,
-    [],
-    x1 != null && x2 != null ? {
-      // vertical area
-      x0: (d) => plot.xScale(resolveChannel("x", d, x1)),
-      x1: (d) => plot.xScale(resolveChannel("x", d, x2)),
-      y: (d) => plot.yScale(resolveChannel("y", d, y1))
+  callWithProps(area, [], {
+    curve: maybeCurve(curve, tension),
+    ...x1 != null && x2 != null ? {
+      // "vertical" area
+      x0: (d) => plot.xScale(resolveChannel("x1", d, channels)),
+      x1: (d) => plot.xScale(resolveChannel("x2", d, channels)),
+      y: (d) => plot.yScale(resolveChannel("y1", d, channels))
     } : {
-      // horizontal area
-      x: (d) => plot.xScale(resolveChannel("x", d, x1)),
-      y0: (d) => plot.yScale(resolveChannel("y", d, y1)),
-      y1: (d) => plot.yScale(resolveChannel("y", d, y2))
+      // "horizontal" area
+      x: (d) => plot.xScale(resolveChannel("x1", d, channels)),
+      y0: (d) => plot.yScale(resolveChannel("y1", d, channels)),
+      y1: (d) => plot.yScale(resolveChannel("y2", d, channels))
     }
-  )
+  })
 );
 </script>
 
 <BaseMark_Area
     type="area"
     {data}
-    channels={['x', 'y', 'color']}
+    channels={['x1', 'x2', 'y1', 'y2', 'fill', 'stroke']}
     {x1}
     {x2}
     {y1}
@@ -63,10 +77,10 @@ let areaPath = $derived(
             <path
                 d={areaPath(areaData)}
                 style:stroke={stroke
-                    ? plot.colorScale(resolveChannel('color', areaData[0], stroke))
+                    ? plot.colorScale(resolveChannel('stroke', areaData[0], channels))
                     : 'none'}
                 style:fill={fill
-                    ? plot.colorScale(resolveChannel('color', areaData[0], fill))
+                    ? plot.colorScale(resolveChannel('fill', areaData[0], channels))
                     : 'currentColor'}
                 style={getBaseStyles(areaData[0], styleProps)}
             />

package/dist/marks/Area.svelte.d.ts

@@ -1,5 +1,18 @@
 import { SvelteComponent } from "svelte";
-import type { AreaMarkProps } from '../types.js';
+import type { MarkProps, BaseMarkStyleProps, ChannelAccessor, Curve } from '../types.js';
+export type AreaMarkProps = MarkProps & BaseMarkStyleProps & {
+    x1?: ChannelAccessor;
+    x2?: ChannelAccessor;
+    y1?: ChannelAccessor;
+    y2?: ChannelAccessor;
+    z?: ChannelAccessor;
+    sort?: ChannelAccessor | {
+        channel: 'stroke' | 'fill';
+    };
+    curve: Curve | CurveFactory;
+    tension: number;
+};
+import { type CurveFactory } from 'd3-shape';
 declare const __propDef: {
     props: AreaMarkProps;
     events: {

package/dist/marks/AreaX.svelte

@@ -1,19 +1,12 @@
-<script>import isDataRecord from "../helpers/isDataRecord.js";
-import Area from "./Area.svelte";
-let { data, x, x1, x2, y, ...rest } = $props();
-let dataIsRawValueArray = $derived(!isDataRecord(data[0]));
-let transformedData = $derived(dataIsRawValueArray ? data.map((value, index) => ({ value, index, ___orig___: value })) : data);
-$inspect({
-  y1: dataIsRawValueArray ? "index" : y,
-  x1: dataIsRawValueArray ? 0 : x ? 0 : x1,
-  x2: dataIsRawValueArray ? "value" : x ? x : x2
-});
+<script context="module"></script>
+
+<script>import Area from "./Area.svelte";
+import { stackX, recordizeX, renameChannels } from "..";
+let { data: rawData, stack, ...rawChannels } = $props();
+let { data, ...channels } = $derived(renameChannels(stackX(recordizeX({ data: rawData, ...rawChannels }), stack), { y: "y1" }));
 </script>
 
 <Area
-    data={transformedData}
-    y1={dataIsRawValueArray ? 'index' : y}
-    x1={dataIsRawValueArray ? 0 : x ? 0 : x1}
-    x2={dataIsRawValueArray ? 'value' : x ? x : x2}
-    {...rest}
+    {data}
+    {...channels}
 />

package/dist/marks/AreaX.svelte.d.ts

@@ -1,9 +1,22 @@
 import { SvelteComponent } from "svelte";
-import type { RawValue } from '../types.js';
-declare const __propDef: {
-    props: {
-        data: RawValue[];
+import type { MarkProps, BaseMarkStyleProps, ChannelAccessor, Curve } from '../types.js';
+import type { CurveFactory } from 'd3-shape';
+import type { StackOptions } from '../transforms/stack.js';
+export type AreaXMarkProps = MarkProps & BaseMarkStyleProps & {
+    x?: ChannelAccessor;
+    x1?: ChannelAccessor;
+    x2?: ChannelAccessor;
+    y?: ChannelAccessor;
+    z?: ChannelAccessor;
+    sort?: ChannelAccessor | {
+        channel: 'stroke' | 'fill';
     };
+    curve: Curve | CurveFactory;
+    tension: number;
+    stack?: StackOptions;
+};
+declare const __propDef: {
+    props: AreaXMarkProps;
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/dist/marks/AreaY.svelte

@@ -1,14 +1,13 @@
-<script>import isDataRecord from "../helpers/isDataRecord.js";
-import Area from "./Area.svelte";
-let { data, x, y, y1, y2, ...rest } = $props();
-let dataIsRawValueArray = $derived(!isDataRecord(data[0]));
-let transformedData = $derived(dataIsRawValueArray ? data.map((value, index) => ({ value, index, ___orig___: value })) : data);
+<script context="module"></script>
+
+<script>import Area from "./Area.svelte";
+import { stackY, recordizeY, renameChannels } from "..";
+let { data: rawData, stack, ...rawChannels } = $props();
+let { data, ...channels } = $derived(renameChannels(stackY(recordizeY({ data: rawData, ...rawChannels }), stack), { x: "x1" }));
+$inspect({ data, channels });
 </script>
 
 <Area
-    data={transformedData}
-    x1={dataIsRawValueArray ? 'index' : x}
-    y1={dataIsRawValueArray ? 0 : y ? 0 : y1}
-    y2={dataIsRawValueArray ? 'value' : y ? y : y2}
-    {...rest}
+    {data}
+    {...channels}
 />

package/dist/marks/AreaY.svelte.d.ts

@@ -1,9 +1,22 @@
 import { SvelteComponent } from "svelte";
-import type { RawValue } from '../types.js';
-declare const __propDef: {
-    props: {
-        data: RawValue[];
+import type { MarkProps, BaseMarkStyleProps, ChannelAccessor, Curve } from '../types.js';
+import type { CurveFactory } from 'd3-shape';
+import type { StackOptions } from '../transforms/stack.js';
+export type AreaYMarkProps = MarkProps & BaseMarkStyleProps & {
+    x?: ChannelAccessor;
+    y?: ChannelAccessor;
+    y1?: ChannelAccessor;
+    y2?: ChannelAccessor;
+    z?: ChannelAccessor;
+    sort?: ChannelAccessor | {
+        channel: 'stroke' | 'fill';
     };
+    curve: Curve | CurveFactory;
+    tension: number;
+    stack?: StackOptions;
+};
+declare const __propDef: {
+    props: AreaYMarkProps;
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/dist/marks/AxisX.svelte

@@ -26,7 +26,7 @@ let autoTicks = $derived(
   ticks.length > 0 ? ticks : plot.options?.x?.ticks ?? plot.xScale.ticks(autoTickCount)
 );
 let useTickFormat = $derived(
-  typeof tickFormat === "function" ? tickFormat : plot.x.scaleType === "time" ? typeof tickFormat === "string" ? (d) => dayjs(d).format(tickFormat).split("\n") : autoTimeFormat(plot.x, plot.plotWidth) : (d) => String(d)
+  typeof tickFormat === "function" ? tickFormat : plot.x.scaleType === "time" ? typeof tickFormat === "string" ? (d) => dayjs(d).format(tickFormat).split("\n") : autoTimeFormat(plot.x, plot.plotWidth) : (d) => String(plot.x.scaleOptions.percent ? +(d * 100).toFixed(5) : d)
 );
 let tickTexts = $derived(
   removeIdenticalLines(
@@ -35,7 +35,7 @@ let tickTexts = $derived(
 );
 let optionsLabel = $derived(plot.options?.x?.label);
 let useTitle = $derived(
-  title || (optionsLabel === null ? null : optionsLabel !== void 0 ? optionsLabel : plot.x.autoTitle ? plot.options.x?.reverse ? `\u2190 ${plot.x.autoTitle}` : `${plot.x.autoTitle} \u2192` : "")
+  title || (optionsLabel === null ? null : optionsLabel !== void 0 ? optionsLabel : plot.x.autoTitle ? plot.options.x?.reverse ? `\u2190 ${plot.x.autoTitle}${plot.x.scaleOptions.percent ? " (%)" : ""}` : `${plot.x.autoTitle}${plot.x.scaleOptions.percent ? " (%)" : ""} \u2192` : "")
 );
 </script>
 
@@ -54,7 +54,9 @@ let useTitle = $derived(
             {@const prevTextLines = t && tickTexts[t - 1]}
             <g
                 class="x-tick"
-                transform="translate({plot.xScale(tick)},{anchor === 'bottom'
+                transform="translate({plot.xScale(tick) +
+                    (plot.xScale.bandwidth ? plot.xScale.bandwidth() * 0.5 : 0)},{anchor ===
+                'bottom'
                     ? plot.margins.top + plot.plotHeight
                     : plot.margins.top})"
             >
@@ -86,8 +88,8 @@ let useTitle = $derived(
     text {
         text-anchor: middle;
         font-size: 11px;
-
-        fill: #4a4a4a;
+        opacity: 0.8;
+        fill: currentColor;
     }
 
     text.axis-title {
@@ -96,7 +98,4 @@ let useTitle = $derived(
     .x-tick line {
         stroke: currentColor;
     }
-    .x-tick line.grid {
-        stroke: #d9d9d9;
-    }
 </style>

package/dist/marks/AxisY.svelte

@@ -17,17 +17,18 @@ let {
   fill = null,
   ...styleProps
 } = $props();
-let autoTickCount = $derived(plot.plotHeight / get(plot, "options.y.tickSpacing", 80));
+let autoTickCount = $derived(plot.plotHeight / (plot.options.y?.tickSpacing || 80));
 let autoTicks = $derived(
   ticks.length > 0 ? ticks : plot.options.y?.ticks || plot.yScale.ticks(autoTickCount)
 );
 let useTickFormat = $derived(
-  typeof tickFormat === "function" ? tickFormat : plot.y.scaleType === "time" ? typeof tickFormat === "string" ? (d) => dayjs(d).format(tickFormat).split("\n") : autoTimeFormat(plot.y, plot.plotHeight) : (d) => String(d)
+  typeof tickFormat === "function" ? tickFormat : plot.y.scaleType === "time" ? typeof tickFormat === "string" ? (d) => dayjs(d).format(tickFormat).split("\n") : autoTimeFormat(plot.y, plot.plotHeight) : (d) => String(plot.y.scaleOptions.percent ? +(d * 100).toFixed(5) : d)
 );
 let optionsLabel = $derived(plot.options.y?.label);
 let useTitle = $derived(
-  title || (optionsLabel === null ? null : optionsLabel !== void 0 ? optionsLabel : plot.y.autoTitle ? `\u2191 ${plot.y.autoTitle}` : "")
+  title || (optionsLabel === null ? null : optionsLabel !== void 0 ? optionsLabel : plot.y.autoTitle ? `\u2191 ${plot.y.autoTitle}${plot.y.scaleOptions.percent ? " (%)" : ""}` : "")
 );
+$inspect(plot.y.propNames);
 </script>
 
 <BaseMark_AxisX type="axis-y" data={ticks} channels={['y']} {automatic}>
@@ -46,13 +47,15 @@ let useTitle = $derived(
             <g
                 class="y-tick"
                 transform="translate({plot.margins.left +
-                    (anchor === 'left' ? 0 : plot.plotWidth)},{plot.yScale(tick)})"
+                    (anchor === 'left' ? 0 : plot.plotWidth)},{plot.yScale(tick) +
+                    (plot.yScale.bandwidth ? plot.yScale.bandwidth() * 0.5 : 0)})"
             >
                 <text
                     class:is-left={anchor === 'left'}
                     style={getBaseStyles(tick, { fill, fontSize: tickFontSize })}
                     x={(tickSize + tickPadding) * (anchor === 'left' ? -1 : 1)}
-                    dominant-baseline="middle">{Array.isArray(tickText) ? tickText.join(' ') : tickText}</text
+                    dominant-baseline="middle"
+                    >{Array.isArray(tickText) ? tickText.join(' ') : tickText}</text
                 >
                 <line
                     style={getBaseStyles(tick, styleProps)}
@@ -66,7 +69,8 @@ let useTitle = $derived(
 <style>
     text {
         font-size: 11px;
-        fill: #4a4a4a;
+        opacity: 0.8;
+        fill: currentColor;
     }
     text.is-left {
         text-anchor: end;

package/dist/marks/BarX.svelte

@@ -0,0 +1,52 @@
+<script context="module"></script>
+
+<script>import { getContext } from "svelte";
+import BaseMark from "./BaseMark.svelte";
+import getBaseStyles from "../helpers/getBaseStyles.js";
+import resolveChannel from "../helpers/resolveChannel.js";
+import { stackX } from "../transforms/stack.js";
+import { recordizeX } from "../transforms/recordize.js";
+const BaseMark_BarX = BaseMark;
+const plot = getContext("svelteplot");
+let { data: rawData, inset = 0, ...rawChannels } = $props();
+let { data, ...channels } = $derived(stackX(recordizeX({ data: rawData, ...rawChannels })));
+function isValid(value) {
+  return value !== null && !Number.isNaN(value);
+}
+</script>
+
+<BaseMark_BarX type="bar-x" {data} channels={['y', 'x1', 'x2', 'fill', 'stroke']} {...channels}>
+    <g class="bars-x">
+        {#each data as datum}
+            {@const cy = resolveChannel('y', datum, channels)}
+            {@const cx1 = resolveChannel('x1', datum, channels)}
+            {@const cx2 = resolveChannel('x2', datum, channels)}
+            {@const minx = Math.min(plot.xScale(cx1), plot.xScale(cx2))}
+            {@const maxx = Math.max(plot.xScale(cx1), plot.xScale(cx2))}
+            {@const maybeFillColor = resolveChannel('fill', datum, channels)}
+            {@const maybeStrokeColor = resolveChannel('stroke', datum, channels)}
+            {#if isValid(cy) && isValid(cx1) && isValid(cx2)}
+                <rect
+                    style={getBaseStyles(datum, channels)}
+                    style:fill={maybeFillColor
+                        ? plot.colorScale(maybeFillColor)
+                        : maybeStrokeColor
+                          ? null
+                          : 'currentColor'}
+                    style:stroke={maybeStrokeColor ? plot.colorScale(maybeStrokeColor) : null}
+                    transform="translate({[minx, plot.yScale(cy)+inset]})"
+                    width={maxx - minx}
+                    height={plot.yScale.bandwidth()- inset*2}
+                />
+            {/if}
+        {/each}
+    </g>
+</BaseMark_BarX>
+
+<style>
+    rect {
+        fill: none;
+        stroke: none;
+        stroke-width: 1.6px;
+    }
+</style>

package/dist/marks/BarX.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponent } from "svelte";
+import type { MarkProps, BaseMarkStyleProps, ChannelAccessor, DataRow } from '../types.js';
+import type { StackOptions } from '../transforms/stack.js';
+export type BarXMarkProps = MarkProps & BaseMarkStyleProps & {
+    data: DataRow[];
+    x?: ChannelAccessor;
+    x1?: ChannelAccessor;
+    x2?: ChannelAccessor;
+    y?: ChannelAccessor;
+    inset: number;
+    stack: StackOptions;
+};
+declare const __propDef: {
+    props: BarXMarkProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type BarXProps = typeof __propDef.props;
+export type BarXEvents = typeof __propDef.events;
+export type BarXSlots = typeof __propDef.slots;
+export default class BarX extends SvelteComponent<BarXProps, BarXEvents, BarXSlots> {
+}
+export {};

package/dist/marks/BarY.svelte

@@ -0,0 +1,52 @@
+<script context="module"></script>
+
+<script>import { getContext } from "svelte";
+import BaseMark from "./BaseMark.svelte";
+import getBaseStyles from "../helpers/getBaseStyles.js";
+import resolveChannel from "../helpers/resolveChannel.js";
+import { stackY } from "../transforms/stack.js";
+import { recordizeY } from "../transforms/recordize.js";
+const BaseMark_BarY = BaseMark;
+const plot = getContext("svelteplot");
+let { data: rawData, insetLeft, insetRight, ...rawChannels } = $props();
+let { data, ...channels } = $derived(stackY(recordizeY({ data: rawData, ...rawChannels })));
+function isValid(value) {
+  return value !== null && !Number.isNaN(value);
+}
+</script>
+
+<BaseMark_BarY type="bar-y" {data} channels={['x', 'y1', 'y2', 'fill', 'stroke']} {...channels}>
+    <g class="bars-y">
+        {#each data as datum}
+            {@const cx = resolveChannel('x', datum, channels)}
+            {@const cy1 = resolveChannel('y1', datum, channels)}
+            {@const cy2 = resolveChannel('y2', datum, channels)}
+            {@const miny = Math.min(plot.yScale(cy1), plot.yScale(cy2))}
+            {@const maxy = Math.max(plot.yScale(cy1), plot.yScale(cy2))}
+            {@const maybeFillColor = resolveChannel('fill', datum, channels)}
+            {@const maybeStrokeColor = resolveChannel('stroke', datum, channels)}
+            {#if isValid(cx) && isValid(cy1) && isValid(cy2)}
+                <rect
+                    style={getBaseStyles(datum, channels)}
+                    style:fill={maybeFillColor
+                        ? plot.colorScale(maybeFillColor)
+                        : maybeStrokeColor
+                          ? null
+                          : 'currentColor'}
+                    style:stroke={maybeStrokeColor ? plot.colorScale(maybeStrokeColor) : null}
+                    transform="translate({[plot.xScale(cx), miny]})"
+                    height={maxy - miny}
+                    width={plot.xScale.bandwidth()}
+                />
+            {/if}
+        {/each}
+    </g>
+</BaseMark_BarY>
+
+<style>
+    rect {
+        fill: none;
+        stroke: none;
+        stroke-width: 1.6px;
+    }
+</style>

package/dist/marks/BarY.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponent } from "svelte";
+import type { MarkProps, BaseMarkStyleProps, ChannelAccessor, DataRow } from '../types.js';
+import type { StackOptions } from '../transforms/stack.js';
+export type BarYMarkProps = MarkProps & BaseMarkStyleProps & {
+    data: DataRow[];
+    x?: ChannelAccessor;
+    y?: ChannelAccessor;
+    y1?: ChannelAccessor;
+    y2?: ChannelAccessor;
+    stack: StackOptions;
+    inset: number;
+};
+declare const __propDef: {
+    props: BarYMarkProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type BarYProps = typeof __propDef.props;
+export type BarYEvents = typeof __propDef.events;
+export type BarYSlots = typeof __propDef.slots;
+export default class BarY extends SvelteComponent<BarYProps, BarYEvents, BarYSlots> {
+}
+export {};

package/dist/marks/BaseMark.svelte

@@ -3,8 +3,15 @@
 <script generics="T extends BaseMarkProps">import { Mark } from "../classes/Mark.svelte";
 import { getContext } from "svelte";
 const plot = getContext("svelteplot");
-let { type, data = [], channels = [], children, automatic, ...rest } = $props();
-const mark = new Mark(type, channels, automatic, { data, ...rest });
+let {
+  type,
+  data = [],
+  channels = [],
+  children,
+  automatic,
+  ...rest
+} = $props();
+const mark = new Mark(type, channels, !!automatic, { data, ...rest });
 plot.addMark(mark);
 $effect(() => {
   mark.channels = new Set(channels);

package/dist/marks/BaseMark.svelte.d.ts

@@ -1,8 +1,9 @@
 import { SvelteComponent } from "svelte";
 import type { BaseMarkProps } from '../types.js';
+import { type Snippet } from 'svelte';
 declare class __sveltets_Render<T extends BaseMarkProps> {
     props(): T & {
-        children?: Function | undefined;
+        children?: Snippet<void> | undefined;
     };
     events(): {} & {
         [evt: string]: CustomEvent<any>;

package/dist/marks/Dot.svelte

@@ -1,65 +1,51 @@
+<script context="module"></script>
+
 <script>import { getContext } from "svelte";
-import { symbol as d3Symbol } from "d3-shape";
 import BaseMark from "./BaseMark.svelte";
-import resolveChannel from "../helpers/resolveChannel.js";
 import getBaseStyles from "../helpers/getBaseStyles.js";
+import resolveChannel from "../helpers/resolveChannel.js";
 import { isSymbol, maybeSymbol } from "../helpers/symbols.js";
+import { symbol as d3Symbol } from "d3-shape";
 const BaseMark_Dot = BaseMark;
 const plot = getContext("svelteplot");
-let {
-  data,
-  x = null,
-  y = null,
-  r = 3,
-  symbol = "circle",
-  stroke = null,
-  fill = null,
-  ...styleProps
-} = $props();
-let styleProps2 = $derived({
-  ...styleProps,
-  ...!styleProps.fill && !styleProps.stroke ? { stroke: "currentColor" } : {}
-});
+let { data, ...channels } = $props();
+let { r = 3, symbol = "circle" } = $derived(channels);
+let channelsWithDefaults = $derived({ ...channels, r, symbol });
+$inspect(channelsWithDefaults);
 function isValid(value) {
   return value !== null && !Number.isNaN(value);
 }
+function getSymbolPath(symbolT, size) {
+  const symbolType = isSymbol(symbolT) ? maybeSymbol(symbolT) : maybeSymbol(plot.symbolScale(symbolT));
+  return d3Symbol(symbolType, size)();
+}
 </script>
 
 <BaseMark_Dot
     type="dot"
     {data}
-    channels={[
-        ...(x ? ['x'] : []),
-        ...(y ? ['y'] : []),
-        ...(r ? ['radius'] : []),
-        ...(symbol ? ['symbol'] : []),
-        ...(fill || stroke ? ['color'] : [])
-    ]}
-    {x}
-    {y}
-    {r}
-    {fill}
-    {stroke}
-    {symbol}
-    {...styleProps}
+    channels={['x', 'y', 'r', 'symbol', 'fill', 'stroke']}
+    {...channels}
 >
     <g class="dots">
         {#each data as datum, i}
-            {@const cx = resolveChannel('x', datum, x)}
-            {@const cy = resolveChannel('y', datum, y)}
-            {@const symbolT = resolveChannel('symbol', datum, symbol)}
+            {@const cx = resolveChannel('x', datum, channelsWithDefaults)}
+            {@const cy = resolveChannel('y', datum, channelsWithDefaults)}
+            {@const maybeFillColor = resolveChannel('fill', datum, channelsWithDefaults)}
+            {@const maybeStrokeColor = resolveChannel('stroke', datum, channelsWithDefaults)}
+            {@const radius =
+                typeof r === 'number'
+                    ? r
+                    : plot.radiusScale(resolveChannel('r', datum, channelsWithDefaults))}
+            {@const size = radius * radius * Math.PI}
+            {@const symbolT = resolveChannel('symbol', datum, channelsWithDefaults)}
             {@const symbolType = isSymbol(symbolT)
                 ? maybeSymbol(symbolT)
                 : maybeSymbol(plot.symbolScale(symbolT))}
-            {@const radius =
-                typeof r === 'number' ? r : plot.radiusScale(resolveChannel('radius', datum, r))}
-            {@const size = radius * radius * Math.PI}
-            {@const maybeFillColor = resolveChannel('color', datum, fill)}
-            {@const maybeStrokeColor = resolveChannel('color', datum, stroke)}
             {#if isValid(cx) && isValid(cy)}
                 <path
-                    d={d3Symbol(symbolType, size)()}
-                    style={getBaseStyles(datum, styleProps)}
+                    d={getSymbolPath(symbolType, size)}
+                    style={getBaseStyles(datum, channels)}
                     style:fill={maybeFillColor ? plot.colorScale(maybeFillColor) : null}
                     style:stroke={maybeStrokeColor
                         ? plot.colorScale(maybeStrokeColor)

package/dist/marks/Dot.svelte.d.ts

@@ -1,5 +1,13 @@
 import { SvelteComponent } from "svelte";
-import type { DotMarkProps } from '../types.js';
+import type { MarkProps, BaseMarkStyleProps, ChannelAccessor, DataRow } from '../types.js';
+export type DotMarkProps = MarkProps & BaseMarkStyleProps & {
+    data: DataRow[];
+    x?: ChannelAccessor;
+    y?: ChannelAccessor;
+    r?: ChannelAccessor;
+    rotate?: ChannelAccessor;
+    symbol?: ChannelAccessor;
+};
 declare const __propDef: {
     props: DotMarkProps;
     events: {