About Heatmap Generator

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.