3D scatter

Points positioned in three dimensions with native scene primitives. Use it when all three dimensions are meaningful and the app benefits from spatial inspection. The screenshot is captured from the native Fission chart gallery.

What the chart is for

3D scatter belongs to the 3D and GL family. Its job is to make this data shape readable: Vec<(x, y, z, radius)> lowered into Scene3D spheres. In a production interface, choose this chart when the visual form makes the user's question faster to answer than a table or a simpler chart would.

Avoid it when a two-dimensional chart answers the question more directly; 3D should clarify spatial data, not decorate ordinary comparisons.

Data model

Vec<(x, y, z, radius)> lowered into Scene3D spheres. Keep the data close to the type that describes it. Fission Charts is typed Rust, so a line uses LineSeries, a calendar heatmap uses CalendarHeatmapSeries, and chart components such as zoom, marks, and graphics are explicit fields on Chart rather than hidden string configuration.

Rust API

Field	Type	Notes
title	&str	Names the chart for the screen, accessibility tree, and test output.
scene	Scene3D	Owns retained native 3D primitives for the chart viewport.
primitive	Primitive3D	Uses cuboids, spheres, or meshes for the chart geometry.
width / height	f32	Optional fixed size; omit them when the chart should flex inside Fission layout.

Example

use fission_3d::{Point3D, Primitive3D, Scene3D};
use fission_core::op::Color;

let scene = Scene3D::new()
    .add_primitive(Primitive3D::Sphere {
        center: Point3D::new(0.0, 0.0, 0.0),
        radius: 0.4,
        color: Color { r: 20, g: 184, b: 166, a: 255 },
    });

Interaction and animation

Charts can emit typed ChartInteractionEvent values when interaction is enabled. Handle those events in a reducer when the app needs hover, press, release, scroll, selection, or brush behavior. ChartAnimation stores duration, delay, stagger, easing, and reduced-motion behavior as deterministic chart data, so animation timing can be tested instead of being hidden in ad-hoc timers.

Testing guidance

For this chart, test the data mapping first, then test lowering, then capture a live screenshot when visual output changes. The screenshot for this page is refreshed with npm run charts:generate from the website package.

Tags: 3d, scatter.

3D and GL family overview