3DRelease engineeringGuide 08

Deploy skylines for release history

Turn deploy frequency into an isometric skyline that makes quiet weeks and launch spikes memorable.

Height shows the numerical value; colour shows its shade band. Zero and negative values are flat. Outlined tiles have no data. Drag to orbit. Focus the chart and use arrow keys to rotate, plus or minus to zoom, and Home to reset. Tab to enter the grid, then use arrow keys to inspect adjacent cells.

lessmore

24 weeks of deploysDrag to explore · Keyboard accessible

Rows: Day of the week
Columns: Calendar week
Value: Deploy count → height

The pattern

What the data tells you

Taller buildings mark release-heavy days. Drag to orbit, or focus the scene and use the arrow keys.

The 3D calendar uses height for the raw value and colour for its band. Readers can orbit the SVG scene, focus a cell, and still access the same date and value through tooltips.

A release timeline is often a story, not just a metric. A skyline makes the shape of a release cycle tangible while keeping the data queryable and accessible as SVG instead of hiding it in a canvas.

Build it in React

From data to heatmap

TypeScript / React

Prepare your data

One dated deploy count per day. The same calendar values can be rendered flat or as an isometric scene without changing the data model.

Make the component yours

Start with this example. Adjust the labels, colours, and tooltips to fit your product.

deploy-skyline.tsx

import { CalendarHeatmap3D, type CalendarDay } from "@thilakbhat/heatmap-ui";
import "@thilakbhat/heatmap-ui/styles.css";

export function DeploySkyline({ deploys }: { deploys: CalendarDay[] }) {
  return (
    <CalendarHeatmap3D
      values={deploys}
      to="2026-09-12"
      weeks={24}
      blockStyle="building"
      theme="night"
      maxHeight={70}
      animation="grow"
      interactive
      unitLabel="deploys"
    />
  );
}

Key props

CalendarHeatmap3DblockStyle="building"animation="grow"interactive

API reference

A few more details

Common questions

Deploy skyline heatmaps, explained.

What is a 3D calendar heatmap?

A 3D calendar heatmap keeps dates in a calendar layout while using height for the raw value and colour for its band, turning activity peaks into a readable skyline.

Why use a 3D heatmap for release history?

A release skyline makes quiet periods, launch spikes, and changes in deployment cadence immediately visible while preserving the underlying date and value for tooltips.

Does the deploy skyline require WebGL?

No. The heatmap-ui 3D pattern is rendered as SVG, so it can stay serializable, themeable, and accessible without adding a WebGL scene to the application.

How do I make a deployment heatmap interactive?

Pass dated deploy counts to CalendarHeatmap3D, enable interactive mode, and provide a unit label such as deploys so hover and keyboard users can understand each block.