Isometric view

.changeset/centred-zoom-controls.md

@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+fix(TransformContext): Zoom in / out about the middle of the plot area, and center a `canvas` zoom without resetting its scale

.changeset/colored-contour-lines.md

@@ -0,0 +1,5 @@
+---
+'layerchart': minor
+---
+
+feat(Contour): Stroke unfilled contours in the bands' colors when no `stroke` is given

.changeset/floating-points-walls.md

@@ -0,0 +1,5 @@
+---
+'layerchart': minor
+---
+
+feat(Frame|Grid|Axis|Highlight): Draw an `isometric` chart's back walls, their gridlines (`<Grid z>`), a height axis (`<Axis placement="back">`), and highlights at a point's height

.changeset/geo-path-motion.md

@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+fix(GeoPath): Start a tweened map shape as itself rather than rising from a baseline

.changeset/isometric-heights.md

@@ -0,0 +1,5 @@
+---
+'layerchart': minor
+---
+
+feat: Support `z` heights on an `isometric` chart — boxes (`Rect`, `Cell`, `Calendar`, `Bars` with `valueAxis="z"`), floating `Circle`, `Text`, `Labels` and `ArcLabel`, `Line` stems, and extruded `Polygon`, `Path`, `GeoPath`, `Contour`, `Pie`, `Area` and `Spline`

.changeset/split-paths-by-g.md

@@ -0,0 +1,5 @@
+---
+'layerchart': minor
+---
+
+breaking(Chart|Spline|Area): Rename the `z` grouping channel to `g` (ex. `<Spline g="id">`), freeing `z` for a third position

.changeset/steady-radial-ticks.md

@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+fix(Axis): Size an `angle` axis' ticks by its circle rather than the chart's width, so a continuous angle scale's tick count no longer changes with width (square charts get more ticks)

.changeset/straight-links.md

@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+fix(Link): Draw links whose ends share an `x` or `y`

.changeset/switchable-transform-mode.md

@@ -0,0 +1,5 @@
+---
+'layerchart': minor
+---
+
+feat(TransformContext): Switch `mode` without remounting the chart

.changeset/tilted-floors-turn.md

@@ -0,0 +1,5 @@
+---
+'layerchart': minor
+---
+
+feat(Chart): Support `view={isometric}` to draw the plot area as a floor seen at an angle, turned with `isometric({ rotate, tilt })` or by dragging (`transform={{ drag: 'rotate' }}`), with `viewport` text facing the viewer

.changeset/transformed-brush.md

@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+fix(BrushContext): Draw and measure the brush through a `canvas` pan / zoom

.changeset/turned-ellipses.md

@@ -0,0 +1,5 @@
+---
+'layerchart': minor
+---
+
+feat(Ellipse): Support `rotate` to turn the ellipse about its center

.changeset/zoomed-tooltips-find.md

@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+fix(TooltipContext): Account for `transform.mode: 'canvas'` pan / zoom in bisect modes and `'data'` tooltip placement

docs/src/content/components/Area.md

@@ -13,9 +13,9 @@ See also: [AreaChart](/docs/components/AreaChart) for simplified examples
 
 :example{ name="basic" showCode }
 
-### Multiple areas (`z`)
+### Multiple areas (`g`)
 
-Set `z` to draw a separate area per distinct value, all from one mark — the same channel [`Spline`](/docs/components/Spline#multiple-lines-z) uses. A `fill` (or `stroke`) that names a data property implies it, so this draws one area per fruit, colored through the chart's [`c` scale](/docs/guides/scales):
+Set `g` to draw a separate area per distinct value, all from one mark — the same channel [`Spline`](/docs/components/Spline#multiple-lines-g) uses. A `fill` (or `stroke`) that names a data property implies it, so this draws one area per fruit, colored through the chart's [`c` scale](/docs/guides/scales):
 
 ```svelte
 <Chart {data} x="date" y="value" c="fruit" {cRange}>
@@ -34,3 +34,9 @@ This replaces grouping the data yourself and rendering an `Area` per group — e
 ### Playground
 
 :example{ name="playground" }
+
+## Isometric ridgeline
+
+On an [isometric](/docs/guides/isometric) chart, `z` gives each point a height, and an `Area` stands up as a curtain from the floor to those heights. One curtain per row of a band `y`, drawn back to front, makes a 3D ridgeline.
+
+:example{ name="oscilloscope-ridgeline-isometric" }

docs/src/content/components/Bars.md

@@ -18,3 +18,9 @@ See also: [BarChart](/docs/components/BarChart) for simplified examples
 Use `width` or `height` to override the scale-derived size with a fixed pixel value. The bar is centered within its band.
 
 :example{ name="vertical-fixed-width" showCode }
+
+## Isometric
+
+On an [isometric](/docs/guides/isometric) chart with `valueAxis="z"`, bars stand up off the floor as 3D columns, stacked by the chart.
+
+:example{ component="Chart" name="isometric-stacked-columns" }

docs/src/content/components/Calendar.md

@@ -8,3 +8,9 @@ related: [Month]
 ## Usage
 
 :example{ name="basic" showCode }
+
+## Isometric
+
+On an [isometric](/docs/guides/isometric) chart, `z` stands each day up to its value.
+
+:example{ name="isometric" }

docs/src/content/components/Chart.md

@@ -34,6 +34,32 @@ The same chart from long data needs no `series` at all — `c` names the layers,
 
 :example{ name="mixed-marks-with-stack-long-data" }
 
+## Isometric
+
+`view={isometric}` draws the plot area as a floor seen from above at an angle, for a faux 3D look in any layer. See the [Isometric guide](/docs/guides/isometric) for the view options, height, text, and tooltips.
+
+```svelte
+<Chart view={isometric}>
+```
+
+:example{ name="isometric-heatmap" }
+
+:example{ name="isometric-columns" }
+
+:example{ name="isometric-stacked-columns" }
+
+:example{ name="isometric-areas" }
+
+:example{ name="isometric-scatter-3d" }
+
+:example{ name="isometric-treemap" }
+
+:example{ name="isometric-scatter" }
+
+:example{ name="isometric-playground" }
+
+:example{ name="isometric-pan-zoom" }
+
 ## Text selection
 
 Charts are treated as interactive widgets: `user-select: none` is applied to the root container (`.lc-root-container`) so dragging to brush, pan, or zoom never selects axis labels or surrounding page text. Since `user-select` inherits, this covers the whole chart.

docs/src/content/components/Contour.md

@@ -23,6 +23,20 @@ Filled contour bands of the same Maungawhau elevation data, colored by threshold
 
 :example{ name="volcano-filled" showCode }
 
+## Isometric terrain
+
+On an [isometric](/docs/guides/isometric) chart, `z` raises each band. With `z="value"`, each band stands at its threshold, measured by `zScale`. Filled bands stack into terraces, and unfilled ones float as lines in the bands' colors. Drag to turn it.
+
+```svelte
+<Chart zDomain={extent(volcano.values)} zRange={[0, 100]} view={isometric}>
+	<Layer>
+		<Contour data={volcano.values} width={volcano.width} height={volcano.height} z="value" />
+	</Layer>
+</Chart>
+```
+
+:example{ name="volcano-isometric" }
+
 ## Interactive controls
 
 Adjust the number of **thresholds** and **blur** radius interactively.

docs/src/content/components/GeoPath.md

@@ -12,3 +12,9 @@ See the [Geo guide](/docs/guides/geo) for a full walkthrough of projections, fit
 ## Usage
 
 :example{ name="tooltip" showCode }
+
+## Isometric
+
+On an [isometric](/docs/guides/isometric) chart, `z` stands each shape up off the floor. Here each state stands at its share of the 2020 presidential vote. Drag to turn it.
+
+:example{ name="election-isometric" }

docs/src/content/components/Line.md

@@ -30,3 +30,11 @@ Use `stroke` with a data property name to color each line through the chart's co
 Use a threshold scale to color lines based on value ranges.
 
 :example{ name="color-via-threshold-scale" showCode }
+
+## Isometric
+
+On an [isometric](/docs/guides/isometric) chart, `z1` / `z2` raise each end of a line. A line from the floor up to a point is a stem:
+
+```svelte
+<Line x1="x" y1="y" x2="x" y2="y" z2="z" />
+```

docs/src/content/components/Pie.md

@@ -13,106 +13,8 @@ See also: [PieChart](/docs/components/PieChart) for simplified examples
 
 :example{ name="basic" showCode }
 
-<!-- ## Examples
+## Isometric
 
-### Basic
+On an [isometric](/docs/guides/isometric) chart, `z` stands every slice up, for a 3D pie or donut. Give an `ArcLabel` the same `z` and its callouts keep clear of the slices' sides. Drag to turn it.
 
-:example{ name="basic" }
-
-### Disable sorting
-
-:example{ name="disable-sorting" }
-
-### Partial range (Chart xRange)
-
-:example{ name="partial-range-chart-xrange" }
-
-### Partial range (range prop)
-
-:example{ name="partial-range-range-prop" }
-
-### Pad angle
-
-:example{ name="pad-angle" }
-
-### Pad angle (with inner radius)
-
-:example{ name="pad-angle-with-inner-radius" }
-
-### Inner radius
-
-#### If value >= 1, value will be treated as discrete
-
-:example{ name="inner-radius-positive" }
-
-#### If value >= 0 and less than 1, value will be treated as a percentage of outerRadius
-
-:example{ name="inner-radius-zero-one" }
-
-#### If value less than 0, value will be treated as a offset of outerRadius
-
-:example{ name="inner-radius-negative" }
-
-### Outer radius
-
-:example{ name="outer-radius" }
-
-### Multiple (data prop)
-
-:example{ name="multiple-data-prop" }
-
-### Tweened
-
-:example{ name="tweened" }
-
-### Offset
-
-:example{ name="offset" }
-
-### default slot / render each Arc
-
-:example{ name="default-slot-render-each-arc" }
-
-### Labels
-
-#### Centroid
-
-:example{ name="labels-centroid" }
-
-#### Centroid (multiple)
-
-:example{ name="labels-centroid-multiple" }
-
-### Outer
-
-:example{ name="labels-outer" }
-
-### Outer (with padding)
-
-:example{ name="labels-outer-with-padding" }
-
-### Outer Radial
-
-:example{ name="labels-outer-radial" }
-
-### Tooltip
-
-:example{ name="tooltip" }
-
-### Tooltip with Arcs (slot)
-
-:example{ name="tooltip-with-arcs-slot" }
-
-### Placement
-
-#### Left
-
-:example{ name="placement-left" }
-
-#### Center
-
-:example{ name="placement-center" }
-
-#### Right
-
-:example{ name="placement-right" } -->
+:example{ name="isometric" }

docs/src/content/components/Polygon.md

@@ -30,3 +30,7 @@ Use `fill` or `stroke` with a data property name to color each item through the
 Use a threshold scale to color items based on value ranges.
 
 :example{ name="color-via-threshold-scale" showCode }
+
+## Isometric
+
+On an [isometric](/docs/guides/isometric) chart, `z` stands a polygon up into a prism. See the [isometric tree](/docs/components/Tree#isometric).

docs/src/content/components/Spline.md

@@ -13,44 +13,36 @@ See also: [LineChart](/docs/components/LineChart) for simplified examples
 
 :example{ name="basic" showCode }
 
-### Multiple lines (`z`)
+### Multiple lines (`g`)
 
-Set `z` to draw a separate line per distinct value, all from one mark — one line per series, without a mark each.
+Set `g` to draw a separate line per distinct value, all from one mark — one line per series, without a mark each.
 
 ```svelte
 <Chart {data} x="date" y="value" c="fruit" {cRange}>
 	<Spline stroke="fruit" />
 </Chart>
 ```
 
-Most of the time you don't set it at all: a `stroke` (or `fill`) that names a data property implies it, so the line above draws one line per fruit. `z` resolves in order — this mark's `z`, the Chart's `z`, then whatever `stroke` / `fill` names.
+Most of the time you don't set it at all: a `stroke` (or `fill`) that names a data property implies it, so the line above draws one line per fruit. `g` resolves in order — this mark's `g`, the Chart's `g`, then whatever `stroke` / `fill` names.
 
 This replaces grouping the data yourself and rendering a `Spline` per group. Prefer it: every mark registers with the chart and rebuilds its domains, so a mark per line costs O(lines × rows) at mount — with a few hundred lines that's the difference between ~1.9s and under 100ms.
 
-`z` keeps its scale, so the same field can group the lines _and_ encode them:
-
-```svelte
-<Chart {data} x="date" y="value" z="year" zDomain={[1940, 2024]} zRange={[0.1, 0.2]}>
-	<Spline opacity={(d) => context.zScale(d.year)} />
-</Chart>
-```
-
-Set it explicitly when the grouping isn't the color — [parallel coordinates](#parallel-coordinates) groups by row (`z="index"`) while coloring by species.
+Set it explicitly when the grouping isn't the color — [parallel coordinates](#parallel-coordinates) groups by row (`g="id"`) while coloring by species.
 
 ### Colors
 
-`stroke` and `fill` accept a CSS color, or the name of a data property — which resolves through the chart's [`c` scale](/docs/guides/scales), like every other mark. With `z`, the color resolves per line.
+`stroke` and `fill` accept a CSS color, or the name of a data property — which resolves through the chart's [`c` scale](/docs/guides/scales), like every other mark. With `g`, the color resolves per line.
 
 ```svelte
 <Spline stroke="fruit" />
 ```
 
 ### Per-segment styling
 
-Pass a function to `stroke`, `fill`, `opacity`, or `class` to style each segment independently. Consecutive data points with the same resolved value are grouped into separate path segments. This composes with `z` — each line is split into its own segments, so a function is the way to style a grouped `Spline` per line:
+Pass a function to `stroke`, `fill`, `opacity`, or `class` to style each segment independently. Consecutive data points with the same resolved value are grouped into separate path segments. This composes with `g` — each line is split into its own segments, so a function is the way to style a grouped `Spline` per line:
 
 ```svelte
-<Spline z="year" class={(d) => (d.year === 2024 ? 'stroke-primary' : 'stroke-surface-content')} />
+<Spline g="year" class={(d) => (d.year === 2024 ? 'stroke-primary' : 'stroke-surface-content')} />
 ```
 
 :example{ name="stroke-grouping" }
@@ -86,7 +78,7 @@ When inside a `GeoProjection` context, Spline automatically renders as a project
 
 ### Parallel coordinates
 
-One line per row across an axis per dimension, from a single `Spline` grouped by `z`. Each dimension keeps its own domain — `Axis` takes a `scale` override, so the ticks read in real units — while positions are normalized to a shared `0–1` domain so every dimension can share the chart's `y` scale. `Group` places each axis at its point on the categorical `x` scale.
+One line per row across an axis per dimension, from a single `Spline` grouped by `g`. Each dimension keeps its own domain — `Axis` takes a `scale` override, so the ticks read in real units — while positions are normalized to a shared `0–1` domain so every dimension can share the chart's `y` scale. `Group` places each axis at its point on the categorical `x` scale.
 
 :example{ name="parallel-coordinates" }
 

docs/src/content/components/Tree.md

@@ -12,3 +12,9 @@ related: []
 ### Playground
 
 :example{ name="playground" }
+
+## Isometric
+
+On an [isometric](/docs/guides/isometric) chart, nodes can stand up as prisms (`Polygon`s with a `z`) over links lying on the floor.
+
+:example{ name="isometric" }