Build an isometric bar chart from data attributes

Design tokens keep the whole team in step. We name colours by their role, such as face-top, face-left and face-right, rather than by hue. When we switched the site to a violet accent for a campaign, only the token values changed. Every illustration, button and chart followed without anyone opening a single component.

Handling motion

Stacking order is the part that trips people up. In a flat layout, later elements paint on top. In a tilted scene, a block that is further back must paint first, even if it appears later in the markup. Either sort your markup by depth or give each block a z-index derived from its row and column.

1. Set the unit

   Define --unit: 2rem on the scene so every size derives from one value.

2. Build the columns

   Read each value from a data-value attribute and set the block height with calc().

3. Label the bars

   Keep labels flat and upright below the chart so they stay readable.

4. Describe the chart

   Add a visually hidden table with the same numbers for screen readers.

The code

Performance is rarely a problem for one hero cube, but a scene with fifty transformed blocks is a different story. Each block may become its own compositing layer, and every layer costs memory. Open the Layers panel before you ship and count them. If the number surprises you, flatten the static parts into a single SVG.

Motion adds a lot to isometric scenes, and it is also the fastest way to make someone feel unwell. Wrap every animation in a prefers-reduced-motion query. For readers who ask for less motion we keep the scene still and use a small colour change on hover instead, which keeps the interface responsive without any movement.

Custom properties make isometric CSS far easier to maintain. Instead of hard-coding sizes, we define a single unit on the scene wrapper and multiply it everywhere else. Changing the unit rescales the whole illustration, keeps the proportions intact and means a phone layout needs one media query instead of twenty.

.scene {	--unit: 2rem;	transform: rotateX(60deg) rotateZ(-45deg);	transform-style: preserve-3d;} .cube {	width: calc(var(--unit) * 3);	aspect-ratio: 1;	background: var(--face-top);}

Colours used

Keeping everything on the grid

Accessibility for decorative art is mostly about getting out of the way. If an illustration adds no information, hide it from assistive technology with aria-hidden on its wrapper. If it does carry meaning, such as a chart, give it a text alternative that says what the picture shows, not how it was built.