diff --git a/.changeset/add-boxplot-component.md b/.changeset/add-boxplot-component.md new file mode 100644 index 000000000..c6d436426 --- /dev/null +++ b/.changeset/add-boxplot-component.md @@ -0,0 +1,7 @@ +--- +'layerchart': minor +--- + +feat: Add BoxPlot component for box-and-whisker plots + +New composite mark that renders whiskers, caps, IQR box, median line, and outlier dots. Supports both pre-computed statistics (`min`, `q1`, `median`, `q3`, `max`, `outliers` accessors) and automatic computation from raw values via the `values` prop. Orientation-aware via `valueAxis` context. diff --git a/.changeset/add-stats-utils.md b/.changeset/add-stats-utils.md new file mode 100644 index 000000000..f111cfb1d --- /dev/null +++ b/.changeset/add-stats-utils.md @@ -0,0 +1,8 @@ +--- +'layerchart': minor +--- + +feat: Add statistical utility functions `computeBoxStats()` and `kde()` + +- `computeBoxStats(values, k?)` computes the five-number summary and outliers using the Tukey IQR method +- `kde(values, options?)` computes kernel density estimation using the Epanechnikov kernel with Silverman's rule-of-thumb bandwidth diff --git a/.changeset/add-violin-component.md b/.changeset/add-violin-component.md new file mode 100644 index 000000000..cddfe4c91 --- /dev/null +++ b/.changeset/add-violin-component.md @@ -0,0 +1,7 @@ +--- +'layerchart': minor +--- + +feat: Add Violin component for violin plots + +New composite mark that renders a symmetric density curve (mirrored area) from raw data using kernel density estimation (Epanechnikov kernel). Supports pre-computed density data via `density` prop or automatic KDE from raw values via `values` prop. Optional `box` and `median` overlays. Configurable `bandwidth`, `thresholds`, and `curve`. diff --git a/.changeset/afraid-jobs-say.md b/.changeset/afraid-jobs-say.md new file mode 100644 index 000000000..6a705dae3 --- /dev/null +++ b/.changeset/afraid-jobs-say.md @@ -0,0 +1,5 @@ +--- +'layerchart': minor +--- + +feat(Spline): Support geo projection diff --git a/.changeset/area-y0-baseline-default.md b/.changeset/area-y0-baseline-default.md new file mode 100644 index 000000000..7ca9f297a --- /dev/null +++ b/.changeset/area-y0-baseline-default.md @@ -0,0 +1,7 @@ +--- +'layerchart': patch +--- + +fix(Area): Default y0 baseline to chart's yBaseline when set + +Area's y0 fallback now respects the chart's `yBaseline` prop (e.g. `yBaseline={0}` set by AreaChart) instead of always using `min(yScale.domain())`. This fixes areas filling to the bottom of the chart instead of to the baseline when data goes negative. diff --git a/.changeset/blue-rules-feel.md b/.changeset/blue-rules-feel.md new file mode 100644 index 000000000..9ba95babe --- /dev/null +++ b/.changeset/blue-rules-feel.md @@ -0,0 +1,5 @@ +--- +'layerchart': patch +--- + +fix(Points|Labels): Correctly position when using x1 / y1 scales (issue #773) diff --git a/.changeset/breezy-oranges-drive.md b/.changeset/breezy-oranges-drive.md new file mode 100644 index 000000000..d50da7742 --- /dev/null +++ b/.changeset/breezy-oranges-drive.md @@ -0,0 +1,5 @@ +--- +'layerchart': minor +--- + +feat: Add geo projection support for primitives (Circle, Rect, etc) diff --git a/.changeset/bright-bubbles-zoom.md b/.changeset/bright-bubbles-zoom.md new file mode 100644 index 000000000..668a6e369 --- /dev/null +++ b/.changeset/bright-bubbles-zoom.md @@ -0,0 +1,5 @@ +--- +'layerchart': minor +--- + +feat(Highlight): Add `r` prop to scale highlight points using the chart's rScale. Supports `r={true}` to use the chart's r config or a custom accessor. diff --git a/.changeset/brush-api-refactor.md b/.changeset/brush-api-refactor.md new file mode 100644 index 000000000..8e2f8aa67 --- /dev/null +++ b/.changeset/brush-api-refactor.md @@ -0,0 +1,22 @@ +--- +'layerchart': minor +--- + +breaking(Brush): Redesign brush API + +**Breaking changes:** + +- Remove `mode` prop ('integrated' | 'separated') — sync behavior is now driven by presence of `x`/`y` props +- Remove `resetOnEnd` — call `e.brush.reset()` in your `onBrushEnd` handler instead +- Remove `ignoreResetClick` — replaced by `clickToReset` (default `true`) +- Remove `onReset` event — check `brush.active === false` in `onBrushEnd`/`onChange` instead + +**New features:** + +- Add `BrushState.move({ x?, y? })` for programmatic selection control (like d3's `brush.move()`) +- Add `BrushState.selectAll()` to select the full domain extent +- Add `BrushState.reset()` to clear the selection +- Add `clickToReset` prop (default `true`) +- Add `zoomOnBrush` prop on Chart for simplified charts to opt into brush-to-zoom +- Move domain clamping, edge adjustment, and range computation logic into `BrushState` class +- Add `BrushChartContext` interface for easier testing diff --git a/.changeset/clear-moose-rush.md b/.changeset/clear-moose-rush.md new file mode 100644 index 000000000..1d643eeed --- /dev/null +++ b/.changeset/clear-moose-rush.md @@ -0,0 +1,5 @@ +--- +'layerchart': patch +--- + +refactor(Chart): Add `debug` prop and update `settings` context diff --git a/.changeset/component-tree.md b/.changeset/component-tree.md new file mode 100644 index 000000000..f66ebd7da --- /dev/null +++ b/.changeset/component-tree.md @@ -0,0 +1,10 @@ +--- +'layerchart': minor +--- + +feat: Unified component tree for Canvas rendering with proper Group transform scoping. Fixes #662 + +- New `registerComponentNode({ name, kind, canvasRender })` API replaces both `registerCanvasComponent` and the `InsideCompositeMark` boolean context with a single unified component tree. +- Canvas rendering now walks the tree recursively with proper `save()`/`restore()` scoping, fixing Group transforms (translate, opacity) leaking to sibling components instead of only affecting children. +- Composite marks (Area, Threshold, Hull, Labels, Grid) register as `'composite-mark'` nodes, automatically preventing child marks from registering with the chart without manual `_skipRegistration` props. +- Removed `retainState` and `name` from `ComponentRender` type — Group's transform scoping is handled by tree position, and component names live on the tree node. diff --git a/.changeset/context-bind-state-rename.md b/.changeset/context-bind-state-rename.md new file mode 100644 index 000000000..4a472013f --- /dev/null +++ b/.changeset/context-bind-state-rename.md @@ -0,0 +1,18 @@ +--- +'layerchart': major +--- + +breaking(BrushContext|TransformContext): Rename `bind:brushContext` / `bind:transformContext` to `bind:state` + +Both `BrushContext` and `TransformContext` now use `bind:state` instead of their previous named bindings. Additionally, properties on `ChartState` have been renamed: + +- `chartContext.brushContext` → `chartContext.brushState` +- `chartContext.transformContext` → `chartContext.transformState` + +```diff +- ++ + +- ++ +``` diff --git a/.changeset/default-chart-padding.md b/.changeset/default-chart-padding.md new file mode 100644 index 000000000..9df6fe0b5 --- /dev/null +++ b/.changeset/default-chart-padding.md @@ -0,0 +1,7 @@ +--- +'layerchart': patch +--- + +fix: Default chart padding now applied when using ChartChildren layout (marks snippet) + +When `` is used with `marks`/`grid`/`axis` snippets (no explicit `children` snippet), default padding is now applied to match the axes that ChartChildren renders by default. When `children` is provided directly (e.g. Treemap, Pack), no default padding is applied since the user controls layout. This can still be overridden with explicit `axis` or `padding` props. diff --git a/.changeset/domain-extent-original-to-data.md b/.changeset/domain-extent-original-to-data.md new file mode 100644 index 000000000..ca76ca8a3 --- /dev/null +++ b/.changeset/domain-extent-original-to-data.md @@ -0,0 +1,12 @@ +--- +'layerchart': major +--- + +breaking(TransformContext): Rename `domainExtent: 'original'` to `domainExtent: 'data'` + +The `'original'` value for `domainExtent` has been renamed to `'data'` to better describe that it constrains pan/zoom to the data's domain bounds: + +```diff +- ++ +``` diff --git a/.changeset/download-chart-utils.md b/.changeset/download-chart-utils.md new file mode 100644 index 000000000..efc81d1d2 --- /dev/null +++ b/.changeset/download-chart-utils.md @@ -0,0 +1,5 @@ +--- +'layerchart': minor +--- + +feat: add `downloadImage`, `downloadSvg`, `getChartImageBlob`, and `getChartSvgString` utilities to export charts as PNG/JPEG/WebP images or SVG files diff --git a/.changeset/early-bats-wait.md b/.changeset/early-bats-wait.md new file mode 100644 index 000000000..66160a810 --- /dev/null +++ b/.changeset/early-bats-wait.md @@ -0,0 +1,5 @@ +--- +'layerchart': patch +--- + +fix(Tooltip): Apply inverse transform for quadtree lookup when zoomed/panned diff --git a/.changeset/eighty-foxes-notice.md b/.changeset/eighty-foxes-notice.md new file mode 100644 index 000000000..e044d746c --- /dev/null +++ b/.changeset/eighty-foxes-notice.md @@ -0,0 +1,5 @@ +--- +'layerchart': minor +--- + +feat: Add Image component. Resolves #628 diff --git a/.changeset/fiery-lamps-tickle.md b/.changeset/fiery-lamps-tickle.md new file mode 100644 index 000000000..7292d94a6 --- /dev/null +++ b/.changeset/fiery-lamps-tickle.md @@ -0,0 +1,5 @@ +--- +'layerchart': minor +--- + +feat(SeriesState): Support passing `selected` as part of series declaration (Ex. ` `) diff --git a/.changeset/fix-area-all-zero.md b/.changeset/fix-area-all-zero.md new file mode 100644 index 000000000..c6ad2b9d7 --- /dev/null +++ b/.changeset/fix-area-all-zero.md @@ -0,0 +1,8 @@ +--- +'layerchart': patch +--- + +fix(Area): Handle degenerate domains (e.g. all-zero data) and unify y0/y1 baseline logic + +- Guard against degenerate scale domains where min === max (e.g. `[0, 0]`), which caused `yScale()` to return `NaN` and break area path rendering +- Unify Area y0/y1 path computation to consistently use accessors through the scale, removing duplicate fallback logic diff --git a/.changeset/fix-barchart-diverging-edge-rounding.md b/.changeset/fix-barchart-diverging-edge-rounding.md new file mode 100644 index 000000000..068fcf76b --- /dev/null +++ b/.changeset/fix-barchart-diverging-edge-rounding.md @@ -0,0 +1,5 @@ +--- +'layerchart': patch +--- + +fix(BarChart): automatically round the outer edge of each direction in `stackDiverging` layout diff --git a/.changeset/flat-arcs-heal.md b/.changeset/flat-arcs-heal.md new file mode 100644 index 000000000..e46196197 --- /dev/null +++ b/.changeset/flat-arcs-heal.md @@ -0,0 +1,5 @@ +--- +'layerchart': patch +--- + +fix: `flattenPathData` now handles relative arc commands, fixing rounded bars starting below the baseline during mount animation diff --git a/.changeset/geo-context-rename.md b/.changeset/geo-context-rename.md new file mode 100644 index 000000000..1b2f39b34 --- /dev/null +++ b/.changeset/geo-context-rename.md @@ -0,0 +1,17 @@ +--- +'layerchart': major +--- + +breaking(GeoContext): Rename `GeoContext` component to `GeoProjection` + +The `GeoContext` component has been renamed to `GeoProjection` to better describe its purpose. Update your imports and template usage: + +```diff +- import { GeoContext } from 'layerchart' ++ import { GeoProjection } from 'layerchart' +``` + +```diff +- ++ +``` diff --git a/.changeset/good-glasses-design.md b/.changeset/good-glasses-design.md index d19b1b3ca..ca4c21b2f 100644 --- a/.changeset/good-glasses-design.md +++ b/.changeset/good-glasses-design.md @@ -1,5 +1,12 @@ --- +'shadcn-svelte-1': patch +'svelteux-2': patch +'skeleton-3': patch +'skeleton4': patch +'standalone': patch 'layerchart': patch +'daisyui-5': patch +'docs': patch --- Removed lodash-es dependency diff --git a/.changeset/green-hotels-strive.md b/.changeset/green-hotels-strive.md new file mode 100644 index 000000000..29a16086b --- /dev/null +++ b/.changeset/green-hotels-strive.md @@ -0,0 +1,5 @@ +--- +'layerchart': patch +--- + +fix(Area|Highlight): Properly handling diveraging stack layouts for negative values (line, highlight point) diff --git a/.changeset/layer-context-rename.md b/.changeset/layer-context-rename.md new file mode 100644 index 000000000..3b2f7f6a4 --- /dev/null +++ b/.changeset/layer-context-rename.md @@ -0,0 +1,15 @@ +--- +'layerchart': major +--- + +breaking: Rename render context APIs to layer context + +- `getRenderContext()` → `getLayerContext()` +- `setRenderContext()` → `setLayerContext()` +- `supportedContexts` prop → `layers` prop on components +- Internal `layout/` directory moved to `layers/` (affects deep imports) + +```diff +- import { getRenderContext } from 'layerchart' ++ import { getLayerContext } from 'layerchart' +``` diff --git a/.changeset/lucky-cats-stand.md b/.changeset/lucky-cats-stand.md new file mode 100644 index 000000000..132a1c9e9 --- /dev/null +++ b/.changeset/lucky-cats-stand.md @@ -0,0 +1,9 @@ +--- +'layerchart': minor +--- + +feat: Add data mode to primitive components (Circle, Ellipse, Group, Line, Polygon, Rect, Text) + +Primitives now accept string or function accessors for positional props (e.g. `x="date"`, `y={d => d.value}`) to automatically resolve values through chart scales and iterate over data. Components also accept an optional `data` prop to override chart context data. + +Color properties (`fill`, `stroke`) can also be data-driven, resolving per-item through the chart's color scale (`cScale`). String values are disambiguated: data property names resolve through `cScale`, while literal CSS colors pass through unchanged. diff --git a/.changeset/lucky-worlds-share.md b/.changeset/lucky-worlds-share.md new file mode 100644 index 000000000..b56618e54 --- /dev/null +++ b/.changeset/lucky-worlds-share.md @@ -0,0 +1,5 @@ +--- +'layerchart': patch +--- + +fix(Points|Labels): Correctly position when using array accessors (duration charts, etc). Fixes #633 diff --git a/.changeset/mark-registration.md b/.changeset/mark-registration.md new file mode 100644 index 000000000..f6d225e30 --- /dev/null +++ b/.changeset/mark-registration.md @@ -0,0 +1,10 @@ +--- +'layerchart': minor +--- + +feat: Mark registration for automatic domain calculation, accessor aggregation, and implicit series + +- Marks (Spline, Area, Points, Bars) now register their data, accessors, and colors with the Chart via `registerMark()`. +- Chart automatically aggregates y/x accessors from marks, removing the need to pass `y={['apples', 'oranges']}` when each mark specifies its own `y`. Works for both horizontal (`valueAxis='y'`) and vertical (`valueAxis='x'`) charts. +- Per-mark `data` props are included in the chart's domain calculation automatically. +- Implicit series are generated from mark registrations when no explicit `series` prop is provided, enabling tooltip and legend support without requiring series definitions. diff --git a/.changeset/new-pans-serve.md b/.changeset/new-pans-serve.md new file mode 100644 index 000000000..6e7ca28b0 --- /dev/null +++ b/.changeset/new-pans-serve.md @@ -0,0 +1,5 @@ +--- +'layerchart': minor +--- + +feat: Add inertia (momentum) support for transform drag gestures diff --git a/.changeset/nice-regions-ask.md b/.changeset/nice-regions-ask.md new file mode 100644 index 000000000..20bab16e6 --- /dev/null +++ b/.changeset/nice-regions-ask.md @@ -0,0 +1,5 @@ +--- +'layerchart': patch +--- + +fix(ClipPath): Support canvas layers. Resolves #660 diff --git a/.changeset/ninety-melons-tickle.md b/.changeset/ninety-melons-tickle.md new file mode 100644 index 000000000..17d82cb3c --- /dev/null +++ b/.changeset/ninety-melons-tickle.md @@ -0,0 +1,5 @@ +--- +'layerchart': minor +--- + +feat: Add Cell mark. Resolves #627. diff --git a/.changeset/orientation-to-valueaxis.md b/.changeset/orientation-to-valueaxis.md new file mode 100644 index 000000000..70c59ca93 --- /dev/null +++ b/.changeset/orientation-to-valueaxis.md @@ -0,0 +1,21 @@ +--- +'layerchart': major +--- + +breaking(Chart): Remove `isVertical` from ChartState, add `valueAxis` prop to `Chart` + +`ChartState.isVertical` has been removed in favor of `ChartState.valueAxis` (`'x'` | `'y'`), which explicitly defines which axis represents the value (dependent variable). + +Simplified charts (`BarChart`, `LineChart`, `AreaChart`, `ScatterChart`) still accept the `orientation` prop as before — each chart maps it to the correct `valueAxis` internally. The `` component itself now uses `valueAxis` directly, since `orientation` is ambiguous at that level (a "vertical" BarChart has `valueAxis="y"` while a "vertical" LineChart has `valueAxis="x"`). + +When accessing chart state: +```diff +- if (chartContext.isVertical) { ... } ++ if (chartContext.valueAxis === 'y') { ... } +``` + +When using `` directly (not simplified charts): +```diff +- ++ +``` diff --git a/.changeset/pretty-roses-invent.md b/.changeset/pretty-roses-invent.md new file mode 100644 index 000000000..f3b004092 --- /dev/null +++ b/.changeset/pretty-roses-invent.md @@ -0,0 +1,5 @@ +--- +'layerchart': minor +--- + +breaking(Chart): Rename `tooltip` prop to `tooltipContext` to better describe purpose and fix conflict with new `tooltip` snippet diff --git a/.changeset/purple-beers-smile.md b/.changeset/purple-beers-smile.md new file mode 100644 index 000000000..842569bb8 --- /dev/null +++ b/.changeset/purple-beers-smile.md @@ -0,0 +1,5 @@ +--- +'layerchart': minor +--- + +feat: Add Chord layout and Ribbon primitive diff --git a/.changeset/remove-context-getters.md b/.changeset/remove-context-getters.md new file mode 100644 index 000000000..e16e4e456 --- /dev/null +++ b/.changeset/remove-context-getters.md @@ -0,0 +1,19 @@ +--- +'layerchart': major +--- + +breaking: Remove standalone context getter/setter functions + +The following standalone context functions have been removed in favor of the unified `getChartContext()` API: + +- `getTooltipContext()` / `setTooltipContext()` → use `getChartContext().tooltip` +- `getBrushContext()` / `setBrushContext()` → use `getChartContext().brushState` +- `getTransformContext()` / `setTransformContext()` → use `getChartContext().transformState` + +```diff +- import { getTooltipContext } from 'layerchart' +- const tooltip = getTooltipContext() ++ import { getChartContext } from 'layerchart' ++ const chart = getChartContext() ++ // access via chart.tooltip +``` diff --git a/.changeset/rename-scroll-mode.md b/.changeset/rename-scroll-mode.md new file mode 100644 index 000000000..6a5f8ab86 --- /dev/null +++ b/.changeset/rename-scroll-mode.md @@ -0,0 +1,5 @@ +--- +'layerchart': minor +--- + +breaking(TransformContext): Rename `initialScrollMode` to `scrollMode` and make it reactive diff --git a/.changeset/ripe-numbers-speak.md b/.changeset/ripe-numbers-speak.md new file mode 100644 index 000000000..e2e3dbd34 --- /dev/null +++ b/.changeset/ripe-numbers-speak.md @@ -0,0 +1,5 @@ +--- +'layerchart': patch +--- + +feat(Chart): Support `motion` prop to transition x/y scales using tween or spring diff --git a/.changeset/scroll-activation-key.md b/.changeset/scroll-activation-key.md new file mode 100644 index 000000000..49c7368cd --- /dev/null +++ b/.changeset/scroll-activation-key.md @@ -0,0 +1,5 @@ +--- +'layerchart': minor +--- + +feat(TransformContext): Add `scrollActivationKey` option to require a modifier key (meta, alt, control, shift) for scroll/wheel zoom/pan, preventing accidental page scroll from triggering transforms diff --git a/.changeset/shiny-mails-hug.md b/.changeset/shiny-mails-hug.md new file mode 100644 index 000000000..652b7f96d --- /dev/null +++ b/.changeset/shiny-mails-hug.md @@ -0,0 +1,5 @@ +--- +'layerchart': minor +--- + +feat(Transform): Add zoom/pan constraints (`scaleExtent`, `translateExtent`, `constrain`, `domainExtent`), replace `geo.applyTransform` with `transform.mode: 'projection' | 'rotate'`, and reactively sync initial transform values on projection changes diff --git a/.changeset/silver-baboons-smile.md b/.changeset/silver-baboons-smile.md new file mode 100644 index 000000000..62ac30800 --- /dev/null +++ b/.changeset/silver-baboons-smile.md @@ -0,0 +1,5 @@ +--- +'layerchart': major +--- + +breaking(Arc|Pie|Calendar|GeoPath): Rename `tooltipContext` to simple `tooltip` (boolean), simplifying use case diff --git a/.changeset/small-moles-jog.md b/.changeset/small-moles-jog.md new file mode 100644 index 000000000..43ca667a2 --- /dev/null +++ b/.changeset/small-moles-jog.md @@ -0,0 +1,5 @@ +--- +'layerchart': minor +--- + +feat(Bar): Support fixed `width` and `height` props to override scale-derived dimensions, centering the bar within its band. Resolves #360 diff --git a/.changeset/smooth-bars-grow.md b/.changeset/smooth-bars-grow.md new file mode 100644 index 000000000..5bcc68047 --- /dev/null +++ b/.changeset/smooth-bars-grow.md @@ -0,0 +1,9 @@ +--- +'layerchart': minor +--- + +feat: Auto-compute Bar/Bars mount animation initial values from chart scales + +Bar now automatically derives `initialY`/`initialHeight` (vertical) or `initialX`/`initialWidth` (horizontal) from the chart's scale range when `motion` is configured, removing the need to hardcode pixel values. + +Also improves `valueAxis` inference on `ChartState` — when not explicitly set, it is now derived from scale types (band scale on y → `valueAxis: 'x'`, band scale on x → `valueAxis: 'y'`). \ No newline at end of file diff --git a/.changeset/smooth-domains-zoom.md b/.changeset/smooth-domains-zoom.md new file mode 100644 index 000000000..cd1d949cf --- /dev/null +++ b/.changeset/smooth-domains-zoom.md @@ -0,0 +1,5 @@ +--- +'layerchart': minor +--- + +feat(Chart): Add cartesian pan/zoom via `transform={{ mode: 'domain' }}` with single or both axis support. Resolves #366 diff --git a/.changeset/sparkly-mice-peel.md b/.changeset/sparkly-mice-peel.md new file mode 100644 index 000000000..228a05985 --- /dev/null +++ b/.changeset/sparkly-mice-peel.md @@ -0,0 +1,5 @@ +--- +'layerchart': patch +--- + +fix(Canavs): support `strokeOpacity` for Path component diff --git a/.changeset/spline-motion-support.md b/.changeset/spline-motion-support.md new file mode 100644 index 000000000..c624db336 --- /dev/null +++ b/.changeset/spline-motion-support.md @@ -0,0 +1,5 @@ +--- +'layerchart': minor +--- + +feat(Spline): Add motion support for mount animation from baseline diff --git a/.changeset/thick-months-join.md b/.changeset/thick-months-join.md new file mode 100644 index 000000000..5cd9f45a0 --- /dev/null +++ b/.changeset/thick-months-join.md @@ -0,0 +1,5 @@ +--- +'layerchart': patch +--- + +fix(Text): handle inline styles and CSS class-based text-anchor diff --git a/.changeset/tooltip-item-highlight-fade.md b/.changeset/tooltip-item-highlight-fade.md new file mode 100644 index 000000000..384560e12 --- /dev/null +++ b/.changeset/tooltip-item-highlight-fade.md @@ -0,0 +1,5 @@ +--- +'layerchart': patch +--- + +fix(Tooltip): Fade non-highlighted series items on hover to match chart highlight state diff --git a/.changeset/twenty-teeth-stand.md b/.changeset/twenty-teeth-stand.md new file mode 100644 index 000000000..395c446b3 --- /dev/null +++ b/.changeset/twenty-teeth-stand.md @@ -0,0 +1,5 @@ +--- +'layerchart': patch +--- + +fix(TooltipContext): Support band mode with array-based range accessors (e.g. histograms using `x={['x0', 'x1']}`) diff --git a/.changeset/warm-colors-glow.md b/.changeset/warm-colors-glow.md new file mode 100644 index 000000000..06d84cff4 --- /dev/null +++ b/.changeset/warm-colors-glow.md @@ -0,0 +1,10 @@ +--- +'layerchart': minor +--- + +feat: Support continuous color scales via `cScale` prop without requiring `cRange` + +- Allow `cScale` (e.g. `scaleSequential(interpolateTurbo)`) to activate without `cRange`, enabling pre-configured sequential/diverging color scales +- Guard `createScale` against undefined `range` to avoid breaking interpolator-based scales +- Auto-detect numeric `cDomain` values and use `extent` instead of `unique`, producing correct `[min, max]` domains for continuous scales +- Prefer `cScale` color over default series color in tooltip/highlight when a color scale is configured diff --git a/.changeset/warm-labels-shine.md b/.changeset/warm-labels-shine.md new file mode 100644 index 000000000..1915d1b49 --- /dev/null +++ b/.changeset/warm-labels-shine.md @@ -0,0 +1,5 @@ +--- +'layerchart': minor +--- + +feat(Labels): Support `seriesKey` in `labels` prop to filter which series renders labels. Resolves #633 diff --git a/.changeset/wide-pillows-march.md b/.changeset/wide-pillows-march.md new file mode 100644 index 000000000..b18a4f1ee --- /dev/null +++ b/.changeset/wide-pillows-march.md @@ -0,0 +1,5 @@ +--- +'layerchart': minor +--- + +feat(Rect): New edge-based props (`x0`/`x1`/`y0`/`y1`) along with existing (`x`/`y`/`width`/`height`) and `insets` support diff --git a/.changeset/wide-wasps-enjoy.md b/.changeset/wide-wasps-enjoy.md new file mode 100644 index 000000000..f11582ea2 --- /dev/null +++ b/.changeset/wide-wasps-enjoy.md @@ -0,0 +1,5 @@ +--- +'layerchart': minor +--- + +feat: Add Vector component diff --git a/.gitignore b/.gitignore index 4e1d30598..0047926d5 100644 --- a/.gitignore +++ b/.gitignore @@ -10,6 +10,8 @@ coverage/ .vscode test-* +.vitest-attachments/ +bench-results/ # Content Collections .content-collections diff --git a/docs/.prettierrc b/docs/.prettierrc index 3f7802c37..ff92a6055 100644 --- a/docs/.prettierrc +++ b/docs/.prettierrc @@ -3,7 +3,7 @@ "singleQuote": true, "trailingComma": "none", "printWidth": 100, - "plugins": ["prettier-plugin-svelte"], + "plugins": ["prettier-plugin-svelte", "./prettier-plugin-preserve-diff.js"], "overrides": [ { "files": "*.svelte", diff --git a/docs/content-collections.ts b/docs/content-collections.ts index 51e0e0cb6..5fc188621 100644 --- a/docs/content-collections.ts +++ b/docs/content-collections.ts @@ -153,6 +153,7 @@ const guides = defineCollection({ schema: z.object({ title: z.string(), description: z.string().optional(), + category: z.string().optional(), order: z.number().optional(), draft: z.boolean().default(false), content: z.string() diff --git a/docs/package.json b/docs/package.json index 572bfba3f..d347cf3e1 100644 --- a/docs/package.json +++ b/docs/package.json @@ -131,6 +131,7 @@ "@webcontainer/api": "^1.6.1", "ansi_up": "^6.0.6", "codemirror": "^6.0.2", + "d3-geo-projection": "^4.0.0", "flexsearch": "^0.8.212", "satori": "^0.26.0", "satori-html": "^0.3.2" diff --git a/docs/prettier-plugin-preserve-diff.js b/docs/prettier-plugin-preserve-diff.js new file mode 100644 index 000000000..400cce9a5 --- /dev/null +++ b/docs/prettier-plugin-preserve-diff.js @@ -0,0 +1,36 @@ +/** + * Prettier plugin that preserves the content of `* diff` code blocks as-is, + * preventing prettier from reformatting embedded code (e.g. `svelte diff`). + * + * When prettier sees `lang: 'svelte'` inside a markdown code block it calls + * prettier-plugin-svelte to format the content, which collapses diff lines. + * We wrap the svelte parser and bail out (throw) when asked to format diff + * content from inside a markdown file — prettier catches the error and prints + * the block verbatim, which is exactly what we want. + * + * Detection strategy: + * - `options.parentParser === 'markdown'` → we're an embedded parser, not + * formatting a real .svelte file (safe to throw without side-effects) + * - content has lines starting with `+ ` or `- ` → looks like a diff + */ +import { parsers as svelteParsers } from 'prettier-plugin-svelte'; + +const baseSvelteParser = svelteParsers.svelte; + +/** @type {import('prettier').Plugin} */ +export default { + parsers: { + svelte: { + ...baseSvelteParser, + async parse(text, options) { + if ( + options.parentParser === 'markdown' && + text.split('\n').some((line) => /^[+-] /.test(line)) + ) { + throw new Error('Diff content detected — preserving block as-is'); + } + return baseSvelteParser.parse(text, options); + } + } + } +}; diff --git a/docs/scripts/generate-screenshots.ts b/docs/scripts/generate-screenshots.ts index 0f7aaea10..357783b79 100644 --- a/docs/scripts/generate-screenshots.ts +++ b/docs/scripts/generate-screenshots.ts @@ -395,6 +395,7 @@ async function main() { let processedCount = 0; let skippedCount = 0; let errorCount = 0; + const failedExamples: string[] = []; // Process each example for (const example of examples) { @@ -453,6 +454,7 @@ async function main() { } catch (error) { console.error(` ✗ Error:`, error instanceof Error ? error.message : error); errorCount++; + failedExamples.push(`${component}/${exampleName}`); // Keep old checksum on error to retry next time if (checksums[`${component}/${exampleName}`]) { updatedChecksums[`${component}/${exampleName}`] = checksums[`${component}/${exampleName}`]; @@ -508,6 +510,12 @@ async function main() { console.log(` Screenshots generated: ${processedCount}`); console.log(` Screenshots skipped: ${skippedCount}`); console.log(` Errors: ${errorCount}`); + if (failedExamples.length > 0) { + console.log(`\nFailed examples:`); + for (const name of failedExamples) { + console.log(` ✗ ${name}`); + } + } console.log(`\n✅ Screenshots saved to ${SCREENSHOTS_DIR}`); } diff --git a/docs/src/app.css b/docs/src/app.css index df9a688f7..e0c982166 100644 --- a/docs/src/app.css +++ b/docs/src/app.css @@ -96,11 +96,19 @@ pre { /* Diff highlighting */ &.has-diff { & .diff-add { - @apply bg-green-500/15 dark:bg-green-500/10 border-l-[3px] border-l-green-500 pl-2 -ml-2; + @apply bg-green-500/15 dark:bg-green-500/10; + &::before { + content: '+'; + @apply text-green-500 w-4 pl-1 inline-block; + } } & .diff-remove { - @apply bg-red-500/15 dark:bg-red-500/10 border-l-[3px] border-l-red-500 pl-2 -ml-2 opacity-70; + @apply bg-red-500/15 dark:bg-red-500/10 opacity-70; + &::before { + content: '-'; + @apply text-red-500 w-4 pl-1 inline-block; + } } } diff --git a/docs/src/content/components/AreaChart.md b/docs/src/content/components/AreaChart.md index fd8a3bd97..8262dbace 100644 --- a/docs/src/content/components/AreaChart.md +++ b/docs/src/content/components/AreaChart.md @@ -8,169 +8,3 @@ related: [Chart, Area] ## Usage :example{ name="basic" showCode } - - diff --git a/docs/src/content/components/Bar.md b/docs/src/content/components/Bar.md index 13db194d1..576109ae1 100644 --- a/docs/src/content/components/Bar.md +++ b/docs/src/content/components/Bar.md @@ -9,4 +9,10 @@ related: [Bars] :example{ component="Bars" name="vertical-customize-individual-styles" showCode } -Typically the component is rendering within the `Bars` mark but can be rendered explicitly when you need more control on a per-mark basis +Typically the component is rendered within the `Bars` mark but can be rendered explicitly when you need more control on a per-mark basis. + +## Fixed width + +Use `width` or `height` to override the scale-derived size with a fixed pixel value. The bar is centered within its band. + +:example{ component="Bars" name="vertical-fixed-width" showCode } diff --git a/docs/src/content/components/BarChart.md b/docs/src/content/components/BarChart.md index d46086bb7..f0e4b78ce 100644 --- a/docs/src/content/components/BarChart.md +++ b/docs/src/content/components/BarChart.md @@ -13,6 +13,12 @@ related: [Chart, Bars] See also: [Axis](/docs/components/Axis) for examples of using time scale axes with bar charts ::: +## Fixed width + +Use `width` or `height` on bars to override the scale-derived size with a fixed pixel value. The bar is centered within its band. + +:example{ name="vertical-fixed-width" showCode } + +:example{ name="color-via-threshold-scale" showCode } diff --git a/docs/src/content/components/Contour.md b/docs/src/content/components/Contour.md new file mode 100644 index 000000000..646789757 --- /dev/null +++ b/docs/src/content/components/Contour.md @@ -0,0 +1,42 @@ +--- +description: Composite mark drawing isolines to delineate regions above and below a particular continuous value. Supports grid data, scattered data with spatial interpolation, and continuous functions. +category: marks +layers: [svg] +related: [Density, Raster, GeoPath] +--- + +::tip +To produce a heatmap instead of contours, see the [Raster](/docs/components/Raster) mark. For contours of estimated point density, see the [Density](/docs/components/Density) mark. +:: + +The **contour** mark draws isolines computed by applying the [marching squares](https://en.wikipedia.org/wiki/Marching_squares) algorithm to a discrete grid. The grid can be constructed from a flat array of values, by interpolating spatial samples, or by sampling a continuous function _f_(_x_,_y_). + +## Contour lines + +Contour lines of [Maungawhau (Mt. Eden)](https://en.wikipedia.org/wiki/Maungawhau_/_Mount_Eden) in Auckland, NZ, derived from an 87×61 dense elevation grid. + +:example{ name="volcano-lines" showCode } + +## Filled contours + +Filled contour bands of the same Maungawhau elevation data, colored by threshold level using a sequential color scale. + +:example{ name="volcano-filled" showCode } + +## Interactive controls + +Adjust the number of **thresholds** and **blur** radius interactively. + +:example{ name="volcano-filled-interactive" showCode } + +## Sampled function + +When no data is provided, the contour mark evaluates a continuous function _f_(_x_,_y_) at each pixel in the grid. Here, `sin(x) * cos(y)` is colored with a diverging scale. + +:example{ name="sampled" showCode } + +## Interactive sampled + +Adjust thresholds and blur on a sampled function. + +:example{ name="sampled-interactive" showCode } diff --git a/docs/src/content/components/Density.md b/docs/src/content/components/Density.md new file mode 100644 index 000000000..ac9cc2c85 --- /dev/null +++ b/docs/src/content/components/Density.md @@ -0,0 +1,44 @@ +--- +description: Composite mark showing the estimated density of two-dimensional point clouds using kernel density estimation, rendered as contour bands. +category: marks +layers: [svg, canvas] +related: [Contour, Raster, Points] +--- + +::tip +For contours of spatially-distributed quantitative values, see the [Contour](/docs/components/Contour) mark. +:: + +The **density** mark shows the estimated density of two-dimensional point clouds. Contours guide the eye towards areas of local concentration, similar to how topographic maps show elevation. This is particularly useful when addressing overplotting in dense datasets. + +It uses a Gaussian kernel with a specified **bandwidth** (radius of influence per point), summed across a discrete grid, with contours extracted using the [marching squares](https://en.wikipedia.org/wiki/Marching_squares) algorithm. Uses d3-contour's `contourDensity()` internally. + +## Usage + +The [Old Faithful](https://en.wikipedia.org/wiki/Old_Faithful) geyser dataset shows two distinct clusters of eruption duration vs. waiting time, revealed by density contours overlaid with individual data points. + +:example{ name="basic" showCode } + +## Bandwidth + +Control the smoothness of the density estimate. Lower bandwidth shows more local detail; higher bandwidth produces smoother contours. The default is 20. + +:example{ name="bandwidth" showCode } + +## Thresholds + +Control the number of contour levels. With _n_ thresholds and a maximum density of _d_, contour lines are drawn at _d_/_n_, 2*d*/_n_, etc. + +:example{ name="thresholds" showCode } + +## Stroke-only contours + +Set `fill="none"` and `stroke` to render as isolines instead of filled bands. + +:example{ name="stroke-only" showCode } + +## Geographic density + +Density of Walmart store locations across the US, overlaid with state boundaries and individual store points. Use an equal-area projection with the density mark. + +:example{ name="walmart" showCode } diff --git a/docs/src/content/components/Ellipse.md b/docs/src/content/components/Ellipse.md index 7734e377d..b29a0c846 100644 --- a/docs/src/content/components/Ellipse.md +++ b/docs/src/content/components/Ellipse.md @@ -7,18 +7,26 @@ related: [] ## Usage +### Pixel mode + +Pass numeric pixel values for `cx`, `cy`, `rx`, and `ry` to position and size ellipses directly. + :example{ name="styling-using-classes" showCode } - +:example{ name="color-via-threshold-scale" showCode } diff --git a/docs/src/content/components/GeoCircle.md b/docs/src/content/components/GeoCircle.md index 7cfcaf247..d932b37cd 100644 --- a/docs/src/content/components/GeoCircle.md +++ b/docs/src/content/components/GeoCircle.md @@ -5,6 +5,10 @@ layers: [svg, canvas] related: [] --- +:::tip +See the [Geo guide](/docs/guides/geo) for a full walkthrough of projections, fitting, rendering components, tooltips, and pan/zoom on maps. +::: + ## Playground :example{ name="playground" } diff --git a/docs/src/content/components/GeoContext.md b/docs/src/content/components/GeoContext.md index b67b0b62d..acdad2556 100644 --- a/docs/src/content/components/GeoContext.md +++ b/docs/src/content/components/GeoContext.md @@ -6,6 +6,10 @@ related: [Chart] order: 1 --- +:::tip +See the [Geo guide](/docs/guides/geo) for a full walkthrough of projections, fitting, rendering components, tooltips, and pan/zoom on maps. +::: + ## Playground :example{ name="projection-playground" } diff --git a/docs/src/content/components/GeoPath.md b/docs/src/content/components/GeoPath.md index 912726c92..9ac97de01 100644 --- a/docs/src/content/components/GeoPath.md +++ b/docs/src/content/components/GeoPath.md @@ -5,6 +5,10 @@ layers: [svg, canvas] related: [Graticule] --- +:::tip +See the [Geo guide](/docs/guides/geo) for a full walkthrough of projections, fitting, rendering components, tooltips, and pan/zoom on maps. +::: + ## Usage :example{ name="tooltip" showCode } diff --git a/docs/src/content/components/GeoPoint.md b/docs/src/content/components/GeoPoint.md index 0ccb4fbb4..20235c025 100644 --- a/docs/src/content/components/GeoPoint.md +++ b/docs/src/content/components/GeoPoint.md @@ -5,6 +5,10 @@ layers: [svg, canvas] related: [] --- +:::tip +See the [Geo guide](/docs/guides/geo) for a full walkthrough of projections, fitting, rendering components, tooltips, and pan/zoom on maps. +::: + ## Usage :example{ name="us-state-capitals" showCode } diff --git a/docs/src/content/components/GeoProjection.md b/docs/src/content/components/GeoProjection.md new file mode 100644 index 000000000..bde797252 --- /dev/null +++ b/docs/src/content/components/GeoProjection.md @@ -0,0 +1,19 @@ +--- +description: Geographic component which provides geographic projection and scaling context to children for accurate rendering of geographic data. +category: geo +layers: [svg, canvas] +related: [Chart] +order: 1 +--- + +:::tip +See the [Geo guide](/docs/guides/geo) for a full walkthrough of projections, fitting, rendering components, tooltips, and pan/zoom on maps. +::: + +:::tip +Geographic projections / state are integrated into `` but `GeoProjection` can be used to provide a secondary projection / context, such as for a translucent globe effect +::: + +## Playground + +:example{ name="projection-playground" } diff --git a/docs/src/content/components/GeoSpline.md b/docs/src/content/components/GeoSpline.md index f46df3a9c..46e487c68 100644 --- a/docs/src/content/components/GeoSpline.md +++ b/docs/src/content/components/GeoSpline.md @@ -5,6 +5,10 @@ layers: [svg, canvas] related: [] --- +:::tip +See the [Geo guide](/docs/guides/geo) for a full walkthrough of projections, fitting, rendering components, tooltips, and pan/zoom on maps. +::: + ## Usage :example{ name="world-map" showCode } diff --git a/docs/src/content/components/GeoTile.md b/docs/src/content/components/GeoTile.md index 2107991e9..1f7e01d3f 100644 --- a/docs/src/content/components/GeoTile.md +++ b/docs/src/content/components/GeoTile.md @@ -5,6 +5,10 @@ layers: [svg, canvas] related: [] --- +:::tip +See the [Geo guide](/docs/guides/geo) for a full walkthrough of projections, fitting, rendering components, tooltips, and pan/zoom on maps. +::: + ## Usage :example{ name="basic" } diff --git a/docs/src/content/components/Group.md b/docs/src/content/components/Group.md index 51afeae2c..30ada5e37 100644 --- a/docs/src/content/components/Group.md +++ b/docs/src/content/components/Group.md @@ -7,4 +7,14 @@ related: [] ## Usage +### Pixel mode + +Pass numeric pixel values for `x` and `y` to translate the group to an exact position. Use `center` to center within the chart. + :example{ name="basic" showCode } + +### Data mode + +Pass string property names or accessor functions to `x` and `y` to position groups from data. The component renders one group per data item, useful for placing compound elements (e.g. circle + label) at each data point. + +:example{ name="data-mode" showCode } diff --git a/docs/src/content/components/Highlight.md b/docs/src/content/components/Highlight.md index d82d148b9..466f48804 100644 --- a/docs/src/content/components/Highlight.md +++ b/docs/src/content/components/Highlight.md @@ -4,3 +4,90 @@ category: interactions layers: [svg, canvas] related: [Tooltip, TooltipContext] --- + +## Usage + +Highlight is typically used via the `highlight` prop on chart components like `ScatterChart`, `LineChart`, or `BarChart`. It renders crosshair lines, points, areas, or bars at the hovered data position. + +```svelte + +``` + +Highlight reads from [TooltipContext](/docs/components/TooltipContext) by default — when a user hovers over the chart, TooltipContext tracks the nearest data point, and Highlight renders visual indicators at that position. No wiring is needed; both components share the chart context automatically. + +## Display modes + +Highlight supports several visual modes, each toggled independently: + +| Prop | Renders | Use case | +| -------- | --------------------------------------- | ------------------------------------- | +| `lines` | Dashed crosshair lines across the chart | Show precise x/y position | +| `points` | Circles at the data point(s) | Emphasize the hovered value | +| `area` | Shaded rectangle region | Highlight a band (e.g. time interval) | +| `bar` | Bar at the data point | Highlight a bar in bar charts | + +Each accepts `true`, an object of component props (e.g. `lines={{ class: 'stroke-red-500' }}`), or a snippet for full custom rendering: + +```svelte + + {#snippet points({ points })} + {#each points as point} + + {/each} + {/snippet} + +``` + +## Axis + +The `axis` prop controls which crosshair lines are drawn: + +| Value | Effect | +| -------- | ----------------------------- | +| `'x'` | Vertical line at x position | +| `'y'` | Horizontal line at y position | +| `'both'` | Both lines | +| `'none'` | No lines (even if `lines` is true) | + +When not set, Highlight auto-detects the appropriate axis based on the chart's scale types. + +## Multi-series + +In charts with multiple series, Highlight automatically renders a point for each visible series at the hovered position, using each series' color. This works with stacked charts, multi-value accessors, and grouped series. + +## Data-driven radius + +When using a bubble/scatter chart with an `r` scale, pass `r={true}` to scale highlight points to match the data's radius instead of the default fixed size. + +```svelte + +``` + +A custom accessor can also be used: + +```svelte + +``` + +See the [zoomable bubble](/docs/components/ScatterChart/zoomable-bubble) ScatterChart example for a full demo. + +## Motion + +Highlight points and lines animate with spring transitions by default. Disable with `motion={false}`, or pass a custom motion config: + +```svelte + +``` + +## Explicit data + +By default, Highlight uses `TooltipContext` data. Pass explicit `data` to highlight a specific point (useful for annotations): + +```svelte + diff --git a/docs/src/content/components/Image.md b/docs/src/content/components/Image.md new file mode 100644 index 000000000..6df5f6b1e --- /dev/null +++ b/docs/src/content/components/Image.md @@ -0,0 +1,38 @@ +--- +description: Primitive component which renders an image within a chart, supporting data-driven positioning, circular clipping, and rotation. +category: primitives +layers: [svg, canvas, html] +related: [Circle, Rect] +--- + +## Usage + +### Country flags + +Scatter plot of countries using flag images, with circular clipping via the `r` prop and a function accessor for `href`. + +:example{ name="country-flags" showCode } + +### US Presidents + +President portraits plotted by inauguration date and historical rating, clipped to circles using the `r` prop with `preserveAspectRatio="xMidYMid slice"` for crop-fill. + +:example{ name="us-presidents" showCode } + +### Planets + +Solar system planets on a log scale, with image size driven by planet diameter using function accessors for `width`, `height`, and `r`. + +:example{ name="planets" showCode } + +### Sports logos + +NFL team logos plotted by wins vs points scored, using rectangular images with fixed pixel dimensions. + +:example{ name="sports-logos" showCode } + +### Pixel mode + +Pass numeric pixel values for `x`, `y`, `width`, and `height` to position and size a single image directly. Images are centered on `(x, y)`. + +:example{ name="pixel-mode" showCode } diff --git a/docs/src/content/components/Line.md b/docs/src/content/components/Line.md index d549260d7..3e952d0f6 100644 --- a/docs/src/content/components/Line.md +++ b/docs/src/content/components/Line.md @@ -7,4 +7,26 @@ related: [Rule, Spline] ## Usage +### Pixel mode + +Pass numeric pixel values for `x1`, `y1`, `x2`, and `y2` to draw lines at exact positions. + :example{ name="styling-using-classes" showCode } + +### Data mode + +Pass string property names or accessor functions to position endpoints from data. The component renders one line per data item, useful for lollipop charts or drop lines. + +:example{ name="data-mode" showCode } + +### Color via ordinal scale + +Use `stroke` with a data property name to color each line through the chart's color scale. + +:example{ name="color-via-ordinal-scale" showCode } + +### Color via threshold scale + +Use a threshold scale to color lines based on value ranges. + +:example{ name="color-via-threshold-scale" showCode } diff --git a/docs/src/content/components/Polygon.md b/docs/src/content/components/Polygon.md index b648ae2fa..418bd318f 100644 --- a/docs/src/content/components/Polygon.md +++ b/docs/src/content/components/Polygon.md @@ -7,4 +7,26 @@ related: [] ## Usage +### Pixel mode + +Pass numeric pixel values for `cx`, `cy`, and `r` to position and size polygons directly. + :example{ name="playground" showCode } + +### Data mode + +Pass string property names or accessor functions to `cx` and `cy` to have values resolved from data and scaled automatically. The component renders one polygon per data item. + +:example{ name="data-mode" showCode } + +### Color via ordinal scale + +Use `fill` or `stroke` with a data property name to color each item through the chart's color scale. + +:example{ name="color-via-ordinal-scale" showCode } + +### Color via threshold scale + +Use a threshold scale to color items based on value ranges. + +:example{ name="color-via-threshold-scale" showCode } diff --git a/docs/src/content/components/Raster.md b/docs/src/content/components/Raster.md new file mode 100644 index 000000000..b6a13b081 --- /dev/null +++ b/docs/src/content/components/Raster.md @@ -0,0 +1,42 @@ +--- +description: Composite mark rendering a pixel-based heatmap where each pixel is colored by a scalar value. Supports grid data, scattered data with spatial interpolation, and continuous functions. +category: marks +layers: [svg, canvas, html] +related: [Contour, Density] +--- + +::tip +To produce contours instead of a heatmap, see the [Contour](/docs/components/Contour) mark. +:: + +The **raster** mark renders a raster image -- an image formed by discrete pixels in a grid, not a vector graphic like other marks. The raster mark _creates_ an image from abstract data, either from a flat array of grid values, by interpolating spatial samples, or by sampling a continuous function _f_(_x_,_y_). + +## Volcano elevation + +A raster image of [Maungawhau (Mt. Eden)](https://en.wikipedia.org/wiki/Maungawhau_/_Mount_Eden) in Auckland, NZ, rendered from an 87×61 dense elevation grid. + +:example{ name="volcano" showCode } + +## With contour overlay + +Layer [Contour](/docs/components/Contour) stroke lines over a Raster for the best of both worlds -- continuous color and discrete isolines. + +:example{ name="with-contour-overlay" showCode } + +## Sampled function + +When no data is provided, the raster mark evaluates a continuous function _f_(_x_,_y_) at each pixel. Here, `sin(x) * cos(y)` is colored with a diverging scale. + +:example{ name="sampled" showCode } + +## Mandelbrot set + +The classic fractal rendered pixel-by-pixel via a `value` function. Uses `pixelSize={2}` for faster rendering at the cost of resolution. + +:example{ name="mandelbrot" showCode } + +## Math functions + +Explore various mathematical functions mapped to color scales, demonstrating how different equations produce distinct visual patterns. + +:example{ name="math-functions" showCode } diff --git a/docs/src/content/components/Rect.md b/docs/src/content/components/Rect.md index 9ecc62d34..db4f87115 100644 --- a/docs/src/content/components/Rect.md +++ b/docs/src/content/components/Rect.md @@ -7,18 +7,26 @@ related: [Bars, Highlight, RectClipPath] ## Usage +### Pixel mode + +Pass numeric pixel values for `x`, `y`, `width`, and `height` to draw rectangles at exact positions. + :example{ name="styling-using-classes" showCode } - +:example{ name="color-via-threshold-scale" showCode } diff --git a/docs/src/content/components/Ribbon.md b/docs/src/content/components/Ribbon.md new file mode 100644 index 000000000..e8b0a90a6 --- /dev/null +++ b/docs/src/content/components/Ribbon.md @@ -0,0 +1,10 @@ +--- +description: Shape component which renders a ribbon path between two groups in a chord diagram, supporting both symmetric and directed (arrow) variants. +category: primitives +layers: [svg, canvas] +related: [Chord, Arc, Path] +--- + +## Usage + +See [Chord](/docs/components/Chord) for usage examples. diff --git a/docs/src/content/components/ScatterChart.md b/docs/src/content/components/ScatterChart.md index b49127ea8..71d0fc2e7 100644 --- a/docs/src/content/components/ScatterChart.md +++ b/docs/src/content/components/ScatterChart.md @@ -113,6 +113,10 @@ related: [Chart, Points] :example{ name="brush" } +### Zoomable bubble + +:example{ name="zoomable-bubble" } + ### Custom :example{ name="custom" } --> diff --git a/docs/src/content/components/Spline.md b/docs/src/content/components/Spline.md index e0638a947..daf3ca6b1 100644 --- a/docs/src/content/components/Spline.md +++ b/docs/src/content/components/Spline.md @@ -13,6 +13,12 @@ See also: [LineChart](/docs/components/LineChart) for simplified examples :example{ name="basic" showCode } +### Geo mode + +When inside a `GeoProjection` context, Spline automatically renders as a projected geographic path. The `x` and `y` accessors extract longitude/latitude from each data point, which are converted to a GeoJSON `LineString` and rendered via `geoPath(projection)` — providing geodesic interpolation (great circle arcs) and proper antimeridian wrapping. + +:example{ name="geo-routes" showCode } + ### Playground :example{ name="playground" } diff --git a/docs/src/content/components/Text.md b/docs/src/content/components/Text.md index a9872bca8..5555be8cd 100644 --- a/docs/src/content/components/Text.md +++ b/docs/src/content/components/Text.md @@ -7,8 +7,32 @@ related: [] ## Usage +### Pixel mode + +Pass numeric or CSS string values for `x` and `y` to position text at exact locations. + :example{ name="playground" } +### Data mode + +Pass string property names or accessor functions to `x` and `y` to position text from data. The `value` prop can be a string property name, function, or literal. The component renders one text element per data item. + +:example{ name="data-mode" showCode } + +### Color via ordinal scale + +Use `fill` with a data property name to color each text through the chart's color scale. + +:example{ name="color-via-ordinal-scale" showCode } + +### Color via threshold scale + +Use a threshold scale to color text based on value ranges. + +:example{ name="color-via-threshold-scale" showCode } + +## Examples + ### Truncate text of axis labels Sometimes your axis labels overwhelm the available space. You can use `truncate` to limit the text to a maximum length. diff --git a/docs/src/content/components/Tooltip.md b/docs/src/content/components/Tooltip.md index e6c81e63b..8eb731d33 100644 --- a/docs/src/content/components/Tooltip.md +++ b/docs/src/content/components/Tooltip.md @@ -5,202 +5,6 @@ layers: [svg, canvas] related: [TooltipContext, Highlight] --- -Tooltips have 2 parts, the `TooltipContext` (which is integrated into `` -and used for data selection and state management, `Tooltip` components (`Tooltip.Root`, `Tooltip.Header`, `Tooltip.List`, and `Tooltip.Item`) which are used for visual display. - -## Features - -- HTML first -- Can be interactive (clickable / hover) -- Smart placement (contained in container, window, etc) -- Multiple instances supported -- Different modes (bisect, band, voronoi, path/shape, quadtree, hit canvas) - -## Usage - -### Modes - -There are multiple tooltip modes for different situations, which can be controlled by passing ``. - -#### `bisect-x` | `bisect-y` - -Finds the closest data point along a give axis based on your pointer position. - -#### `band` - -Uses transparent `` to enable full-bandwidth hit targets (i.e not just the bar itself). This is especially useful for very small values (short bars) and consistent scrubbing across the data. - -#### `voronoi` - -Path based, easier to reason about than quadtree. Supports max `radius` - -#### `quadtree` - -In memory and typically faster than `voronoi`. Supports max `radius` - -Useful for point-based visualizations such as geographic points and scatter plots - -#### `manual` - -Useful for shape based triggering such as on geo boundaries and radial charts with arc slices (ex. pie chart). - -You can call `tooltip.show(e, DATA)` and `tooltip.hide()` recommended within `onpointerenter`, `onpointermove`, and `onpointerleave` - -Canvas layers leverage an integrated "hit canvas" which enables the same shape-based triggering as you are accustomed with Svg. - -### Location - -Tooltips can be positions based on - -- Pointer position -- Data location -- Fixed - Each of these are set on a per-axis bases, allowing: -- Tooltip following pointer on both axis (i.e. stays next to pointer) -- Tooltip "snaps" to each data point as the pointer moves -- Tooltip stays within the axis/padding but trackings the pointer left/right (a axis) or up/down (y axis) -- Fixed tooltip location (ex. top left) regardless of pointer or data - -```html - -``` - -Offsets are available (`xOffset`, `yOffset`) to not overlap data (or provide more space for course pointer devices such as a finger). - -You can render any number of `Tooltip` instances, which can be useful to have one in each axis area - -Tooltips can be contained within the chart container, window/viewport, or none. When contained, the tooltip will "swap sides" instead of moving outside the container. - -```html - -``` - -Tooltip locking - -Delayed closing - -Anchor placement - -Externally access tooltip data - -```html - -``` - - +::note +See the [Tooltip guide](/docs/guides/tooltip) for usage details, modes, positioning, and examples. +:: diff --git a/docs/src/content/components/TooltipContext.md b/docs/src/content/components/TooltipContext.md index 2c86497c3..36dcdc024 100644 --- a/docs/src/content/components/TooltipContext.md +++ b/docs/src/content/components/TooltipContext.md @@ -4,3 +4,7 @@ category: interactions layers: [svg, canvas] related: [Chart, Tooltip, Highlight] --- + +::note +See the [Tooltip guide](/docs/guides/tooltip) for usage details, modes, positioning, and examples. +:: diff --git a/docs/src/content/components/TransformContext.md b/docs/src/content/components/TransformContext.md index e312f90fa..72f652970 100644 --- a/docs/src/content/components/TransformContext.md +++ b/docs/src/content/components/TransformContext.md @@ -14,14 +14,6 @@ related: ] --- -## Playground - -:example{ name="playground" } - -### Pan/Zoom SVG image - -:example{ name="pan-zoom-svg-image" } - -### Pan/Zoom HTML image - -:example{ name="pan-zoom-html-image" } +::note +See the [Transform guide](/docs/guides/transform) for usage details, modes, constraints, and examples. +:: diff --git a/docs/src/content/components/Treemap.md b/docs/src/content/components/Treemap.md index 8d2210023..c5ddd9063 100644 --- a/docs/src/content/components/Treemap.md +++ b/docs/src/content/components/Treemap.md @@ -5,18 +5,6 @@ layers: [svg, canvas] related: [] --- - - -{#if settings.layer === 'canvas'} -::warning -Examples broken due to `Group` not positioning [correctly](https://github.com/techniq/layerchart/issues/662) with `Canvas` layers -:: -{/if} - ## Usage :example{ name="basic" showCode } diff --git a/docs/src/content/components/Vector.md b/docs/src/content/components/Vector.md new file mode 100644 index 000000000..fc2db9dcb --- /dev/null +++ b/docs/src/content/components/Vector.md @@ -0,0 +1,44 @@ +--- +description: Primitive component which draws directional arrows or spikes at data points to show magnitude and direction. +category: primitives +layers: [svg, canvas] +related: [Line, Circle, GeoPath] +--- + +## Usage + +### Basic + +Place vectors at specific pixel positions with configurable rotation and length. + +:example{ name="basic" showCode } + +### Anchor + +Control where the position point sits relative to the vector: `"start"` (base), `"middle"` (center, default for arrow), or `"end"` (tip). + +:example{ name="anchor" showCode } + +### Shapes + +Compare built-in shapes (`arrow`, `spike`) with proportional and fixed sizing, plus custom shapes via the `children` snippet. When `width` is not set, it scales proportionally with length. + +:example{ name="shapes" showCode } + +### Data mode + +Pass string property names to `x`, `y`, `length`, and `rotate` to drive vectors from data. Length is resolved through `rScale`. + +:example{ name="data-mode" showCode } + +### Wind map + +A geographic wind map showing wind speed and direction over Western Europe using real meteorological data. + +:example{ name="wind-map" showCode } + +### Election wind map + +A geographic wind map showing 2020 US presidential election results by county. Blue spikes lean left for Democratic wins, red spikes lean right for Republican wins, with length proportional to vote margin. + +:example{ name="election-wind-map" showCode } diff --git a/docs/src/content/components/Violin.md b/docs/src/content/components/Violin.md new file mode 100644 index 000000000..324e854af --- /dev/null +++ b/docs/src/content/components/Violin.md @@ -0,0 +1,34 @@ +--- +description: Composite mark rendering a symmetric density curve (violin shape) showing the distribution of data, optionally overlaid with box and median indicators. +category: marks +layers: [svg, canvas] +related: [BoxPlot, Area] +--- + +## Usage + +:example{ name="basic" showCode } + +## With box and median + +Enable `box` and `median` props to overlay quartile and median indicators inside the violin shape. + +:example{ name="with-box-median" showCode } + +## Horizontal + +Set `valueAxis="x"` on the Chart to render horizontal violins. + +:example{ name="horizontal" showCode } + +## Custom bandwidth + +Control the smoothness of the density curve with the `bandwidth` prop. Lower values show more detail, higher values produce smoother curves. + +:example{ name="bandwidth" showCode } + +## Combined with BoxPlot + +Layer a `Violin` behind a `BoxPlot` to show both the distribution shape and summary statistics. + +:example{ component="BoxPlot" name="with-violin" showCode } diff --git a/docs/src/content/guides/LLMs.md b/docs/src/content/guides/LLMs.md index e0eea48ae..d297aeb9b 100644 --- a/docs/src/content/guides/LLMs.md +++ b/docs/src/content/guides/LLMs.md @@ -1,6 +1,6 @@ --- title: LLMs -order: 8 +order: 99 --- + + + + {#each geojson.features as feature} + + {/each} + + +``` + +The `geo` prop creates a `GeoState` internally, configures the projection, fits it to the chart dimensions, and provides it via context to all geo components. + +:example{ component="GeoPath" name="us-country-map" } + +## Projections + +The `projection` prop accepts an uncalled [d3 projection](https://d3js.org/d3-geo/projection). LayerChart calls it internally and configures scale, translate, rotation, and clipping based on the other geo props and the chart dimensions. + +```svelte + +``` + +### Common projections + +| Projection | Type | Use case | +| ------------------ | -------- | ----------------------------------- | +| `geoAlbersUsa` | Flat map | US-focused maps (includes AK/HI) | +| `geoMercator` | Flat map | Web maps, tile layers | +| `geoEqualEarth` | Flat map | World maps with equal-area accuracy | +| `geoOrthographic` | Globe | Interactive globes | +| `geoNaturalEarth1` | Flat map | World maps with natural appearance | + +Globe projections (those with a default `clipAngle`, like `geoOrthographic`) are auto-detected for transform mode selection — see the [Transform guide](/docs/guides/transform#projection-mode) for details. + +### Projection playground + +Explore all available projections and their parameters interactively: + +:example{ component="GeoContext" name="projection-playground" } + +## Fitting to data + +The `fitGeojson` prop auto-scales and translates the projection to fit the provided GeoJSON within the chart dimensions: + +```svelte + +``` + +Without `fitGeojson`, you must manually configure `scale` and `translate` on the projection. With `fitGeojson`, the projection calls `fitSize([width, height], geojson)` automatically. + + + +## Rendering components + +LayerChart provides dedicated geo components for common geographic elements, as well as [geo-enabled primitives](/docs/guides/primitives#geo-mode) for flexible positioning using projections. + +### Primitives in geo mode + +When a primitive (`Circle`, `Rect`, `Line`, `Text`, etc.) is placed inside a geo projection context, positional x/y props automatically resolve through the projection instead of chart scales. This lets you plot geographic data directly without wrapper components: + +```svelte + + + + + + + + +``` + +Props like `cx`/`cy` are projected as `[longitude, latitude]` pairs, while non-positional props (`r`, `fill`, `stroke`) continue to resolve through their chart scales. See the [Primitives guide — Geo Mode](/docs/guides/primitives#geo-mode) for full details. + +### `GeoPath` — boundaries and shapes + +Renders GeoJSON features as SVG `` elements (or canvas paths). This is the primary component for country borders, state outlines, and any geographic shape. + +```svelte +{#each geojson.features as feature} + +{/each} +``` + +:example{ component="GeoPath" name="choropleth" } + +`GeoPath` also supports: + +- **Tooltips** — set `tooltip` to wire up pointer events automatically +- **Click handlers** — `onclick` receives the event and the `geoPath` instance for computing bounds +- **Custom curves** — pass a d3 `curve` factory for non-standard path rendering +- **Geo transforms** — apply `geoTransform` for straight lines on projected maps + +### `GeoPoint` — locations + +Plots a point at a geographic coordinate. Accepts `lat` and `long` props and projects them through the current projection: + +```svelte +{#each cities as city} + +{/each} +``` + +:example{ component="GeoPoint" name="us-state-capitals" } + +Use the `children` snippet for custom markers at each point: + +```svelte + + {#snippet children({ x, y })} + {city.name} + {/snippet} + +``` + +:example{ component="GeoPoint" name="icons" } + +### `GeoTile` — map tiles + +Renders raster map tiles (OpenStreetMap, etc.) that sync with the projection's scale and translate: + +```svelte + `https://tile.openstreetmap.org/${z}/${x}/${y}.png`} /> +``` + +:example{ component="GeoTile" name="basic" } + +Tiles integrate with transform for zoomable maps: + +:example{ component="GeoTile" name="zoomable-seamless-layers" } + +### `GeoCircle` — circular regions + +Draws a circle on the globe defined by a center coordinate and radius in degrees: + +```svelte + +``` + +:example{ component="GeoCircle" name="earthquake-globe" } + +### `GeoSpline` — curved connections + +Renders a smooth arc between two geographic points, useful for flight paths and connection maps: + +```svelte + +``` + +The `loft` prop controls how high the arc rises above the surface (default `1.0`): + +:example{ component="GeoSpline" name="world-map" } + +## Rotation + +Set initial rotation on the projection using the `rotate` prop with yaw (longitude), pitch (latitude), and roll: + +```svelte + +``` + +For interactive rotation, use `transform={{ mode: 'projection' }}` — see the [Transform guide](/docs/guides/transform#projection-mode). + +:example{ component="GeoPath" name="animated-globe" } + +## Clipping + +### `clipAngle` + +Controls the angular extent of the visible hemisphere for globe projections. Set to `90` for a standard hemisphere: + +```svelte + +``` + +### `clipExtent` + +Restricts rendering to a rectangular pixel region: + +```svelte + +``` + +## Tooltips on maps + +Set `tooltip` on each `GeoPath` to wire up pointer events automatically. The default tooltipContext `manual` mode is used, where each shape calls `show`/`hide` on pointer enter/leave: + +```svelte + + + {#each states.features as feature} + + {/each} + + + {#snippet children({ data })} + + {/snippet} + + +``` + +:example{ component="GeoPath" name="tooltip" } + +For more on tooltip modes and configuration, see the [Tooltip guide](/docs/guides/tooltip). + +## Pan & zoom on maps + +Geographic pan/zoom is handled by the transform system. There are two main approaches: + +### Projection mode + +The projection itself is updated on every transform change, keeping geographic coordinates accurate: + +```svelte + +``` + +:example{ component="GeoPath" name="transform-projection" } + +### Canvas mode + +Applies a CSS/SVG transform to the rendered output without re-projecting. Faster but less geographically accurate at extreme zoom levels: + +```svelte + +``` + +:example{ component="GeoPath" name="transform-canvas" } + +### World map + +The same patterns work at world scale — click a country to zoom in: + +:example{ component="GeoPath" name="transform-world-projection" } + +:example{ component="GeoPath" name="transform-world-canvas" } + +### Globe rotation + +Globe projections auto-detect rotation mode — dragging rotates the globe instead of panning: + +```svelte + +``` + +:example{ component="GeoPath" name="translucent-globe" } + +For full details on constraints, inertia, and programmatic zoom, see the [Transform guide](/docs/guides/transform). + +## Secondary projections with `GeoProjection` + +The `geo` prop on `Chart` provides the primary projection context. Use the `GeoProjection` component to create a secondary projection scope for overlay effects like a translucent globe: + +```svelte + + + + {#each countries.features as feature} + + {/each} + + + + + + {#each countries.features as feature} + + {/each} + + + +``` + +:example{ component="GeoPath" name="translucent-globe" } + +## Context access + +### Within a snippet + +```svelte + + {#snippet children({ context })} + + {/snippet} + +``` + +### Within a custom component + +```svelte + +``` + +### External to Chart + +```svelte + + + + + +``` + +## GeoState properties + +| Property | Type | Description | +| -------------- | ------------------ | ---------------------------------------- | +| `projection` | `GeoProjection` | The configured d3 projection instance | +| `fitSizeRange` | `[number, number]` | The `[width, height]` used for `fitSize` | +| `chartWidth` | `number` | Current chart width (synced from Chart) | +| `chartHeight` | `number` | Current chart height (synced from Chart) | + +### Configuration props (`GeoStateProps`) + +| Prop | Type | Description | +| ------------------ | -------------------------------------- | ------------------------------------------------------------ | +| `projection` | `() => GeoProjection` | D3 projection factory (pass uncalled, e.g. `geoMercator`) | +| `fitGeojson` | `GeoPermissibleObjects` | GeoJSON to fit the projection to | +| `fixedAspectRatio` | `number` | Fixed aspect ratio instead of responsive chart dimensions | +| `clipAngle` | `number` | Angular extent of visible hemisphere (degrees) | +| `clipExtent` | `[[number, number], [number, number]]` | Rectangular pixel clipping region | +| `rotate` | `{ yaw, pitch, roll }` | Initial rotation in degrees | +| `scale` | `number` | Manual projection scale (overrides fitGeojson scale) | +| `translate` | `[number, number]` | Manual projection translate (overrides fitGeojson translate) | +| `center` | `[number, number]` | Projection center `[longitude, latitude]` | +| `reflectX` | `boolean` | Mirror the projection horizontally | +| `reflectY` | `boolean` | Mirror the projection vertically | + +## Quick reference + +| Use case | Configuration | Example | +| --------------------- | --------------------------------------------------------- | ----------------------------------------------------------------------------- | +| US map | `geo={{ projection: geoAlbersUsa, fitGeojson }}` | [us-country-map](/docs/components/GeoPath/us-country-map) | +| Choropleth | `GeoPath` + color scale | [choropleth](/docs/components/GeoPath/choropleth) | +| World globe | `geo={{ projection: geoOrthographic, fitGeojson }}` | [translucent-globe](/docs/components/GeoPath/translucent-globe) | +| Animated globe | `rotate` + animation | [animated-globe](/docs/components/GeoPath/animated-globe) | +| Map with points | `GeoPoint` with `lat`/`long` | [us-state-capitals](/docs/components/GeoPoint/us-state-capitals) | +| Map with tiles | `GeoTile` with tile URL | [basic](/docs/components/GeoTile/basic) | +| Zoomable tile map | `GeoTile` + `transform={{ mode: 'projection' }}` | [zoomable-seamless-layers](/docs/components/GeoTile/zoomable-seamless-layers) | +| Curved connections | `GeoSpline` with `link` | [world-map](/docs/components/GeoSpline/world-map) | +| Map tooltips | `tooltipContext` + `GeoPath tooltip` | [tooltip](/docs/components/GeoPath/tooltip) | +| Pan/zoom (projection) | `transform={{ mode: 'projection', scrollMode: 'scale' }}` | [transform-projection](/docs/components/GeoPath/transform-projection) | +| Pan/zoom (canvas) | `transform={{ mode: 'canvas', scrollMode: 'scale' }}` | [transform-canvas](/docs/components/GeoPath/transform-canvas) | +| World map (projection)| Projection mode + world countries | [transform-world-projection](/docs/components/GeoPath/transform-world-projection) | +| World map (canvas) | Canvas mode + world countries | [transform-world-canvas](/docs/components/GeoPath/transform-world-canvas) | +| Globe rotation | `transform={{ mode: 'projection' }}` + `geoOrthographic` | [translucent-globe](/docs/components/GeoPath/translucent-globe) | +| Globe with inertia | `transform={{ mode: 'projection', inertia: true }}` | [transform-globe-inertia](/docs/components/GeoPath/transform-globe-inertia) | +| Bubble map | `GeoPath` + scaled circles | [bubble-map](/docs/components/GeoPath/bubble-map) | +| Spike map | `GeoPath` + spike marks | [spike-map](/docs/components/GeoPath/spike-map) | +| Secondary projection | `` component | [translucent-globe](/docs/components/GeoPath/translucent-globe) | +| State with counties | Nested GeoJSON features | [us-state-with-counties](/docs/components/GeoPath/us-state-with-counties) | + +## API reference + +- [GeoContext](/docs/components/GeoContext) — projection context component (also available via ``) +- [GeoProjection](/docs/components/GeoProjection) — secondary projection context component +- [GeoPath](/docs/components/GeoPath) — geographic shape rendering +- [GeoPoint](/docs/components/GeoPoint) — geographic point plotting +- [GeoTile](/docs/components/GeoTile) — raster map tiles +- [GeoCircle](/docs/components/GeoCircle) — circular geographic regions +- [GeoSpline](/docs/components/GeoSpline) — curved geographic connections diff --git a/docs/src/content/guides/migrations/state-refactor.md b/docs/src/content/guides/migrations/state-refactor.md new file mode 100644 index 000000000..4c27b4120 --- /dev/null +++ b/docs/src/content/guides/migrations/state-refactor.md @@ -0,0 +1,477 @@ +--- +title: '@next → state-refactor' +category: migrations +order: 2 +--- + +This guide covers changes introduced on the `state-refactor` branch beyond what was already in `@next`. If you are migrating from v1 (stable), see the [v1 → v2 migration guide](/docs/guides/migrations/v1-to-v2) for earlier breaking changes (Svelte 5, Tailwind 4, LayerCake removal, etc.). + +## New Features + +### Mark Registration & Implicit Series + +Marks now register their data and accessors with the Chart automatically. No more manually passing all accessor arrays to ``: + +```svelte diff +- +- +- +- ++ ++ ++ ++ +``` + +Marks are also **series-aware** via the `seriesKey` prop. When provided, a mark automatically resolves its data, accessors, stack offsets, and color from the matching series definition — no manual wiring required: + +```svelte +{#each context.series.visibleSeries as s (s.key)} + +{/each} +``` + +Simplified charts (`LineChart`, `BarChart`, etc.) handle this internally, iterating over visible series and passing `seriesKey` to each mark. + +Implicit series are generated from mark registrations, enabling tooltip and legend support without explicit `series` definitions. See the [series guide](/docs/guides/series) and [state guide](/docs/guides/state) for more details. + +### Data-Driven Primitives + +Primitives (Circle, Ellipse, Group, Line, Polygon, Rect, Text) now accept string or function accessors for positional props to automatically resolve values through chart scales and iterate over data. Components also accept an optional `data` prop to override chart context data. + +```svelte + + +``` + +Color properties (`fill`, `stroke`) can also be data-driven, resolving per-item through the chart's color scale (`cScale`). See the [primitives guide](/docs/guides/primitives) for usage details. + +### Canvas Layer Improvements + +Canvas rendering received significant fixes and new capabilities. See the [layers guide](/docs/guides/layers) for more on Svg, Canvas, and Html rendering. + +**Unified component tree:** Canvas rendering now uses a unified component tree with proper `save()`/`restore()` scoping, fixing Group transforms (translate, opacity) leaking to sibling components. + +**Newly supported in Canvas layers:** + +- `ClipPath` — now works with Canvas contexts +- `strokeOpacity` — supported on Path, Rect, and other primitives +- Dashed strokes +- Rounded `Rect` via `rx`/`ry` +- Event handlers on `Group` components +- `style` attribute passthrough + +**Performance:** Reduced computed style lookups with memoization, skip unnecessary hit canvas work when unneeded. + +### New Components + +| Component | Description | +| ----------------------------------------------------------------------- | ---------------------------------------------------------- | +| [`BoxPlot`](/docs/components/BoxPlot) | Box-and-whisker plot (quartiles, whiskers, outliers) | +| [`Violin`](/docs/components/Violin) | Violin plot (KDE density curve with optional box/median) | +| [`Density`](/docs/components/Density) | 2D kernel density estimation contours from scatter data | +| [`Contour`](/docs/components/Contour) | Isolines/filled contour bands from scalar fields | +| [`Raster`](/docs/components/Raster) | Pixel-based heatmap from grids, functions, or scatter data | +| [`Cell`](/docs/components/Cell) | Heatmap/matrix cells | +| [`Chord`](/docs/components/Chord) / [`Ribbon`](/docs/components/Ribbon) | Chord diagrams | +| [`Image`](/docs/components/Image) | Image rendering in charts | +| [`Vector`](/docs/components/Vector) | Vector/arrow mark | + +New utility functions [`computeBoxStats`](/docs/utils/stats) and [`kde`](/docs/utils/stats) for computing box plot statistics and kernel density estimation. New [`interpolateGrid`](/docs/utils/rasterInterpolate) utility for spatial interpolation of scattered data onto regular grids (none, nearest, barycentric methods). + +### Chart Export Utilities + +New utilities to export charts as PNG/JPEG/WebP images or SVG files: + +```ts +import { downloadImage, downloadSvg, getChartImageBlob, getChartSvgString } from 'layerchart'; +``` + +### Transform Enhancements + +- Cartesian pan/zoom via `transform={{ mode: 'domain' }}` with single or both axis support +- `scrollActivationKey` — require modifier key (meta, alt, control, shift) for scroll zoom/pan +- Inertia (momentum) support for drag gestures +- Zoom/pan constraints (`scaleExtent`, `translateExtent`, `constrain`, `domainExtent`) + +See the [transform guide](/docs/guides/transform) for examples. + +### Brush Redesign + +The brush system has been rebuilt around a new `BrushState` class with programmatic control: + +- `BrushState.move({ x?, y? })` — programmatic selection control +- `BrushState.selectAll()` — select full domain extent +- `BrushState.reset()` — clear selection +- `clickToReset` prop (default `true`) +- `zoomOnBrush` prop on simplified charts + +See the [brush guide](/docs/guides/brush) for the full API. + +### Geo Projection Support + +- Primitives (Circle, Rect, etc.) now support geo projection +- Spline supports geo projection for route paths + +See the [geo guide](/docs/guides/geo) for examples. + +### Continuous Color Scales + +`cScale` now supports sequential/diverging color scales (e.g. `scaleSequential(interpolateTurbo)`) without requiring `cRange`. Numeric `cDomain` values are auto-detected to use `extent` for continuous `[min, max]` domains. See the [scales guide](/docs/guides/scales) for details. + +### Other Notable Features + +- `SeriesState`: Support `selected` as part of [series](/docs/guides/series) declaration +- `Labels`: `seriesKey` filter for multi-series charts +- `Highlight`: Data-driven `r` prop for scaled highlight points +- `Bar`: Auto-computes mount animation initial values from chart scales when `motion` is set — no more hardcoding `initialY`/`initialHeight`. Per-property motion configs can also be a flat object: + + ```svelte diff + bars: { + - initialY: context?.height, + - initialHeight: 0, + - motion: { + - y: { type: 'tween', duration: 500, easing: cubicInOut }, + - height: { type: 'tween', duration: 500, easing: cubicInOut }, + - }, + + motion: { type: 'tween', duration: 500, easing: cubicInOut }, + }, + ``` + +- `Path`: Fixed `flattenPathData` to handle relative arc commands, fixing rounded bar mount animations starting below the baseline +- `Bar`: Fixed `width` / `height` props to override scale-derived dimensions +- `Rect`: New edge-based props (`x0`/`x1`/`y0`/`y1`) and `insets` support +- `Chart`: [`motion`](/docs/guides/animation) prop to transition x/y scales using tween or spring +- Default chart padding applied when using `marks`/`grid`/`axis` snippets (see [structure guide](/docs/guides/structure)) + +### New & Updated Examples + +Over 100 new examples have been added across the docs. Here are some highlights: + +**Pan/Zoom & Transform:** + +- [Pan/zoom with overview](/docs/components/LineChart/pan-zoom-with-overview) — brush + transform working together across two synchronized charts +- [Zoomable bubble chart](/docs/components/ScatterChart/zoomable-bubble) — ScatterChart with zoom support +- [BarChart pan/zoom](/docs/components/BarChart/pan-zoom) — cartesian domain pan/zoom on bar charts +- [Pan/zoom with dynamic data](/docs/components/LineChart/pan-zoom-dynamic-data) — streaming data with constrained viewport +- [Globe with inertia](/docs/components/GeoPath/transform-globe-inertia) — drag with momentum on an animated globe +- [Planet distances](/docs/components/TransformContext/planet-distances) — interactive solar system scale explorer +- [World map transform](/docs/components/GeoPath/transform-world-projection) — click-to-zoom world map (canvas & projection modes) + +**Geo & Maps:** + +- [Satellite projection](/docs/components/GeoProjection/satellite) — tilted satellite view +- [College football map](/docs/components/Image/college-football-map) — geo-positioned images +- [Geo route paths](/docs/components/Spline/geo-routes) — Spline with geo projection for flight/route paths +- [Election wind map](/docs/components/Vector/election-wind-map) — vector field visualization + +**Statistical & Scientific Visualization:** + +- [BoxPlot](/docs/components/BoxPlot/basic) with [horizontal](/docs/components/BoxPlot/horizontal), [tooltip](/docs/components/BoxPlot/with-tooltip), and [violin overlay](/docs/components/BoxPlot/with-violin) +- [Violin](/docs/components/Violin/basic) with [box/median](/docs/components/Violin/with-box-median) and [bandwidth](/docs/components/Violin/bandwidth) +- [Density](/docs/components/Density/basic) with [bandwidth slider](/docs/components/Density/bandwidth), [thresholds slider](/docs/components/Density/thresholds), and [Walmart store density map](/docs/components/Density/walmart) +- [Contour](/docs/components/Contour/volcano-lines) with [volcano filled](/docs/components/Contour/volcano-filled), [sampled function](/docs/components/Contour/sampled), and [interactive controls](/docs/components/Contour/volcano-filled-interactive) +- [Raster](/docs/components/Raster/volcano) with [Mandelbrot fractal](/docs/components/Raster/mandelbrot), [contour overlay](/docs/components/Raster/with-contour-overlay), and [math functions](/docs/components/Raster/math-functions) + +**New Component Examples:** + +- [Cell heatmap](/docs/components/Cell/basic), [punchcard](/docs/components/Cell/punchcard), [color scale](/docs/components/Cell/color-scale) +- [Chord diagrams](/docs/components/Chord/basic) with [hover](/docs/components/Chord/hover), [gradient](/docs/components/Chord/gradient), and [ticks](/docs/components/Chord/ticks) +- [Image](/docs/components/Image/pixel-mode) with [country flags](/docs/components/Image/country-flags), [US presidents](/docs/components/Image/us-presidents), and [sports logos](/docs/components/Image/sports-logos) +- [Vector](/docs/components/Vector/basic) with [shapes](/docs/components/Vector/shapes), [wind map](/docs/components/Vector/wind-map), and [anchoring](/docs/components/Vector/anchor) + +**Data-Driven Primitives:** + +- Data mode examples for [Circle](/docs/components/Circle/data-mode), [Rect](/docs/components/Rect/data-mode-edge), [Text](/docs/components/Text/data-mode), [Line](/docs/components/Line/data-mode), [Ellipse](/docs/components/Ellipse/data-mode), [Polygon](/docs/components/Polygon/data-mode), and [Group](/docs/components/Group/data-mode) +- Color scale examples ([ordinal](/docs/components/Circle/color-via-ordinal-scale), [threshold](/docs/components/Circle/color-via-threshold-scale)) for each primitive + +**Charts & Series:** + +- [Ridgeline](/docs/components/Area/ridgeline) and [ridgeline KDE](/docs/components/Area/ridgeline-kde) charts +- [Oscilloscope ridgeline](/docs/components/Area/oscilloscope-ridgeline) +- [Series with separate data](/docs/components/BarChart/series-stack-separate-data) per series +- [Programmatic series control](/docs/components/LineChart/series-programmatic-control) +- [Brush programmatic control](/docs/components/BrushContext/programmatic-control) + +Browse the full [examples gallery](/docs/examples) for more. + +## Breaking Changes + +### Chart + +#### `tooltip` prop renamed to `tooltipContext` + +The `tooltip` prop on `` has been renamed to `tooltipContext` to avoid conflict with the new `tooltip` snippet. This also applies when **disabling** tooltips on simplified charts. See the [tooltip guide](/docs/guides/tooltip) for updated usage. + +```svelte diff +- ++ + +- ++ +``` + +#### `isVertical` removed from ChartState, `valueAxis` added to Chart + +`ChartState.isVertical` has been removed in favor of `ChartState.valueAxis` (`'x'` | `'y'`), which explicitly defines which axis represents the value (dependent variable). + +Simplified charts (`BarChart`, `LineChart`, etc.) **still accept `orientation`** as before — each chart maps it to the correct `valueAxis` internally. The `` component uses `valueAxis` directly, since `orientation` is ambiguous at that level (a "vertical" BarChart has `valueAxis="y"`, while a "vertical" LineChart has `valueAxis="x"`). + +When `valueAxis` is not explicitly set, it is now inferred from the scale types: if `yScale` is a band scale, `valueAxis` defaults to `'x'`; if `xScale` is a band scale, it defaults to `'y'`; otherwise `'y'`. + +When accessing chart state programmatically: + +```svelte diff +- if (ctx.isVertical) { ... } ++ if (ctx.valueAxis === 'y') { ... } +``` + +When using `` directly (not simplified charts): + +```svelte diff +- ++ +``` + +### GeoContext → GeoProjection + +The component has been renamed. See the [geo guide](/docs/guides/geo) for updated examples. + +```svelte diff +- import { GeoContext } from 'layerchart' ++ import { GeoProjection } from 'layerchart' + +- ++ +``` + +#### Tooltip data model changed + +The old `payload` array (from recharts-style APIs) has been replaced with `tooltip.series` and `tooltip.data` on the chart context. If you are building custom tooltips that read from the tooltip context directly: + +```svelte diff +- import { getTooltipContext } from 'layerchart' +- const tooltipCtx = getTooltipContext() ++ import { getChartContext } from 'layerchart' ++ const ctx = getChartContext() + + // x-axis value (e.g. a Date) +- item.label ++ ctx.x(ctx.tooltip.data) + + // series name +- item.name ++ item.label + + // raw data object +- item.payload ++ ctx.tooltip.data + + // per-item color +- item.payload.color ++ item.config?.color + + // iterate over series +- tooltipCtx.payload ++ ctx.tooltip.series +``` + +### Tooltip prop on Arc, Pie, Calendar, GeoPath + +These components simplified the tooltip prop from a config object to a boolean. See the [tooltip guide](/docs/guides/tooltip) for details. + +```svelte diff +- ++ + +- ++ +``` + +### Brush prop changes + +The following props have been removed or replaced. See the [brush guide](/docs/guides/brush) for the new API. + +| Removed | Replacement | +| ------------------------------------ | --------------------------------------------------------- | +| `mode` ('integrated' \| 'separated') | Sync behavior driven by presence of `x`/`y` props | +| `resetOnEnd` | Call `e.brush.reset()` in `onBrushEnd` handler | +| `ignoreResetClick` | `clickToReset` (default `true`) | +| `onReset` event | Check `brush.active === false` in `onBrushEnd`/`onChange` | + +### TransformContext + +See the [transform guide](/docs/guides/transform) for updated examples. + +#### `initialScrollMode` renamed to `scrollMode` (reactive) + +```svelte diff +- ++ +``` + +#### `domainExtent: 'original'` renamed to `'data'` + +```svelte diff +- ++ +``` + +### Simplified Chart `get*Props` helpers removed + +Simplified charts (`BarChart`, `LineChart`, `AreaChart`, `ScatterChart`) previously exposed helper functions like `getBarsProps()`, `getSplineProps()`, `getAreaProps()`, `getPointsProps()`, etc. as parameters in the `marks` snippet. These have been removed — marks are now series-aware via `seriesKey` and resolve their own data, accessors, and styling from the chart context. + +If you were using `get*Props` helpers in a custom `marks` snippet, pass `seriesKey` directly to the mark instead: + +```svelte diff +- {#snippet marks({ visibleSeries, getBarsProps })} +- {#each visibleSeries as s, i (s.key)} +- +- {/each} +- {/snippet} + ++ {#snippet marks({ context })} ++ {#each context.series.visibleSeries as s, i (s.key)} ++ ++ {/each} ++ {/snippet} +``` + +Similarly, the `axis` snippet no longer receives a `getAxisProps` helper: + +```svelte diff +- {#snippet axis({ getAxisProps })} +- +- ++ {#snippet axis({ context })} ++ ++ + {/snippet} +``` + +Per-series overrides can be passed via the `props` field in [series definitions](/docs/guides/series), which get spread onto the mark automatically. + +> **Note:** Chart-level `props` (e.g. `props={{ area: { curve: curveNatural } }}`) are **not** applied when you supply a custom `marks` snippet. Move those props directly onto the mark component or pass them through series `props`: +> +> ```svelte diff +> - props={{ area: { curve: curveNatural, fillOpacity: 0.4 } }} +> > +> - {#snippet marks({ series, getAreaProps })} +> - {#each series as s, i (s.key)} +> - +> + {#snippet marks({ context })} +> + {#each context.series.visibleSeries as s (s.key)} +> + +> {/each} +> {/snippet} +> +> ``` + +The `points` snippet on `LineChart` only overrides point rendering; the `marks` snippet replaces the **entire** chart (lines + points). Do not rename a `points` snippet to `marks`: + +```svelte diff + +- {#snippet points({ visibleSeries, getPointsProps })} +- {#each visibleSeries as s, i (s.key)} +- ++ {#snippet points({ context })} ++ {#each context.series.visibleSeries as s (s.key)} ++ + ... + + {/each} + {/snippet} + +``` + +### Context / State API + +The context system has been consolidated. See the [state guide](/docs/guides/state) for the new architecture. + +#### Context getters/setters removed + +Standalone context functions have been removed in favor of the unified `getChartContext()`: + +```svelte diff +- import { getTooltipContext } from 'layerchart' +- const tooltip = getTooltipContext() ++ import { getChartContext } from 'layerchart' ++ const chart = getChartContext() ++ // chart.tooltip, chart.brushState, chart.transformState +``` + +Removed functions: + +- `getTooltipContext()` / `setTooltipContext()` +- `getBrushContext()` / `setBrushContext()` +- `getTransformContext()` / `setTransformContext()` + +#### `ChartContextValue` type renamed to `ChartState` + +```svelte diff +- import { type ChartContextValue } from 'layerchart' ++ import { type ChartState } from 'layerchart' + +- let context = $state() ++ let context = $state() +``` + +#### Bind renames + +```svelte diff +- ++ + +- ++ +``` + +ChartState properties: + +```svelte diff +- chartCtx.brushContext ++ chartCtx.brushState + +- chartCtx.transformContext ++ chartCtx.transformState +``` + +#### Render context → Layer context + +See the [layers guide](/docs/guides/layers) for the updated API. + +```svelte diff +- import { getRenderContext } from 'layerchart' ++ import { getLayerContext } from 'layerchart' + +// Component prop rename: +- supportedContexts={['svg', 'canvas']} ++ layers={['svg', 'canvas']} +``` + +## Quick Reference — Find & Replace + +| Before | After | Scope | +| -------------------------- | ---------------------------------- | ------------------------ | +| `GeoContext` | `GeoProjection` | Component rename | +| `initialScrollMode` | `scrollMode` | TransformContext prop | +| `domainExtent: 'original'` | `domainExtent: 'data'` | Transform config | +| `ctx.isVertical` | `ctx.valueAxis === 'y'` | ChartState property | +| `` blocks, so they work out of the box with no CSS framework. + +All component styles are designed for easy overriding: + +- **CSS layers** — styles are wrapped in `@layer base { }`, so any user styles take precedence without needing `!important` +- **`:where()` selectors** — all component selectors use `:where(.lc-*)` for zero specificity, making them trivial to override +- **CSS variables** — components expose `--fill-color`, `--stroke-color`, and other variables for theming +- **`lc-*` class names** — every component has a targetable class (e.g. `.lc-rect`, `.lc-axis`, `.lc-spline`) for custom styling + +For framework integrations, single-line imports are available: + +```css +/* daisyUI v5 */ +@import 'layerchart/daisyui-5.css'; + +/* shadcn-svelte v1 */ +@import 'layerchart/shadcn-svelte.css'; + +/* Skeleton v3 */ +@import 'layerchart/skeleton-3.css'; +``` + +See the [styles guide](/docs/guides/styles) for details. + +### New Components + +| Component | Description | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | +| [`ArcChart`](/docs/components/ArcChart) | Simplified arc/donut chart | +| [`Connector`](/docs/components/Connector) | Connection lines between elements | +| [`Layer`](/docs/components/Layer) | Easy switch between Svg, Canvas, and Html [layers](/docs/guides/layers) | +| [`Path`](/docs/components/Path) | Low-level path primitive (extracted from Spline) | +| [`AnnotationLine`](/docs/components/AnnotationLine) / [`AnnotationPoint`](/docs/components/AnnotationPoint) / [`AnnotationRange`](/docs/components/AnnotationRange) | Annotation system | +| [`Ellipse`](/docs/components/Ellipse) | Ellipse primitive | +| [`Polygon`](/docs/components/Polygon) | Polygon primitive with custom shapes | +| [`BoxPlot`](/docs/components/BoxPlot) | Box-and-whisker plot (quartiles, whiskers, outliers) | +| [`Violin`](/docs/components/Violin) | Violin plot (KDE density curve with optional box/median) | +| [`Cell`](/docs/components/Cell) | Heatmap/matrix cells | +| [`Chord`](/docs/components/Chord) / [`Ribbon`](/docs/components/Ribbon) | Chord diagrams | +| [`Image`](/docs/components/Image) | Image rendering in charts | +| [`Vector`](/docs/components/Vector) | Vector/arrow mark | + +### Annotation Integration + +Annotations can now be passed directly to simplified charts: + +```svelte + +``` + +### BarChart Radial Support + +`BarChart` now supports radial layout in both vertical and horizontal orientations. + +### Rule as Data-Driven Mark + +`Rule` now supports data-driven usage for candlestick, lollipop, and similar charts: + +```svelte + +``` + +### Arc Path Labels + +`Arc` and `Text` support arc path labels with inner/outer/middle placement and smart flipping. + +### Pattern Improvements + +- Canvas support for patterns +- Simplified definitions via `lines`/`circles` props + +### ForceSimulation Improvements + +- Generic over nodes and links: `ForceSimulation` +- Decoupled from `ChartContext` — takes nodes and links via `data` prop +- `onNodesChange` callback +- `links` exposed via `children` snippet + +### Mark Registration & Implicit Series + +Marks now register their data and accessors with the Chart automatically. No more manually passing all accessor arrays to ``: + +```svelte diff +- +- +- +- ++ ++ ++ ++ +``` + +Implicit series are generated from mark registrations, enabling tooltip and legend support without explicit `series` definitions. See the [series guide](/docs/guides/series) and [state guide](/docs/guides/state). + +### Data-Driven Primitives + +Primitives (Circle, Ellipse, Group, Line, Polygon, Rect, Text) now accept string or function accessors for positional props to automatically resolve values through chart scales and iterate over data: + +```svelte + + +``` + +Color properties (`fill`, `stroke`) can also be data-driven via the chart's color scale (`cScale`). See the [primitives guide](/docs/guides/primitives). + +### Transform & Brush Enhancements + +- Cartesian pan/zoom via `transform={{ mode: 'domain' }}` with single or both axis support +- `scrollActivationKey` — require modifier key for scroll zoom/pan +- Inertia (momentum) support for drag gestures +- Zoom/pan constraints (`scaleExtent`, `translateExtent`, `constrain`, `domainExtent`) +- Brush redesign with `BrushState` class for programmatic control (`move`, `selectAll`, `reset`) + +See the [transform guide](/docs/guides/transform) and [brush guide](/docs/guides/brush). + +### Chart Export Utilities + +```ts +import { downloadImage, downloadSvg, getChartImageBlob, getChartSvgString } from 'layerchart'; +``` + +### Geo Projection Support + +- Primitives (Circle, Rect, etc.) support geo projection +- Spline supports geo projection for route paths +- `quadtree` tooltip mode for geo visualizations + +See the [geo guide](/docs/guides/geo). + +### Continuous Color Scales + +`cScale` now supports sequential/diverging color scales (e.g. `scaleSequential(interpolateTurbo)`) without requiring `cRange`. See the [scales guide](/docs/guides/scales). + +### Canvas Improvements + +- Unified component tree with proper Group transform scoping +- `ClipPath` support in Canvas +- `strokeOpacity` on Path, Rect, and other primitives +- Rounded `Rect` via `rx`/`ry` +- Dashed stroke support +- Event handlers on `Group` components +- `style` attribute passthrough +- Default `lc-*` classes applied in Canvas (matching Svg) +- Disableable hit canvas (useful during animations) +- Reduced computed style lookups with memoization + +### Global Settings + +New `settings` context for configuring global defaults like default layer type and debug mode. See the [layers guide](/docs/guides/layers). + +### Other Features + +- `Chart`: `class` and `clip` props +- `Chart`: Explicit `width` / `height` instead of requiring parent dimensions +- `Chart`: Automatic scale detection based on data and domain values +- `Chart`: `xInterval` / `yInterval` for time scale bar charts +- `LineChart`: `orientation="vertical"` support +- `Axis`: Responsive tick counts via `tickSpacing` +- `Axis`: Multiline ticks for time intervals +- `Axis`: Time duration aware tick formatting +- `Axis`: `format` to filter ticks (integer and date/time) +- `Tooltip`: Standard CSS classes (non-tailwind) for root element +- `TooltipContext`: `quadtree-x` / `quadtree-y` modes, `band` mode with time scale +- `TooltipContext`: `quadtree` mode for geo visualizations +- `TooltipContext`: `touchEvents` control (defaults to `pan-y` for vertical scrolling with horizontal scrubbing) +- `Voronoi`: `r` prop for max radius clip path +- `Legend`: `selected` prop to fade unselected items +- `SeriesState`: `isHighlighted(seriesKey)` helper +- `Text`: Word wrapping with `\n`, `fill: currentColor` default +- `Highlight`: Radial area support, `opacity` prop, data-driven `r` prop +- `Bar`: Fixed `width` / `height` props to override scale-derived dimensions +- `Rect`: New edge-based props (`x0`/`x1`/`y0`/`y1`) and `insets` support +- `Chart`: [`motion`](/docs/guides/animation) prop to transition x/y scales using tween or spring +- `SeriesState`: Support `selected` as part of [series](/docs/guides/series) declaration +- `Labels`: `seriesKey` filter for multi-series charts +- Default chart padding applied when using `marks`/`grid`/`axis` snippets (see [structure guide](/docs/guides/structure)) +- `LinearGradient`: Html context support +- `Circle` / `Rect`: `children` snippet for Html layers +- `Spline`: `value` in `startContent` / `endContent` snippets +- `FormatConfig` objects for custom formatting (ex. `format={{ type: 'day', options: { variant: 'long' } }}`) +- `PeriodTypeCode` strings for simplified date formatting (ex. `format="day"`) +- `applyLanes()` util for densely packing timelines + +## Foundational Changes + +### Svelte 5 + +LayerChart v2 requires **Svelte 5**. All components have been migrated to runes and snippets. + +**Slots → Snippets:** + +```svelte diff +- +- {width} x {height} +- + ++ ++ {#snippet children({ width, height })} ++ {width} x {height} ++ {/snippet} ++ +``` + +**Stores → Runes:** + +If you were accessing context stores (e.g. from `getChartContext()`), these are now rune-based state objects. Replace `$store` syntax with direct property access. See the [state guide](/docs/guides/state) for the new architecture. + +### Tailwind CSS v4 + +LayerChart v2 targets **Tailwind CSS v4**. Tailwind is no longer required — see CSS-Only Usage above. + +### LayerCake Removal + +LayerCake is no longer a dependency. All chart context, scales, and layout are managed internally by LayerChart's own `ChartState`. If you were importing anything from LayerCake through LayerChart, use the LayerChart equivalents instead. + +### Reduced Bundle Size + +The documentation site has been extracted from `packages/layerchart/` into a standalone `docs/` workspace package, so docs-only dependencies no longer affect the library's install size or dependency tree. + +The following transitive dependencies have also been removed: + +- `lodash-es` — replaced with internal utilities +- `date-fns` — replaced with `d3-time` +- `culori` — removed +- `@layerstack/svelte-stores` — replaced with `@layerstack/svelte-state` + +## Breaking Changes + +### Simplified Charts + +#### `renderContext` renamed to `layer` + +```svelte diff +- ++ +``` + +### Axis + +#### Position props require `$` prefix + +```svelte diff +- ++ + +- ++ +``` + +### Bar + +#### `bar` prop renamed to `data` + +```svelte diff +- ++ +``` + +### Points + +#### `links` prop removed + +Use the new `Rule` component with x/y accessors instead: + +```svelte diff +- ++ ++ +``` + +### Spline / Path + +#### `Path` extracted as separate component + +`Path` is now a standalone [primitive](/docs/guides/primitives) component, extracted from `Spline`. If you were using low-level path rendering, import `Path` directly: + +```ts +import { Path } from 'layerchart'; +``` + +#### `splineRef` renamed to `pathRef` + +```svelte diff +- ++ +``` + +### Annotations + +#### `labelOffset` split into `labelXOffset` / `labelYOffset` + +```svelte diff +- ++ + +- ++ +``` + +### Legend + +#### `classes.swatches` renamed to `classes.item` + +```svelte diff +- ++ +``` + +### Treemap + +#### `selected` prop removed + +The `selected` prop has been removed from Treemap. + +### Blur + +#### Children snippet props removed + +```svelte diff +- {#snippet children({ ... })}{/snippet} ++ {#snippet children()}{/snippet} +``` + +### `defaultChartPadding()` signature changed + +```svelte diff +- defaultChartPadding(axis, legend) ++ defaultChartPadding({ axis, legend }) + +// Now also supports explicit overrides: ++ defaultChartPadding({ left: 50 }) +``` + +### Chart + +#### `tooltip` prop renamed to `tooltipContext` + +```svelte diff +- ++ +``` + +#### `isVertical` removed from ChartState, `valueAxis` added + +`ChartState.isVertical` has been removed in favor of `ChartState.valueAxis`. Simplified charts still accept `orientation`. + +```svelte diff +- if (ctx.isVertical) { ... } ++ if (ctx.valueAxis === 'y') { ... } +``` + +### GeoContext → GeoProjection + +```svelte diff +- import { GeoContext } from 'layerchart' ++ import { GeoProjection } from 'layerchart' +``` + +### Tooltip prop on Arc, Pie, Calendar, GeoPath + +Simplified from config object to boolean: + +```svelte diff +- ++ +``` + +### Brush API redesign + +See the [brush guide](/docs/guides/brush) for the new `BrushState` API. Removed props: `mode`, `resetOnEnd`, `ignoreResetClick`, `onReset`. + +### TransformContext + +```svelte diff +- ++ + +- ++ +``` + +### Context / State API + +Standalone context getters removed — use `getChartContext()` instead: + +```svelte diff +- import { getTooltipContext } from 'layerchart' ++ import { getChartContext } from 'layerchart' ++ const chart = getChartContext() ++ // chart.tooltip, chart.brushState, chart.transformState +``` + +Bind and property renames: + +```svelte diff +- ++ + +- ++ + +- import { getRenderContext } from 'layerchart' ++ import { getLayerContext } from 'layerchart' +``` + +See the [state guide](/docs/guides/state) for the new architecture. + +### Default tooltip modes changed + +- `AreaChart`: `bisect-x` → `quadtree-x` +- `LineChart`: `bisect-x` → `quadtree-x` +- `ScatterChart`: `voronoi` → `quadtree` + +These new defaults work with categorical data and don't require sorted data. See the [tooltip guide](/docs/guides/tooltip) for all available modes. + +## Quick Reference — Find & Replace + +| Before | After | Scope | +| --------------------------- | ---------------------------------- | ------------------------ | +| `GeoContext` | `GeoProjection` | Component rename | +| `renderContext=` | `layer=` | Simplified charts | +| `` | `` | Axis position | +| `` | `` | Axis position | +| `` | `` | Axis position | +| `` | `` | Axis position | +| `bar={` / `{bar}` | `data={` / `{data}` | Bar component | +| `splineRef` | `pathRef` | Spline bind | +| `labelOffset=` | `labelXOffset=` | AnnotationLine/Point | +| `classes={{ swatches` | `classes={{ item` | Legend | +| `` + `` | Points component | +| `defaultChartPadding(a, b)` | `defaultChartPadding({ ... })` | Utility | +| `ctx.isVertical` | `ctx.valueAxis === 'y'` | ChartState property | +| ` {/each} + +## Data Mode + +Primitive components (`Circle`, `Ellipse`, `Group`, `Image`, `Line`, `Polygon`, `Rect`, `Text`) can operate in two modes: + +- **Pixel mode** — pass numbers for direct pixel positioning +- **Data mode** — pass strings or functions to automatically resolve values through chart scales and iterate over data + +Without data mode, using primitives in data space requires accessing scales and manually iterating over data: + +```svelte + + {#snippet marks({ context })} + {#each data as d} + + {/each} + {/snippet} + +``` + +With data mode, the same result is achieved declaratively: + +```svelte + + {#snippet marks()} + + {/snippet} + +``` + +- **Data-driven** — renders one element per data item without an explicit `{#each}` loop +- **Scale-aware** — string props like `cx="date"` resolve through the chart's scales automatically +- **Composable** — pixel values like `r={5}` continue to work alongside data-driven props + +### Prop Resolution Rules + +| Prop value | Mode | What happens | +| ------------- | ----- | ------------------------------------------------------- | +| `number` | Pixel | Used directly as pixel value | +| `string` | Data | Treated as data property name, resolved via chart scale | +| `function(d)` | Data | Called per data item, result passed through chart scale | + +Note that passing a scale result directly (e.g. `cx={xScale(10)}`) produces a number, so it stays in pixel mode. Using a function accessor (e.g. `cx={d => d.value}`) enters data mode — the returned value is passed through the chart scale regardless of whether it's a string or number. + +When **any** positional prop is a string or function, the component enters data mode and renders one element per data item. + +### Data Source + +In data mode, components iterate over data from (in priority order): + +::steps + +## Explicit `data` prop on the component + +```svelte + + {#snippet marks()} + + {/snippet} + +``` + +## Chart context data (`ctx.data`) + +```svelte + + {#snippet marks()} + + {/snippet} + +``` + +:: + +### Circle + +:example{ component="Circle" name="data-mode" showCode } + +Each data item's `date` property is passed through `xScale`, and `value` through `yScale`. Since `r={5}` is a number, it stays as a pixel value. + +You can also use function accessors (`cx={d => d.date}`) or mix data-driven and pixel values (`cx="date" cy={50}`). + +--- + +### Line + +:example{ component="Line" name="data-mode" showCode } + +Each line draws from the baseline (`y1={d => 0}` passes `0` through `yScale`) up to the data value (`y2="value"`). The `x1` and `x2` props both use `"date"` so each line is vertical at the data point's x position. + +--- + +### Rect + +Rect supports two data modes: **standard** (x/y + pixel width/height) and **edge-based** (x0/x1/y0/y1). + +:example{ component="Rect" name="data-mode-edge" showCode } + +This histogram uses edge-based mode with `x0`/`x1`/`y0`/`y1` props. Each prop resolves through the chart's scales. `y0={(d) => 0}` passes `0` through `yScale` to anchor bars at the baseline. The `insets={{ x: 1 }}` adds 1px gaps between bars. + +Rect also supports a **standard data mode** where `x`/`y` resolve through scales while `width`/`height` remain pixel values: + +```svelte + +``` + +--- + +### Text + +Text has special handling: CSS-like strings (`"50%"`, `"1em"`) remain SVG values, while other strings (`"date"`, `"label"`) are treated as data property accessors. + +:example{ component="Text" name="data-mode" showCode } + +In data mode, `value` accepts a string property name (`value="label"` resolves to `d.label`) or a function accessor (`value={d => d.label}`) to compute the displayed text per data item. CSS-like strings like `x="50%"` continue to work as SVG positioning values. + +--- + +### Ellipse + +Works identically to Circle with separate x/y radii. + +:example{ component="Ellipse" name="data-mode" showCode } + +--- + +### Group + +Group can also be data-driven, positioning compound elements (e.g. circle + label) at each data point. + +:example{ component="Group" name="data-mode" showCode } + +Each group is translated to the data point's position. Children like `Circle` and `Text` render relative to the group's origin. + +--- + +### Image + +Image renders one image per data item, with positions resolved through chart scales. The `href` prop resolves per item (as a data property name or function accessor). Use `r` for circular clipping. + +:example{ component="Image" name="country-flags" showCode } + +--- + +### Polygon + +Polygon supports data mode for `cx`, `cy`, and `r`, rendering one polygon per data item. + +:example{ component="Polygon" name="data-mode" showCode } + +Shape options like `points`, `rotate`, `inset`, `cornerRadius`, `scaleX`/`scaleY`, etc. apply uniformly to each data-driven polygon. + +--- + +### Data-Driven Colors + +In data mode, `fill` and `stroke` can also resolve per-item through the chart's color scale (`cScale`). + +| Prop value | What happens | +| ---------------------------- | ------------------------------------------------------ | +| `"category"` (data property) | `d.category` resolved through `cScale` → color string | +| `"red"` (CSS color) | Used as a literal color (not found as a data property) | +| `(d) => d.category` | Function result passed through `cScale` → color string | + +**String disambiguation:** If `d[value]` exists, the string is treated as a data property and resolved through `cScale`. Otherwise, it's used as a literal CSS color. + +```svelte + + {#snippet marks()} + + {/snippet} + +``` + +Each circle's fill is determined by its `category` value, resolved through the chart's color scale. Literal colors like `fill="red"` continue to work as expected. + +--- + +### Scale Mapping Reference + +| Prop | Scale used | +| --------------------------- | ---------------------------------- | +| `cx`, `x`, `x0`, `x1`, `x2` | `xScale` | +| `cy`, `y`, `y0`, `y1`, `y2` | `yScale` | +| `r`, `rx`, `ry` | `rScale` (falls back to raw value) | +| `fill`, `stroke` | `cScale` (falls back to raw value) | +| `href` (Image) | Data property or literal URL | + +### Notes + +- **Motion/animation**: Works in both pixel and data mode. In data mode, resolved values are animated per item using the item key for identity — useful for smoothly transitioning a highlighted element (e.g., tooltip indicator) between data points. +- **`ref` binding**: Only available in pixel mode (single element). +- **Events**: In data mode, event handlers (onclick, etc.) are attached to each rendered element. +- **Key function**: Use `key={(d, i) => d.id}` for efficient keyed rendering in data mode. + +## Geo Mode + +When a primitive is placed inside a `GeoProjection` context, positional x/y props automatically resolve through the geo projection instead of chart scales. This means you can plot geographic data directly with primitives — no wrapper component needed. + +```svelte + + + + + + + + +``` + +### How It Works + +- **x/y pairs are projected together** — `cx`/`cy` (or `x`/`y`, `x1`/`y1`, etc.) are extracted as `[longitude, latitude]` and passed through `projection([lon, lat])` to get `[px, py]` +- **Non-positional props are unchanged** — `r`, `rx`, `ry`, `width`, `height`, `fill`, `stroke` continue to resolve through their respective chart scales (`rScale`, `cScale`, etc.) +- **Same data mode rules apply** — string or function props trigger data mode and iterate over chart data + +### Projection Mapping + +| Prop pairs (projected together) | Non-geo props (unchanged) | +| -------------------------------- | -------------------------------- | +| `cx`/`cy`, `x`/`y` | `r`, `rx`, `ry` | +| `x1`/`y1`, `x2`/`y2` | `width`, `height` | +| `x0`/`y0`, `x1`/`y1` (Rect) | `fill`, `stroke` | + +### Example: Airports on a Globe + +```svelte + + + + + + + + +``` + +Each airport's `longitude` and `latitude` properties are projected through the globe projection. Since `r={2}` is a number, it stays as a 2px radius. You can also make `r` data-driven (e.g., `r="passengers"`) to create a proportional symbol map. + +### Spline + +[Spline](/docs/components/Spline) also supports geo mode. When a projection is set, it automatically converts data into a GeoJSON `LineString` and renders via `geoPath` — giving proper geodesic interpolation and antimeridian handling. + +```svelte + + + + + + + + +``` diff --git a/docs/src/content/guides/series.md b/docs/src/content/guides/series.md new file mode 100644 index 000000000..5c2c3c856 --- /dev/null +++ b/docs/src/content/guides/series.md @@ -0,0 +1,311 @@ +--- +title: Series (Multi-series) +category: state +--- + +LayerChart provides a series system for rendering multiple data series on a single chart. Each series can have its own color, data, and component props. The `SeriesState` manages visibility, highlighting, and stacking across series, and integrates with Legend and Tooltip components. + +## Quick start + +Pass a `series` array to any simplified chart to render multiple series: + +```svelte + +``` + +Each series `key` maps to a property in your data. The chart renders one line (or area, bar, etc.) per series. + +:example{ component="LineChart" name="series" } + +## Series definition + +Each item in the `series` array is a `SeriesData` object: + +| Property | Type | Description | +| ---------- | ------------------------- | --------------------------------------------------------------------- | +| `key` | `string` | **Required.** Maps to a data property or identifies the series | +| `label` | `string` | Display name (used by Legend/Tooltip). Defaults to `key` | +| `value` | `Accessor` | Custom value accessor. Defaults to `key` as a property name | +| `maxValue` | `number` | Maximum possible value. Useful when `data` is a single item | +| `data` | `TData[]` | Per-series data array. When set, each series can have its own data | +| `color` | `string` | Series color (used by marks, legend, and tooltip) | +| `selected` | `boolean` | Whether the series is initially visible. Defaults to `true`. Reactive | +| `props` | `Partial` | Additional props passed to the series' rendered component | + +## Data formats + +### Wide format (shared data) + +The most common approach — one data array with a column per series: + +```ts +const data = [ + { date: '2024-01', apples: 100, bananas: 80, oranges: 60 }, + { date: '2024-02', apples: 120, bananas: 90, oranges: 70 } +]; +``` + +```svelte + +``` + +:example{ component="BarChart" name="series" } + +### Separate data per series + +Each series can have its own `data` array. This is useful for long-format data or when series have different data points: + +```svelte + +``` + +When using separate data, set the `y` accessor on the chart (or `value` on each series) to tell the chart which property holds the value. + +:example{ component="LineChart" name="series-separate-data" } + +Separate data arrays can even have different lengths: + +:example{ component="LineChart" name="series-separate-data-diff-length" } + +## Layouts + +The `seriesLayout` prop controls how multiple series are arranged: + +| Layout | Effect | +| ------------------ | ---------------------------------------------------- | +| `'overlap'` | Series overlap (default). Later series render on top | +| `'stack'` | Series are stacked vertically | +| `'stackExpand'` | Stacked and normalized to 100% | +| `'stackDiverging'` | Positive values stack up, negative values stack down | +| `'group'` | Side-by-side within each band (bar charts only) | + +### Overlap (default) + +Series render on top of each other. Useful for comparing trends: + +:example{ component="BarChart" name="series" } + +### Stack + +Series are stacked, with each series starting where the previous one ended: + +```svelte + +``` + +:example{ component="BarChart" name="stack-series" } + +:example{ component="AreaChart" name="series-stack" } + +### Stack expand (100%) + +Stacked and normalized so the total is always 100%: + +:example{ component="BarChart" name="stack-series-expand" } + +### Stack diverging + +Positive and negative values stack in opposite directions: + +:example{ component="BarChart" name="stack-series-diverging" } + +### Stacking with separate data + +Stacking works with per-series data arrays too. The stack is computed by aligning data across series using the x-axis key: + +:example{ component="BarChart" name="series-stack-separate-data" } + +### Group + +Bars are placed side-by-side within each band: + +:example{ component="BarChart" name="group-series" } + +## Legend + +Add `legend` to show a clickable legend that controls series visibility: + +```svelte + +``` + +Clicking a legend item toggles that series on or off. The chart's domain and stacking recalculate based on the visible series. + +:example{ component="BarChart" name="legend-stack-series" } + +:example{ component="AreaChart" name="series-stack-legend" } + +## Highlighting + +Hovering a legend item highlights the corresponding series and fades the others. This uses `context.series.highlightKey` which components like `Spline`, `Area`, and `Bar` read to apply opacity/saturation changes. + +You can also read the highlight state in custom mark snippets: + +```svelte + + {#snippet aboveMarks({ context })} + {#if context.series.highlightKey} + + {/if} + {/snippet} + +``` + +:example{ component="LineChart" name="series-labels-hover" } + +## Programmatic control + +Access the series state via `bind:context` to build your own series toggle UI, set initial visibility, or control series from external components. + +### Custom legend + +Use `context.series.selectedKeys.toggle(key)` to toggle series visibility, and `context.series.isVisible(key)` to read the current state. Call `context.series.selectedKeys.clear()` to show all series again (an empty selection means all visible): + +```svelte + + +{#each series as s} + +{/each} + + + +``` + +:example{ component="LineChart" name="series-programmatic-control" } + +### Default visible series + +Set `selected: false` on any series to hide it on mount. Series without `selected` (or with `selected: true`) are visible by default: + +```svelte + +``` + +"Bananas" starts hidden. Users can then toggle it on via the legend or programmatic controls. This is reactive — changing `selected` in the series prop will update visibility. The above example demonstrates both features together. + +### Context via snippets + +You can also access series state inside a Chart's `children` snippet without `bind:context`: + +```svelte + + {#snippet children({ context })} + {#each context.series.visibleSeries as s} + {s.key}: {s.color} + {/each} + {/snippet} + +``` + +### Properties + +| Property | Type | Description | +| ------------------- | ------------------------------ | ------------------------------------------------------- | +| `series` | `SeriesData[]` | All series definitions | +| `visibleSeries` | `SeriesData[]` | Only visible (non-filtered) series | +| `selectedKeys` | `SelectionState` | Selection state managing which series are visible | +| `highlightKey` | `string \| null` | Currently highlighted series key | +| `isStacked` | `boolean` | Whether a stacking layout is active | +| `stackLayout` | `StackLayout` | Current layout mode | +| `isDefaultSeries` | `boolean` | True when no series prop was provided | +| `allSeriesData` | `Array` | Flattened data from all series (with `seriesKey` added) | +| `visibleSeriesData` | `Array` | Flattened data from visible series only | +| `allSeriesColors` | `string[]` | Colors from all series | + +### Methods + +| Method | Description | +| ----------------------------------------- | ------------------------------------------------------------------------- | +| `isVisible(seriesKey)` | Whether a series is visible (all visible when none are selected) | +| `isHighlighted(seriesKey, defaultValue?)` | Whether a series is highlighted. Default `false` when no highlight active | +| `getStackValue(seriesKey, d)` | Get stack `[y0, y1]` values for a data point | +| `getStackAccessors(seriesKey)` | Create `{ y0, y1, value }` accessor functions for stacked layouts | + +## Per-series component props + +Pass additional props to the underlying component for each series via the `props` field: + +```svelte + +``` + +:example{ component="BarChart" name="series-data" } + +## With tooltips + +Simplified charts render tooltips that automatically show all series values. For individual series tooltips (e.g., quadtree-based nearest-point), use custom tooltip snippets: + +:example{ component="LineChart" name="series-individual-tooltip" } + +## With annotations + +Annotations can be associated with a specific series via `seriesKey`. When set, the annotation is only visible when that series is highlighted: + +:example{ component="LineChart" name="series-point-annotations" } + +## Quick reference + +| Use case | Configuration | Example | +| ------------------------ | --------------------------------------------- | ------------------------------------------------------------------------------------- | +| Multi-series line chart | `series={[{ key: '...' }, ...]}` | [series](/docs/components/LineChart/series) | +| Multi-series area chart | `series={[...]}` on AreaChart | [series](/docs/components/AreaChart/series) | +| Multi-series bar chart | `series={[...]}` on BarChart | [series](/docs/components/BarChart/series) | +| Stacked bars | `series={[...]} seriesLayout="stack"` | [stack-series](/docs/components/BarChart/stack-series) | +| Stacked areas | `series={[...]} seriesLayout="stack"` | [series-stack](/docs/components/AreaChart/series-stack) | +| 100% stacked | `seriesLayout="stackExpand"` | [stack-series-expand](/docs/components/BarChart/stack-series-expand) | +| Diverging stack | `seriesLayout="stackDiverging"` | [stack-series-diverging](/docs/components/BarChart/stack-series-diverging) | +| Grouped bars | `seriesLayout="group"` | [group-series](/docs/components/BarChart/group-series) | +| Separate data per series | `series={[{ key: '...', data: [...] }, ...]}` | [series-separate-data](/docs/components/LineChart/series-separate-data) | +| Legend with toggle | `legend` | [legend-stack-series](/docs/components/BarChart/legend-stack-series) | +| Highlight on hover | `context.series.highlightKey` | [series-labels-hover](/docs/components/LineChart/series-labels-hover) | +| Programmatic control | `bind:context` + `selectedKeys.toggle()` | [series-programmatic-control](/docs/components/LineChart/series-programmatic-control) | +| Default visible series | `series={[{ key: '...', selected: false }]}` | [series-programmatic-control](/docs/components/LineChart/series-programmatic-control) | +| Per-series tooltips | Custom tooltip snippet with `context.series` | [series-individual-tooltip](/docs/components/LineChart/series-individual-tooltip) | +| Scatter series | `series={[...]}` on ScatterChart | [series](/docs/components/ScatterChart/series) | + +## API reference + +- [Legend](/docs/components/Legend) — legend component API and props diff --git a/docs/src/content/guides/simplified-charts.md b/docs/src/content/guides/simplified-charts.md deleted file mode 100644 index 97ea1b78a..000000000 --- a/docs/src/content/guides/simplified-charts.md +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: Simplified Charts -order: 4 -draft: true ---- - - - -The LayerChart project was written to offer options for both flexibility/complexity as well as approachablilty/simplicity. This brings us to a decision as you start your first LayerChart. - -## Use `` or `Simple Chart`. - -1. If you use ``, you will layer in the exact subcomponents you wish to make your chart. - - The props details are fully up to you and fully customizable but the tradeoff is that you will need to implement more of the chart yourself. - - This is a good choice if you are experienced with Layerchart or plan on a need extensive control of many of the chart components. - -2. You can use a Simple Chart if you are making a chart of supported types [ArcChart](https://next.layerchart.com/docs/components/ArcChart), [AreaChart](https://next.layerchart.com/docs/components/AreaChart), [BarChart](https://next.layerchart.com/docs/components/BarChart), [PieChart](https://next.layerchart.com/docs/components/PieChart) or [ScatterChart](https://next.layerchart.com/docs/components/ScatterChart) (more to come). - - This is the recommended path for most users. - - Under the hood, a simple chart is just a `` with a set of default subcomponents and predefined props. - - Out of the box, Simple charts provide common functionality you need with exposed props which should cover most of the simple customizations. - - Lets use <[LineChart](https://next.layerchart.com/docs/components/LineChart)> as and example and look at how little code is need to make this complex chart including built in tooltips, rule, axes, highlights and a legend. - -> Hover over a line, hover over legend items, and click legend items to see all the functionality given to you. - - - -## Additional Simple Charts Customization - -What happens when you inevidently wish to tweak something in your simplechart and that customization is not accessible via props? While you could rewrite from scratch using ``, simplecharts fortunately gives you an escape hatch. Simple charts accepts children snippets giving you full control over the subcomponents just like a layered ``. - -Here is a bit of a contrived example where we will uppercase the legend labels. We will use use a legend snippet to achieve this. - - - -becomes - - - -Notice how we send getLegendProps to the snippet and then pass it to the `` component. This is a common powerful pattern in `Simple charts` where you can use snippets to customize the rendering of components while still leveraging all of the the underlying simple chart's built in functionality. - -> It is a best practice to place the `{...getLegendProps()}` as the first prop. This allows you to overwrite any of its props by listing them to subsequently. - -The legend snippet by default visually applies the `` subcomponent above the chart elements. However with certain other components you may wish them to appear in different "layers". If you were using the `` approach, you would just change the order you implement subcomponents. However because these are snippets, the simple chart is rendering them in a certain logical order. This may not be exactly what you want, so simple chart gives you some additional snippets to allow you to wrap other snippets thus rendering in the layer you desire. - -- `{#snippet marks()}` applies them with other chart elements -- `{#snippet abovemarks()}` applies them above chart elements -- `{#snippet belowmarks()}` applies them below chart elements diff --git a/docs/src/content/guides/state.md b/docs/src/content/guides/state.md index 055e21bc8..d16a3a9bf 100644 --- a/docs/src/content/guides/state.md +++ b/docs/src/content/guides/state.md @@ -1,14 +1,209 @@ --- -title: State / Context -order: 6 -draft: true +title: Overview +category: state +order: 1 --- -> TODO +The `` component creates a central `ChartState` object that manages everything needed to render and interact with a visualization — [data](/docs/guides/data), [scales](/docs/guides/scales), dimensions, accessors, and a set of optional sub-states for interactive features. -- Chart -- Brush -- Transform -- Geo -- Tooltip -- Series +## What ChartState manages + +### Data & accessors + +`Chart` accepts a [data](/docs/guides/data) array and accessor props (`x`, `y`, `z`, `r`, `c`) that describe how to read values from each data item. Accessors can be strings (property names), functions, or arrays. The resolved accessor functions are available on the context: + +```svelte + + {#snippet children({ context })} + {#each data as d} + + {/each} + {/snippet} + +``` + +| Property | Description | +| ---------- | -------------------------------------- | +| `data` | Chart data array | +| `flatData` | Flattened data (for nested structures) | +| `x` | X accessor function | +| `y` | Y accessor function | +| `z` | Z accessor function | +| `r` | Radius accessor function | +| `c` | Color accessor function | + +See the [Data guide](/docs/guides/data) for formats, nesting, and per-series data. + +### Scales + +[Scales](/docs/guides/scales) map data values (the **domain**) to visual values (the **range** — pixels, colors, radii, etc.). `Chart` creates scales automatically from your data and accessors, or you can override domains and ranges explicitly: + +```svelte + +``` + +Each scale is reactive — when data, dimensions, or domain/range props change, scales update and all dependent components re-render. + +| Property | Description | +| --------- | ------------------------------------------------- | +| `xScale` | Primary x-axis scale | +| `yScale` | Primary y-axis scale | +| `zScale` | Z-axis scale (e.g. color or size encoding) | +| `rScale` | Radius scale | +| `cScale` | Color scale | +| `x1Scale` | Secondary x-axis (grouped bars) | +| `y1Scale` | Secondary y-axis | +| `xGet` | Shorthand: `(d) => xScale(x(d))` — data to pixels | +| `yGet` | Shorthand: `(d) => yScale(y(d))` — data to pixels | + +See the [Scales guide](/docs/guides/scales) for scale types, domain overrides, and custom ranges. + +### Dimensions + +`Chart` measures its container and computes inner dimensions after padding. These are used for scale ranges and are available on the context: + +| Property | Description | +| ----------------- | ------------------------------------------------- | +| `width` | Inner width (container minus left/right padding) | +| `height` | Inner height (container minus top/bottom padding) | +| `containerWidth` | Full container width | +| `containerHeight` | Full container height | +| `padding` | `{ top, right, bottom, left }` in pixels | +| `aspectRatio` | Container aspect ratio | + +## Interactive sub-states + +`ChartState` coordinates five optional sub-states for interactive features. Each is activated by passing its corresponding prop to `` and has a dedicated guide: + +| Sub-state | Prop | Context | Guide | +| ------------- | ----------- | ------------------- | ------------------------------------------------ | +| **Brush** | `brush` | `context.brush` | [Brush (Selection)](/docs/guides/brush) | +| **Geo** | `geo` | `context.geo` | [Geo (Maps & Projections)](/docs/guides/geo) | +| **Series** | `series` | `context.series` | [Series (Multi-series)](/docs/guides/series) | +| **Tooltip** | `tooltip` | `context.tooltip` | [Tooltip (Hover Data)](/docs/guides/tooltip) | +| **Transform** | `transform` | `context.transform` | [Transform (Pan & Zoom)](/docs/guides/transform) | + +```svelte + +``` + +### [Brush (Selection)](/docs/guides/brush) + +Interactive drag-to-select regions for filtering, zooming, or syncing charts. Supports x-axis, y-axis, or 2D selection with configurable events and styling. + +`context.brush` — `x`, `y`, `active`, `reset()`, `selectAll()`, `move()` + +### [Geo (Maps & Projections)](/docs/guides/geo) + +Geographic rendering with d3 projections, auto-fitting, and a suite of geo components (`GeoPath`, `GeoPoint`, `GeoTile`, `GeoCircle`, `GeoSpline`). + +`context.geo` — `projection`, `fitSizeRange`, `chartWidth`, `chartHeight` + +### [Series (Multi-series)](/docs/guides/series) + +Render multiple data series with per-series colors, visibility toggling, stacking layouts, and legend integration. + +`context.series` — `visibleSeries`, `selectedKeys`, `highlightKey`, `isVisible()`, `getStackValue()` + +### [Tooltip (Hover Data)](/docs/guides/tooltip) + +Show data on hover with automatic pointer tracking, bisect/voronoi/quadtree modes, and composable display components. + +`context.tooltip` — `data`, `x`, `y`, `show()`, `hide()` + +### [Transform (Pan & Zoom)](/docs/guides/transform) + +Pan and zoom via domain narrowing, CSS/SVG transforms, or projection manipulation. Supports scroll zoom, drag pan, inertia, and constraints. + +`context.transform` — `scale`, `translate`, `reset()`, `zoomIn()`, `zoomOut()` + +## Accessing chart state + +There are three ways to read the `ChartState`: + +### Children snippet + +```svelte + + {#snippet children({ context })} + + {/snippet} + +``` + +### `getChartContext()` (custom components) + +Use inside any component rendered within a ``: + +```svelte + +``` + +### `bind:context` (external access) + +Access chart state from outside the `` component tree: + +```svelte + + + + + + + +``` + +## Settings (global defaults) + +Global settings control defaults across all charts in the component tree. Set them once at the top level: + +```svelte + +``` + +Read settings anywhere below: + +```svelte + +``` + +See the [Layers guide](/docs/guides/layers) for details on SVG, Canvas, and HTML rendering. + +## Layer context + +Get the nearest `` rendering type. Falls back to the settings default. Typically only needed in custom [primitive](/docs/guides/primitives) components: + +```svelte + +``` + +See the [Layers guide](/docs/guides/layers) and [Primitives guide](/docs/guides/primitives) for more on multi-layer rendering. diff --git a/docs/src/content/guides/structure.md b/docs/src/content/guides/structure.md new file mode 100644 index 000000000..fab35b66c --- /dev/null +++ b/docs/src/content/guides/structure.md @@ -0,0 +1,295 @@ +--- +title: Structure +order: 4 +--- + + + +Understanding how `` is structured helps you place components in the right spots, enable or disable built-in features, and choose between composing from scratch or using a simplified chart. + +## Render layout + +`` renders its visual content through a series of **snippets**, each targeting a specific layer in the render order. From bottom to top: + +
+ {#each layers as layer} + {@const ml = layer.indent === 1 ? 'ml-4' : layer.indent === 2 ? 'ml-8' : ''} +
+ {layer.name} + {#each layer.types ?? [] as type} + {#if type === 'prop'} + {type} + {:else} + {type} + {/if} + {/each} +
+ {/each} +
+ +### Snippet reference + +All snippets receive `{ context }` — the full `ChartState`: + +| Snippet | Location | Use case | +| -------------- | ---------------------------------- | ----------------------------------------------------------- | +| `children` | Replaces the entire default layout | Full custom rendering — bypasses all built-in components | +| `belowContext` | Below the Layer | HTML elements beneath the chart (custom legends, controls) | +| `belowMarks` | Inside Layer, before marks | Reference lines, background shading, annotations under data | +| `marks` | Inside Layer, main content area | Your data marks — Spline, Bars, Area, Points, etc. | +| `aboveMarks` | Inside Layer, after marks | Overlays, custom highlights, labels on top of data | +| `aboveContext` | Above the Layer | HTML overlays on top of the chart | + +```svelte + + {#snippet belowMarks({ context })} + + {/snippet} + + {#snippet marks({ context })} + + + {/snippet} + + {#snippet aboveMarks({ context })} + + {/snippet} + +``` + +### The `children` snippet + +If you provide `children`, the entire default layout is replaced. You take full control — no Grid, Axis, Rule, or Tooltip unless you add them: + +```svelte + + {#snippet children({ context })} + + + + {/snippet} + +``` + +Most of the time, you should use `marks` instead of `children` to keep the built-in features while adding your own data marks. + +## Default features + +`` includes several components by default. Each can be toggled on or off, configured with props, or fully replaced with a snippet: + +| Feature | Default | Description | +| ---------------- | ------- | -------------------------------- | +| `axis` | `true` | X and Y axes | +| `grid` | `true` | Background grid lines | +| `rule` | `true` | Zero-line rule on the value axis | +| `highlight` | `true` | Hover highlight | +| `points` | `false` | Point markers on data | +| `labels` | `false` | Data labels | +| `legend` | `false` | Legend | +| `tooltipContext` | `false` | Tooltip (opt-in) | +| `brush` | `false` | Brush/selection (opt-in) | + +### Three ways to configure each feature + +Every feature accepts three forms: + +::steps + +## Boolean — toggle on/off with defaults + +```svelte + +``` + +## Props object — customize the component + +```svelte + +``` + +## Snippet — full control over rendering + +```svelte + + {#snippet legend({ context })} + s.toUpperCase()} /> + {/snippet} + +``` + +:: + +### Fine-tuning with `props` + +The `props` object lets you pass additional props to internally rendered components without fully overriding them via snippets: + +```svelte + +``` + +This is especially useful with simplified charts where the internal marks are rendered for you. + +## Simplified charts + +Simplified charts (`LineChart`, `BarChart`, `AreaChart`, `ScatterChart`, `PieChart`, `ArcChart`) are pre-configured `` wrappers that provide sensible defaults for common chart types. + +### What simplified charts do for you + +- Select the right mark component (Spline for lines, Bars for bars, etc.) +- Set appropriate tooltip mode (`quadtree-x` for lines, `band` for bars, etc.) +- Configure axis, grid, rule, and highlight defaults for the chart type +- Create a default single series when `series` is not provided +- Handle orientation, value axis, and scale selection + +### Comparison + +The same multi-series line chart built two ways: + +**Using ``:** + +```svelte + +``` + +**Using `` directly:** + +```svelte + + {#snippet marks({ context })} + {#each context.series.visibleSeries as s (s.key)} + + {/each} + {/snippet} + +``` + +A stacked bar chart comparison: + +**Using ``:** + +```svelte + +``` + +**Using `` directly:** + +```svelte + d.category)} + y={['q1', 'q2']} + yBaseline={0} + series={[ + { key: 'q1', color: 'steelblue' }, + { key: 'q2', color: 'coral' } + ]} + seriesLayout="stack" + tooltipContext={{ mode: 'band' }} + legend + highlight={{ area: true }} +> + {#snippet marks({ context })} + {#each context.series.visibleSeries as s (s.key)} + + {/each} + {/snippet} + +``` + +### Escape hatches + +Simplified charts accept the same snippets as ``. When you need to customize beyond what props offer, use a snippet to override just that part: + +```svelte + + {#snippet marks({ context })} + {#each context.series.visibleSeries as s (s.key)} + + {/each} + {/snippet} + + {#snippet legend({ context })} + s.toUpperCase()} /> + {/snippet} + +``` + +The `marks` snippet replaces the default mark rendering while keeping all other features (axis, grid, tooltip, highlight) intact. + +### When to use which + +| Use a simplified chart when... | Use `` directly when... | +| -------------------------------------------- | ------------------------------------------------------------ | +| Building a standard chart type | Combining multiple mark types (line + area + points) | +| You want sensible defaults with minimal code | You need full control over render order | +| Customization fits within props + snippets | Building non-standard visualizations (sankey, treemap, etc.) | +| Prototyping quickly | Using radial, hierarchical, or geographic layouts | + +## Related guides + +- [State overview](/docs/guides/state) — ChartState, sub-states, and how to access context +- [Data](/docs/guides/data) — Data patterns, accessors, and performance +- [Series](/docs/guides/series) — Multi-series charts, stacking, and legend integration +- [Scales](/docs/guides/scales) — Scale types, domains, ranges, and overrides +- [Layers](/docs/guides/layers) — SVG, Canvas, and HTML rendering +- [Tooltip](/docs/guides/tooltip) — Tooltip modes and customization diff --git a/docs/src/content/guides/styles.md b/docs/src/content/guides/styles.md index 039b2eb38..d4c7bf5b3 100644 --- a/docs/src/content/guides/styles.md +++ b/docs/src/content/guides/styles.md @@ -15,7 +15,16 @@ If you can think of a way to define a color, Layerchart probably [supports it](# ### Canvas -Primitives rendered within Canvas layers support the same CSS classes and inline styles as Svg, allowing for use of `fill`, `stroke`, `font`, and even `paint-order`. Canvas layers also support CSS variables and light/dark mode, and will respond with media queries changes. +Primitives rendered within Canvas layers support the same CSS classes and inline styles as SVG, allowing for use of `fill`, `stroke`, `font`, and even `paint-order`. Canvas layers also support CSS variables and light/dark mode, and will respond to media query changes. + +```svelte + + + + + + +``` ### Global CSS colors @@ -27,12 +36,12 @@ By default, LayerChart uses `currentColor` for default colors, but you can overr - **--color-surface-300**: A darker surface color used for surface/backgrounds. - **--color-surface-content**: The color used for text and content. -You can apply a base "theme" in `app.css` to globally style base elements of your charts including primary color of chart visualization (i.e. line of LineChart), backgrounds, axises and text content. +You can apply a base "theme" in `app.css` to globally style base elements of your charts including primary color of chart visualization (i.e. line of LineChart), backgrounds, axes, and text content. #### User defined global CSS colors :::tip -If you are not seeing the chart, or it is colored incorrectly, then the probably likely residesing in this file. Debug via browser devtools to see CSS color variables. +If you are not seeing the chart, or it is colored incorrectly, then the issue probably resides in this file. Debug via browser devtools to see CSS color variables. ::: ```css title="app.css" @@ -50,23 +59,53 @@ If you are not seeing the chart, or it is colored incorrectly, then the probably } ``` -and for dark mode support: +#### Dark mode -```css title="app.css" -@media (prefers-color-scheme: dark) { - .lc-root-container { - --color-primary: var(--color-blue-400); - --color-surface-100: var(--color-gray-900); - --color-surface-200: var(--color-gray-800); - --color-surface-300: var(--color-gray-700); - --color-surface-content: var(--color-gray-100); - } -} +If you're using Tailwind, the simplest way to handle dark mode is using the `dark:` variant directly on components. Since LayerChart components accept standard CSS classes, this works just like any other Tailwind element. + +```svelte + + + ``` +For global dark mode defaults, override the CSS variables: + +:::tabs{key="dark-mode"} + + ::tab{label="Media query"} + Automatically follows the user's OS preference. + ```css title="app.css" + @media (prefers-color-scheme: dark) { + .lc-root-container { + --color-primary: var(--color-blue-400); + --color-surface-100: var(--color-gray-900); + --color-surface-200: var(--color-gray-800); + --color-surface-300: var(--color-gray-700); + --color-surface-content: var(--color-gray-100); + } + } + ``` + :: + + ::tab{label="Class-based"} + For apps using class-based dark mode (e.g. Tailwind's `darkMode: 'class'`), target the `.dark` class instead. + ```css title="app.css" + .dark .lc-root-container { + --color-primary: var(--color-blue-400); + --color-surface-100: var(--color-gray-900); + --color-surface-200: var(--color-gray-800); + --color-surface-300: var(--color-gray-700); + --color-surface-content: var(--color-gray-100); + } + ``` + :: + +::: + #### Third party framework colors -If you're already using one of these popular UI frameworks, use can easily leverage it's theming with built-in integrations to map the framework's theme into layerchart colors. +If you're already using one of these popular UI frameworks, you can easily leverage its theming with built-in integrations to map the framework's theme into layerchart colors. :::tabs{key="framework"} @@ -101,9 +140,9 @@ If you're already using one of these popular UI frameworks, use can easily lever ::: -### User Defined options +### User defined options -Each component can be customized via style attributes and CSS classes. This allows you to define colors in a variety of ways. +Each component can be customized via `class` and `style` props, as well as SVG style attributes. This allows you to define colors in a variety of ways. #### Per-component styling @@ -176,7 +215,7 @@ Inline options are recommended for one-off color definitions. Use [global option ::tab{label="SVG style attributes"} - Here the color is set via [SVG Attributes]("https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute") such as `stroke`, `fill`, `strokeWidth`. + Here the color is set via [SVG Attributes](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute) such as `stroke`, `fill`, `strokeWidth`. ```svelte live {8} + +{#if context?.tooltip.data} +

Hovering: {context.tooltip.data.date}

+{/if} + +... +``` + +:example{ component="Tooltip" name="externally-access-tooltip-data" } + +You can also access tooltip state inside snippet props: + +```svelte + + {#snippet children({ context })} + {#if context.tooltip.data} + {context.tooltip.data.value} + {/if} + {/snippet} + +``` + +## Manual mode + +For shapes that don't map neatly to x/y coordinates (geo boundaries, pie slices, custom SVG), use `manual` mode and call `show`/`hide` yourself: + +```svelte + + {#snippet children({ context })} + context.tooltip.show(e, feature.properties)} + onpointerleave={(e) => context.tooltip.hide(e)} + /> + {/snippet} + + {#snippet children({ data })} + + {/snippet} + + +``` + +### Built-in `tooltip` prop + +Several shape components have a built-in `tooltip` boolean prop that wires up `show`/`hide` automatically, so you don't need to write pointer handlers yourself. Pass the associated `data` prop to set what data the tooltip receives: + +```svelte + + + + {#snippet children({ data })} + + + + + {/snippet} + + +``` + +Components with the `tooltip` prop: + +| Component | Typical use case | +| ---------- | ----------------------------------------------- | +| `Arc` | Gauge / donut segments | +| `Bar` | Individual bars in custom layouts | +| `Pie` | Pie chart slices (sets `tooltip` on each `Arc`) | +| `GeoPath` | Map regions / geographic boundaries | +| `Ribbon` | Chord diagram ribbons | +| `Calendar` | Calendar heatmap cells | + +## Debug mode + +Enable `debug` to visualize the hit targets for the current mode. This renders the voronoi cells, quadtree regions, band paths, or bounding boxes so you can see exactly what area triggers each data point: + +```svelte + +``` + +## Raise target + +Set `raiseTarget` to bring the hovered element to the front of the SVG rendering order. Useful when marks overlap and you want the hovered one on top: + +```svelte + +``` + +## Click handling + +Add an `onclick` handler to `tooltipContext` to respond to clicks on data points: + +```svelte + { + console.log('Clicked:', data); + } + }} +> +``` + +## TooltipState properties + +| Property | Type | Description | +| -------------------------- | ----------------- | ---------------------------------------------- | +| `data` | `T \| null` | The hovered data point (or null) | +| `x` | `number` | Pointer x position in chart coordinates | +| `y` | `number` | Pointer y position in chart coordinates | +| `series` | `TooltipSeries[]` | Series values at the hovered point | +| `isHoveringTooltipArea` | `boolean` | Whether the pointer is in the tooltip area | +| `isHoveringTooltipContent` | `boolean` | Whether the pointer is over the tooltip itself | + +### Methods + +| Method | Description | +| ------------------- | ------------------------------------------ | +| `show(event, data)` | Show tooltip with given data (manual mode) | +| `hide(event?)` | Hide the tooltip | + +## Quick reference + +| Use case | Configuration | Example | +| --------------------- | --------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | +| Basic tooltip | `tooltipContext={{ mode: 'bisect-x' }}` | [basic](/docs/components/Tooltip/basic) | +| Pointer following | `` (default) | [default-mouse-position-with-offset](/docs/components/Tooltip/default-mouse-position-with-offset) | +| Data snapping | `` | [data-snapping](/docs/components/Tooltip/data-snapping) | +| Multiple tooltips | Multiple `` with fixed axes | [multiple-tooltips](/docs/components/Tooltip/multiple-tooltips-with-fixed-single-axis) | +| Scatter plot | `tooltipContext={{ mode: 'quadtree' }}` | [scatter-plot](/docs/components/Tooltip/scatter-plot) | +| Stacked area | Series + `tooltipContext={{ mode: 'bisect-x' }}` | [stacked-area](/docs/components/Tooltip/stacked-area) | +| Custom content | Any HTML inside `Tooltip.Root` | [custom-content](/docs/components/Tooltip/custom-content) | +| Invert variant | `` | [invert-variant](/docs/components/Tooltip/invert-variant) | +| Color swatches | `` | [color-swatch](/docs/components/Tooltip/color-swatch) | +| External data access | `bind:context` on `Chart` | [externally-access-tooltip-data](/docs/components/Tooltip/externally-access-tooltip-data) | +| Anchor placement | `` | [anchor-location](/docs/components/Tooltip/anchor-location) | +| Disable animation | `` | [disable-motion](/docs/components/Tooltip/disable-motion) | +| Bar chart tooltip | `tooltipContext={{ mode: 'band' }}` | [simple-bars](/docs/components/Tooltip/simple-bars) | +| Manual mode (geo/pie) | `tooltipContext={{ mode: 'manual' }}` + `show()`/`hide()` | | + +## API reference + +- [Tooltip](/docs/components/Tooltip) — display component API and props (`Tooltip.Root`, `Tooltip.Header`, `Tooltip.List`, `Tooltip.Item`, `Tooltip.Separator`) +- [TooltipContext](/docs/components/TooltipContext) — interaction component API and props +- [Highlight](/docs/components/Highlight) — visual highlight indicators diff --git a/docs/src/content/guides/transform.md b/docs/src/content/guides/transform.md new file mode 100644 index 000000000..eb4fc687b --- /dev/null +++ b/docs/src/content/guides/transform.md @@ -0,0 +1,511 @@ +--- +title: Transform (Pan & Zoom) +category: state +--- + +LayerChart provides a transform system for panning and zooming charts, maps, and other visualizations. It supports multiple modes depending on the type of visualization: narrowing the data domain for cartesian charts, applying visual transforms for images and maps, or modifying geographic projections for maps and globes. + +## Modes + +The `transform` prop's `mode` controls how zoom and pan are applied: + +| Mode | What changes | Best for | +| ------------ | -------------------------------------- | ------------------------------------------------- | +| `domain` | The visible data domain narrows/shifts | Cartesian charts (line, bar, area, scatter) | +| `canvas` | SVG/Canvas/CSS visual transform | Maps, images, pack/tree layouts | +| `projection` | Geo projection | Maps and globes with projection-based interaction | +| `none` | Disabled (default) | No zoom/pan needed | + +### `domain` mode + +Zooming and panning modifies the chart's domain — the range of data values shown on each axis. Scales and axes update automatically. This is the standard mode for cartesian data charts. + +```svelte + +``` + +:example{ component="BarChart" name="pan-zoom" } + +A gradient-filled rectangle with full-chart grid axes, demonstrating both-axis zoom with `scaleExtent` up to 40x: + +:example{ component="TransformContext" name="pan-zoom-axes" } + + + +The `axis` option restricts which axis is affected: + +| Value | Effect | +| -------- | ------------------------ | +| `'x'` | Horizontal zoom/pan only | +| `'y'` | Vertical zoom/pan only | +| `'both'` | Both axes (default) | + +### `canvas` mode + +Applies a CSS/SVG transform (translate + scale) to the rendered layers without changing the underlying data. Useful for maps, images, and hierarchical layouts where you want to zoom into the visual output. + +:example{ component="TransformContext" name="pan-zoom-svg-image" } + +For geographic maps, canvas mode transforms the rendered paths without re-projecting: + +:example{ component="GeoPath" name="transform-canvas" } + +:::tip +When using canvas mode with maps, compensate for zoom in visual properties like stroke width: + +```svelte + +``` + +::: + +### `projection` mode + +Updates the geo projection based on transform interactions. The projection is re-evaluated on every transform change, keeping geographic coordinates synchronized with the view. + +Which projection properties are updated is controlled by the `apply` option and auto-detected from the projection type: + +| Projection type | Default `apply` | Behavior | +| ----------------------------------------------- | ---------------------------------------------------- | ----------------------- | +| Flat maps (`geoMercator`, `geoAlbersUsa`, etc.) | `{ translate: true, scale: true, rotation: false }` | Drag pans, scroll zooms | +| Globe projections (`geoOrthographic`, etc.) | `{ rotation: true, scale: false, translate: false }` | Drag rotates the globe | + +Auto-detection uses the projection's `clipAngle` — projections with a default clip angle (like orthographic) are treated as globes. Override with explicit `apply` values when needed. + +When `fitGeojson` is provided and translate mode is active, the initial translate and scale are computed automatically to fit the data in the viewport. + +```svelte + + +``` + +:example{ component="GeoPath" name="transform-projection" } + +```svelte + + +``` + +:example{ component="GeoPath" name="translucent-globe" } + +To enable zoom on a globe alongside rotation: + +```svelte + +``` + +## Interactions + +### Scroll mode + +The `scrollMode` option controls what the mouse wheel/trackpad does: + +| Value | Effect | +| ------------- | ----------------------------------------------------- | +| `'scale'` | Scroll wheel zooms in/out (default for `domain` mode) | +| `'translate'` | Scroll wheel pans | +| `'none'` | Scroll wheel does nothing (default for `canvas` mode) | + +The scroll mode is reactive and can be changed at runtime via `context.transform.scrollMode = 'scale'`. + +### Scroll activation key + +By default, scroll/wheel events are processed immediately. To prevent accidental zoom/pan when scrolling the page, require a modifier key to be held: + +```svelte + +``` + +| Value | Key | +| ----------- | --------------------------------- | +| `'meta'` | ⌘ Command (Mac) / ⊞ Win (Windows) | +| `'alt'` | ⌥ Option / Alt | +| `'control'` | Control | +| `'shift'` | Shift | + +When set, scroll events without the key held are ignored (no `preventDefault`), allowing normal page scrolling. + +:example{ component="TransformContext" name="scroll-activation-key" } + +### Pointer interactions + +- **Drag** — pan (click and drag to move the view) +- **Double-click** — zoom in 2x at the click point +- **Shift + double-click** — zoom out 0.5x +- **Pinch-to-zoom** — detected as ctrl+wheel events, always zooms regardless of scroll mode +- **Trackpad horizontal scroll** — pans horizontally in domain mode + +The `clickDistance` option (default: `10` pixels) sets the threshold before a pointer movement is treated as a drag rather than a click. + +Set `disablePointer: true` to disable all pointer-based interactions (useful when using programmatic zoom only). + +### Brush integration + +Combining `brush` with `transform` enables brush-to-zoom: the user draws a selection, then the chart zooms to that domain range. + +```svelte + +``` + +:example{ component="LineChart" name="brush-pan-zoom" } + +### Overview brush + +A separate overview chart below the main chart can act as a navigation control. The overview shows the full dataset with a brush that reflects the main chart's visible region. Zooming or panning the main chart updates the brush; dragging the brush scrolls the main chart. + +Bind the main chart's `context` to read its `xDomain`, then pass it as the overview brush's `x` prop. On brush change, call `zoomToBrush()` to sync back: + +:example{ component="LineChart" name="pan-zoom-with-overview" } + +## Programmatic control + +Access the transform state via the chart context to control zoom/pan from code: + +```svelte + + {#snippet children({ context })} + + + + {/snippet} + +``` + +Use `setScale()` and `reset()` to build animated zoom controls, like this solar system visualization that lets you explore planet distances: + +:example{ component="TransformContext" name="planet-distances" } + +### Methods + +| Method | Description | +| ------------------------------- | ----------------------------------------- | +| `zoomIn()` | Zoom in by 1.25x from center | +| `zoomOut()` | Zoom out by 0.8x from center | +| `reset()` | Restore initial scale and translate | +| `translateCenter()` | Center the view (translate to 0,0) | +| `zoomTo(center, rect?)` | Zoom to fit a point or bounding rectangle | +| `setScale(value, options?)` | Set scale directly | +| `setTranslate(point, options?)` | Set translate directly | +| `setScrollMode(mode)` | Change scroll mode at runtime | + +### Properties + +| Property | Type | Description | +| ------------ | ---------------------------------- | -------------------------------------------- | +| `scale` | `number` | Current zoom scale (1 = no zoom) | +| `translate` | `{ x, y }` | Current pan offset | +| `moving` | `boolean` | Is the transform animating or being dragged? | +| `dragging` | `boolean` | Is the user actively dragging? | +| `scrollMode` | `'scale' \| 'translate' \| 'none'` | Current scroll mode | + +### `zoomTo` for feature zoom + +A common pattern for maps and hierarchical layouts is to zoom to a specific feature or node: + +```svelte + { + const [[left, top], [right, bottom]] = geoPath.bounds(feature); + const x = (left + right) / 2; + const y = (top + bottom) / 2; + context.transform.zoomTo({ x, y }, { width: right - left + 20, height: bottom - top + 20 }); + }} +/> +``` + +Click a state to zoom into it using projection-based `setScale` and `setTranslate`: + +:example{ component="GeoPath" name="transform-projection" } + +The same click-to-zoom pattern using canvas mode, where the visual transform is applied without re-projecting: + +:example{ component="GeoPath" name="transform-canvas" } + +The same patterns work at world scale — click a country to zoom in: + +:example{ component="GeoPath" name="transform-world-projection" } + +:example{ component="GeoPath" name="transform-world-canvas" } + +Click a state to zoom with seamless tile layers that load progressively at each zoom level: + +:example{ component="GeoTile" name="zoomable-seamless-layers" } + +For hierarchical layouts, click a circle to zoom into it using `zoomTo` with `disablePointer` and animated motion: + +:example{ component="Pack" name="basic" } + +Load progressively more detailed data as the user zooms in, using the visible domain to sample the appropriate level of detail: + +:example{ component="LineChart" name="pan-zoom-dynamic-data" } + +## Constraints + +Constraints limit how far users can zoom and pan. They work across all modes. + +### `scaleExtent` — limit zoom range + +Clamps the zoom scale factor to `[minScale, maxScale]`. A scale of `1` is the default, values greater than `1` zoom in, values less than `1` zoom out. + +```svelte + +``` + +`scaleExtent: [1, 10]` means the user can zoom in up to 10x but cannot zoom out past the initial view. + +:example{ component="BarChart" name="pan-zoom-scale-extent" } + +This works identically for geo canvas transforms: + +:example{ component="GeoPath" name="transform-canvas-scale-extent" } + +### `domainExtent` — constrain in data space + +For `mode: 'domain'` charts, `domainExtent` lets you express constraints in data units rather than pixel/transform space. This is useful when you want to say things like "don't pan before January 2020" or "always show at least 7 days." + +```svelte + +``` + +Each axis (`x` or `y`) supports: + +| Property | Type | Description | +| ---------- | -------------------------- | ----------------------------------------------------------------------------------- | +| `min` | `number \| Date \| 'data'` | Minimum domain value (pan boundary). `'data'` = initial data min. | +| `max` | `number \| Date \| 'data'` | Maximum domain value (pan boundary). `'data'` = initial data max. | +| `minRange` | `number` | Minimum visible range in data units (max zoom in). For dates, this is milliseconds. | + +Using `'data'` for `min`/`max` is the most common pattern — it prevents panning past the data boundaries without hardcoding values. + +:example{ component="LineChart" name="pan-zoom-domain-extent" } + +### `constrain` — custom constraint function + +For full control, provide a `constrain` function that receives the proposed `{ scale, translate }` and returns corrected values. Called after `scaleExtent` and `translateExtent` are applied. + +```svelte + ({ + scale: Math.max(1, Math.min(20, scale)), + translate: { + x: Math.min(0, translate.x), + y: 0 + } + }) + }} +/> +``` + +:example{ component="LineChart" name="pan-zoom-custom-constrain" } + +#### Globe rotation constraints + +For globe projections using rotation, the translate values represent rotation angles (yaw/pitch in degrees). A custom `constrain` function can clamp the pitch to prevent flipping the globe: + +```svelte + ({ + scale, + translate: { + x: translate.x, + y: Math.max(-90, Math.min(90, translate.y)) + } + }) + }} +/> +``` + +:example{ component="GeoPath" name="transform-globe-constrain" } + +### `translateExtent` — pixel-space pan bounds + +Constrains panning to a bounding box in pixel coordinates `[[minX, minY], [maxX, maxY]]`. Most useful for `canvas` mode transforms where you want to prevent panning beyond specific pixel boundaries. + +```svelte + +``` + +For `domain` mode, prefer `domainExtent` which lets you express bounds in data units. + +### How constraints compose + +When multiple constraint options are provided, they are applied in order: + +1. `scaleExtent` — clamps scale +2. `translateExtent` — clamps translate +3. `domainExtent` — clamps in domain space (converted to a `constrain` function internally) +4. `constrain` — final custom adjustment + +A user-provided `constrain` function runs after all other constraints, giving it the final say. + +## Motion / animation + +Transform changes can be animated using the `motion` prop: + +```svelte + + + + + +``` + +During drag and wheel interactions, motion is automatically set to instant so the view follows the pointer without lag. + +### Inertia (momentum) + +Enable `inertia` to let the view coast after a drag release, based on the velocity of the gesture. The existing motion system (spring or tween) handles the deceleration animation. + +```svelte + +``` + +Pass `true` for sensible defaults, or an options object for fine-tuning: + +| Option | Type | Default | Description | +| ---------------- | -------- | ---------- | ----------------------------------------------------------- | +| `decay` | `number` | `0.99` | Decay factor (0–1). Higher = further coast distance. | +| `minVelocity` | `number` | `0.1` | Minimum velocity (px/ms) to trigger inertia. | +| `maxVelocity` | `number` | `Infinity` | Maximum velocity (px/ms) cap. Prevents wild throws. | +| `velocityWindow` | `number` | `160` | Time window (ms) to measure velocity from pointer movement. | + +```svelte + +``` + +For a map-like feel with capped velocity: + +```svelte + +``` + +Inertia works with all transform modes and respects `translateExtent`, `constrain`, and other constraints. + +:example{ component="GeoPath" name="transform-globe-inertia" } + +## Controls + +The `TransformContextControls` component provides a UI overlay with zoom/pan buttons and scroll mode selector: + +```svelte + + {#snippet children()} + + + {/snippet} + +``` + +It supports placement (`'top-left'`, `'top-right'`, `'bottom-left'`, etc.), orientation (`'horizontal'` or `'vertical'`), and selective display of controls via the `show` prop. + +## Quick reference + +| Use case | Configuration | Example | +| ---------------------- | --------------------------------------------------------- | --------------------------------------------------------------------------------------- | +| Pan/zoom a time series | `transform={{ mode: 'domain', axis: 'x' }}` | [pan-zoom](/docs/components/BarChart/pan-zoom) | +| Pan/zoom both axes | `transform={{ mode: 'domain', scaleExtent: [1, 40] }}` | [pan-zoom-axes](/docs/components/TransformContext/pan-zoom-axes) | +| Limit zoom depth | `scaleExtent: [1, 10]` | [pan-zoom-scale-extent](/docs/components/BarChart/pan-zoom-scale-extent) | +| Keep data in view | `domainExtent: { x: { min: 'data', max: 'data' } }` | [pan-zoom-domain-extent](/docs/components/LineChart/pan-zoom-domain-extent) | +| Minimum visible range | `domainExtent: { x: { minRange: 7 * 86400000 } }` | [pan-zoom-domain-extent](/docs/components/LineChart/pan-zoom-domain-extent) | +| Pan/zoom a map (CSS) | `transform={{ mode: 'canvas', scrollMode: 'scale' }}` | [transform-canvas](/docs/components/GeoPath/transform-canvas) | +| Pan/zoom a map (geo) | `transform={{ mode: 'projection', scrollMode: 'scale' }}` | [transform-projection](/docs/components/GeoPath/transform-projection) | +| World map (CSS) | Canvas mode + world countries | [transform-world-canvas](/docs/components/GeoPath/transform-world-canvas) | +| World map (geo) | Projection mode + world countries | [transform-world-projection](/docs/components/GeoPath/transform-world-projection) | +| Globe rotation | `transform={{ mode: 'projection' }}` (auto-detected) | [translucent-globe](/docs/components/GeoPath/translucent-globe) | +| Geo map zoom limits | `scaleExtent: [1, 8]` | [transform-canvas-scale-extent](/docs/components/GeoPath/transform-canvas-scale-extent) | +| Globe pitch clamping | `constrain` with `Math.max(-90, ...)` | [transform-globe-constrain](/docs/components/GeoPath/transform-globe-constrain) | +| Brush-to-zoom | `brush` + `transform={{ mode: 'domain' }}` | [brush-pan-zoom](/docs/components/LineChart/brush-pan-zoom) | +| Overview brush | Separate chart with `brush.x` synced to `context.xDomain` | [pan-zoom-with-overview](/docs/components/LineChart/pan-zoom-with-overview) | +| Programmatic zoom only | `disablePointer: true` with `zoomTo()` calls | [basic](/docs/components/Pack/basic) | +| Animated transforms | `motion: { type: 'tween', duration: 800 }` | [basic](/docs/components/Pack/basic) | +| Dynamic data loading | Derive data from `context.xDomain` visible range | [pan-zoom-dynamic-data](/docs/components/LineChart/pan-zoom-dynamic-data) | +| Drag inertia | `inertia: true` with `motion: 'spring'` | [transform-globe-inertia](/docs/components/GeoPath/transform-globe-inertia) | +| Require key to scroll | `scrollActivationKey: 'meta'` | [scroll-activation-key](/docs/components/TransformContext/scroll-activation-key) | + +## API reference + +- [TransformContext](/docs/components/TransformContext) — component API and props diff --git a/docs/src/content/utils/download.md b/docs/src/content/utils/download.md new file mode 100644 index 000000000..82ce0ca35 --- /dev/null +++ b/docs/src/content/utils/download.md @@ -0,0 +1,88 @@ +--- +description: Utility functions to export and download charts as PNG images or SVG files. +category: tools +layers: [] +related: [] +--- + +## Usage + +### downloadImage() + +Downloads a chart container as a PNG (or JPEG / WebP) image. Handles both `` and `` layers, compositing them in z-index order. + +SVG layer styles (CSS variables, Tailwind classes, etc.) are inlined before rasterisation so the exported image renders correctly outside the browser. + +```svelte + + + + ... + + + +``` + +#### Options + +| Option | Type | Default | Description | +|---|---|---|---| +| `filename` | `string` | `'chart'` | File name without extension | +| `format` | `'png' \| 'jpeg' \| 'webp'` | `'png'` | Output image format | +| `quality` | `number` | `0.92` | Quality for lossy formats (0–1) | +| `background` | `string` | transparent (PNG) / white (JPEG/WebP) | Background fill color | +| `pixelRatio` | `number` | `window.devicePixelRatio` | Scale factor — higher = crisper on retina | + +### downloadSvg() + +Downloads the SVG layers of a chart container as a `.svg` file. CSS variables and class-based styles are inlined so the file renders correctly in editors and other tools. + +When multiple `` layers are present they are composited into a single `` in z-index order. + +Returns `false` (no download triggered) if the container has no SVG layers, e.g. Canvas-only charts. + +```svelte + + + + ... + + + +``` + +### getChartImageBlob() + +Lower-level alternative to `downloadImage()` that returns a `Blob` instead of triggering a download. Useful for copying to the clipboard, uploading to a server, etc. + +```ts +import { getChartImageBlob } from 'layerchart'; + +const blob = await getChartImageBlob(chartRef, { format: 'png', background: 'white' }); +await navigator.clipboard.write([new ClipboardItem({ 'image/png': blob })]); +``` + +### getChartSvgString() + +Lower-level alternative to `downloadSvg()` that returns the serialized SVG string (or `null` for Canvas-only charts). + +```ts +import { getChartSvgString } from 'layerchart'; + +const svg = getChartSvgString(chartRef); +if (svg) { + // upload, post-process, etc. +} +``` diff --git a/docs/src/content/utils/stats.md b/docs/src/content/utils/stats.md new file mode 100644 index 000000000..598795059 --- /dev/null +++ b/docs/src/content/utils/stats.md @@ -0,0 +1,18 @@ +--- +description: Statistical utility functions for computing box plot statistics and kernel density estimation (KDE). +category: tools +layers: [] +related: [BoxPlot, Violin] +--- + +## computeBoxStats + +Computes the five-number summary (min, Q1, median, Q3, max) and outliers from raw numeric values using the Tukey method. + +:example{name="compute-box-stats" noResize } + +## kde + +Computes kernel density estimation using the Epanechnikov kernel. Returns `[value, density]` pairs suitable for rendering violin plots or density curves. + +:example{name="kde" noResize } diff --git a/docs/src/examples/catalog/AnnotationLine.json b/docs/src/examples/catalog/AnnotationLine.json index 171d2bf75..a066a7c43 100644 --- a/docs/src/examples/catalog/AnnotationLine.json +++ b/docs/src/examples/catalog/AnnotationLine.json @@ -197,6 +197,48 @@ "lineNumber": 29, "line": "" }, + { + "example": "basic", + "component": "Chord", + "path": "/docs/components/Chord/basic", + "lineNumber": 37, + "line": "" } ], - "updatedAt": "2026-02-08T17:35:29.774Z" + "updatedAt": "2026-03-22T12:54:31.896Z" } \ No newline at end of file diff --git a/docs/src/examples/catalog/ArcChartTooltip.json b/docs/src/examples/catalog/ArcChartTooltip.json new file mode 100644 index 000000000..7b4ba16ba --- /dev/null +++ b/docs/src/examples/catalog/ArcChartTooltip.json @@ -0,0 +1,6 @@ +{ + "component": "ArcChartTooltip", + "examples": [], + "usage": [], + "updatedAt": "2026-03-31T03:03:45.401Z" +} \ No newline at end of file diff --git a/docs/src/examples/catalog/Area.json b/docs/src/examples/catalog/Area.json index 1b368a2b2..612c5782f 100644 --- a/docs/src/examples/catalog/Area.json +++ b/docs/src/examples/catalog/Area.json @@ -258,7 +258,7 @@ { "component": "Chart", "lineNumber": 15, - "line": "" + "line": "" }, { "component": "Layer", @@ -480,6 +480,33 @@ } ] }, + { + "name": "oscilloscope-ridgeline", + "title": "oscilloscope ridgeline", + "path": "/docs/components/Area/oscilloscope-ridgeline", + "components": [ + { + "component": "Chart", + "lineNumber": 136, + "line": "" + }, + { + "component": "Group", + "lineNumber": 150, + "line": "" + }, + { + "component": "Area", + "lineNumber": 151, + "line": "" + }, + { + "component": "Group", + "lineNumber": 81, + "line": "" + }, + { + "component": "Area", + "lineNumber": 82, + "line": "" + } + ] + }, + { + "name": "ridgeline-kde", + "title": "ridgeline kde", + "path": "/docs/components/Area/ridgeline-kde", + "components": [ + { + "component": "Chart", + "lineNumber": 159, + "line": "" + }, + { + "component": "Group", + "lineNumber": 171, + "line": "" + }, + { + "component": "Area", + "lineNumber": 172, + "line": "" + } + ] + }, { "name": "stack", "title": "stack", @@ -589,7 +690,7 @@ { "component": "Chart", "lineNumber": 15, - "line": "" + "line": "" }, { "component": "Layer", @@ -626,7 +727,7 @@ { "component": "Chart", "lineNumber": 15, - "line": "" + "line": "" }, { "component": "Layer", @@ -663,7 +764,7 @@ { "component": "Chart", "lineNumber": 15, - "line": "" + "line": "" }, { "component": "Layer", @@ -700,7 +801,7 @@ { "component": "Chart", "lineNumber": 15, - "line": "" + "line": "" }, { "component": "Layer", @@ -729,6 +830,33 @@ } ] }, + { + "name": "tween-on-mount", + "title": "tween on mount", + "path": "/docs/components/Area/tween-on-mount", + "components": [ + { + "component": "Chart", + "lineNumber": 13, + "line": "" + }, + { + "component": "Layer", + "lineNumber": 14, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 15, + "line": "" + }, + { + "component": "Area", + "lineNumber": 18, + "line": "" + } + ] + }, { "name": "with-labels", "title": "with labels", @@ -919,6 +1047,13 @@ "lineNumber": 46, "line": "" }, + { + "example": "oscilloscope-ridgeline", + "component": "Area", + "path": "/docs/components/Area/oscilloscope-ridgeline", + "lineNumber": 151, + "line": " 0} line={{ class: 'stroke-2 stroke-danger' }} class=\"fill-danger/20\" />" }, + { + "example": "tween-on-mount", + "component": "Area", + "path": "/docs/components/Area/tween-on-mount", + "lineNumber": 18, + "line": "" + }, { "example": "with-labels", "component": "Area", @@ -1029,7 +1185,7 @@ "component": "AreaChart", "path": "/docs/components/AreaChart/series-stack-gradient", "lineNumber": 43, - "line": "" + "line": "" }, { "example": "threshold", @@ -1101,6 +1257,13 @@ "lineNumber": 41, "line": "" }, + { + "example": "programmatic-control", + "component": "BrushContext", + "path": "/docs/components/BrushContext/programmatic-control", + "lineNumber": 52, + "line": "" + }, { "example": "separate-chart-(clip-data-y-axis)", "component": "BrushContext", @@ -1158,17 +1321,17 @@ "line": "" }, { - "example": "sync-brushes-with-bind-xdomain", + "example": "synced-brushes", "component": "BrushContext", - "path": "/docs/components/BrushContext/sync-brushes-with-bind-xdomain", + "path": "/docs/components/BrushContext/synced-brushes", "lineNumber": 74, "line": "" }, { - "example": "sync-brushes-with-bind-xdomain", + "example": "synced-brushes", "component": "BrushContext", - "path": "/docs/components/BrushContext/sync-brushes-with-bind-xdomain", - "lineNumber": 95, + "path": "/docs/components/BrushContext/synced-brushes", + "lineNumber": 93, "line": "" }, + { + "example": "pan-zoom-with-overview", + "component": "LineChart", + "path": "/docs/components/LineChart/pan-zoom-with-overview", + "lineNumber": 51, + "line": "" + }, { "example": "radial-line-with-areas", "component": "Spline", @@ -1333,5 +1503,5 @@ "line": "" + } + ] + }, { "name": "band-scale", "title": "band scale", @@ -227,6 +239,18 @@ } ] }, + { + "name": "motion-tween", + "title": "motion tween", + "path": "/docs/components/AreaChart/motion-tween", + "components": [ + { + "component": "AreaChart", + "lineNumber": 14, + "line": "" }, { "component": "Tooltip", - "lineNumber": 71, + "lineNumber": 75, "line": "" } ] @@ -438,7 +462,7 @@ { "component": "Area", "lineNumber": 43, - "line": "" + "line": "" } ] }, @@ -650,6 +674,13 @@ } ], "usage": [ + { + "example": "all-zero", + "component": "AreaChart", + "path": "/docs/components/AreaChart/all-zero", + "lineNumber": 11, + "line": "" + }, { "example": "band-scale", "component": "AreaChart", @@ -682,7 +713,7 @@ "example": "brush-sync", "component": "AreaChart", "path": "/docs/components/AreaChart/brush-sync", - "lineNumber": 42, + "lineNumber": 41, "line": "" }, + { + "example": "ridgeline", + "component": "Area", + "path": "/docs/components/Area/ridgeline", + "lineNumber": 105, + "line": "" + }, + { + "example": "ridgeline-kde", + "component": "Area", + "path": "/docs/components/Area/ridgeline-kde", + "lineNumber": 195, + "line": "" + }, { "example": "stack", "component": "Area", @@ -1159,6 +1173,20 @@ "lineNumber": 19, "line": "" }, + { + "example": "tween-on-mount", + "component": "Area", + "path": "/docs/components/Area/tween-on-mount", + "lineNumber": 15, + "line": "" + }, + { + "example": "tween-on-mount", + "component": "Area", + "path": "/docs/components/Area/tween-on-mount", + "lineNumber": 16, + "line": "" + }, { "example": "with-labels", "component": "Area", @@ -1646,7 +1674,7 @@ "example": "time-scale-brush", "component": "Axis", "path": "/docs/components/Axis/time-scale-brush", - "lineNumber": 48, + "lineNumber": 47, "line": "" }, { @@ -1667,7 +1695,7 @@ "example": "time-scale-brush-multiline", "component": "Axis", "path": "/docs/components/Axis/time-scale-brush-multiline", - "lineNumber": 48, + "lineNumber": 47, "line": "" }, { @@ -2251,6 +2279,20 @@ "lineNumber": 26, "line": "" }, + { + "example": "vertical-fixed-width", + "component": "Bars", + "path": "/docs/components/Bars/vertical-fixed-width", + "lineNumber": 25, + "line": "" + }, + { + "example": "vertical-fixed-width", + "component": "Bars", + "path": "/docs/components/Bars/vertical-fixed-width", + "lineNumber": 26, + "line": "" + }, { "example": "vertical-gradient", "component": "Bars", @@ -2671,6 +2713,90 @@ "lineNumber": 26, "line": "" }, + { + "example": "basic", + "component": "BoxPlot", + "path": "/docs/components/BoxPlot/basic", + "lineNumber": 37, + "line": "" + }, + { + "example": "basic", + "component": "BoxPlot", + "path": "/docs/components/BoxPlot/basic", + "lineNumber": 38, + "line": "" + }, + { + "example": "horizontal", + "component": "BoxPlot", + "path": "/docs/components/BoxPlot/horizontal", + "lineNumber": 38, + "line": "" + }, + { + "example": "horizontal", + "component": "BoxPlot", + "path": "/docs/components/BoxPlot/horizontal", + "lineNumber": 39, + "line": "" + }, + { + "example": "pre-computed", + "component": "BoxPlot", + "path": "/docs/components/BoxPlot/pre-computed", + "lineNumber": 38, + "line": "" + }, + { + "example": "pre-computed", + "component": "BoxPlot", + "path": "/docs/components/BoxPlot/pre-computed", + "lineNumber": 39, + "line": "" + }, + { + "example": "styled", + "component": "BoxPlot", + "path": "/docs/components/BoxPlot/styled", + "lineNumber": 46, + "line": "" + }, + { + "example": "styled", + "component": "BoxPlot", + "path": "/docs/components/BoxPlot/styled", + "lineNumber": 47, + "line": "" + }, + { + "example": "with-tooltip", + "component": "BoxPlot", + "path": "/docs/components/BoxPlot/with-tooltip", + "lineNumber": 44, + "line": "" + }, + { + "example": "with-tooltip", + "component": "BoxPlot", + "path": "/docs/components/BoxPlot/with-tooltip", + "lineNumber": 45, + "line": "" + }, + { + "example": "with-violin", + "component": "BoxPlot", + "path": "/docs/components/BoxPlot/with-violin", + "lineNumber": 62, + "line": "" + }, + { + "example": "with-violin", + "component": "BoxPlot", + "path": "/docs/components/BoxPlot/with-violin", + "lineNumber": 63, + "line": "" + }, { "example": "integrated-brush-(both-axis-area)", "component": "BrushContext", @@ -2717,14 +2843,28 @@ "example": "minimap", "component": "BrushContext", "path": "/docs/components/BrushContext/minimap", - "lineNumber": 44, + "lineNumber": 55, "line": "" }, { "example": "minimap", "component": "BrushContext", "path": "/docs/components/BrushContext/minimap", - "lineNumber": 45, + "lineNumber": 56, + "line": "" + }, + { + "example": "programmatic-control", + "component": "BrushContext", + "path": "/docs/components/BrushContext/programmatic-control", + "lineNumber": 50, + "line": "" + }, + { + "example": "programmatic-control", + "component": "BrushContext", + "path": "/docs/components/BrushContext/programmatic-control", + "lineNumber": 51, "line": "" }, { @@ -2784,16 +2924,16 @@ "line": "" }, { - "example": "sync-brushes-with-bind-xdomain", + "example": "synced-brushes", "component": "BrushContext", - "path": "/docs/components/BrushContext/sync-brushes-with-bind-xdomain", + "path": "/docs/components/BrushContext/synced-brushes", "lineNumber": 65, "line": "" }, { - "example": "sync-brushes-with-bind-xdomain", + "example": "synced-brushes", "component": "BrushContext", - "path": "/docs/components/BrushContext/sync-brushes-with-bind-xdomain", + "path": "/docs/components/BrushContext/synced-brushes", "lineNumber": 66, "line": "" }, @@ -2811,6 +2951,76 @@ "lineNumber": 42, "line": "" }, + { + "example": "basic", + "component": "Cell", + "path": "/docs/components/Cell/basic", + "lineNumber": 42, + "line": "" + }, + { + "example": "basic", + "component": "Cell", + "path": "/docs/components/Cell/basic", + "lineNumber": 43, + "line": "" + }, + { + "example": "circle", + "component": "Cell", + "path": "/docs/components/Cell/circle", + "lineNumber": 40, + "line": "" + }, + { + "example": "circle", + "component": "Cell", + "path": "/docs/components/Cell/circle", + "lineNumber": 41, + "line": "" + }, + { + "example": "color-scale", + "component": "Cell", + "path": "/docs/components/Cell/color-scale", + "lineNumber": 40, + "line": "" + }, + { + "example": "color-scale", + "component": "Cell", + "path": "/docs/components/Cell/color-scale", + "lineNumber": 41, + "line": "" + }, + { + "example": "punchcard", + "component": "Cell", + "path": "/docs/components/Cell/punchcard", + "lineNumber": 27, + "line": " 'Week ' + d} rule />" + }, + { + "example": "punchcard", + "component": "Cell", + "path": "/docs/components/Cell/punchcard", + "lineNumber": 28, + "line": " daysOfWeek[d]} rule />" + }, + { + "example": "rounded-insets", + "component": "Cell", + "path": "/docs/components/Cell/rounded-insets", + "lineNumber": 40, + "line": "" + }, + { + "example": "rounded-insets", + "component": "Cell", + "path": "/docs/components/Cell/rounded-insets", + "lineNumber": 41, + "line": "" + }, { "example": "compound-dual-axis-with-single-chart-using-remapped-scale", "component": "Chart", @@ -2868,172 +3078,396 @@ "line": "" }, { - "example": "styling-using-attributes", + "example": "color-via-ordinal-scale", "component": "Circle", - "path": "/docs/components/Circle/styling-using-attributes", - "lineNumber": 13, + "path": "/docs/components/Circle/color-via-ordinal-scale", + "lineNumber": 28, "line": "" }, { - "example": "styling-using-classes", + "example": "color-via-threshold-scale", "component": "Circle", - "path": "/docs/components/Circle/styling-using-classes", - "lineNumber": 12, + "path": "/docs/components/Circle/color-via-threshold-scale", + "lineNumber": 30, "line": "" }, { - "example": "styling-using-classes", + "example": "color-via-threshold-scale", "component": "Circle", - "path": "/docs/components/Circle/styling-using-classes", - "lineNumber": 13, + "path": "/docs/components/Circle/color-via-threshold-scale", + "lineNumber": 31, "line": "" }, { - "example": "styling-using-css-variables", + "example": "data-mode", "component": "Circle", - "path": "/docs/components/Circle/styling-using-css-variables", - "lineNumber": 12, + "path": "/docs/components/Circle/data-mode", + "lineNumber": 18, "line": "" }, { - "example": "styling-using-css-variables", + "example": "data-mode", "component": "Circle", - "path": "/docs/components/Circle/styling-using-css-variables", - "lineNumber": 13, + "path": "/docs/components/Circle/data-mode", + "lineNumber": 19, "line": "" }, { "example": "styling-using-attributes", - "component": "Ellipse", - "path": "/docs/components/Ellipse/styling-using-attributes", + "component": "Circle", + "path": "/docs/components/Circle/styling-using-attributes", "lineNumber": 12, "line": "" }, { "example": "styling-using-attributes", - "component": "Ellipse", - "path": "/docs/components/Ellipse/styling-using-attributes", + "component": "Circle", + "path": "/docs/components/Circle/styling-using-attributes", "lineNumber": 13, "line": "" }, { "example": "styling-using-classes", - "component": "Ellipse", - "path": "/docs/components/Ellipse/styling-using-classes", + "component": "Circle", + "path": "/docs/components/Circle/styling-using-classes", "lineNumber": 12, "line": "" }, { "example": "styling-using-classes", - "component": "Ellipse", - "path": "/docs/components/Ellipse/styling-using-classes", + "component": "Circle", + "path": "/docs/components/Circle/styling-using-classes", "lineNumber": 13, "line": "" }, { "example": "styling-using-css-variables", - "component": "Ellipse", - "path": "/docs/components/Ellipse/styling-using-css-variables", + "component": "Circle", + "path": "/docs/components/Circle/styling-using-css-variables", "lineNumber": 12, "line": "" }, { "example": "styling-using-css-variables", - "component": "Ellipse", - "path": "/docs/components/Ellipse/styling-using-css-variables", + "component": "Circle", + "path": "/docs/components/Circle/styling-using-css-variables", "lineNumber": 13, "line": "" }, { - "example": "beeswarm", - "component": "ForceSimulation", - "path": "/docs/components/ForceSimulation/beeswarm", - "lineNumber": 32, - "line": "" + "example": "sampled", + "component": "Contour", + "path": "/docs/components/Contour/sampled", + "lineNumber": 15, + "line": "" }, { - "example": "basic", - "component": "Frame", - "path": "/docs/components/Frame/basic", - "lineNumber": 13, + "example": "sampled", + "component": "Contour", + "path": "/docs/components/Contour/sampled", + "lineNumber": 16, "line": "" }, { - "example": "basic", - "component": "Frame", - "path": "/docs/components/Frame/basic", - "lineNumber": 14, - "line": "" + "example": "sampled-interactive", + "component": "Contour", + "path": "/docs/components/Contour/sampled-interactive", + "lineNumber": 24, + "line": "" }, { - "example": "border", - "component": "Frame", - "path": "/docs/components/Frame/border", - "lineNumber": 13, + "example": "sampled-interactive", + "component": "Contour", + "path": "/docs/components/Contour/sampled-interactive", + "lineNumber": 25, "line": "" }, { - "example": "border", - "component": "Frame", - "path": "/docs/components/Frame/border", - "lineNumber": 14, + "example": "volcano-filled", + "component": "Contour", + "path": "/docs/components/Contour/volcano-filled", + "lineNumber": 13, "line": "" }, { - "example": "full", - "component": "Frame", - "path": "/docs/components/Frame/full", - "lineNumber": 13, + "example": "volcano-filled", + "component": "Contour", + "path": "/docs/components/Contour/volcano-filled", + "lineNumber": 14, "line": "" }, { - "example": "full", - "component": "Frame", - "path": "/docs/components/Frame/full", - "lineNumber": 14, + "example": "volcano-filled-interactive", + "component": "Contour", + "path": "/docs/components/Contour/volcano-filled-interactive", + "lineNumber": 22, "line": "" }, { - "example": "gradient", - "component": "Frame", - "path": "/docs/components/Frame/gradient", - "lineNumber": 17, - "line": "" + "example": "volcano-filled-interactive", + "component": "Contour", + "path": "/docs/components/Contour/volcano-filled-interactive", + "lineNumber": 23, + "line": "" }, { - "example": "gradient", - "component": "Frame", - "path": "/docs/components/Frame/gradient", - "lineNumber": 18, - "line": "" + "example": "volcano-lines", + "component": "Contour", + "path": "/docs/components/Contour/volcano-lines", + "lineNumber": 11, + "line": "" }, { - "example": "band-scale-between", - "component": "Grid", - "path": "/docs/components/Grid/band-scale-between", + "example": "volcano-lines", + "component": "Contour", + "path": "/docs/components/Contour/volcano-lines", "lineNumber": 12, "line": "" }, { - "example": "band-scale-default", - "component": "Grid", - "path": "/docs/components/Grid/band-scale-default", - "lineNumber": 12, - "line": "" + "example": "bandwidth", + "component": "Density", + "path": "/docs/components/Density/bandwidth", + "lineNumber": 28, + "line": "" }, { - "example": "explicit-ticks", - "component": "Grid", - "path": "/docs/components/Grid/explicit-ticks", - "lineNumber": 8, - "line": "" + "example": "bandwidth", + "component": "Density", + "path": "/docs/components/Density/bandwidth", + "lineNumber": 29, + "line": "" + }, + { + "example": "basic", + "component": "Density", + "path": "/docs/components/Density/basic", + "lineNumber": 21, + "line": "" + }, + { + "example": "basic", + "component": "Density", + "path": "/docs/components/Density/basic", + "lineNumber": 22, + "line": "" + }, + { + "example": "stroke-only", + "component": "Density", + "path": "/docs/components/Density/stroke-only", + "lineNumber": 21, + "line": "" + }, + { + "example": "stroke-only", + "component": "Density", + "path": "/docs/components/Density/stroke-only", + "lineNumber": 22, + "line": "" + }, + { + "example": "thresholds", + "component": "Density", + "path": "/docs/components/Density/thresholds", + "lineNumber": 28, + "line": "" + }, + { + "example": "thresholds", + "component": "Density", + "path": "/docs/components/Density/thresholds", + "lineNumber": 29, + "line": "" + }, + { + "example": "weighted", + "component": "Density", + "path": "/docs/components/Density/weighted", + "lineNumber": 28, + "line": "" + }, + { + "example": "weighted", + "component": "Density", + "path": "/docs/components/Density/weighted", + "lineNumber": 29, + "line": "" + }, + { + "example": "color-via-ordinal-scale", + "component": "Ellipse", + "path": "/docs/components/Ellipse/color-via-ordinal-scale", + "lineNumber": 27, + "line": "" + }, + { + "example": "color-via-ordinal-scale", + "component": "Ellipse", + "path": "/docs/components/Ellipse/color-via-ordinal-scale", + "lineNumber": 28, + "line": "" + }, + { + "example": "color-via-threshold-scale", + "component": "Ellipse", + "path": "/docs/components/Ellipse/color-via-threshold-scale", + "lineNumber": 30, + "line": "" + }, + { + "example": "color-via-threshold-scale", + "component": "Ellipse", + "path": "/docs/components/Ellipse/color-via-threshold-scale", + "lineNumber": 31, + "line": "" + }, + { + "example": "data-mode", + "component": "Ellipse", + "path": "/docs/components/Ellipse/data-mode", + "lineNumber": 18, + "line": "" + }, + { + "example": "data-mode", + "component": "Ellipse", + "path": "/docs/components/Ellipse/data-mode", + "lineNumber": 19, + "line": "" + }, + { + "example": "styling-using-attributes", + "component": "Ellipse", + "path": "/docs/components/Ellipse/styling-using-attributes", + "lineNumber": 12, + "line": "" + }, + { + "example": "styling-using-attributes", + "component": "Ellipse", + "path": "/docs/components/Ellipse/styling-using-attributes", + "lineNumber": 13, + "line": "" + }, + { + "example": "styling-using-classes", + "component": "Ellipse", + "path": "/docs/components/Ellipse/styling-using-classes", + "lineNumber": 12, + "line": "" + }, + { + "example": "styling-using-classes", + "component": "Ellipse", + "path": "/docs/components/Ellipse/styling-using-classes", + "lineNumber": 13, + "line": "" + }, + { + "example": "styling-using-css-variables", + "component": "Ellipse", + "path": "/docs/components/Ellipse/styling-using-css-variables", + "lineNumber": 12, + "line": "" + }, + { + "example": "styling-using-css-variables", + "component": "Ellipse", + "path": "/docs/components/Ellipse/styling-using-css-variables", + "lineNumber": 13, + "line": "" + }, + { + "example": "beeswarm", + "component": "ForceSimulation", + "path": "/docs/components/ForceSimulation/beeswarm", + "lineNumber": 32, + "line": "" + }, + { + "example": "basic", + "component": "Frame", + "path": "/docs/components/Frame/basic", + "lineNumber": 13, + "line": "" + }, + { + "example": "basic", + "component": "Frame", + "path": "/docs/components/Frame/basic", + "lineNumber": 14, + "line": "" + }, + { + "example": "border", + "component": "Frame", + "path": "/docs/components/Frame/border", + "lineNumber": 13, + "line": "" + }, + { + "example": "border", + "component": "Frame", + "path": "/docs/components/Frame/border", + "lineNumber": 14, + "line": "" + }, + { + "example": "full", + "component": "Frame", + "path": "/docs/components/Frame/full", + "lineNumber": 13, + "line": "" + }, + { + "example": "full", + "component": "Frame", + "path": "/docs/components/Frame/full", + "lineNumber": 14, + "line": "" + }, + { + "example": "gradient", + "component": "Frame", + "path": "/docs/components/Frame/gradient", + "lineNumber": 17, + "line": "" + }, + { + "example": "gradient", + "component": "Frame", + "path": "/docs/components/Frame/gradient", + "lineNumber": 18, + "line": "" + }, + { + "example": "band-scale-between", + "component": "Grid", + "path": "/docs/components/Grid/band-scale-between", + "lineNumber": 12, + "line": "" + }, + { + "example": "band-scale-default", + "component": "Grid", + "path": "/docs/components/Grid/band-scale-default", + "lineNumber": 12, + "line": "" + }, + { + "example": "explicit-ticks", + "component": "Grid", + "path": "/docs/components/Grid/explicit-ticks", + "lineNumber": 8, + "line": "" }, { "example": "inject-tick-value", @@ -3084,6 +3518,20 @@ "lineNumber": 8, "line": "" }, + { + "example": "data-mode", + "component": "Group", + "path": "/docs/components/Group/data-mode", + "lineNumber": 16, + "line": "" + }, + { + "example": "data-mode", + "component": "Group", + "path": "/docs/components/Group/data-mode", + "lineNumber": 17, + "line": "" + }, { "example": "scatter", "component": "Hull", @@ -3098,6 +3546,97 @@ "lineNumber": 37, "line": "" }, + { + "example": "country-flags", + "component": "Image", + "path": "/docs/components/Image/country-flags", + "lineNumber": 27, + "line": "" + }, + { + "example": "country-flags", + "component": "Image", + "path": "/docs/components/Image/country-flags", + "lineNumber": 28, + "line": "" + }, + { + "example": "planets", + "component": "Image", + "path": "/docs/components/Image/planets", + "lineNumber": 65, + "line": "" + }, + { + "example": "sports-logos", + "component": "Image", + "path": "/docs/components/Image/sports-logos", + "lineNumber": 78, + "line": "" + }, + { + "example": "sports-logos", + "component": "Image", + "path": "/docs/components/Image/sports-logos", + "lineNumber": 79, + "line": "" + }, + { + "example": "us-presidents", + "component": "Image", + "path": "/docs/components/Image/us-presidents", + "lineNumber": 73, + "line": "" + }, + { + "example": "us-presidents", + "component": "Image", + "path": "/docs/components/Image/us-presidents", + "lineNumber": 74, + "line": "" + }, + { + "example": "color-via-ordinal-scale", + "component": "Line", + "path": "/docs/components/Line/color-via-ordinal-scale", + "lineNumber": 28, + "line": "" + }, + { + "example": "color-via-ordinal-scale", + "component": "Line", + "path": "/docs/components/Line/color-via-ordinal-scale", + "lineNumber": 29, + "line": "" + }, + { + "example": "color-via-threshold-scale", + "component": "Line", + "path": "/docs/components/Line/color-via-threshold-scale", + "lineNumber": 30, + "line": "" + }, + { + "example": "color-via-threshold-scale", + "component": "Line", + "path": "/docs/components/Line/color-via-threshold-scale", + "lineNumber": 31, + "line": "" + }, + { + "example": "data-mode", + "component": "Line", + "path": "/docs/components/Line/data-mode", + "lineNumber": 18, + "line": "" + }, + { + "example": "data-mode", + "component": "Line", + "path": "/docs/components/Line/data-mode", + "lineNumber": 19, + "line": "" + }, { "example": "styling-using-attributes", "component": "Line", @@ -3308,6 +3847,160 @@ "lineNumber": 22, "line": "" }, + { + "example": "color-via-ordinal-scale", + "component": "Polygon", + "path": "/docs/components/Polygon/color-via-ordinal-scale", + "lineNumber": 25, + "line": "" + }, + { + "example": "color-via-ordinal-scale", + "component": "Polygon", + "path": "/docs/components/Polygon/color-via-ordinal-scale", + "lineNumber": 26, + "line": "" + }, + { + "example": "color-via-threshold-scale", + "component": "Polygon", + "path": "/docs/components/Polygon/color-via-threshold-scale", + "lineNumber": 28, + "line": "" + }, + { + "example": "color-via-threshold-scale", + "component": "Polygon", + "path": "/docs/components/Polygon/color-via-threshold-scale", + "lineNumber": 29, + "line": "" + }, + { + "example": "data-mode", + "component": "Polygon", + "path": "/docs/components/Polygon/data-mode", + "lineNumber": 16, + "line": "" + }, + { + "example": "data-mode", + "component": "Polygon", + "path": "/docs/components/Polygon/data-mode", + "lineNumber": 17, + "line": "" + }, + { + "example": "mandelbrot", + "component": "Raster", + "path": "/docs/components/Raster/mandelbrot", + "lineNumber": 23, + "line": "" + }, + { + "example": "mandelbrot", + "component": "Raster", + "path": "/docs/components/Raster/mandelbrot", + "lineNumber": 24, + "line": "" + }, + { + "example": "math-functions", + "component": "Raster", + "path": "/docs/components/Raster/math-functions", + "lineNumber": 100, + "line": "" + }, + { + "example": "math-functions", + "component": "Raster", + "path": "/docs/components/Raster/math-functions", + "lineNumber": 101, + "line": "" + }, + { + "example": "sampled", + "component": "Raster", + "path": "/docs/components/Raster/sampled", + "lineNumber": 15, + "line": "" + }, + { + "example": "sampled", + "component": "Raster", + "path": "/docs/components/Raster/sampled", + "lineNumber": 16, + "line": "" + }, + { + "example": "volcano", + "component": "Raster", + "path": "/docs/components/Raster/volcano", + "lineNumber": 13, + "line": "" + }, + { + "example": "volcano", + "component": "Raster", + "path": "/docs/components/Raster/volcano", + "lineNumber": 14, + "line": "" + }, + { + "example": "with-contour-overlay", + "component": "Raster", + "path": "/docs/components/Raster/with-contour-overlay", + "lineNumber": 13, + "line": "" + }, + { + "example": "with-contour-overlay", + "component": "Raster", + "path": "/docs/components/Raster/with-contour-overlay", + "lineNumber": 14, + "line": "" + }, + { + "example": "color-via-ordinal-scale", + "component": "Rect", + "path": "/docs/components/Rect/color-via-ordinal-scale", + "lineNumber": 28, + "line": "" + }, + { + "example": "color-via-ordinal-scale", + "component": "Rect", + "path": "/docs/components/Rect/color-via-ordinal-scale", + "lineNumber": 29, + "line": "" + }, + { + "example": "color-via-threshold-scale", + "component": "Rect", + "path": "/docs/components/Rect/color-via-threshold-scale", + "lineNumber": 30, + "line": "" + }, + { + "example": "color-via-threshold-scale", + "component": "Rect", + "path": "/docs/components/Rect/color-via-threshold-scale", + "lineNumber": 31, + "line": "" + }, + { + "example": "data-mode-edge", + "component": "Rect", + "path": "/docs/components/Rect/data-mode-edge", + "lineNumber": 17, + "line": "" + }, + { + "example": "data-mode-edge", + "component": "Rect", + "path": "/docs/components/Rect/data-mode-edge", + "lineNumber": 18, + "line": "" + }, { "example": "styling-using-attributes", "component": "Rect", @@ -3798,6 +4491,20 @@ "lineNumber": 37, "line": "" }, + { + "example": "tween-on-mount", + "component": "Spline", + "path": "/docs/components/Spline/tween-on-mount", + "lineNumber": 15, + "line": "" + }, + { + "example": "tween-on-mount", + "component": "Spline", + "path": "/docs/components/Spline/tween-on-mount", + "lineNumber": 16, + "line": "" + }, { "example": "tweened", "component": "Spline", @@ -3854,6 +4561,48 @@ "lineNumber": 22, "line": "" }, + { + "example": "color-via-ordinal-scale", + "component": "Text", + "path": "/docs/components/Text/color-via-ordinal-scale", + "lineNumber": 25, + "line": "" + }, + { + "example": "color-via-ordinal-scale", + "component": "Text", + "path": "/docs/components/Text/color-via-ordinal-scale", + "lineNumber": 26, + "line": "" + }, + { + "example": "color-via-threshold-scale", + "component": "Text", + "path": "/docs/components/Text/color-via-threshold-scale", + "lineNumber": 28, + "line": "" + }, + { + "example": "color-via-threshold-scale", + "component": "Text", + "path": "/docs/components/Text/color-via-threshold-scale", + "lineNumber": 29, + "line": "" + }, + { + "example": "data-mode", + "component": "Text", + "path": "/docs/components/Text/data-mode", + "lineNumber": 23, + "line": "" + }, + { + "example": "data-mode", + "component": "Text", + "path": "/docs/components/Text/data-mode", + "lineNumber": 24, + "line": "" + }, { "example": "anchor-location", "component": "Tooltip", @@ -4133,7 +4882,126 @@ "path": "/docs/components/Tooltip/stacked-area", "lineNumber": 59, "line": "" + }, + { + "example": "pan-zoom-axes", + "component": "TransformContext", + "path": "/docs/components/TransformContext/pan-zoom-axes", + "lineNumber": 53, + "line": "" + }, + { + "example": "anchor", + "component": "Vector", + "path": "/docs/components/Vector/anchor", + "lineNumber": 19, + "line": "" + }, + { + "example": "anchor", + "component": "Vector", + "path": "/docs/components/Vector/anchor", + "lineNumber": 20, + "line": "" + }, + { + "example": "data-mode", + "component": "Vector", + "path": "/docs/components/Vector/data-mode", + "lineNumber": 36, + "line": "" + }, + { + "example": "data-mode", + "component": "Vector", + "path": "/docs/components/Vector/data-mode", + "lineNumber": 37, + "line": "" + }, + { + "example": "wind-map", + "component": "Vector", + "path": "/docs/components/Vector/wind-map", + "lineNumber": 37, + "line": "" + }, + { + "example": "wind-map", + "component": "Vector", + "path": "/docs/components/Vector/wind-map", + "lineNumber": 38, + "line": "" + }, + { + "example": "bandwidth", + "component": "Violin", + "path": "/docs/components/Violin/bandwidth", + "lineNumber": 56, + "line": "" + }, + { + "example": "bandwidth", + "component": "Violin", + "path": "/docs/components/Violin/bandwidth", + "lineNumber": 57, + "line": "" + }, + { + "example": "basic", + "component": "Violin", + "path": "/docs/components/Violin/basic", + "lineNumber": 49, + "line": "" + }, + { + "example": "basic", + "component": "Violin", + "path": "/docs/components/Violin/basic", + "lineNumber": 50, + "line": "" + }, + { + "example": "horizontal", + "component": "Violin", + "path": "/docs/components/Violin/horizontal", + "lineNumber": 50, + "line": "" + }, + { + "example": "horizontal", + "component": "Violin", + "path": "/docs/components/Violin/horizontal", + "lineNumber": 51, + "line": "" + }, + { + "example": "with-box-median", + "component": "Violin", + "path": "/docs/components/Violin/with-box-median", + "lineNumber": 49, + "line": "" + }, + { + "example": "with-box-median", + "component": "Violin", + "path": "/docs/components/Violin/with-box-median", + "lineNumber": 50, + "line": "" } ], - "updatedAt": "2026-02-13T15:08:00.588Z" + "updatedAt": "2026-03-31T03:03:45.493Z" } \ No newline at end of file diff --git a/docs/src/examples/catalog/BarChart.json b/docs/src/examples/catalog/BarChart.json index 84a9c37ed..17006f971 100644 --- a/docs/src/examples/catalog/BarChart.json +++ b/docs/src/examples/catalog/BarChart.json @@ -55,9 +55,9 @@ ] }, { - "name": "brushing", - "title": "brushing", - "path": "/docs/components/BarChart/brushing", + "name": "brush", + "title": "brush", + "path": "/docs/components/BarChart/brush", "components": [ { "component": "BarChart", @@ -66,6 +66,18 @@ } ] }, + { + "name": "brush-pan-zoom", + "title": "brush pan zoom", + "path": "/docs/components/BarChart/brush-pan-zoom", + "components": [ + { + "component": "BarChart", + "lineNumber": 16, + "line": "" + } + ] + }, { "name": "duration-points", "title": "duration points", @@ -388,7 +417,7 @@ { "component": "Bars", "lineNumber": 20, - "line": "" + "line": "" } ] }, @@ -411,7 +440,7 @@ "components": [ { "component": "BarChart", - "lineNumber": 9, + "lineNumber": 11, "line": " 0} x1=\"x1\" y1=\"length\" insets={{ x: 1 }} class=\"fill-primary\" />" }, { "component": "Tooltip", - "lineNumber": 59, + "lineNumber": 53, "line": "" } ] @@ -502,18 +526,18 @@ "path": "/docs/components/BarChart/histogram-date-time-interval", "components": [ { - "component": "LineChart", + "component": "Chart", "lineNumber": 39, - "line": " 0} x1=\"x1\" y1=\"length\" insets={{ x: 1 }} class=\"fill-primary\" />" }, { "component": "Tooltip", - "lineNumber": 66, + "lineNumber": 60, "line": "" } ] @@ -524,18 +548,18 @@ "path": "/docs/components/BarChart/histogram-horizontal", "components": [ { - "component": "LineChart", + "component": "Chart", "lineNumber": 22, - "line": " 0} y0=\"x0\" x1=\"length\" y1=\"x1\" insets={{ y: 1 }} class=\"fill-primary\" />" }, { "component": "Tooltip", - "lineNumber": 47, + "lineNumber": 38, "line": "" } ] @@ -546,18 +570,18 @@ "path": "/docs/components/BarChart/histogram-random-distribution", "components": [ { - "component": "LineChart", + "component": "Chart", "lineNumber": 18, - "line": " 0} x1=\"x1\" y1=\"length\" insets={{ x: 1 }} class=\"fill-primary\" />" }, { "component": "Tooltip", - "lineNumber": 42, + "lineNumber": 36, "line": "" } ] @@ -568,18 +592,18 @@ "path": "/docs/components/BarChart/histogram-vertical", "components": [ { - "component": "LineChart", + "component": "Chart", "lineNumber": 22, - "line": " 0} x1=\"x1\" y1=\"length\" insets={{ x: 1 }} class=\"fill-primary\" />" }, { "component": "Tooltip", - "lineNumber": 47, + "lineNumber": 41, "line": "" } ] @@ -680,6 +704,18 @@ } ] }, + { + "name": "motion-tween", + "title": "motion tween", + "path": "/docs/components/BarChart/motion-tween", + "components": [ + { + "component": "BarChart", + "lineNumber": 14, + "line": "" } ] @@ -714,6 +750,42 @@ } ] }, + { + "name": "pan-zoom", + "title": "pan zoom", + "path": "/docs/components/BarChart/pan-zoom", + "components": [ + { + "component": "BarChart", + "lineNumber": 16, + "line": "" } ] @@ -1226,6 +1322,18 @@ "line": "" } ] + }, + { + "name": "vertical-fixed-width", + "title": "vertical fixed width", + "path": "/docs/components/BarChart/vertical-fixed-width", + "components": [ + { + "component": "BarChart", + "lineNumber": 15, + "line": "" + } + ] } ], "usage": [ @@ -1307,12 +1415,19 @@ "line": "" }, { - "example": "brushing", + "example": "brush", "component": "BarChart", - "path": "/docs/components/BarChart/brushing", + "path": "/docs/components/BarChart/brush", "lineNumber": 16, "line": "" }, + { + "example": "brush-pan-zoom", + "component": "BarChart", + "path": "/docs/components/BarChart/brush-pan-zoom", + "lineNumber": 16, + "line": "" }, + { + "example": "vertical-fixed-width", + "component": "BarChart", + "path": "/docs/components/BarChart/vertical-fixed-width", + "lineNumber": 15, + "line": "" + }, { "example": "compound-common-scale-with-extra-marks", "component": "Chart", @@ -1874,5 +2045,5 @@ "line": "" + }, + { + "component": "Axis", + "lineNumber": 25, + "line": "" + }, + { + "component": "Bars", + "lineNumber": 27, + "line": "" + } + ] + }, { "name": "vertical-gradient", "title": "vertical gradient", @@ -2253,13 +2280,13 @@ "component": "BarChart", "path": "/docs/components/BarChart/gradient", "lineNumber": 20, - "line": "" + "line": "" }, { "example": "oscilloscope-frequency", "component": "BarChart", "path": "/docs/components/BarChart/oscilloscope-frequency", - "lineNumber": 119, + "lineNumber": 120, "line": "" }, { @@ -2542,6 +2569,13 @@ "lineNumber": 27, "line": "" }, + { + "example": "vertical-fixed-width", + "component": "Bars", + "path": "/docs/components/Bars/vertical-fixed-width", + "lineNumber": 27, + "line": "" + }, { "example": "vertical-gradient", "component": "Bars", @@ -2788,5 +2822,5 @@ "line": "" } ], - "updatedAt": "2026-02-07T20:21:31.376Z" + "updatedAt": "2026-03-23T11:04:17.926Z" } \ No newline at end of file diff --git a/docs/src/examples/catalog/Blur.json b/docs/src/examples/catalog/Blur.json index b0715b453..5a3ccd9cc 100644 --- a/docs/src/examples/catalog/Blur.json +++ b/docs/src/examples/catalog/Blur.json @@ -6,9 +6,9 @@ "example": "timezones", "component": "GeoPath", "path": "/docs/components/GeoPath/timezones", - "lineNumber": 130, + "lineNumber": 126, "line": "" } ], - "updatedAt": "2026-02-07T17:00:30.898Z" + "updatedAt": "2026-03-02T17:24:36.506Z" } \ No newline at end of file diff --git a/docs/src/examples/catalog/BoxPlot.json b/docs/src/examples/catalog/BoxPlot.json new file mode 100644 index 000000000..094fe66ac --- /dev/null +++ b/docs/src/examples/catalog/BoxPlot.json @@ -0,0 +1,237 @@ +{ + "component": "BoxPlot", + "examples": [ + { + "name": "basic", + "title": "basic", + "path": "/docs/components/BoxPlot/basic", + "components": [ + { + "component": "Chart", + "lineNumber": 27, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 37, + "line": "" + }, + { + "component": "BoxPlot", + "lineNumber": 40, + "line": "" + } + ] + }, + { + "name": "horizontal", + "title": "horizontal", + "path": "/docs/components/BoxPlot/horizontal", + "components": [ + { + "component": "Chart", + "lineNumber": 27, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 38, + "line": "" + }, + { + "component": "BoxPlot", + "lineNumber": 41, + "line": "" + } + ] + }, + { + "name": "pre-computed", + "title": "pre computed", + "path": "/docs/components/BoxPlot/pre-computed", + "components": [ + { + "component": "Chart", + "lineNumber": 28, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 38, + "line": "" + }, + { + "component": "BoxPlot", + "lineNumber": 41, + "line": "" + } + ] + }, + { + "name": "styled", + "title": "styled", + "path": "/docs/components/BoxPlot/styled", + "components": [ + { + "component": "Chart", + "lineNumber": 36, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 46, + "line": "" + }, + { + "component": "BoxPlot", + "lineNumber": 49, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 44, + "line": "" + }, + { + "component": "BoxPlot", + "lineNumber": 47, + "line": "" + }, + { + "component": "Tooltip", + "lineNumber": 59, + "line": "" + } + ] + }, + { + "name": "with-violin", + "title": "with violin", + "path": "/docs/components/BoxPlot/with-violin", + "components": [ + { + "component": "Chart", + "lineNumber": 50, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 62, + "line": "" + }, + { + "component": "Violin", + "lineNumber": 66, + "line": "" + }, + { + "component": "Tooltip", + "lineNumber": 95, + "line": "" + } + ] + } + ], + "usage": [ + { + "example": "basic", + "component": "BoxPlot", + "path": "/docs/components/BoxPlot/basic", + "lineNumber": 40, + "line": "" + }, + { + "example": "horizontal", + "component": "BoxPlot", + "path": "/docs/components/BoxPlot/horizontal", + "lineNumber": 41, + "line": "" + }, + { + "example": "pre-computed", + "component": "BoxPlot", + "path": "/docs/components/BoxPlot/pre-computed", + "lineNumber": 41, + "line": "" + }, + { + "example": "styled", + "component": "BoxPlot", + "path": "/docs/components/BoxPlot/styled", + "lineNumber": 49, + "line": "" }, { "component": "Axis", - "lineNumber": 44, + "lineNumber": 55, "line": "" }, { "component": "ChartClipPath", - "lineNumber": 47, + "lineNumber": 58, "line": "" }, { "component": "Points", - "lineNumber": 48, + "lineNumber": 59, "line": "" }, { "component": "Circle", - "lineNumber": 80, + "lineNumber": 92, "line": "" + }, + { + "component": "Axis", + "lineNumber": 50, + "line": "" + }, + { + "component": "Area", + "lineNumber": 52, + "line": "" + } + ] + }, { "name": "selection", "title": "selection", @@ -435,9 +462,9 @@ ] }, { - "name": "sync-brushes-with-bind-xdomain", - "title": "sync brushes with bind xdomain", - "path": "/docs/components/BrushContext/sync-brushes-with-bind-xdomain", + "name": "synced-brushes", + "title": "synced brushes", + "path": "/docs/components/BrushContext/synced-brushes", "components": [ { "component": "Chart", @@ -525,5 +552,5 @@ } ], "usage": [], - "updatedAt": "2026-02-07T20:21:31.423Z" + "updatedAt": "2026-03-24T16:00:54.951Z" } \ No newline at end of file diff --git a/docs/src/examples/catalog/BrushTestHarness.json b/docs/src/examples/catalog/BrushTestHarness.json new file mode 100644 index 000000000..53dac8b15 --- /dev/null +++ b/docs/src/examples/catalog/BrushTestHarness.json @@ -0,0 +1,6 @@ +{ + "component": "BrushTestHarness", + "examples": [], + "usage": [], + "updatedAt": "2026-03-24T16:00:54.970Z" +} \ No newline at end of file diff --git a/docs/src/examples/catalog/Calendar.json b/docs/src/examples/catalog/Calendar.json index 13cc11710..60734cc28 100644 --- a/docs/src/examples/catalog/Calendar.json +++ b/docs/src/examples/catalog/Calendar.json @@ -13,17 +13,17 @@ }, { "component": "Layer", - "lineNumber": 38, + "lineNumber": 37, "line": "" }, { "component": "Calendar", - "lineNumber": 39, - "line": "" + "lineNumber": 38, + "line": "" }, { "component": "Tooltip", - "lineNumber": 42, + "lineNumber": 41, "line": "" } ] @@ -62,17 +62,17 @@ }, { "component": "Layer", - "lineNumber": 40, + "lineNumber": 39, "line": "" }, { "component": "Calendar", - "lineNumber": 41, - "line": "" }, { "component": "Tooltip", - "lineNumber": 50, + "lineNumber": 43, "line": "" } ] @@ -95,7 +95,7 @@ { "component": "Calendar", "lineNumber": 41, - "line": "" + "line": "" }, { "component": "Tooltip", @@ -116,17 +116,17 @@ }, { "component": "Layer", - "lineNumber": 40, + "lineNumber": 39, "line": "" }, { "component": "Calendar", - "lineNumber": 41, - "line": "" }, { "component": "Tooltip", - "lineNumber": 49, + "lineNumber": 43, "line": "" } ] @@ -143,27 +143,27 @@ }, { "component": "Layer", - "lineNumber": 36, + "lineNumber": 35, "line": "" }, { "component": "Group", - "lineNumber": 40, + "lineNumber": 39, "line": "" }, { "component": "Text", - "lineNumber": 41, + "lineNumber": 40, "line": "" + "lineNumber": 49, + "line": "" }, { "component": "Tooltip", - "lineNumber": 55, + "lineNumber": 54, "line": "" } ] @@ -180,17 +180,17 @@ }, { "component": "Layer", - "lineNumber": 40, + "lineNumber": 39, "line": "" }, { "component": "Calendar", - "lineNumber": 41, - "line": "" }, { "component": "Tooltip", - "lineNumber": 49, + "lineNumber": 43, "line": "" } ] @@ -233,8 +233,8 @@ "example": "90-days", "component": "Calendar", "path": "/docs/components/Calendar/90-days", - "lineNumber": 39, - "line": "" + "lineNumber": 38, + "line": "" }, { "example": "basic", @@ -247,36 +247,36 @@ "example": "fixed-cell-size", "component": "Calendar", "path": "/docs/components/Calendar/fixed-cell-size", - "lineNumber": 41, - "line": "" }, { "example": "html-with-padding", "component": "Calendar", "path": "/docs/components/Calendar/html-with-padding", "lineNumber": 41, - "line": "" + "line": "" }, { "example": "last-month", "component": "Calendar", "path": "/docs/components/Calendar/last-month", - "lineNumber": 41, - "line": "" }, { "example": "multiple-years", "component": "Calendar", "path": "/docs/components/Calendar/multiple-years", - "lineNumber": 50, - "line": "" + "lineNumber": 49, + "line": "" }, { "example": "responsive-cell-size-default", "component": "Calendar", "path": "/docs/components/Calendar/responsive-cell-size-default", - "lineNumber": 41, - "line": "" }, { "example": "rounded-cells", @@ -286,5 +286,5 @@ "line": "" } ], - "updatedAt": "2026-02-07T20:21:31.441Z" + "updatedAt": "2026-03-02T17:24:36.557Z" } \ No newline at end of file diff --git a/docs/src/examples/catalog/Canvas.json b/docs/src/examples/catalog/Canvas.json index 9d7ae05f4..977cc3cdb 100644 --- a/docs/src/examples/catalog/Canvas.json +++ b/docs/src/examples/catalog/Canvas.json @@ -6,7 +6,7 @@ "example": "animated-globe", "component": "GeoPath", "path": "/docs/components/GeoPath/animated-globe", - "lineNumber": 166, + "lineNumber": 151, "line": "" }, { @@ -17,5 +17,5 @@ "line": "" } ], - "updatedAt": "2026-02-07T17:00:31.100Z" + "updatedAt": "2026-03-18T04:40:47.440Z" } \ No newline at end of file diff --git a/docs/src/examples/catalog/Cell.json b/docs/src/examples/catalog/Cell.json new file mode 100644 index 000000000..19ffcbb0d --- /dev/null +++ b/docs/src/examples/catalog/Cell.json @@ -0,0 +1,183 @@ +{ + "component": "Cell", + "examples": [ + { + "name": "basic", + "title": "basic", + "path": "/docs/components/Cell/basic", + "components": [ + { + "component": "Chart", + "lineNumber": 24, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 42, + "line": "" + }, + { + "component": "Cell", + "lineNumber": 44, + "line": "" + } + ] + }, + { + "name": "circle", + "title": "circle", + "path": "/docs/components/Cell/circle", + "components": [ + { + "component": "Chart", + "lineNumber": 26, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 40, + "line": "" + }, + { + "component": "Cell", + "lineNumber": 42, + "line": "" + } + ] + }, + { + "name": "color-scale", + "title": "color scale", + "path": "/docs/components/Cell/color-scale", + "components": [ + { + "component": "Chart", + "lineNumber": 26, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 40, + "line": "" + }, + { + "component": "Cell", + "lineNumber": 42, + "line": "" + } + ] + }, + { + "name": "punchcard", + "title": "punchcard", + "path": "/docs/components/Cell/punchcard", + "components": [ + { + "component": "Chart", + "lineNumber": 14, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 27, + "line": " 'Week ' + d} rule />" + }, + { + "component": "Grid", + "lineNumber": 29, + "line": "" + }, + { + "component": "Cell", + "lineNumber": 30, + "line": " timeWeek.count(timeYear(d.date), d.date)} y={(d) => d.date.getDay()} shape=\"circle\" r=\"value\" class=\"fill-primary\" />" + } + ] + }, + { + "name": "rounded-insets", + "title": "rounded insets", + "path": "/docs/components/Cell/rounded-insets", + "components": [ + { + "component": "Chart", + "lineNumber": 26, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 40, + "line": "" + }, + { + "component": "Cell", + "lineNumber": 42, + "line": "" + } + ] + } + ], + "usage": [ + { + "example": "basic", + "component": "Cell", + "path": "/docs/components/Cell/basic", + "lineNumber": 44, + "line": "" + }, + { + "example": "circle", + "component": "Cell", + "path": "/docs/components/Cell/circle", + "lineNumber": 42, + "line": "" + }, + { + "example": "color-scale", + "component": "Cell", + "path": "/docs/components/Cell/color-scale", + "lineNumber": 42, + "line": "" + }, + { + "example": "punchcard", + "component": "Cell", + "path": "/docs/components/Cell/punchcard", + "lineNumber": 30, + "line": " timeWeek.count(timeYear(d.date), d.date)} y={(d) => d.date.getDay()} shape=\"circle\" r=\"value\" class=\"fill-primary\" />" + }, + { + "example": "rounded-insets", + "component": "Cell", + "path": "/docs/components/Cell/rounded-insets", + "lineNumber": 42, + "line": "" + } + ], + "updatedAt": "2026-03-18T04:40:47.519Z" +} \ No newline at end of file diff --git a/docs/src/examples/catalog/Chart.json b/docs/src/examples/catalog/Chart.json index a4b4d0950..0a1b55558 100644 --- a/docs/src/examples/catalog/Chart.json +++ b/docs/src/examples/catalog/Chart.json @@ -140,6 +140,113 @@ "line": "" } ] + }, + { + "name": "data-chart-multi", + "title": "data chart multi", + "path": "/docs/components/Chart/data-chart-multi", + "components": [ + { + "component": "Chart", + "lineNumber": 14, + "line": "" + }, + { + "component": "Spline", + "lineNumber": 16, + "line": "" + } + ] + }, + { + "name": "data-chart-single", + "title": "data chart single", + "path": "/docs/components/Chart/data-chart-single", + "components": [ + { + "component": "Chart", + "lineNumber": 14, + "line": "" + }, + { + "component": "Spline", + "lineNumber": 16, + "line": "" + } + ] + }, + { + "name": "data-mark-data", + "title": "data mark data", + "path": "/docs/components/Chart/data-mark-data", + "components": [ + { + "component": "Chart", + "lineNumber": 23, + "line": "" + }, + { + "component": "Spline", + "lineNumber": 25, + "line": "" + } + ] + }, + { + "name": "data-primitive-data", + "title": "data primitive data", + "path": "/docs/components/Chart/data-primitive-data", + "components": [ + { + "component": "Chart", + "lineNumber": 23, + "line": "" + }, + { + "component": "Spline", + "lineNumber": 25, + "line": "" + }, + { + "component": "Circle", + "lineNumber": 26, + "line": "" + } + ] + }, + { + "name": "data-series-chart-data", + "title": "data series chart data", + "path": "/docs/components/Chart/data-series-chart-data", + "components": [ + { + "component": "Chart", + "lineNumber": 14, + "line": "" + } + ] + }, + { + "name": "data-series-separate-data", + "title": "data series separate data", + "path": "/docs/components/Chart/data-series-separate-data", + "components": [ + { + "component": "Chart", + "lineNumber": 23, + "line": "" + } + ] } ], "usage": [ @@ -260,7 +367,7 @@ "component": "Area", "path": "/docs/components/Area/highlight-color-based-on-value-using-tooltip-slot-prop", "lineNumber": 15, - "line": "" + "line": "" }, { "example": "multiple-series", @@ -290,6 +397,13 @@ "lineNumber": 27, "line": "" }, + { + "example": "ridgeline", + "component": "Area", + "path": "/docs/components/Area/ridgeline", + "lineNumber": 69, + "line": "" + "line": "" }, { "example": "threshold-with-lineargradient-over-under", "component": "Area", "path": "/docs/components/Area/threshold-with-lineargradient-over-under", "lineNumber": 15, - "line": "" + "line": "" }, { "example": "threshold-with-rectclippath", "component": "Area", "path": "/docs/components/Area/threshold-with-rectclippath", "lineNumber": 15, - "line": "" + "line": "" }, { "example": "threshold-with-rectclippath-over-under", "component": "Area", "path": "/docs/components/Area/threshold-with-rectclippath-over-under", "lineNumber": 15, - "line": "" + "line": "" + }, + { + "example": "tween-on-mount", + "component": "Area", + "path": "/docs/components/Area/tween-on-mount", + "lineNumber": 13, + "line": "" }, { "example": "with-labels", @@ -640,6 +775,41 @@ "lineNumber": 110, "line": "" }, { - "example": "sync-brushes-with-bind-xdomain", + "example": "synced-brushes", "component": "BrushContext", - "path": "/docs/components/BrushContext/sync-brushes-with-bind-xdomain", + "path": "/docs/components/BrushContext/synced-brushes", "lineNumber": 55, "line": "" + }, + { + "example": "data-chart-single", + "component": "Chart", + "path": "/docs/components/Chart/data-chart-single", + "lineNumber": 14, + "line": "" + }, + { + "example": "data-mark-data", + "component": "Chart", + "path": "/docs/components/Chart/data-mark-data", + "lineNumber": 23, + "line": "" + }, + { + "example": "data-primitive-data", + "component": "Chart", + "path": "/docs/components/Chart/data-primitive-data", + "lineNumber": 23, + "line": "" + }, + { + "example": "data-series-chart-data", + "component": "Chart", + "path": "/docs/components/Chart/data-series-chart-data", + "lineNumber": 14, + "line": "" + }, + { + "example": "directed", + "component": "Chord", + "path": "/docs/components/Chord/directed", + "lineNumber": 21, + "line": "" + }, + { + "example": "gradient", + "component": "Chord", + "path": "/docs/components/Chord/gradient", + "lineNumber": 70, + "line": "" + }, + { + "example": "hover", + "component": "Chord", + "path": "/docs/components/Chord/hover", + "lineNumber": 51, + "line": "" + }, + { + "example": "ticks", + "component": "Chord", + "path": "/docs/components/Chord/ticks", + "lineNumber": 36, + "line": "" + }, + { + "example": "color-via-ordinal-scale", + "component": "Circle", + "path": "/docs/components/Circle/color-via-ordinal-scale", + "lineNumber": 16, + "line": "" + }, { "example": "styling-using-attributes", "component": "Circle", @@ -1375,6 +1734,41 @@ "lineNumber": 21, "line": "" }, + { + "example": "sampled", + "component": "Contour", + "path": "/docs/components/Contour/sampled", + "lineNumber": 7, + "line": "" + }, + { + "example": "volcano-filled-interactive", + "component": "Contour", + "path": "/docs/components/Contour/volcano-filled-interactive", + "lineNumber": 20, + "line": "" + }, + { + "example": "volcano-lines", + "component": "Contour", + "path": "/docs/components/Contour/volcano-lines", + "lineNumber": 9, + "line": "" + }, { "example": "basic", "component": "Dagre", @@ -1403,6 +1797,69 @@ "lineNumber": 34, "line": "" + }, { "example": "styling-using-attributes", "component": "Ellipse", @@ -1561,7 +2018,7 @@ "example": "animated-globe", "component": "GeoPath", "path": "/docs/components/GeoPath/animated-globe", - "lineNumber": 125, + "lineNumber": 110, "line": "" }, + { + "example": "data-mode", + "component": "Group", + "path": "/docs/components/Group/data-mode", + "lineNumber": 14, + "line": "" + }, { "example": "geo", "component": "Hull", @@ -1886,6 +2420,48 @@ "lineNumber": 23, "line": "" + }, + { + "example": "planets", + "component": "Image", + "path": "/docs/components/Image/planets", + "lineNumber": 57, + "line": "" + }, { "example": "styling-using-attributes", "component": "Line", @@ -1956,6 +2553,13 @@ "lineNumber": 6, "line": "" }, + { + "example": "pan-zoom-with-overview", + "component": "LineChart", + "path": "/docs/components/LineChart/pan-zoom-with-overview", + "lineNumber": 30, + "line": "" }, + { + "example": "color-via-ordinal-scale", + "component": "Polygon", + "path": "/docs/components/Polygon/color-via-ordinal-scale", + "lineNumber": 14, + "line": "" }, + { + "example": "data-mode", + "component": "Polygon", + "path": "/docs/components/Polygon/data-mode", + "lineNumber": 14, + "line": "" + }, { "example": "diamond", "component": "Polygon", @@ -2530,6 +3155,62 @@ "lineNumber": 7, "line": "" }, + { + "example": "mandelbrot", + "component": "Raster", + "path": "/docs/components/Raster/mandelbrot", + "lineNumber": 15, + "line": "" + }, + { + "example": "with-contour-overlay", + "component": "Raster", + "path": "/docs/components/Raster/with-contour-overlay", + "lineNumber": 11, + "line": "" + }, + { + "example": "color-via-ordinal-scale", + "component": "Rect", + "path": "/docs/components/Rect/color-via-ordinal-scale", + "lineNumber": 16, + "line": "" + }, { "example": "styling-using-attributes", "component": "Rect", @@ -2726,6 +3407,13 @@ "lineNumber": 31, "line": "" }, + { + "example": "geo-routes", + "component": "Spline", + "path": "/docs/components/Spline/geo-routes", + "lineNumber": 18, + "line": "" + }, { "example": "tweened", "component": "Spline", @@ -2838,6 +3533,27 @@ "lineNumber": 10, "line": "" }, + { + "example": "anchor", + "component": "Vector", + "path": "/docs/components/Vector/anchor", + "lineNumber": 12, + "line": "" + }, + { + "example": "wind-map", + "component": "Vector", + "path": "/docs/components/Vector/wind-map", + "lineNumber": 25, + "line": "" } ], - "updatedAt": "2026-02-10T16:19:21.848Z" + "updatedAt": "2026-03-31T03:03:45.883Z" } \ No newline at end of file diff --git a/docs/src/examples/catalog/ChartChildren.json b/docs/src/examples/catalog/ChartChildren.json new file mode 100644 index 000000000..7ca28b457 --- /dev/null +++ b/docs/src/examples/catalog/ChartChildren.json @@ -0,0 +1,6 @@ +{ + "component": "ChartChildren", + "examples": [], + "usage": [], + "updatedAt": "2026-03-02T17:24:36.621Z" +} \ No newline at end of file diff --git a/docs/src/examples/catalog/ChartClipPath.json b/docs/src/examples/catalog/ChartClipPath.json index 629ef9cc6..50ade87c7 100644 --- a/docs/src/examples/catalog/ChartClipPath.json +++ b/docs/src/examples/catalog/ChartClipPath.json @@ -34,7 +34,7 @@ "example": "minimap", "component": "BrushContext", "path": "/docs/components/BrushContext/minimap", - "lineNumber": 47, + "lineNumber": 58, "line": "" }, { @@ -52,9 +52,9 @@ "line": "" }, { - "example": "sync-brushes-with-bind-xdomain", + "example": "synced-brushes", "component": "BrushContext", - "path": "/docs/components/BrushContext/sync-brushes-with-bind-xdomain", + "path": "/docs/components/BrushContext/synced-brushes", "lineNumber": 68, "line": "" }, @@ -65,6 +65,13 @@ "lineNumber": 43, "line": "" }, + { + "example": "weighted", + "component": "Density", + "path": "/docs/components/Density/weighted", + "lineNumber": 30, + "line": "" + }, { "example": "us-state-with-surrounding-states", "component": "GeoPath", @@ -115,5 +122,5 @@ "line": "" } ], - "updatedAt": "2026-02-07T17:00:31.357Z" + "updatedAt": "2026-03-29T03:11:05.664Z" } \ No newline at end of file diff --git a/docs/src/examples/catalog/Chord.json b/docs/src/examples/catalog/Chord.json new file mode 100644 index 000000000..e14b2b793 --- /dev/null +++ b/docs/src/examples/catalog/Chord.json @@ -0,0 +1,268 @@ +{ + "component": "Chord", + "examples": [ + { + "name": "basic", + "title": "basic", + "path": "/docs/components/Chord/basic", + "components": [ + { + "component": "Chart", + "lineNumber": 22, + "line": "" + }, + { + "component": "Layer", + "lineNumber": 23, + "line": "" + }, + { + "component": "Chord", + "lineNumber": 24, + "line": " b - a}>" + }, + { + "component": "Ribbon", + "lineNumber": 27, + "line": "" + }, + { + "component": "Layer", + "lineNumber": 22, + "line": "" + }, + { + "component": "Chord", + "lineNumber": 23, + "line": " b - a}>" + }, + { + "component": "Ribbon", + "lineNumber": 26, + "line": "" + }, + { + "component": "Layer", + "lineNumber": 72, + "line": "" + }, + { + "component": "Chord", + "lineNumber": 73, + "line": " b - a}>" + }, + { + "component": "LinearGradient", + "lineNumber": 76, + "line": "" + } + ] + }, + { + "name": "hover", + "title": "hover", + "path": "/docs/components/Chord/hover", + "components": [ + { + "component": "Chart", + "lineNumber": 51, + "line": "" + }, + { + "component": "Layer", + "lineNumber": 53, + "line": "" + }, + { + "component": "Chord", + "lineNumber": 54, + "line": " b - a}>" + }, + { + "component": "Ribbon", + "lineNumber": 57, + "line": "" + } + ] + }, + { + "name": "ticks", + "title": "ticks", + "path": "/docs/components/Chord/ticks", + "components": [ + { + "component": "Chart", + "lineNumber": 36, + "line": "" + }, + { + "component": "Layer", + "lineNumber": 37, + "line": "" + }, + { + "component": "Chord", + "lineNumber": 38, + "line": "" + }, + { + "component": "Ribbon", + "lineNumber": 41, + "line": "" + }, + { + "component": "Text", + "lineNumber": 68, + "line": " b - a}>" + }, + { + "example": "directed", + "component": "Chord", + "path": "/docs/components/Chord/directed", + "lineNumber": 23, + "line": " b - a}>" + }, + { + "example": "gradient", + "component": "Chord", + "path": "/docs/components/Chord/gradient", + "lineNumber": 73, + "line": " b - a}>" + }, + { + "example": "hover", + "component": "Chord", + "path": "/docs/components/Chord/hover", + "lineNumber": 54, + "line": " b - a}>" + }, + { + "example": "ticks", + "component": "Chord", + "path": "/docs/components/Chord/ticks", + "lineNumber": 38, + "line": "" + } + ], + "updatedAt": "2026-03-22T12:54:32.331Z" +} \ No newline at end of file diff --git a/docs/src/examples/catalog/Circle.json b/docs/src/examples/catalog/Circle.json index 3897ca360..3aa191fda 100644 --- a/docs/src/examples/catalog/Circle.json +++ b/docs/src/examples/catalog/Circle.json @@ -1,6 +1,92 @@ { "component": "Circle", "examples": [ + { + "name": "color-via-ordinal-scale", + "title": "color via ordinal scale", + "path": "/docs/components/Circle/color-via-ordinal-scale", + "components": [ + { + "component": "Chart", + "lineNumber": 16, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 27, + "line": "" + }, + { + "component": "Circle", + "lineNumber": 29, + "line": "" + } + ] + }, + { + "name": "color-via-threshold-scale", + "title": "color via threshold scale", + "path": "/docs/components/Circle/color-via-threshold-scale", + "components": [ + { + "component": "Chart", + "lineNumber": 17, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 30, + "line": "" + }, + { + "component": "AnnotationLine", + "lineNumber": 32, + "line": "" + } + ] + }, + { + "name": "data-mode", + "title": "data mode", + "path": "/docs/components/Circle/data-mode", + "components": [ + { + "component": "Chart", + "lineNumber": 16, + "line": "" + }, + { + "component": "Layer", + "lineNumber": 17, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 18, + "line": "" + }, + { + "component": "Circle", + "lineNumber": 20, + "line": "" + } + ] + }, { "name": "styling-using-attributes", "title": "styling using attributes", @@ -109,7 +195,7 @@ "example": "minimap", "component": "BrushContext", "path": "/docs/components/BrushContext/minimap", - "lineNumber": 80, + "lineNumber": 92, "line": "" + }, + { + "example": "data-primitive-data", + "component": "Chart", + "path": "/docs/components/Chart/data-primitive-data", + "lineNumber": 28, + "line": "" + }, + { + "example": "color-via-ordinal-scale", + "component": "Circle", + "path": "/docs/components/Circle/color-via-ordinal-scale", + "lineNumber": 29, + "line": "" + }, + { + "example": "color-via-threshold-scale", + "component": "Circle", + "path": "/docs/components/Circle/color-via-threshold-scale", + "lineNumber": 44, + "line": "" + }, + { + "example": "data-mode", + "component": "Circle", + "path": "/docs/components/Circle/data-mode", + "lineNumber": 20, + "line": "" + }, { "example": "styling-using-attributes", "component": "Circle", @@ -217,6 +338,27 @@ "lineNumber": 37, "line": "" + }, + { + "example": "walmart", + "component": "Density", + "path": "/docs/components/Density/walmart", + "lineNumber": 52, + "line": "" + }, + { + "example": "us-airports", + "component": "GeoPoint", + "path": "/docs/components/GeoPoint/us-airports", + "lineNumber": 52, + "line": "" }, + { + "example": "world-airports", + "component": "GeoPoint", + "path": "/docs/components/GeoPoint/world-airports", + "lineNumber": 43, + "line": "" + }, + { + "example": "world-airports", + "component": "GeoPoint", + "path": "/docs/components/GeoPoint/world-airports", + "lineNumber": 49, + "line": "" }, + { + "example": "data-mode", + "component": "Group", + "path": "/docs/components/Group/data-mode", + "lineNumber": 19, + "line": "" + }, { "example": "geo", "component": "Hull", @@ -336,6 +513,13 @@ "lineNumber": 47, "line": "" }, + { + "example": "college-football-map", + "component": "Image", + "path": "/docs/components/Image/college-football-map", + "lineNumber": 63, + "line": "" }, + { + "example": "color-via-ordinal-scale", + "component": "Line", + "path": "/docs/components/Line/color-via-ordinal-scale", + "lineNumber": 31, + "line": "" + }, + { + "example": "color-via-threshold-scale", + "component": "Line", + "path": "/docs/components/Line/color-via-threshold-scale", + "lineNumber": 45, + "line": "" + }, + { + "example": "data-mode", + "component": "Line", + "path": "/docs/components/Line/data-mode", + "lineNumber": 21, + "line": "" + }, { "example": "sync-with-draw", "component": "MotionPath", @@ -602,6 +807,27 @@ "lineNumber": 60, "line": "" }, + { + "example": "color-via-ordinal-scale", + "component": "Text", + "path": "/docs/components/Text/color-via-ordinal-scale", + "lineNumber": 27, + "line": "" + }, + { + "example": "color-via-threshold-scale", + "component": "Text", + "path": "/docs/components/Text/color-via-threshold-scale", + "lineNumber": 42, + "line": "" + }, + { + "example": "data-mode", + "component": "Text", + "path": "/docs/components/Text/data-mode", + "lineNumber": 25, + "line": "" + }, { "example": "playground", "component": "Text", @@ -616,6 +842,34 @@ "lineNumber": 58, "line": "" + }, + { + "example": "anchor", + "component": "Vector", + "path": "/docs/components/Vector/anchor", + "lineNumber": 27, + "line": "" + }, + { + "example": "anchor", + "component": "Vector", + "path": "/docs/components/Vector/anchor", + "lineNumber": 31, + "line": "" + }, + { + "example": "shapes", + "component": "Vector", + "path": "/docs/components/Vector/shapes", + "lineNumber": 70, + "line": "" + }, { "example": "radius", "component": "Voronoi", @@ -624,5 +878,5 @@ "line": "" } ], - "updatedAt": "2026-02-08T17:35:30.203Z" + "updatedAt": "2026-03-31T03:03:46.054Z" } \ No newline at end of file diff --git a/docs/src/examples/catalog/ClipPath.json b/docs/src/examples/catalog/ClipPath.json index d89904dbb..5a8b3ef56 100644 --- a/docs/src/examples/catalog/ClipPath.json +++ b/docs/src/examples/catalog/ClipPath.json @@ -13,14 +13,14 @@ "example": "timezones", "component": "GeoPath", "path": "/docs/components/GeoPath/timezones", - "lineNumber": 106, + "lineNumber": 105, "line": "" }, { "example": "timezones", "component": "GeoPath", "path": "/docs/components/GeoPath/timezones", - "lineNumber": 129, + "lineNumber": 125, "line": "" }, { @@ -31,5 +31,5 @@ "line": "" } ], - "updatedAt": "2026-02-07T17:00:31.433Z" + "updatedAt": "2026-03-02T17:24:36.682Z" } \ No newline at end of file diff --git a/docs/src/examples/catalog/Contour.json b/docs/src/examples/catalog/Contour.json new file mode 100644 index 000000000..0080b3927 --- /dev/null +++ b/docs/src/examples/catalog/Contour.json @@ -0,0 +1,192 @@ +{ + "component": "Contour", + "examples": [ + { + "name": "sampled", + "title": "sampled", + "path": "/docs/components/Contour/sampled", + "components": [ + { + "component": "Chart", + "lineNumber": 7, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 15, + "line": "" + }, + { + "component": "Contour", + "lineNumber": 17, + "line": " Math.sin(x) * Math.cos(y)} thresholds={20} />" + } + ] + }, + { + "name": "sampled-interactive", + "title": "sampled interactive", + "path": "/docs/components/Contour/sampled-interactive", + "components": [ + { + "component": "Chart", + "lineNumber": 16, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 24, + "line": "" + }, + { + "component": "Contour", + "lineNumber": 26, + "line": " Math.sin(x) * Math.cos(y)} {thresholds} {blur} />" + } + ] + }, + { + "name": "volcano-filled", + "title": "volcano filled", + "path": "/docs/components/Contour/volcano-filled", + "components": [ + { + "component": "Chart", + "lineNumber": 11, + "line": "" + }, + { + "component": "Layer", + "lineNumber": 12, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 13, + "line": "" + }, + { + "component": "Contour", + "lineNumber": 15, + "line": "" + }, + { + "component": "Layer", + "lineNumber": 21, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 22, + "line": "" + }, + { + "component": "Contour", + "lineNumber": 24, + "line": "" + }, + { + "component": "Layer", + "lineNumber": 10, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 11, + "line": "" + }, + { + "component": "Contour", + "lineNumber": 13, + "line": " Math.sin(x) * Math.cos(y)} thresholds={20} />" + }, + { + "example": "sampled-interactive", + "component": "Contour", + "path": "/docs/components/Contour/sampled-interactive", + "lineNumber": 26, + "line": " Math.sin(x) * Math.cos(y)} {thresholds} {blur} />" + }, + { + "example": "volcano-filled", + "component": "Contour", + "path": "/docs/components/Contour/volcano-filled", + "lineNumber": 15, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 28, + "line": "" + }, + { + "component": "Density", + "lineNumber": 30, + "line": "" + }, + { + "component": "Points", + "lineNumber": 31, + "line": "" + } + ] + }, + { + "name": "basic", + "title": "basic", + "path": "/docs/components/Density/basic", + "components": [ + { + "component": "Chart", + "lineNumber": 9, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 21, + "line": "" + }, + { + "component": "Density", + "lineNumber": 23, + "line": "" + }, + { + "component": "Points", + "lineNumber": 24, + "line": "" + } + ] + }, + { + "name": "stroke-only", + "title": "stroke only", + "path": "/docs/components/Density/stroke-only", + "components": [ + { + "component": "Chart", + "lineNumber": 9, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 21, + "line": "" + }, + { + "component": "Density", + "lineNumber": 23, + "line": "" + }, + { + "component": "Points", + "lineNumber": 24, + "line": "" + } + ] + }, + { + "name": "thresholds", + "title": "thresholds", + "path": "/docs/components/Density/thresholds", + "components": [ + { + "component": "Chart", + "lineNumber": 16, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 28, + "line": "" + }, + { + "component": "Density", + "lineNumber": 30, + "line": "" + }, + { + "component": "Points", + "lineNumber": 31, + "line": "" + } + ] + }, + { + "name": "walmart", + "title": "walmart", + "path": "/docs/components/Density/walmart", + "components": [ + { + "component": "Chart", + "lineNumber": 22, + "line": "" + }, + { + "component": "Density", + "lineNumber": 44, + "line": "" + }, + { + "component": "GeoPath", + "lineNumber": 45, + "line": "" + }, + { + "component": "Circle", + "lineNumber": 47, + "line": "" + }, + { + "component": "Tooltip", + "lineNumber": 63, + "line": "" + } + ] + }, + { + "name": "weighted", + "title": "weighted", + "path": "/docs/components/Density/weighted", + "components": [ + { + "component": "Chart", + "lineNumber": 18, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 28, + "line": "" + }, + { + "component": "ChartClipPath", + "lineNumber": 30, + "line": "" + }, + { + "component": "Density", + "lineNumber": 31, + "line": "" + }, + { + "example": "basic", + "component": "Density", + "path": "/docs/components/Density/basic", + "lineNumber": 23, + "line": "" + }, + { + "example": "stroke-only", + "component": "Density", + "path": "/docs/components/Density/stroke-only", + "lineNumber": 23, + "line": "" + }, + { + "example": "thresholds", + "component": "Density", + "path": "/docs/components/Density/thresholds", + "lineNumber": 30, + "line": "" + }, + { + "example": "walmart", + "component": "Density", + "path": "/docs/components/Density/walmart", + "lineNumber": 44, + "line": "" + }, + { + "example": "weighted", + "component": "Density", + "path": "/docs/components/Density/weighted", + "lineNumber": 31, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 27, + "line": "" + }, + { + "component": "Ellipse", + "lineNumber": 29, + "line": "" + } + ] + }, + { + "name": "color-via-threshold-scale", + "title": "color via threshold scale", + "path": "/docs/components/Ellipse/color-via-threshold-scale", + "components": [ + { + "component": "Chart", + "lineNumber": 17, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 30, + "line": "" + }, + { + "component": "AnnotationLine", + "lineNumber": 32, + "line": "" + } + ] + }, + { + "name": "data-mode", + "title": "data mode", + "path": "/docs/components/Ellipse/data-mode", + "components": [ + { + "component": "Chart", + "lineNumber": 16, + "line": "" + }, + { + "component": "Layer", + "lineNumber": 17, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 18, + "line": "" + }, + { + "component": "Ellipse", + "lineNumber": 20, + "line": "" + } + ] + }, { "name": "styling-using-attributes", "title": "styling using attributes", @@ -84,6 +170,27 @@ } ], "usage": [ + { + "example": "color-via-ordinal-scale", + "component": "Ellipse", + "path": "/docs/components/Ellipse/color-via-ordinal-scale", + "lineNumber": 29, + "line": "" + }, + { + "example": "color-via-threshold-scale", + "component": "Ellipse", + "path": "/docs/components/Ellipse/color-via-threshold-scale", + "lineNumber": 44, + "line": "" + }, + { + "example": "data-mode", + "component": "Ellipse", + "path": "/docs/components/Ellipse/data-mode", + "lineNumber": 20, + "line": "" + }, { "example": "styling-using-attributes", "component": "Ellipse", @@ -169,5 +276,5 @@ "line": "" } ], - "updatedAt": "2026-02-07T20:21:31.688Z" + "updatedAt": "2026-03-02T17:24:37.266Z" } \ No newline at end of file diff --git a/docs/src/examples/catalog/GeoPath.json b/docs/src/examples/catalog/GeoPath.json index 3b7f0e7b1..d88882257 100644 --- a/docs/src/examples/catalog/GeoPath.json +++ b/docs/src/examples/catalog/GeoPath.json @@ -8,32 +8,32 @@ "components": [ { "component": "Chart", - "lineNumber": 125, + "lineNumber": 110, "line": "" }, { "component": "GeoPath", - "lineNumber": 147, + "lineNumber": 132, "line": "" }, { "component": "Graticule", - "lineNumber": 148, + "lineNumber": 133, "line": "" }, { "component": "Canvas", - "lineNumber": 166, + "lineNumber": 151, "line": "" }, { "component": "Tooltip", - "lineNumber": 174, + "lineNumber": 159, "line": "" } ] @@ -192,13 +192,13 @@ "line": "" }, { - "component": "Spline", + "component": "Vector", "lineNumber": 83, - "line": "" } ] @@ -257,32 +257,32 @@ }, { "component": "Layer", - "lineNumber": 102, + "lineNumber": 101, "line": "" }, { "component": "GeoPath", - "lineNumber": 103, + "lineNumber": 102, "line": "" }, { "component": "ClipPath", - "lineNumber": 106, + "lineNumber": 105, "line": "" }, { "component": "Blur", - "lineNumber": 130, + "lineNumber": 126, "line": "" }, { "component": "GeoCircle", - "lineNumber": 131, - "line": "" }, { "component": "Tooltip", - "lineNumber": 140, + "lineNumber": 133, "line": "" } ] @@ -331,21 +331,97 @@ }, { "component": "Layer", - "lineNumber": 64, + "lineNumber": 65, "line": "" }, { "component": "GeoPath", - "lineNumber": 66, + "lineNumber": 67, "line": "" } ] }, + { + "name": "transform-canvas-scale-extent", + "title": "transform canvas scale extent", + "path": "/docs/components/GeoPath/transform-canvas-scale-extent", + "components": [ + { + "component": "Chart", + "lineNumber": 18, + "line": "" + }, + { + "component": "GeoPath", + "lineNumber": 36, + "line": "" + }, + { + "component": "GeoPath", + "lineNumber": 36, + "line": "" + }, + { + "component": "Graticule", + "lineNumber": 37, + "line": "" + } + ] + }, + { + "name": "transform-globe-inertia", + "title": "transform globe inertia", + "path": "/docs/components/GeoPath/transform-globe-inertia", + "components": [ + { + "component": "Chart", + "lineNumber": 28, + "line": "" + }, + { + "component": "GeoPath", + "lineNumber": 50, + "line": "" + }, + { + "component": "Graticule", + "lineNumber": 51, + "line": "" + } + ] + }, { "name": "transform-projection", "title": "transform projection", @@ -356,6 +432,33 @@ "lineNumber": 49, "line": "" + }, + { + "component": "GeoPath", + "lineNumber": 68, + "line": "" + } + ] + }, + { + "name": "transform-world-canvas", + "title": "transform world canvas", + "path": "/docs/components/GeoPath/transform-world-canvas", + "components": [ + { + "component": "Chart", + "lineNumber": 48, + "line": "" + }, + { + "component": "Graticule", "lineNumber": 67, - "line": "" }, { "component": "Tooltip", - "lineNumber": 120, + "lineNumber": 116, + "line": "" + } + ] + }, + { + "name": "transform-world-projection", + "title": "transform world projection", + "path": "/docs/components/GeoPath/transform-world-projection", + "components": [ + { + "component": "Chart", + "lineNumber": 63, + "line": "" + }, + { + "component": "GeoPath", + "lineNumber": 81, + "line": "" + }, + { + "component": "Graticule", + "lineNumber": 82, + "line": "" + }, + { + "component": "Tooltip", + "lineNumber": 134, "line": "" } ] @@ -394,9 +534,9 @@ "line": "" }, { - "component": "GeoContext", + "component": "GeoProjection", "lineNumber": 62, - "line": "" + }, + { + "example": "walmart", + "component": "Density", + "path": "/docs/components/Density/walmart", + "lineNumber": 46, + "line": "" + }, { "example": "earthquake-globe", "component": "GeoCircle", @@ -594,21 +748,21 @@ "example": "animated-globe", "component": "GeoPath", "path": "/docs/components/GeoPath/animated-globe", - "lineNumber": 147, + "lineNumber": 132, "line": "" }, { "example": "animated-globe", "component": "GeoPath", "path": "/docs/components/GeoPath/animated-globe", - "lineNumber": 151, + "lineNumber": 136, "line": "" }, { @@ -713,14 +867,14 @@ "example": "spike-map", "component": "GeoPath", "path": "/docs/components/GeoPath/spike-map", - "lineNumber": 93, + "lineNumber": 97, "line": "" }, { "example": "timezones", "component": "GeoPath", "path": "/docs/components/GeoPath/timezones", - "lineNumber": 105, + "lineNumber": 104, "line": "" }, { "example": "timezones", "component": "GeoPath", "path": "/docs/components/GeoPath/timezones", - "lineNumber": 108, + "lineNumber": 107, "line": "" }, { "example": "timezones", "component": "GeoPath", "path": "/docs/components/GeoPath/timezones", - "lineNumber": 125, + "lineNumber": 121, "line": "" }, { @@ -804,42 +958,119 @@ "example": "transform-canvas", "component": "GeoPath", "path": "/docs/components/GeoPath/transform-canvas", - "lineNumber": 66, + "lineNumber": 67, "line": "" + }, + { + "example": "transform-globe-constrain", + "component": "GeoPath", + "path": "/docs/components/GeoPath/transform-globe-constrain", + "lineNumber": 39, + "line": "" + }, + { + "example": "transform-globe-inertia", + "component": "GeoPath", + "path": "/docs/components/GeoPath/transform-globe-inertia", + "lineNumber": 50, + "line": "" + }, + { + "example": "transform-globe-inertia", + "component": "GeoPath", + "path": "/docs/components/GeoPath/transform-globe-inertia", + "lineNumber": 53, + "line": "" + }, { "example": "transform-projection", "component": "GeoPath", "path": "/docs/components/GeoPath/transform-projection", - "lineNumber": 67, + "lineNumber": 68, "line": "" + }, + { + "example": "transform-world-canvas", + "component": "GeoPath", + "path": "/docs/components/GeoPath/transform-world-canvas", + "lineNumber": 70, + "line": "" + }, + { + "example": "transform-world-projection", + "component": "GeoPath", + "path": "/docs/components/GeoPath/transform-world-projection", + "lineNumber": 85, + "line": "" + }, + { + "example": "projection-playground", + "component": "GeoProjection", + "path": "/docs/components/GeoProjection/projection-playground", + "lineNumber": 76, + "line": "" + }, + { + "example": "satellite", + "component": "GeoProjection", + "path": "/docs/components/GeoProjection/satellite", + "lineNumber": 55, + "line": "" + }, + { + "example": "shapefile-preview", + "component": "GeoProjection", + "path": "/docs/components/GeoProjection/shapefile-preview", + "lineNumber": 110, + "line": "" + }, + { + "example": "topojson-preview", + "component": "GeoProjection", + "path": "/docs/components/GeoProjection/topojson-preview", + "lineNumber": 123, + "line": "" + }, + { + "example": "college-football-map", + "component": "Image", + "path": "/docs/components/Image/college-football-map", + "lineNumber": 77, + "line": "" + }, + { + "example": "geo-routes", + "component": "Spline", + "path": "/docs/components/Spline/geo-routes", + "lineNumber": 30, + "line": "" + }, + { + "example": "election-wind-map", + "component": "Vector", + "path": "/docs/components/Vector/election-wind-map", + "lineNumber": 85, + "line": "" + }, + { + "example": "election-wind-map", + "component": "Vector", + "path": "/docs/components/Vector/election-wind-map", + "lineNumber": 103, + "line": "" }, { "component": "Tooltip", - "lineNumber": 69, + "lineNumber": 63, "line": "" } ] @@ -133,13 +133,13 @@ "line": "" }, { - "component": "GeoPoint", - "lineNumber": 44, - "line": "" }, { "component": "Tooltip", - "lineNumber": 66, + "lineNumber": 60, "line": "" } ] @@ -197,20 +197,6 @@ "lineNumber": 37, "line": "" }, - { - "example": "us-airports", - "component": "GeoPoint", - "path": "/docs/components/GeoPoint/us-airports", - "lineNumber": 47, - "line": "" }, - { - "example": "world-airports", - "component": "GeoPoint", - "path": "/docs/components/GeoPoint/world-airports", - "lineNumber": 44, - "line": "" } ], - "updatedAt": "2026-02-07T20:21:31.756Z" + "updatedAt": "2026-03-22T12:54:32.896Z" } \ No newline at end of file diff --git a/docs/src/examples/catalog/GeoProjection.json b/docs/src/examples/catalog/GeoProjection.json new file mode 100644 index 000000000..c373a6b8a --- /dev/null +++ b/docs/src/examples/catalog/GeoProjection.json @@ -0,0 +1,160 @@ +{ + "component": "GeoProjection", + "examples": [ + { + "name": "geojson-preview", + "title": "geojson preview", + "path": "/docs/components/GeoProjection/geojson-preview", + "components": [ + { + "component": "Chart", + "lineNumber": 89, + "line": "" + }, + { + "component": "GeoTile", + "lineNumber": 104, + "line": "" + }, + { + "component": "GeoPath", + "lineNumber": 116, + "line": "" + } + ] + }, + { + "name": "projection-playground", + "title": "projection playground", + "path": "/docs/components/GeoProjection/projection-playground", + "components": [ + { + "component": "Chart", + "lineNumber": 61, + "line": "" + }, + { + "component": "GeoPath", + "lineNumber": 73, + "line": "" + }, + { + "component": "Graticule", + "lineNumber": 74, + "line": "" + }, + { + "component": "Tooltip", + "lineNumber": 84, + "line": "" + } + ] + }, + { + "name": "satellite", + "title": "satellite", + "path": "/docs/components/GeoProjection/satellite", + "components": [ + { + "component": "Chart", + "lineNumber": 46, + "line": "" + }, + { + "component": "GeoPath", + "lineNumber": 53, + "line": "" + }, + { + "component": "Graticule", + "lineNumber": 54, + "line": "" + } + ] + }, + { + "name": "shapefile-preview", + "title": "shapefile preview", + "path": "/docs/components/GeoProjection/shapefile-preview", + "components": [ + { + "component": "Chart", + "lineNumber": 103, + "line": "" + }, + { + "component": "GeoPath", + "lineNumber": 110, + "line": "" + } + ] + }, + { + "name": "topojson-preview", + "title": "topojson preview", + "path": "/docs/components/GeoProjection/topojson-preview", + "components": [ + { + "component": "Chart", + "lineNumber": 97, + "line": "" + }, + { + "component": "GeoTile", + "lineNumber": 111, + "line": "" + }, + { + "component": "GeoPath", + "lineNumber": 123, + "line": "" + } + ] + } + ], + "usage": [ + { + "example": "translucent-globe", + "component": "GeoPath", + "path": "/docs/components/GeoPath/translucent-globe", + "lineNumber": 62, + "line": "" - }, { "component": "Layer", "lineNumber": 65, @@ -114,27 +109,27 @@ "components": [ { "component": "Chart", - "lineNumber": 44, + "lineNumber": 45, "line": "" }, { "component": "GeoTile", - "lineNumber": 67, + "lineNumber": 70, "line": "" }, { "component": "GeoPath", - "lineNumber": 73, + "lineNumber": 76, "line": "" } ] @@ -149,11 +144,6 @@ "lineNumber": 44, "line": "" - }, { "component": "Layer", "lineNumber": 71, @@ -234,6 +224,62 @@ "lineNumber": 115, "line": "" }, + { + "example": "geojson-preview", + "component": "GeoProjection", + "path": "/docs/components/GeoProjection/geojson-preview", + "lineNumber": 104, + "line": "" + }, + { + "example": "geojson-preview", + "component": "GeoProjection", + "path": "/docs/components/GeoProjection/geojson-preview", + "lineNumber": 105, + "line": "" + }, + { + "example": "geojson-preview", + "component": "GeoProjection", + "path": "/docs/components/GeoProjection/geojson-preview", + "lineNumber": 106, + "line": "" + }, + { + "example": "geojson-preview", + "component": "GeoProjection", + "path": "/docs/components/GeoProjection/geojson-preview", + "lineNumber": 107, + "line": "" + }, + { + "example": "topojson-preview", + "component": "GeoProjection", + "path": "/docs/components/GeoProjection/topojson-preview", + "lineNumber": 111, + "line": "" + }, + { + "example": "topojson-preview", + "component": "GeoProjection", + "path": "/docs/components/GeoProjection/topojson-preview", + "lineNumber": 112, + "line": "" + }, + { + "example": "topojson-preview", + "component": "GeoProjection", + "path": "/docs/components/GeoProjection/topojson-preview", + "lineNumber": 113, + "line": "" + }, + { + "example": "topojson-preview", + "component": "GeoProjection", + "path": "/docs/components/GeoProjection/topojson-preview", + "lineNumber": 114, + "line": "" + }, { "example": "basic", "component": "GeoTile", @@ -259,28 +305,28 @@ "example": "zoomable-seamless-layers", "component": "GeoTile", "path": "/docs/components/GeoTile/zoomable-seamless-layers", - "lineNumber": 67, + "lineNumber": 70, "line": "" }, { "example": "zoomable-seamless-layers", "component": "GeoTile", "path": "/docs/components/GeoTile/zoomable-seamless-layers", - "lineNumber": 68, + "lineNumber": 71, "line": "" }, { "example": "zoomable-seamless-layers", "component": "GeoTile", "path": "/docs/components/GeoTile/zoomable-seamless-layers", - "lineNumber": 69, + "lineNumber": 72, "line": "" }, { "example": "zoomable-seamless-layers", "component": "GeoTile", "path": "/docs/components/GeoTile/zoomable-seamless-layers", - "lineNumber": 70, + "lineNumber": 73, "line": "" }, { @@ -291,5 +337,5 @@ "line": "" } ], - "updatedAt": "2026-02-07T20:21:31.787Z" + "updatedAt": "2026-03-12T03:09:22.372Z" } \ No newline at end of file diff --git a/docs/src/examples/catalog/Graticule.json b/docs/src/examples/catalog/Graticule.json index 6dbb774d6..8acd058e0 100644 --- a/docs/src/examples/catalog/Graticule.json +++ b/docs/src/examples/catalog/Graticule.json @@ -60,7 +60,7 @@ "example": "animated-globe", "component": "GeoPath", "path": "/docs/components/GeoPath/animated-globe", - "lineNumber": 148, + "lineNumber": 133, "line": "" }, { @@ -84,6 +84,34 @@ "lineNumber": 70, "line": "" }, + { + "example": "transform-globe-constrain", + "component": "GeoPath", + "path": "/docs/components/GeoPath/transform-globe-constrain", + "lineNumber": 37, + "line": "" + }, + { + "example": "transform-globe-inertia", + "component": "GeoPath", + "path": "/docs/components/GeoPath/transform-globe-inertia", + "lineNumber": 51, + "line": "" + }, + { + "example": "transform-world-canvas", + "component": "GeoPath", + "path": "/docs/components/GeoPath/transform-world-canvas", + "lineNumber": 67, + "line": "" + }, + { + "example": "transform-world-projection", + "component": "GeoPath", + "path": "/docs/components/GeoPath/transform-world-projection", + "lineNumber": 82, + "line": "" + }, { "example": "translucent-globe", "component": "GeoPath", @@ -98,6 +126,20 @@ "lineNumber": 75, "line": "" }, + { + "example": "projection-playground", + "component": "GeoProjection", + "path": "/docs/components/GeoProjection/projection-playground", + "lineNumber": 74, + "line": "" + }, + { + "example": "satellite", + "component": "GeoProjection", + "path": "/docs/components/GeoProjection/satellite", + "lineNumber": 54, + "line": "" + }, { "example": "draggable-globe", "component": "GeoSpline", @@ -118,7 +160,14 @@ "path": "/docs/components/Graticule/basic", "lineNumber": 61, "line": "" } ], - "updatedAt": "2026-02-08T17:35:30.583Z" + "updatedAt": "2026-03-26T19:56:43.290Z" } \ No newline at end of file diff --git a/docs/src/examples/catalog/Grid.json b/docs/src/examples/catalog/Grid.json index 2bab11dda..c199aa5f4 100644 --- a/docs/src/examples/catalog/Grid.json +++ b/docs/src/examples/catalog/Grid.json @@ -380,6 +380,13 @@ "lineNumber": 17, "line": "" }, + { + "example": "punchcard", + "component": "Cell", + "path": "/docs/components/Cell/punchcard", + "lineNumber": 29, + "line": "" + }, { "example": "band-scale-between", "component": "Grid", @@ -486,5 +493,5 @@ "line": "" } ], - "updatedAt": "2026-02-07T20:21:31.830Z" + "updatedAt": "2026-03-18T04:40:48.471Z" } \ No newline at end of file diff --git a/docs/src/examples/catalog/Group.json b/docs/src/examples/catalog/Group.json index 1a767390a..ef7aa2f76 100644 --- a/docs/src/examples/catalog/Group.json +++ b/docs/src/examples/catalog/Group.json @@ -37,6 +37,43 @@ "line": "" } ] + }, + { + "name": "data-mode", + "title": "data mode", + "path": "/docs/components/Group/data-mode", + "components": [ + { + "component": "Chart", + "lineNumber": 14, + "line": "" + }, + { + "component": "Layer", + "lineNumber": 15, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 16, + "line": "" + }, + { + "component": "Group", + "lineNumber": 18, + "line": "" + }, + { + "component": "Circle", + "lineNumber": 19, + "line": "" + }, + { + "component": "Text", + "lineNumber": 20, + "line": "" + } + ] } ], "usage": [ @@ -54,13 +91,62 @@ "lineNumber": 9, "line": "" }, + { + "example": "oscilloscope-ridgeline", + "component": "Area", + "path": "/docs/components/Area/oscilloscope-ridgeline", + "lineNumber": 150, + "line": "" + }, + { + "example": "ridgeline", + "component": "Area", + "path": "/docs/components/Area/ridgeline", + "lineNumber": 81, + "line": "" + }, + { + "example": "ridgeline-kde", + "component": "Area", + "path": "/docs/components/Area/ridgeline-kde", + "lineNumber": 171, + "line": "" + }, { "example": "multiple-years", "component": "Calendar", "path": "/docs/components/Calendar/multiple-years", - "lineNumber": 40, + "lineNumber": 39, "line": "" }, + { + "example": "basic", + "component": "Chord", + "path": "/docs/components/Chord/basic", + "lineNumber": 45, + "line": "" }, + { + "example": "data-mode", + "component": "Group", + "path": "/docs/components/Group/data-mode", + "lineNumber": 18, + "line": "" + }, { "example": "basic", "component": "Pack", @@ -184,7 +277,7 @@ "example": "hierarchy", "component": "Sankey", "path": "/docs/components/Sankey/hierarchy", - "lineNumber": 100, + "lineNumber": 99, "line": "" }, { @@ -265,5 +358,5 @@ "line": "" }, { @@ -317,6 +317,20 @@ "lineNumber": 30, "line": "" }, + { + "example": "with-tooltip", + "component": "BoxPlot", + "path": "/docs/components/BoxPlot/with-tooltip", + "lineNumber": 57, + "line": "" + }, + { + "example": "with-violin", + "component": "BoxPlot", + "path": "/docs/components/BoxPlot/with-violin", + "lineNumber": 92, + "line": "" + }, { "example": "tooltip-interop", "component": "BrushContext", @@ -359,13 +373,6 @@ "lineNumber": 24, "line": "" }, - { - "example": "gradient-encoding", - "component": "LineChart", - "path": "/docs/components/LineChart/gradient-encoding", - "lineNumber": 28, - "line": "" - }, { "example": "gradient-threshold", "component": "LineChart", @@ -384,7 +391,7 @@ "example": "series-individual-tooltip", "component": "LineChart", "path": "/docs/components/LineChart/series-individual-tooltip", - "lineNumber": 55, + "lineNumber": 57, "line": "" }, { @@ -638,7 +645,14 @@ "path": "/docs/components/Tooltip/stacked-area", "lineNumber": 71, "line": "" } ], - "updatedAt": "2026-02-07T17:00:31.844Z" + "updatedAt": "2026-03-28T15:21:52.793Z" } \ No newline at end of file diff --git a/docs/src/examples/catalog/Image.json b/docs/src/examples/catalog/Image.json new file mode 100644 index 000000000..f0349ee63 --- /dev/null +++ b/docs/src/examples/catalog/Image.json @@ -0,0 +1,238 @@ +{ + "component": "Image", + "examples": [ + { + "name": "college-football-map", + "title": "college football map", + "path": "/docs/components/Image/college-football-map", + "components": [ + { + "component": "Chart", + "lineNumber": 41, + "line": "" + }, + { + "component": "Circle", + "lineNumber": 63, + "line": "" + } + ] + }, + { + "name": "country-flags", + "title": "country flags", + "path": "/docs/components/Image/country-flags", + "components": [ + { + "component": "Chart", + "lineNumber": 18, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 27, + "line": "" + }, + { + "component": "Image", + "lineNumber": 29, + "line": "" + }, + { + "component": "Layer", + "lineNumber": 6, + "line": "" + }, + { + "component": "Image", + "lineNumber": 7, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 65, + "line": "" + }, + { + "component": "Image", + "lineNumber": 66, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 78, + "line": "" + }, + { + "component": "Image", + "lineNumber": 80, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 73, + "line": "" + }, + { + "component": "Image", + "lineNumber": 75, + "line": "" + }, + { + "example": "scroll-activation-key", + "component": "TransformContext", + "path": "/docs/components/TransformContext/scroll-activation-key", + "lineNumber": 22, + "line": "" + "lineNumber": 34, + "line": "" }, { "example": "with-labels", @@ -80,5 +80,5 @@ "line": "" } ], - "updatedAt": "2026-02-07T17:00:31.937Z" + "updatedAt": "2026-03-23T11:14:13.366Z" } \ No newline at end of file diff --git a/docs/src/examples/catalog/Layer.json b/docs/src/examples/catalog/Layer.json index 3ee11af4a..124af5df2 100644 --- a/docs/src/examples/catalog/Layer.json +++ b/docs/src/examples/catalog/Layer.json @@ -212,6 +212,13 @@ "lineNumber": 41, "line": "" }, + { + "example": "oscilloscope-ridgeline", + "component": "Area", + "path": "/docs/components/Area/oscilloscope-ridgeline", + "lineNumber": 147, + "line": "" + }, { "example": "playground", "component": "Area", @@ -219,6 +226,20 @@ "lineNumber": 34, "line": "" }, + { + "example": "ridgeline", + "component": "Area", + "path": "/docs/components/Area/ridgeline", + "lineNumber": 78, + "line": "" + }, + { + "example": "ridgeline-kde", + "component": "Area", + "path": "/docs/components/Area/ridgeline-kde", + "lineNumber": 168, + "line": "" + }, { "example": "stack", "component": "Area", @@ -261,6 +282,13 @@ "lineNumber": 17, "line": "" }, + { + "example": "tween-on-mount", + "component": "Area", + "path": "/docs/components/Area/tween-on-mount", + "lineNumber": 14, + "line": "" + }, { "example": "with-labels", "component": "Area", @@ -545,7 +573,7 @@ "example": "time-scale-brush", "component": "Axis", "path": "/docs/components/Axis/time-scale-brush", - "lineNumber": 47, + "lineNumber": 46, "line": "" }, { @@ -559,7 +587,7 @@ "example": "time-scale-brush-multiline", "component": "Axis", "path": "/docs/components/Axis/time-scale-brush-multiline", - "lineNumber": 47, + "lineNumber": 46, "line": "" }, { @@ -856,6 +884,13 @@ "lineNumber": 24, "line": "" }, + { + "example": "vertical-fixed-width", + "component": "Bars", + "path": "/docs/components/Bars/vertical-fixed-width", + "lineNumber": 24, + "line": "" + }, { "example": "vertical-gradient", "component": "Bars", @@ -1066,6 +1101,48 @@ "lineNumber": 23, "line": "" }, + { + "example": "basic", + "component": "BoxPlot", + "path": "/docs/components/BoxPlot/basic", + "lineNumber": 36, + "line": "" + }, + { + "example": "horizontal", + "component": "BoxPlot", + "path": "/docs/components/BoxPlot/horizontal", + "lineNumber": 37, + "line": "" + }, + { + "example": "pre-computed", + "component": "BoxPlot", + "path": "/docs/components/BoxPlot/pre-computed", + "lineNumber": 37, + "line": "" + }, + { + "example": "styled", + "component": "BoxPlot", + "path": "/docs/components/BoxPlot/styled", + "lineNumber": 45, + "line": "" + }, + { + "example": "with-tooltip", + "component": "BoxPlot", + "path": "/docs/components/BoxPlot/with-tooltip", + "lineNumber": 43, + "line": "" + }, + { + "example": "with-violin", + "component": "BoxPlot", + "path": "/docs/components/BoxPlot/with-violin", + "lineNumber": 61, + "line": "" + }, { "example": "basic", "component": "BrushContext", @@ -1119,14 +1196,21 @@ "example": "minimap", "component": "BrushContext", "path": "/docs/components/BrushContext/minimap", - "lineNumber": 43, + "lineNumber": 54, "line": "" }, { "example": "minimap", "component": "BrushContext", "path": "/docs/components/BrushContext/minimap", - "lineNumber": 70, + "lineNumber": 82, + "line": "" + }, + { + "example": "programmatic-control", + "component": "BrushContext", + "path": "/docs/components/BrushContext/programmatic-control", + "lineNumber": 49, "line": "" }, { @@ -1193,17 +1277,17 @@ "line": "" }, { - "example": "sync-brushes-with-bind-xdomain", + "example": "synced-brushes", "component": "BrushContext", - "path": "/docs/components/BrushContext/sync-brushes-with-bind-xdomain", + "path": "/docs/components/BrushContext/synced-brushes", "lineNumber": 64, "line": "" }, { - "example": "sync-brushes-with-bind-xdomain", + "example": "synced-brushes", "component": "BrushContext", - "path": "/docs/components/BrushContext/sync-brushes-with-bind-xdomain", - "lineNumber": 94, + "path": "/docs/components/BrushContext/synced-brushes", + "lineNumber": 92, "line": "" }, { @@ -1217,7 +1301,7 @@ "example": "90-days", "component": "Calendar", "path": "/docs/components/Calendar/90-days", - "lineNumber": 38, + "lineNumber": 37, "line": "" }, { @@ -1231,7 +1315,7 @@ "example": "fixed-cell-size", "component": "Calendar", "path": "/docs/components/Calendar/fixed-cell-size", - "lineNumber": 40, + "lineNumber": 39, "line": "" }, { @@ -1245,21 +1329,21 @@ "example": "last-month", "component": "Calendar", "path": "/docs/components/Calendar/last-month", - "lineNumber": 40, + "lineNumber": 39, "line": "" }, { "example": "multiple-years", "component": "Calendar", "path": "/docs/components/Calendar/multiple-years", - "lineNumber": 36, + "lineNumber": 35, "line": "" }, { "example": "responsive-cell-size-default", "component": "Calendar", "path": "/docs/components/Calendar/responsive-cell-size-default", - "lineNumber": 40, + "lineNumber": 39, "line": "" }, { @@ -1269,6 +1353,41 @@ "lineNumber": 40, "line": "" }, + { + "example": "basic", + "component": "Cell", + "path": "/docs/components/Cell/basic", + "lineNumber": 41, + "line": "" + }, + { + "example": "circle", + "component": "Cell", + "path": "/docs/components/Cell/circle", + "lineNumber": 39, + "line": "" + }, + { + "example": "color-scale", + "component": "Cell", + "path": "/docs/components/Cell/color-scale", + "lineNumber": 39, + "line": "" + }, + { + "example": "punchcard", + "component": "Cell", + "path": "/docs/components/Cell/punchcard", + "lineNumber": 26, + "line": "" + }, + { + "example": "rounded-insets", + "component": "Cell", + "path": "/docs/components/Cell/rounded-insets", + "lineNumber": 39, + "line": "" + }, { "example": "compound-dual-axis-with-single-chart-using-remapped-scale", "component": "Chart", @@ -1290,6 +1409,62 @@ "lineNumber": 43, "line": "" }, + { + "example": "basic", + "component": "Chord", + "path": "/docs/components/Chord/basic", + "lineNumber": 23, + "line": "" + }, + { + "example": "directed", + "component": "Chord", + "path": "/docs/components/Chord/directed", + "lineNumber": 22, + "line": "" + }, + { + "example": "gradient", + "component": "Chord", + "path": "/docs/components/Chord/gradient", + "lineNumber": 72, + "line": "" + }, + { + "example": "hover", + "component": "Chord", + "path": "/docs/components/Chord/hover", + "lineNumber": 53, + "line": "" + }, + { + "example": "ticks", + "component": "Chord", + "path": "/docs/components/Chord/ticks", + "lineNumber": 37, + "line": "" + }, + { + "example": "color-via-ordinal-scale", + "component": "Circle", + "path": "/docs/components/Circle/color-via-ordinal-scale", + "lineNumber": 26, + "line": "" + }, + { + "example": "color-via-threshold-scale", + "component": "Circle", + "path": "/docs/components/Circle/color-via-threshold-scale", + "lineNumber": 29, + "line": "" + }, + { + "example": "data-mode", + "component": "Circle", + "path": "/docs/components/Circle/data-mode", + "lineNumber": 17, + "line": "" + }, { "example": "styling-using-attributes", "component": "Circle", @@ -1318,6 +1493,41 @@ "lineNumber": 22, "line": "" }, + { + "example": "sampled", + "component": "Contour", + "path": "/docs/components/Contour/sampled", + "lineNumber": 14, + "line": "" + }, + { + "example": "sampled-interactive", + "component": "Contour", + "path": "/docs/components/Contour/sampled-interactive", + "lineNumber": 23, + "line": "" + }, + { + "example": "volcano-filled", + "component": "Contour", + "path": "/docs/components/Contour/volcano-filled", + "lineNumber": 12, + "line": "" + }, + { + "example": "volcano-filled-interactive", + "component": "Contour", + "path": "/docs/components/Contour/volcano-filled-interactive", + "lineNumber": 21, + "line": "" + }, + { + "example": "volcano-lines", + "component": "Contour", + "path": "/docs/components/Contour/volcano-lines", + "lineNumber": 10, + "line": "" + }, { "example": "basic", "component": "Dagre", @@ -1346,6 +1556,76 @@ "lineNumber": 47, "line": "" }, + { + "example": "bandwidth", + "component": "Density", + "path": "/docs/components/Density/bandwidth", + "lineNumber": 27, + "line": "" + }, + { + "example": "basic", + "component": "Density", + "path": "/docs/components/Density/basic", + "lineNumber": 20, + "line": "" + }, + { + "example": "stroke-only", + "component": "Density", + "path": "/docs/components/Density/stroke-only", + "lineNumber": 20, + "line": "" + }, + { + "example": "thresholds", + "component": "Density", + "path": "/docs/components/Density/thresholds", + "lineNumber": 27, + "line": "" + }, + { + "example": "walmart", + "component": "Density", + "path": "/docs/components/Density/walmart", + "lineNumber": 43, + "line": "" + }, + { + "example": "walmart", + "component": "Density", + "path": "/docs/components/Density/walmart", + "lineNumber": 50, + "line": "" + }, + { + "example": "weighted", + "component": "Density", + "path": "/docs/components/Density/weighted", + "lineNumber": 27, + "line": "" + }, + { + "example": "color-via-ordinal-scale", + "component": "Ellipse", + "path": "/docs/components/Ellipse/color-via-ordinal-scale", + "lineNumber": 26, + "line": "" + }, + { + "example": "color-via-threshold-scale", + "component": "Ellipse", + "path": "/docs/components/Ellipse/color-via-threshold-scale", + "lineNumber": 29, + "line": "" + }, + { + "example": "data-mode", + "component": "Ellipse", + "path": "/docs/components/Ellipse/data-mode", + "lineNumber": 17, + "line": "" + }, { "example": "styling-using-attributes", "component": "Ellipse", @@ -1518,14 +1798,14 @@ "example": "animated-globe", "component": "GeoPath", "path": "/docs/components/GeoPath/animated-globe", - "lineNumber": 146, + "lineNumber": 131, "line": "" }, { "example": "animated-globe", "component": "GeoPath", "path": "/docs/components/GeoPath/animated-globe", - "lineNumber": 167, + "lineNumber": 152, "line": "" }, { @@ -1581,7 +1861,7 @@ "example": "spike-map", "component": "GeoPath", "path": "/docs/components/GeoPath/spike-map", - "lineNumber": 103, + "lineNumber": 107, "line": "" }, { @@ -1595,7 +1875,7 @@ "example": "timezones", "component": "GeoPath", "path": "/docs/components/GeoPath/timezones", - "lineNumber": 102, + "lineNumber": 101, "line": "" }, { @@ -1616,28 +1896,77 @@ "example": "transform-canvas", "component": "GeoPath", "path": "/docs/components/GeoPath/transform-canvas", - "lineNumber": 64, + "lineNumber": 65, "line": "" }, { "example": "transform-canvas", "component": "GeoPath", "path": "/docs/components/GeoPath/transform-canvas", - "lineNumber": 112, + "lineNumber": 113, "line": "" }, + { + "example": "transform-canvas-scale-extent", + "component": "GeoPath", + "path": "/docs/components/GeoPath/transform-canvas-scale-extent", + "lineNumber": 34, + "line": "" + }, + { + "example": "transform-globe-constrain", + "component": "GeoPath", + "path": "/docs/components/GeoPath/transform-globe-constrain", + "lineNumber": 35, + "line": "" + }, + { + "example": "transform-globe-inertia", + "component": "GeoPath", + "path": "/docs/components/GeoPath/transform-globe-inertia", + "lineNumber": 49, + "line": "" + }, { "example": "transform-projection", "component": "GeoPath", "path": "/docs/components/GeoPath/transform-projection", - "lineNumber": 65, + "lineNumber": 66, "line": "" }, { "example": "transform-projection", "component": "GeoPath", "path": "/docs/components/GeoPath/transform-projection", - "lineNumber": 110, + "lineNumber": 111, + "line": "" + }, + { + "example": "transform-world-canvas", + "component": "GeoPath", + "path": "/docs/components/GeoPath/transform-world-canvas", + "lineNumber": 65, + "line": "" + }, + { + "example": "transform-world-canvas", + "component": "GeoPath", + "path": "/docs/components/GeoPath/transform-world-canvas", + "lineNumber": 106, + "line": "" + }, + { + "example": "transform-world-projection", + "component": "GeoPath", + "path": "/docs/components/GeoPath/transform-world-projection", + "lineNumber": 80, + "line": "" + }, + { + "example": "transform-world-projection", + "component": "GeoPath", + "path": "/docs/components/GeoPath/transform-world-projection", + "lineNumber": 125, "line": "" }, { @@ -1693,7 +2022,7 @@ "example": "us-airports", "component": "GeoPoint", "path": "/docs/components/GeoPoint/us-airports", - "lineNumber": 57, + "lineNumber": 50, "line": "" }, { @@ -1714,7 +2043,7 @@ "example": "world-airports", "component": "GeoPoint", "path": "/docs/components/GeoPoint/world-airports", - "lineNumber": 54, + "lineNumber": 47, "line": "" }, { @@ -1731,6 +2060,55 @@ "lineNumber": 58, "line": "" }, + { + "example": "geojson-preview", + "component": "GeoProjection", + "path": "/docs/components/GeoProjection/geojson-preview", + "lineNumber": 102, + "line": "" + }, + { + "example": "geojson-preview", + "component": "GeoProjection", + "path": "/docs/components/GeoProjection/geojson-preview", + "lineNumber": 113, + "line": "" + }, + { + "example": "projection-playground", + "component": "GeoProjection", + "path": "/docs/components/GeoProjection/projection-playground", + "lineNumber": 72, + "line": "" + }, + { + "example": "satellite", + "component": "GeoProjection", + "path": "/docs/components/GeoProjection/satellite", + "lineNumber": 52, + "line": "" + }, + { + "example": "shapefile-preview", + "component": "GeoProjection", + "path": "/docs/components/GeoProjection/shapefile-preview", + "lineNumber": 109, + "line": "" + }, + { + "example": "topojson-preview", + "component": "GeoProjection", + "path": "/docs/components/GeoProjection/topojson-preview", + "lineNumber": 109, + "line": "" + }, + { + "example": "topojson-preview", + "component": "GeoProjection", + "path": "/docs/components/GeoProjection/topojson-preview", + "lineNumber": 120, + "line": "" + }, { "example": "draggable-globe", "component": "GeoSpline", @@ -1770,7 +2148,7 @@ "example": "zoomable-seamless-layers", "component": "GeoTile", "path": "/docs/components/GeoTile/zoomable-seamless-layers", - "lineNumber": 65, + "lineNumber": 68, "line": "" }, { @@ -1899,6 +2277,13 @@ "lineNumber": 6, "line": "" }, + { + "example": "data-mode", + "component": "Group", + "path": "/docs/components/Group/data-mode", + "lineNumber": 15, + "line": "" + }, { "example": "geo", "component": "Hull", @@ -1913,6 +2298,55 @@ "lineNumber": 35, "line": "" }, + { + "example": "college-football-map", + "component": "Image", + "path": "/docs/components/Image/college-football-map", + "lineNumber": 61, + "line": "" + }, + { + "example": "college-football-map", + "component": "Image", + "path": "/docs/components/Image/college-football-map", + "lineNumber": 75, + "line": "" + }, + { + "example": "country-flags", + "component": "Image", + "path": "/docs/components/Image/country-flags", + "lineNumber": 26, + "line": "" + }, + { + "example": "pixel-mode", + "component": "Image", + "path": "/docs/components/Image/pixel-mode", + "lineNumber": 6, + "line": "" + }, + { + "example": "planets", + "component": "Image", + "path": "/docs/components/Image/planets", + "lineNumber": 64, + "line": "" + }, + { + "example": "sports-logos", + "component": "Image", + "path": "/docs/components/Image/sports-logos", + "lineNumber": 77, + "line": "" + }, + { + "example": "us-presidents", + "component": "Image", + "path": "/docs/components/Image/us-presidents", + "lineNumber": 72, + "line": "" + }, { "example": "all-3-layers", "component": "Layer", @@ -1934,6 +2368,27 @@ "lineNumber": 22, "line": "" }, + { + "example": "color-via-ordinal-scale", + "component": "Line", + "path": "/docs/components/Line/color-via-ordinal-scale", + "lineNumber": 27, + "line": "" + }, + { + "example": "color-via-threshold-scale", + "component": "Line", + "path": "/docs/components/Line/color-via-threshold-scale", + "lineNumber": 29, + "line": "" + }, + { + "example": "data-mode", + "component": "Line", + "path": "/docs/components/Line/data-mode", + "lineNumber": 17, + "line": "" + }, { "example": "styling-using-attributes", "component": "Line", @@ -1990,6 +2445,13 @@ "lineNumber": 20, "line": "" }, + { + "example": "pan-zoom-with-overview", + "component": "LineChart", + "path": "/docs/components/LineChart/pan-zoom-with-overview", + "lineNumber": 50, + "line": "" + }, { "example": "line", "component": "Marker", @@ -2316,7 +2778,7 @@ "example": "tooltip", "component": "Pie", "path": "/docs/components/Pie/tooltip", - "lineNumber": 21, + "lineNumber": 20, "line": "" }, { @@ -2452,6 +2914,20 @@ "lineNumber": 15, "line": "" }, + { + "example": "color-via-ordinal-scale", + "component": "Polygon", + "path": "/docs/components/Polygon/color-via-ordinal-scale", + "lineNumber": 24, + "line": "" + }, + { + "example": "color-via-threshold-scale", + "component": "Polygon", + "path": "/docs/components/Polygon/color-via-threshold-scale", + "lineNumber": 27, + "line": "" + }, { "example": "cross", "component": "Polygon", @@ -2459,6 +2935,13 @@ "lineNumber": 15, "line": "" }, + { + "example": "data-mode", + "component": "Polygon", + "path": "/docs/components/Polygon/data-mode", + "lineNumber": 15, + "line": "" + }, { "example": "diamond", "component": "Polygon", @@ -2564,6 +3047,62 @@ "lineNumber": 8, "line": "" }, + { + "example": "mandelbrot", + "component": "Raster", + "path": "/docs/components/Raster/mandelbrot", + "lineNumber": 22, + "line": "" + }, + { + "example": "math-functions", + "component": "Raster", + "path": "/docs/components/Raster/math-functions", + "lineNumber": 99, + "line": "" + }, + { + "example": "sampled", + "component": "Raster", + "path": "/docs/components/Raster/sampled", + "lineNumber": 14, + "line": "" + }, + { + "example": "volcano", + "component": "Raster", + "path": "/docs/components/Raster/volcano", + "lineNumber": 12, + "line": "" + }, + { + "example": "with-contour-overlay", + "component": "Raster", + "path": "/docs/components/Raster/with-contour-overlay", + "lineNumber": 12, + "line": "" + }, + { + "example": "color-via-ordinal-scale", + "component": "Rect", + "path": "/docs/components/Rect/color-via-ordinal-scale", + "lineNumber": 27, + "line": "" + }, + { + "example": "color-via-threshold-scale", + "component": "Rect", + "path": "/docs/components/Rect/color-via-threshold-scale", + "lineNumber": 29, + "line": "" + }, + { + "example": "data-mode-edge", + "component": "Rect", + "path": "/docs/components/Rect/data-mode-edge", + "lineNumber": 16, + "line": "" + }, { "example": "styling-using-attributes", "component": "Rect", @@ -2767,6 +3306,13 @@ "lineNumber": 32, "line": "" }, + { + "example": "geo-routes", + "component": "Spline", + "path": "/docs/components/Spline/geo-routes", + "lineNumber": 26, + "line": "" + }, { "example": "gradient-encoding", "component": "Spline", @@ -2851,6 +3397,13 @@ "lineNumber": 30, "line": "" }, + { + "example": "tween-on-mount", + "component": "Spline", + "path": "/docs/components/Spline/tween-on-mount", + "lineNumber": 14, + "line": "" + }, { "example": "tweened", "component": "Spline", @@ -2879,6 +3432,27 @@ "lineNumber": 20, "line": "" }, + { + "example": "color-via-ordinal-scale", + "component": "Text", + "path": "/docs/components/Text/color-via-ordinal-scale", + "lineNumber": 24, + "line": "" + }, + { + "example": "color-via-threshold-scale", + "component": "Text", + "path": "/docs/components/Text/color-via-threshold-scale", + "lineNumber": 27, + "line": "" + }, + { + "example": "data-mode", + "component": "Text", + "path": "/docs/components/Text/data-mode", + "lineNumber": 22, + "line": "" + }, { "example": "playground", "component": "Text", @@ -3033,6 +3607,13 @@ "lineNumber": 57, "line": "" }, + { + "example": "pan-zoom-axes", + "component": "TransformContext", + "path": "/docs/components/TransformContext/pan-zoom-axes", + "lineNumber": 40, + "line": "" + }, { "example": "pan-zoom-html-image", "component": "TransformContext", @@ -3047,6 +3628,13 @@ "lineNumber": 18, "line": "" }, + { + "example": "planet-distances", + "component": "TransformContext", + "path": "/docs/components/TransformContext/planet-distances", + "lineNumber": 228, + "line": "" + }, { "example": "playground", "component": "TransformContext", @@ -3054,6 +3642,13 @@ "lineNumber": 50, "line": "" }, + { + "example": "scroll-activation-key", + "component": "TransformContext", + "path": "/docs/components/TransformContext/scroll-activation-key", + "lineNumber": 21, + "line": "" + }, { "example": "basic", "component": "Tree", @@ -3117,6 +3712,83 @@ "lineNumber": 84, "line": "" }, + { + "example": "anchor", + "component": "Vector", + "path": "/docs/components/Vector/anchor", + "lineNumber": 18, + "line": "" + }, + { + "example": "basic", + "component": "Vector", + "path": "/docs/components/Vector/basic", + "lineNumber": 24, + "line": "" + }, + { + "example": "data-mode", + "component": "Vector", + "path": "/docs/components/Vector/data-mode", + "lineNumber": 28, + "line": "" + }, + { + "example": "election-wind-map", + "component": "Vector", + "path": "/docs/components/Vector/election-wind-map", + "lineNumber": 99, + "line": "" + }, + { + "example": "shapes", + "component": "Vector", + "path": "/docs/components/Vector/shapes", + "lineNumber": 27, + "line": "" + }, + { + "example": "wind-map", + "component": "Vector", + "path": "/docs/components/Vector/wind-map", + "lineNumber": 36, + "line": "" + }, + { + "example": "bandwidth", + "component": "Violin", + "path": "/docs/components/Violin/bandwidth", + "lineNumber": 55, + "line": "" + }, + { + "example": "basic", + "component": "Violin", + "path": "/docs/components/Violin/basic", + "lineNumber": 48, + "line": "" + }, + { + "example": "horizontal", + "component": "Violin", + "path": "/docs/components/Violin/horizontal", + "lineNumber": 49, + "line": "" + }, + { + "example": "with-box-median", + "component": "Violin", + "path": "/docs/components/Violin/with-box-median", + "lineNumber": 48, + "line": "" + }, { "example": "radius", "component": "Voronoi", @@ -3125,5 +3797,5 @@ "line": "" } ], - "updatedAt": "2026-02-10T16:19:22.461Z" + "updatedAt": "2026-03-31T03:03:47.703Z" } \ No newline at end of file diff --git a/docs/src/examples/catalog/Line.json b/docs/src/examples/catalog/Line.json index 7edd8844b..eafaa96c6 100644 --- a/docs/src/examples/catalog/Line.json +++ b/docs/src/examples/catalog/Line.json @@ -1,6 +1,107 @@ { "component": "Line", "examples": [ + { + "name": "color-via-ordinal-scale", + "title": "color via ordinal scale", + "path": "/docs/components/Line/color-via-ordinal-scale", + "components": [ + { + "component": "Chart", + "lineNumber": 16, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 28, + "line": "" + }, + { + "component": "Line", + "lineNumber": 30, + "line": " 0} x2=\"date\" y2=\"value\" stroke=\"category\" />" + }, + { + "component": "Circle", + "lineNumber": 31, + "line": "" + } + ] + }, + { + "name": "color-via-threshold-scale", + "title": "color via threshold scale", + "path": "/docs/components/Line/color-via-threshold-scale", + "components": [ + { + "component": "Chart", + "lineNumber": 17, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 30, + "line": "" + }, + { + "component": "AnnotationLine", + "lineNumber": 32, + "line": " 0} x2=\"date\" y2=\"value\" stroke=\"value\" />" + }, + { + "component": "Circle", + "lineNumber": 45, + "line": "" + } + ] + }, + { + "name": "data-mode", + "title": "data mode", + "path": "/docs/components/Line/data-mode", + "components": [ + { + "component": "Chart", + "lineNumber": 16, + "line": "" + }, + { + "component": "Layer", + "lineNumber": 17, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 18, + "line": "" + }, + { + "component": "Line", + "lineNumber": 20, + "line": " 0} x2=\"date\" y2=\"value\" class=\"stroke-primary\" />" + }, + { + "component": "Circle", + "lineNumber": 21, + "line": "" + } + ] + }, { "name": "styling-using-attributes", "title": "styling using attributes", @@ -91,6 +192,34 @@ "lineNumber": 29, "line": "" + }, + { + "example": "color-via-ordinal-scale", + "component": "Line", + "path": "/docs/components/Line/color-via-ordinal-scale", + "lineNumber": 30, + "line": " 0} x2=\"date\" y2=\"value\" stroke=\"category\" />" + }, + { + "example": "color-via-threshold-scale", + "component": "Line", + "path": "/docs/components/Line/color-via-threshold-scale", + "lineNumber": 44, + "line": " 0} x2=\"date\" y2=\"value\" stroke=\"value\" />" + }, + { + "example": "data-mode", + "component": "Line", + "path": "/docs/components/Line/data-mode", + "lineNumber": 20, + "line": " 0} x2=\"date\" y2=\"value\" class=\"stroke-primary\" />" + }, { "example": "styling-using-attributes", "component": "Line", @@ -216,7 +345,21 @@ "path": "/docs/components/Pattern/lines-custom-pattern-svg-only", "lineNumber": 101, "line": "" + }, + { + "example": "planet-distances", + "component": "TransformContext", + "path": "/docs/components/TransformContext/planet-distances", + "lineNumber": 234, + "line": "" } ], - "updatedAt": "2026-02-07T20:21:31.956Z" + "updatedAt": "2026-03-23T00:08:15.905Z" } \ No newline at end of file diff --git a/docs/src/examples/catalog/LineChart.json b/docs/src/examples/catalog/LineChart.json index b4cced424..761106621 100644 --- a/docs/src/examples/catalog/LineChart.json +++ b/docs/src/examples/catalog/LineChart.json @@ -37,6 +37,18 @@ } ] }, + { + "name": "brush-pan-zoom", + "title": "brush pan zoom", + "path": "/docs/components/LineChart/brush-pan-zoom", + "components": [ + { + "component": "LineChart", + "lineNumber": 9, + "line": "" + "lineNumber": 12, + "line": "" + "lineNumber": 22, + "line": "" }, { "component": "Spline", - "lineNumber": 21, + "lineNumber": 24, "line": "" - }, - { - "component": "Highlight", - "lineNumber": 28, - "line": "" - }, - { - "component": "Tooltip", - "lineNumber": 33, - "line": "" } ] }, @@ -287,6 +289,18 @@ } ] }, + { + "name": "motion-tween", + "title": "motion tween", + "path": "/docs/components/LineChart/motion-tween", + "components": [ + { + "component": "LineChart", + "lineNumber": 14, + "line": "" + }, + { + "component": "Area", + "lineNumber": 51, + "line": "" + } + ] + }, { "name": "perf-dimension-arrays", "title": "perf dimension arrays", @@ -562,12 +651,12 @@ }, { "component": "Highlight", - "lineNumber": 55, + "lineNumber": 57, "line": "" }, { "component": "Tooltip", - "lineNumber": 60, + "lineNumber": 64, "line": "" } ] @@ -584,8 +673,8 @@ }, { "component": "Labels", - "lineNumber": 35, - "line": "" + "lineNumber": 34, + "line": "" } ] }, @@ -613,6 +702,18 @@ } ] }, + { + "name": "series-programmatic-control", + "title": "series programmatic control", + "path": "/docs/components/LineChart/series-programmatic-control", + "components": [ + { + "component": "LineChart", + "lineNumber": 44, + "line": "" + "lineNumber": 12, + "line": "" } ], - "updatedAt": "2026-02-13T15:08:02.287Z" + "updatedAt": "2026-03-29T03:36:28.433Z" } \ No newline at end of file diff --git a/docs/src/examples/catalog/LinearGradient.json b/docs/src/examples/catalog/LinearGradient.json index 1246752bb..76fdfde43 100644 --- a/docs/src/examples/catalog/LinearGradient.json +++ b/docs/src/examples/catalog/LinearGradient.json @@ -227,7 +227,7 @@ "example": "oscilloscope-frequency", "component": "BarChart", "path": "/docs/components/BarChart/oscilloscope-frequency", - "lineNumber": 113, + "lineNumber": 114, "line": "" }, { - "example": "sync-brushes-with-bind-xdomain", + "example": "synced-brushes", "component": "BrushContext", - "path": "/docs/components/BrushContext/sync-brushes-with-bind-xdomain", + "path": "/docs/components/BrushContext/synced-brushes", "lineNumber": 69, "line": "" }, + { + "example": "gradient", + "component": "Chord", + "path": "/docs/components/Chord/gradient", + "lineNumber": 76, + "line": "" + "lineNumber": 22, + "line": "" }, { "example": "gradient-threshold", @@ -537,7 +544,14 @@ "path": "/docs/components/Spline/gradient-threshold", "lineNumber": 17, "line": "" } ], - "updatedAt": "2026-02-09T15:50:52.902Z" + "updatedAt": "2026-03-31T03:03:47.897Z" } \ No newline at end of file diff --git a/docs/src/examples/catalog/Pie.json b/docs/src/examples/catalog/Pie.json index 1afa6ed00..31f21c68d 100644 --- a/docs/src/examples/catalog/Pie.json +++ b/docs/src/examples/catalog/Pie.json @@ -594,17 +594,17 @@ }, { "component": "Layer", - "lineNumber": 21, + "lineNumber": 20, "line": "" }, { "component": "Pie", - "lineNumber": 22, - "line": "" + "lineNumber": 21, + "line": "" }, { "component": "Tooltip", - "lineNumber": 24, + "lineNumber": 23, "line": "" } ] @@ -847,8 +847,8 @@ "example": "tooltip", "component": "Pie", "path": "/docs/components/Pie/tooltip", - "lineNumber": 22, - "line": "" + "lineNumber": 21, + "line": "" }, { "example": "tooltip-with-arcs-slot", @@ -865,5 +865,5 @@ "line": "" } ], - "updatedAt": "2026-02-07T20:21:32.144Z" + "updatedAt": "2026-03-02T17:24:38.171Z" } \ No newline at end of file diff --git a/docs/src/examples/catalog/Points.json b/docs/src/examples/catalog/Points.json index 65df5533e..649ac0d0c 100644 --- a/docs/src/examples/catalog/Points.json +++ b/docs/src/examples/catalog/Points.json @@ -242,14 +242,14 @@ "example": "minimap", "component": "BrushContext", "path": "/docs/components/BrushContext/minimap", - "lineNumber": 48, + "lineNumber": 59, "line": "" }, { "example": "minimap", "component": "BrushContext", "path": "/docs/components/BrushContext/minimap", - "lineNumber": 71, + "lineNumber": 83, "line": "" }, { @@ -259,6 +259,34 @@ "lineNumber": 43, "line": "" }, + { + "example": "bandwidth", + "component": "Density", + "path": "/docs/components/Density/bandwidth", + "lineNumber": 31, + "line": "" + }, + { + "example": "basic", + "component": "Density", + "path": "/docs/components/Density/basic", + "lineNumber": 24, + "line": "" + }, + { + "example": "stroke-only", + "component": "Density", + "path": "/docs/components/Density/stroke-only", + "lineNumber": 24, + "line": "" + }, + { + "example": "thresholds", + "component": "Density", + "path": "/docs/components/Density/thresholds", + "lineNumber": 31, + "line": "" + }, { "example": "text", "component": "ForceSimulation", @@ -400,5 +428,5 @@ "line": "" } ], - "updatedAt": "2026-02-10T16:19:22.780Z" + "updatedAt": "2026-03-28T15:21:53.344Z" } \ No newline at end of file diff --git a/docs/src/examples/catalog/Polygon.json b/docs/src/examples/catalog/Polygon.json index 935b80554..701735fb5 100644 --- a/docs/src/examples/catalog/Polygon.json +++ b/docs/src/examples/catalog/Polygon.json @@ -204,6 +204,65 @@ } ] }, + { + "name": "color-via-ordinal-scale", + "title": "color via ordinal scale", + "path": "/docs/components/Polygon/color-via-ordinal-scale", + "components": [ + { + "component": "Chart", + "lineNumber": 14, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 25, + "line": "" + }, + { + "component": "Polygon", + "lineNumber": 27, + "line": "" + } + ] + }, + { + "name": "color-via-threshold-scale", + "title": "color via threshold scale", + "path": "/docs/components/Polygon/color-via-threshold-scale", + "components": [ + { + "component": "Chart", + "lineNumber": 15, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 28, + "line": "" + }, + { + "component": "AnnotationLine", + "lineNumber": 30, + "line": "" + } + ] + }, { "name": "cross", "title": "cross", @@ -231,6 +290,33 @@ } ] }, + { + "name": "data-mode", + "title": "data mode", + "path": "/docs/components/Polygon/data-mode", + "components": [ + { + "component": "Chart", + "lineNumber": 14, + "line": "" + }, + { + "component": "Layer", + "lineNumber": 15, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 16, + "line": "" + }, + { + "component": "Polygon", + "lineNumber": 18, + "line": "" + } + ] + }, { "name": "diamond", "title": "diamond", @@ -559,6 +645,20 @@ "lineNumber": 18, "line": "" + }, + { + "example": "color-via-threshold-scale", + "component": "Polygon", + "path": "/docs/components/Polygon/color-via-threshold-scale", + "lineNumber": 42, + "line": "" + }, { "example": "cross", "component": "Polygon", @@ -566,6 +666,13 @@ "lineNumber": 18, "line": "" + }, { "example": "diamond", "component": "Polygon", @@ -642,7 +749,21 @@ "path": "/docs/components/Polygon/triangle", "lineNumber": 14, "line": "" + }, + { + "component": "Axis", + "lineNumber": 23, + "line": "" + }, + { + "component": "Raster", + "lineNumber": 25, + "line": "" + } + ] + }, + { + "name": "math-functions", + "title": "math functions", + "path": "/docs/components/Raster/math-functions", + "components": [ + { + "component": "Chart", + "lineNumber": 92, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 100, + "line": "" + }, + { + "component": "Raster", + "lineNumber": 102, + "line": "" + }, + { + "component": "Contour", + "lineNumber": 104, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 15, + "line": "" + }, + { + "component": "Raster", + "lineNumber": 17, + "line": " Math.sin(x) * Math.cos(y)} />" + } + ] + }, + { + "name": "volcano", + "title": "volcano", + "path": "/docs/components/Raster/volcano", + "components": [ + { + "component": "Chart", + "lineNumber": 11, + "line": "" + }, + { + "component": "Layer", + "lineNumber": 12, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 13, + "line": "" + }, + { + "component": "Raster", + "lineNumber": 15, + "line": "" + }, + { + "component": "Layer", + "lineNumber": 12, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 13, + "line": "" + }, + { + "component": "Raster", + "lineNumber": 15, + "line": "" + }, + { + "example": "math-functions", + "component": "Raster", + "path": "/docs/components/Raster/math-functions", + "lineNumber": 102, + "line": "" + }, + { + "example": "sampled", + "component": "Raster", + "path": "/docs/components/Raster/sampled", + "lineNumber": 17, + "line": " Math.sin(x) * Math.cos(y)} />" + }, + { + "example": "volcano", + "component": "Raster", + "path": "/docs/components/Raster/volcano", + "lineNumber": 15, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 28, + "line": "" + }, + { + "component": "Rect", + "lineNumber": 30, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 30, + "line": "" + }, + { + "component": "AnnotationLine", + "lineNumber": 32, + "line": "" + }, + { + "component": "Layer", + "lineNumber": 16, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 17, + "line": "" + }, + { + "component": "Rect", + "lineNumber": 19, + "line": " 0} x1=\"x1\" y1=\"length\" insets={{ x: 1 }} class=\"fill-primary\" />" }, { "example": "histogram-date-time-interval", "component": "BarChart", "path": "/docs/components/BarChart/histogram-date-time-interval", - "lineNumber": 55, - "line": " 0} x1=\"x1\" y1=\"length\" insets={{ x: 1 }} class=\"fill-primary\" />" }, { "example": "histogram-horizontal", "component": "BarChart", "path": "/docs/components/BarChart/histogram-horizontal", - "lineNumber": 36, - "line": " 0} y0=\"x0\" x1=\"length\" y1=\"x1\" insets={{ y: 1 }} class=\"fill-primary\" />" }, { "example": "histogram-random-distribution", "component": "BarChart", "path": "/docs/components/BarChart/histogram-random-distribution", - "lineNumber": 31, - "line": " 0} x1=\"x1\" y1=\"length\" insets={{ x: 1 }} class=\"fill-primary\" />" }, { "example": "histogram-vertical", "component": "BarChart", "path": "/docs/components/BarChart/histogram-vertical", - "lineNumber": 35, - "line": " 0} x1=\"x1\" y1=\"length\" insets={{ x: 1 }} class=\"fill-primary\" />" }, { "example": "handle-arrows", @@ -602,6 +688,27 @@ "lineNumber": 79, "line": "" }, + { + "example": "color-via-ordinal-scale", + "component": "Rect", + "path": "/docs/components/Rect/color-via-ordinal-scale", + "lineNumber": 30, + "line": "" }, { - "example": "sync-brushes-with-bind-xdomain", + "example": "synced-brushes", "component": "BrushContext", - "path": "/docs/components/BrushContext/sync-brushes-with-bind-xdomain", + "path": "/docs/components/BrushContext/synced-brushes", "lineNumber": 67, "line": "" }, @@ -698,5 +698,5 @@ "line": "" } ], - "updatedAt": "2026-02-09T15:50:53.516Z" + "updatedAt": "2026-03-24T16:00:56.015Z" } \ No newline at end of file diff --git a/docs/src/examples/catalog/Sankey.json b/docs/src/examples/catalog/Sankey.json index 9e1100522..7fad70f29 100644 --- a/docs/src/examples/catalog/Sankey.json +++ b/docs/src/examples/catalog/Sankey.json @@ -75,17 +75,17 @@ }, { "component": "Group", - "lineNumber": 100, + "lineNumber": 99, "line": "" }, { "component": "Rect", - "lineNumber": 101, + "lineNumber": 100, "line": " d.name} nodeWidth={8}>" } ], - "updatedAt": "2026-02-07T20:21:32.275Z" + "updatedAt": "2026-03-26T17:40:25.226Z" } \ No newline at end of file diff --git a/docs/src/examples/catalog/ScatterChart.json b/docs/src/examples/catalog/ScatterChart.json index 8527fcd2b..af8226bf6 100644 --- a/docs/src/examples/catalog/ScatterChart.json +++ b/docs/src/examples/catalog/ScatterChart.json @@ -329,7 +329,7 @@ }, { "component": "Tooltip", - "lineNumber": 25, + "lineNumber": 24, "line": "" } ] @@ -345,6 +345,23 @@ "line": "" + } + ] } ], "usage": [ @@ -522,7 +539,14 @@ "path": "/docs/components/ScatterChart/tooltip-click", "lineNumber": 9, "line": "" + }, + { + "component": "GeoPath", + "lineNumber": 27, + "line": "" + }, + { + "component": "Graticule", + "lineNumber": 28, + "line": "" + }, + { + "component": "Spline", + "lineNumber": 33, + "line": "" + }, + { + "component": "Layer", + "lineNumber": 14, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 15, + "line": "" + }, + { + "component": "Spline", + "lineNumber": 18, + "line": "" + } + ] + }, { "name": "tweened", "title": "tweened", @@ -783,6 +842,83 @@ "lineNumber": 41, "line": "" }, + { + "example": "data-chart-multi", + "component": "Chart", + "path": "/docs/components/Chart/data-chart-multi", + "lineNumber": 16, + "line": "" + }, + { + "example": "data-chart-multi", + "component": "Chart", + "path": "/docs/components/Chart/data-chart-multi", + "lineNumber": 17, + "line": "" + }, + { + "example": "data-chart-single", + "component": "Chart", + "path": "/docs/components/Chart/data-chart-single", + "lineNumber": 16, + "line": "" + }, + { + "example": "data-mark-data", + "component": "Chart", + "path": "/docs/components/Chart/data-mark-data", + "lineNumber": 25, + "line": "" + }, + { + "example": "data-mark-data", + "component": "Chart", + "path": "/docs/components/Chart/data-mark-data", + "lineNumber": 26, + "line": "" + }, + { + "example": "data-primitive-data", + "component": "Chart", + "path": "/docs/components/Chart/data-primitive-data", + "lineNumber": 25, + "line": "" + }, + { + "example": "data-primitive-data", + "component": "Chart", + "path": "/docs/components/Chart/data-primitive-data", + "lineNumber": 27, + "line": "" + }, + { + "example": "data-series-chart-data", + "component": "Chart", + "path": "/docs/components/Chart/data-series-chart-data", + "lineNumber": 24, + "line": "" + }, + { + "example": "data-series-chart-data", + "component": "Chart", + "path": "/docs/components/Chart/data-series-chart-data", + "lineNumber": 25, + "line": "" + }, + { + "example": "data-series-separate-data", + "component": "Chart", + "path": "/docs/components/Chart/data-series-separate-data", + "lineNumber": 33, + "line": "" + }, + { + "example": "data-series-separate-data", + "component": "Chart", + "path": "/docs/components/Chart/data-series-separate-data", + "lineNumber": 34, + "line": "" + }, { "example": "basic", "component": "Dagre", @@ -811,13 +947,6 @@ "lineNumber": 52, "line": "" }, { @@ -993,6 +1122,13 @@ "lineNumber": 36, "line": "" }, + { + "example": "geo-routes", + "component": "Spline", + "path": "/docs/components/Spline/geo-routes", + "lineNumber": 33, + "line": "" }, + { + "example": "tween-on-mount", + "component": "Spline", + "path": "/docs/components/Spline/tween-on-mount", + "lineNumber": 18, + "line": "" + }, { "example": "tweened", "component": "Spline", @@ -1162,5 +1305,5 @@ "line": "" } ], - "updatedAt": "2026-02-10T16:19:22.963Z" + "updatedAt": "2026-03-29T03:36:29.290Z" } \ No newline at end of file diff --git a/docs/src/examples/catalog/Text.json b/docs/src/examples/catalog/Text.json index c40ee120f..4d2cef8cf 100644 --- a/docs/src/examples/catalog/Text.json +++ b/docs/src/examples/catalog/Text.json @@ -1,6 +1,107 @@ { "component": "Text", "examples": [ + { + "name": "color-via-ordinal-scale", + "title": "color via ordinal scale", + "path": "/docs/components/Text/color-via-ordinal-scale", + "components": [ + { + "component": "Chart", + "lineNumber": 14, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 25, + "line": "" + }, + { + "component": "Circle", + "lineNumber": 27, + "line": "" + }, + { + "component": "Text", + "lineNumber": 28, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 28, + "line": "" + }, + { + "component": "AnnotationLine", + "lineNumber": 30, + "line": "" + }, + { + "component": "Text", + "lineNumber": 43, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 23, + "line": "" + }, + { + "component": "Circle", + "lineNumber": 25, + "line": "" + }, + { + "component": "Text", + "lineNumber": 26, + "line": "" }, - { - "example": "group-series-labels", - "component": "BarChart", - "path": "/docs/components/BarChart/group-series-labels", - "lineNumber": 45, - "line": "" }, + { + "example": "data-mode", + "component": "Group", + "path": "/docs/components/Group/data-mode", + "lineNumber": 20, + "line": "" + }, { "example": "geo", "component": "Hull", @@ -507,7 +664,7 @@ "example": "hierarchy", "component": "Sankey", "path": "/docs/components/Sankey/hierarchy", - "lineNumber": 115, + "lineNumber": 114, "line": "" }, + { + "example": "planet-distances", + "component": "TransformContext", + "path": "/docs/components/TransformContext/planet-distances", + "lineNumber": 245, + "line": "arrow" + }, + { + "example": "shapes", + "component": "Vector", + "path": "/docs/components/Vector/shapes", + "lineNumber": 33, + "line": "spike" + }, + { + "example": "shapes", + "component": "Vector", + "path": "/docs/components/Vector/shapes", + "lineNumber": 51, + "line": "custom" + }, + { + "example": "shapes", + "component": "Vector", + "path": "/docs/components/Vector/shapes", + "lineNumber": 75, + "line": "" }, { "example": "series-individual-tooltip", "component": "AreaChart", "path": "/docs/components/AreaChart/series-individual-tooltip", - "lineNumber": 73, + "lineNumber": 77, "line": "{format(context.x(data))}" }, { "example": "series-individual-tooltip", "component": "AreaChart", "path": "/docs/components/AreaChart/series-individual-tooltip", - "lineNumber": 74, + "lineNumber": 78, "line": "" }, { "example": "series-individual-tooltip", "component": "AreaChart", "path": "/docs/components/AreaChart/series-individual-tooltip", - "lineNumber": 75, + "lineNumber": 79, "line": "" }, { @@ -1831,6 +1831,41 @@ "lineNumber": 55, "line": "" }, + { + "example": "duration-labels", + "component": "BarChart", + "path": "/docs/components/BarChart/duration-labels", + "lineNumber": 100, + "line": "" + }, + { + "example": "duration-labels", + "component": "BarChart", + "path": "/docs/components/BarChart/duration-labels", + "lineNumber": 102, + "line": "{format(context.y(data))}" + }, + { + "example": "duration-labels", + "component": "BarChart", + "path": "/docs/components/BarChart/duration-labels", + "lineNumber": 103, + "line": "" + }, + { + "example": "duration-labels", + "component": "BarChart", + "path": "/docs/components/BarChart/duration-labels", + "lineNumber": 104, + "line": "" + }, + { + "example": "duration-labels", + "component": "BarChart", + "path": "/docs/components/BarChart/duration-labels", + "lineNumber": 105, + "line": "" + }, { "example": "duration-points", "component": "BarChart", @@ -1933,210 +1968,210 @@ "example": "histogram-date-time-count", "component": "BarChart", "path": "/docs/components/BarChart/histogram-date-time-count", - "lineNumber": 59, + "lineNumber": 53, "line": "" }, { "example": "histogram-date-time-count", "component": "BarChart", "path": "/docs/components/BarChart/histogram-date-time-count", - "lineNumber": 61, + "lineNumber": 55, "line": "" }, { "example": "histogram-date-time-count", "component": "BarChart", "path": "/docs/components/BarChart/histogram-date-time-count", - "lineNumber": 64, + "lineNumber": 58, "line": "" }, { "example": "histogram-date-time-count", "component": "BarChart", "path": "/docs/components/BarChart/histogram-date-time-count", - "lineNumber": 65, + "lineNumber": 59, "line": "" }, { "example": "histogram-date-time-count", "component": "BarChart", "path": "/docs/components/BarChart/histogram-date-time-count", - "lineNumber": 66, + "lineNumber": 60, "line": "" }, { "example": "histogram-date-time-count", "component": "BarChart", "path": "/docs/components/BarChart/histogram-date-time-count", - "lineNumber": 68, + "lineNumber": 62, "line": "" }, { "example": "histogram-date-time-interval", "component": "BarChart", "path": "/docs/components/BarChart/histogram-date-time-interval", - "lineNumber": 66, + "lineNumber": 60, "line": "" }, { "example": "histogram-date-time-interval", "component": "BarChart", "path": "/docs/components/BarChart/histogram-date-time-interval", - "lineNumber": 68, + "lineNumber": 62, "line": "" }, { "example": "histogram-date-time-interval", "component": "BarChart", "path": "/docs/components/BarChart/histogram-date-time-interval", - "lineNumber": 71, + "lineNumber": 65, "line": "" }, { "example": "histogram-date-time-interval", "component": "BarChart", "path": "/docs/components/BarChart/histogram-date-time-interval", - "lineNumber": 72, + "lineNumber": 66, "line": "" }, { "example": "histogram-date-time-interval", "component": "BarChart", "path": "/docs/components/BarChart/histogram-date-time-interval", - "lineNumber": 73, + "lineNumber": 67, "line": "" }, { "example": "histogram-date-time-interval", "component": "BarChart", "path": "/docs/components/BarChart/histogram-date-time-interval", - "lineNumber": 75, + "lineNumber": 69, "line": "" }, { "example": "histogram-horizontal", "component": "BarChart", "path": "/docs/components/BarChart/histogram-horizontal", - "lineNumber": 47, + "lineNumber": 38, "line": "" }, { "example": "histogram-horizontal", "component": "BarChart", "path": "/docs/components/BarChart/histogram-horizontal", - "lineNumber": 49, + "lineNumber": 40, "line": "{data.x0 + ' - ' + (data.x1 - 1)}" }, { "example": "histogram-horizontal", "component": "BarChart", "path": "/docs/components/BarChart/histogram-horizontal", - "lineNumber": 50, + "lineNumber": 41, "line": "" }, { "example": "histogram-horizontal", "component": "BarChart", "path": "/docs/components/BarChart/histogram-horizontal", - "lineNumber": 51, + "lineNumber": 42, "line": "" }, { "example": "histogram-horizontal", "component": "BarChart", "path": "/docs/components/BarChart/histogram-horizontal", - "lineNumber": 52, + "lineNumber": 43, "line": "" }, { "example": "histogram-horizontal", "component": "BarChart", "path": "/docs/components/BarChart/histogram-horizontal", - "lineNumber": 54, + "lineNumber": 45, "line": "" }, { "example": "histogram-random-distribution", "component": "BarChart", "path": "/docs/components/BarChart/histogram-random-distribution", - "lineNumber": 42, + "lineNumber": 36, "line": "" }, { "example": "histogram-random-distribution", "component": "BarChart", "path": "/docs/components/BarChart/histogram-random-distribution", - "lineNumber": 44, + "lineNumber": 38, "line": "{data.x0 + ' - ' + (data.x1 - 0.01)}" }, { "example": "histogram-random-distribution", "component": "BarChart", "path": "/docs/components/BarChart/histogram-random-distribution", - "lineNumber": 45, + "lineNumber": 39, "line": "" }, { "example": "histogram-random-distribution", "component": "BarChart", "path": "/docs/components/BarChart/histogram-random-distribution", - "lineNumber": 46, + "lineNumber": 40, "line": "" }, { "example": "histogram-random-distribution", "component": "BarChart", "path": "/docs/components/BarChart/histogram-random-distribution", - "lineNumber": 47, + "lineNumber": 41, "line": "" }, { "example": "histogram-random-distribution", "component": "BarChart", "path": "/docs/components/BarChart/histogram-random-distribution", - "lineNumber": 49, + "lineNumber": 43, "line": "" }, { "example": "histogram-vertical", "component": "BarChart", "path": "/docs/components/BarChart/histogram-vertical", - "lineNumber": 47, + "lineNumber": 41, "line": "" }, { "example": "histogram-vertical", "component": "BarChart", "path": "/docs/components/BarChart/histogram-vertical", - "lineNumber": 49, + "lineNumber": 43, "line": "{data.x0 + ' - ' + (data.x1 - 1)}" }, { "example": "histogram-vertical", "component": "BarChart", "path": "/docs/components/BarChart/histogram-vertical", - "lineNumber": 50, + "lineNumber": 44, "line": "" }, { "example": "histogram-vertical", "component": "BarChart", "path": "/docs/components/BarChart/histogram-vertical", - "lineNumber": 51, + "lineNumber": 45, "line": "" }, { "example": "histogram-vertical", "component": "BarChart", "path": "/docs/components/BarChart/histogram-vertical", - "lineNumber": 52, + "lineNumber": 46, "line": "" }, { "example": "histogram-vertical", "component": "BarChart", "path": "/docs/components/BarChart/histogram-vertical", - "lineNumber": 54, + "lineNumber": 48, "line": "" }, { @@ -2199,28 +2234,28 @@ "example": "single-dimension", "component": "BarChart", "path": "/docs/components/BarChart/single-dimension", - "lineNumber": 36, + "lineNumber": 37, "line": "" }, { "example": "single-dimension", "component": "BarChart", "path": "/docs/components/BarChart/single-dimension", - "lineNumber": 38, + "lineNumber": 39, "line": "{format(context.x(data))}" }, { "example": "single-dimension", "component": "BarChart", "path": "/docs/components/BarChart/single-dimension", - "lineNumber": 39, + "lineNumber": 40, "line": "" }, { "example": "single-dimension", "component": "BarChart", "path": "/docs/components/BarChart/single-dimension", - "lineNumber": 40, + "lineNumber": 41, "line": "" }, + { + "example": "with-tooltip", + "component": "BoxPlot", + "path": "/docs/components/BoxPlot/with-tooltip", + "lineNumber": 59, + "line": "" + }, + { + "example": "with-tooltip", + "component": "BoxPlot", + "path": "/docs/components/BoxPlot/with-tooltip", + "lineNumber": 61, + "line": "" + }, + { + "example": "with-tooltip", + "component": "BoxPlot", + "path": "/docs/components/BoxPlot/with-tooltip", + "lineNumber": 62, + "line": "" + }, + { + "example": "with-tooltip", + "component": "BoxPlot", + "path": "/docs/components/BoxPlot/with-tooltip", + "lineNumber": 63, + "line": "" + }, + { + "example": "with-tooltip", + "component": "BoxPlot", + "path": "/docs/components/BoxPlot/with-tooltip", + "lineNumber": 64, + "line": "" + }, + { + "example": "with-tooltip", + "component": "BoxPlot", + "path": "/docs/components/BoxPlot/with-tooltip", + "lineNumber": 65, + "line": "" + }, + { + "example": "with-tooltip", + "component": "BoxPlot", + "path": "/docs/components/BoxPlot/with-tooltip", + "lineNumber": 66, + "line": "" + }, + { + "example": "with-tooltip", + "component": "BoxPlot", + "path": "/docs/components/BoxPlot/with-tooltip", + "lineNumber": 67, + "line": "" + }, + { + "example": "with-tooltip", + "component": "BoxPlot", + "path": "/docs/components/BoxPlot/with-tooltip", + "lineNumber": 69, + "line": "" + }, + { + "example": "with-violin", + "component": "BoxPlot", + "path": "/docs/components/BoxPlot/with-violin", + "lineNumber": 95, + "line": "" + }, + { + "example": "with-violin", + "component": "BoxPlot", + "path": "/docs/components/BoxPlot/with-violin", + "lineNumber": 97, + "line": "" + }, + { + "example": "with-violin", + "component": "BoxPlot", + "path": "/docs/components/BoxPlot/with-violin", + "lineNumber": 98, + "line": "" + }, + { + "example": "with-violin", + "component": "BoxPlot", + "path": "/docs/components/BoxPlot/with-violin", + "lineNumber": 99, + "line": "" + }, + { + "example": "with-violin", + "component": "BoxPlot", + "path": "/docs/components/BoxPlot/with-violin", + "lineNumber": 100, + "line": "" + }, + { + "example": "with-violin", + "component": "BoxPlot", + "path": "/docs/components/BoxPlot/with-violin", + "lineNumber": 101, + "line": "" + }, + { + "example": "with-violin", + "component": "BoxPlot", + "path": "/docs/components/BoxPlot/with-violin", + "lineNumber": 102, + "line": "" + }, + { + "example": "with-violin", + "component": "BoxPlot", + "path": "/docs/components/BoxPlot/with-violin", + "lineNumber": 103, + "line": "" + }, { "example": "tooltip-interop", "component": "BrushContext", @@ -3172,56 +3326,56 @@ "example": "90-days", "component": "Calendar", "path": "/docs/components/Calendar/90-days", - "lineNumber": 42, + "lineNumber": 41, "line": "" }, { "example": "90-days", "component": "Calendar", "path": "/docs/components/Calendar/90-days", - "lineNumber": 44, + "lineNumber": 43, "line": "" }, { "example": "90-days", "component": "Calendar", "path": "/docs/components/Calendar/90-days", - "lineNumber": 47, + "lineNumber": 46, "line": "" }, { "example": "90-days", "component": "Calendar", "path": "/docs/components/Calendar/90-days", - "lineNumber": 48, + "lineNumber": 47, "line": "" }, { "example": "fixed-cell-size", "component": "Calendar", "path": "/docs/components/Calendar/fixed-cell-size", - "lineNumber": 50, + "lineNumber": 43, "line": "" }, { "example": "fixed-cell-size", "component": "Calendar", "path": "/docs/components/Calendar/fixed-cell-size", - "lineNumber": 52, + "lineNumber": 45, "line": "" }, { "example": "fixed-cell-size", "component": "Calendar", "path": "/docs/components/Calendar/fixed-cell-size", - "lineNumber": 55, + "lineNumber": 48, "line": "" }, { "example": "fixed-cell-size", "component": "Calendar", "path": "/docs/components/Calendar/fixed-cell-size", - "lineNumber": 56, + "lineNumber": 49, "line": "" }, { @@ -3256,84 +3410,84 @@ "example": "last-month", "component": "Calendar", "path": "/docs/components/Calendar/last-month", - "lineNumber": 49, + "lineNumber": 43, "line": "" }, { "example": "last-month", "component": "Calendar", "path": "/docs/components/Calendar/last-month", - "lineNumber": 51, + "lineNumber": 45, "line": "" }, { "example": "last-month", "component": "Calendar", "path": "/docs/components/Calendar/last-month", - "lineNumber": 54, + "lineNumber": 48, "line": "" }, { "example": "last-month", "component": "Calendar", "path": "/docs/components/Calendar/last-month", - "lineNumber": 55, + "lineNumber": 49, "line": "" }, { "example": "multiple-years", "component": "Calendar", "path": "/docs/components/Calendar/multiple-years", - "lineNumber": 55, + "lineNumber": 54, "line": "" }, { "example": "multiple-years", "component": "Calendar", "path": "/docs/components/Calendar/multiple-years", - "lineNumber": 57, + "lineNumber": 56, "line": "" }, { "example": "multiple-years", "component": "Calendar", "path": "/docs/components/Calendar/multiple-years", - "lineNumber": 60, + "lineNumber": 59, "line": "" }, { "example": "multiple-years", "component": "Calendar", "path": "/docs/components/Calendar/multiple-years", - "lineNumber": 61, + "lineNumber": 60, "line": "" }, { "example": "responsive-cell-size-default", "component": "Calendar", "path": "/docs/components/Calendar/responsive-cell-size-default", - "lineNumber": 49, + "lineNumber": 43, "line": "" }, { "example": "responsive-cell-size-default", "component": "Calendar", "path": "/docs/components/Calendar/responsive-cell-size-default", - "lineNumber": 51, + "lineNumber": 45, "line": "" }, { "example": "responsive-cell-size-default", "component": "Calendar", "path": "/docs/components/Calendar/responsive-cell-size-default", - "lineNumber": 54, + "lineNumber": 48, "line": "" }, { "example": "responsive-cell-size-default", "component": "Calendar", "path": "/docs/components/Calendar/responsive-cell-size-default", - "lineNumber": 55, + "lineNumber": 49, "line": "" }, { @@ -3575,74 +3729,207 @@ "line": "" + "example": "gradient", + "component": "Chord", + "path": "/docs/components/Chord/gradient", + "lineNumber": 152, + "line": "" }, { - "example": "beeswarm", - "component": "ForceSimulation", - "path": "/docs/components/ForceSimulation/beeswarm", - "lineNumber": 60, - "line": "{data.name}" + "example": "gradient", + "component": "Chord", + "path": "/docs/components/Chord/gradient", + "lineNumber": 154, + "line": "" }, { - "example": "beeswarm", - "component": "ForceSimulation", - "path": "/docs/components/ForceSimulation/beeswarm", - "lineNumber": 61, + "example": "gradient", + "component": "Chord", + "path": "/docs/components/Chord/gradient", + "lineNumber": 157, "line": "" }, { - "example": "beeswarm", - "component": "ForceSimulation", - "path": "/docs/components/ForceSimulation/beeswarm", - "lineNumber": 62, - "line": "" + "example": "gradient", + "component": "Chord", + "path": "/docs/components/Chord/gradient", + "lineNumber": 158, + "line": "" }, { - "example": "beeswarm", - "component": "ForceSimulation", - "path": "/docs/components/ForceSimulation/beeswarm", - "lineNumber": 63, - "line": "" + "example": "hover", + "component": "Chord", + "path": "/docs/components/Chord/hover", + "lineNumber": 150, + "line": "" }, { - "example": "beeswarm", - "component": "ForceSimulation", - "path": "/docs/components/ForceSimulation/beeswarm", - "lineNumber": 64, - "line": "" + "example": "hover", + "component": "Chord", + "path": "/docs/components/Chord/hover", + "lineNumber": 153, + "line": "{data.name}" }, { - "example": "beeswarm", - "component": "ForceSimulation", - "path": "/docs/components/ForceSimulation/beeswarm", - "lineNumber": 65, - "line": "" + "example": "hover", + "component": "Chord", + "path": "/docs/components/Chord/hover", + "lineNumber": 154, + "line": "" }, { - "example": "graph-drag", - "component": "ForceSimulation", - "path": "/docs/components/ForceSimulation/graph-drag", - "lineNumber": 140, - "line": "" + "example": "hover", + "component": "Chord", + "path": "/docs/components/Chord/hover", + "lineNumber": 156, + "line": "" + "example": "hover", + "component": "Chord", + "path": "/docs/components/Chord/hover", + "lineNumber": 162, + "line": "" }, { - "example": "tree", - "component": "ForceSimulation", - "path": "/docs/components/ForceSimulation/tree", - "lineNumber": 66, - "line": "" + "example": "hover", + "component": "Chord", + "path": "/docs/components/Chord/hover", + "lineNumber": 163, + "line": "" + }, + { + "example": "hover", + "component": "Chord", + "path": "/docs/components/Chord/hover", + "lineNumber": 166, + "line": "{data.source} ↔ {data.target}" + }, + { + "example": "hover", + "component": "Chord", + "path": "/docs/components/Chord/hover", + "lineNumber": 167, + "line": "" + }, + { + "example": "hover", + "component": "Chord", + "path": "/docs/components/Chord/hover", + "lineNumber": 168, + "line": "" + }, + { + "example": "walmart", + "component": "Density", + "path": "/docs/components/Density/walmart", + "lineNumber": 65, + "line": "{data.city}, {data.state}" + }, + { + "example": "walmart", + "component": "Density", + "path": "/docs/components/Density/walmart", + "lineNumber": 66, + "line": "" + }, + { + "example": "walmart", + "component": "Density", + "path": "/docs/components/Density/walmart", + "lineNumber": 67, + "line": "" + }, + { + "example": "walmart", + "component": "Density", + "path": "/docs/components/Density/walmart", + "lineNumber": 68, + "line": "" + }, + { + "example": "beeswarm", + "component": "ForceSimulation", + "path": "/docs/components/ForceSimulation/beeswarm", + "lineNumber": 58, + "line": "" + }, + { + "example": "beeswarm", + "component": "ForceSimulation", + "path": "/docs/components/ForceSimulation/beeswarm", + "lineNumber": 60, + "line": "{data.name}" + }, + { + "example": "beeswarm", + "component": "ForceSimulation", + "path": "/docs/components/ForceSimulation/beeswarm", + "lineNumber": 61, + "line": "" + }, + { + "example": "beeswarm", + "component": "ForceSimulation", + "path": "/docs/components/ForceSimulation/beeswarm", + "lineNumber": 62, + "line": "" + }, + { + "example": "beeswarm", + "component": "ForceSimulation", + "path": "/docs/components/ForceSimulation/beeswarm", + "lineNumber": 63, + "line": "" + }, + { + "example": "beeswarm", + "component": "ForceSimulation", + "path": "/docs/components/ForceSimulation/beeswarm", + "lineNumber": 64, + "line": "" + }, + { + "example": "beeswarm", + "component": "ForceSimulation", + "path": "/docs/components/ForceSimulation/beeswarm", + "lineNumber": 65, + "line": "" + }, + { + "example": "graph-drag", + "component": "ForceSimulation", + "path": "/docs/components/ForceSimulation/graph-drag", + "lineNumber": 140, + "line": "" + }, + { + "example": "graph-playground", + "component": "ForceSimulation", + "path": "/docs/components/ForceSimulation/graph-playground", + "lineNumber": 194, + "line": "" + }, + { + "example": "tree", + "component": "ForceSimulation", + "path": "/docs/components/ForceSimulation/tree", + "lineNumber": 66, + "line": "" }, { "example": "tree", @@ -3767,7 +4054,7 @@ "example": "animated-globe", "component": "GeoPath", "path": "/docs/components/GeoPath/animated-globe", - "lineNumber": 174, + "lineNumber": 159, "line": "" }, { @@ -3865,42 +4152,42 @@ "example": "spike-map", "component": "GeoPath", "path": "/docs/components/GeoPath/spike-map", - "lineNumber": 113, + "lineNumber": 117, "line": "" }, { "example": "spike-map", "component": "GeoPath", "path": "/docs/components/GeoPath/spike-map", - "lineNumber": 116, + "lineNumber": 120, "line": "{data.properties.name + ' - ' + data.properties.data?.state}" }, { "example": "spike-map", "component": "GeoPath", "path": "/docs/components/GeoPath/spike-map", - "lineNumber": 119, + "lineNumber": 123, "line": "" }, { "example": "timezones", "component": "GeoPath", "path": "/docs/components/GeoPath/timezones", - "lineNumber": 143, + "lineNumber": 136, "line": "" }, { "example": "timezones", "component": "GeoPath", "path": "/docs/components/GeoPath/timezones", - "lineNumber": 144, + "lineNumber": 137, "line": "" }, { "example": "timezones", "component": "GeoPath", "path": "/docs/components/GeoPath/timezones", - "lineNumber": 145, + "lineNumber": 138, "line": "" }, { "example": "timezones", "component": "GeoPath", "path": "/docs/components/GeoPath/timezones", - "lineNumber": 146, + "lineNumber": 139, "line": "" }, { "example": "timezones", "component": "GeoPath", "path": "/docs/components/GeoPath/timezones", - "lineNumber": 147, + "lineNumber": 140, "line": "" }, { "example": "transform-canvas", "component": "GeoPath", "path": "/docs/components/GeoPath/transform-canvas", - "lineNumber": 127, + "lineNumber": 128, "line": "{data.properties.name}" }, { "example": "transform-canvas", "component": "GeoPath", "path": "/docs/components/GeoPath/transform-canvas", - "lineNumber": 128, + "lineNumber": 129, "line": "" }, { "example": "transform-canvas", "component": "GeoPath", "path": "/docs/components/GeoPath/transform-canvas", - "lineNumber": 129, + "lineNumber": 130, "line": "" }, { "example": "transform-canvas", "component": "GeoPath", "path": "/docs/components/GeoPath/transform-canvas", - "lineNumber": 130, + "lineNumber": 131, "line": "" }, { "example": "transform-projection", "component": "GeoPath", "path": "/docs/components/GeoPath/transform-projection", - "lineNumber": 120, + "lineNumber": 121, "line": "" }, { "example": "transform-projection", "component": "GeoPath", "path": "/docs/components/GeoPath/transform-projection", - "lineNumber": 124, + "lineNumber": 125, "line": "{data.properties.name}" }, { "example": "transform-projection", "component": "GeoPath", "path": "/docs/components/GeoPath/transform-projection", - "lineNumber": 125, + "lineNumber": 126, "line": "" }, { "example": "transform-projection", "component": "GeoPath", "path": "/docs/components/GeoPath/transform-projection", - "lineNumber": 126, + "lineNumber": 127, "line": "" }, { "example": "transform-projection", "component": "GeoPath", "path": "/docs/components/GeoPath/transform-projection", - "lineNumber": 127, + "lineNumber": 128, + "line": "" + }, + { + "example": "transform-world-canvas", + "component": "GeoPath", + "path": "/docs/components/GeoPath/transform-world-canvas", + "lineNumber": 116, + "line": "" + }, + { + "example": "transform-world-projection", + "component": "GeoPath", + "path": "/docs/components/GeoPath/transform-world-projection", + "lineNumber": 134, + "line": "" + }, + { + "example": "transform-world-projection", + "component": "GeoPath", + "path": "/docs/components/GeoPath/transform-world-projection", + "lineNumber": 138, + "line": "{data.properties.name}" + }, + { + "example": "transform-world-projection", + "component": "GeoPath", + "path": "/docs/components/GeoPath/transform-world-projection", + "lineNumber": 139, + "line": "" + }, + { + "example": "transform-world-projection", + "component": "GeoPath", + "path": "/docs/components/GeoPath/transform-world-projection", + "lineNumber": 140, + "line": "" + }, + { + "example": "transform-world-projection", + "component": "GeoPath", + "path": "/docs/components/GeoPath/transform-world-projection", + "lineNumber": 141, "line": "" }, { @@ -4089,72 +4418,121 @@ "example": "us-airports", "component": "GeoPoint", "path": "/docs/components/GeoPoint/us-airports", - "lineNumber": 69, + "lineNumber": 63, "line": "" }, { "example": "us-airports", "component": "GeoPoint", "path": "/docs/components/GeoPoint/us-airports", - "lineNumber": 71, + "lineNumber": 65, "line": "{data.name}" }, { "example": "us-airports", "component": "GeoPoint", "path": "/docs/components/GeoPoint/us-airports", - "lineNumber": 72, + "lineNumber": 66, "line": "" }, { "example": "us-airports", "component": "GeoPoint", "path": "/docs/components/GeoPoint/us-airports", - "lineNumber": 73, + "lineNumber": 67, "line": "" }, { "example": "us-airports", "component": "GeoPoint", "path": "/docs/components/GeoPoint/us-airports", - "lineNumber": 74, + "lineNumber": 68, "line": "" }, { "example": "world-airports", "component": "GeoPoint", "path": "/docs/components/GeoPoint/world-airports", - "lineNumber": 66, + "lineNumber": 60, "line": "" }, { "example": "world-airports", "component": "GeoPoint", "path": "/docs/components/GeoPoint/world-airports", - "lineNumber": 68, + "lineNumber": 62, "line": "{data.name}" }, { "example": "world-airports", "component": "GeoPoint", "path": "/docs/components/GeoPoint/world-airports", - "lineNumber": 69, + "lineNumber": 63, "line": "" }, { "example": "world-airports", "component": "GeoPoint", "path": "/docs/components/GeoPoint/world-airports", - "lineNumber": 70, + "lineNumber": 64, "line": "" }, { "example": "world-airports", "component": "GeoPoint", "path": "/docs/components/GeoPoint/world-airports", - "lineNumber": 71, + "lineNumber": 65, "line": "" }, + { + "example": "geojson-preview", + "component": "GeoProjection", + "path": "/docs/components/GeoProjection/geojson-preview", + "lineNumber": 126, + "line": "" + }, + { + "example": "geojson-preview", + "component": "GeoProjection", + "path": "/docs/components/GeoProjection/geojson-preview", + "lineNumber": 128, + "line": "" + }, + { + "example": "geojson-preview", + "component": "GeoProjection", + "path": "/docs/components/GeoProjection/geojson-preview", + "lineNumber": 130, + "line": "" + }, + { + "example": "projection-playground", + "component": "GeoProjection", + "path": "/docs/components/GeoProjection/projection-playground", + "lineNumber": 84, + "line": "" + }, + { + "example": "topojson-preview", + "component": "GeoProjection", + "path": "/docs/components/GeoProjection/topojson-preview", + "lineNumber": 133, + "line": "" + }, + { + "example": "topojson-preview", + "component": "GeoProjection", + "path": "/docs/components/GeoProjection/topojson-preview", + "lineNumber": 135, + "line": "" + }, + { + "example": "topojson-preview", + "component": "GeoProjection", + "path": "/docs/components/GeoProjection/topojson-preview", + "lineNumber": 137, + "line": "" + }, { "example": "basic", "component": "GeoTile", @@ -4264,35 +4642,35 @@ "example": "zoomable-seamless-layers", "component": "GeoTile", "path": "/docs/components/GeoTile/zoomable-seamless-layers", - "lineNumber": 91, + "lineNumber": 94, "line": "" }, { "example": "zoomable-seamless-layers", "component": "GeoTile", "path": "/docs/components/GeoTile/zoomable-seamless-layers", - "lineNumber": 95, + "lineNumber": 98, "line": "{data.properties.name}" }, { "example": "zoomable-seamless-layers", "component": "GeoTile", "path": "/docs/components/GeoTile/zoomable-seamless-layers", - "lineNumber": 96, + "lineNumber": 99, "line": "" }, { "example": "zoomable-seamless-layers", "component": "GeoTile", "path": "/docs/components/GeoTile/zoomable-seamless-layers", - "lineNumber": 97, + "lineNumber": 100, "line": "" }, { "example": "zoomable-seamless-layers", "component": "GeoTile", "path": "/docs/components/GeoTile/zoomable-seamless-layers", - "lineNumber": 98, + "lineNumber": 101, "line": "" }, { @@ -4337,6 +4715,41 @@ "lineNumber": 68, "line": "" }, + { + "example": "college-football-map", + "component": "Image", + "path": "/docs/components/Image/college-football-map", + "lineNumber": 94, + "line": "" + }, + { + "example": "college-football-map", + "component": "Image", + "path": "/docs/components/Image/college-football-map", + "lineNumber": 96, + "line": "{data.team}" + }, + { + "example": "college-football-map", + "component": "Image", + "path": "/docs/components/Image/college-football-map", + "lineNumber": 97, + "line": "" + }, + { + "example": "college-football-map", + "component": "Image", + "path": "/docs/components/Image/college-football-map", + "lineNumber": 98, + "line": "" + }, + { + "example": "college-football-map", + "component": "Image", + "path": "/docs/components/Image/college-football-map", + "lineNumber": 99, + "line": "" + }, { "example": "custom", "component": "LineChart", @@ -4379,34 +4792,6 @@ "lineNumber": 25, "line": "" - }, - { - "example": "gradient-encoding", - "component": "LineChart", - "path": "/docs/components/LineChart/gradient-encoding", - "lineNumber": 36, - "line": "{format(context.x(data))}" - }, - { - "example": "gradient-encoding", - "component": "LineChart", - "path": "/docs/components/LineChart/gradient-encoding", - "lineNumber": 37, - "line": "" - }, - { - "example": "gradient-encoding", - "component": "LineChart", - "path": "/docs/components/LineChart/gradient-encoding", - "lineNumber": 38, - "line": "" - }, { "example": "gradient-threshold", "component": "LineChart", @@ -4495,28 +4880,28 @@ "example": "series-individual-tooltip", "component": "LineChart", "path": "/docs/components/LineChart/series-individual-tooltip", - "lineNumber": 60, + "lineNumber": 64, "line": "" }, { "example": "series-individual-tooltip", "component": "LineChart", "path": "/docs/components/LineChart/series-individual-tooltip", - "lineNumber": 62, + "lineNumber": 66, "line": "{format(context.x(data))}" }, { "example": "series-individual-tooltip", "component": "LineChart", "path": "/docs/components/LineChart/series-individual-tooltip", - "lineNumber": 63, + "lineNumber": 67, "line": "" }, { "example": "series-individual-tooltip", "component": "LineChart", "path": "/docs/components/LineChart/series-individual-tooltip", - "lineNumber": 64, + "lineNumber": 68, "line": "" }, { @@ -4614,35 +4999,35 @@ "example": "tooltip", "component": "Pie", "path": "/docs/components/Pie/tooltip", - "lineNumber": 24, + "lineNumber": 23, "line": "" }, { "example": "tooltip", "component": "Pie", "path": "/docs/components/Pie/tooltip", - "lineNumber": 26, + "lineNumber": 25, "line": "" }, { "example": "tooltip", "component": "Pie", "path": "/docs/components/Pie/tooltip", - "lineNumber": 27, + "lineNumber": 26, "line": "" }, { "example": "tooltip", "component": "Pie", "path": "/docs/components/Pie/tooltip", - "lineNumber": 28, + "lineNumber": 27, "line": "" }, { "example": "tooltip", "component": "Pie", "path": "/docs/components/Pie/tooltip", - "lineNumber": 29, + "lineNumber": 28, "line": "" }, + { + "example": "zoomable-bubble", + "component": "ScatterChart", + "path": "/docs/components/ScatterChart/zoomable-bubble", + "lineNumber": 60, + "line": "" + }, + { + "example": "zoomable-bubble", + "component": "ScatterChart", + "path": "/docs/components/ScatterChart/zoomable-bubble", + "lineNumber": 62, + "line": "{data.title}" + }, + { + "example": "zoomable-bubble", + "component": "ScatterChart", + "path": "/docs/components/ScatterChart/zoomable-bubble", + "lineNumber": 63, + "line": "" + }, + { + "example": "zoomable-bubble", + "component": "ScatterChart", + "path": "/docs/components/ScatterChart/zoomable-bubble", + "lineNumber": 64, + "line": "" + }, + { + "example": "zoomable-bubble", + "component": "ScatterChart", + "path": "/docs/components/ScatterChart/zoomable-bubble", + "lineNumber": 65, + "line": "" + }, + { + "example": "zoomable-bubble", + "component": "ScatterChart", + "path": "/docs/components/ScatterChart/zoomable-bubble", + "lineNumber": 66, + "line": "" + }, { "example": "multiple-series", "component": "Spline", @@ -5863,6 +6290,41 @@ "lineNumber": 86, "line": "" }, + { + "example": "planet-distances", + "component": "TransformContext", + "path": "/docs/components/TransformContext/planet-distances", + "lineNumber": 259, + "line": "" + }, + { + "example": "planet-distances", + "component": "TransformContext", + "path": "/docs/components/TransformContext/planet-distances", + "lineNumber": 261, + "line": "{data.name}" + }, + { + "example": "planet-distances", + "component": "TransformContext", + "path": "/docs/components/TransformContext/planet-distances", + "lineNumber": 262, + "line": "" + }, + { + "example": "planet-distances", + "component": "TransformContext", + "path": "/docs/components/TransformContext/planet-distances", + "lineNumber": 263, + "line": "" + }, + { + "example": "planet-distances", + "component": "TransformContext", + "path": "/docs/components/TransformContext/planet-distances", + "lineNumber": 264, + "line": "" + }, { "example": "complex", "component": "Treemap", @@ -5946,7 +6408,84 @@ "path": "/docs/components/Treemap/playground", "lineNumber": 193, "line": "" + }, + { + "example": "election-wind-map", + "component": "Vector", + "path": "/docs/components/Vector/election-wind-map", + "lineNumber": 112, + "line": "" + }, + { + "example": "election-wind-map", + "component": "Vector", + "path": "/docs/components/Vector/election-wind-map", + "lineNumber": 114, + "line": "{data.county_name}, {data.state_name}" + }, + { + "example": "election-wind-map", + "component": "Vector", + "path": "/docs/components/Vector/election-wind-map", + "lineNumber": 115, + "line": "" + }, + { + "example": "election-wind-map", + "component": "Vector", + "path": "/docs/components/Vector/election-wind-map", + "lineNumber": 116, + "line": "" + }, + { + "example": "election-wind-map", + "component": "Vector", + "path": "/docs/components/Vector/election-wind-map", + "lineNumber": 117, + "line": "" + }, + { + "example": "election-wind-map", + "component": "Vector", + "path": "/docs/components/Vector/election-wind-map", + "lineNumber": 118, + "line": "" + }, + { + "example": "wind-map", + "component": "Vector", + "path": "/docs/components/Vector/wind-map", + "lineNumber": 51, + "line": "" + }, + { + "example": "wind-map", + "component": "Vector", + "path": "/docs/components/Vector/wind-map", + "lineNumber": 53, + "line": "Wind" + }, + { + "example": "wind-map", + "component": "Vector", + "path": "/docs/components/Vector/wind-map", + "lineNumber": 54, + "line": "" + }, + { + "example": "wind-map", + "component": "Vector", + "path": "/docs/components/Vector/wind-map", + "lineNumber": 55, + "line": "" + }, + { + "example": "wind-map", + "component": "Vector", + "path": "/docs/components/Vector/wind-map", + "lineNumber": 56, + "line": "" } ], - "updatedAt": "2026-02-13T15:08:03.059Z" + "updatedAt": "2026-03-31T03:03:48.869Z" } \ No newline at end of file diff --git a/docs/src/examples/catalog/TransformContext.json b/docs/src/examples/catalog/TransformContext.json index 8080c3db4..9ba516174 100644 --- a/docs/src/examples/catalog/TransformContext.json +++ b/docs/src/examples/catalog/TransformContext.json @@ -1,6 +1,38 @@ { "component": "TransformContext", "examples": [ + { + "name": "pan-zoom-axes", + "title": "pan zoom axes", + "path": "/docs/components/TransformContext/pan-zoom-axes", + "components": [ + { + "component": "Chart", + "lineNumber": 19, + "line": "" + }, + { + "component": "LinearGradient", + "lineNumber": 41, + "line": "" + }, + { + "component": "Rect", + "lineNumber": 43, + "line": "" - }, { "component": "Layer", "lineNumber": 18, "line": "" + }, + { + "component": "Image", + "lineNumber": 19, + "line": "" + }, + { + "component": "Line", + "lineNumber": 234, + "line": "" + }, + { + "component": "Text", + "lineNumber": 245, + "line": "" + }, + { + "component": "Highlight", + "lineNumber": 256, + "line": "" + }, + { + "component": "Tooltip", + "lineNumber": 259, + "line": "" } ] }, @@ -71,8 +150,30 @@ "line": "" + }, + { + "component": "Image", + "lineNumber": 22, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 19, + "line": "" + }, + { + "component": "Circle", + "lineNumber": 23, + "line": "" + }, + { + "component": "Vector", + "lineNumber": 24, + "line": "" + } + ] + }, + { + "name": "basic", + "title": "basic", + "path": "/docs/components/Vector/basic", + "components": [ + { + "component": "Chart", + "lineNumber": 20, + "line": "" + }, + { + "component": "Vector", + "lineNumber": 26, + "line": "" + } + ] + }, + { + "name": "data-mode", + "title": "data mode", + "path": "/docs/components/Vector/data-mode", + "components": [ + { + "component": "Chart", + "lineNumber": 16, + "line": "" + }, + { + "component": "Vector", + "lineNumber": 38, + "line": "" + }, + { + "component": "GeoPath", + "lineNumber": 85, + "line": "" + }, + { + "component": "Vector", + "lineNumber": 87, + "line": "" + } + ] + }, + { + "name": "shapes", + "title": "shapes", + "path": "/docs/components/Vector/shapes", + "components": [ + { + "component": "Chart", + "lineNumber": 26, + "line": "" + }, + { + "component": "Layer", + "lineNumber": 27, + "line": "" + }, + { + "component": "Text", + "lineNumber": 29, + "line": "arrow" + }, + { + "component": "Vector", + "lineNumber": 30, + "line": "" + }, + { + "component": "Line", + "lineNumber": 69, + "line": "" + }, + { + "component": "Circle", + "lineNumber": 70, + "line": "" + }, + { + "component": "Polygon", + "lineNumber": 81, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 37, + "line": "" + }, + { + "component": "Vector", + "lineNumber": 40, + "line": "" + } + ] + } + ], + "usage": [ + { + "example": "spike-map", + "component": "GeoPath", + "path": "/docs/components/GeoPath/spike-map", + "lineNumber": 83, + "line": "" + }, + { + "example": "anchor", + "component": "Vector", + "path": "/docs/components/Vector/anchor", + "lineNumber": 28, + "line": "" + }, + { + "example": "anchor", + "component": "Vector", + "path": "/docs/components/Vector/anchor", + "lineNumber": 32, + "line": "" + }, + { + "example": "basic", + "component": "Vector", + "path": "/docs/components/Vector/basic", + "lineNumber": 26, + "line": "" + }, + { + "example": "basic", + "component": "Vector", + "path": "/docs/components/Vector/basic", + "lineNumber": 29, + "line": "" + }, + { + "example": "data-mode", + "component": "Vector", + "path": "/docs/components/Vector/data-mode", + "lineNumber": 38, + "line": "" + }, + { + "example": "shapes", + "component": "Vector", + "path": "/docs/components/Vector/shapes", + "lineNumber": 36, + "line": "" + }, + { + "example": "shapes", + "component": "Vector", + "path": "/docs/components/Vector/shapes", + "lineNumber": 40, + "line": "" + }, + { + "example": "shapes", + "component": "Vector", + "path": "/docs/components/Vector/shapes", + "lineNumber": 78, + "line": "" + }, + { + "example": "shapes", + "component": "Vector", + "path": "/docs/components/Vector/shapes", + "lineNumber": 101, + "line": "" + }, + { + "example": "wind-map", + "component": "Vector", + "path": "/docs/components/Vector/wind-map", + "lineNumber": 40, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 56, + "line": "" + }, + { + "component": "Violin", + "lineNumber": 59, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 49, + "line": "" + }, + { + "component": "Violin", + "lineNumber": 52, + "line": "" + } + ] + }, + { + "name": "horizontal", + "title": "horizontal", + "path": "/docs/components/Violin/horizontal", + "components": [ + { + "component": "Chart", + "lineNumber": 39, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 50, + "line": "" + }, + { + "component": "Violin", + "lineNumber": 53, + "line": "" + }, + { + "component": "Axis", + "lineNumber": 49, + "line": "" + }, + { + "component": "Violin", + "lineNumber": 52, + "line": "" + }, + { + "example": "horizontal", + "component": "Violin", + "path": "/docs/components/Violin/horizontal", + "lineNumber": 53, + "line": " - {#snippet arc({ props, seriesIndex, visibleSeries })} + {#snippet arc({ context, props, seriesIndex })} {#snippet children({ getArcTextProps })} diff --git a/docs/src/examples/components/Area/clipped-area-on-tooltip.svelte b/docs/src/examples/components/Area/clipped-area-on-tooltip.svelte index f2c1a26a3..a97b8e463 100644 --- a/docs/src/examples/components/Area/clipped-area-on-tooltip.svelte +++ b/docs/src/examples/components/Area/clipped-area-on-tooltip.svelte @@ -24,7 +24,7 @@ yDomain={[0, null]} yNice padding={{ top: 20, bottom: 20 }} - tooltip={{ mode: 'quadtree-x' }} + tooltipContext={{ mode: 'quadtree-x' }} height={300} > {#snippet children({ context })} diff --git a/docs/src/examples/components/Area/highlight-color-based-on-value-using-color-scale.svelte b/docs/src/examples/components/Area/highlight-color-based-on-value-using-color-scale.svelte index af9cfffea..b1e4a2c15 100644 --- a/docs/src/examples/components/Area/highlight-color-based-on-value-using-color-scale.svelte +++ b/docs/src/examples/components/Area/highlight-color-based-on-value-using-color-scale.svelte @@ -18,7 +18,7 @@ y="value" yNice padding={20} - tooltip={{ mode: 'quadtree-x' }} + tooltipContext={{ mode: 'quadtree-x' }} c={(d) => (d.value < 0 ? 'under' : 'over')} cDomain={['over', 'under']} cRange={['var(--color-success)', 'var(--color-danger)']} diff --git a/docs/src/examples/components/Area/highlight-color-based-on-value-using-tooltip-slot-prop.svelte b/docs/src/examples/components/Area/highlight-color-based-on-value-using-tooltip-slot-prop.svelte index c9e0c9efe..cb2aee4cf 100644 --- a/docs/src/examples/components/Area/highlight-color-based-on-value-using-tooltip-slot-prop.svelte +++ b/docs/src/examples/components/Area/highlight-color-based-on-value-using-tooltip-slot-prop.svelte @@ -12,7 +12,7 @@ export { data }; - + {#snippet children({ context })} diff --git a/docs/src/examples/components/Area/multiple-series-highlight-on-hover.svelte b/docs/src/examples/components/Area/multiple-series-highlight-on-hover.svelte index b873781c9..bfb18e3ad 100644 --- a/docs/src/examples/components/Area/multiple-series-highlight-on-hover.svelte +++ b/docs/src/examples/components/Area/multiple-series-highlight-on-hover.svelte @@ -47,7 +47,7 @@ cDomain={Object.keys(fruitColors)} cRange={Object.values(fruitColors)} padding={defaultChartPadding({ top: 10, bottom: 20, left: 20, right: 60 })} - tooltip={{ mode: 'quadtree' }} + tooltipContext={{ mode: 'quadtree' }} height={300} > {#snippet children({ context })} diff --git a/docs/src/examples/components/Area/multiple-series-using-overrides.svelte b/docs/src/examples/components/Area/multiple-series-using-overrides.svelte index 79eb8aec7..74a8dde62 100644 --- a/docs/src/examples/components/Area/multiple-series-using-overrides.svelte +++ b/docs/src/examples/components/Area/multiple-series-using-overrides.svelte @@ -27,7 +27,7 @@ yDomain={[0, null]} yNice padding={{ top: 20, left: 20, bottom: 20, right: 15 }} - tooltip={{ mode: 'quadtree-x' }} + tooltipContext={{ mode: 'quadtree-x' }} height={300} > diff --git a/docs/src/examples/components/Area/multiple-series-with-labels.svelte b/docs/src/examples/components/Area/multiple-series-with-labels.svelte index 542b5709e..2a9bcffec 100644 --- a/docs/src/examples/components/Area/multiple-series-with-labels.svelte +++ b/docs/src/examples/components/Area/multiple-series-with-labels.svelte @@ -34,7 +34,7 @@ cDomain={Object.keys(fruitColors)} cRange={Object.values(fruitColors)} padding={20} - tooltip={{ mode: 'quadtree' }} + tooltipContext={{ mode: 'quadtree' }} height={300} > {#snippet children({ context })} diff --git a/docs/src/examples/components/Area/multiple-series.svelte b/docs/src/examples/components/Area/multiple-series.svelte index c7e6fedb9..42dd76459 100644 --- a/docs/src/examples/components/Area/multiple-series.svelte +++ b/docs/src/examples/components/Area/multiple-series.svelte @@ -45,7 +45,7 @@ c="fruit" cDomain={Object.keys(fruitColors)} cRange={Object.values(fruitColors)} - tooltip={{ mode: 'quadtree' }} + tooltipContext={{ mode: 'quadtree' }} padding={defaultChartPadding({ top: 10, bottom: 15, left: 20, right: 60 })} height={300} > diff --git a/docs/src/examples/components/Area/oscilloscope-ridgeline.svelte b/docs/src/examples/components/Area/oscilloscope-ridgeline.svelte new file mode 100644 index 000000000..d6d1038a9 --- /dev/null +++ b/docs/src/examples/components/Area/oscilloscope-ridgeline.svelte @@ -0,0 +1,163 @@ + + +
+ + + + + + +
+ + + + [0, h]} + {padding} + {height} + tooltipContext={{ mode: 'manual' }} +> + + {#each scaledHistory.toReversed() as frame, i (i)} + {@const rowY = step + i * step} + + 0} + y1={(d) => d.value} + curve={curveBasis} + class="fill-surface-100" + line={{ class: 'stroke-surface-content' }} + /> + + {/each} + + diff --git a/docs/src/examples/components/Area/ridgeline-kde.svelte b/docs/src/examples/components/Area/ridgeline-kde.svelte new file mode 100644 index 000000000..2cbbec957 --- /dev/null +++ b/docs/src/examples/components/Area/ridgeline-kde.svelte @@ -0,0 +1,197 @@ + + +
+ + + + + +
+ + [0, height]} + {padding} + {height} +> + + {#each seriesData as series, i (series.name)} + {@const rowY = step + i * step} + + 0} + y1={(d) => zScale(d.value)} + curve={curveBasis} + class={opaque ? 'fill-primary-200 dark:fill-primary-900' : 'fill-primary/20'} + line={{ class: 'stroke-primary stroke-1' }} + /> + + {/each} + + {#each categories as name, i (name)} + {@const rowY = step + i * step} + + {/each} + + + + diff --git a/docs/src/examples/components/Area/ridgeline.svelte b/docs/src/examples/components/Area/ridgeline.svelte new file mode 100644 index 000000000..2f0bde813 --- /dev/null +++ b/docs/src/examples/components/Area/ridgeline.svelte @@ -0,0 +1,107 @@ + + +
+ + + + + +
+ + [0, height]} + {padding} + {height} +> + + {#each seriesData as series, i (series.name)} + {@const rowY = step + i * step} + + 0} + y1={(d) => zScale(d.value)} + curve={curveBasis} + class={opaque ? 'fill-primary-200 dark:fill-primary-900' : 'fill-primary/20'} + line={{ class: 'stroke-primary stroke-1' }} + /> + + {/each} + + {#each categories as name, i} + {@const rowY = step + i * step} + + {/each} + + + + diff --git a/docs/src/examples/components/Area/stack.svelte b/docs/src/examples/components/Area/stack.svelte index ac237af83..229e82417 100644 --- a/docs/src/examples/components/Area/stack.svelte +++ b/docs/src/examples/components/Area/stack.svelte @@ -49,7 +49,7 @@ c="key" cDomain={Object.keys(fruitColors)} cRange={Object.values(fruitColors)} - tooltip={{ mode: 'quadtree-x' }} + tooltipContext={{ mode: 'quadtree-x' }} padding={defaultChartPadding({ left: 25, bottom: 20, right: 15 })} height={300} > diff --git a/docs/src/examples/components/Area/threshold-with-lineargradient-over-under.svelte b/docs/src/examples/components/Area/threshold-with-lineargradient-over-under.svelte index ed941a2ca..b66f8b271 100644 --- a/docs/src/examples/components/Area/threshold-with-lineargradient-over-under.svelte +++ b/docs/src/examples/components/Area/threshold-with-lineargradient-over-under.svelte @@ -12,7 +12,7 @@ export { data }; - + {#snippet children({ context })} {@const thresholdValue = 0} {@const thresholdOffset = context.yScale(thresholdValue) / context.containerHeight} diff --git a/docs/src/examples/components/Area/threshold-with-lineargradient.svelte b/docs/src/examples/components/Area/threshold-with-lineargradient.svelte index 159416198..e9e749ffc 100644 --- a/docs/src/examples/components/Area/threshold-with-lineargradient.svelte +++ b/docs/src/examples/components/Area/threshold-with-lineargradient.svelte @@ -12,7 +12,7 @@ export { data }; - + {#snippet children({ context })} {@const thresholdValue = 0} {@const thresholdOffset = context.yScale(thresholdValue) / context.containerHeight} diff --git a/docs/src/examples/components/Area/threshold-with-rectclippath-over-under.svelte b/docs/src/examples/components/Area/threshold-with-rectclippath-over-under.svelte index 245b4d259..27bf87b30 100644 --- a/docs/src/examples/components/Area/threshold-with-rectclippath-over-under.svelte +++ b/docs/src/examples/components/Area/threshold-with-rectclippath-over-under.svelte @@ -12,7 +12,7 @@ export { data }; - + {#snippet children({ context })} diff --git a/docs/src/examples/components/Area/threshold-with-rectclippath.svelte b/docs/src/examples/components/Area/threshold-with-rectclippath.svelte index e6089e98e..0b910971b 100644 --- a/docs/src/examples/components/Area/threshold-with-rectclippath.svelte +++ b/docs/src/examples/components/Area/threshold-with-rectclippath.svelte @@ -12,7 +12,7 @@ export { data }; - + {#snippet children({ context })} diff --git a/docs/src/examples/components/Area/tween-on-mount.svelte b/docs/src/examples/components/Area/tween-on-mount.svelte new file mode 100644 index 000000000..65a8d66aa --- /dev/null +++ b/docs/src/examples/components/Area/tween-on-mount.svelte @@ -0,0 +1,21 @@ + + + + + + + + + {#if show} + + {/if} + + diff --git a/docs/src/examples/components/Area/with-tooltip-and-highlight.svelte b/docs/src/examples/components/Area/with-tooltip-and-highlight.svelte index 48a983388..8232b2442 100644 --- a/docs/src/examples/components/Area/with-tooltip-and-highlight.svelte +++ b/docs/src/examples/components/Area/with-tooltip-and-highlight.svelte @@ -14,7 +14,7 @@ yDomain={[0, null]} yNice padding={20} - tooltip={{ mode: 'quadtree-x' }} + tooltipContext={{ mode: 'quadtree-x' }} height={300} > diff --git a/docs/src/examples/components/AreaChart/all-zero.svelte b/docs/src/examples/components/AreaChart/all-zero.svelte new file mode 100644 index 000000000..138e61fce --- /dev/null +++ b/docs/src/examples/components/AreaChart/all-zero.svelte @@ -0,0 +1,11 @@ + + + diff --git a/docs/src/examples/components/AreaChart/band-scale.svelte b/docs/src/examples/components/AreaChart/band-scale.svelte index cf5f75561..455d1fb1c 100644 --- a/docs/src/examples/components/AreaChart/band-scale.svelte +++ b/docs/src/examples/components/AreaChart/band-scale.svelte @@ -12,7 +12,7 @@ xScale={scaleBand()} x="fruit" y="value" - tooltip={{ + tooltipContext={{ mode: 'band' }} padding={defaultChartPadding({ left: 30 })} diff --git a/docs/src/examples/components/AreaChart/brush-sync.svelte b/docs/src/examples/components/AreaChart/brush-sync.svelte index 2c65636e8..bc09253b4 100644 --- a/docs/src/examples/components/AreaChart/brush-sync.svelte +++ b/docs/src/examples/components/AreaChart/brush-sync.svelte @@ -25,11 +25,10 @@ x="date" y="value" {xDomain} - brush={{ onBrushEnd: (e) => (xDomain = e.xDomain) }} + brush={{ onBrushEnd: (e) => { xDomain = e.brush.x; e.brush.reset(); } }} + motion={{ type: 'spring' }} props={{ - area: { motion: { type: 'tween', duration: 200 } }, xAxis: { - motion: { type: 'tween', duration: 200 }, tickMultiline: true } }} @@ -44,11 +43,10 @@ x="date" y="value" {xDomain} - brush={{ onBrushEnd: (e) => (xDomain = e.xDomain) }} + brush={{ onBrushEnd: (e) => { xDomain = e.brush.x; e.brush.reset(); } }} + motion={{ type: 'spring' }} props={{ - area: { motion: { type: 'tween', duration: 200 } }, xAxis: { - motion: { type: 'tween', duration: 200 }, tickMultiline: true } }} diff --git a/docs/src/examples/components/AreaChart/brush.svelte b/docs/src/examples/components/AreaChart/brush.svelte index 931232f44..0fb6a5558 100644 --- a/docs/src/examples/components/AreaChart/brush.svelte +++ b/docs/src/examples/components/AreaChart/brush.svelte @@ -11,9 +11,9 @@ x="date" y="value" brush + motion={{ type: 'spring' }} props={{ - area: { motion: { type: 'tween', duration: 200 } }, - xAxis: { motion: { type: 'tween', duration: 200 }, tickMultiline: true }, + xAxis: { tickMultiline: true }, canvas: { class: 'cursor-crosshair' }, diff --git a/docs/src/examples/components/AreaChart/funnel.svelte b/docs/src/examples/components/AreaChart/funnel.svelte index 1586e0165..45b6de097 100644 --- a/docs/src/examples/components/AreaChart/funnel.svelte +++ b/docs/src/examples/components/AreaChart/funnel.svelte @@ -54,7 +54,7 @@ xTicks: funnelSegments.map((d) => d.index) } }} - tooltip={false} + tooltipContext={false} height={400} > {#snippet marks({ context })} diff --git a/docs/src/examples/components/AreaChart/motion-tween.svelte b/docs/src/examples/components/AreaChart/motion-tween.svelte new file mode 100644 index 000000000..dd9aa853a --- /dev/null +++ b/docs/src/examples/components/AreaChart/motion-tween.svelte @@ -0,0 +1,22 @@ + + + + +{#if show} + +{/if} diff --git a/docs/src/examples/components/AreaChart/series-individual-tooltip.svelte b/docs/src/examples/components/AreaChart/series-individual-tooltip.svelte index ba98c6f9c..2c359615b 100644 --- a/docs/src/examples/components/AreaChart/series-individual-tooltip.svelte +++ b/docs/src/examples/components/AreaChart/series-individual-tooltip.svelte @@ -50,8 +50,8 @@ padding={defaultChartPadding({ right: 15 })} height={300} > - {#snippet marks({ series, context })} - {#each series as s} + {#snippet marks({ context })} + {#each context.series.series as s} {@const activeSeries = context.tooltip?.data == null || context.tooltip?.data?.fruit === s.key} @@ -61,13 +61,17 @@ {/each} {/snippet} - {#snippet highlight({ series, context })} - {@const activeSeries = series.find((s) => s.key === context.tooltip?.data?.fruit)} + {#snippet highlight({ context })} + {@const activeSeries = context.series.series.find( + (s) => s.key === context.tooltip?.data?.fruit + )} {/snippet} - {#snippet tooltip({ series, context })} - {@const activeSeries = series.find((s) => s.key === context.tooltip?.data?.fruit)} + {#snippet tooltip({ context })} + {@const activeSeries = context.series.series.find( + (s) => s.key === context.tooltip?.data?.fruit + )} {#snippet children({ data })} {format(context.x(data))} diff --git a/docs/src/examples/components/AreaChart/series-stack-gradient.svelte b/docs/src/examples/components/AreaChart/series-stack-gradient.svelte index b82dd6dd2..f3cf82f1b 100644 --- a/docs/src/examples/components/AreaChart/series-stack-gradient.svelte +++ b/docs/src/examples/components/AreaChart/series-stack-gradient.svelte @@ -30,8 +30,8 @@ padding={defaultChartPadding({ right: 10 })} height={300} > - {#snippet marks({ series, getAreaProps })} - {#each series as s, i (s.key)} + {#snippet marks({ context })} + {#each context.series.series as s, i (s.key)} {#snippet children({ gradient })} - + {/snippet} {/each} diff --git a/docs/src/examples/components/Axis/time-scale-brush-multiline.svelte b/docs/src/examples/components/Axis/time-scale-brush-multiline.svelte index 3fef9474a..644fc0cdd 100644 --- a/docs/src/examples/components/Axis/time-scale-brush-multiline.svelte +++ b/docs/src/examples/components/Axis/time-scale-brush-multiline.svelte @@ -19,9 +19,9 @@ yDomain={[0, 100]} padding={defaultChartPadding({ top: 30, bottom: 30, left: 25, right: 25 })} brush={{ - resetOnEnd: true, onBrushEnd: (e) => { - xDomain = e.xDomain; + xDomain = e.brush.x; + e.brush.reset(); } }} height={200} @@ -36,10 +36,9 @@ xDomain={initialXDomain} padding={{ top: 20, bottom: 20, left: 20, right: 20 }} brush={{ - mode: 'separated', - xDomain, + x: xDomain as any, onChange: (e) => { - xDomain = e.xDomain; + xDomain = e.brush.x; } }} height={80} diff --git a/docs/src/examples/components/Axis/time-scale-brush.svelte b/docs/src/examples/components/Axis/time-scale-brush.svelte index f9d720fd9..e5012e560 100644 --- a/docs/src/examples/components/Axis/time-scale-brush.svelte +++ b/docs/src/examples/components/Axis/time-scale-brush.svelte @@ -19,9 +19,9 @@ yDomain={[0, 100]} padding={{ top: 20, bottom: 20, left: 20, right: 20 }} brush={{ - resetOnEnd: true, onBrushEnd: (e) => { - xDomain = e.xDomain; + xDomain = e.brush.x; + e.brush.reset(); } }} height={200} @@ -36,10 +36,9 @@ xDomain={initialXDomain} padding={{ top: 20, bottom: 20, left: 20, right: 20 }} brush={{ - mode: 'separated', - xDomain, + x: xDomain as any, onChange: (e) => { - xDomain = e.xDomain; + xDomain = e.brush.x; } }} height={80} diff --git a/docs/src/examples/components/BarChart/brush-pan-zoom.svelte b/docs/src/examples/components/BarChart/brush-pan-zoom.svelte new file mode 100644 index 000000000..a9e7af28e --- /dev/null +++ b/docs/src/examples/components/BarChart/brush-pan-zoom.svelte @@ -0,0 +1,24 @@ + + + diff --git a/docs/src/examples/components/BarChart/brushing.svelte b/docs/src/examples/components/BarChart/brush.svelte similarity index 100% rename from docs/src/examples/components/BarChart/brushing.svelte rename to docs/src/examples/components/BarChart/brush.svelte diff --git a/docs/src/examples/components/BarChart/duration-labels.svelte b/docs/src/examples/components/BarChart/duration-labels.svelte new file mode 100644 index 000000000..12f6d5087 --- /dev/null +++ b/docs/src/examples/components/BarChart/duration-labels.svelte @@ -0,0 +1,110 @@ + + + + + Inside + Outside + + + + + {#snippet tooltip({ context })} + + {#snippet children({ data })} + {format(context.y(data))} + + + + + {/snippet} + + {/snippet} + diff --git a/docs/src/examples/components/BarChart/gradient.svelte b/docs/src/examples/components/BarChart/gradient.svelte index a773a94d8..b94ecd41f 100644 --- a/docs/src/examples/components/BarChart/gradient.svelte +++ b/docs/src/examples/components/BarChart/gradient.svelte @@ -13,11 +13,11 @@ - {#snippet marks({ series, getBarsProps })} - {#each series as s, i (s.key)} + {#snippet marks({ context })} + {#each context.series.visibleSeries as s (s.key)} {#snippet children({ gradient })} - + {/snippet} {/each} diff --git a/docs/src/examples/components/BarChart/group-series-bar-click.svelte b/docs/src/examples/components/BarChart/group-series-bar-click.svelte index b2e3b90b5..c9db2b316 100644 --- a/docs/src/examples/components/BarChart/group-series-bar-click.svelte +++ b/docs/src/examples/components/BarChart/group-series-bar-click.svelte @@ -6,6 +6,8 @@ export { data }; + + { console.log(e, detail); alert(JSON.stringify(detail)); diff --git a/docs/src/examples/components/BarChart/group-series-labels.svelte b/docs/src/examples/components/BarChart/group-series-labels.svelte index bfe8af7ac..c37724b91 100644 --- a/docs/src/examples/components/BarChart/group-series-labels.svelte +++ b/docs/src/examples/components/BarChart/group-series-labels.svelte @@ -1,5 +1,5 @@ - + - - {#snippet marks({ context })} - {#each data as d} - - {/each} + {#snippet marks()} + 0} x1="x1" y1="length" insets={{ x: 1 }} class="fill-primary" /> {/snippet} {#snippet tooltip()} @@ -75,4 +69,4 @@ {/snippet} {/snippet} - + diff --git a/docs/src/examples/components/BarChart/histogram-date-time-interval.svelte b/docs/src/examples/components/BarChart/histogram-date-time-interval.svelte index e3c88a6c3..9b5efb95d 100644 --- a/docs/src/examples/components/BarChart/histogram-date-time-interval.svelte +++ b/docs/src/examples/components/BarChart/histogram-date-time-interval.svelte @@ -1,9 +1,9 @@ - + - - {#snippet marks({ context })} - {#each data as d} - - {/each} + {#snippet marks()} + 0} x1="x1" y1="length" insets={{ x: 1 }} class="fill-primary" /> {/snippet} {#snippet tooltip()} @@ -82,4 +76,4 @@ {/snippet} {/snippet} - + diff --git a/docs/src/examples/components/BarChart/histogram-horizontal.svelte b/docs/src/examples/components/BarChart/histogram-horizontal.svelte index a1d641a0f..e899305f4 100644 --- a/docs/src/examples/components/BarChart/histogram-horizontal.svelte +++ b/docs/src/examples/components/BarChart/histogram-horizontal.svelte @@ -1,8 +1,8 @@ - + - - {#snippet marks({ context })} - {#each data as d} - - {/each} + {#snippet marks()} + 0} y0="x0" x1="length" y1="x1" insets={{ y: 1 }} class="fill-primary" /> {/snippet} {#snippet tooltip()} @@ -61,4 +52,4 @@ {/snippet} {/snippet} - + diff --git a/docs/src/examples/components/BarChart/histogram-random-distribution.svelte b/docs/src/examples/components/BarChart/histogram-random-distribution.svelte index a6b0ead82..2ee73955f 100644 --- a/docs/src/examples/components/BarChart/histogram-random-distribution.svelte +++ b/docs/src/examples/components/BarChart/histogram-random-distribution.svelte @@ -1,8 +1,8 @@ - + - - {#snippet marks({ context })} - {#each randomBins as d} - - {/each} + {#snippet marks()} + 0} x1="x1" y1="length" insets={{ x: 1 }} class="fill-primary" /> {/snippet} {#snippet tooltip()} @@ -56,4 +50,4 @@ {/snippet} {/snippet} - + diff --git a/docs/src/examples/components/BarChart/histogram-vertical.svelte b/docs/src/examples/components/BarChart/histogram-vertical.svelte index 183a06e81..9efea029c 100644 --- a/docs/src/examples/components/BarChart/histogram-vertical.svelte +++ b/docs/src/examples/components/BarChart/histogram-vertical.svelte @@ -1,8 +1,8 @@ - + - - {#snippet marks({ context })} - {#each data as d} - - {/each} + {#snippet marks()} + 0} x1="x1" y1="length" insets={{ x: 1 }} class="fill-primary" /> {/snippet} {#snippet tooltip()} @@ -61,4 +55,4 @@ {/snippet} {/snippet} - + diff --git a/docs/src/examples/components/BarChart/motion-tween.svelte b/docs/src/examples/components/BarChart/motion-tween.svelte new file mode 100644 index 000000000..e8826a348 --- /dev/null +++ b/docs/src/examples/components/BarChart/motion-tween.svelte @@ -0,0 +1,21 @@ + + + + +{#if show} + +{/if} diff --git a/docs/src/examples/components/BarChart/oscilloscope-frequency.svelte b/docs/src/examples/components/BarChart/oscilloscope-frequency.svelte index e1018a62b..8b0f01a39 100644 --- a/docs/src/examples/components/BarChart/oscilloscope-frequency.svelte +++ b/docs/src/examples/components/BarChart/oscilloscope-frequency.svelte @@ -6,9 +6,10 @@ import OscilloscopeField from '$lib/components/controls/fields/OscilloscopeField.svelte'; const FFT_SIZE = 256; + const BIN_COUNT = Math.round((FFT_SIZE / 2) * 0.7); // Generate mock frequency domain data for demonstration - const mockData = Array.from({ length: 128 }, (_, i) => ({ + const mockData = Array.from({ length: BIN_COUNT }, (_, i) => ({ key: i, value: Math.max(0, 160 - i * 2 + 40 * Math.random()) })); @@ -75,7 +76,7 @@ analyser.getByteFrequencyData(dataArray); - data = Array.from(dataArray, (value, i) => ({ + data = Array.from(dataArray.slice(0, BIN_COUNT), (value, i) => ({ key: i, value })); @@ -96,13 +97,13 @@ decibels(d)?.toFixed(1) } }} diff --git a/docs/src/examples/components/BarChart/pan-zoom-domain-extent.svelte b/docs/src/examples/components/BarChart/pan-zoom-domain-extent.svelte new file mode 100644 index 000000000..78922a173 --- /dev/null +++ b/docs/src/examples/components/BarChart/pan-zoom-domain-extent.svelte @@ -0,0 +1,33 @@ + + + diff --git a/docs/src/examples/components/BarChart/pan-zoom-scale-extent.svelte b/docs/src/examples/components/BarChart/pan-zoom-scale-extent.svelte new file mode 100644 index 000000000..2fc9f0180 --- /dev/null +++ b/docs/src/examples/components/BarChart/pan-zoom-scale-extent.svelte @@ -0,0 +1,23 @@ + + + diff --git a/docs/src/examples/components/BarChart/pan-zoom.svelte b/docs/src/examples/components/BarChart/pan-zoom.svelte new file mode 100644 index 000000000..760e1c5a4 --- /dev/null +++ b/docs/src/examples/components/BarChart/pan-zoom.svelte @@ -0,0 +1,23 @@ + + + diff --git a/docs/src/examples/components/BarChart/series-horizontal-diverging-as-percent.svelte b/docs/src/examples/components/BarChart/series-horizontal-diverging-as-percent.svelte index 4679c2797..abc550c43 100644 --- a/docs/src/examples/components/BarChart/series-horizontal-diverging-as-percent.svelte +++ b/docs/src/examples/components/BarChart/series-horizontal-diverging-as-percent.svelte @@ -53,12 +53,12 @@ ]} height={600} > - {#snippet tooltip({ series, context })} + {#snippet tooltip({ context })} {#snippet children({ data })} Age: {format(context.y(data))} - {#each series as s} + {#each context.series.series as s} {@const valueAccessor = accessor(s.value ?? s.key)} {@const value = Math.abs(valueAccessor(data))} diff --git a/docs/src/examples/components/BarChart/series-horizontal-labels.svelte b/docs/src/examples/components/BarChart/series-horizontal-labels.svelte new file mode 100644 index 000000000..55b84f3b7 --- /dev/null +++ b/docs/src/examples/components/BarChart/series-horizontal-labels.svelte @@ -0,0 +1,26 @@ + + + diff --git a/docs/src/examples/components/BarChart/series-stack-separate-data.svelte b/docs/src/examples/components/BarChart/series-stack-separate-data.svelte new file mode 100644 index 000000000..8e0bc65c9 --- /dev/null +++ b/docs/src/examples/components/BarChart/series-stack-separate-data.svelte @@ -0,0 +1,46 @@ + + + diff --git a/docs/src/examples/components/BarChart/single-dimension.svelte b/docs/src/examples/components/BarChart/single-dimension.svelte index 4eae69770..508897287 100644 --- a/docs/src/examples/components/BarChart/single-dimension.svelte +++ b/docs/src/examples/components/BarChart/single-dimension.svelte @@ -24,6 +24,7 @@ cRange={['var(--color-danger)', 'var(--color-warning)', 'var(--color-success)']} axis="x" bandPadding={0.1} + grid={false} props={{ bars: { radius: 4, strokeWidth: 0, rounded: 'all' }, highlight: { bar: { radius: 4, class: 'stroke-current stroke-2 fill-none' } }, diff --git a/docs/src/examples/components/BarChart/stack-series-diverging.svelte b/docs/src/examples/components/BarChart/stack-series-diverging.svelte index 657aa7b78..7f4df4d44 100644 --- a/docs/src/examples/components/BarChart/stack-series-diverging.svelte +++ b/docs/src/examples/components/BarChart/stack-series-diverging.svelte @@ -12,14 +12,16 @@ series={[ { key: 'apples', - color: 'var(--color-apples)', - props: { rounded: 'bottom' } + color: 'var(--color-apples)' + }, + { + key: 'grapes', + color: 'var(--color-grapes)' }, { key: 'bananas', value: (d) => -d.bananas, - color: 'var(--color-bananas)', - props: { rounded: 'top' } + color: 'var(--color-bananas)' } ]} seriesLayout="stackDiverging" diff --git a/docs/src/examples/components/BarChart/vertical-fixed-width.svelte b/docs/src/examples/components/BarChart/vertical-fixed-width.svelte new file mode 100644 index 000000000..183980e53 --- /dev/null +++ b/docs/src/examples/components/BarChart/vertical-fixed-width.svelte @@ -0,0 +1,15 @@ + + + diff --git a/docs/src/examples/components/Bars/horizontal-candlestick-bars.svelte b/docs/src/examples/components/Bars/horizontal-candlestick-bars.svelte index 67ca7b689..4514c7e74 100644 --- a/docs/src/examples/components/Bars/horizontal-candlestick-bars.svelte +++ b/docs/src/examples/components/Bars/horizontal-candlestick-bars.svelte @@ -19,7 +19,7 @@ cDomain={['desc', 'asc']} cRange={['var(--color-danger)', 'var(--color-success)']} padding={{ top: 5, left: 20, bottom: 32 }} - tooltip={{ mode: 'quadtree-x' }} + tooltipContext={{ mode: 'quadtree-x' }} height={300} > diff --git a/docs/src/examples/components/Bars/horizontal-click-handler.svelte b/docs/src/examples/components/Bars/horizontal-click-handler.svelte index 2164f8363..ec29d7beb 100644 --- a/docs/src/examples/components/Bars/horizontal-click-handler.svelte +++ b/docs/src/examples/components/Bars/horizontal-click-handler.svelte @@ -22,7 +22,7 @@ y="date" yScale={scaleBand().padding(0.4)} padding={{ left: 32, bottom: 20, right: 8 }} - tooltip={{ + tooltipContext={{ mode: 'band', onclick(e, { data }) { alert('You clicked on:\n' + JSON.stringify(data, null, 2)); diff --git a/docs/src/examples/components/Bars/horizontal-grouped-and-stacked.svelte b/docs/src/examples/components/Bars/horizontal-grouped-and-stacked.svelte index 3c492d998..c004ec3d2 100644 --- a/docs/src/examples/components/Bars/horizontal-grouped-and-stacked.svelte +++ b/docs/src/examples/components/Bars/horizontal-grouped-and-stacked.svelte @@ -44,7 +44,7 @@ y1Domain={[1, 2]} y1Range={({ yScale }) => [0, yScale.bandwidth?.()]} padding={defaultChartPadding({ left: 32, bottom: 20, right: 15 })} - tooltip={{ mode: 'band' }} + tooltipContext={{ mode: 'band' }} height={300} > {#snippet children({ context })} diff --git a/docs/src/examples/components/Bars/horizontal-grouped-stacked-or-both-transition.svelte b/docs/src/examples/components/Bars/horizontal-grouped-stacked-or-both-transition.svelte index cbf8c660d..116608ca1 100644 --- a/docs/src/examples/components/Bars/horizontal-grouped-stacked-or-both-transition.svelte +++ b/docs/src/examples/components/Bars/horizontal-grouped-stacked-or-both-transition.svelte @@ -73,7 +73,7 @@ y1Domain={groupBy ? unique(data.map((d) => d[groupBy])) : undefined} y1Range={({ yScale }) => [0, yScale.bandwidth()]} padding={defaultChartPadding({ left: 30, right: 15, bottom: 20 })} - tooltip={{ mode: 'band' }} + tooltipContext={{ mode: 'band' }} height={400} > {#snippet children({ context })} diff --git a/docs/src/examples/components/Bars/horizontal-grouped.svelte b/docs/src/examples/components/Bars/horizontal-grouped.svelte index 0cec8cd42..56d445f62 100644 --- a/docs/src/examples/components/Bars/horizontal-grouped.svelte +++ b/docs/src/examples/components/Bars/horizontal-grouped.svelte @@ -39,7 +39,7 @@ y1Domain={colorKeys} y1Range={({ yScale }) => [0, yScale.bandwidth?.()]} padding={defaultChartPadding({ left: 32, bottom: 20, right: 15 })} - tooltip={{ mode: 'band' }} + tooltipContext={{ mode: 'band' }} height={400} > {#snippet children({ context })} diff --git a/docs/src/examples/components/Bars/horizontal-multiple-diverging.svelte b/docs/src/examples/components/Bars/horizontal-multiple-diverging.svelte index c04e4fcc1..69457bca0 100644 --- a/docs/src/examples/components/Bars/horizontal-multiple-diverging.svelte +++ b/docs/src/examples/components/Bars/horizontal-multiple-diverging.svelte @@ -21,7 +21,7 @@ y="date" yScale={scaleBand().padding(0.4)} padding={{ left: 32, bottom: 20, right: 8 }} - tooltip={{ mode: 'band' }} + tooltipContext={{ mode: 'band' }} height={500} > diff --git a/docs/src/examples/components/Bars/horizontal-multiple-overlapping.svelte b/docs/src/examples/components/Bars/horizontal-multiple-overlapping.svelte index 136ab6a3e..898f7aff9 100644 --- a/docs/src/examples/components/Bars/horizontal-multiple-overlapping.svelte +++ b/docs/src/examples/components/Bars/horizontal-multiple-overlapping.svelte @@ -22,7 +22,7 @@ y="date" yScale={scaleBand().padding(0.4)} padding={{ left: 32, bottom: 20, right: 8 }} - tooltip={{ mode: 'band' }} + tooltipContext={{ mode: 'band' }} height={500} > diff --git a/docs/src/examples/components/Bars/horizontal-stacked-percent.svelte b/docs/src/examples/components/Bars/horizontal-stacked-percent.svelte index 5c5602edb..e69e16bc9 100644 --- a/docs/src/examples/components/Bars/horizontal-stacked-percent.svelte +++ b/docs/src/examples/components/Bars/horizontal-stacked-percent.svelte @@ -41,7 +41,7 @@ cDomain={colorKeys} cRange={keyColors} padding={defaultChartPadding({ left: 32, bottom: 20, right: 15 })} - tooltip={{ mode: 'band' }} + tooltipContext={{ mode: 'band' }} height={300} > {#snippet children({ context })} diff --git a/docs/src/examples/components/Bars/horizontal-stacked.svelte b/docs/src/examples/components/Bars/horizontal-stacked.svelte index a7ca249ab..eea3e66ca 100644 --- a/docs/src/examples/components/Bars/horizontal-stacked.svelte +++ b/docs/src/examples/components/Bars/horizontal-stacked.svelte @@ -36,7 +36,7 @@ cDomain={colorKeys} cRange={keyColors} padding={defaultChartPadding({ left: 32, bottom: 20, right: 15 })} - tooltip={{ mode: 'band' }} + tooltipContext={{ mode: 'band' }} height={300} > {#snippet children({ context })} diff --git a/docs/src/examples/components/Bars/horizontal-stagger-tween-on-mount.svelte b/docs/src/examples/components/Bars/horizontal-stagger-tween-on-mount.svelte index 35ed3434b..ef70d7f3a 100644 --- a/docs/src/examples/components/Bars/horizontal-stagger-tween-on-mount.svelte +++ b/docs/src/examples/components/Bars/horizontal-stagger-tween-on-mount.svelte @@ -37,11 +37,11 @@ {#each data as d, i} diff --git a/docs/src/examples/components/Bars/horizontal-tooltip-and-clipped-highlight.svelte b/docs/src/examples/components/Bars/horizontal-tooltip-and-clipped-highlight.svelte index 7e8e2197c..ad02e66d4 100644 --- a/docs/src/examples/components/Bars/horizontal-tooltip-and-clipped-highlight.svelte +++ b/docs/src/examples/components/Bars/horizontal-tooltip-and-clipped-highlight.svelte @@ -22,7 +22,7 @@ y="date" yScale={scaleBand().padding(0.4)} padding={{ left: 32, bottom: 20, right: 8 }} - tooltip={{ mode: 'band' }} + tooltipContext={{ mode: 'band' }} class="group" height={300} > diff --git a/docs/src/examples/components/Bars/horizontal-tooltip-and-highlight.svelte b/docs/src/examples/components/Bars/horizontal-tooltip-and-highlight.svelte index bde0d18d0..d30df7329 100644 --- a/docs/src/examples/components/Bars/horizontal-tooltip-and-highlight.svelte +++ b/docs/src/examples/components/Bars/horizontal-tooltip-and-highlight.svelte @@ -22,7 +22,7 @@ y="date" yScale={scaleBand().padding(0.4)} padding={{ left: 32, bottom: 20, right: 8 }} - tooltip={{ mode: 'band' }} + tooltipContext={{ mode: 'band' }} height={300} > diff --git a/docs/src/examples/components/Bars/horizontal-tween-on-mount.svelte b/docs/src/examples/components/Bars/horizontal-tween-on-mount.svelte index 746423db1..1f7fdf41c 100644 --- a/docs/src/examples/components/Bars/horizontal-tween-on-mount.svelte +++ b/docs/src/examples/components/Bars/horizontal-tween-on-mount.svelte @@ -35,11 +35,10 @@ {#if show} + import { scaleBand } from 'd3-scale'; + import { Axis, Bar, Bars, Chart, Highlight, Layer, Tooltip } from 'layerchart'; + import { createDateSeries } from '$lib/utils/data.js'; + + const data = createDateSeries({ + count: 20, + min: 20, + max: 100 + }); + export { data }; + + + + + + + + + diff --git a/docs/src/examples/components/Bars/vertical-grouped-and-stacked.svelte b/docs/src/examples/components/Bars/vertical-grouped-and-stacked.svelte index 29c0f5699..40f239e19 100644 --- a/docs/src/examples/components/Bars/vertical-grouped-and-stacked.svelte +++ b/docs/src/examples/components/Bars/vertical-grouped-and-stacked.svelte @@ -35,7 +35,7 @@ x1Domain={[1, 2]} x1Range={({ xScale }) => [0, xScale.bandwidth()]} padding={{ left: 32, bottom: 20, top: 8 }} - tooltip={{ mode: 'band' }} + tooltipContext={{ mode: 'band' }} height={300} > {#snippet children({ context })} diff --git a/docs/src/examples/components/Bars/vertical-grouped-stacked-or-both-transition.svelte b/docs/src/examples/components/Bars/vertical-grouped-stacked-or-both-transition.svelte index 1652155fd..828dc1e4b 100644 --- a/docs/src/examples/components/Bars/vertical-grouped-stacked-or-both-transition.svelte +++ b/docs/src/examples/components/Bars/vertical-grouped-stacked-or-both-transition.svelte @@ -69,7 +69,7 @@ x1Domain={groupBy ? unique(data.map((d) => d[groupBy])) : undefined} x1Range={({ xScale }) => [0, xScale.bandwidth()]} padding={{ left: 32, bottom: 20, top: 8 }} - tooltip={{ mode: 'band' }} + tooltipContext={{ mode: 'band' }} height={300} > {#snippet children({ context })} diff --git a/docs/src/examples/components/Bars/vertical-grouped.svelte b/docs/src/examples/components/Bars/vertical-grouped.svelte index 03b4c81e9..8a4beb38e 100644 --- a/docs/src/examples/components/Bars/vertical-grouped.svelte +++ b/docs/src/examples/components/Bars/vertical-grouped.svelte @@ -30,7 +30,7 @@ x1Domain={colorKeys} x1Range={({ xScale }) => [0, xScale.bandwidth()]} padding={{ left: 32, bottom: 20, top: 8 }} - tooltip={{ mode: 'band' }} + tooltipContext={{ mode: 'band' }} height={300} > {#snippet children({ context })} diff --git a/docs/src/examples/components/Bars/vertical-multiple-diverging-rounded-specific.svelte b/docs/src/examples/components/Bars/vertical-multiple-diverging-rounded-specific.svelte index 2bc7654cc..8ef65a5e6 100644 --- a/docs/src/examples/components/Bars/vertical-multiple-diverging-rounded-specific.svelte +++ b/docs/src/examples/components/Bars/vertical-multiple-diverging-rounded-specific.svelte @@ -30,7 +30,7 @@ xScale={scaleBand().padding(0.4)} y={['value', (d) => -d.baseline]} yNice - tooltip={{ mode: 'bisect-x' }} + tooltipContext={{ mode: 'bisect-x' }} padding={defaultChartPadding({ top: 10, left: 20 })} height={300} > diff --git a/docs/src/examples/components/Bars/vertical-multiple-diverging.svelte b/docs/src/examples/components/Bars/vertical-multiple-diverging.svelte index 48de4c476..d89befb92 100644 --- a/docs/src/examples/components/Bars/vertical-multiple-diverging.svelte +++ b/docs/src/examples/components/Bars/vertical-multiple-diverging.svelte @@ -20,7 +20,7 @@ y={['value', (d) => -d.baseline]} yNice padding={{ left: 24, bottom: 20, top: 8 }} - tooltip={{ mode: 'bisect-x' }} + tooltipContext={{ mode: 'bisect-x' }} height={300} > diff --git a/docs/src/examples/components/Bars/vertical-multiple-overlapping.svelte b/docs/src/examples/components/Bars/vertical-multiple-overlapping.svelte index 3300d6f92..23210e483 100644 --- a/docs/src/examples/components/Bars/vertical-multiple-overlapping.svelte +++ b/docs/src/examples/components/Bars/vertical-multiple-overlapping.svelte @@ -21,7 +21,7 @@ yDomain={[0, null]} yNice padding={{ left: 24, bottom: 20, top: 8 }} - tooltip={{ mode: 'bisect-x' }} + tooltipContext={{ mode: 'bisect-x' }} > diff --git a/docs/src/examples/components/Bars/vertical-stacked-percent.svelte b/docs/src/examples/components/Bars/vertical-stacked-percent.svelte index 91e33c6ba..4705d20af 100644 --- a/docs/src/examples/components/Bars/vertical-stacked-percent.svelte +++ b/docs/src/examples/components/Bars/vertical-stacked-percent.svelte @@ -31,7 +31,7 @@ cDomain={colorKeys} cRange={keyColors} padding={{ left: 32, bottom: 20, top: 8 }} - tooltip={{ mode: 'band' }} + tooltipContext={{ mode: 'band' }} height={300} > {#snippet children({ context })} diff --git a/docs/src/examples/components/Bars/vertical-stacked.svelte b/docs/src/examples/components/Bars/vertical-stacked.svelte index dcca5475b..2da6dc715 100644 --- a/docs/src/examples/components/Bars/vertical-stacked.svelte +++ b/docs/src/examples/components/Bars/vertical-stacked.svelte @@ -27,7 +27,7 @@ cDomain={colorKeys} cRange={keyColors} padding={{ left: 32, bottom: 20, top: 8 }} - tooltip={{ mode: 'band' }} + tooltipContext={{ mode: 'band' }} height={300} > {#snippet children({ context })} diff --git a/docs/src/examples/components/Bars/vertical-stagger-tween-on-mount.svelte b/docs/src/examples/components/Bars/vertical-stagger-tween-on-mount.svelte index 355387073..35398c976 100644 --- a/docs/src/examples/components/Bars/vertical-stagger-tween-on-mount.svelte +++ b/docs/src/examples/components/Bars/vertical-stagger-tween-on-mount.svelte @@ -34,21 +34,11 @@ {#each data as d, i} diff --git a/docs/src/examples/components/Bars/vertical-tooltip-and-clipped-highlight.svelte b/docs/src/examples/components/Bars/vertical-tooltip-and-clipped-highlight.svelte index 4b15ab0d3..30aa2d30a 100644 --- a/docs/src/examples/components/Bars/vertical-tooltip-and-clipped-highlight.svelte +++ b/docs/src/examples/components/Bars/vertical-tooltip-and-clipped-highlight.svelte @@ -21,7 +21,7 @@ yDomain={[0, null]} yNice padding={{ left: 24, bottom: 20, top: 8 }} - tooltip={{ mode: 'band' }} + tooltipContext={{ mode: 'band' }} class="group" height={300} > diff --git a/docs/src/examples/components/Bars/vertical-tooltip-and-highlight.svelte b/docs/src/examples/components/Bars/vertical-tooltip-and-highlight.svelte index a4f4478a3..8bce44563 100644 --- a/docs/src/examples/components/Bars/vertical-tooltip-and-highlight.svelte +++ b/docs/src/examples/components/Bars/vertical-tooltip-and-highlight.svelte @@ -20,7 +20,7 @@ yDomain={[0, null]} yNice padding={{ left: 24, bottom: 20, top: 8 }} - tooltip={{ mode: 'band' }} + tooltipContext={{ mode: 'band' }} height={300} > diff --git a/docs/src/examples/components/Bars/vertical-tween-on-mount.svelte b/docs/src/examples/components/Bars/vertical-tween-on-mount.svelte index 9f3ad23bb..d87c6b7e8 100644 --- a/docs/src/examples/components/Bars/vertical-tween-on-mount.svelte +++ b/docs/src/examples/components/Bars/vertical-tween-on-mount.svelte @@ -32,11 +32,10 @@ {#if show} + import { scaleBand } from 'd3-scale'; + import { Axis, BoxPlot, Chart, Layer } from 'layerchart'; + + const data = [ + { + group: 'A', + values: [2, 7, 8, 12, 15, 18, 21, 25, 27, 30, 32, 35, 38, 40, 42, 45, 50, 55, 60, 85] + }, + { + group: 'B', + values: [10, 15, 18, 20, 22, 25, 28, 30, 32, 35, 37, 40, 42, 45, 48, 50, 55, 58, 62, 65] + }, + { + group: 'C', + values: [5, 8, 10, 12, 15, 18, 20, 22, 25, 28, 30, 33, 35, 38, 40, 42, 45, 48, 70, 75] + }, + { + group: 'D', + values: [1, 20, 25, 30, 35, 38, 40, 42, 45, 48, 50, 52, 55, 58, 60, 62, 65, 70, 75, 95] + } + ]; + + export { data }; + + + + + + + {#each data as item} + + {/each} + + diff --git a/docs/src/examples/components/BoxPlot/horizontal.svelte b/docs/src/examples/components/BoxPlot/horizontal.svelte new file mode 100644 index 000000000..49a29aeef --- /dev/null +++ b/docs/src/examples/components/BoxPlot/horizontal.svelte @@ -0,0 +1,44 @@ + + + + + + + {#each data as item} + + {/each} + + diff --git a/docs/src/examples/components/BoxPlot/pre-computed.svelte b/docs/src/examples/components/BoxPlot/pre-computed.svelte new file mode 100644 index 000000000..df2532e4c --- /dev/null +++ b/docs/src/examples/components/BoxPlot/pre-computed.svelte @@ -0,0 +1,44 @@ + + + + + + + {#each data as item} + + {/each} + + diff --git a/docs/src/examples/components/BoxPlot/styled.svelte b/docs/src/examples/components/BoxPlot/styled.svelte new file mode 100644 index 000000000..9f383f75d --- /dev/null +++ b/docs/src/examples/components/BoxPlot/styled.svelte @@ -0,0 +1,61 @@ + + + + + + + {#each data as item} + + {/each} + + diff --git a/docs/src/examples/components/BoxPlot/with-tooltip.svelte b/docs/src/examples/components/BoxPlot/with-tooltip.svelte new file mode 100644 index 000000000..035322cd0 --- /dev/null +++ b/docs/src/examples/components/BoxPlot/with-tooltip.svelte @@ -0,0 +1,74 @@ + + + + + + + {#each data as item} + + {/each} + + + + {#snippet children({ data })} + + + + + + + + {#if data.outliers?.length} + + {/if} + + {/snippet} + + diff --git a/docs/src/examples/components/BoxPlot/with-violin.svelte b/docs/src/examples/components/BoxPlot/with-violin.svelte new file mode 100644 index 000000000..2d7cc8fba --- /dev/null +++ b/docs/src/examples/components/BoxPlot/with-violin.svelte @@ -0,0 +1,107 @@ + + + + + + + + {#each data as item} + + + {/each} + + + + + + {#snippet children({ data })} + + + + + + + + + {/snippet} + + diff --git a/docs/src/examples/components/BrushContext/constant-labels.svelte b/docs/src/examples/components/BrushContext/constant-labels.svelte index 923444385..4ad3dc8a9 100644 --- a/docs/src/examples/components/BrushContext/constant-labels.svelte +++ b/docs/src/examples/components/BrushContext/constant-labels.svelte @@ -12,11 +12,11 @@ - {#if context.brush.isActive} + {#if context.brush.active} diff --git a/docs/src/examples/components/BrushContext/handle-arrows.svelte b/docs/src/examples/components/BrushContext/handle-arrows.svelte index 758e80e0a..021afe275 100644 --- a/docs/src/examples/components/BrushContext/handle-arrows.svelte +++ b/docs/src/examples/components/BrushContext/handle-arrows.svelte @@ -21,7 +21,7 @@ - {#if context.brush.isActive} + {#if context.brush.active} - {#if context.brush.isActive} + {#if context.brush.active} diff --git a/docs/src/examples/components/BrushContext/integrated-brush-(both-axis-area).svelte b/docs/src/examples/components/BrushContext/integrated-brush-(both-axis-area).svelte index 12fa0b90e..5562f2ce6 100644 --- a/docs/src/examples/components/BrushContext/integrated-brush-(both-axis-area).svelte +++ b/docs/src/examples/components/BrushContext/integrated-brush-(both-axis-area).svelte @@ -27,10 +27,10 @@ padding={defaultChartPadding({ left: 25, bottom: 24 })} brush={{ axis: 'both', - resetOnEnd: true, onBrushEnd: (e) => { - xDomain = e.xDomain; - yDomain = e.yDomain; + xDomain = e.brush.x; + yDomain = e.brush.y; + e.brush.reset(); } }} height={300} diff --git a/docs/src/examples/components/BrushContext/integrated-brush-(x-axis).svelte b/docs/src/examples/components/BrushContext/integrated-brush-(x-axis).svelte index 55b82b3e0..07aad0faa 100644 --- a/docs/src/examples/components/BrushContext/integrated-brush-(x-axis).svelte +++ b/docs/src/examples/components/BrushContext/integrated-brush-(x-axis).svelte @@ -25,9 +25,9 @@ yDomain={[0, null]} padding={defaultChartPadding({ left: 25, bottom: 24 })} brush={{ - resetOnEnd: true, onBrushEnd: (e) => { - xDomain = e.xDomain; + xDomain = e.brush.x; + e.brush.reset(); } }} height={300} diff --git a/docs/src/examples/components/BrushContext/integrated-brush-(y-axis).svelte b/docs/src/examples/components/BrushContext/integrated-brush-(y-axis).svelte index 4c52e1f74..1db784d17 100644 --- a/docs/src/examples/components/BrushContext/integrated-brush-(y-axis).svelte +++ b/docs/src/examples/components/BrushContext/integrated-brush-(y-axis).svelte @@ -25,9 +25,9 @@ padding={defaultChartPadding({ left: 25, bottom: 24 })} brush={{ axis: 'y', - resetOnEnd: true, onBrushEnd: (e) => { - yDomain = e.yDomain; + yDomain = e.brush.y; + e.brush.reset(); } }} height={300} diff --git a/docs/src/examples/components/BrushContext/minimap.svelte b/docs/src/examples/components/BrushContext/minimap.svelte index 42de0b0e1..016a6a4ba 100644 --- a/docs/src/examples/components/BrushContext/minimap.svelte +++ b/docs/src/examples/components/BrushContext/minimap.svelte @@ -17,8 +17,13 @@ }); export { data }; + // Committed domain — drives main chart's visible range let xDomain = $state([null, null]); let yDomain = $state([null, null]); + + // Live brush position — updates during drag for minimap display + let brushX = $state([null, null]); + let brushY = $state([null, null]);
@@ -31,10 +36,16 @@ yNice brush={{ axis: 'both', - resetOnEnd: true, + onChange: (e) => { + brushX = e.brush.x; + brushY = e.brush.y; + }, onBrushEnd: (e) => { - xDomain = e.xDomain; - yDomain = e.yDomain; + xDomain = e.brush.x; + yDomain = e.brush.y; + brushX = e.brush.x; + brushY = e.brush.y; + e.brush.reset(); } }} padding={defaultChartPadding({ left: 20, bottom: 24 })} @@ -58,12 +69,13 @@ yNice brush={{ axis: 'both', - mode: 'separated', - xDomain: xDomain, - yDomain: yDomain, + x: brushX as any, + y: brushY as any, onChange: (e) => { - xDomain = e.xDomain; - yDomain = e.yDomain; + xDomain = e.brush.x; + yDomain = e.brush.y; + brushX = e.brush.x; + brushY = e.brush.y; } }} > diff --git a/docs/src/examples/components/BrushContext/programmatic-control.svelte b/docs/src/examples/components/BrushContext/programmatic-control.svelte new file mode 100644 index 000000000..f2bbcbf98 --- /dev/null +++ b/docs/src/examples/components/BrushContext/programmatic-control.svelte @@ -0,0 +1,54 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/docs/src/examples/components/BrushContext/selection.svelte b/docs/src/examples/components/BrushContext/selection.svelte index 47a09f66e..b820f7508 100644 --- a/docs/src/examples/components/BrushContext/selection.svelte +++ b/docs/src/examples/components/BrushContext/selection.svelte @@ -30,8 +30,8 @@ brush={{ axis: 'both', onChange: (e) => { - xDomain = e.xDomain; - yDomain = e.yDomain; + xDomain = e.brush.x; + yDomain = e.brush.y; } }} height={400} diff --git a/docs/src/examples/components/BrushContext/separate-chart-(clip-data).svelte b/docs/src/examples/components/BrushContext/separate-chart-(clip-data).svelte index 6132a82ab..c7eaa6eec 100644 --- a/docs/src/examples/components/BrushContext/separate-chart-(clip-data).svelte +++ b/docs/src/examples/components/BrushContext/separate-chart-(clip-data).svelte @@ -46,7 +46,7 @@ padding={{ left: 16 }} brush={{ onChange: (e) => { - xDomain = e.xDomain; + xDomain = e.brush.x; } }} height={40} diff --git a/docs/src/examples/components/BrushContext/separate-chart-(clip-data-y-axis).svelte b/docs/src/examples/components/BrushContext/separate-chart-(clip-data-y-axis).svelte index 20d6d2be5..236702073 100644 --- a/docs/src/examples/components/BrushContext/separate-chart-(clip-data-y-axis).svelte +++ b/docs/src/examples/components/BrushContext/separate-chart-(clip-data-y-axis).svelte @@ -26,7 +26,7 @@ brush={{ axis: 'y', onChange: (e) => { - yDomain = e.yDomain; + yDomain = e.brush.y; } }} height={300} diff --git a/docs/src/examples/components/BrushContext/separate-chart-(filter-data).svelte b/docs/src/examples/components/BrushContext/separate-chart-(filter-data).svelte index f8c4d4f47..2ccb41d01 100644 --- a/docs/src/examples/components/BrushContext/separate-chart-(filter-data).svelte +++ b/docs/src/examples/components/BrushContext/separate-chart-(filter-data).svelte @@ -53,7 +53,7 @@ padding={{ left: 16 }} brush={{ onChange: (e) => { - xDomain = e.xDomain; + xDomain = e.brush.x; } }} height={40} diff --git a/docs/src/examples/components/BrushContext/sync-brushes-with-bind-xdomain.svelte b/docs/src/examples/components/BrushContext/synced-brushes.svelte similarity index 94% rename from docs/src/examples/components/BrushContext/sync-brushes-with-bind-xdomain.svelte rename to docs/src/examples/components/BrushContext/synced-brushes.svelte index 361a25d3f..ceb2e2fec 100644 --- a/docs/src/examples/components/BrushContext/sync-brushes-with-bind-xdomain.svelte +++ b/docs/src/examples/components/BrushContext/synced-brushes.svelte @@ -84,10 +84,8 @@ y="value" padding={{ left: 16 }} brush={{ - mode: 'separated', - xDomain, - onChange: (e) => (xDomain = e.xDomain), - onReset: (e) => (xDomain = null) + x: xDomain as any, + onChange: (e) => (xDomain = e.brush.x) }} height={20} > diff --git a/docs/src/examples/components/BrushContext/tooltip-interop.svelte b/docs/src/examples/components/BrushContext/tooltip-interop.svelte index 6fc39ffe2..60420543e 100644 --- a/docs/src/examples/components/BrushContext/tooltip-interop.svelte +++ b/docs/src/examples/components/BrushContext/tooltip-interop.svelte @@ -27,11 +27,11 @@ y="value" yDomain={[0, null]} padding={defaultChartPadding({ left: 25, bottom: 24 })} - tooltip={{ mode: 'quadtree-x' }} + tooltipContext={{ mode: 'quadtree-x' }} brush={{ - resetOnEnd: true, onBrushEnd: (e) => { - xDomain = e.xDomain; + xDomain = e.brush.x; + e.brush.reset(); } }} height={300} diff --git a/docs/src/examples/components/Calendar/90-days.svelte b/docs/src/examples/components/Calendar/90-days.svelte index da336648b..8c439e953 100644 --- a/docs/src/examples/components/Calendar/90-days.svelte +++ b/docs/src/examples/components/Calendar/90-days.svelte @@ -34,21 +34,19 @@ padding={{ top: 20, bottom: 20 }} height={200} > - {#snippet children({ context })} - - - + + + - - {#snippet children({ data })} - + + {#snippet children({ data })} + - {#if data.value != null} - - - - {/if} - {/snippet} - - {/snippet} + {#if data.value != null} + + + + {/if} + {/snippet} + diff --git a/docs/src/examples/components/Calendar/fixed-cell-size.svelte b/docs/src/examples/components/Calendar/fixed-cell-size.svelte index 598b90d83..7f5e37aa4 100644 --- a/docs/src/examples/components/Calendar/fixed-cell-size.svelte +++ b/docs/src/examples/components/Calendar/fixed-cell-size.svelte @@ -36,27 +36,19 @@ padding={{ top: 20 }} height={140} > - {#snippet children({ context })} - - - + + + - - {#snippet children({ data })} - + + {#snippet children({ data })} + - {#if data.value != null} - - - - {/if} - {/snippet} - - {/snippet} + {#if data.value != null} + + + + {/if} + {/snippet} + diff --git a/docs/src/examples/components/Calendar/html-with-padding.svelte b/docs/src/examples/components/Calendar/html-with-padding.svelte index 1ba4adc5d..1f8441368 100644 --- a/docs/src/examples/components/Calendar/html-with-padding.svelte +++ b/docs/src/examples/components/Calendar/html-with-padding.svelte @@ -38,7 +38,7 @@ > {#snippet children({ context })} - + {#snippet children({ cells, cellSize })} {#each cells as cell}
- {#snippet children({ context })} - - - + + + - - {#snippet children({ data })} - + + {#snippet children({ data })} + - {#if data.value != null} - - - - {/if} - {/snippet} - - {/snippet} + {#if data.value != null} + + + + {/if} + {/snippet} + diff --git a/docs/src/examples/components/Calendar/multiple-years.svelte b/docs/src/examples/components/Calendar/multiple-years.svelte index 3502f63f7..413f673bf 100644 --- a/docs/src/examples/components/Calendar/multiple-years.svelte +++ b/docs/src/examples/components/Calendar/multiple-years.svelte @@ -32,36 +32,34 @@ padding={{ top: 20, left: 20 }} height={450} > - {#snippet children({ context })} - - {#each range(2021, 2024) as year, i} - {@const start = new Date(year, 0, 1)} - {@const end = endOfInterval('year', start)} - - - - - {/each} - + + {#each range(2021, 2024) as year, i} + {@const start = new Date(year, 0, 1)} + {@const end = endOfInterval('year', start)} + + + + + {/each} + - - {#snippet children({ data })} - + + {#snippet children({ data })} + - {#if data.value != null} - - - - {/if} - {/snippet} - - {/snippet} + {#if data.value != null} + + + + {/if} + {/snippet} + diff --git a/docs/src/examples/components/Calendar/responsive-cell-size-default.svelte b/docs/src/examples/components/Calendar/responsive-cell-size-default.svelte index e63363b9f..33a46e04e 100644 --- a/docs/src/examples/components/Calendar/responsive-cell-size-default.svelte +++ b/docs/src/examples/components/Calendar/responsive-cell-size-default.svelte @@ -36,26 +36,19 @@ padding={{ top: 20 }} height={140} > - {#snippet children({ context })} - - - + + + - - {#snippet children({ data })} - + + {#snippet children({ data })} + - {#if data.value != null} - - - - {/if} - {/snippet} - - {/snippet} + {#if data.value != null} + + + + {/if} + {/snippet} + diff --git a/docs/src/examples/components/Cell/basic.svelte b/docs/src/examples/components/Cell/basic.svelte new file mode 100644 index 000000000..ba4c7e8cb --- /dev/null +++ b/docs/src/examples/components/Cell/basic.svelte @@ -0,0 +1,46 @@ + + + + + + + + + diff --git a/docs/src/examples/components/Cell/circle.svelte b/docs/src/examples/components/Cell/circle.svelte new file mode 100644 index 000000000..21735a9e0 --- /dev/null +++ b/docs/src/examples/components/Cell/circle.svelte @@ -0,0 +1,44 @@ + + + d.value)} + cRange={schemeBlues[5]} + padding={{ top: 4, bottom: 20, left: 36, right: 4 }} + height={300} +> + + + + + + diff --git a/docs/src/examples/components/Cell/color-scale.svelte b/docs/src/examples/components/Cell/color-scale.svelte new file mode 100644 index 000000000..5e3a7f09b --- /dev/null +++ b/docs/src/examples/components/Cell/color-scale.svelte @@ -0,0 +1,44 @@ + + + d.value)} + cRange={schemeYlOrRd[5]} + padding={{ top: 4, bottom: 20, left: 36, right: 4 }} + height={300} +> + + + + + + diff --git a/docs/src/examples/components/Cell/punchcard.svelte b/docs/src/examples/components/Cell/punchcard.svelte new file mode 100644 index 000000000..77b6b1a5c --- /dev/null +++ b/docs/src/examples/components/Cell/punchcard.svelte @@ -0,0 +1,32 @@ + + + timeWeek.count(timeYear(d.date), d.date)} + xScale={scaleBand()} + y={(d) => d.date.getDay()} + yScale={scaleBand()} + yDomain={range(7)} + r="value" + rRange={[0, 16]} + padding={{ left: 32, bottom: 16 }} + height={300} +> + + 'Week ' + d} rule /> + daysOfWeek[d]} rule /> + + timeWeek.count(timeYear(d.date), d.date)} y={(d) => d.date.getDay()} shape="circle" r="value" class="fill-primary" /> + + diff --git a/docs/src/examples/components/Cell/rounded-insets.svelte b/docs/src/examples/components/Cell/rounded-insets.svelte new file mode 100644 index 000000000..39c97194e --- /dev/null +++ b/docs/src/examples/components/Cell/rounded-insets.svelte @@ -0,0 +1,44 @@ + + + d.value)} + cRange={schemeGreens[6]} + padding={{ top: 4, bottom: 20, left: 16, right: 4 }} + height={300} +> + + + + + + diff --git a/docs/src/examples/components/Chart/compound-dual-axis-with-single-chart-using-remapped-scale.svelte b/docs/src/examples/components/Chart/compound-dual-axis-with-single-chart-using-remapped-scale.svelte index 00e8acf41..564d6b118 100644 --- a/docs/src/examples/components/Chart/compound-dual-axis-with-single-chart-using-remapped-scale.svelte +++ b/docs/src/examples/components/Chart/compound-dual-axis-with-single-chart-using-remapped-scale.svelte @@ -17,7 +17,7 @@ y1="efficiency" y1Range={({ yScale }) => yScale.domain()} padding={{ top: 24, bottom: 24, left: 24, right: 24 }} - tooltip={{ mode: 'quadtree-x' }} + tooltipContext={{ mode: 'quadtree-x' }} height={300} > {#snippet children({ context })} diff --git a/docs/src/examples/components/Chart/compound-dual-axis-with-stacked-charts.svelte b/docs/src/examples/components/Chart/compound-dual-axis-with-stacked-charts.svelte index 149c99135..10b90dad2 100644 --- a/docs/src/examples/components/Chart/compound-dual-axis-with-stacked-charts.svelte +++ b/docs/src/examples/components/Chart/compound-dual-axis-with-stacked-charts.svelte @@ -38,7 +38,7 @@ x="year" y="efficiency" padding={{ top: 24, bottom: 24, left: 24, right: 24 }} - tooltip={{ mode: 'quadtree-x' }} + tooltipContext={{ mode: 'quadtree-x' }} > + import { Chart, Spline } from 'layerchart'; + + let data = [ + { date: new Date(2020, 0, 1), apples: 20, oranges: 15 }, + { date: new Date(2021, 0, 1), apples: 30, oranges: 25 }, + { date: new Date(2022, 0, 1), apples: 18, oranges: 28 }, + { date: new Date(2023, 0, 1), apples: 55, oranges: 40 }, + { date: new Date(2024, 0, 1), apples: 20, oranges: 22 }, + { date: new Date(2025, 0, 1), apples: 10, oranges: 12 } + ]; + + + + {#snippet marks()} + + + {/snippet} + diff --git a/docs/src/examples/components/Chart/data-chart-single.svelte b/docs/src/examples/components/Chart/data-chart-single.svelte new file mode 100644 index 000000000..c98d5e352 --- /dev/null +++ b/docs/src/examples/components/Chart/data-chart-single.svelte @@ -0,0 +1,18 @@ + + + + {#snippet marks()} + + {/snippet} + diff --git a/docs/src/examples/components/Chart/data-mark-data.svelte b/docs/src/examples/components/Chart/data-mark-data.svelte new file mode 100644 index 000000000..b3dbbd741 --- /dev/null +++ b/docs/src/examples/components/Chart/data-mark-data.svelte @@ -0,0 +1,28 @@ + + + + {#snippet marks()} + + + {/snippet} + diff --git a/docs/src/examples/components/Chart/data-primitive-data.svelte b/docs/src/examples/components/Chart/data-primitive-data.svelte new file mode 100644 index 000000000..9c10fa8b8 --- /dev/null +++ b/docs/src/examples/components/Chart/data-primitive-data.svelte @@ -0,0 +1,30 @@ + + + + {#snippet marks()} + + + + + {/snippet} + diff --git a/docs/src/examples/components/Chart/data-series-chart-data.svelte b/docs/src/examples/components/Chart/data-series-chart-data.svelte new file mode 100644 index 000000000..fd5940249 --- /dev/null +++ b/docs/src/examples/components/Chart/data-series-chart-data.svelte @@ -0,0 +1,27 @@ + + + + {#snippet marks()} + + + {/snippet} + diff --git a/docs/src/examples/components/Chart/data-series-separate-data.svelte b/docs/src/examples/components/Chart/data-series-separate-data.svelte new file mode 100644 index 000000000..92a65ad01 --- /dev/null +++ b/docs/src/examples/components/Chart/data-series-separate-data.svelte @@ -0,0 +1,36 @@ + + + + {#snippet marks()} + + + {/snippet} + diff --git a/docs/src/examples/components/Chord/basic.svelte b/docs/src/examples/components/Chord/basic.svelte new file mode 100644 index 000000000..66f4111b4 --- /dev/null +++ b/docs/src/examples/components/Chord/basic.svelte @@ -0,0 +1,63 @@ + + + + + b - a}> + {#snippet children({ groups, chords, innerRadius, outerRadius })} + {#each chords as chord (chord.source.index + '-' + chord.target.index)} + + {/each} + + {#each groups as group (group.index)} + + + Math.PI ? 'end' : 'start'} + verticalAnchor="middle" + class="text-xs font-medium" + transform="rotate({(((group.startAngle + group.endAngle) / 2) * 180) / Math.PI - + 90 + + ((group.startAngle + group.endAngle) / 2 > Math.PI ? 180 : 0)})" + /> + + {/each} + {/snippet} + + + diff --git a/docs/src/examples/components/Chord/directed.svelte b/docs/src/examples/components/Chord/directed.svelte new file mode 100644 index 000000000..c91672876 --- /dev/null +++ b/docs/src/examples/components/Chord/directed.svelte @@ -0,0 +1,64 @@ + + + + + b - a}> + {#snippet children({ groups, chords, innerRadius, outerRadius })} + {#each chords as chord (chord.source.index + '-' + chord.target.index)} + + {/each} + + {#each groups as group (group.index)} + + + Math.PI ? 'end' : 'start'} + verticalAnchor="middle" + class="text-xs font-medium" + transform="rotate({(((group.startAngle + group.endAngle) / 2) * 180) / Math.PI - + 90 + + ((group.startAngle + group.endAngle) / 2 > Math.PI ? 180 : 0)})" + /> + + {/each} + {/snippet} + + + diff --git a/docs/src/examples/components/Chord/gradient.svelte b/docs/src/examples/components/Chord/gradient.svelte new file mode 100644 index 000000000..5bf191831 --- /dev/null +++ b/docs/src/examples/components/Chord/gradient.svelte @@ -0,0 +1,163 @@ + + + + {#snippet children({ context })} + + b - a}> + {#snippet children({ groups, chords, innerRadius, outerRadius })} + {#each chords as chord (chord.source.index + '-' + chord.target.index)} + + {#snippet children({ gradient })} + { + hoveredChord = chord; + context.tooltip.show(e, { + source: names[chord.source.index], + target: names[chord.target.index], + value: chord.source.value + }); + }} + onpointermove={(e) => { + context.tooltip.show(e, { + source: names[chord.source.index], + target: names[chord.target.index], + value: chord.source.value + }); + }} + onpointerleave={() => { + hoveredChord = null; + context.tooltip.hide(); + }} + /> + {/snippet} + + {/each} + + {#each groups as group (group.index)} + (hoveredGroupIndex = group.index)} + onpointerleave={() => (hoveredGroupIndex = null)} + /> + + Math.PI ? 'end' : 'start'} + verticalAnchor="middle" + class={cls( + 'text-xs font-medium transition-opacity duration-200', + hasHover && !isGroupActive(group.index) && 'opacity-30' + )} + transform="rotate({(((group.startAngle + group.endAngle) / 2) * 180) / Math.PI - + 90 + + ((group.startAngle + group.endAngle) / 2 > Math.PI ? 180 : 0)})" + /> + + {/each} + {/snippet} + + + + + {#snippet children({ data })} + + {data.source} → {data.target} + + + + + {/snippet} + + {/snippet} + diff --git a/docs/src/examples/components/Chord/hover.svelte b/docs/src/examples/components/Chord/hover.svelte new file mode 100644 index 000000000..322688e96 --- /dev/null +++ b/docs/src/examples/components/Chord/hover.svelte @@ -0,0 +1,183 @@ + + + + {#snippet children({ context })} + + b - a}> + {#snippet children({ groups, chords, innerRadius, outerRadius })} + {#each chords as chord (chord.source.index + '-' + chord.target.index)} + { + hoveredChord = chord; + context.tooltip.show(e, { + source: names[chord.source.index], + target: names[chord.target.index], + sourceValue: chord.source.value, + targetValue: chord.target.value + }); + }} + onpointermove={(e) => { + context.tooltip.show(e, { + source: names[chord.source.index], + target: names[chord.target.index], + sourceValue: chord.source.value, + targetValue: chord.target.value + }); + }} + onpointerleave={() => { + hoveredChord = null; + context.tooltip.hide(); + }} + /> + {/each} + + {#each groups as group (group.index)} + { + hoveredGroupIndex = group.index; + const row = matrix[group.index]; + const total = row.reduce((sum, v) => sum + v, 0); + const breakdown = names.map((name, i) => ({ name, value: row[i] })); + context.tooltip.show(e, { + isGroup: true, + name: names[group.index], + total, + breakdown + }); + }} + onpointermove={(e) => { + const row = matrix[group.index]; + const total = row.reduce((sum, v) => sum + v, 0); + const breakdown = names.map((name, i) => ({ name, value: row[i] })); + context.tooltip.show(e, { + isGroup: true, + name: names[group.index], + total, + breakdown + }); + }} + onpointerleave={() => { + hoveredGroupIndex = null; + context.tooltip.hide(); + }} + /> + + Math.PI ? 'end' : 'start'} + verticalAnchor="middle" + class={cls( + 'text-xs font-medium transition-opacity duration-200', + hasHover && !isGroupActive(group.index) && 'opacity-30' + )} + transform="rotate({(((group.startAngle + group.endAngle) / 2) * 180) / Math.PI - + 90 + + ((group.startAngle + group.endAngle) / 2 > Math.PI ? 180 : 0)})" + /> + + {/each} + {/snippet} + + + + + {#snippet children({ data })} + {#if data.isGroup} + {data.name} + + {#each data.breakdown as item} + + {/each} + + + + {:else} + {data.source} ↔ {data.target} + + + + + {/if} + {/snippet} + + {/snippet} + diff --git a/docs/src/examples/components/Chord/ticks.svelte b/docs/src/examples/components/Chord/ticks.svelte new file mode 100644 index 000000000..9171fb48b --- /dev/null +++ b/docs/src/examples/components/Chord/ticks.svelte @@ -0,0 +1,94 @@ + + + + + + {#snippet children({ groups, chords, innerRadius, outerRadius })} + {#each chords as chord (chord.source.index + '-' + chord.target.index)} + + {/each} + + {#each groups as group (group.index)} + + + {@const ticks = groupTicks(group, step)} + {#each ticks as tick, i} + {@const angle = tick.angle} + {@const isBottom = angle > Math.PI} + + + {#if i === 0} + + {names[group.index]} + + {:else} + + {format(tick.value, 'percentRound')} + + {/if} + + {/each} + {/each} + {/snippet} + + + diff --git a/docs/src/examples/components/Circle/color-via-ordinal-scale.svelte b/docs/src/examples/components/Circle/color-via-ordinal-scale.svelte new file mode 100644 index 000000000..99034cf3b --- /dev/null +++ b/docs/src/examples/components/Circle/color-via-ordinal-scale.svelte @@ -0,0 +1,31 @@ + + + + + + + + + diff --git a/docs/src/examples/components/Circle/color-via-threshold-scale.svelte b/docs/src/examples/components/Circle/color-via-threshold-scale.svelte new file mode 100644 index 000000000..6b9de4b12 --- /dev/null +++ b/docs/src/examples/components/Circle/color-via-threshold-scale.svelte @@ -0,0 +1,46 @@ + + + + + + + + + + + diff --git a/docs/src/examples/components/Circle/data-mode.svelte b/docs/src/examples/components/Circle/data-mode.svelte new file mode 100644 index 000000000..f1b87d8f3 --- /dev/null +++ b/docs/src/examples/components/Circle/data-mode.svelte @@ -0,0 +1,22 @@ + + + + + + + + + diff --git a/docs/src/examples/components/Contour/sampled-interactive.svelte b/docs/src/examples/components/Contour/sampled-interactive.svelte new file mode 100644 index 000000000..aee269bfd --- /dev/null +++ b/docs/src/examples/components/Contour/sampled-interactive.svelte @@ -0,0 +1,28 @@ + + +
+ + +
+ + + + + + Math.sin(x) * Math.cos(y)} {thresholds} {blur} /> + + diff --git a/docs/src/examples/components/Contour/sampled.svelte b/docs/src/examples/components/Contour/sampled.svelte new file mode 100644 index 000000000..ae1bdac8a --- /dev/null +++ b/docs/src/examples/components/Contour/sampled.svelte @@ -0,0 +1,19 @@ + + + + + + + Math.sin(x) * Math.cos(y)} thresholds={20} /> + + diff --git a/docs/src/examples/components/Contour/volcano-filled-interactive.svelte b/docs/src/examples/components/Contour/volcano-filled-interactive.svelte new file mode 100644 index 000000000..1e6662590 --- /dev/null +++ b/docs/src/examples/components/Contour/volcano-filled-interactive.svelte @@ -0,0 +1,32 @@ + + +
+ + +
+ + + + + + + + diff --git a/docs/src/examples/components/Contour/volcano-filled.svelte b/docs/src/examples/components/Contour/volcano-filled.svelte new file mode 100644 index 000000000..307b9d7b3 --- /dev/null +++ b/docs/src/examples/components/Contour/volcano-filled.svelte @@ -0,0 +1,22 @@ + + + + + + + + + diff --git a/docs/src/examples/components/Contour/volcano-lines.svelte b/docs/src/examples/components/Contour/volcano-lines.svelte new file mode 100644 index 000000000..7aa3df9ea --- /dev/null +++ b/docs/src/examples/components/Contour/volcano-lines.svelte @@ -0,0 +1,23 @@ + + + + + + + + + diff --git a/docs/src/examples/components/Dagre/basic.svelte b/docs/src/examples/components/Dagre/basic.svelte index 6a91934c7..c7efd3d88 100644 --- a/docs/src/examples/components/Dagre/basic.svelte +++ b/docs/src/examples/components/Dagre/basic.svelte @@ -35,7 +35,7 @@ + import { Axis, Chart, Density, Layer, Points } from 'layerchart'; + import { RangeField } from 'svelte-ux'; + + import { getFaithful } from '$lib/data.remote.js'; + + const data = await getFaithful(); + + let bandwidth = $state(20); + + +
+ +
+ + + + + + + + + diff --git a/docs/src/examples/components/Density/basic.svelte b/docs/src/examples/components/Density/basic.svelte new file mode 100644 index 000000000..7477b7c69 --- /dev/null +++ b/docs/src/examples/components/Density/basic.svelte @@ -0,0 +1,26 @@ + + + + + + + + + + diff --git a/docs/src/examples/components/Density/stroke-only.svelte b/docs/src/examples/components/Density/stroke-only.svelte new file mode 100644 index 000000000..fe9b5dff2 --- /dev/null +++ b/docs/src/examples/components/Density/stroke-only.svelte @@ -0,0 +1,26 @@ + + + + + + + + + + diff --git a/docs/src/examples/components/Density/thresholds.svelte b/docs/src/examples/components/Density/thresholds.svelte new file mode 100644 index 000000000..aa7bdc4b5 --- /dev/null +++ b/docs/src/examples/components/Density/thresholds.svelte @@ -0,0 +1,33 @@ + + +
+ +
+ + + + + + + + + diff --git a/docs/src/examples/components/Density/walmart.svelte b/docs/src/examples/components/Density/walmart.svelte new file mode 100644 index 000000000..89c17d0cf --- /dev/null +++ b/docs/src/examples/components/Density/walmart.svelte @@ -0,0 +1,73 @@ + + + + {#snippet children({ context })} + + + + + + + + + + + {#if context.tooltip.data} + + {/if} + + + + {#snippet children({ data })} + {data.city}, {data.state} + + + + + {/snippet} + + {/snippet} + diff --git a/docs/src/examples/components/Density/weighted.svelte b/docs/src/examples/components/Density/weighted.svelte new file mode 100644 index 000000000..793294f1c --- /dev/null +++ b/docs/src/examples/components/Density/weighted.svelte @@ -0,0 +1,45 @@ + + +
+ +
+ + + + + + + (d.sex === 'female' ? 1 - skew : 1 + skew)} + fill="none" + class="stroke-surface-content/30" + /> + + (d.sex === 'female' ? 'var(--color-primary)' : 'var(--color-secondary)')} + opacity={(d) => (d.sex === 'female' ? 1 - skew : 1 + skew) * 0.7} + /> + + diff --git a/docs/src/examples/components/Ellipse/color-via-ordinal-scale.svelte b/docs/src/examples/components/Ellipse/color-via-ordinal-scale.svelte new file mode 100644 index 000000000..f12b2a14c --- /dev/null +++ b/docs/src/examples/components/Ellipse/color-via-ordinal-scale.svelte @@ -0,0 +1,31 @@ + + + + + + + + + diff --git a/docs/src/examples/components/Ellipse/color-via-threshold-scale.svelte b/docs/src/examples/components/Ellipse/color-via-threshold-scale.svelte new file mode 100644 index 000000000..deb8c3f1c --- /dev/null +++ b/docs/src/examples/components/Ellipse/color-via-threshold-scale.svelte @@ -0,0 +1,46 @@ + + + + + + + + + + + diff --git a/docs/src/examples/components/Ellipse/data-mode.svelte b/docs/src/examples/components/Ellipse/data-mode.svelte new file mode 100644 index 000000000..ead322f91 --- /dev/null +++ b/docs/src/examples/components/Ellipse/data-mode.svelte @@ -0,0 +1,22 @@ + + + + + + + + + diff --git a/docs/src/examples/components/GeoCircle/earthquake-globe.svelte b/docs/src/examples/components/GeoCircle/earthquake-globe.svelte index 615c17240..645874750 100644 --- a/docs/src/examples/components/GeoCircle/earthquake-globe.svelte +++ b/docs/src/examples/components/GeoCircle/earthquake-globe.svelte @@ -59,9 +59,9 @@ rRange={[0, 1]} geo={{ projection: geoOrthographic, - fitGeojson: countries, - applyTransform: ['rotate'] + fitGeojson: countries }} + transform={{ mode: 'projection' }} ondragstart={timer.stop} padding={{ top: 5, bottom: 5, left: 5, right: 5 }} height={600} diff --git a/docs/src/examples/components/GeoContext/geojson-preview.svelte b/docs/src/examples/components/GeoContext/geojson-preview.svelte index 4c81d1abe..4084ad808 100644 --- a/docs/src/examples/components/GeoContext/geojson-preview.svelte +++ b/docs/src/examples/components/GeoContext/geojson-preview.svelte @@ -89,11 +89,11 @@ {#snippet children({ context })} diff --git a/docs/src/examples/components/GeoContext/topojson-preview.svelte b/docs/src/examples/components/GeoContext/topojson-preview.svelte index d16e1f140..0881da196 100644 --- a/docs/src/examples/components/GeoContext/topojson-preview.svelte +++ b/docs/src/examples/components/GeoContext/topojson-preview.svelte @@ -97,11 +97,11 @@ diff --git a/docs/src/examples/components/GeoPath/animated-globe.svelte b/docs/src/examples/components/GeoPath/animated-globe.svelte index cb7097ed0..f3fd04188 100644 --- a/docs/src/examples/components/GeoPath/animated-globe.svelte +++ b/docs/src/examples/components/GeoPath/animated-globe.svelte @@ -11,7 +11,7 @@ Layer, Tooltip, defaultChartPadding, - type ChartContextValue + type ChartState } from 'layerchart'; import { Button } from 'svelte-ux'; import { sortFunc } from '@layerstack/utils'; @@ -26,7 +26,7 @@ const topology = await getCountriesTopology(); const countries = feature(topology, topology.objects.countries); - let context = $state(null!); + let context = $state(null!); let selectedFeature: (typeof countries.features)[0] | null = $state(null); @@ -104,76 +104,76 @@ export { data }; -
+
-
- {#each countries.features.sort(sortFunc('properties.name')) as country (country)} - {@const isSelected = selectedFeature?.properties.name === country.properties.name} -
- -
- {/each} -
- {#snippet children()} - {#if debug} -
- -
- {/if} - - - - - - {#each countries.features as country (country)} - (selectedFeature = country)} - tooltipContext={context.tooltip} - /> - {/each} + {#if debug} +
+ +
+ {/if} + + + + + + {#each countries.features as country (country)} + (selectedFeature = country)} + tooltip + /> + {/each} + + + {#if layer === 'canvas'} + + + {#if context.tooltip.data} + + {/if} + {/if} - {#if layer === 'canvas'} - - - {#if context.tooltip.data} - - {/if} - - {/if} - - - {context.tooltip.data.properties.name} - - {/snippet} + + {context.tooltip.data.properties.name} + + +
+ {#each countries.features.sort(sortFunc('properties.name')) as country (country)} + {@const isSelected = selectedFeature?.properties.name === country.properties.name} +
+ +
+ {/each} +
diff --git a/docs/src/examples/components/GeoPath/bubble-map.svelte b/docs/src/examples/components/GeoPath/bubble-map.svelte index a222df86e..9eac452b5 100644 --- a/docs/src/examples/components/GeoPath/bubble-map.svelte +++ b/docs/src/examples/components/GeoPath/bubble-map.svelte @@ -76,7 +76,7 @@ }} transform={{ mode: 'canvas', - initialScrollMode: 'scale' + scrollMode: 'scale' }} padding={{ top: 60 }} height={600} @@ -110,7 +110,7 @@ {#each enrichedCountiesFeatures as feature} diff --git a/docs/src/examples/components/GeoPath/choropleth.svelte b/docs/src/examples/components/GeoPath/choropleth.svelte index c42d9e4f3..2e3b7937d 100644 --- a/docs/src/examples/components/GeoPath/choropleth.svelte +++ b/docs/src/examples/components/GeoPath/choropleth.svelte @@ -62,10 +62,10 @@ }} transform={{ mode: 'canvas', - initialScrollMode: 'scale' + scrollMode: 'scale' }} padding={{ top: 60 }} - tooltip={{ raiseTarget: getSettings().layer === 'svg' }} + tooltipContext={{ raiseTarget: getSettings().layer === 'svg' }} height={600} > {#snippet children({ context })} @@ -79,7 +79,7 @@ fill={colorScale(feature.properties.data?.population ?? 0)} class="stroke-none hover:stroke-white" {strokeWidth} - tooltipContext={context.tooltip} + tooltip /> {/each} diff --git a/docs/src/examples/components/GeoPath/eclipses-globe.svelte b/docs/src/examples/components/GeoPath/eclipses-globe.svelte index 599e3f620..5dd0d1c86 100644 --- a/docs/src/examples/components/GeoPath/eclipses-globe.svelte +++ b/docs/src/examples/components/GeoPath/eclipses-globe.svelte @@ -66,9 +66,9 @@ d.fips); - const width = 7; + const spikeWidth = 7; const maxHeight = 200; const heightScale = scaleLinear() .domain([0, max(population, (d) => d.population) ?? 0]) @@ -62,7 +62,7 @@ }} transform={{ mode: 'canvas', - initialScrollMode: 'scale' + scrollMode: 'scale' }} height={600} clip @@ -80,8 +80,12 @@ {@const [x, y] = geoPath?.centroid(feature) ?? [0, 0]} {@const d = feature.properties.data} {@const height = heightScale(d?.population ?? 0)} - @@ -92,7 +96,7 @@ {#each enrichedCountiesFeatures as feature} diff --git a/docs/src/examples/components/GeoPath/submarine-cables-globe.svelte b/docs/src/examples/components/GeoPath/submarine-cables-globe.svelte index 10e0278b4..aded95c4c 100644 --- a/docs/src/examples/components/GeoPath/submarine-cables-globe.svelte +++ b/docs/src/examples/components/GeoPath/submarine-cables-globe.svelte @@ -56,9 +56,9 @@ - {#snippet children({ context })} - - - - - - {#each timezoneGeojson.features as feature} - - {/each} - + + - {#each countriesGeojson.features as feature} + + + {#each timezoneGeojson.features as feature} {/each} + - {#each statesGeojson.features as feature} - - {/each} + {#each countriesGeojson.features as feature} + + {/each} + + {#each statesGeojson.features as feature} + + {/each} - {#if showDaylight} - - - - - - {/if} - - - - {#snippet children({ data })} - {@const { tz_name1st, time_zone, places } = data.properties} - - - - - - - {/snippet} - - {/snippet} + {#if showDaylight} + + + + + + {/if} + + + + {#snippet children({ data })} + {@const { tz_name1st, time_zone, places } = data.properties} + + + + + + + {/snippet} + diff --git a/docs/src/examples/components/GeoPath/tooltip.svelte b/docs/src/examples/components/GeoPath/tooltip.svelte index 9660aa5be..05b309b78 100644 --- a/docs/src/examples/components/GeoPath/tooltip.svelte +++ b/docs/src/examples/components/GeoPath/tooltip.svelte @@ -24,7 +24,7 @@ {/each} diff --git a/docs/src/examples/components/GeoPath/transform-canvas-scale-extent.svelte b/docs/src/examples/components/GeoPath/transform-canvas-scale-extent.svelte new file mode 100644 index 000000000..54321f831 --- /dev/null +++ b/docs/src/examples/components/GeoPath/transform-canvas-scale-extent.svelte @@ -0,0 +1,44 @@ + + + + {#snippet children({ context })} + + + + {#each states.features as feature (feature.id)} + + {/each} + + {/snippet} + diff --git a/docs/src/examples/components/GeoPath/transform-canvas.svelte b/docs/src/examples/components/GeoPath/transform-canvas.svelte index 77c57b434..f4de812c2 100644 --- a/docs/src/examples/components/GeoPath/transform-canvas.svelte +++ b/docs/src/examples/components/GeoPath/transform-canvas.svelte @@ -53,10 +53,11 @@ }} transform={{ mode: 'canvas', - initialScrollMode: 'none', + scrollMode: 'none', motion: { type: 'tween', duration: 800, easing: cubicOut } }} height={600} + clip > {#snippet children({ context })} @@ -67,7 +68,7 @@ geojson={feature} class="stroke-surface-content fill-surface-100 hover:fill-surface-content/10" strokeWidth={1 / context.transform.scale} - tooltipContext={context.tooltip} + tooltip onclick={(e, geoPath) => { context.tooltip.hide(); if (selectedStateId === feature.id) { @@ -96,7 +97,7 @@ { diff --git a/docs/src/examples/components/GeoPath/transform-globe-constrain.svelte b/docs/src/examples/components/GeoPath/transform-globe-constrain.svelte new file mode 100644 index 000000000..2b618e4fe --- /dev/null +++ b/docs/src/examples/components/GeoPath/transform-globe-constrain.svelte @@ -0,0 +1,43 @@ + + + ({ + scale, + translate: { + x: translate.x, + y: Math.max(-90, Math.min(90, translate.y)) + } + }) + }} + padding={{ top: 5, bottom: 5, left: 5, right: 5 }} + height={400} +> + {#snippet children()} + + + + {#each countries.features as feature} + + {/each} + + {/snippet} + diff --git a/docs/src/examples/components/GeoPath/transform-globe-inertia.svelte b/docs/src/examples/components/GeoPath/transform-globe-inertia.svelte new file mode 100644 index 000000000..13c3ee6f2 --- /dev/null +++ b/docs/src/examples/components/GeoPath/transform-globe-inertia.svelte @@ -0,0 +1,57 @@ + + +
+ + + + + +
+ + ({ + scale, + translate: { + x: translate.x, + y: Math.max(-90, Math.min(90, translate.y)) + } + }) + }} + padding={{ top: 5, bottom: 5, left: 5, right: 5 }} + height={400} +> + {#snippet children()} + + + + {#each countries.features as feature} + + {/each} + + {/snippet} + diff --git a/docs/src/examples/components/GeoPath/transform-projection.svelte b/docs/src/examples/components/GeoPath/transform-projection.svelte index 8ff745d61..206534064 100644 --- a/docs/src/examples/components/GeoPath/transform-projection.svelte +++ b/docs/src/examples/components/GeoPath/transform-projection.svelte @@ -49,12 +49,13 @@ { context.tooltip.hide(); if (selectedStateId === feature.id) { @@ -94,7 +95,7 @@ { selectedStateId = null; diff --git a/docs/src/examples/components/GeoPath/transform-world-canvas.svelte b/docs/src/examples/components/GeoPath/transform-world-canvas.svelte new file mode 100644 index 000000000..f2570ce9f --- /dev/null +++ b/docs/src/examples/components/GeoPath/transform-world-canvas.svelte @@ -0,0 +1,122 @@ + + +
+ + + + Simple (110m) + Detail (50m) + + +
+ + + {#snippet children({ context })} + + + + + + + {#each countries.features as feature} + { + context.tooltip.hide(); + if (selectedCountryId === feature.id) { + selectedCountryId = null; + context.transform.reset(); + } else { + selectedCountryId = feature.id as string; + if (!geoPath) return; + // Use centroid (area-weighted) instead of bounds center + // so countries with distant territories (e.g. US, France) + // center on the main landmass + const [cx, cy] = geoPath.centroid(feature); + const [[left, top], [right, bottom]] = geoPath.bounds(feature); + const width = right - left; + const height = bottom - top; + const padding = 20; + context.transform.zoomTo( + { x: cx, y: cy }, + { width: width + padding, height: height + padding } + ); + } + }} + /> + {/each} + + + + {#if context.tooltip.data && settings.layer === 'canvas'} + + {/if} + + + + {#snippet children({ data })} + {data.properties.name} + {/snippet} + + {/snippet} + diff --git a/docs/src/examples/components/GeoPath/transform-world-projection.svelte b/docs/src/examples/components/GeoPath/transform-world-projection.svelte new file mode 100644 index 000000000..aa7bcb178 --- /dev/null +++ b/docs/src/examples/components/GeoPath/transform-world-projection.svelte @@ -0,0 +1,146 @@ + + +
+ + + + Simple (110m) + Detail (50m) + + +
+ + + {#snippet children({ context })} + + + + + + + {#each countries.features as feature} + { + context.tooltip.hide(); + if (selectedCountryId === feature.id) { + selectedCountryId = null; + context.transform.reset(); + } else { + selectedCountryId = feature.id as string; + if (context.geo.projection) { + const featureTransform = geoFitObjectTransform( + context.geo.projection, + [context.width, context.height], + feature + ); + // Adjust translate to center on geographic centroid + // instead of bounds center (handles distant territories) + const centroid = geoCentroid(feature); + const [px, py] = context.geo.projection(centroid)!; + const dx = context.width / 2 - px; + const dy = context.height / 2 - py; + context.transform.setTranslate({ + x: featureTransform.translate.x + dx, + y: featureTransform.translate.y + dy + }); + context.transform.setScale(featureTransform.scale); + } + } + }} + /> + {/each} + + + + {#if context.tooltip.data && settings.layer === 'canvas'} + + {/if} + + + + {#snippet children({ data })} + {@const [longitude, latitude] = + context.geo.projection?.invert?.([context.tooltip.x, context.tooltip.y]) ?? []} + {data.properties.name} + + + + + {/snippet} + + {/snippet} + diff --git a/docs/src/examples/components/GeoPath/translucent-globe.svelte b/docs/src/examples/components/GeoPath/translucent-globe.svelte index 2e26e6b1f..bde519feb 100644 --- a/docs/src/examples/components/GeoPath/translucent-globe.svelte +++ b/docs/src/examples/components/GeoPath/translucent-globe.svelte @@ -4,12 +4,12 @@ import { Chart, - GeoContext, + GeoProjection, GeoPath, Graticule, Layer, Tooltip, - type ChartContextValue + type ChartState } from 'layerchart'; import GeoPathTranslucentControls from '$lib/components/controls/GeoPathGlobeControls2.svelte'; import { TimerState } from '@layerstack/svelte-state'; @@ -18,7 +18,7 @@ const topology = await getCountriesTopology(); const countries = feature(topology, topology.objects.countries); - let context = $state(); + let context = $state(); let velocity = $state(3); const timer = new TimerState({ @@ -45,9 +45,9 @@ - {/each} - + @@ -77,7 +77,7 @@ {/each} diff --git a/docs/src/examples/components/GeoPath/us-state-with-counties.svelte b/docs/src/examples/components/GeoPath/us-state-with-counties.svelte index 9b2fed17a..3312761a3 100644 --- a/docs/src/examples/components/GeoPath/us-state-with-counties.svelte +++ b/docs/src/examples/components/GeoPath/us-state-with-counties.svelte @@ -51,7 +51,7 @@ {/each} {/each} {#each states.features as feature} diff --git a/docs/src/examples/components/GeoPoint/us-airports.svelte b/docs/src/examples/components/GeoPoint/us-airports.svelte index 571383b75..8e778502d 100644 --- a/docs/src/examples/components/GeoPoint/us-airports.svelte +++ b/docs/src/examples/components/GeoPoint/us-airports.svelte @@ -3,7 +3,7 @@ import { feature } from 'topojson-client'; import GeoPointControls from '$lib/components/controls/GeoPointControls.svelte'; - import { Chart, GeoPath, GeoPoint, getSettings, Layer, Tooltip } from 'layerchart'; + import { Chart, Circle, GeoPath, getSettings, Layer, Tooltip } from 'layerchart'; import { getUsStatesTopology, getUsAirports } from '$lib/geo.remote'; const [usData, airportsData] = $derived( @@ -31,7 +31,7 @@ projection: geoAlbersUsa, fitGeojson: states }} - tooltip={{ mode: tooltipMode, debug: settings.debug, radius: tooltipRadius }} + tooltipContext={{ mode: tooltipMode, debug: settings.debug, radius: tooltipRadius }} height={600} > {#snippet children({ context })} @@ -43,22 +43,16 @@ /> {/each} - {#each data.us.airports as airport} - - {/each} + {#if context.tooltip.data} - {#snippet children({ context })} @@ -40,22 +40,16 @@ {/each} - {#each data.world.airports as airport} - - {/each} + {#if context.tooltip.data} - {#snippet children({ context })} diff --git a/docs/src/examples/components/GeoProjection/geojson-preview.svelte b/docs/src/examples/components/GeoProjection/geojson-preview.svelte new file mode 100644 index 000000000..cf0eae5c1 --- /dev/null +++ b/docs/src/examples/components/GeoProjection/geojson-preview.svelte @@ -0,0 +1,163 @@ + + +
+
+ + + + +
+ +
+ {#if geojson} + + {#if projection === geoMercator && serviceUrl} + + + + + + + + {/if} + + + + + {#if geojson?.features} + {#each geojson?.features as feature} + + {/each} + {/if} + + + + {#snippet children({ data })} + + {#each Object.entries(data.properties) as [key, value]} + + {/each} + + {/snippet} + + + {:else} + Please enter input below + {/if} +
+ + + Input + Parsed + + + {#if selectedTab === 'input'} + + {:else if selectedTab === 'geojson'} + + {/if} +
diff --git a/docs/src/examples/components/GeoProjection/projection-playground.svelte b/docs/src/examples/components/GeoProjection/projection-playground.svelte new file mode 100644 index 000000000..093382be1 --- /dev/null +++ b/docs/src/examples/components/GeoProjection/projection-playground.svelte @@ -0,0 +1,88 @@ + + + + + + {#snippet children({ context })} + + + + {#each features as feature} + + {/each} + + + + {context.tooltip.data?.properties.name} + + {/snippet} + diff --git a/docs/src/examples/components/GeoProjection/satellite.svelte b/docs/src/examples/components/GeoProjection/satellite.svelte new file mode 100644 index 000000000..61e90c16e --- /dev/null +++ b/docs/src/examples/components/GeoProjection/satellite.svelte @@ -0,0 +1,57 @@ + + +
+ + + + + + +
+ + + + + + + + diff --git a/docs/src/examples/components/GeoProjection/shapefile-preview.svelte b/docs/src/examples/components/GeoProjection/shapefile-preview.svelte new file mode 100644 index 000000000..1ac87242a --- /dev/null +++ b/docs/src/examples/components/GeoProjection/shapefile-preview.svelte @@ -0,0 +1,117 @@ + + +
+
+ +
+ + + + +
+ + + +
+ +
+ {#if geojson} + + + + + + {:else} + Please specify a file + {/if} +
+
diff --git a/docs/src/examples/components/GeoProjection/topojson-preview.svelte b/docs/src/examples/components/GeoProjection/topojson-preview.svelte new file mode 100644 index 000000000..8099a219c --- /dev/null +++ b/docs/src/examples/components/GeoProjection/topojson-preview.svelte @@ -0,0 +1,176 @@ + + +
+
+ + + + +
+ +
+ {#if geojson} + + {#if projection === geoMercator && serviceUrl} + + + + + + + + {/if} + + + + + {#if geojson?.features} + {#each geojson.features as feature} + + {/each} + {/if} + + + + {#snippet children({ data })} + + {#each Object.entries(data.properties) as [key, value]} + + {/each} + + {/snippet} + + + {:else} + Please enter input below + {/if} +
+ + + Input + TopoJSON + GeoJSON + + +
+ {#if selectedTab === 'input'} + + {:else if selectedTab === 'topojson'} + + {:else if selectedTab === 'geojson'} + + + {/if} +
+
diff --git a/docs/src/examples/components/GeoSpline/draggable-globe.svelte b/docs/src/examples/components/GeoSpline/draggable-globe.svelte index 91f90dcc0..71a10297c 100644 --- a/docs/src/examples/components/GeoSpline/draggable-globe.svelte +++ b/docs/src/examples/components/GeoSpline/draggable-globe.svelte @@ -17,9 +17,9 @@ diff --git a/docs/src/examples/components/GeoTile/basic.svelte b/docs/src/examples/components/GeoTile/basic.svelte index 6ddeed82b..19aa29a4d 100644 --- a/docs/src/examples/components/GeoTile/basic.svelte +++ b/docs/src/examples/components/GeoTile/basic.svelte @@ -46,7 +46,7 @@ (selectedFeature = selectedFeature === feature ? filteredStates : feature)} /> diff --git a/docs/src/examples/components/GeoTile/clipped.svelte b/docs/src/examples/components/GeoTile/clipped.svelte index 7584b6086..361bbc2e3 100644 --- a/docs/src/examples/components/GeoTile/clipped.svelte +++ b/docs/src/examples/components/GeoTile/clipped.svelte @@ -46,7 +46,7 @@ {#each filteredStates.features as feature} (selectedFeature = selectedFeature === feature ? filteredStates : feature)} /> diff --git a/docs/src/examples/components/GeoTile/zoomable-seamless-layers.svelte b/docs/src/examples/components/GeoTile/zoomable-seamless-layers.svelte index 8d2a06bed..e22fc0562 100644 --- a/docs/src/examples/components/GeoTile/zoomable-seamless-layers.svelte +++ b/docs/src/examples/components/GeoTile/zoomable-seamless-layers.svelte @@ -1,5 +1,6 @@ + + + + + + + + + + + diff --git a/docs/src/examples/components/Image/college-football-map.svelte b/docs/src/examples/components/Image/college-football-map.svelte new file mode 100644 index 000000000..ae5009eec --- /dev/null +++ b/docs/src/examples/components/Image/college-football-map.svelte @@ -0,0 +1,104 @@ + + +
+ +
+ + + {#snippet children({ context })} + + + + {#if context.tooltip.data} + + {/if} + + + + {#each states.features as feature (feature.id)} + + {/each} + + `https://a.espncdn.com/i/teamlogos/ncaa/500/${d.espn_id}.png`} + x="longitude" + y="latitude" + width={24 / context.transform.scale} + height={24 / context.transform.scale} + preserveAspectRatio="xMidYMid slice" + /> + + + + {#snippet children({ data })} + {data.team} + + + + + {/snippet} + + {/snippet} + diff --git a/docs/src/examples/components/Image/country-flags.svelte b/docs/src/examples/components/Image/country-flags.svelte new file mode 100644 index 000000000..f4994af7a --- /dev/null +++ b/docs/src/examples/components/Image/country-flags.svelte @@ -0,0 +1,37 @@ + + + + + + + `https://flagcdn.com/w80/${d.code}.png`} + x="gdpPerCapita" + y="lifeExpectancy" + r={14} + preserveAspectRatio="xMidYMid slice" + /> + + diff --git a/docs/src/examples/components/Image/pixel-mode.svelte b/docs/src/examples/components/Image/pixel-mode.svelte new file mode 100644 index 000000000..f63366963 --- /dev/null +++ b/docs/src/examples/components/Image/pixel-mode.svelte @@ -0,0 +1,17 @@ + + + + + + + diff --git a/docs/src/examples/components/Image/planets.svelte b/docs/src/examples/components/Image/planets.svelte new file mode 100644 index 000000000..906ac4eb4 --- /dev/null +++ b/docs/src/examples/components/Image/planets.svelte @@ -0,0 +1,74 @@ + + + + + + Math.max(20, Math.sqrt(d.diameter / 100))} + height={(d) => Math.max(20, Math.sqrt(d.diameter / 100))} + /> + + diff --git a/docs/src/examples/components/Image/sports-logos.svelte b/docs/src/examples/components/Image/sports-logos.svelte new file mode 100644 index 000000000..4d18e0ed0 --- /dev/null +++ b/docs/src/examples/components/Image/sports-logos.svelte @@ -0,0 +1,88 @@ + + + + + + + `https://a.espncdn.com/i/teamlogos/nfl/500/${d.abbrev}.png`} + x="wins" + y="pointsScored" + width={32} + height={32} + /> + + diff --git a/docs/src/examples/components/Image/us-presidents.svelte b/docs/src/examples/components/Image/us-presidents.svelte new file mode 100644 index 000000000..34e1820e7 --- /dev/null +++ b/docs/src/examples/components/Image/us-presidents.svelte @@ -0,0 +1,83 @@ + + + + + + + + + diff --git a/docs/src/examples/components/Line/color-via-ordinal-scale.svelte b/docs/src/examples/components/Line/color-via-ordinal-scale.svelte new file mode 100644 index 000000000..9a5a878bd --- /dev/null +++ b/docs/src/examples/components/Line/color-via-ordinal-scale.svelte @@ -0,0 +1,33 @@ + + + + + + + 0} x2="date" y2="value" stroke="category" /> + + + diff --git a/docs/src/examples/components/Line/color-via-threshold-scale.svelte b/docs/src/examples/components/Line/color-via-threshold-scale.svelte new file mode 100644 index 000000000..b7200fc9f --- /dev/null +++ b/docs/src/examples/components/Line/color-via-threshold-scale.svelte @@ -0,0 +1,47 @@ + + + + + + + + + 0} x2="date" y2="value" stroke="value" /> + + + diff --git a/docs/src/examples/components/Line/data-mode.svelte b/docs/src/examples/components/Line/data-mode.svelte new file mode 100644 index 000000000..46207d370 --- /dev/null +++ b/docs/src/examples/components/Line/data-mode.svelte @@ -0,0 +1,23 @@ + + + + + + + 0} x2="date" y2="value" class="stroke-primary" /> + + + diff --git a/docs/src/examples/components/LineChart/brush-pan-zoom.svelte b/docs/src/examples/components/LineChart/brush-pan-zoom.svelte new file mode 100644 index 000000000..354b897cc --- /dev/null +++ b/docs/src/examples/components/LineChart/brush-pan-zoom.svelte @@ -0,0 +1,19 @@ + + + diff --git a/docs/src/examples/components/LineChart/brush.svelte b/docs/src/examples/components/LineChart/brush.svelte index ca8253763..6f6d276c4 100644 --- a/docs/src/examples/components/LineChart/brush.svelte +++ b/docs/src/examples/components/LineChart/brush.svelte @@ -11,10 +11,7 @@ x="date" y="value" brush - props={{ - spline: { motion: { type: 'tween', duration: 200 } }, - xAxis: { motion: { type: 'tween', duration: 200 }, tickMultiline: true } - }} + motion={{ type: 'spring' }} padding={defaultChartPadding({ left: 25 })} height={300} /> diff --git a/docs/src/examples/components/LineChart/dynamic-data.svelte b/docs/src/examples/components/LineChart/dynamic-data.svelte index 9459561d9..fa8c57f2a 100644 --- a/docs/src/examples/components/LineChart/dynamic-data.svelte +++ b/docs/src/examples/components/LineChart/dynamic-data.svelte @@ -19,10 +19,9 @@ x="x" y="y" yBaseline={undefined} - tooltip={false} + tooltipContext={false} + motion={{ type: 'spring' }} props={{ - yAxis: { motion: 'tween' }, - grid: { motion: 'tween' } // spline: { // draw: { // // easing function to only draw the last data point diff --git a/docs/src/examples/components/LineChart/gradient-encoding.svelte b/docs/src/examples/components/LineChart/gradient-encoding.svelte index 383d44ce8..726265636 100644 --- a/docs/src/examples/components/LineChart/gradient-encoding.svelte +++ b/docs/src/examples/components/LineChart/gradient-encoding.svelte @@ -1,43 +1,28 @@ - + {#snippet marks()} - + {#snippet children({ gradient })} {/snippet} {/snippet} - - {#snippet highlight({ context })} - {#if context.tooltip.data} - - {/if} - {/snippet} - - {#snippet tooltip({ context })} - - {#snippet children({ data })} - {@const value = context.y(data)} - {format(context.x(data))} - - - - {/snippet} - - {/snippet} diff --git a/docs/src/examples/components/LineChart/motion-tween.svelte b/docs/src/examples/components/LineChart/motion-tween.svelte new file mode 100644 index 000000000..c1fd49658 --- /dev/null +++ b/docs/src/examples/components/LineChart/motion-tween.svelte @@ -0,0 +1,22 @@ + + + + +{#if show} + +{/if} diff --git a/docs/src/examples/components/LineChart/pan-zoom-custom-constrain.svelte b/docs/src/examples/components/LineChart/pan-zoom-custom-constrain.svelte new file mode 100644 index 000000000..ed7120c11 --- /dev/null +++ b/docs/src/examples/components/LineChart/pan-zoom-custom-constrain.svelte @@ -0,0 +1,32 @@ + + + ({ + scale: Math.max(1, Math.min(20, scale)), + translate: { + x: Math.min(0, translate.x), + y: 0 + } + }) + }} + padding={defaultChartPadding({ left: 25 })} + height={300} +/> diff --git a/docs/src/examples/components/LineChart/pan-zoom-domain-extent.svelte b/docs/src/examples/components/LineChart/pan-zoom-domain-extent.svelte new file mode 100644 index 000000000..2dd81acfe --- /dev/null +++ b/docs/src/examples/components/LineChart/pan-zoom-domain-extent.svelte @@ -0,0 +1,33 @@ + + + diff --git a/docs/src/examples/components/LineChart/pan-zoom-dynamic-data.svelte b/docs/src/examples/components/LineChart/pan-zoom-dynamic-data.svelte new file mode 100644 index 000000000..9fad6ce45 --- /dev/null +++ b/docs/src/examples/components/LineChart/pan-zoom-dynamic-data.svelte @@ -0,0 +1,68 @@ + + + + + diff --git a/docs/src/examples/components/LineChart/pan-zoom-with-overview.svelte b/docs/src/examples/components/LineChart/pan-zoom-with-overview.svelte new file mode 100644 index 000000000..4d804a41f --- /dev/null +++ b/docs/src/examples/components/LineChart/pan-zoom-with-overview.svelte @@ -0,0 +1,53 @@ + + + + + { + if (mainContext && e.brush.active) { + mainContext.zoomToBrush(e.brush, 'x'); + } + }, + onBrushEnd: (e) => { + if (mainContext && !e.brush.active) { + mainContext.transform.reset(); + } + } + }} + height={40} +> + + + + diff --git a/docs/src/examples/components/LineChart/pan-zoom.svelte b/docs/src/examples/components/LineChart/pan-zoom.svelte new file mode 100644 index 000000000..400e2404d --- /dev/null +++ b/docs/src/examples/components/LineChart/pan-zoom.svelte @@ -0,0 +1,16 @@ + + + diff --git a/docs/src/examples/components/LineChart/series-individual-tooltip.svelte b/docs/src/examples/components/LineChart/series-individual-tooltip.svelte index fe1242289..cf8f6cf42 100644 --- a/docs/src/examples/components/LineChart/series-individual-tooltip.svelte +++ b/docs/src/examples/components/LineChart/series-individual-tooltip.svelte @@ -41,22 +41,26 @@ padding={defaultChartPadding({ legend: true, right: 10 })} height={300} > - {#snippet marks({ context, visibleSeries, highlightKey })} - {#each visibleSeries as s} + {#snippet marks({ context })} + {#each context.series.visibleSeries as s} {@const active = (context.tooltip.data == null || s.key === context.tooltip.data?.fruit) && - (highlightKey === null || s.key === highlightKey)} + (context.series.highlightKey === null || s.key === context.series.highlightKey)} {/each} {/snippet} - {#snippet highlight({ series, context })} - {@const activeSeriesColor = series.find((s) => s.key === context.tooltip.data?.fruit)?.color} + {#snippet highlight({ context })} + {@const activeSeriesColor = context.series.series.find( + (s) => s.key === context.tooltip.data?.fruit + )?.color} {/snippet} - {#snippet tooltip({ context, series })} - {@const activeSeriesColor = series.find((s) => s.key === context.tooltip.data?.fruit)?.color} + {#snippet tooltip({ context })} + {@const activeSeriesColor = context.series.series.find( + (s) => s.key === context.tooltip.data?.fruit + )?.color} {#snippet children({ data })} {format(context.x(data))} diff --git a/docs/src/examples/components/LineChart/series-labels-hover.svelte b/docs/src/examples/components/LineChart/series-labels-hover.svelte index 3fc9a9255..812adb935 100644 --- a/docs/src/examples/components/LineChart/series-labels-hover.svelte +++ b/docs/src/examples/components/LineChart/series-labels-hover.svelte @@ -29,10 +29,9 @@ padding={20} height={300} > - {#snippet aboveMarks({ getLabelsProps, series, highlightKey })} - {#if highlightKey} - {@const activeSeriesIndex = series.findIndex((s) => s.key === highlightKey)} - + {#snippet aboveMarks({ context })} + {#if context.series.highlightKey} + {/if} {/snippet} diff --git a/docs/src/examples/components/LineChart/series-programmatic-control.svelte b/docs/src/examples/components/LineChart/series-programmatic-control.svelte new file mode 100644 index 000000000..6c914bcb9 --- /dev/null +++ b/docs/src/examples/components/LineChart/series-programmatic-control.svelte @@ -0,0 +1,51 @@ + + +
+ {#each series as s (s.key)} + {@const isVisible = context?.series?.isVisible(s.key) ?? true} + + {/each} + + + + +
+ + diff --git a/docs/src/examples/components/LineChart/series-with-nulls.svelte b/docs/src/examples/components/LineChart/series-with-nulls.svelte index ccf77a531..4a6ed55a4 100644 --- a/docs/src/examples/components/LineChart/series-with-nulls.svelte +++ b/docs/src/examples/components/LineChart/series-with-nulls.svelte @@ -32,15 +32,15 @@ height={300} padding={defaultChartPadding({ right: 10 })} > - {#snippet belowMarks({ visibleSeries, highlightKey })} - {#each visibleSeries as s} + {#snippet belowMarks({ context })} + {#each context.series.visibleSeries as s} d[s.key] !== null)} y={s.key} stroke={s.color} class={cls( '[stroke-dasharray:3,3] transition-opacity', - highlightKey && highlightKey !== s.key && 'opacity-10' + context.series.highlightKey && context.series.highlightKey !== s.key && 'opacity-10' )} /> {/each} diff --git a/docs/src/examples/components/Partition/filterable.svelte b/docs/src/examples/components/Partition/filterable.svelte index 71a0e3042..0a7908465 100644 --- a/docs/src/examples/components/Partition/filterable.svelte +++ b/docs/src/examples/components/Partition/filterable.svelte @@ -129,7 +129,7 @@ stroke={colorBy === 'children' ? 'var(--color-primary-content)' : hsl(nodeColor).darker(1).toString()} - stroke-opacity={colorBy === 'children' ? 0.2 : 1} + strokeOpacity={colorBy === 'children' ? 0.2 : 1} fill={nodeColor} rx={5} motion={{ type: 'tween', delay: 600 }} diff --git a/docs/src/examples/components/Partition/horizontal.svelte b/docs/src/examples/components/Partition/horizontal.svelte index 969f278fd..6754bb8a5 100644 --- a/docs/src/examples/components/Partition/horizontal.svelte +++ b/docs/src/examples/components/Partition/horizontal.svelte @@ -112,7 +112,7 @@ stroke={colorBy === 'children' ? 'var(--color-primary-content)' : hsl(nodeColor).darker(1).toString()} - stroke-opacity={colorBy === 'children' ? 0.2 : 1} + strokeOpacity={colorBy === 'children' ? 0.2 : 1} fill={nodeColor} rx={5} /> diff --git a/docs/src/examples/components/Partition/vertical.svelte b/docs/src/examples/components/Partition/vertical.svelte index 66da24bf9..e3e4391a7 100644 --- a/docs/src/examples/components/Partition/vertical.svelte +++ b/docs/src/examples/components/Partition/vertical.svelte @@ -113,7 +113,7 @@ stroke={colorBy === 'children' ? 'var(--color-primary-content)' : hsl(nodeColor).darker(1).toString()} - stroke-opacity={colorBy === 'children' ? 0.2 : 1} + strokeOpacity={colorBy === 'children' ? 0.2 : 1} fill={nodeColor} rx={5} /> diff --git a/docs/src/examples/components/Pie/tooltip.svelte b/docs/src/examples/components/Pie/tooltip.svelte index e6b314151..a57406d52 100644 --- a/docs/src/examples/components/Pie/tooltip.svelte +++ b/docs/src/examples/components/Pie/tooltip.svelte @@ -17,23 +17,21 @@ - {#snippet children({ context })} - - - - - {#snippet children({ data })} - - - - - - {/snippet} - - {/snippet} + + + + + {#snippet children({ data })} + + + + + + {/snippet} + diff --git a/docs/src/examples/components/PieChart/segments.svelte b/docs/src/examples/components/PieChart/segments.svelte index bee35c582..d413d7e67 100644 --- a/docs/src/examples/components/PieChart/segments.svelte +++ b/docs/src/examples/components/PieChart/segments.svelte @@ -30,7 +30,7 @@ innerRadius={-20} cornerRadius={4} padAngle={0.02} - tooltip={false} + tooltipContext={false} height={300} > {#snippet aboveMarks()} diff --git a/docs/src/examples/components/Points/with-tooltip-and-highlight.svelte b/docs/src/examples/components/Points/with-tooltip-and-highlight.svelte index 48164751a..f103486da 100644 --- a/docs/src/examples/components/Points/with-tooltip-and-highlight.svelte +++ b/docs/src/examples/components/Points/with-tooltip-and-highlight.svelte @@ -14,7 +14,7 @@ yDomain={[0, null]} yNice padding={20} - tooltip={{ mode: 'quadtree-x' }} + tooltipContext={{ mode: 'quadtree-x' }} height={300} > diff --git a/docs/src/examples/components/Polygon/color-via-ordinal-scale.svelte b/docs/src/examples/components/Polygon/color-via-ordinal-scale.svelte new file mode 100644 index 000000000..ec3b75743 --- /dev/null +++ b/docs/src/examples/components/Polygon/color-via-ordinal-scale.svelte @@ -0,0 +1,29 @@ + + + + + + + + + diff --git a/docs/src/examples/components/Polygon/color-via-threshold-scale.svelte b/docs/src/examples/components/Polygon/color-via-threshold-scale.svelte new file mode 100644 index 000000000..526336b04 --- /dev/null +++ b/docs/src/examples/components/Polygon/color-via-threshold-scale.svelte @@ -0,0 +1,44 @@ + + + + + + + + + + + diff --git a/docs/src/examples/components/Polygon/data-mode.svelte b/docs/src/examples/components/Polygon/data-mode.svelte new file mode 100644 index 000000000..8de5a1a9c --- /dev/null +++ b/docs/src/examples/components/Polygon/data-mode.svelte @@ -0,0 +1,20 @@ + + + + + + + + + diff --git a/docs/src/examples/components/Raster/mandelbrot.svelte b/docs/src/examples/components/Raster/mandelbrot.svelte new file mode 100644 index 000000000..0525e71a2 --- /dev/null +++ b/docs/src/examples/components/Raster/mandelbrot.svelte @@ -0,0 +1,27 @@ + + + + + + + + + diff --git a/docs/src/examples/components/Raster/math-functions.svelte b/docs/src/examples/components/Raster/math-functions.svelte new file mode 100644 index 000000000..82f4e11e5 --- /dev/null +++ b/docs/src/examples/components/Raster/math-functions.svelte @@ -0,0 +1,115 @@ + + +
+
+ + + + + +
+ + + + + + + {#if showContours} + + {/if} + + +
diff --git a/docs/src/examples/components/Raster/sampled.svelte b/docs/src/examples/components/Raster/sampled.svelte new file mode 100644 index 000000000..98ed9889d --- /dev/null +++ b/docs/src/examples/components/Raster/sampled.svelte @@ -0,0 +1,19 @@ + + + + + + + Math.sin(x) * Math.cos(y)} /> + + diff --git a/docs/src/examples/components/Raster/volcano.svelte b/docs/src/examples/components/Raster/volcano.svelte new file mode 100644 index 000000000..362ead4c6 --- /dev/null +++ b/docs/src/examples/components/Raster/volcano.svelte @@ -0,0 +1,21 @@ + + + + + + + + + diff --git a/docs/src/examples/components/Raster/with-contour-overlay.svelte b/docs/src/examples/components/Raster/with-contour-overlay.svelte new file mode 100644 index 000000000..6fcced97e --- /dev/null +++ b/docs/src/examples/components/Raster/with-contour-overlay.svelte @@ -0,0 +1,30 @@ + + + + + + + + + + diff --git a/docs/src/examples/components/Rect/color-via-ordinal-scale.svelte b/docs/src/examples/components/Rect/color-via-ordinal-scale.svelte new file mode 100644 index 000000000..907ed46e3 --- /dev/null +++ b/docs/src/examples/components/Rect/color-via-ordinal-scale.svelte @@ -0,0 +1,39 @@ + + + + + + + 0} + x1="x1" + y1="count" + insets={{ x: 1 }} + fill="group" + /> + + diff --git a/docs/src/examples/components/Rect/color-via-threshold-scale.svelte b/docs/src/examples/components/Rect/color-via-threshold-scale.svelte new file mode 100644 index 000000000..873c4d02e --- /dev/null +++ b/docs/src/examples/components/Rect/color-via-threshold-scale.svelte @@ -0,0 +1,53 @@ + + + + + + + + + 0} + x1="x1" + y1="count" + insets={{ x: 1 }} + fill="count" + /> + + diff --git a/docs/src/examples/components/Rect/data-mode-edge.svelte b/docs/src/examples/components/Rect/data-mode-edge.svelte new file mode 100644 index 000000000..cf0e91932 --- /dev/null +++ b/docs/src/examples/components/Rect/data-mode-edge.svelte @@ -0,0 +1,28 @@ + + + + + + + 0} + x1="x1" + y1="count" + insets={{ x: 1 }} + class="fill-primary" + /> + + diff --git a/docs/src/examples/components/Rule/candlestick-open-close-line-color.svelte b/docs/src/examples/components/Rule/candlestick-open-close-line-color.svelte index 92a04dd35..4a0410884 100644 --- a/docs/src/examples/components/Rule/candlestick-open-close-line-color.svelte +++ b/docs/src/examples/components/Rule/candlestick-open-close-line-color.svelte @@ -18,7 +18,7 @@ cDomain={['desc', 'asc']} cRange={['var(--color-danger)', 'var(--color-success)']} padding={{ left: 20, bottom: 32, top: 20 }} - tooltip={{ mode: 'quadtree-x' }} + tooltipContext={{ mode: 'quadtree-x' }} height={300} > diff --git a/docs/src/examples/components/Rule/candlestick-with-brushing.svelte b/docs/src/examples/components/Rule/candlestick-with-brushing.svelte index 98a2d5782..91720302d 100644 --- a/docs/src/examples/components/Rule/candlestick-with-brushing.svelte +++ b/docs/src/examples/components/Rule/candlestick-with-brushing.svelte @@ -26,7 +26,7 @@ cDomain={['desc', 'asc']} cRange={['var(--color-danger)', 'var(--color-success)']} padding={{ left: 20, bottom: 32, top: 20 }} - tooltip={{ mode: 'quadtree-x' }} + tooltipContext={{ mode: 'quadtree-x' }} height={300} > @@ -60,7 +60,7 @@ height={40} brush={{ onChange: (e) => { - xDomain = e.xDomain; + xDomain = e.brush.x; } }} > diff --git a/docs/src/examples/components/Rule/candlestick.svelte b/docs/src/examples/components/Rule/candlestick.svelte index 01efb8bad..e179494e7 100644 --- a/docs/src/examples/components/Rule/candlestick.svelte +++ b/docs/src/examples/components/Rule/candlestick.svelte @@ -18,7 +18,7 @@ cDomain={['desc', 'asc']} cRange={['var(--color-danger)', 'var(--color-success)']} padding={{ left: 20, bottom: 32, top: 20 }} - tooltip={{ mode: 'quadtree-x' }} + tooltipContext={{ mode: 'quadtree-x' }} height={300} > diff --git a/docs/src/examples/components/Rule/lollipop.svelte b/docs/src/examples/components/Rule/lollipop.svelte index 7bff3ee5b..3468243e1 100644 --- a/docs/src/examples/components/Rule/lollipop.svelte +++ b/docs/src/examples/components/Rule/lollipop.svelte @@ -15,7 +15,7 @@ y="frequency" yNice padding={{ left: 20, bottom: 32 }} - tooltip={{ mode: 'band' }} + tooltipContext={{ mode: 'band' }} height={400} > diff --git a/docs/src/examples/components/Sankey/complex.svelte b/docs/src/examples/components/Sankey/complex.svelte index d8a84945d..70f7dccb8 100644 --- a/docs/src/examples/components/Sankey/complex.svelte +++ b/docs/src/examples/components/Sankey/complex.svelte @@ -64,7 +64,7 @@ stroke={config.linkColorBy === 'static' ? undefined : colorScale(link[config.linkColorBy][config.nodeColorBy])} - stroke-opacity={highlightLinkIndexes.length && + strokeOpacity={highlightLinkIndexes.length && !highlightLinkIndexes.includes(link.index) ? linkOpacity.inactive : linkOpacity.default} diff --git a/docs/src/examples/components/Sankey/hierarchy.svelte b/docs/src/examples/components/Sankey/hierarchy.svelte index 51ad056aa..70e580352 100644 --- a/docs/src/examples/components/Sankey/hierarchy.svelte +++ b/docs/src/examples/components/Sankey/hierarchy.svelte @@ -79,8 +79,7 @@ stroke={config.linkColorBy === 'static' ? undefined : colorScale(link[config.linkColorBy][config.nodeColorBy])} - stroke-opacity={highlightLinkIndexes.length && - !highlightLinkIndexes.includes(link.index) + strokeOpacity={highlightLinkIndexes.length && !highlightLinkIndexes.includes(link.index) ? linkOpacity.inactive : linkOpacity.default} strokeWidth={link.width} diff --git a/docs/src/examples/components/ScatterChart/single-dimension.svelte b/docs/src/examples/components/ScatterChart/single-dimension.svelte index fc684237b..436ab212d 100644 --- a/docs/src/examples/components/ScatterChart/single-dimension.svelte +++ b/docs/src/examples/components/ScatterChart/single-dimension.svelte @@ -18,8 +18,7 @@ points: { opacity: 0.3 }, highlight: { lines: false } }} - padding={24} - height={48} + height={24} > {#snippet tooltip({ context })} diff --git a/docs/src/examples/components/ScatterChart/zoomable-bubble.svelte b/docs/src/examples/components/ScatterChart/zoomable-bubble.svelte new file mode 100644 index 000000000..10a6fedff --- /dev/null +++ b/docs/src/examples/components/ScatterChart/zoomable-bubble.svelte @@ -0,0 +1,71 @@ + + + { + const color = continentColors[continent] ?? 'var(--color-primary)'; + return { + key: continentLabels[continent] ?? continent, + data: items, + color, + props: { + fill: color, + fillOpacity: 0.5, + stroke: 'none' + } + }; + })} + transform={{ + mode: 'domain', + scaleExtent: [1, 20], + domainExtent: { x: { min: 'data', max: 'data' }, y: { min: 'data', max: 'data' } } + }} + highlight={{ lines: true, points: true, axis: 'both', r: true }} + rule={false} + legend + padding={defaultChartPadding({ top: 20, bottom: 48, left: 20, right: 20 })} + height={500} +> + {#snippet tooltip()} + + {#snippet children({ data })} + {data.title} + + + + + + {/snippet} + + {/snippet} + diff --git a/docs/src/examples/components/Spline/geo-routes.svelte b/docs/src/examples/components/Spline/geo-routes.svelte new file mode 100644 index 000000000..d95627b21 --- /dev/null +++ b/docs/src/examples/components/Spline/geo-routes.svelte @@ -0,0 +1,42 @@ + + + + + + + {#each countries.features as feature, i (feature.id ?? i)} + + {/each} + + + + diff --git a/docs/src/examples/components/Spline/multiple-series-highlight-on-hover.svelte b/docs/src/examples/components/Spline/multiple-series-highlight-on-hover.svelte index eb524dbca..ff399ed0f 100644 --- a/docs/src/examples/components/Spline/multiple-series-highlight-on-hover.svelte +++ b/docs/src/examples/components/Spline/multiple-series-highlight-on-hover.svelte @@ -44,7 +44,7 @@ cDomain={Object.keys(fruitColors)} cRange={Object.values(fruitColors)} padding={{ top: 25, left: 25, bottom: 25, right: 48 }} - tooltip={{ mode: 'quadtree' }} + tooltipContext={{ mode: 'quadtree' }} height={300} > {#snippet children({ context })} diff --git a/docs/src/examples/components/Spline/multiple-series-using-overrides.svelte b/docs/src/examples/components/Spline/multiple-series-using-overrides.svelte index c101f78fe..30214b1a1 100644 --- a/docs/src/examples/components/Spline/multiple-series-using-overrides.svelte +++ b/docs/src/examples/components/Spline/multiple-series-using-overrides.svelte @@ -22,7 +22,7 @@ yDomain={[0, null]} yNice padding={25} - tooltip={{ mode: 'quadtree-x' }} + tooltipContext={{ mode: 'quadtree-x' }} height={300} > diff --git a/docs/src/examples/components/Spline/multiple-series-with-labels.svelte b/docs/src/examples/components/Spline/multiple-series-with-labels.svelte index ddf282738..be6bf8077 100644 --- a/docs/src/examples/components/Spline/multiple-series-with-labels.svelte +++ b/docs/src/examples/components/Spline/multiple-series-with-labels.svelte @@ -33,7 +33,7 @@ cDomain={Object.keys(fruitColors)} cRange={Object.values(fruitColors)} padding={25} - tooltip={{ mode: 'quadtree' }} + tooltipContext={{ mode: 'quadtree' }} height={300} > {#snippet children({ context })} diff --git a/docs/src/examples/components/Spline/multiple-series.svelte b/docs/src/examples/components/Spline/multiple-series.svelte index 4eb860b9f..3a1fa1d52 100644 --- a/docs/src/examples/components/Spline/multiple-series.svelte +++ b/docs/src/examples/components/Spline/multiple-series.svelte @@ -43,7 +43,7 @@ cDomain={Object.keys(fruitColors)} cRange={Object.values(fruitColors)} padding={{ top: 25, left: 25, bottom: 25, right: 48 }} - tooltip={{ mode: 'quadtree' }} + tooltipContext={{ mode: 'quadtree' }} height={300} > {#snippet children({ context })} diff --git a/docs/src/examples/components/Spline/tween-on-mount.svelte b/docs/src/examples/components/Spline/tween-on-mount.svelte new file mode 100644 index 000000000..1b6959adc --- /dev/null +++ b/docs/src/examples/components/Spline/tween-on-mount.svelte @@ -0,0 +1,21 @@ + + + + + + + + + {#if show} + + {/if} + + diff --git a/docs/src/examples/components/Spline/vertical.svelte b/docs/src/examples/components/Spline/vertical.svelte index 6a58467ab..03fdce784 100644 --- a/docs/src/examples/components/Spline/vertical.svelte +++ b/docs/src/examples/components/Spline/vertical.svelte @@ -14,7 +14,7 @@ xNice y="date" padding={25} - tooltip={{ mode: 'quadtree-y' }} + tooltipContext={{ mode: 'quadtree-y' }} height={600} width={400} > diff --git a/docs/src/examples/components/Spline/with-tooltip-and-highlight.svelte b/docs/src/examples/components/Spline/with-tooltip-and-highlight.svelte index 159323638..254db39b3 100644 --- a/docs/src/examples/components/Spline/with-tooltip-and-highlight.svelte +++ b/docs/src/examples/components/Spline/with-tooltip-and-highlight.svelte @@ -14,7 +14,7 @@ yDomain={[0, null]} yNice padding={25} - tooltip={{ mode: 'quadtree-x' }} + tooltipContext={{ mode: 'quadtree-x' }} height={300} > diff --git a/docs/src/examples/components/Text/color-via-ordinal-scale.svelte b/docs/src/examples/components/Text/color-via-ordinal-scale.svelte new file mode 100644 index 000000000..71d403c0d --- /dev/null +++ b/docs/src/examples/components/Text/color-via-ordinal-scale.svelte @@ -0,0 +1,38 @@ + + + + + + + + + + diff --git a/docs/src/examples/components/Text/color-via-threshold-scale.svelte b/docs/src/examples/components/Text/color-via-threshold-scale.svelte new file mode 100644 index 000000000..488eda5ac --- /dev/null +++ b/docs/src/examples/components/Text/color-via-threshold-scale.svelte @@ -0,0 +1,53 @@ + + + + + + + + + + + + diff --git a/docs/src/examples/components/Text/data-mode.svelte b/docs/src/examples/components/Text/data-mode.svelte new file mode 100644 index 000000000..60117f4a7 --- /dev/null +++ b/docs/src/examples/components/Text/data-mode.svelte @@ -0,0 +1,35 @@ + + + + + + + + + + diff --git a/docs/src/examples/components/Threshold/basic.svelte b/docs/src/examples/components/Threshold/basic.svelte index f1086e39a..3c73df3d1 100644 --- a/docs/src/examples/components/Threshold/basic.svelte +++ b/docs/src/examples/components/Threshold/basic.svelte @@ -24,7 +24,7 @@ x="date" y={['value', 'baseline']} padding={{ left: 16, bottom: 24 }} - tooltip={false} + tooltipContext={false} height={300} > {#snippet marks()} diff --git a/docs/src/examples/components/Threshold/with-labels.svelte b/docs/src/examples/components/Threshold/with-labels.svelte index 2e6fa1cc3..9257f73da 100644 --- a/docs/src/examples/components/Threshold/with-labels.svelte +++ b/docs/src/examples/components/Threshold/with-labels.svelte @@ -25,7 +25,7 @@ y={['value', 'baseline']} padding={{ left: 16, bottom: 24 }} labels - tooltip={false} + tooltipContext={false} height={300} > {#snippet marks()} diff --git a/docs/src/examples/components/Tooltip/anchor-location.svelte b/docs/src/examples/components/Tooltip/anchor-location.svelte index 64e39979b..24f2a44b0 100644 --- a/docs/src/examples/components/Tooltip/anchor-location.svelte +++ b/docs/src/examples/components/Tooltip/anchor-location.svelte @@ -30,7 +30,7 @@ yDomain={[0, null]} yNice padding={defaultChartPadding({ top: 5, left: 28, bottom: 24, right: 15 })} - tooltip={{ mode: 'quadtree-x' }} + tooltipContext={{ mode: 'quadtree-x' }} height={300} > diff --git a/docs/src/examples/components/Tooltip/area.svelte b/docs/src/examples/components/Tooltip/area.svelte index 62c7228a1..a4cabc254 100644 --- a/docs/src/examples/components/Tooltip/area.svelte +++ b/docs/src/examples/components/Tooltip/area.svelte @@ -31,7 +31,7 @@ yDomain={[0, null]} yNice padding={defaultChartPadding({ top: 5, left: 28, bottom: 24, right: 15 })} - tooltip={{ + tooltipContext={{ mode: settings.mode }} height={300} diff --git a/docs/src/examples/components/Tooltip/basic.svelte b/docs/src/examples/components/Tooltip/basic.svelte index dc22fa324..3612cd161 100644 --- a/docs/src/examples/components/Tooltip/basic.svelte +++ b/docs/src/examples/components/Tooltip/basic.svelte @@ -20,7 +20,7 @@ yDomain={[0, null]} yNice padding={defaultChartPadding({ top: 5, left: 28, bottom: 24, right: 15 })} - tooltip={{ mode: 'quadtree-x' }} + tooltipContext={{ mode: 'quadtree-x' }} height={300} > diff --git a/docs/src/examples/components/Tooltip/color-swatch-using-theme.svelte b/docs/src/examples/components/Tooltip/color-swatch-using-theme.svelte index 50c9efb5c..94094dafa 100644 --- a/docs/src/examples/components/Tooltip/color-swatch-using-theme.svelte +++ b/docs/src/examples/components/Tooltip/color-swatch-using-theme.svelte @@ -20,7 +20,7 @@ yDomain={[0, null]} yNice padding={defaultChartPadding({ top: 5, left: 28, bottom: 24, right: 15 })} - tooltip={{ mode: 'quadtree-x' }} + tooltipContext={{ mode: 'quadtree-x' }} height={300} > diff --git a/docs/src/examples/components/Tooltip/color-swatch.svelte b/docs/src/examples/components/Tooltip/color-swatch.svelte index 39d22a8c9..9853ea409 100644 --- a/docs/src/examples/components/Tooltip/color-swatch.svelte +++ b/docs/src/examples/components/Tooltip/color-swatch.svelte @@ -20,7 +20,7 @@ yDomain={[0, null]} yNice padding={defaultChartPadding({ top: 5, left: 28, bottom: 24, right: 15 })} - tooltip={{ mode: 'quadtree-x' }} + tooltipContext={{ mode: 'quadtree-x' }} height={300} > diff --git a/docs/src/examples/components/Tooltip/custom-content.svelte b/docs/src/examples/components/Tooltip/custom-content.svelte index 8790a13e6..acfaedb60 100644 --- a/docs/src/examples/components/Tooltip/custom-content.svelte +++ b/docs/src/examples/components/Tooltip/custom-content.svelte @@ -20,7 +20,7 @@ yDomain={[0, null]} yNice padding={defaultChartPadding({ top: 5, left: 28, bottom: 24, right: 15 })} - tooltip={{ mode: 'quadtree-x' }} + tooltipContext={{ mode: 'quadtree-x' }} height={300} > diff --git a/docs/src/examples/components/Tooltip/data-snapping.svelte b/docs/src/examples/components/Tooltip/data-snapping.svelte index eb58a13ac..98947c467 100644 --- a/docs/src/examples/components/Tooltip/data-snapping.svelte +++ b/docs/src/examples/components/Tooltip/data-snapping.svelte @@ -20,7 +20,7 @@ yDomain={[0, null]} yNice padding={defaultChartPadding({ top: 5, left: 28, bottom: 24, right: 15 })} - tooltip={{ mode: 'quadtree-x' }} + tooltipContext={{ mode: 'quadtree-x' }} height={300} > diff --git a/docs/src/examples/components/Tooltip/default-mouse-position-with-offset.svelte b/docs/src/examples/components/Tooltip/default-mouse-position-with-offset.svelte index dc22fa324..3612cd161 100644 --- a/docs/src/examples/components/Tooltip/default-mouse-position-with-offset.svelte +++ b/docs/src/examples/components/Tooltip/default-mouse-position-with-offset.svelte @@ -20,7 +20,7 @@ yDomain={[0, null]} yNice padding={defaultChartPadding({ top: 5, left: 28, bottom: 24, right: 15 })} - tooltip={{ mode: 'quadtree-x' }} + tooltipContext={{ mode: 'quadtree-x' }} height={300} > diff --git a/docs/src/examples/components/Tooltip/disable-motion.svelte b/docs/src/examples/components/Tooltip/disable-motion.svelte index 9b31ab8c3..47626370f 100644 --- a/docs/src/examples/components/Tooltip/disable-motion.svelte +++ b/docs/src/examples/components/Tooltip/disable-motion.svelte @@ -20,7 +20,7 @@ yDomain={[0, null]} yNice padding={defaultChartPadding({ top: 5, left: 28, bottom: 24, right: 15 })} - tooltip={{ mode: 'quadtree-x' }} + tooltipContext={{ mode: 'quadtree-x' }} height={300} > diff --git a/docs/src/examples/components/Tooltip/duration.svelte b/docs/src/examples/components/Tooltip/duration.svelte index a0c7bbbce..81dc7e643 100644 --- a/docs/src/examples/components/Tooltip/duration.svelte +++ b/docs/src/examples/components/Tooltip/duration.svelte @@ -41,7 +41,7 @@ x={['startDate', 'endDate']} y="name" xNice - tooltip={{ + tooltipContext={{ mode: settings.mode }} padding={defaultChartPadding({ left: 36, bottom: 36, right: 20 })} diff --git a/docs/src/examples/components/Tooltip/externally-access-tooltip-data.svelte b/docs/src/examples/components/Tooltip/externally-access-tooltip-data.svelte index b714947e5..0fcd99801 100644 --- a/docs/src/examples/components/Tooltip/externally-access-tooltip-data.svelte +++ b/docs/src/examples/components/Tooltip/externally-access-tooltip-data.svelte @@ -43,7 +43,7 @@ yDomain={[0, null]} yNice padding={defaultChartPadding({ top: 5, left: 28, bottom: 24, right: 15 })} - tooltip={{ mode: 'quadtree-x' }} + tooltipContext={{ mode: 'quadtree-x' }} bind:context height={300} > diff --git a/docs/src/examples/components/Tooltip/invert-variant.svelte b/docs/src/examples/components/Tooltip/invert-variant.svelte index 0bcd1e1b1..0a98fbe0c 100644 --- a/docs/src/examples/components/Tooltip/invert-variant.svelte +++ b/docs/src/examples/components/Tooltip/invert-variant.svelte @@ -20,7 +20,7 @@ yDomain={[0, null]} yNice padding={defaultChartPadding({ top: 5, left: 28, bottom: 24, right: 15 })} - tooltip={{ mode: 'quadtree-x' }} + tooltipContext={{ mode: 'quadtree-x' }} height={300} > diff --git a/docs/src/examples/components/Tooltip/multiple-overlapping-bars.svelte b/docs/src/examples/components/Tooltip/multiple-overlapping-bars.svelte index 5b3076858..72839c031 100644 --- a/docs/src/examples/components/Tooltip/multiple-overlapping-bars.svelte +++ b/docs/src/examples/components/Tooltip/multiple-overlapping-bars.svelte @@ -38,7 +38,7 @@ yDomain={[0, null]} yNice padding={{ top: 5, left: 28, bottom: 24 }} - tooltip={{ + tooltipContext={{ mode: charts.multiBars.mode, debug: false }} diff --git a/docs/src/examples/components/Tooltip/multiple-overlapping-durations.svelte b/docs/src/examples/components/Tooltip/multiple-overlapping-durations.svelte index d2057a005..3748d6652 100644 --- a/docs/src/examples/components/Tooltip/multiple-overlapping-durations.svelte +++ b/docs/src/examples/components/Tooltip/multiple-overlapping-durations.svelte @@ -40,7 +40,7 @@ x={['startDate', 'endDate']} y="name" xNice - tooltip={{ + tooltipContext={{ mode: settings.mode }} padding={defaultChartPadding({ left: 36, bottom: 36, right: 20 })} diff --git a/docs/src/examples/components/Tooltip/multiple-tooltips-with-fixed-single-axis-scaleband.svelte b/docs/src/examples/components/Tooltip/multiple-tooltips-with-fixed-single-axis-scaleband.svelte index 3eacd9eae..58db21ce5 100644 --- a/docs/src/examples/components/Tooltip/multiple-tooltips-with-fixed-single-axis-scaleband.svelte +++ b/docs/src/examples/components/Tooltip/multiple-tooltips-with-fixed-single-axis-scaleband.svelte @@ -24,7 +24,7 @@ yDomain={[0, null]} yNice padding={{ left: 16, bottom: 24, top: 16, right: 16 }} - tooltip={{ mode: 'band' }} + tooltipContext={{ mode: 'band' }} height={300} > {#snippet children({ context })} diff --git a/docs/src/examples/components/Tooltip/multiple-tooltips-with-fixed-single-axis.svelte b/docs/src/examples/components/Tooltip/multiple-tooltips-with-fixed-single-axis.svelte index 8bf39c1f5..bffba6eab 100644 --- a/docs/src/examples/components/Tooltip/multiple-tooltips-with-fixed-single-axis.svelte +++ b/docs/src/examples/components/Tooltip/multiple-tooltips-with-fixed-single-axis.svelte @@ -21,7 +21,7 @@ yDomain={[0, null]} yNice padding={defaultChartPadding({ top: 5, left: 28, bottom: 24, right: 15 })} - tooltip={{ mode: 'quadtree-x' }} + tooltipContext={{ mode: 'quadtree-x' }} height={300} > {#snippet children({ context })} diff --git a/docs/src/examples/components/Tooltip/scatter-plot.svelte b/docs/src/examples/components/Tooltip/scatter-plot.svelte index 8cb4adb9c..2dc2620ea 100644 --- a/docs/src/examples/components/Tooltip/scatter-plot.svelte +++ b/docs/src/examples/components/Tooltip/scatter-plot.svelte @@ -28,7 +28,7 @@ xNice yNice padding={{ left: 30, bottom: 30 }} - tooltip={{ + tooltipContext={{ mode: settings.mode }} height={300} diff --git a/docs/src/examples/components/Tooltip/simple-bars.svelte b/docs/src/examples/components/Tooltip/simple-bars.svelte index 6493f7516..7d7fd2b71 100644 --- a/docs/src/examples/components/Tooltip/simple-bars.svelte +++ b/docs/src/examples/components/Tooltip/simple-bars.svelte @@ -36,7 +36,7 @@ yDomain={[0, null]} yNice padding={{ top: 5, left: 28, bottom: 24 }} - tooltip={{ + tooltipContext={{ mode: settings.mode }} height={300} diff --git a/docs/src/examples/components/Tooltip/single-date-time.svelte b/docs/src/examples/components/Tooltip/single-date-time.svelte index 51d56c00c..fbafbb1d2 100644 --- a/docs/src/examples/components/Tooltip/single-date-time.svelte +++ b/docs/src/examples/components/Tooltip/single-date-time.svelte @@ -31,7 +31,7 @@ xNice yNice padding={defaultChartPadding({ left: 36, bottom: 36, right: 20 })} - tooltip={{ + tooltipContext={{ mode: settings.mode }} height={300} diff --git a/docs/src/examples/components/Tooltip/stacked-area.svelte b/docs/src/examples/components/Tooltip/stacked-area.svelte index d030b76ea..0866fcc20 100644 --- a/docs/src/examples/components/Tooltip/stacked-area.svelte +++ b/docs/src/examples/components/Tooltip/stacked-area.svelte @@ -48,7 +48,7 @@ cDomain={keys} cRange={['var(--color-apples)', 'var(--color-bananas)', 'var(--color-oranges)']} padding={defaultChartPadding({ top: 5, left: 28, bottom: 24, right: 15 })} - tooltip={{ + tooltipContext={{ mode: settings.mode }} height={300} diff --git a/docs/src/examples/components/TransformContext/pan-zoom-axes.svelte b/docs/src/examples/components/TransformContext/pan-zoom-axes.svelte new file mode 100644 index 000000000..6a16144c1 --- /dev/null +++ b/docs/src/examples/components/TransformContext/pan-zoom-axes.svelte @@ -0,0 +1,69 @@ + + + + {#snippet children({ context })} + + + + + {#snippet children({ gradient })} + + {/snippet} + + + + + + {/snippet} + diff --git a/docs/src/examples/components/TransformContext/pan-zoom-html-image.svelte b/docs/src/examples/components/TransformContext/pan-zoom-html-image.svelte index ed23e8ff2..b8475d78f 100644 --- a/docs/src/examples/components/TransformContext/pan-zoom-html-image.svelte +++ b/docs/src/examples/components/TransformContext/pan-zoom-html-image.svelte @@ -8,7 +8,7 @@ transform={{ mode: 'canvas', motion: { type: 'tween', duration: 800, easing: cubicOut }, - initialScrollMode: 'scale' + scrollMode: 'scale' }} clip height={500} @@ -18,7 +18,7 @@
Ghostscript Tiger diff --git a/docs/src/examples/components/TransformContext/pan-zoom-svg-image.svelte b/docs/src/examples/components/TransformContext/pan-zoom-svg-image.svelte index 233718ff8..8bf370eee 100644 --- a/docs/src/examples/components/TransformContext/pan-zoom-svg-image.svelte +++ b/docs/src/examples/components/TransformContext/pan-zoom-svg-image.svelte @@ -8,7 +8,7 @@ transform={{ mode: 'canvas', motion: { type: 'tween', duration: 800, easing: cubicOut }, - initialScrollMode: 'scale' + scrollMode: 'scale' }} clip height={500} diff --git a/docs/src/examples/components/TransformContext/planet-distances.svelte b/docs/src/examples/components/TransformContext/planet-distances.svelte new file mode 100644 index 000000000..1df27ecf4 --- /dev/null +++ b/docs/src/examples/components/TransformContext/planet-distances.svelte @@ -0,0 +1,269 @@ + + +
+ + + +
+ + + +
+
+ + + {#snippet children({ context })} + {@const zoomFactor = Math.sqrt(context.transform.scale)} + {@const minPixelGap = (minDataGap / maxDistance) * context.width * context.transform.scale} + {@const maxR = Math.min(25 * zoomFactor, minPixelGap / 2)} + + {#each planets as planet, i (planet.name)} + {@const cx = context.xScale(planet.distance)} + {@const r = Math.max(2 * zoomFactor, (rScale(planet.radius) / 25) * maxR)} + {@const cy = context.height - 20 - (i / (planets.length - 1)) * (context.height - 50)} + {@const labelY = Math.max(10, cy - r)} + + + + {/each} + + + + + + {#snippet children({ data })} + {data.name} + + + + + {/snippet} + + {/snippet} + diff --git a/docs/src/examples/components/TransformContext/playground.svelte b/docs/src/examples/components/TransformContext/playground.svelte index eca9c3e48..1995960ea 100644 --- a/docs/src/examples/components/TransformContext/playground.svelte +++ b/docs/src/examples/components/TransformContext/playground.svelte @@ -39,7 +39,7 @@ transform={{ mode: 'canvas', motion: config.tweened ? { type: 'tween', duration: 800, easing: cubicOut } : undefined, - initialScrollMode: 'scale' + scrollMode: 'scale' }} clip padding={50} diff --git a/docs/src/examples/components/TransformContext/scroll-activation-key.svelte b/docs/src/examples/components/TransformContext/scroll-activation-key.svelte new file mode 100644 index 000000000..cdcbddbd1 --- /dev/null +++ b/docs/src/examples/components/TransformContext/scroll-activation-key.svelte @@ -0,0 +1,28 @@ + + +

Hold ⌘ Command to zoom with scroll

+ + + + + + + + diff --git a/docs/src/examples/components/Treemap/complex.svelte b/docs/src/examples/components/Treemap/complex.svelte index 6c103796d..a49eeb64b 100644 --- a/docs/src/examples/components/Treemap/complex.svelte +++ b/docs/src/examples/components/Treemap/complex.svelte @@ -99,7 +99,7 @@ stroke={config.colorBy === 'children' ? 'var(--color-primary-content)' : hsl(nodeColor).darker(1).toString()} - stroke-opacity={config.colorBy === 'children' ? 0.2 : 1} + strokeOpacity={config.colorBy === 'children' ? 0.2 : 1} fill={nodeColor} fillOpacity={node.children ? 0.5 : 1} rx={5} diff --git a/docs/src/examples/components/Treemap/nested-filter.svelte b/docs/src/examples/components/Treemap/nested-filter.svelte index 41e327c7b..05d0c8f15 100644 --- a/docs/src/examples/components/Treemap/nested-filter.svelte +++ b/docs/src/examples/components/Treemap/nested-filter.svelte @@ -146,7 +146,7 @@ stroke={config.colorBy === 'children' ? 'var(--color-primary-content)' : hsl(nodeColor).darker(1).toString()} - stroke-opacity={config.colorBy === 'children' ? 0.2 : 1} + strokeOpacity={config.colorBy === 'children' ? 0.2 : 1} fill={nodeColor} fillOpacity={node.children ? 0.5 : 1} rx={5} diff --git a/docs/src/examples/components/Treemap/nested-zoom.svelte b/docs/src/examples/components/Treemap/nested-zoom.svelte index 51e256479..1dee29422 100644 --- a/docs/src/examples/components/Treemap/nested-zoom.svelte +++ b/docs/src/examples/components/Treemap/nested-zoom.svelte @@ -117,7 +117,7 @@ stroke={config.colorBy === 'children' ? 'var(--color-primary-content)' : hsl(nodeColor).darker(1).toString()} - stroke-opacity={config.colorBy === 'children' ? 0.2 : 1} + strokeOpacity={config.colorBy === 'children' ? 0.2 : 1} fill={nodeColor} fillOpacity={node.children ? 0.5 : 1} rx={5} diff --git a/docs/src/examples/components/Treemap/playground.svelte b/docs/src/examples/components/Treemap/playground.svelte index 136d72243..9ca2b5f64 100644 --- a/docs/src/examples/components/Treemap/playground.svelte +++ b/docs/src/examples/components/Treemap/playground.svelte @@ -145,7 +145,7 @@ stroke={config.colorBy === 'children' ? 'var(--color-primary-content)' : hsl(nodeColor).darker(1).toString()} - stroke-opacity={config.colorBy === 'children' ? 0.2 : 1} + strokeOpacity={config.colorBy === 'children' ? 0.2 : 1} fill={nodeColor} fillOpacity={node.children ? 0.5 : 1} rx={5} diff --git a/docs/src/examples/components/Treemap/stacked-zoom.svelte b/docs/src/examples/components/Treemap/stacked-zoom.svelte index 8e8415ae3..12ba28d54 100644 --- a/docs/src/examples/components/Treemap/stacked-zoom.svelte +++ b/docs/src/examples/components/Treemap/stacked-zoom.svelte @@ -105,7 +105,7 @@ stroke={config.colorBy === 'children' ? 'var(--color-primary-content)' : hsl(nodeColor).darker(1).toString()} - stroke-opacity={config.colorBy === 'children' ? 0.2 : 1} + strokeOpacity={config.colorBy === 'children' ? 0.2 : 1} fill={nodeColor} rx={5} /> diff --git a/docs/src/examples/components/Vector/anchor.svelte b/docs/src/examples/components/Vector/anchor.svelte new file mode 100644 index 000000000..18af58c61 --- /dev/null +++ b/docs/src/examples/components/Vector/anchor.svelte @@ -0,0 +1,34 @@ + + +
+ +
+ + + + + + + + + + + + + + + + + + + diff --git a/docs/src/examples/components/Vector/basic.svelte b/docs/src/examples/components/Vector/basic.svelte new file mode 100644 index 000000000..ed9cd5db7 --- /dev/null +++ b/docs/src/examples/components/Vector/basic.svelte @@ -0,0 +1,32 @@ + + + + + {#each outward as v} + + {/each} + {#each inward as v} + + {/each} + + diff --git a/docs/src/examples/components/Vector/data-mode.svelte b/docs/src/examples/components/Vector/data-mode.svelte new file mode 100644 index 000000000..2f77c6a62 --- /dev/null +++ b/docs/src/examples/components/Vector/data-mode.svelte @@ -0,0 +1,57 @@ + + + + {#snippet children({ context })} + { + const x = e.offsetX - context.padding.left; + const y = e.offsetY - context.padding.top; + mouseX = context.xScale.invert?.(x) ?? x; + mouseY = context.yScale.invert?.(y) ?? y; + }} + > + + + { + const dx = mouseX - d.x; + const dy = mouseY - d.y; + const dist = Math.sqrt(dx * dx + dy * dy); + return { + ...d, + direction: Math.atan2(dx, dy) * (180 / Math.PI), + speed: Math.min(dist / 5, 14) + }; + })} + x="x" + y="y" + length="speed" + rotate="direction" + class="stroke-primary" + /> + + {/snippet} + diff --git a/docs/src/examples/components/Vector/election-wind-map.svelte b/docs/src/examples/components/Vector/election-wind-map.svelte new file mode 100644 index 000000000..18c9a70e4 --- /dev/null +++ b/docs/src/examples/components/Vector/election-wind-map.svelte @@ -0,0 +1,123 @@ + + + + {#snippet children({ context })} + + + + (d.party === 'dem' ? -60 : 60)} + shape="arrow-filled" + anchor="start" + data={vectorData} + class={(d) => (d.party === 'dem' ? 'fill-blue-500' : 'fill-red-500')} + /> + + + + {#if context.tooltip.data} + {@const countyFeature = countyFeatureByFips.get(context.tooltip.data.fips)} + {#if countyFeature} + + {/if} + {/if} + + + + {#snippet children({ data })} + {data.county_name}, {data.state_name} + + + + + + {/snippet} + + {/snippet} + diff --git a/docs/src/examples/components/Vector/shapes.svelte b/docs/src/examples/components/Vector/shapes.svelte new file mode 100644 index 000000000..2db693eef --- /dev/null +++ b/docs/src/examples/components/Vector/shapes.svelte @@ -0,0 +1,113 @@ + + +
+
+ + + +
+ + + start + middle + end + + +
+ + + + + arrow + + + + arrow (width) + + + + spike + + + + spike (width) + + + + custom + + {#snippet children({ length: len })} + + + {/snippet} + + + + Polygon arrow + + {#snippet children({ length: len })} + {@const s = len / 2} + + {/snippet} + + + + Polygon star + + {#snippet children({ length: len })} + + {/snippet} + + + diff --git a/docs/src/examples/components/Vector/wind-map.svelte b/docs/src/examples/components/Vector/wind-map.svelte new file mode 100644 index 000000000..a389156ac --- /dev/null +++ b/docs/src/examples/components/Vector/wind-map.svelte @@ -0,0 +1,61 @@ + + + + {#snippet children({ context })} + + + + + colorScale(d.speed)} + strokeWidth={1} + /> + + + + {#snippet children({ data })} + Wind + + + + + {/snippet} + + {/snippet} + diff --git a/docs/src/examples/components/Violin/bandwidth.svelte b/docs/src/examples/components/Violin/bandwidth.svelte new file mode 100644 index 000000000..cf3363c45 --- /dev/null +++ b/docs/src/examples/components/Violin/bandwidth.svelte @@ -0,0 +1,69 @@ + + +
+ +
+ + + + + + {#each data as item} + + {/each} + + diff --git a/docs/src/examples/components/Violin/basic.svelte b/docs/src/examples/components/Violin/basic.svelte new file mode 100644 index 000000000..4ee027e7a --- /dev/null +++ b/docs/src/examples/components/Violin/basic.svelte @@ -0,0 +1,55 @@ + + + + + + + {#each data as item} + + {/each} + + diff --git a/docs/src/examples/components/Violin/horizontal.svelte b/docs/src/examples/components/Violin/horizontal.svelte new file mode 100644 index 000000000..974790ca6 --- /dev/null +++ b/docs/src/examples/components/Violin/horizontal.svelte @@ -0,0 +1,62 @@ + + + + + + + {#each data as item} + + {/each} + + diff --git a/docs/src/examples/components/Violin/with-box-median.svelte b/docs/src/examples/components/Violin/with-box-median.svelte new file mode 100644 index 000000000..f4e99dbb6 --- /dev/null +++ b/docs/src/examples/components/Violin/with-box-median.svelte @@ -0,0 +1,63 @@ + + + + + + + {#each data as item} + + {/each} + + diff --git a/docs/src/examples/utils/stats/compute-box-stats.svelte b/docs/src/examples/utils/stats/compute-box-stats.svelte new file mode 100644 index 000000000..5b0999869 --- /dev/null +++ b/docs/src/examples/utils/stats/compute-box-stats.svelte @@ -0,0 +1,13 @@ + + + + + diff --git a/docs/src/examples/utils/stats/kde.svelte b/docs/src/examples/utils/stats/kde.svelte new file mode 100644 index 000000000..d5a492890 --- /dev/null +++ b/docs/src/examples/utils/stats/kde.svelte @@ -0,0 +1,19 @@ + + + + +
Returns [value, density] pairs:
+ + diff --git a/docs/src/lib/assets/favicon.svg b/docs/src/lib/assets/favicon.svg new file mode 100644 index 000000000..cc5dc66a3 --- /dev/null +++ b/docs/src/lib/assets/favicon.svg @@ -0,0 +1 @@ +svelte-logo \ No newline at end of file diff --git a/docs/src/lib/components/Code.svelte b/docs/src/lib/components/Code.svelte index 6616ba220..19e647952 100644 --- a/docs/src/lib/components/Code.svelte +++ b/docs/src/lib/components/Code.svelte @@ -1,15 +1,20 @@
@@ -154,7 +208,11 @@ style:width={containerWidth ? `${containerWidth}px` : undefined} style:view-transition-name={viewTransitionName} > - + {#if isVisible} + + {:else} +
+ {/if} {#if canResize}
{/if} + + + +
{/if} {:else} @@ -260,3 +337,14 @@
{/if}
+ +{#if svgUnavailable} +
+ (svgUnavailable = false)} + /> +
+{/if} diff --git a/docs/src/lib/components/ExampleScreenshot.svelte b/docs/src/lib/components/ExampleScreenshot.svelte index 7363c7d8e..3c8b90a93 100644 --- a/docs/src/lib/components/ExampleScreenshot.svelte +++ b/docs/src/lib/components/ExampleScreenshot.svelte @@ -25,13 +25,13 @@ const basePath = $derived(`/screenshots/${component}/${example}`); const sizes = [ - { width: '240w', light: '@sm:hidden dark:hidden', dark: 'dark:block dark:@sm:hidden' }, + { width: '240w', light: 'dark:hidden @sm:hidden', dark: 'hidden dark:block dark:@sm:hidden' }, { width: '400w', - light: '@sm:block @lg:hidden dark:hidden', - dark: 'dark:@sm:block dark:@lg:hidden' + light: 'hidden @sm:block @lg:hidden dark:hidden', + dark: 'hidden dark:@sm:block dark:@lg:hidden' }, - { width: '800w', light: '@lg:block dark:hidden', dark: 'dark:@lg:block' } + { width: '800w', light: 'hidden @lg:block dark:hidden', dark: 'hidden dark:@lg:block' } ]; @@ -59,7 +59,7 @@ alt="{component} - {example}" class={cls( 'w-full h-full object-scale-down object-center p-2', - mode === 'light' ? size.light : 'hidden ' + size.dark + mode === 'light' ? size.light : size.dark )} loading="lazy" onerror={() => (hasError = true)} diff --git a/docs/src/lib/components/controls/BarChartControls.svelte b/docs/src/lib/components/controls/BarChartControls.svelte deleted file mode 100644 index 4bcdb0840..000000000 --- a/docs/src/lib/components/controls/BarChartControls.svelte +++ /dev/null @@ -1,39 +0,0 @@ - - -
- {#if dateRange !== undefined} - - {/if} - {#if thresholds !== undefined} - - {/if} - {#if interval !== undefined} - - {/if} -
diff --git a/docs/src/lib/components/controls/BarChartControls2.svelte b/docs/src/lib/components/controls/BarChartControls2.svelte deleted file mode 100644 index 2c8c96c1b..000000000 --- a/docs/src/lib/components/controls/BarChartControls2.svelte +++ /dev/null @@ -1,80 +0,0 @@ - - -
- { - switch (e.detail.value) { - case 'normal': - random = randomNormal(); - break; - case 'uniform': - random = randomUniform(); - break; - case 'integer': - random = randomInt(1, 10); - break; - case 'logNormal': - random = randomLogNormal(); - break; - case 'exponential': - random = randomExponential(10); - break; - case 'bates': - random = randomBates(10); - break; - } - }} - /> - - -
diff --git a/docs/src/lib/components/controls/GeoPathGlobeControls.svelte b/docs/src/lib/components/controls/GeoPathGlobeControls.svelte index 156377db2..18033b641 100644 --- a/docs/src/lib/components/controls/GeoPathGlobeControls.svelte +++ b/docs/src/lib/components/controls/GeoPathGlobeControls.svelte @@ -13,12 +13,7 @@ let { isPlaying, selectedFeature, play, stop }: Props = $props(); -
- {#if isPlaying && selectedFeature} - - {selectedFeature?.properties.name ?? ''} - - {/if} +
diff --git a/docs/src/lib/components/controls/GeoPathProjectionControls.svelte b/docs/src/lib/components/controls/GeoPathProjectionControls.svelte index 735611075..e95ad7e74 100644 --- a/docs/src/lib/components/controls/GeoPathProjectionControls.svelte +++ b/docs/src/lib/components/controls/GeoPathProjectionControls.svelte @@ -9,7 +9,7 @@ let { projections, projection = $bindable() }: Props = $props(); -
+
+ import { NumberStepper, MenuField, RangeField } from 'svelte-ux'; + import { timeDay, timeWeek, timeMonth } from 'd3-time'; + import { + randomNormal, + randomUniform, + randomInt, + randomLogNormal, + randomExponential, + randomBates + } from 'd3-random'; + import { cls } from '@layerstack/tailwind'; + + interface Props { + dateRange?: number; + thresholds?: number; + interval?: typeof timeDay.range; + random?: () => number; + selectedGenerator?: string; + randomCount?: number; + } + + let { + dateRange = $bindable(), + thresholds = $bindable(), + interval = $bindable(), + random = $bindable(), + selectedGenerator = $bindable(), + randomCount = $bindable() + }: Props = $props(); + + +{#if dateRange !== undefined || thresholds !== undefined || interval !== undefined} +
+ {#if dateRange !== undefined} + + {/if} + {#if thresholds !== undefined} + + {/if} + {#if interval !== undefined} + + {/if} +
+{/if} + +{#if selectedGenerator !== undefined || randomCount !== undefined} +
+ {#if selectedGenerator !== undefined} + { + switch (e.detail.value) { + case 'normal': + random = randomNormal(); + break; + case 'uniform': + random = randomUniform(); + break; + case 'integer': + random = randomInt(1, 10); + break; + case 'logNormal': + random = randomLogNormal(); + break; + case 'exponential': + random = randomExponential(10); + break; + case 'bates': + random = randomBates(10); + break; + } + }} + /> + {/if} + + {#if randomCount !== undefined} + + {/if} +
+{/if} diff --git a/docs/src/lib/components/controls/TransformContextControls.svelte b/docs/src/lib/components/controls/TransformContextControls.svelte index 3479af4cc..25d8e2b52 100644 --- a/docs/src/lib/components/controls/TransformContextControls.svelte +++ b/docs/src/lib/components/controls/TransformContextControls.svelte @@ -158,7 +158,7 @@ menuIcon={null} {size} value={chart.transform.scrollMode} - on:change={(e) => chart.transform.setScrollMode(e.detail.value)} + on:change={(e) => (chart.transform.scrollMode = e.detail.value)} class="text-surface-content" > diff --git a/docs/src/lib/data.remote.ts b/docs/src/lib/data.remote.ts index 0fa89bcd0..67cbfae04 100644 --- a/docs/src/lib/data.remote.ts +++ b/docs/src/lib/data.remote.ts @@ -32,6 +32,35 @@ export const getAppleStock = prerender(async () => { return data; }); +export const getAppleStockRange = query( + z.object({ + start: z.string().optional(), + end: z.string().optional(), + maxPoints: z.number().optional().default(300) + }), + async ({ start, end, maxPoints }) => { + const { fetch } = getRequestEvent(); + let data = await fetch('/data/examples/date/apple-stock.json').then(async (r) => + parse(await r.text()) + ); + + if (start || end) { + const startDate = start ? new Date(start) : undefined; + const endDate = end ? new Date(end) : undefined; + data = data.filter( + (d) => (!startDate || d.date >= startDate) && (!endDate || d.date <= endDate) + ); + } + + if (data.length > maxPoints) { + const step = (data.length - 1) / (maxPoints - 1); + data = Array.from({ length: maxPoints }, (_, i) => data![Math.round(i * step)]); + } + + return data; + } +); + export const getDailyTemperature = prerender(async () => { const { fetch } = getRequestEvent(); const data = await fetch('/data/examples/date/daily-temperature.json').then(async (r) => @@ -183,6 +212,23 @@ export const getHydro = prerender(async () => { return data; }); +export type CountryGdpLifeExpectancy = { + title: string; + id: string; + continent: string; + x: number; + y: number; + value: number; +}; + +export const getCountryGdpLifeExpectancy = prerender(async () => { + const { fetch } = getRequestEvent(); + const data = (await fetch('/data/examples/country-gdp-life-expectancy.json').then((r) => + r.json() + )) as CountryGdpLifeExpectancy[]; + return data; +}); + export const getForceGroupDots = prerender(async () => { const { fetch } = getRequestEvent(); const data = (await fetch('/data/examples/force-group-dots.json').then((r) => r.json())) as { @@ -240,6 +286,27 @@ export const getSeriesArrays = prerender(async () => { return data; }); +export type VolcanoData = { + width: number; + height: number; + values: number[]; +}; + +export const getVolcano = prerender(async () => { + const { fetch } = getRequestEvent(); + const data = (await fetch('/data/examples/volcano.json').then((r) => r.json())) as VolcanoData; + return data; +}); + +export type FaithfulData = { eruptions: number; waiting: number }; + +export const getFaithful = prerender(async () => { + const { fetch } = getRequestEvent(); + const data = (await fetch('/data/examples/faithful.json').then((r) => r.json())) as FaithfulData[]; + return data; +}); + + export const getShapeData = query(z.string().nullable(), async (file) => { if (!file) return null; const { fetch } = getRequestEvent(); diff --git a/docs/src/lib/geo.remote.ts b/docs/src/lib/geo.remote.ts index 719631d01..00d77cb7c 100644 --- a/docs/src/lib/geo.remote.ts +++ b/docs/src/lib/geo.remote.ts @@ -156,6 +156,22 @@ export const getUsAirports = prerender(async () => { return data; }); +export const getWalmarts = prerender(async () => { + const { fetch } = getRequestEvent(); + const raw = (await fetch('/data/examples/geo/walmarts.csv').then(async (r) => + csvParse(await r.text(), autoType) + )) as { long: number; lat: number; opendate: Date; city: string; state: string; type: string }[]; + const data = raw.map((d) => ({ + longitude: d.long, + latitude: d.lat, + date: d.opendate, + city: d.city, + state: d.state, + type: d.type + })); + return data; +}); + export const getUsCountyPopulation = prerender(async () => { const { fetch } = getRequestEvent(); const data = (await fetch('/data/examples/geo/us-county-population-2020.json').then((r) => @@ -170,6 +186,38 @@ export const getUsCountyPopulation = prerender(async () => { return data; }); +export const getUsPresidentialElection2020 = prerender(async () => { + const { fetch } = getRequestEvent(); + const data = (await fetch('/data/examples/geo/us-presidential-election-2020.csv').then( + async (r) => csvParse(await r.text(), autoType) + )) as Array<{ + state_name: string; + county_fips: number; + county_name: string; + votes_gop: number; + votes_dem: number; + total_votes: number; + diff: number; + per_gop: number; + per_dem: number; + per_point_diff: number; + }>; + return data; +}); + +export const getWind = prerender(async () => { + const { fetch } = getRequestEvent(); + const data = (await fetch('/data/examples/geo/wind.csv').then(async (r) => + csvParse(await r.text(), autoType) + )) as Array<{ + longitude: number; + latitude: number; + u: number; + v: number; + }>; + return data; +}); + export const getWorldCapitals = prerender(async () => { const { fetch } = getRequestEvent(); const data = (await fetch('/data/examples/geo/world-capitals.json').then(async (r) => @@ -186,6 +234,31 @@ export const getWorldAirports = prerender(async () => { return data; }); +export const getD1FootballTeams = prerender(async () => { + const { fetch } = getRequestEvent(); + const data = (await fetch('/data/examples/geo/d1-football-teams.csv').then(async (r) => + csvParse(await r.text(), autoType) + )) as { + team: string; + college: string; + conference: string; + city: string; + state: string; + latitude: number; + longitude: number; + espn_id: number; + }[]; + return data; +}); + +export const getBeagleVoyage = prerender(async () => { + const { fetch } = getRequestEvent(); + const data = (await fetch('/data/examples/geo/beagle-voyage.csv').then(async (r) => + csvParse(await r.text(), autoType) + )) as { longitude: number; latitude: number }[]; + return data; +}); + export const getWorldLinks = prerender(async () => { const { fetch } = getRequestEvent(); const data = (await fetch('/data/examples/geo/world-links.json').then((r) => diff --git a/docs/src/lib/llms/utils.ts b/docs/src/lib/llms/utils.ts index 2010da1f6..f5d92fc37 100644 --- a/docs/src/lib/llms/utils.ts +++ b/docs/src/lib/llms/utils.ts @@ -14,7 +14,7 @@ const apiFiles = import.meta.glob('/src/generated/api/*.json', { import: 'default' }); -const guideSources = import.meta.glob('/src/content/guides/*.md', { +const guideSources = import.meta.glob('/src/content/guides/**/*.md', { eager: true, query: '?raw', import: 'default' diff --git a/docs/src/lib/markdown/toc.ts b/docs/src/lib/markdown/toc.ts index 06b59043c..79a608540 100644 --- a/docs/src/lib/markdown/toc.ts +++ b/docs/src/lib/markdown/toc.ts @@ -15,7 +15,11 @@ export function extractTocFromMarkdown(content: string) { while ((match = headingRegex.exec(stripped)) !== null) { const level = match[1].length; // Strip inline MDC directives (e.g. `:icon{name="lucide:user" class="..."}`) - const text = match[2].replace(/:[a-zA-Z][\w-]*\{[^}]*\}/g, '').trim(); + // and markdown links (e.g. `[text](url)` → `text`) + const text = match[2] + .replace(/:[a-zA-Z][\w-]*\{[^}]*\}/g, '') + .replace(/\[([^\]]+)\]\([^)]+\)/g, '$1') + .trim(); if (!text) continue; // Use github-slugger then strip leading/trailing dashes (matching rehypeCleanSlugIds) const id = githubSlug(text); diff --git a/docs/src/routes/+layout.svelte b/docs/src/routes/+layout.svelte index edbec76be..827bd4e0c 100644 --- a/docs/src/routes/+layout.svelte +++ b/docs/src/routes/+layout.svelte @@ -5,6 +5,7 @@ import { watch } from 'runed'; import { dev } from '$app/environment'; + import { afterNavigate } from '$app/navigation'; import { page } from '$app/state'; import { preparePageTransition } from '$lib/page-transitions'; import '@fontsource-variable/inter'; @@ -55,6 +56,20 @@ // View transition for navigation preparePageTransition(); + // Scroll to hash target after client-side navigation (View Transitions can prevent native hash scrolling) + afterNavigate(() => { + const hash = window.location.hash; + if (hash) { + const el = document.querySelector(hash); + if (el) { + // Use requestAnimationFrame to ensure the view transition has finished rendering + requestAnimationFrame(() => { + el.scrollIntoView(); + }); + } + } + }); + const defaultDescription = 'Composable Svelte chart components to build a large variety of visualizations'; diff --git a/docs/src/routes/+page.svelte b/docs/src/routes/+page.svelte index 46330e486..772cd451b 100644 --- a/docs/src/routes/+page.svelte +++ b/docs/src/routes/+page.svelte @@ -30,6 +30,7 @@ { component: 'AreaChart', example: 'funnel' }, { component: 'AreaChart', example: 'range-annotation' }, { component: 'AreaChart', example: 'radial' }, + { component: 'Area', example: 'ridgeline-kde' }, { component: 'AreaChart', example: 'series-stack-gradient' }, { component: 'AreaChart', example: 'sparkline' }, { component: 'AreaChart', example: 'threshold' }, @@ -60,6 +61,9 @@ { component: 'LineChart', example: 'gradient-encoding' }, { component: 'LineChart', example: 'large-radial-series' }, { component: 'LineChart', example: 'large-series' }, + { component: 'Density', example: 'weighted' }, + { component: 'Contour', example: 'volcano-filled-interactive' }, + { component: 'Vector', example: 'wind-map' }, { component: 'LineChart', example: 'radar' }, { component: 'LineChart', example: 'radar-series' }, { component: 'PieChart', example: 'arc' }, @@ -77,12 +81,15 @@ { component: 'Connector', example: 'playground' }, { component: 'Marker', example: 'styling' }, { component: 'Polygon', example: 'hexagon' }, + { component: 'Image', example: 'us-presidents' }, // Marks { component: 'Calendar', example: 'rounded-cells' }, - { component: 'Hull', example: 'geo' }, + // Statistics + { component: 'BoxPlot', example: 'with-tooltip' }, // Interations { component: 'TransformContext', example: 'pan-zoom-svg-image' }, - { component: 'BrushContext', example: 'sync-brushes-with-bind-xdomain' }, + { component: 'TransformContext', example: 'planet-distances' }, + { component: 'BrushContext', example: 'synced-brushes' }, { component: 'Voronoi', example: 'radius' }, // Fill { component: 'LinearGradient', example: 'tailwind-colors' }, @@ -95,6 +102,10 @@ { component: 'GeoPath', example: 'bubble-map' }, { component: 'GeoPath', example: 'choropleth' }, { component: 'GeoPath', example: 'spike-map' }, + { component: 'Density', example: 'walmart' }, + { component: 'Vector', example: 'election-wind-map' }, + { component: 'Image', example: 'college-football-map' }, + { component: 'Hull', example: 'geo' }, { component: 'GeoPath', example: 'eclipses-globe' }, { component: 'GeoPath', example: 'submarine-cables-globe' }, { component: 'GeoPath', example: 'timezones' }, @@ -110,6 +121,7 @@ { component: 'GeoTile', example: 'zoomable-seamless-layers' }, { component: 'Graticule', example: 'basic' }, // Layout + { component: 'Chord', example: 'gradient' }, { component: 'Dagre', example: 'playground' }, { component: 'Dagre', example: 'tcp-state-diagram' }, { component: 'ForceSimulation', example: 'beeswarm' }, @@ -134,7 +146,6 @@ ]; -