DEV Community

Cover image for Level Up Your D3 Charts: Exploring d3-3d v2.0.0
Stefan Nieke
Stefan Nieke

Posted on

Level Up Your D3 Charts: Exploring d3-3d v2.0.0

d3-3d exists for one simple reason:

to take D3’s familiar data-driven approach and extend it into 3D space, without jumping into WebGL or heavy frameworks.

With v2.0.0, d3-3d gets its biggest upgrade so far: TypeScript support, a cleaner API, and much better documentation.

What is d3-3d?

d3-3d is a small helper library that lets you:

  • Work with 3D data (x, y, z)
  • Project it into 2D SVG
  • Keep using D3 selections, joins, and transitions

It focuses on projection and geometry, not on being a full 3D engine.

What’s new in v2.0.0?

1) First-class TypeScript support

d3-3d now ships with proper TypeScript definitions.

Better autocomplete, safer refactors, less guessing.

2) A cleaner, more explicit API

Shapes no longer act like callable functions that implicitly accept data.

Instead, data is passed explicitly via .data().

Before (v1.x):

const projected = triangles3D(data);
Enter fullscreen mode Exit fullscreen mode

Now (v2.0.0):

const projected = triangles3D().data(data);
Enter fullscreen mode Exit fullscreen mode

It’s a breaking change, but it makes the API far more predictable and type-friendly.

The sort function is not attached any more to each shape class, it gets exported directly.

Before (v1.x):

import {
    triangles3D,
} from "d3-3d";

// ... some code

svg.append("g")
   .selectAll(".d3-3d")
   .sort(triangles3D.sort);
Enter fullscreen mode Exit fullscreen mode

Now (v2.0.0):

import {
    sort,
} from "d3-3d";

// ... some code

svg.append("g")
   .selectAll(".d3-3d")
   .sort(sort);
Enter fullscreen mode Exit fullscreen mode

3) Computed properties, now properly documented

Computed properties like centroid, orientation, and transformed coordinates already existed before, but were hard to discover and poorly documented.

v2.0.0 improves:

  • Documentation
  • Examples
  • Practical explanations

These properties are especially useful for things like label placement, interaction logic, or depth-aware rendering.

For depth sorting specifically, d3-3d exports a standalone sort helper, rather than baking sorting into every shape.

Why this release matters

v2.0.0 doesn’t add flashy features — it makes d3-3d easier to use, easier to understand, and safer in modern setups.

If you’re comfortable with D3 and want to add depth without switching stacks, this release is a solid step forward.

https://github.com/Niekes/d3-3d

Top comments (0)