Heatmap

Description

A heatmap arranges data in a two-dimensional grid where each cell represents the intersection of a row category and a column category. The value at each intersection is encoded by the cell’s color, typically using a sequential or diverging color scale. The result is a dense, compact representation that can display hundreds or even thousands of values simultaneously.

Heatmaps excel at revealing patterns across two dimensions: clusters of high or low values, gradients, periodicities, and anomalies all emerge as visible color structures. The human visual system is well suited to detecting such spatial patterns, making heatmaps effective for overview tasks where the goal is to spot “where the action is” rather than read precise numbers.

Color perception is less precise than length or position, so heatmaps trade individual value accuracy for the ability to show global structure in large datasets. Choosing an appropriate color scale is critical: sequential scales (light to dark) for data ranging from low to high, and diverging scales (two hues meeting at a neutral midpoint) when there is a meaningful center value.

Heatmap — interactive example

Prompt Examples

Try these prompts with Claude, ChatGPT, or other AI tools:

“요일별, 시간대별 웹사이트 트래픽을 히트맵으로 시각화해주세요.”

“Make a correlation heatmap for all numeric variables. Use a diverging color scheme.”

When to Use

Visualizing a matrix of values (correlation matrix, confusion matrix, survey cross-tabs)
Showing temporal patterns: day-of-week by hour-of-day activity, monthly patterns over years
Displaying gene expression, financial returns, or any dense tabular data where patterns matter more than precise values
Comparing many variables pairwise (correlation heatmap)

When NOT to Use

When precise value comparison is essential — use a bar chart or table
When data has only one dimension — use a histogram or bar chart
For continuous spatial data (geographic) — use a choropleth or interpolated surface
When there are very few cells (e.g., a 2x2 grid) — the overhead of a color scale is not justified

Anatomy

Grid cells: Rectangular marks arranged in rows and columns. Each cell is colored according to its value.
Row axis: One categorical or discretized dimension, with labels on the left.
Column axis: The other categorical or discretized dimension, with labels on the top or bottom.
Color scale: A sequential, diverging, or categorical mapping from values to colors. A legend is required.
Dendrogram: Optional hierarchical clustering tree along rows or columns, reordering them to group similar patterns together (clustered heatmap).
Cell annotations: Optional text showing the numeric value inside each cell for precision.

Variations

Clustered heatmap: Rows and/or columns are reordered by hierarchical clustering and paired with dendrograms.
Calendar heatmap: A special layout where columns are weeks and rows are days of the week, used to show daily activity over months or years (as popularized by GitHub contribution graphs).
Correlation matrix heatmap: A symmetric matrix showing pairwise correlations, often with the upper triangle mirrored or hidden.
Annotated heatmap: Numeric values printed inside cells, combining the pattern recognition of color with the precision of text.
Binned heatmap (2D histogram): Continuous x and y variables are binned into a grid, with color showing observation count.

Code Reference

// Observable Plot - heatmap of day-hour activity
Plot.plot({
  marks: [
    Plot.cell(data, {
      x: "hour",
      y: "day",
      fill: "count",
      tip: true
    })
  ],
  x: { label: "Hour of Day", tickFormat: d => `${d}:00` },
  y: { label: "Day of Week" },
  color: { scheme: "YlOrRd", legend: true, label: "Events" }
})