HAHS.
Back to Catalog

Heatmap

chart

Also known as: heat map, density matrix, color matrix

Show relationshipShow distribution CategoricalNumerical Matrix/Grid

설명 / Description

히트맵은 데이터를 2차원 격자에 배치하며, 각 셀은 행 범주와 열 범주의 교차점을 나타냅니다. 각 교차점의 값은 셀의 색상으로 인코딩되며, 보통 순차적이거나 발산형(diverging) 색상 스케일을 사용합니다. 그 결과는 수백, 심지어 수천 개의 값을 동시에 표시할 수 있는 밀도 높고 압축적인 표현입니다.

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

다음 프롬프트를 Claude, ChatGPT, 또는 다른 AI 도구와 함께 사용해보세요:

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
  • 셀이 매우 적을 때(예: 2x2 격자) -- 색상 스케일을 쓰는 오버헤드가 정당화되지 않습니다
  • 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.
  • 캘린더 히트맵: 열이 주(week), 행이 요일인 특수한 레이아웃으로, 몇 달이나 몇 년에 걸친 일별 활동을 보여주는 데 사용됩니다(GitHub 기여 그래프로 대중화됨).
  • 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.
  • 구간화 히트맵(2D 히스토그램): 연속적인 x, y 변수를 격자로 구간화하고, 색상으로 관측 개수를 보여줍니다.
  • 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" }
})