Circle Packing

설명 / Description

원 패킹은 트리의 각 노드를 원으로 표현하는 인클로저 기반의 계층적 시각화입니다. 리프 노드는 정량적 값에 비례하는 크기로 그려지고, 부모 노드는 자식들을 포함하는 더 큰 원으로 그려집니다. 가장 바깥쪽 원은 계층 구조의 루트를 나타내며, 연이은 중첩 단계는 공간적 포함 관계를 통해 트리 구조를 드러냅니다.

Circle packing is an enclosure-based hierarchical visualization where each node in a tree is represented by a circle. Leaf nodes are sized proportionally to their quantitative value, and parent nodes are drawn as larger circles that contain their children. The outermost circle represents the root of the hierarchy, and successive levels of nesting reveal the tree structure through spatial containment.

사용 가능한 모든 공간을 사각형으로 채우는 트리맵과 달리, 원 패킹은 패킹된 원들 사이 간격에서 본질적으로 공간을 낭비합니다. 이는 사실 가독성 측면에서는 장점입니다: 원 사이의 여백이 개별 요소와 중첩 구조를 지각하기 쉽게 만들어줍니다. 그 대가로 원 패킹은 트리맵보다 공간 효율이 낮으므로, 밀도보다 명료함이 중요한 중간 규모의 계층 구조에 더 적합합니다.

Unlike treemaps, which fill all available space with rectangles, circle packing inherently wastes space in the gaps between packed circles. This is actually a feature for readability: the white space between circles makes it easier to perceive individual elements and the nesting structure. The trade-off is that circle packing is less space-efficient than treemaps, so it is better suited for moderate-sized hierarchies where clarity is valued over density.

원 패킹은 미학적으로 만족스럽고 유기적인 레이아웃을 만들어내며, 많은 청중이 트리맵의 날카로운 사각형보다 더 친근하게 느낍니다. 이 알고리즘은 원을 서로 인접하게 배치하면서 감싸는 원의 반지름을 최소화하는 방식으로 작동합니다. 색상은 일반적으로 범주(노드가 속한 계층의 가지)를 인코딩하는 데 사용되고, 크기는 정량적 값을 인코딩합니다.

Circle packing produces an aesthetically pleasing, organic layout that many audiences find more approachable than the sharp rectangles of a treemap. The algorithm works by iteratively placing circles adjacent to each other while minimizing the enclosing circle's radius. Color is typically used to encode category (the branch of the hierarchy a node belongs to), while size encodes the quantitative value.

언제 사용하나 / When to Use

• 트리 구조와 리프 값이 모두 중요한 계층적 데이터 시각화
• Visualizing hierarchical data where both the tree structure and leaf values matter
• 트리맵의 밀도보다 원의 유기적이고 친근한 미학을 선호할 때
• When the organic, approachable aesthetic of circles is preferred over the density of a treemap
• 다층 계층 구조 내 부분-전체 관계 표시
• Showing part-to-whole relationships within a multi-level hierarchy
• 드릴다운을 활용한 인터랙티브 탐색: 부모를 클릭하면 자식으로 확대
• Interactive exploration with drill-down: clicking a parent zooms into its children

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

• 공간 효율이 중요할 때 -- 트리맵은 공간의 100%를 채우지만, 원 패킹은 간격에서 약 9%를 낭비합니다
• When space efficiency is critical -- treemaps fill 100% of the space; circle packing wastes ~9% in gaps
• 정확한 크기 비교가 중요할 때 -- 원은 정렬된 사각형보다 비교하기 어렵습니다
• When precise size comparison matters -- circles are harder to compare than aligned rectangles
• 매우 깊은 계층 구조(4단계 초과)의 경우 -- 중첩을 읽기 어려워집니다
• For very deep hierarchies (>4 levels) -- nesting becomes difficult to read
• 평면적(비계층적) 데이터의 경우 -- 대신 버블 차트를 사용하세요
• For flat (non-hierarchical) data -- use a bubble chart instead

구조 / Anatomy

• 루트 원: 전체 계층 구조를 감싸는 가장 바깥쪽 원.
• Root circle: The outermost circle encompassing the entire hierarchy.
• 가지 원: 부모 노드를 나타내는 중간 단계 원으로, 자식을 포함합니다.
• Branch circles: Intermediate circles representing parent nodes, containing their children.
• 리프 원: 정량적 값에 따라 크기가 정해지는 가장 안쪽 원.
• Leaf circles: The innermost circles sized by quantitative value.
• 중첩: 공간적 포함 관계가 부모-자식 관계를 인코딩합니다.
• Nesting: Spatial containment encodes parent-child relationships.
• 색상 인코딩: 채우기 색이 범주나 가지 소속을 나타냅니다.
• Color encoding: Fill color indicates category or branch membership.
• 레이블: 텍스트를 담을 만큼 충분히 큰 리프 노드 원 안에 배치된 텍스트.
• Labels: Text placed inside circles for leaf nodes large enough to accommodate text.
• 여백: 원 사이의 간격으로, 시각적 구분과 계층 단계 지각을 돕습니다.
• White space: Gaps between circles that aid visual separation and perception of hierarchy levels.

변형 / Variations

• 평면 원 패킹: 중첩 없음 -- 모든 원이 같은 단계에서 하나의 컨테이너에 패킹됩니다. 사실상 최적 패킹을 적용한 버블 차트입니다.
• Flat circle packing: No nesting -- all circles are at the same level, packed into a container. Effectively a bubble chart with optimal packing.
• 확대 가능 원 패킹: 부모 원을 클릭하면 부드럽게 확대되어 자식을 더 큰 스케일로 보여줍니다. 마이크 보스톡(Mike Bostock)의 D3 예제로 널리 알려졌습니다.
• Zoomable circle packing: Clicking a parent circle smoothly zooms into it, revealing children at a larger scale. Popularized by Mike Bostock's D3 examples.
• 깊이 색상 인코딩: 범주 대신 색상이 계층 깊이를 인코딩하여, 바깥에서 안쪽으로 갈수록 그러데이션이 나타납니다.
• Color-encoded depth: Instead of category, color encodes hierarchy depth, creating a gradient from outer to inner levels.
• 포스 패킹 원: 수학적 패킹 대신 힘 시뮬레이션을 사용하여, 데이터가 변할 때 애니메이션 전환이 가능합니다.
• Force-packed circles: Uses force simulation instead of mathematical packing, allowing animated transitions as data changes.

코드 레퍼런스 / Code Reference

// D3 Circle Packing
import * as d3 from "d3";

const root = d3.hierarchy(data)
  .sum(d => d.value)
  .sort((a, b) => b.value - a.value);

d3.pack()
  .size([width, height])
  .padding(3)(root);

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

svg.selectAll("circle")
  .data(root.descendants())
  .join("circle")
  .attr("cx", d => d.x)
  .attr("cy", d => d.y)
  .attr("r", d => d.r)
  .attr("fill", d => d.children ? "none" : color(d.data.category))
  .attr("stroke", d => d.children ? "#999" : "none")
  .attr("fill-opacity", 0.7);