heatmap-ui
0
3DEngineering managementGuide 10

Sprint velocity heatmaps for squad planning

Compare story points by squad and sprint while leaving an open sprint visibly unfinished.

Use this pattern Open playground

Completed points across squads

Example data
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.Row 1, column 8: 35Row 1, column 7: 29Row 2, column 8: 28Row 1, column 6: 33Row 2, column 7: 25Row 1, column 5: 27Row 3, column 8: 32Row 2, column 6: 19Row 1, column 4: 30Row 3, column 7: 34Row 2, column 5: 22Row 1, column 3: 18Row 4, column 8: 18Row 3, column 6: 31Row 2, column 4: 17Row 1, column 2: 24Row 4, column 7: 14Row 3, column 5: 22Row 2, column 3: 20Row 5, column 8: 30Row 1, column 1: 21Row 4, column 6: 16Row 3, column 4: 14Row 2, column 2: 15Row 5, column 7: no dataRow 4, column 5: 11Row 3, column 3: 18Row 2, column 1: 12Row 5, column 6: 23Row 4, column 4: 13Row 3, column 2: 26Row 5, column 5: 26Row 4, column 3: 9Row 3, column 1: 30Row 5, column 4: 21Row 4, column 2: 10Row 5, column 3: 24Row 4, column 1: 8Row 5, column 2: 18Row 5, column 1: 16
lessmoreno data
5 squads · 8 sprintsDrag to explore · Keyboard accessible
Rows
Squad
Columns
Sprint
Value
Story points → height

The pattern

What the data tells you

Follow each squad across sprints. The missing Data value stays visibly unfinished instead of reading as zero points.

A brick-style 3D matrix gives each squad a row and each sprint a column. Height makes the spread between squads legible; an unknown value can represent a sprint that has not closed yet.

Velocity is a comparison problem. The grid keeps squads and sprint boundaries aligned, while the isometric blocks provide enough visual weight to spot a sustained change without adding a separate chart legend.

Build it in React

From data to heatmap

TypeScript / React

Prepare your data

A squad-by-sprint matrix of completed points, with missing values for sprints that are still in progress.

Make the component yours

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

sprint-velocity.tsx
import { Heatmap3D } from "@thilakbhat/heatmap-ui";
import "@thilakbhat/heatmap-ui/styles.css";

const points = [
  [21, 24, 18, 30, 27],
  [12, 15, 20, 17, 22],
  [30, 26, 18, 14, null], // sprint still open: unknown, not zero
];

export function SprintVelocity() {
  return (
    <Heatmap3D
      rows={3}
      columns={5}
      values={points}
      blockStyle="lego"
      maxHeight={60}
      interactive
      ariaLabel="Story points by squad and sprint"
    />
  );
}
Key props
Heatmap3DblockStyle="lego"null for unknowninteractive
API reference

A few more details

Common questions

Sprint velocity heatmaps, explained.

What is a sprint velocity heatmap?

A sprint velocity heatmap compares completed story points by squad and sprint, helping engineering leaders see consistency, spread, and sustained changes in delivery capacity.

How do I represent an open sprint in a velocity matrix?

Use an unknown or missing value for a sprint that has not closed. Do not fill it with zero, because an unfinished sprint is not the same as a completed sprint with no points.

Why use a 3D view for engineering velocity?

Height makes differences between squads and sprint periods easier to scan, while the aligned grid keeps the comparison grounded in the original planning dimensions.

Can I visualize story points in a React heatmap?

Yes. Pass a squad-by-sprint matrix to Heatmap3D, use a block style such as lego, and add an accessible label plus an explicit unknown state for incomplete planning periods.