Icicle Diagram

설명 / Description

아이시클 다이어그램(파티션 다이어그램이라고도 함)은 계층적 데이터를 가로로 배열된 중첩 직사각형들로 나타내며, 계층의 각 수준마다 한 행씩 배정됩니다. 루트는 맨 위에서 전체 너비를 차지하고, 그 자식들은 바로 아래 행에서 그 너비를 비례적으로 나누며, 이 과정이 재귀적으로 반복됩니다. 각 직사각형의 너비는 해당 노드의 값(또는 하위 노드들의 값의 합)을 인코딩하고, 세로 위치는 트리 안에서의 깊이를 인코딩합니다. 그 결과는 천장에 매달린 고드름처럼 보이는데, 이것이 이름의 유래입니다.

An icicle diagram (also called a partition diagram) displays hierarchical data as nested rectangles arranged in horizontal rows, one row per level of the hierarchy. The root occupies the full width at the top, its children divide that width proportionally in the row below, and so on recursively. Each rectangle's width encodes its value (or the sum of its descendants' values), and its vertical position encodes its depth in the tree. The result looks like icicles hanging from a ceiling -- hence the name.

아이시클 다이어그램은 선버스트 차트의 직사각형 버전이라 할 수 있습니다: 선버스트가 동심원과 호 각도를 사용하는 반면, 아이시클은 쌓인 행과 가로 너비를 사용합니다. 이 직사각형 레이아웃은 상당한 지각적 이점을 제공합니다 — 정렬된 직사각형의 너비를 비교하는 것이 방사형 레이아웃에서 호의 길이를 비교하는 것보다 훨씬 정확합니다. 이 때문에 아이시클 다이어그램은 정확한 크기 비교가 중요한 분석 작업에 더 적합합니다.

Icicle diagrams are the rectangular cousin of the sunburst chart: where a sunburst uses concentric rings and arc angles, an icicle uses stacked rows and horizontal widths. The rectangular layout offers a significant perceptual advantage: comparing widths of aligned rectangles is far more accurate than comparing arc lengths in a radial layout. This makes icicle diagrams better for analytical tasks where precise size comparison matters.

가장 널리 알려진 변형은 소프트웨어 성능 프로파일링에 쓰이는 "플레임 그래프(flame graph)"로, 여기서 계층은 콜 스택을 나타내고 각 직사각형의 너비는 해당 함수에 소요된 시간을 나타냅니다. 플레임 그래프는 위쪽으로 자라나는 뒤집힌 아이시클로, 성능 병목을 찾아내는 데 없어서는 안 될 소프트웨어 엔지니어링 도구가 되었습니다.

The most widely known variant is the "flame graph" used in software performance profiling, where the hierarchy represents a call stack and the width of each rectangle represents time spent in that function. Flame graphs are inverted icicles (growing upward), and they have become an indispensable tool in software engineering for identifying performance bottlenecks.

언제 사용하나 / When to Use

• 구조와 크기가 모두 중요한 계층적 데이터를 시각화할 때(예: 디스크 사용량, 조직 예산)
• Visualizing hierarchical data where both structure and size matter (e.g., disk usage, organizational budgets)
• 계층의 같은 수준에 있는 노드들의 상대적 크기를 비교할 때(너비 비교는 지각적으로 정확합니다)
• Comparing the relative size of nodes at the same level of the hierarchy (width comparison is perceptually accurate)
• 시간이 많이 소요되는 콜 스택을 파악하기 위한 소프트웨어 성능 프로파일링(플레임 그래프)
• Software performance profiling (flame graphs) to identify time-consuming call stacks
• 청중이 정확한 비교를 필요로 하는 다단계 부분-전체 분해를 탐색할 때
• Exploring multi-level part-to-whole decompositions where the audience needs precise comparison

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

• 계층이 매우 깊을 때(6단계 초과) -- 행이 너무 얇아져 읽기 어려워지므로, 접을 수 있는 덴드로그램이나 트리맵을 사용하세요
• When the hierarchy is very deep (>6 levels) -- rows become too thin to read; use a collapsible dendrogram or treemap
• 의미 있는 크기 변수가 없을 때 -- 구조에만 초점을 맞춘 덴드로그램을 사용하세요
• When there is no meaningful size variable -- use a dendrogram that focuses on structure alone
• 청중이 트리맵을 기대할 때 -- 아이시클 다이어그램은 덜 익숙하여 설명이 필요할 수 있습니다
• When the audience expects a treemap -- icicle diagrams are less familiar and may need explanation
• 공간이 제한적일 때 -- 깊은 계층에서는 세로 쌓기에 상당한 높이가 필요합니다
• When space is limited -- the vertical stacking requires significant height for deep hierarchies

구조 / Anatomy

• 루트 직사각형: 전체를 나타내며 맨 위에서 전체 너비에 걸쳐 있는 직사각형
• Root rectangle: The topmost rectangle spanning the full width, representing the total
• 수준별 행: 계층 수준마다 하나씩 있는 직사각형들의 가로 띠로, 자식 직사각형은 부모의 가로 범위 안에 중첩됩니다
• Level rows: Horizontal bands of rectangles, one per hierarchy level, with child rectangles nested within their parent's horizontal span
• 직사각형 너비: 노드의 값(또는 하위 노드 값의 합)에 비례합니다
• Rectangle width: Proportional to the node's value (or sum of descendant values)
• 직사각형 높이: 각 수준 내에서 균일하며, 계층 깊이를 나타냅니다
• Rectangle height: Uniform within each level, representing hierarchy depth
• 색상 인코딩: 최상위 카테고리 또는 별도의 지표에 따라 직사각형에 적용됩니다
• Color encoding: Applied to rectangles by top-level category or by a separate metric
• 레이블: 공간이 허락할 때 각 직사각형 안에 표시되는 텍스트로, 노드 이름과 선택적으로 값을 보여줍니다
• Labels: Text inside each rectangle when space permits, showing the node name and optionally the value
• 간격: 인접한 직사각형 사이에 형제 노드를 구분하기 위한 작은 여백
• Gaps: Small padding between adjacent rectangles to distinguish siblings

변형 / Variations

• 플레임 그래프 (뒤집힌 아이시클): 아래가 아니라 위로 자라며, CPU 프로파일링에서 콜 스택을 시각화하는 데 널리 사용됩니다
• Flame graph (inverted icicle): Grows upward instead of downward, widely used in CPU profiling to visualize call stacks
• 확대 가능한 아이시클: 직사각형을 클릭하면 확대되어 해당 노드가 새로운 루트가 되어 상세 탐색이 가능합니다
• Zoomable icicle: Clicking a rectangle zooms in, making it the new root for detailed exploration
• 가로 아이시클: 수준이 위아래가 아니라 좌우로 쌓이며, 레이블이 길 때 유용합니다
• Horizontal icicle: Levels stack left-to-right instead of top-to-bottom, useful when labels are long
• 아이시클 + 덴드로그램: 한쪽에 덴드로그램이 트리 구조를 보여주고, 아이시클은 값을 인코딩합니다
• Icicle + dendrogram: A dendrogram on one side shows the tree structure while the icicle encodes values
• 애니메이션 아이시클: 계층 수준을 드릴다운하거나 빠져나올 때 부드러운 전환 효과
• Animated icicle: Smooth transitions when drilling in and out of hierarchy levels

코드 레퍼런스 / Code Reference

// D3 icicle diagram using d3.partition
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([width, height]).padding(1);
partition(root);

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

svg.selectAll("rect")
  .data(root.descendants()).join("rect")
  .attr("x", d => d.x0).attr("y", d => d.y0)
  .attr("width", d => d.x1 - d.x0)
  .attr("height", d => d.y1 - d.y0)
  .attr("fill", d => d3.schemeTableau10[d.depth % 10]);

svg.selectAll("text")
  .data(root.descendants().filter(d => d.x1 - d.x0 > 40))
  .join("text")
  .attr("x", d => d.x0 + 4).attr("y", d => d.y0 + 14)
  .text(d => d.data.name).attr("font-size", 10);