layerchart 0.33.0 → 0.35.0

package/dist/components/Axis.svelte

@@ -18,7 +18,7 @@ export let grid = false;
 /** Control the number of ticks*/
 export let ticks = placement === 'left' || placement === 'right' ? 4 : undefined;
 /** Length of the tick line */
-export let tickSize = 4;
+export let tickLength = 4;
 export let format = undefined;
 export let labelProps = undefined;
 export let spring = undefined;
@@ -38,9 +38,11 @@ $: [xRangeMin, xRangeMax] = extent($xRange);
 $: [yRangeMin, yRangeMax] = extent($yRange);
 $: tickVals = Array.isArray(ticks)
     ? ticks
-    : isScaleBand(scale)
-        ? scale.domain()
-        : scale.ticks(typeof ticks === 'function' ? ticks(scale) : ticks);
+    : typeof ticks === 'function'
+        ? ticks(scale)
+        : isScaleBand(scale)
+            ? scale.domain()
+            : scale.ticks(ticks);
 function getCoords(tick) {
     switch (placement) {
         case 'top':
@@ -164,9 +166,22 @@ function getDefaultLabelProps(tick) {
     {/if}
   {/if}
 
-  {#each tickVals as tick (tick)}
+  {#each tickVals as tick, index (tick)}
     {@const tickCoords = getCoords(tick)}
     {@const radialTickCoords = pointRadial(tickCoords.x, tickCoords.y)}
+    {@const textLabelProps = {
+      x: orientation === 'angle' ? radialTickCoords[0] : tickCoords.x,
+      y: orientation === 'angle' ? radialTickCoords[1] : tickCoords.y,
+      value: formatValue(tick, format ?? scale.tickFormat?.() ?? ((v) => v)),
+      ...getDefaultLabelProps(tick),
+      tweened,
+      spring,
+      ...labelProps,
+      class: cls(
+        'label text-[10px] stroke-surface-100 [stroke-width:2px] font-light',
+        labelProps?.class
+      ),
+    }}
 
     <g in:transitionIn={transitionInParams}>
       {#if grid !== false}
@@ -222,7 +237,7 @@ function getDefaultLabelProps(tick) {
           x1={tickCoords.x}
           y1={tickCoords.y}
           x2={tickCoords.x}
-          y2={tickCoords.y + (placement === 'top' ? -tickSize : tickSize)}
+          y2={tickCoords.y + (placement === 'top' ? -tickLength : tickLength)}
           {tweened}
           {spring}
           class="tick stroke-surface-content/50"
@@ -231,7 +246,7 @@ function getDefaultLabelProps(tick) {
         <Line
           x1={tickCoords.x}
           y1={tickCoords.y}
-          x2={tickCoords.x + (placement === 'left' ? -tickSize : tickSize)}
+          x2={tickCoords.x + (placement === 'left' ? -tickLength : tickLength)}
           y2={tickCoords.y}
           {tweened}
           {spring}
@@ -239,19 +254,9 @@ function getDefaultLabelProps(tick) {
         />
       {/if}
 
-      <Text
-        x={orientation === 'angle' ? radialTickCoords[0] : tickCoords.x}
-        y={orientation === 'angle' ? radialTickCoords[1] : tickCoords.y}
-        value={formatValue(tick, format ?? scale.tickFormat?.() ?? ((v) => v))}
-        {...getDefaultLabelProps(tick)}
-        {tweened}
-        {spring}
-        {...labelProps}
-        class={cls(
-          'label text-[10px] stroke-surface-100 [stroke-width:2px] font-light',
-          labelProps?.class
-        )}
-      />
+      <slot name="label" labelProps={textLabelProps} {index}>
+        <Text {...textLabelProps} />
+      </slot>
     </g>
   {/each}
 </g>

package/dist/components/Axis.svelte.d.ts

@@ -11,7 +11,7 @@ declare const __propDef: {
         /** Draw a rule line.  Use Rule component for greater rendering order control */ rule?: boolean | SVGAttributes<SVGLineElement> | undefined;
         /** Draw a grid lines */ grid?: boolean | SVGAttributes<SVGLineElement> | undefined;
         /** Control the number of ticks*/ ticks?: number | any[] | Function | undefined;
-        /** Length of the tick line */ tickSize?: number | undefined;
+        /** Length of the tick line */ tickLength?: number | undefined;
         format?: FormatType | undefined;
         labelProps?: Partial<ComponentProps<Text>> | undefined;
         spring?: boolean | Parameters<typeof springStore>[1];
@@ -22,7 +22,12 @@ declare const __propDef: {
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        label: {
+            labelProps: any;
+            index: any;
+        };
+    };
 };
 export type AxisProps = typeof __propDef.props;
 export type AxisEvents = typeof __propDef.events;

package/dist/components/ChartClipPath.svelte

@@ -1,13 +1,15 @@
 <script>import { getContext } from 'svelte';
 import RectClipPath from './RectClipPath.svelte';
 const { width, height, padding } = getContext('LayerCake');
+/** Whether clipping should include chart padding (ex. axis) */
+export let includePadding = false;
 </script>
 
 <RectClipPath
-  x={-$padding.left}
-  y={-$padding.top}
-  width={$width + $padding.left + $padding.right}
-  height={$height + $padding.top + $padding.bottom}
+  x={includePadding ? -$padding.left : 0}
+  y={includePadding ? -$padding.top : 0}
+  width={$width + (includePadding ? $padding.left + $padding.right : 0)}
+  height={$height + (includePadding ? $padding.top + $padding.bottom : 0)}
   on:click
   {...$$restProps}
 >

package/dist/components/ChartClipPath.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        includePadding?: boolean | undefined;
     };
     events: {
         click: CustomEvent<any>;

package/dist/components/ForceSimulation.svelte

@@ -0,0 +1,49 @@
+<script>import { getContext } from 'svelte';
+import { forceSimulation } from 'd3-force';
+const { data } = getContext('LayerCake');
+export let forces;
+export let alpha = 1;
+export let alphaTarget = 0;
+export let alphaDecay = 1 - Math.pow(0.001, 1 / 300);
+export let alphaMin = 0.001;
+export let velocityDecay = 0.4;
+/** Clone data since simulation mutates original */
+export let cloneData = false;
+let _static = false;
+/** If true, will only update nodes after simulation has completed */
+export { _static as static };
+let simulation = forceSimulation(cloneData ? structuredClone($data) : $data);
+$: {
+    simulation
+        .alpha(alpha)
+        .alphaTarget(alphaTarget)
+        .alphaMin(alphaMin)
+        .alphaDecay(alphaDecay)
+        .velocityDecay(velocityDecay)
+        .restart();
+    if (_static) {
+        // TODO: Not sure why it needs to be recreated when static
+        simulation = forceSimulation(cloneData ? structuredClone($data) : $data);
+        simulation.stop();
+        Object.entries(forces).forEach(([name, force]) => {
+            simulation.force(name, force);
+        });
+        for (let i = 0, n = Math.ceil(Math.log(simulation.alphaMin()) / Math.log(1 - simulation.alphaDecay())); i < n; ++i) {
+            simulation.tick();
+        }
+        nodes = simulation.nodes();
+    }
+    else {
+        // When variables change, set forces and restart the simulation
+        Object.entries(forces).forEach(([name, force]) => {
+            simulation.force(name, force);
+        });
+    }
+}
+let nodes = [];
+simulation.on('tick', () => {
+    nodes = simulation.nodes();
+});
+</script>
+
+<slot {nodes} {simulation} />

package/dist/components/ForceSimulation.svelte.d.ts

@@ -0,0 +1,29 @@
+import { SvelteComponentTyped } from "svelte";
+import { type Force } from 'd3-force';
+declare const __propDef: {
+    props: {
+        forces: Record<string, Force<any, any>>;
+        alpha?: number | undefined;
+        alphaTarget?: number | undefined;
+        alphaDecay?: number | undefined;
+        alphaMin?: number | undefined;
+        velocityDecay?: number | undefined;
+        /** Clone data since simulation mutates original */ cloneData?: boolean | undefined;
+        /** If true, will only update nodes after simulation has completed */ static?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            nodes: any[];
+            simulation: import("d3-force").Simulation<import("d3-force").SimulationNodeDatum, undefined>;
+        };
+    };
+};
+export type ForceSimulationProps = typeof __propDef.props;
+export type ForceSimulationEvents = typeof __propDef.events;
+export type ForceSimulationSlots = typeof __propDef.slots;
+export default class ForceSimulation extends SvelteComponentTyped<ForceSimulationProps, ForceSimulationEvents, ForceSimulationSlots> {
+}
+export {};

package/dist/components/GeoCircle.svelte

@@ -9,4 +9,4 @@ export let precision = 6;
 $: geojson = geoCircle().radius(radius).center(center).precision(precision)();
 </script>
 
-<GeoPath {geojson} {...$$restProps} />
+<GeoPath {geojson} {...$$restProps} on:mousemove on:mouseleave on:click />

package/dist/components/GeoCircle.svelte.d.ts

@@ -7,6 +7,10 @@ declare const __propDef: {
         precision?: number | undefined;
     };
     events: {
+        mousemove: MouseEvent;
+        mouseleave: MouseEvent;
+        click: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/dist/components/GeoPath.svelte

@@ -1,8 +1,10 @@
 <script>import { createEventDispatcher, getContext } from 'svelte';
-import { geoPath as d3geoPath } from 'd3-geo';
+import {} from 'd3-geo';
 import { scaleCanvas } from 'layercake';
 import { cls } from 'svelte-ux';
 import { geoContext } from './GeoContext.svelte';
+import { curveLinearClosed } from 'd3-shape';
+import { geoCurvePath } from '../utils/geo.js';
 export let geojson;
 export let fill = undefined;
 export let stroke = undefined;
@@ -13,11 +15,21 @@ export let render = undefined;
  * Tooltip context to setup mouse events to show tooltip for related data
  */
 export let tooltip = undefined;
+/**
+ * Curve of path drawn. Imported via d3-shape.
+ *
+ * @example
+ * import { curveCatmullRom } from 'd3-shape';
+ * <GeoPath curve={curveCatmullRom} />
+ *
+ * @type {CurveFactory | CurveFactoryLineOnly | undefined}
+ */
+export let curve = curveLinearClosed;
 const dispatch = createEventDispatcher();
-const { rGet, width, height } = getContext('LayerCake');
+const { width, height } = getContext('LayerCake');
 const canvas = getContext('canvas');
 const geo = geoContext();
-$: geoPath = d3geoPath($geo);
+$: geoPath = geoCurvePath($geo, curve);
 $: renderContext = canvas ? 'canvas' : 'svg';
 $: ctx = canvas?.ctx;
 $: if (renderContext === 'canvas' && $ctx) {
@@ -25,12 +37,13 @@ $: if (renderContext === 'canvas' && $ctx) {
     scaleCanvas($ctx, $width, $height);
     $ctx.clearRect(0, 0, $width, $height);
     if (render) {
+        geoPath = geoCurvePath($geo, curve, $ctx);
         render($ctx, { geoPath });
     }
     else {
         $ctx.beginPath();
         // Set the context here since setting it in `$: geoPath` is a circular reference
-        geoPath.context($ctx);
+        geoPath = geoCurvePath($geo, curve, $ctx);
         geoPath(geojson);
         $ctx.fillStyle = fill || 'transparent';
         $ctx.fill();

package/dist/components/GeoPath.svelte.d.ts

@@ -1,6 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
-import { type GeoPath, type GeoPermissibleObjects } from 'd3-geo';
+import { type GeoPermissibleObjects } from 'd3-geo';
 import type { TooltipContextValue } from './TooltipContext.svelte';
+import { type CurveFactory, type CurveFactoryLineOnly } from 'd3-shape';
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -12,6 +13,7 @@ declare const __propDef: {
             geoPath: any;
         }) => any) | undefined;
         tooltip?: TooltipContextValue | undefined;
+        curve?: CurveFactory | CurveFactoryLineOnly | undefined;
     };
     events: {
         mousemove: MouseEvent;
@@ -22,7 +24,7 @@ declare const __propDef: {
     };
     slots: {
         default: {
-            geoPath: GeoPath<any, GeoPermissibleObjects>;
+            geoPath: (object: GeoPermissibleObjects) => string | undefined;
         };
     };
 };

package/dist/components/GeoVisible.svelte

@@ -0,0 +1,12 @@
+<script>import { geoContext } from './GeoContext.svelte';
+import { isVisible } from '../utils/geo.js';
+/** Latitude */
+export let lat;
+/** Longitude */
+export let long;
+const geo = geoContext();
+</script>
+
+{#if isVisible($geo)([long, lat])}
+  <slot />
+{/if}

package/dist/components/GeoVisible.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        /** Latitude */ lat: number;
+        /** Longitude */ long: number;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type GeoVisibleProps = typeof __propDef.props;
+export type GeoVisibleEvents = typeof __propDef.events;
+export type GeoVisibleSlots = typeof __propDef.slots;
+export default class GeoVisible extends SvelteComponentTyped<GeoVisibleProps, GeoVisibleEvents, GeoVisibleSlots> {
+}
+export {};

package/dist/components/Hull.svelte

@@ -0,0 +1,53 @@
+<script>import { createEventDispatcher, getContext } from 'svelte';
+import { cls } from 'svelte-ux';
+import { min } from 'd3-array';
+import { Delaunay } from 'd3-delaunay';
+import { geoVoronoi } from 'd3-geo-voronoi';
+import GeoPath from './GeoPath.svelte';
+import { geoContext } from './GeoContext.svelte';
+import Spline from './Spline.svelte';
+import { curveLinearClosed } from 'd3-shape';
+const { flatData, x: xContext, y: yContext } = getContext('LayerCake');
+const geo = geoContext();
+/** Override data instead of using context */
+export let data = undefined;
+export let curve = curveLinearClosed;
+export let classes = {};
+const dispatch = createEventDispatcher();
+$: points = (data ?? $flatData).map((d) => {
+    const xValue = $xContext(d);
+    const yValue = $yContext(d);
+    const x = Array.isArray(xValue) ? min(xValue) : xValue;
+    const y = Array.isArray(yValue) ? min(yValue) : yValue;
+    const point = [x, y];
+    point.data = d;
+    return point;
+});
+</script>
+
+<g {...$$restProps} class={cls(classes.root, $$props.class)}>
+  {#if $geo}
+    {@const polygon = geoVoronoi().hull(points)}
+    <GeoPath
+      geojson={polygon}
+      {curve}
+      class={cls('fill-transparent', classes.path)}
+      on:mousemove={(e) => dispatch('mousemove', { event: e, points, polygon })}
+      on:mouseleave
+      on:click={(e) => dispatch('click', { points, polygon })}
+    />
+  {:else}
+    {@const delaunay = Delaunay.from(points)}
+    {@const polygon = delaunay.hullPolygon()}
+    <Spline
+      data={polygon}
+      x={(d) => d[0]}
+      y={(d) => d[1]}
+      {curve}
+      class={cls('fill-transparent', classes.path)}
+      on:mousemove={(e) => dispatch('mousemove', { event: e, points, polygon })}
+      on:mouseleave
+      on:click={(e) => dispatch('click', { points, polygon })}
+    />
+  {/if}
+</g>

package/dist/components/Hull.svelte.d.ts

@@ -0,0 +1,36 @@
+import { SvelteComponentTyped } from "svelte";
+import { type ComponentProps } from 'svelte';
+import { Delaunay } from 'd3-delaunay';
+import Spline from './Spline.svelte';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        data?: any;
+        curve?: ComponentProps<Spline>['curve'];
+        classes?: {
+            root?: string | undefined;
+            path?: string | undefined;
+        } | undefined;
+    };
+    events: {
+        mouseleave: MouseEvent;
+        click: CustomEvent<{
+            points: [number, number][];
+            polygon: Delaunay.Polygon;
+        }>;
+        mousemove: CustomEvent<{
+            event: MouseEvent;
+            points: [number, number][];
+            polygon: Delaunay.Polygon;
+        }>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type HullProps = typeof __propDef.props;
+export type HullEvents = typeof __propDef.events;
+export type HullSlots = typeof __propDef.slots;
+export default class Hull extends SvelteComponentTyped<HullProps, HullEvents, HullSlots> {
+}
+export {};

package/dist/components/Legend.svelte

@@ -14,7 +14,7 @@ export let ticks = width / 64;
 export let tickFormat = undefined;
 export let tickValues = undefined;
 export let tickFontSize = 10;
-export let tickSize = 4;
+export let tickLength = 4;
 export let placement = undefined;
 export let classes = {};
 $: if (scale == null && rScale) {
@@ -96,7 +96,7 @@ else {
     tickValues = scale.domain();
     tickLabelOffset = xScale.bandwidth() / 2;
     tickLine = false;
-    tickSize = 0;
+    tickLength = 0;
 }
 </script>
 
@@ -126,8 +126,8 @@ else {
   <slot values={tickValues} {scale}>
     <svg
       {width}
-      height={height + tickSize + tickFontSize}
-      viewBox="0 0 {width} {height + tickSize + tickFontSize}"
+      height={height + tickLength + tickFontSize}
+      viewBox="0 0 {width} {height + tickLength + tickFontSize}"
       class="overflow-visible"
     >
       <g>
@@ -145,7 +145,7 @@ else {
           <text
             text-anchor="middle"
             x={xScale(tick) + tickLabelOffset}
-            y={height + tickSize + tickFontSize}
+            y={height + tickLength + tickFontSize}
             style:font-size={tickFontSize}
             class={cls('fill-surface-content', classes.label)}
           >
@@ -157,7 +157,7 @@ else {
               x1={xScale(tick)}
               y1={0}
               x2={xScale(tick)}
-              y2={height + tickSize}
+              y2={height + tickLength}
               class={cls('stroke-surface-content', classes.tick)}
             />
           {/if}

package/dist/components/Legend.svelte.d.ts

@@ -11,7 +11,7 @@ declare const __propDef: {
         tickFormat?: FormatType | undefined;
         tickValues?: any[] | undefined;
         tickFontSize?: number | undefined;
-        tickSize?: number | undefined;
+        tickLength?: number | undefined;
         placement?: ("center" | "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
         classes?: {
             root?: string | undefined;

package/dist/components/Points.svelte

@@ -6,7 +6,9 @@ import Link from './Link.svelte';
 import { isScaleBand } from '../utils/scales.js';
 import { pointRadial } from 'd3-shape';
 const context = getContext('LayerCake');
-const { data, xGet, y, yGet, xScale, yScale, rGet, config } = context;
+const { data: contextData, xGet, y, yGet, xScale, yScale, rGet, config } = context;
+/** Override data instead of using context */
+export let data = undefined;
 export let r = 5;
 export let offsetX = undefined;
 export let offsetY = undefined;
@@ -28,7 +30,8 @@ function getOffset(value, offset, scale) {
         return 0;
     }
 }
-$: points = $data.flatMap((d) => {
+$: pointsData = data ?? $contextData;
+$: points = pointsData.flatMap((d) => {
     if (Array.isArray($config.x)) {
         /*
                   x={["prop1" ,"prop2"]}
@@ -71,7 +74,7 @@ $: points = $data.flatMap((d) => {
         };
     }
 });
-$: _links = $data.flatMap((d) => {
+$: _links = pointsData.flatMap((d) => {
     if (Array.isArray($config.x)) {
         /*
                   x={["prop1" ,"prop2"]}

package/dist/components/Points.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        data?: any;
         r?: number | undefined;
         offsetX?: number | ((value: number, context: any) => number) | undefined;
         offsetY?: number | ((value: number, context: any) => number) | undefined;

package/dist/components/Voronoi.svelte

@@ -1,5 +1,4 @@
 <script>import { createEventDispatcher, getContext } from 'svelte';
-import { draw as _drawTransition } from 'svelte/transition';
 import { cls } from 'svelte-ux';
 import { min } from 'd3-array';
 import { Delaunay } from 'd3-delaunay';

package/dist/components/index.d.ts

@@ -2,6 +2,7 @@ export { default as Arc } from './Arc.svelte';
 export { default as Area } from './Area.svelte';
 export { default as AreaStack } from './AreaStack.svelte';
 export { default as Axis } from './Axis.svelte';
+export { default as Bar } from './Bar.svelte';
 export { default as Bars } from './Bars.svelte';
 export { default as Blur } from './Blur.svelte';
 export { default as Bounds } from './Bounds.svelte';
@@ -13,6 +14,7 @@ export { default as CircleClipPath } from './CircleClipPath.svelte';
 export { default as ClipPath } from './ClipPath.svelte';
 export { default as ColorRamp } from './ColorRamp.svelte';
 export { default as Frame } from './Frame.svelte';
+export { default as ForceSimulation } from './ForceSimulation.svelte';
 export { default as GeoCircle } from './GeoCircle.svelte';
 export { default as GeoContext, geoContext } from './GeoContext.svelte';
 export { default as GeoEdgeFade } from './GeoEdgeFade.svelte';
@@ -20,9 +22,11 @@ export { default as GeoPath } from './GeoPath.svelte';
 export { default as GeoPoint } from './GeoPoint.svelte';
 export { default as GeoSpline } from './GeoSpline.svelte';
 export { default as GeoTile } from './GeoTile.svelte';
+export { default as GeoVisible } from './GeoVisible.svelte';
 export { default as Graticule } from './Graticule.svelte';
 export { default as Group } from './Group.svelte';
 export { default as Highlight } from './Highlight.svelte';
+export { default as Hull } from './Hull.svelte';
 export { default as Labels } from './Labels.svelte';
 export { default as Legend } from './Legend.svelte';
 export { default as Line } from './Line.svelte';

package/dist/components/index.js

@@ -2,6 +2,7 @@ export { default as Arc } from './Arc.svelte';
 export { default as Area } from './Area.svelte';
 export { default as AreaStack } from './AreaStack.svelte';
 export { default as Axis } from './Axis.svelte';
+export { default as Bar } from './Bar.svelte';
 export { default as Bars } from './Bars.svelte';
 export { default as Blur } from './Blur.svelte';
 export { default as Bounds } from './Bounds.svelte';
@@ -13,6 +14,7 @@ export { default as CircleClipPath } from './CircleClipPath.svelte';
 export { default as ClipPath } from './ClipPath.svelte';
 export { default as ColorRamp } from './ColorRamp.svelte';
 export { default as Frame } from './Frame.svelte';
+export { default as ForceSimulation } from './ForceSimulation.svelte';
 export { default as GeoCircle } from './GeoCircle.svelte';
 export { default as GeoContext, geoContext } from './GeoContext.svelte';
 export { default as GeoEdgeFade } from './GeoEdgeFade.svelte';
@@ -20,9 +22,11 @@ export { default as GeoPath } from './GeoPath.svelte';
 export { default as GeoPoint } from './GeoPoint.svelte';
 export { default as GeoSpline } from './GeoSpline.svelte';
 export { default as GeoTile } from './GeoTile.svelte';
+export { default as GeoVisible } from './GeoVisible.svelte';
 export { default as Graticule } from './Graticule.svelte';
 export { default as Group } from './Group.svelte';
 export { default as Highlight } from './Highlight.svelte';
+export { default as Hull } from './Hull.svelte';
 export { default as Labels } from './Labels.svelte';
 export { default as Legend } from './Legend.svelte';
 export { default as Line } from './Line.svelte';

package/dist/docs/CurveMenuField.svelte

@@ -1,20 +1,20 @@
-<script>import { onMount } from 'svelte';
-import * as d3shapes from 'd3-shape';
-import { MenuField } from 'svelte-ux';
-export let value = undefined;
-const options = Object.keys(d3shapes)
-    .filter((key) => key.startsWith('curve'))
-    .filter((key) => !key.endsWith('Open') && !key.endsWith('Closed'))
-    .filter((key) => !key.includes('Bundle')) // Not compatibile with area
-    .map((key) => {
+<script>import * as d3shapes from 'd3-shape';
+import { MenuField, entries } from 'svelte-ux';
+export let value = d3shapes['curveLinear'];
+export let showOpenClosed = false;
+const options = entries(d3shapes)
+    .filter(([key]) => {
+    return (key.startsWith('curve') &&
+        (showOpenClosed ? true : !key.endsWith('Open') && !key.endsWith('Closed')) &&
+        !key.includes('Bundle') // Not compatibile with area
+    );
+})
+    .map(([key, value]) => {
     return {
         label: key.replace('curve', ''),
-        value: d3shapes[key]
+        value: value,
     };
 });
-onMount(() => {
-    value = d3shapes['curveLinear'];
-});
 </script>
 
 <MenuField label="Curve" {options} bind:value stepper classes={{ menuIcon: 'hidden' }} />

package/dist/docs/CurveMenuField.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         value?: any | undefined;
+        showOpenClosed?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/utils/geo.d.ts

@@ -1,5 +1,18 @@
+import { type GeoPermissibleObjects, type GeoProjection, type GeoStreamWrapper } from 'd3-geo';
+import { type Path } from 'd3-path';
+import { type CurveFactory, type CurveFactoryLineOnly } from 'd3-shape';
+/**
+ * Render a geoPath() using curve factory
+ * @see {@link https://observablehq.com/@d3/context-to-curve}
+ */
+export declare function geoCurvePath(projection: GeoProjection | GeoStreamWrapper | null, curve: CurveFactory | CurveFactoryLineOnly, context?: CanvasRenderingContext2D | Path): (object: GeoPermissibleObjects) => string | undefined;
 /**
  * Return the point on Earth's surface that is diametrically opposite to another point
  * @see: https://en.wikipedia.org/wiki/Antipodes
  */
 export declare function antipode([longitude, latitude]: [number, number]): [number, number];
+/**
+ * Check if point ([x, y]) is visible on projection
+ * @see: https://observablehq.com/@d3/testing-projection-visibility
+ */
+export declare function isVisible(projection: GeoProjection | GeoStreamWrapper): ([x, y]: [any, any]) => boolean;

package/dist/utils/geo.js

@@ -1,3 +1,44 @@
+import { geoPath as d3geoPath, } from 'd3-geo';
+import { path } from 'd3-path';
+import {} from 'd3-shape';
+/**
+ * Render a geoPath() using curve factory
+ * @see {@link https://observablehq.com/@d3/context-to-curve}
+ */
+export function geoCurvePath(projection, curve, context) {
+    const pathContext = context === undefined ? path() : context;
+    const geoPath = d3geoPath(projection, curveContext(curve(pathContext)));
+    const fn = (object) => {
+        geoPath(object);
+        return context === undefined ? pathContext + '' : undefined;
+    };
+    // Expose geoPath properties such as `.centroid()`
+    Object.setPrototypeOf(fn, geoPath);
+    return fn;
+}
+/**
+ * Translate Curve to GeoContext interface
+ */
+function curveContext(curve) {
+    return {
+        beginPath() {
+            // nothing?
+        },
+        moveTo(x, y) {
+            curve.lineStart();
+            curve.point(x, y);
+        },
+        arc(x, y, radius, startAngle, endAngle, anticlockwise) {
+            // nothing?
+        },
+        lineTo(x, y) {
+            curve.point(x, y);
+        },
+        closePath() {
+            curve.lineEnd();
+        },
+    };
+}
 /**
  * Return the point on Earth's surface that is diametrically opposite to another point
  * @see: https://en.wikipedia.org/wiki/Antipodes
@@ -5,3 +46,16 @@
 export function antipode([longitude, latitude]) {
     return [longitude + 180, -latitude];
 }
+/**
+ * Check if point ([x, y]) is visible on projection
+ * @see: https://observablehq.com/@d3/testing-projection-visibility
+ */
+export function isVisible(projection) {
+    let visible;
+    const stream = projection.stream({
+        point() {
+            visible = true;
+        },
+    });
+    return ([x, y]) => ((visible = false), stream.point(x, y), visible);
+}

package/package.json

@@ -4,7 +4,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.33.0",
+  "version": "0.35.0",
   "devDependencies": {
     "@changesets/cli": "^2.27.1",
     "@mdi/js": "^7.4.47",
@@ -17,6 +17,7 @@
     "@types/d3-array": "^3.2.1",
     "@types/d3-delaunay": "^6.0.4",
     "@types/d3-dsv": "^3.0.7",
+    "@types/d3-force": "^3.0.9",
     "@types/d3-geo": "^3.1.0",
     "@types/d3-hierarchy": "^3.1.6",
     "@types/d3-interpolate": "^3.0.4",
@@ -32,6 +33,7 @@
     "@types/prismjs": "^1.26.3",
     "@types/shapefile": "^0.6.4",
     "@types/topojson-client": "^3.1.4",
+    "@types/topojson-simplify": "^3.0.3",
     "autoprefixer": "^10.4.18",
     "execa": "^8.0.1",
     "marked": "^12.0.1",
@@ -52,6 +54,7 @@
     "svelte2tsx": "^0.7.4",
     "tailwindcss": "^3.4.1",
     "topojson-client": "^3.1.0",
+    "topojson-simplify": "^3.0.3",
     "tslib": "^2.6.2",
     "typescript": "^5.4.2",
     "unist-util-visit": "^5.0.0",
@@ -65,11 +68,13 @@
     "d3-color": "^3.1.0",
     "d3-delaunay": "^6.0.4",
     "d3-dsv": "^3.0.1",
+    "d3-force": "^3.0.0",
     "d3-geo": "^3.1.1",
     "d3-geo-voronoi": "^2.0.1",
     "d3-hierarchy": "^3.1.2",
     "d3-interpolate": "^3.0.1",
     "d3-interpolate-path": "^2.3.0",
+    "d3-path": "^3.1.0",
     "d3-quadtree": "^3.0.1",
     "d3-random": "^3.0.1",
     "d3-sankey": "^0.12.3",
@@ -83,7 +88,7 @@
     "lodash-es": "^4.17.21",
     "posthog-js": "^1.116.0",
     "shapefile": "^0.6.6",
-    "svelte-ux": "^0.61.10",
+    "svelte-ux": "^0.62.0",
     "topojson-client": "^3.1.0"
   },
   "peerDependencies": {