3D visualization

Cosmograph has an extremely fast 3D force layout and rendering engine. Set spaceDimensions to 3 to run the GPU force simulation and rendering in three dimensions, with a perspective orbit camera.

The force layout and its spatial structures use the same dimensionality as the view. You can switch between 2D and 3D at runtime without reloading data.

Enable 3D

const config = {
  spaceDimensions: 3,
  enableSimulation: true,
}

In 3D mode:

Drag to rotate the orbit camera
Scroll / pinch to dolly (zoom)
Shift or Space + drag to pan

Default is spaceDimensions: 2 (flat pan/zoom).

Dimensionality is independent of your data. 2D positions viewed in 3D lie in the z = 0 plane. 3D positions viewed in 2D are projected top-down (their z is preserved).

Coordinates with Z

For embeddings or other precomputed layouts, map X, Y, and optionally Z columns:

const config = {
  spaceDimensions: 3,
  pointIdBy: 'id',
  pointXBy: 'x',
  pointYBy: 'y',
  pointZBy: 'z',
  enableSimulation: false, // keep fixed embedding positions
}

pointZBy requires both pointXBy and pointYBy.

When you enable 3D without providing coordinates, Cosmograph seeds random positions in 3D space and runs the force simulation there.

Appearance in 3D

Useful options when spaceDimensions is 3:

Property	Role
`pointSphereShading`	Shade circle points as lit spheres so overlaps read as volumes
`pointDepthFade`	Fade points by depth for depth cues
`cameraFov`	Vertical field of view in degrees (default `45`)
`scalePointsOnZoom`	Keep point sizes readable while navigating

const config = {
  spaceDimensions: 3,
  enableSimulation: true,
  pointSphereShading: true,
  pointDepthFade: 0.1,
  cameraFov: 55,
  scalePointsOnZoom: true,
}

See the full CosmographConfig for related rendering and simulation options.

Compare performance

See how Cosmograph compares to other libraries in 2D and 3D on the live benchmark, or review the feature comparison.

Clustering Point shapes