Tap density heatmaps for interaction hotspots
Make sparse interaction data readable by preserving the faint halo around the strongest hotspots.
- Rows
- Vertical region
- Columns
- Horizontal region
- Value
- Tap count · log scale
The pattern
What the data tells you
Two hotspots emerge from the sparse activity. Log scaling preserves the softer halo around each cluster.
A hexagonal density grid is a compact way to show where taps, clicks, scans, or events cluster. Log scaling prevents one extreme hotspot from making every other cell look empty.
Point clouds are difficult to compare in a product review. Binning gives the team a stable surface, and a log scale keeps low-volume but meaningful regions visible next to a dominant CTA.
Build it in React
From data to heatmap
Prepare your data
A grid of event counts arranged over a spatial or semantic surface. Choose a cell shape that matches the underlying geometry.
Make the component yours
Start with this example. Adjust the labels, colours, and tooltips to fit your product.
import { Heatmap } from "@thilakbhat/heatmap-ui";
import "@thilakbhat/heatmap-ui/styles.css";
const taps = [
[0, 2, 9, 44, 120, 38],
[1, 7, 24, 90, 210, 61],
[0, 3, 12, 36, 88, 19],
];
export function TapDensity() {
return (
<Heatmap
rows={3}
columns={6}
values={taps}
shape="hexagon"
scale="log"
colors={["#1a2e05", "#3f6212", "#84cc16", "#d9f99d"]}
showLegend
tooltip={(cell) => `${cell.value} taps`}
/>
);
}A few more details
Common questions
Tap density heatmaps, explained.
What is a tap density heatmap?
A tap density heatmap bins clicks, taps, scans, or sensor events into cells so a team can compare interaction hotspots without reading a noisy point cloud.
Why use hexagonal cells for interaction density?
Hexagonal bins give neighbouring regions more uniform adjacency, which makes spatial clusters and the falloff around a hotspot easier to read.
Which scale works best for click or tap hotspot data?
A log scale is often useful when one CTA or location dominates the counts. It keeps lower-volume but meaningful regions visible beside the largest hotspot.
Can I use a density heatmap for clicks, scans, and sensor events?
Yes. Convert the events to a spatial or semantic grid, pass the counts to Heatmap with a hexagon shape, and customize the tooltip so each cell explains the measured event.