Unit Chart (ISOTYPE)

설명 / Description

유닛 차트는 각 개별 단위(한 사람, 1달러, 하나의 사례)를 개별 시각 마크 -- 보통 원, 사각형, 아이콘 -- 에 매핑하여 데이터를 표현합니다. 막대 길이나 각도 같은 추상적인 채널로 크기를 인코딩하는 대신, 유닛 차트는 일대일 대응을 지각하는 인간의 능력을 활용합니다: 아이콘 10개는 10개의 단위를 의미합니다. 이러한 직접성 덕분에 유닛 차트는 데이터 문해력이 낮은 사람들을 포함한 일반 대중에게도 매우 접근하기 쉽습니다.

A unit chart represents data by mapping each discrete unit (a person, a dollar, a case) to an individual visual mark -- typically a circle, square, or icon. Instead of encoding magnitude through abstract channels like bar length or angle, the unit chart leverages the human ability to perceive one-to-one correspondence: ten icons mean ten units. This directness makes unit charts exceptionally accessible to general audiences, including those with low data literacy.

이 접근법은 오토 노이라트(Otto Neurath)와 게르트 아른츠(Gerd Arntz)가 1930년대에 개발한 ISOTYPE(International System of Typographic Picture Education) 기법에 뿌리를 두고 있습니다. 이들의 그림 통계는 표준화된 아이콘의 행을 사용하여 사회·경제 데이터를 대중에게 전달했습니다. 현대의 유닛 차트는 격자, 배열, 인터랙티브 하이라이팅으로 이 원리를 확장하지만, 핵심 아이디어는 그대로 남아 있습니다: 데이터를 셀 수 있는 사물로 보여주는 것입니다.

The approach has roots in the ISOTYPE (International System of Typographic Picture Education) method developed by Otto Neurath and Gerd Arntz in the 1930s. Their pictorial statistics used rows of standardized icons to communicate social and economic data to the public. Modern unit charts extend this principle with grids, arrays, and interactive highlighting, but the core idea remains: show the data as countable things.

유닛 차트는 전체 개수가 적당한 수준(수백 개 미만)이고, 메시지가 "10명 중 3명이..." 또는 "예산의 60%가 ...에 사용됩니다"와 같은 비율을 다룰 때 가장 효과적입니다. 개별 아이콘이 카테고리별로 색이 입혀지면, 이 차트는 구성 표시 도구이자 비교 도구로서 이중의 역할을 합니다. 공간적 배열 -- 격자, 행, 또는 클러스터 -- 은 데이터의 서로 다른 측면을 강조할 수 있습니다.

Unit charts are most effective when the total count is moderate (under a few hundred) and when the message involves proportions, such as "3 out of 10 people..." or "60% of the budget goes to...". When individual icons are colored by category, the chart doubles as a composition display and a comparison tool. The spatial arrangement -- grid, row, or clustered -- can emphasize different aspects of the data.

Unit Chart — interactive example

언제 사용하나 / When to Use

폭넓고 비전문적인 청중에게 개수와 비율을 전달할 때
Communicating counts and proportions to broad, non-technical audiences
각 단위가 중요한 "Y 중 X" 관계를 보여줄 때(예: 위험 커뮤니케이션)
Showing "X out of Y" relationships where each unit matters (e.g., risk communication)
추상적인 통계를 구체적이고 사람 규모로 느껴지게 만들 때
Making abstract statistics feel concrete and human-scale
전체가 작을 때(약 200 단위 미만)의 부분-전체 비교
Part-to-whole comparisons with small totals (fewer than ~200 units)
인포그래픽과 편집형 데이터 시각화
Infographics and editorial data visualization

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

전체 개수가 매우 클 때(수천, 수백만) -- 아이콘을 셀 수 없게 되므로 막대 차트나 영역 그래프를 사용하세요
When totals are very large (thousands or millions) -- icons become uncountable; use a bar chart or area graph
정확한 값 비교가 필요할 때 -- 막대 차트 같은 위치 기반 인코딩이 더 정확합니다
When precise comparison of values is needed -- position-based encodings like bar charts are more accurate
연속적인 데이터나 분포의 경우 -- 히스토그램이나 바이올린 플롯을 사용하세요
For continuous data or distributions -- use a histogram or violin plot
청중이 분석적으로 정교하고 접근성보다 읽는 속도가 더 중요할 때
When the audience is analytically sophisticated and speed of reading matters more than accessibility

구조 / Anatomy

단위 마크: 개별 아이콘, 원, 또는 사각형으로, 각각 고정된 수량을 나타냅니다(예: 아이콘 1개 = 100명).
Unit marks: Individual icons, circles, or squares, each representing a fixed quantity (e.g., 1 icon = 100 people).
격자 레이아웃: 행과 열로 배치된 단위들. 전체 개수가 배열의 크기를 결정합니다.
Grid layout: Units arranged in rows and columns; the total count determines the array size.
색상 인코딩: 전체 안의 구성을 보여주기 위해 카테고리별로 색이 입혀진 단위들.
Color encoding: Units colored by category to show composition within the total.
범례 키: 각 아이콘이 무엇을 나타내고 각 색상이 무엇을 의미하는지 표시합니다.
Legend key: Indicates what each icon represents and what each color means.
그룹화: 단위는 카테고리별로 별도의 행이나 클러스터로 그룹화될 수 있습니다.
Grouping: Units may be grouped by category into separate rows or clusters.
주석: 특정 비율을 강조하는 레이블이나 콜아웃("10개 중 3개").
Annotation: Labels or callouts highlighting specific proportions ("3 out of 10").

변형 / Variations

와플 차트: 각 셀이 1%를 나타내는 10x10 사각형 격자로, 부분-전체 표시를 형성합니다.
Waffle chart: A 10x10 grid of squares where each cell represents 1%, forming a part-to-whole display.
픽토그램 차트(ISOTYPE): 추상적인 형태 대신 도메인에 특화된 아이콘(사람, 자동차, 집)을 사용합니다.
Pictogram chart (ISOTYPE): Uses domain-specific icons (people, cars, houses) instead of abstract shapes.
아이콘 배열: "X명 중 1명" 확률을 보여주기 위해 건강 위험 커뮤니케이션에서 사용되는 사람 모양 아이콘의 격자.
Icon array: A grid of person-shaped icons used in health risk communication to show "1 in X" probabilities.
그룹형 유닛 차트: 카테고리별로 클러스터링되고 그룹 사이에 공간적 분리가 있는 단위.
Grouped unit chart: Units clustered by category with spatial separation between groups.
애니메이션 유닛 차트: 시간에 따른 변화를 보여주거나 과정을 시뮬레이션하기 위해 단위가 그룹화나 색상 상태 사이를 전환합니다.
Animated unit chart: Units transition between groupings or color states to show change over time or simulate processes.

코드 레퍼런스 / Code Reference

// Observable Plot - waffle-style unit chart
// Each cell represents one unit, colored by category
const units = data.flatMap(d =>
  Array.from({length: d.count}, (_, i) => ({category: d.category, i}))
);

Plot.plot({
  marks: [
    Plot.cell(units, {
      x: (d, i) => i % 10,
      y: (d, i) => Math.floor(i / 10),
      fill: "category",
      rx: 2,
      tip: true
    })
  ],
  x: { axis: null },
  y: { axis: null },
  color: { legend: true }
})