Waffle Chart

설명 / Description

와플 차트는 일반적으로 10x10(100칸) 형태의 정규 격자 안에서 색이 채워진 칸으로 비율을 표시하며, 각 칸은 전체의 1%를 나타냅니다. 범주마다 고유한 색상이 지정되고, 각 범주에 해당하는 개수만큼 칸이 채워져 모자이크 같은 패턴을 만듭니다. 사람은 호의 각도나 면적을 판단하는 것보다 이산 단위의 개수를 세는 것을 더 신뢰성 있게 추정하기 때문에, 그 결과는 파이 차트보다 더 지각적으로 정확하게 부분-전체 관계를 전달합니다.

A waffle chart displays proportions as colored cells within a regular grid, typically 10x10 (100 cells), where each cell represents 1% of the total. Categories are assigned distinct colors, and the appropriate number of cells are filled for each category, creating a mosaic-like pattern. The result communicates part-to-whole relationships with greater perceptual accuracy than pie charts because humans estimate counts of discrete units more reliably than they judge arc angles or areas.

표준 100칸 형식은 백분율을 즉시 읽을 수 있게 합니다 -- 색칠된 칸을 세면 정확한 비율이 나옵니다. 이러한 명시성은 청중이 통계 그래픽 읽기에 익숙하지 않을 수 있는 데이터 저널리즘과 인포그래픽에서 와플 차트의 핵심 강점 중 하나입니다. 이산적이고 셀 수 있는 단위는 정서적 연결도 만들어냅니다: 각 칸이 한 사람을 나타낼 때, 차트는 통계의 인간적 규모를 강력하게 전달합니다.

The standard 100-cell format makes percentages immediately readable -- counting colored cells gives the exact proportion. This explicitness is one of the waffle chart's key strengths in data journalism and infographics, where the audience may not be trained in reading statistical graphics. The discrete, countable units also create an emotional connection: when each cell represents a person, the chart powerfully conveys the human scale of statistics.

와플 차트는 비율이 너무 극단적이지 않은 소수의 범주(2~5개)를 보여줄 때 가장 효과적입니다. 매우 작은 비율(2~3% 미만)은 100칸 격자에서 단 하나의 칸이 되거나 완전히 사라져버려, 더 큰 격자나 다른 차트 유형이 필요합니다. 여러 개의 와플 차트를 나란히 배치하면 그룹이나 시기 간 비교가 가능해져, 스몰 멀티플의 한 형태로 기능합니다.

Waffle charts are most effective for showing a small number of categories (2-5) where the proportions are not too extreme. Very small proportions (below 2-3%) become a single cell or vanish entirely in a 100-cell grid, requiring either a larger grid or a different chart type. Multiple waffle charts placed side by side enable comparison across groups or time periods, functioning as a form of small multiples.

Waffle Chart — interactive example

언제 사용하나 / When to Use

미적 요소보다 지각적 정확성이 중요한 부분-전체 관계를 보여줄 때
Showing part-to-whole relationships where perceptual accuracy matters more than aesthetics
인포그래픽이나 보고서에서 일반 청중에게 백분율을 전달할 때
Communicating percentages to a general audience in infographics or reports
통계의 인간적 또는 단위 수준 의미를 강조할 때(예: "100명 중 42명")
Emphasizing the human or unit-level meaning of statistics (e.g., "42 out of 100 people")
나란히 배치하여 그룹 간 비율을 비교할 때
Comparing proportions across groups when placed side by side

이럴 땐 피하세요 / When NOT to Use

범주가 많은 경우(5개 초과) -- 격자가 혼란스러운 조각보가 됩니다; 누적 막대 차트를 사용하세요
When there are many categories (>5) -- the grid becomes a confusing patchwork; use a stacked bar chart
매우 작은 비율을 정확히 보여줘야 하는 경우 -- 100칸 격자의 한 칸은 1% 해상도만 제공합니다; 막대 차트를 사용하세요
When very small proportions need to be shown precisely -- a single cell in a 100-grid gives only 1% resolution; use a bar chart
시간에 따른 연속적인 변화를 보여줘야 하는 경우 -- 누적 영역 차트나 선 그래프를 사용하세요
When continuous changes over time need to be shown -- use a stacked area chart or line graph
총합이 의미가 없는 경우(예: 독립적인 양을 비교) -- 막대 차트를 사용하세요
When the total is not meaningful (e.g., comparing independent quantities) -- use a bar chart
비율이 아니라 정확한 값을 보여줘야 하는 경우 -- 값 레이블이 있는 막대 차트를 사용하세요
When you need to show exact values rather than proportions -- use a bar chart with value labels

구조 / Anatomy

격자: 일반적으로 10x10(총 100칸)이며, 때로는 10x5나 사용자 지정 크기인 칸의 규칙적인 배열입니다
Grid: A regular arrangement of cells, typically 10x10 (100 total), sometimes 10x5 or custom sizes
칸(사각형): 격자 안의 개별 단위로, 각각 전체의 동일한 부분을 나타냅니다
Cells (squares): Individual units in the grid, each representing an equal fraction of the whole
채우기 색상: 각 칸은 해당 범주에 따라 색이 지정됩니다
Fill color: Each cell is colored according to its category
범례: 백분율이나 개수 레이블과 함께 색상을 범주 이름에 매핑합니다
Legend: Maps colors to category names with percentage or count labels
격자 순서: 칸은 보통 왼쪽에서 오른쪽으로, 아래에서 위로 채워집니다(책을 거꾸로 읽는 것과 비슷합니다)
Grid ordering: Cells are typically filled left-to-right, bottom-to-top (like reading a book in reverse)
선택적 그룹화: 여러 그룹을 비교할 때 와플 격자 사이의 간격입니다
Optional grouping: A gap between waffle grids when comparing multiple groups

변형 / Variations

아이콘 와플(아이소타입 차트): 칸이 픽토그램 아이콘(사람, 나무, 동전)으로 대체되어 단위 은유를 강화합니다
Icon waffle (isotype chart): Cells are replaced with pictographic icons (people, trees, coins), strengthening the unit metaphor
누적 와플: 시간에 따른 그룹 비교를 위해 여러 격자를 수직으로 쌓습니다
Stacked waffle: Multiple grids stacked vertically for comparing groups over time
원형 와플: 칸이 원형 패턴으로 배열되어 와플 개념과 도넛 차트 형태를 혼합합니다
Circular waffle: Cells arranged in a circular pattern, blending the waffle concept with a donut chart shape
대규모 N 와플: 더 세밀한 해상도를 위해 1000개 이상의 칸을 사용하지만, 가독성은 떨어집니다
Large-N waffle: Uses 1000 or more cells for finer resolution, though readability decreases
애니메이션 와플: 칸이 순차적으로 채워지며 비율의 극적인 공개를 만듭니다
Animated waffle: Cells fill in sequentially, creating a dramatic reveal of proportions

코드 레퍼런스 / Code Reference

// Observable Plot - waffle chart via cell mark
const grid = [];
let idx = 0;
for (const {label, value} of data) {
  for (let i = 0; i < value; i++, idx++) {
    grid.push({
      x: idx % 10, y: Math.floor(idx / 10),
      label, value
    });
  }
}

Plot.plot({
  marks: [Plot.cell(grid, {x: "x", y: "y", fill: "label", inset: 1, tip: true})],
  x: {axis: null}, y: {axis: null},
  color: {legend: true}
})