Store footfall heatmaps for daypart demand
Make lunch rushes and after-work peaks obvious across weekdays and hours with a rotatable 3D grid.
- Rows
- Weekday
- Columns
- Operating hour
- Value
- Visitor count → height
The pattern
What the data tells you
Lunch and evening rushes rise above quieter hours. Rotate the scene to compare the dayparts across the week.
Use rows for days, columns for operating hours, and height for visitors. Circular columns and a patterned material make the surface feel like a physical volume while keeping the underlying matrix simple.
Teams planning staffing, inventory, or promotions need to compare two time dimensions at once. The 3D view adds a sense of volume without forcing a WebGL dependency or a separate rendering model.
Build it in React
From data to heatmap
Prepare your data
A day-by-hour matrix of visitors, orders, scans, or another count that can be compared across the week.
Make the component yours
Start with this example. Adjust the labels, colours, and tooltips to fit your product.
import { Heatmap3D } from "@thilakbhat/heatmap-ui";
import "@thilakbhat/heatmap-ui/styles.css";
// One row per weekday, one column per operating-hour bucket.
const visitors = [
[42, 55, 88, 142, 118, 74],
[38, 51, 81, 126, 111, 68],
[44, 62, 94, 154, 132, 79],
// …the rest of the week
];
export function StoreFootfall() {
return (
<Heatmap3D
rows={visitors.length}
columns={visitors[0].length}
values={visitors}
shape="circle"
material="pattern"
maxHeight={55}
interactive
showControls
ariaLabel="Store footfall by day and hour"
/>
);
}A few more details
Common questions
Store footfall heatmaps, explained.
What is a 3D store footfall heatmap?
It maps visitors, orders, or scans by weekday and operating hour, using height to make busy dayparts stand out across the week.
How can a footfall heatmap improve staffing plans?
Compare the tallest columns across days and hours to find lunch rushes, after-work peaks, and consistently quiet windows that can inform staffing, inventory, or promotions.
What data shape does a retail footfall heatmap use?
Use a day-by-hour matrix where every cell contains a visitor, order, scan, or demand count. Keep the time labels in the same order as the matrix so comparisons remain accurate.
Can the same heatmap compare weekdays and hours?
Yes. Give each weekday a row and each operating-hour bucket a column, then use Heatmap3D to add height without changing the simple two-dimensional data model.