The heatmap field guide
Small cells.
Endless possibilities.
Ten ways to make your data easier to read. Explore working examples, find the right pattern, and take the React code with you.
New to heatmap-ui? Start hereEveryday patterns
Activity, habits, and the patterns hiding in your data.
Activity calendar
Make a year of daily activity readable at a glance, from GitHub contributions to publishing streaks.
CalendarHeatmapView guide Commit punchcard
Show when work happens across the week so teams can plan around real rhythms instead of averages.
HeatmapView guide Habit tracker
Compare progress toward several daily goals without flattening every habit into a single streak.
HeatmapView guide Service uptime
Turn ninety days of service health into a compact status strip that keeps outages visible.
HeatmapView guide Cohort retention
Compare how signup cohorts retain week over week with a matrix that makes the data's ragged edge explicit.
HeatmapView guide Label co-occurrence
Find which labels appear together so maintainers can simplify taxonomies and route work faster.
HeatmapView guide Tap density
Make sparse interaction data readable by preserving the faint halo around the strongest hotspots.
HeatmapView guide A new dimension
Give volume to release cycles, demand, and team progress.
Deploy skyline
Turn deploy frequency into an isometric skyline that makes quiet weeks and launch spikes memorable.
CalendarHeatmap3DView guide Store footfall
Make lunch rushes and after-work peaks obvious across weekdays and hours with a rotatable 3D grid.
Heatmap3DView guide Sprint velocity
Compare story points by squad and sprint while leaving an open sprint visibly unfinished.
Heatmap3DView guide Which pattern fits your data?
Start from the shape of the data you already have.
- One value per day, across weeks or a yearActivity calendar2D
- Counts by weekday and hourCommit punchcard2D
- Progress toward several goals, day by dayHabit tracker2D
- A status for each service on each dayService uptime2D
- Retention by signup cohort and ageCohort retention2D
- How often pairs of categories appear togetherLabel co-occurrence2D
- Taps, clicks, or events over a surfaceTap density2D
- Daily counts that tell a story over monthsDeploy skyline3D
- Demand by day and hour, where peaks matter mostStore footfall3D
- Totals by team and periodSprint velocity3D
Before you start
Heatmaps, briefly
What they are, and when to reach for one.
What is a heatmap?
A heatmap is a grid where colour, and sometimes size or height, shows the value in each cell. Rows and columns carry the categories, such as weekdays and hours, so patterns across both appear at once.
When is a heatmap better than a line or bar chart?
Use a heatmap when the data has two dimensions that both matter, such as day and hour or cohort and week. A line chart averages one of them away; a heatmap keeps both and makes repeating patterns visible.
When should I use a 3D heatmap?
Use 3D when the peaks are the story, as in a release skyline or a lunch rush, and readers benefit from exploring the scene. For dense dashboards and exact comparisons, a flat 2D heatmap reads faster.
Do these examples work in any React app?
Yes. Every example uses heatmap-ui, a headless React library that renders plain SVG and HTML. Install @thilakbhat/heatmap-ui, import its stylesheet, and pass your data as a matrix or a list of dated values.
Your contributions, visualized.
Enter a GitHub username and see your own activity take shape.