A heat map is a two-dimensional visualization that uses color to represent the magnitude or density of data points, making patterns visible at a glance. Whether you’re analyzing website behavior, mapping crime hotspots, or comparing gene expression across experiments, the core idea is the same: color intensity replaces raw numbers so you can spot clusters, gaps, and outliers without reading a spreadsheet. Here’s how to use them effectively across the most common applications.
How Heat Maps Work
Every heat map starts with a grid or surface where each cell gets a color based on its value. Low values sit at one end of the color scale, high values at the other, and everything in between falls along a gradient. In some cases, like website click tracking or crime analytics, the color represents how densely data points cluster in an area rather than a single measurement per cell. Either way, the result is an instant visual summary: warm-colored zones draw your eye to where the action is, and cool zones fade into the background.
The type of color scale you choose matters. Sequential palettes move from light to dark (or vice versa) and work best when your data ranges from low to high with no meaningful midpoint. Diverging palettes use two contrasting hues that meet at a neutral center, which is ideal when your data spans a meaningful zero or baseline and you care about deviations in both directions. Picking the wrong scale can flatten important differences or create visual emphasis where none belongs.
Website and UX Heat Maps
If you run a website or app, heat maps are one of the fastest ways to understand what users actually do on a page. Most UX tools offer three distinct types, and each answers a different question.
Click and tap maps show where users click on desktop or tap on mobile and tablet. They reveal whether visitors are hitting the links and buttons you want them to, or clicking on elements that aren’t even interactive. A cluster of clicks on a decorative image, for example, usually means it looks like a button and is confusing people.
Scroll maps show how far down the page your visitors get. The tool calculates the percentage of visitors who reached each depth, so you can see exactly where attention drops off. If 80% of users never scroll past the halfway point, anything below that line is functionally invisible to most of your audience.
Move maps track where users hover their mouse cursor, sampled ten times per second. Mouse movement loosely correlates with visual attention on desktop, giving you a rough proxy for what people are looking at even when they don’t click. These are less useful on mobile, where there’s no cursor to track.
Avoiding Common UX Heat Map Mistakes
The biggest trap is confusing behavior with intent. Heavy clicking on a non-clickable element doesn’t mean users are interested in it. It often means your design is misleading them. Likewise, users who stop scrolling halfway down a page aren’t necessarily bored. Many of them found what they needed and left satisfied. Heat maps show you what happened, not why.
Other common errors include relying only on click maps while ignoring scroll and move data, skipping mobile heat maps entirely (mobile users interact with pages very differently than desktop users), and lumping all visitors into one view instead of segmenting by traffic source, device type, or user role. Segmentation often reveals that different groups behave in completely different ways on the same page, and the combined view hides both patterns.
Geographic and Spatial Heat Maps
Spatial heat maps plot data on a real map to reveal geographic concentrations. Common examples include crime density, disease outbreaks, traffic incidents, and retail foot traffic. These typically use a technique called kernel density estimation: the software places a smooth, dome-shaped surface over each data point, with the peak at the point’s location and the surface tapering to zero at a defined search radius. Where many of these surfaces overlap, the combined density value is high, producing a visible hotspot.
The search radius is the single most important setting. Too small, and you get a scattered mess of individual dots with no visible pattern. Too large, and genuine clusters blur together into one undifferentiated blob. Most GIS tools offer an automatic calculation based on your data’s spatial distribution, but you should experiment with the radius to make sure the result reflects meaningful patterns rather than artifacts of the setting.
One important distinction: a true heat map draws its colored zones from the data itself, with shapes that follow density contours. A choropleth map, by contrast, fills pre-defined geographic boundaries (counties, states, ZIP codes) with color. Rain, air pollution, or any phenomenon that doesn’t respect political borders is better suited to a heat map. Election results or per-capita income, which are reported by jurisdiction, belong on a choropleth.
Scientific and Data Analysis Heat Maps
In fields like genomics and bioinformatics, heat maps are a standard way to visualize large matrices. A gene expression heat map, for instance, might display thousands of genes as rows and dozens of experimental samples as columns, with each cell colored by expression level. Hierarchical clustering reorders both rows and columns so that similar genes and similar samples end up next to each other, creating visible blocks of high or low expression that reveal biological groupings.
For this kind of heat map, data normalization is essential. Raw values from different experiments can vary because of differences in sample preparation, labeling efficiency, or handling, not because of any real biological change. A common approach is z-score transformation: for each row, you subtract the mean and divide by the standard deviation. This converts every value into units of “how far from average,” putting all rows on the same scale. Without this step, a handful of highly expressed genes can dominate the color range and make everything else look identical.
The choice between correlation distance and Euclidean distance for clustering also affects what your heat map emphasizes. Euclidean distance groups genes with similar absolute expression levels. Correlation distance groups genes that rise and fall together across conditions, regardless of their overall magnitude. Which one you pick depends on whether you care about similar levels or similar patterns.
Choosing the Right Color Palette
Color choice can make or break a heat map’s readability. The classic “rainbow” palette (red, orange, yellow, green, blue, purple) is one of the worst options. It isn’t perceptually uniform, meaning equal steps in your data don’t produce equal steps in perceived brightness. This creates artificial boundaries and can make viewers see patterns that aren’t there.
Perceptually uniform palettes like Viridis, Magma, Plasma, Inferno, and Cividis are designed so that each step in the data maps to an equal step in perceived color change. They also remain readable for people with common forms of color blindness and print clearly in grayscale. Viridis is the default in many visualization libraries for good reason: it spans a wide perceptual range in both brightness and blue-yellow contrast without relying on red-green differences that roughly 8% of men can’t distinguish.
If your data has a meaningful center point (like zero change, or a baseline), use a diverging palette with a neutral color at the midpoint and two contrasting hues moving outward. For data that simply goes from low to high, a sequential palette running from light to dark is the clearest choice.
Building a Heat Map in Code
Python is the most common language for programmatic heat maps. Plotly Express offers a quick path with its px.imshow() function, which accepts a list of lists, a NumPy array, or a DataFrame and renders a colored grid. You can add value labels with text_auto=True, customize axis labels through the x, y, and labels arguments, and control tile shape with the aspect parameter. Seaborn’s heatmap() function is another popular option, particularly for correlation matrices and annotated grids, with built-in support for color palette selection.
For geographic heat maps, tools like ArcGIS Pro, QGIS, and Python’s Folium library handle the kernel density calculations and map rendering. For website heat maps, dedicated platforms like Hotjar, Microsoft Clarity, and FullStory generate click, scroll, and move maps from your live traffic without any coding.
Regardless of the tool, the workflow is the same: prepare and normalize your data, choose an appropriate color scale, generate the visualization, and then critically evaluate whether the patterns you see reflect real signal or just artifacts of your settings. Adjusting the color range, clustering method, or search radius and watching what changes is the fastest way to separate genuine insights from noise.