Generate heatmaps from matrix data with color-coded intensity mapping. Part of the DevTools Surf developer suite. Browse more tools in the Data / SQL collection.
Use Cases
Visualize server error rates by hour and day of week to find recurring peak failure times.
Display gene expression data across samples and conditions for bioinformatics analysis.
Show website click density data to identify high-attention areas of a landing page.
Compare performance metrics across team members and time periods in a sales dashboard.
Tips
Use diverging color scales (blue-white-red) when your data has a meaningful zero — values below zero get the cool color, above get warm.
Normalize rows independently when comparing rates across categories with very different absolute values.
Export as SVG for presentations — the vector format scales without pixelation and the cells can be individually styled in Figma or Illustrator.
Fun Facts
The term 'heatmap' was coined by software developer Cormac Kinney in 1991 for a real-time financial market visualization product called Smartmoney Map of the Market.
Eye-tracking heatmaps, used in UX research since the early 2000s, show that users follow an F-shaped reading pattern on web pages — most attention concentrates on the first two lines and left edge.
Genome-wide association studies (GWAS) have used heatmaps to visualize correlation matrices of thousands of gene variants simultaneously — a use case with matrices up to 20,000×20,000 cells.
FAQ
What input format does it accept?
CSV with row/column headers or a JSON matrix. Row and column labels become the axis labels; cell values determine color intensity.
Can I customize the color palette?
Yes — sequential (single-hue), diverging (two-hue with neutral midpoint), and qualitative palettes are available. Custom min/max colors can be set via hex input.
Does it support clustering?
Hierarchical clustering (Ward's method) can reorder rows and columns to group similar patterns. A dendrogram is optionally shown alongside the heatmap.
