Donut Chart

설명 / Description

도넛 차트는 원의 중심을 제거하여 고리 모양의 호 구간으로 만든 파이 차트의 변형입니다. 표준 파이 차트와 마찬가지로, 각 구간의 각도 폭과 호의 길이는 전체에서 해당 범주가 차지하는 비율을 나타냅니다. 비어 있는 중앙 공간은 종종 요약 지표(총합, 핵심 구간의 비율, 레이블)를 표시하는 데 쓰여, 이 차트를 구성 비율 표시와 큰 숫자 지표 역할을 동시에 하는 도구로 만듭니다.

The donut chart is a variant of the pie chart in which the center of the circle is removed, creating a ring of arc segments. Each segment's angular sweep and arc length represent a category's proportion of the whole, just as in a standard pie chart. The hollow center is often used to display a summary metric (total count, percentage of a key segment, or a label), making the chart both a compositional display and a big-number indicator.

지각적으로 도넛 차트는 파이(쐐기의 면적)에서 고리를 따라가는 호의 길이로 강조점을 옮깁니다. 일부 연구자들은 이것이 표준 파이 차트보다 비교를 다소 어렵게 만든다고 주장하는 반면, 다른 이들은 일반적으로 사용되는 2~5개 범주에서는 그 차이가 무시할 만하다고 봅니다. 실제로는 미적인 이유로 도넛 차트가 자주 선호됩니다: 중앙의 구멍이 시각적 혼잡을 줄이고 핵심 정보를 위한 자연스러운 초점을 만들어줍니다.

Perceptually, the donut chart shifts emphasis from the area of wedges (pie) to the length of arcs along the ring. Some researchers argue this makes comparison slightly harder than in a standard pie chart, while others suggest the difference is negligible for the typical use case of 2-5 categories. In practice, donut charts are often preferred for aesthetic reasons: the center hole reduces visual clutter and creates a natural focal point for key information.

도넛 차트는 대시보드와 데이터 제품에서 매우 흔하게 쓰이는데, 이는 비율 표시와 KPI 위젯이라는 두 가지 역할을 동시에 수행하기 때문입니다. 범주 수가 적고, 레이블이 명확하며, 중앙에 의미 있는 지표를 배치하는 등 신중하게 사용하면 효과적으로 소통할 수 있습니다. 반면 얇은 조각이 너무 많거나 중첩된 링으로 쌓아 올리면 읽기 어려워집니다.

Donut charts are extremely common in dashboards and data products because they serve double duty as both a proportion display and a KPI widget. When used thoughtfully -- few categories, clear labeling, and a meaningful center metric -- they communicate effectively. When overloaded with many thin slices or stacked as nested rings, they become difficult to read.

언제 사용하나 / When to Use

• 2~5개 범주의 부분-전체 비율 표시
• Displaying part-to-whole proportions with 2-5 categories
• 핵심 숫자와 그 구성 맥락을 함께 보여주고 싶은 대시보드 KPI 위젯
• Dashboard KPI widgets where you want to show both a key number and its compositional context
• 차트 중앙에 요약 통계나 아이콘을 배치해야 할 때
• When you need to place a summary statistic or icon in the center of the chart
• 꽉 찬 파이 차트보다 더 가볍고 현대적인 스타일이 필요할 때
• When visual style calls for a lighter, more modern look than a solid pie chart

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

• 범주 간 정밀한 비교가 중요할 때 -- 막대 차트를 사용하세요
• When precise comparison between categories matters -- use a bar chart
• 범주가 6개를 넘을 때 -- 얇은 호는 읽기 어려워집니다
• When there are more than 6 categories -- thin arcs become unreadable
• 데이터가 의미 있는 전체의 부분을 나타내지 않을 때
• When the data does not represent parts of a meaningful whole
• 계층적 데이터를 위한 중첩 도넛 링 -- 여러 계층을 더 명확하게 다루는 선버스트나 트리맵을 대신 사용하세요
• Nested donut rings for hierarchical data -- use a sunburst or treemap instead, which handle multiple levels more clearly
• 여러 그룹 간 비율을 비교할 때 -- 누적 막대 차트를 사용하세요
• Comparing proportions across multiple groups -- use stacked bar charts

구조 / Anatomy

• 호(구간): 각도 폭이 각 범주의 비율을 인코딩하는 고리 모양 구간.
• Arcs (segments): Ring-shaped segments whose angular extent encodes each category's proportion.
• 내부 반지름: 중앙 구멍의 반지름. 균형 잡힌 모양을 위해 보통 외부 반지름의 40~70%.
• Inner radius: The radius of the center hole. Typically 40-70% of the outer radius for a balanced appearance.
• 외부 반지름: 고리의 바깥쪽 가장자리.
• Outer radius: The outer edge of the ring.
• 중앙 영역: 비어 있는 공간으로, 종종 총합, 백분율, 아이콘, 레이블에 사용됩니다.
• Center area: The hollow space, often used for a total, percentage, icon, or label.
• 색상: 각 호 구간은 정성적 팔레트에서 뚜렷이 구분되는 색상을 가집니다.
• Colors: Each arc segment has a distinct color from a qualitative palette.
• 레이블: 직접 레이블(범주명 + 백분율)을 각 호 근처에 배치하거나 인출선으로 연결합니다.
• Labels: Direct labels (category name + percentage) placed near each arc or connected via leader lines.
• 범례: 직접 레이블링의 대안으로, 차트 옆이나 아래에 배치합니다.
• Legend: An alternative to direct labeling, placed beside or below the chart.

변형 / Variations

• 반원 도넛(게이지 차트): 목표 대비 진행 상황을 보여주는 반원형 도넛으로, KPI와 대시보드에 자주 사용됩니다.
• Half donut (gauge chart): A semicircular donut showing a single value's progress toward a goal, often used for KPIs and dashboards.
• 중첩 도넛: 각 링이 서로 다른 범주 분류를 나타내는 동심원 링. 단순화된 선버스트처럼 작동합니다.
• Nested donut: Concentric rings where each ring represents a different categorical breakdown. Functions like a simplified sunburst.
• 다중 도넛(스몰 멀티플): 그룹 간 비교를 위해 여러 도넛 차트를 나란히 배치하며, 각각 동일한 범주 집합을 보여줍니다.
• Multi-donut (small multiples): Several donut charts placed side by side for comparison across groups, each showing the same set of categories.
• 애니메이션 도넛: 호가 0에서 시작해 전환 효과로 자라나며, 주의를 끌고 전체가 조립되는 과정을 보여줍니다.
• Animated donut: Arcs grow from zero with a transition, drawing attention and making the assembly of the whole visible.
• 진행률 도넛: 100%를 향한 완료율을 하나의 호로 보여주고, 나머지 부분은 흐린 색으로 표시합니다. 피트니스 앱과 대시보드에서 매우 흔합니다.
• Progress donut: A single arc showing completion toward 100%, with the remaining portion in a muted color. Very common in fitness apps and dashboards.

코드 레퍼런스 / Code Reference

// D3 - donut chart with center label
const pie = d3.pie().value(d => d.value).sort(null)(data);
const arc = d3.arc().innerRadius(70).outerRadius(120);

const svg = d3.create("svg").attr("viewBox", "-150 -150 300 300");
svg.selectAll("path")
  .data(pie)
  .join("path")
  .attr("d", arc)
  .attr("fill", (d, i) => d3.schemeTableau10[i])
  .append("title")
  .text(d => `${d.data.label}: ${d.data.value}`);

svg.append("text")
  .attr("text-anchor", "middle")
  .attr("dy", "0.35em")
  .attr("font-size", "24px")
  .text(d3.sum(data, d => d.value));