설명 / Description
점 행렬 차트는 전체 모집단을 균일한 크기의 점들로 이루어진 격자로 표현하며, 각 점은 하나의 단위(또는 정해진 수의 단위)를 나타냅니다. 점은 색상이나 형태로 어느 그룹이나 범주에 속하는지 표시하여, 부분-전체 관계를 보여주는 데 효과적인 차트가 됩니다. 대표적인 예로 100개의 점으로 이루어진 10x10 격자가 있으며, 모집단 중 서로 다른 세그먼트에 속하는 비율을 보여줍니다.
A dot matrix chart represents a total population as a grid of uniformly sized dots, where each dot stands for one unit (or a fixed number of units). Dots are colored or shaped to indicate which group or category they belong to, making the chart effective for showing part-to-whole relationships. A classic example is a 10x10 grid of 100 dots showing what percentage of a population falls into different segments.
점 행렬의 힘은 구체성에 있습니다: 각 점은 셀 수 있는 개별 개체이므로 비율이 추상적이지 않고 손에 잡히는 느낌을 줍니다. 위험 커뮤니케이션 연구에 따르면 (점 행렬과 가까운 사촌 격인) 아이콘 배열은 파이 차트나 단순 백분율보다 사람들이 확률을 더 정확하게 이해하도록 돕는데, 이는 전체 속의 개별 단위 감각을 보존하기 때문입니다.
The power of the dot matrix lies in its concreteness: each dot is a countable, discrete entity, which makes proportions feel tangible rather than abstract. Research in risk communication has shown that icon arrays (a close relative) help people understand probabilities more accurately than pie charts or plain percentages, because they preserve the sense of individual units within a whole.
점 행렬은 엄격한 직사각형 격자로 배열할 수도 있고, 더 자유로운 레이아웃으로 배열할 수도 있습니다. 엄격한 격자는 세고 비교하기 쉬운 반면, 자유형 배열은 예술적이거나 서사적인 효과를 위해 사용될 수 있습니다. 색상이 주요 인코딩 채널이므로, 시각적 혼잡을 피하려면 소수의 그룹(2-5개)일 때 가장 잘 작동합니다.
Dot matrices can be arranged in a strict rectangular grid or in a more free-form layout. The strict grid is easier to count and compare, while free-form arrangements can be used for artistic or narrative effect. Color is the primary encoding channel, so the chart works best with a small number of groups (2-5) to avoid visual clutter.
언제 사용하나 / When to Use
- 전체 중 각 범주가 차지하는 비율 표시(예: 사용자 100명 중 42명)
- Showing what proportion of a whole belongs to each category (e.g., 42 out of 100 users)
- 위험이나 확률을 구체적이고 셀 수 있는 방식으로 전달
- Communicating risk or probability in a concrete, countable way
- 두 개 이상의 부분-전체 구성을 나란히 비교
- Comparing two or more part-to-whole breakdowns side by side
- 일반 대중을 대상으로 한 인포그래픽과 발표
- Infographics and presentations aimed at general audiences
이럴 땐 피하세요 / When NOT to Use
- 그룹이 많을 때(5개 초과) -- 색상을 구별하기 어려워집니다
- When there are many groups (>5) -- colors become hard to distinguish
- 소수점까지 정확한 백분율이 필요할 때 -- 표나 주석이 달린 막대 차트를 사용하세요
- When exact percentages to decimal precision are required -- use a table or annotated bar chart
- 시계열 데이터의 경우 -- 선 그래프나 영역 그래프를 사용하세요
- For time series data -- use a line graph or area graph
- 전체 개수가 매우 많을 때(점 500개 초과) -- 점이 너무 작아져 구별할 수 없습니다
- When the total count is very large (>500 dots) -- dots become too small to distinguish
구조 / Anatomy
- 점: 격자에 배열된 균일한 크기의 원. 각 점은 하나의 단위를 나타냅니다.
- Dots: Uniformly sized circles arranged in a grid. Each dot represents one unit.
- 격자 레이아웃: 직사각형 배열(예: 100개 단위는 10x10, 50개 단위는 10x5).
- Grid layout: A rectangular arrangement (e.g., 10x10 for 100 units, 10x5 for 50 units).
- 색상 인코딩: 각 점은 소속 범주에 따라 색이 지정됩니다.
- Color encoding: Each dot is colored by its category membership.
- 범례: 색상을 범주명에 매핑하고, 선택적으로 개수나 백분율을 표시합니다.
- Legend: Maps colors to category names and optionally shows counts or percentages.
- 격자선 또는 간격: 세기 쉽도록 행이나 구역 사이에 두는 선택적 간격.
- Grid lines or gaps: Optional spacing between rows or sections to aid counting.
변형 / Variations
- 와플 차트: 원형 점을 격자 안의 사각 셀로 대체하여 더 깔끔한 타일 형태를 줍니다.
- Waffle chart: Replaces circular dots with square cells in a grid, giving a cleaner, tile-like appearance.
- 아이콘 배열: 추상적인 점 대신 의미 있는 아이콘(사람, 집 등)을 사용합니다.
- Icon array: Uses meaningful icons (people, houses, etc.) instead of abstract dots.
- 애니메이션 점 행렬: 시간이나 시나리오에 따라 구성이 어떻게 변하는지 보여주기 위해 점이 배열 사이를 전환합니다.
- Animated dot matrix: Dots transition between arrangements to show how the composition changes over time or scenarios.
- 그룹화 점 행렬: 서로 다른 그룹을 위한 별도의 격자를 나란히 배치하여 비교합니다.
- Grouped dot matrix: Separate grids for different groups placed side by side for comparison.
코드 레퍼런스 / Code Reference
// Observable Plot - 10x10 dot matrix
Plot.plot({
marks: [
Plot.dot(
Array.from({ length: 100 }, (_, i) => ({
x: i % 10,
y: Math.floor(i / 10),
group: i < 40 ? "A" : i < 75 ? "B" : "C"
})),
{ x: "x", y: "y", fill: "group", r: 8, tip: true }
)
],
x: { axis: null },
y: { axis: null },
color: { legend: true }
})