Sunburst Diagram

설명 / Description

선버스트 다이어그램은 계층 데이터를 일련의 동심원 링으로 표시합니다. 가장 안쪽 링은 계층의 루트를 나타내고, 바깥으로 이어지는 각 링은 한 단계씩 더 깊은 수준을 나타냅니다. 링 안의 각 호는 노드를 나타내며, 그 각도 폭은 값(또는 자식 값들의 합)에 비례합니다. 부모-자식 관계는 공간적으로 표현됩니다: 자식 호는 부모 호의 각도 범위 안에 배치되어 명확한 시각적 중첩을 만들어냅니다.

A sunburst diagram displays hierarchical data as a series of concentric rings. The innermost ring represents the root of the hierarchy, and each successive ring outward represents one deeper level. Each arc within a ring represents a node, and its angular width is proportional to its value (or the sum of its children's values). The parent-child relationship is shown spatially: a child arc is positioned within the angular span of its parent arc, creating a clear visual nesting.

선버스트 형식은 계층 내의 부분-전체 관계를 보여주는 데 탁월합니다. 어느 수준에서든 호의 합은 전체 원(또는 부모 호)과 같아, 하위 범주가 더 큰 범주를 어떻게 구성하는지 쉽게 볼 수 있습니다. 방사형 레이아웃은 컴팩트하면서도 미적으로 독특하여, 시각적 임팩트가 중요한 프레젠테이션과 대시보드에 좋은 선택이 되곤 합니다.

The sunburst format excels at showing part-to-whole relationships within a hierarchy. At any level, the arcs sum to the full circle (or to their parent's arc), making it easy to see how sub-categories compose a larger category. The radial layout is compact and aesthetically distinctive, often making it a good choice for presentations and dashboards where visual impact matters.

선버스트는 깊이 2~4단계이고 분기가 적당한 계층에서 가장 잘 작동합니다. 매우 깊은 계층은 읽기 어려운 얇은 바깥 링을 만들고, 매우 넓은 계층(형제가 많은 경우)은 구별하기 어려운 좁은 호를 만듭니다. 클릭하여 줌(하위 트리를 새 루트로 만들어 드릴다운)과 같은 인터랙티브 기능은 사용 가능한 범위를 크게 확장하여, 정적인 뷰에서는 읽을 수 없었던 큰 계층을 탐색할 수 있게 합니다.

Sunbursts work best with hierarchies of 2-4 levels deep and moderate branching. Very deep hierarchies produce thin outer rings that are hard to read, and very wide hierarchies (many siblings) create narrow arcs that are difficult to distinguish. Interactive features like click-to-zoom (drilling into a sub-tree by making it the new root) dramatically expand the usable range, allowing exploration of large hierarchies that would be unreadable in a static view.

언제 사용하나 / When to Use

• 부분-전체 관계를 가진 계층 데이터를 표시할 때(예: 파일 시스템 사용량, 조직 예산, 분류 체계 분석)
• Displaying hierarchical data with part-to-whole relationships (e.g., file system usage, organizational budgets, taxonomy breakdowns)
• 다단계 범주 구성을 인터랙티브하게 탐색할 때(클릭하여 하위 범주로 드릴다운)
• Exploring multi-level categorical compositions interactively (click to drill into a sub-category)
• 2~4단계에 걸쳐 하위 범주가 부모 범주 안에 어떻게 중첩되는지 보여줄 때
• Showing how sub-categories nest within parent categories across 2-4 levels
• 프레젠테이션을 위해 시각적으로 매력적인 트리 구조 표현을 만들 때
• Creating visually engaging representations of tree structures for presentations

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

• 호 사이의 정확한 크기 비교가 필요할 때 -- 호의 길이와 면적은 정확하게 비교하기 어려우므로, 대신 트리맵이나 막대 차트를 사용하세요
• When precise size comparison between arcs is needed -- arc length and area are hard to compare accurately; use a treemap or bar chart instead
• 계층이 매우 깊을 때(5단계 초과) -- 바깥 링이 읽을 수 없을 정도로 얇아지므로 트리 다이어그램이나 들여쓰기 목록을 사용하세요
• When the hierarchy is very deep (>5 levels) -- outer rings become unreadably thin; use a tree diagram or indented list
• 의미 있는 계층이 없을 때 -- 평평한 데이터를 억지로 링에 넣지 말고 파이 차트나 막대 차트를 사용하세요
• When there is no meaningful hierarchy -- don't force flat data into rings; use a pie chart or bar chart
• 구조보다 정확한 값이 더 중요할 때 -- 표나 누적 막대 차트를 사용하세요
• When exact values matter more than structure -- use a table or stacked bar chart
• 계층이 매우 넓을 때(노드당 형제가 많음) -- 좁은 호가 구별되지 않으므로 넓은 계층을 더 잘 처리하는 트리맵을 사용하세요
• When the hierarchy is very wide (many siblings per node) -- narrow arcs become indistinguishable; use a treemap which handles wide hierarchies better

구조 / Anatomy

• 중심 원: 루트 노드를 나타냅니다(때때로 비워두거나 레이블로 사용됨)
• Center circle: Represents the root node (sometimes left empty or used as a label)
• 링: 계층의 한 수준을 각각 나타내는 동심 밴드
• Rings: Concentric bands, each representing one level of the hierarchy
• 호(세그먼트): 각 링 안의 개별 조각; 각도 폭은 노드 값에 비례합니다
• Arcs (segments): Individual pieces within each ring; angular width is proportional to the node's value
• 색상 인코딩: 호에 적용되며, 보통 최상위 범주별로 지정됩니다(그래서 모든 하위 항목이 같은 색조 계열을 공유합니다)
• Color encoding: Applied to arcs, typically by top-level category (so all descendants share the same hue family)
• 방사형 깊이: 중심에서의 거리가 계층의 깊이를 인코딩합니다
• Radial depth: Distance from center encodes depth in the hierarchy
• 레이블: 공간이 허락하면 호 안에 배치되는 텍스트, 또는 툴팁에 표시됩니다
• Labels: Text placed inside arcs when space permits, or shown in tooltips

변형 / Variations

• 줌 가능한 선버스트: 호를 클릭하면 확대되어 해당 노드가 새로운 중심이 되고 자식이 링을 채웁니다; 큰 계층에 필수적입니다
• Zoomable sunburst: Clicking an arc zooms in, making that node the new center and its children fill the rings; essential for large hierarchies
• 아이시클 다이어그램: 직사각형(비방사형) 등가물; 각 수준이 호의 링 대신 직사각형의 수평 행으로 표현되며, 정확한 비교가 더 쉽습니다
• Icicle diagram: The rectangular (non-radial) equivalent; each level is a horizontal row of rectangles instead of a ring of arcs; easier for precise comparison
• 브레드크럼 트레일이 있는 선버스트: 브레드크럼 바가 루트에서 호버된 노드까지의 경로를 보여주어 탐색을 돕습니다
• Sunburst with breadcrumb trail: A breadcrumb bar shows the path from root to the hovered node, aiding navigation
• 부분 선버스트: 원의 일부만 사용하여(예: 180도) 레이블이나 다른 요소를 위한 공간을 남겨둡니다
• Partial sunburst: Only a portion of the circle is used (e.g., 180 degrees), leaving space for labels or other elements
• 애니메이션 선버스트: 부드러운 호 모핑으로 서로 다른 계층 데이터셋 사이를 전환합니다
• Animated sunburst: Transitions between different hierarchical datasets with smooth arc morphing

코드 레퍼런스 / Code Reference

// D3 sunburst diagram
import * as d3 from "d3";

const root = d3.hierarchy(data).sum(d => d.value).sort((a, b) => b.value - a.value);
const partition = d3.partition().size([2 * Math.PI, radius]);
partition(root);

const arc = d3.arc()
  .startAngle(d => d.x0).endAngle(d => d.x1)
  .innerRadius(d => d.y0).outerRadius(d => d.y1);

const svg = d3.select("#chart").append("svg")
  .attr("viewBox", [-width/2, -height/2, width, height]);

svg.selectAll("path")
  .data(root.descendants().filter(d => d.depth))
  .join("path")
  .attr("d", arc)
  .attr("fill", d => { while (d.depth > 1) d = d.parent; return d3.schemeTableau10[d.data.name.length % 10]; })
  .attr("fill-opacity", d => 1 - d.depth * 0.15)
  .attr("stroke", "white").attr("stroke-width", 0.5)
  .append("title").text(d => `${d.ancestors().map(d => d.data.name).reverse().join("/")}\n${d.value}`);