3D Charts (Visual WebGL)

vizb supports three 3D modes for bar, line, and scatter charts. Both render in a WebGL scene you can rotate, zoom, and pan in the browser. Other chart types (pie, radar, heatmap) receive z-axis data differently — they don’t render a 3D scene.

Scatter also supports continuous 3D from auto-value (all-numeric columns, no flags). Bar and line do the same when the data has 3+ numeric columns. See the Scatter Chart page for auto-value mode.

Three 3D Modes

Mode	How to enable	X (width)	Y (depth)	Z (height)
Grouped	Add z to --group-pattern / --group-regex	categories	categories	metric value (stacked per z group)
Value (pseudo-3D)	vizb bar / vizb line / vizb scatter with --3d on x+y-only data	categories	categories (former 2D legend)	metric value (single series, visualMap)
Value (continuous 3D)	All-numeric CSV/JSON with 3+ columns (auto-value)	numeric	numeric	numeric

Grouped 3D takes precedence: if your data already has a z dimension, --3d is ignored.

Grouped 3D (z in the pattern)

A chart renders in grouped 3D when a data point has all three plotting axes present:

• XAxis — categories along the width
• YAxis — categories along the depth’s base
• ZAxis — the depth/height dimension stacked on top

The Name dimension stays optional — it still groups points into separate charts. Without a z-axis, charts render as the usual 2D bar/line/pie.

Note

The z-axis (z) is only valid alongside both x and y. A 3D chart needs an x/y floor to stand on.

Generating 3D Data

Add a z segment to your grouping pattern or a (?<z>…) capture to your regex.

Pattern — CSV (x,y,z) or benchmarks (x/y/z):

# CSV/JSON — comma-separated columns and pattern
vizb bar data.csv -g category,metric,group -p x,y,z -o output.html

# Benchmarks — slash-separated names
go test -bench . | vizb -p x/y/z -o output.html

Source	Label example	XAxis	YAxis	ZAxis
CSV row	alpha,beta,gamma	alpha	beta	gamma
Benchmark	BenchmarkSort/1024/QuickSort/warm	1024	QuickSort	warm

Pass each CSV/JSON column as a --group field in pattern order. See the Tabular Data guide.

Regex — named z capture:

vizb bar data.csv -g category,metric,group,series --group-regex "(?<n>.*)/(?<x>.*)/(?<y>.*)/(?<z>.*)" -o output.html

If you supply a z without both x and y, vizb rejects the pattern:

zAxis (z) requires both xAxis (x) and yAxis (y)

See the Group guide for full pattern and regex syntax.

Value (pseudo) 3D (--3d on x+y data)

When you have only x and y dimensions, a 2D bar/line/scatter chart puts every y category in the legend — hard to read with many series. Pass --3d on vizb bar, vizb line, or vizb scatter to project the same data into 3D: y categories move to depth, and the metric value becomes bar/line/point height. With --3d, a visualMap gradient colors the geometry by metric value (on by default).

# CSV with x+y columns — no z grouping needed
vizb bar data.csv -g category,series -p x,y --3d -o output.html
vizb line data.csv -g category,series -p x,y --3d -o output.html

# Disable the gradient while keeping value 3D
vizb bar data.csv -g category,series -p x,y --3d --3d-visualmap=false -o output.html

# Grouped z 3D with visualMap only
vizb bar data.csv -g x,y,z -p x,y,z --3d-visualmap -o output.html

The HTML bundles 3D view and 3D visual map toggles in settings (both on by default when --3d was passed). Turn 3D view off to return to the flat 2D chart without re-running the CLI.

Note

--3d on vizb bar / vizb line is separate from vizb ui --3d, which only opts in to bundling the 3D engine for remote --data-url pages.

Continuous 3D (auto-value)

When your CSV/JSON data has 3+ numeric columns, auto-value renders continuous 3D — no --3d flag needed. This works on bar, line, and scatter:

# All-numeric CSV — auto-detects x, y, z → bar3D
vizb bar spiral.csv -o bar.html

# Same for line and scatter
vizb line spiral.csv -o line.html
vizb scatter spiral.csv -o scatter.html

See Group vs Select → Auto-value for the full inference rules. In short: 3 coordinate columns auto-enable 3D, and solo --select (or limiting it to 2 columns) keeps the chart 2D.

When a CSV/JSON has four numeric columns, vizb treats the first three as x, y, z positions and the fourth as a visual metric — 3d-visualmap is enabled automatically so point color and size follow the metric.

Continuous 3D uses the same WebGL scene as grouped 3D — rotate, zoom, pan, and the auto-rotate toggle all apply.

3D Chart Types

3D Bar

Stacked 3D bars — each z value stacks on the (x, y) cell. The bar-top label shows the stacked total when value labels are on.

3D Line

3D polylines across the x/y grid, with scatter markers at each vertex so individual points stay readable.

3D Scatter

scatter3D points — grouped z series or auto-value continuous coordinates.

Auto-Rotate

3D charts gain an Auto rotate toggle in the settings panel (it only appears for 3D data). Enable it to continuously spin the scene for a hands-free walkaround.

Axis-Sum Tooltips

Hover any cell to see its breakdown plus marginal sums — each marginal is the sum over the other axes:

• Σ z — the stacked height at this (x, y) cell (sum over z)
• Σ x — total for this x value (sum over the other axes)
• Σ y — total for this y value (sum over the other axes)

Sums honor the legend: toggle a z series off and the totals recompute to reflect only what’s visible. Tooltips follow light/dark mode automatically.

Tip

2D charts get axis sums too — per-series totals after each name and a labeled x-marginal at the bottom of the tooltip.

Next Steps

HeatmapX × Y colored grid — works great with or without z, never renders WebGL.

Bar ChartBar chart in all three dimensions — 1D, 2D, and 3D.

Line ChartLine chart in all three dimensions — 1D, 2D, and 3D.

Scatter ChartCoordinate plotting with grouped, value, and hybrid modes.

Axis SwappingSwap z in and out interactively to toggle between 3D and 2D.

SettingsAuto-rotate and other runtime controls.