Examples

In the documentation

• Surface plot — a ripple or a wave drawn with gridPlanes3D, with shape, amplitude, frequency, color and wireframe controls
• Terrain sculptor — a field of 32 × 32 samples drawn with gridPlanes3D that a brush raises and lowers; the brush lands on the hill under the pointer through unproject, and its ring is a lineStrips3D
• Area chart — two series as hatched ribbons in a box, drawn with polygons3D and axes3D, that morph into new samples; the faces are painted in an exact order that follows from the planes separating them
• Bar chart — fifteen bars drawn with cubes3D, rotated by drag
• Data-update stress test — up to 36 labelled cubes drawn with cubes3D and labels with points3D, added, removed, shuffled and moved through a keyed join; the enter, update and exit sets flash in their own colors, and a toggle keys the join by id or by index
• Sorting sculpture — 24 columns in a ring, built with box and drawn with cubes3D, that bubble sort, insertion sort or quick sort put in order one comparison or swap at a time; the columns are keyed by their value and painted by their footprint with sort
• Bar field — a height map of up to 40,000 bars, projected by .matrix() and drawn on a 2D canvas in grid order or with WebGL instances and a depth buffer
• Exploded cube assembly — a block of 64 cubes drawn with cubes3D, whose layers part on a slider; click a cube to inspect it
• Voxel builder — an 8 × 8 floor to build on with cubes3D, drawn with planes3D and lines3D; the cell under the pointer comes from unproject, and the faces that touch are never drawn; paint the cubes, and export and import a build as JSON that the loader checks as untrusted input
• Packing playground — a see-through container of 6 × 4 × 4 cells on a floor drawn with planes3D and lines3D, filled with boxes of five sizes, each a box cut into unit cubes and drawn with cubes3D; a box lands on the stack under the pointer, a drag slides it across the floor at its height through unproject, and the cells that two boxes share turn red
• Cellular automaton — a 12 × 12 × 12 grid of cells on a floor drawn with planes3D and lines3D, every live cell a box drawn with cubes3D; three rules count the 26 neighbors of every cell, the cubes keep their elements from one generation to the next, and only the surface is drawn
• Mini city — sixteen low-poly buildings drawn with cubes3D, each piece a box, a tapered shaft, a gable roof or a spire, lit by a sun that a slider moves across the sky; click a building to see its stats
• Floor-plan explorer — four floors drawn with planes3D, their rooms with polygons3D and labels with points3D, colored by occupancy; spread the floors on a slider and select a floor or a room
• Scatter plot — six datasets in a box with gridlines, colored and sized by value, drawn with axes3D, points3D and lines3D
• Point cloud — a spiral galaxy of up to a million stars, projected by .matrix() and drawn on a 2D canvas with projectPositions or with WebGL
• Pixel space — the pixels of The Starry Night, up to 160,000, morph from the painting into a relief, the RGB cube and the HSL cylinder on a 2D canvas; a depth and an index buffer find the pixel under the pointer, and a click picks its color in every layout
• Particle text morph — 1500 particles drawn with points3D form a word or a shape and fly into the next one; type your own text, and a hidden canvas turns its pixels into points
• Trajectory explorer — three paths through the Lorenz attractor with moving markers and fading trails, drawn with lineStrips3D, points3D and axes3D
• Space-time cube — one day of four people above the map of a town, their paths drawn with lineStrips3D, the plane of the time slider with planes3D, where everyone is with points3D and the hours with axes3D; the plane cuts the scene in two, and the half on the side of the eye is painted over it, in perspective too
• Spline editor — a curve through six points above a floor, drawn with lineStrips3D, its points and their shadows with points3D and the floor and drop lines with lines3D; a drag moves a point in the plane that faces the camera through unproject, Shift only up and Alt only across the floor
• Network explorer — 45 nodes in three clusters, drawn with points3D and lines3D; click a node to highlight its neighbors, filter the clusters
• Linked views — 150 samples in three clusters drawn with points3D in a free view and in a top view, each on its own camera3D, and one selection shared by both; a brush on the map selects through .unproject(), and an arrow on it points along the .viewDirection() of the free camera
• Flocking — 150 boids after Craig Reynolds, drawn with points3D, their tails with lines3D and the box with axes3D; sliders weight separation, alignment and cohesion, every boid is colored by its speed and sized by its depth, and a readout shows how much the flock flies as one
• Projection playground — rotation, scale, origin and rotation center of one cube, with the renderer call and its vertices beside the SVG and twelve presets from isometric to a corner pivot
• Perspective street — sixteen houses along a street seen through .perspective(), drawn with cubes3D and planes3D; a dolly zoom moves the eye, and a toggle shows why ccw and not the view direction tells the faces that show
• Coordinate explorer — one point among three axes from −3 to 3, drawn with lines3D and points3D on one camera3D; sliders place it, a walk along x, y and z and a box of drop lines lead to it, and a checkbox flips y up through the accessors
• Depth-ordering lab — four small scenes of planes3D quads and a cubes3D cube, each built to break an order of whole faces; every pair of faces is tested where it overlaps through .unproject(), and the pairs that sort or another order paints the wrong way round are outlined, with and without .perspective()
• Rotation order — two copies of a block of five cubes, built with box and drawn with cubes3D and their own axes with lines3D, turned by the same three angles: the renderer turns one around z, y and x, a chain of three transform calls turns the other in an order you pick, from quarter turns to gimbal lock
• Rotation pivot — a box on a floor that turns around a pivot you drag, drawn with cubes3D, its orbits with lineStrips3D, its corners and the pivot with points3D and the floor grid and the axis with lines3D, all on one camera3D; the drag lands on the floor through unproject, and the origin takes the shift of a new pivot back out
• Solar system — the sun, eight planets and the moon, 2200 triangles in one triangles3D, lit by the sun and animated with a d3 timer
• Mesh inspector — a vase of triangles drawn with triangles3D and its normals with lines3D; toggle the faces, edges, normals and back faces, click a face to inspect it
• Möbius strip — a strip of 768 triangles drawn with triangles3D and its edge with lineStrips3D, lit from either side by the absolute cosine between normal and viewDirection; a walker comes back from one lap upside down, and a slider sets the half-twists from 0 to 5
• Office tower — 24 floors of a city block, drawn with iso3D
• Neon city — 25 lots of shops, mid-rises, towers and parks drawn with iso3D, every face shaded in the frame iso3D returns for it, with traffic that CSS runs along the streets

The office tower is inspired by isoglow.dev, an isometric gallery of small machines and cities by April Zhu. The neon city is inspired by 3Dokploy, a Dokploy server shown as an isometric city. The scatter plot recreates the 3D scatter plot of matterviz by Janosh Riebesell. The area chart recreates the multi-series 3D area chart with hatch fill of AnyChart.

On CodePen

Live examples are available on CodePen. A selection:

• Surface plot
• Scatter plot
• Bar chart
• Sphere
• Cone
• Cylinder

Embedding in your project

Include the UMD bundle via unpkg:

<script src="https://unpkg.com/d3-3d/build/d3-3d.js"></script>