Treemap

설명 / Description

트리맵은 계층적 데이터셋의 각 노드를 나타내는 더 작은 사각형으로 직사각형 공간을 채웁니다. 각 사각형의 면적은 정량적 값(매출, 파일 크기, 인구)에 비례하고, 중첩은 계층 구조 내 부모-자식 관계를 전달합니다. 색상은 성장률이나 범주 소속 같은 추가 변수를 인코딩할 수 있습니다.

A treemap fills a rectangular space with smaller rectangles, each representing a node in a hierarchical dataset. The area of each rectangle is proportional to a quantitative value (revenue, file size, population), and nesting conveys the parent-child relationships in the hierarchy. Color can encode an additional variable, such as growth rate or category membership.

1991년 벤 슈나이더만(Ben Shneiderman)이 발명한 트리맵은 원래 하드 드라이브의 디스크 공간 사용량을 시각화하기 위해 설계되었습니다. 이는 트리 구조를 공간 효율적으로 표시하는 문제를 해결했습니다: 노드-링크 트리 다이어그램과 달리, 트리맵은 사용 가능한 디스플레이 영역의 100%를 사용해 데이터를 인코딩하므로 구조와 크기를 동시에 보여주는 데 극히 공간 효율적입니다.

Invented by Ben Shneiderman in 1991, the treemap was originally designed to visualize disk space usage on a hard drive. It solved the problem of displaying tree structures in a space-efficient way: unlike node-link tree diagrams, treemaps use 100% of the available display area to encode data, making them extremely space-efficient for showing both structure and magnitude simultaneously.

트리맵은 정량적 변수(면적)가 주된 초점이고 계층이 맥락을 제공할 때 가장 잘 작동합니다. 부서와 프로젝트별로 나뉜 회사 예산이나, 지역과 국가별로 나뉜 전 세계 GDP처럼, 여러 단계에 걸쳐 많은 범주로 나뉜 총합을 보여주는 데 특히 효과적입니다.

Treemaps work best when the quantitative variable (area) is the primary focus and the hierarchy provides context. They are particularly effective for showing how a total is subdivided across many categories at multiple levels, such as a company budget broken down by department and project, or global GDP broken down by region and country.

Treemap — interactive example

언제 사용하나 / When to Use

전체 수량이 계층 구조에 걸쳐 어떻게 분포되는지 표시(예산, 디스크 사용량, 시가총액)
Showing how a total quantity is distributed across a hierarchy (budgets, disk usage, market capitalization)
트리 구조 내 여러 항목의 상대적 크기 비교
Comparing the relative sizes of many items within a tree structure
제한된 화면 공간에서 대규모 계층적 데이터셋의 개요 제공
Providing an overview of a large hierarchical dataset in limited screen space
공간 효율이 중요하고 트리 다이어그램이 영역을 지나치게 낭비할 때
When space efficiency is critical and a tree diagram would waste too much area

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

계층 구조 자체(부모-자식 링크, 깊이)가 수량보다 더 중요할 때 -- 네트워크 다이어그램이나 노드-링크 트리를 사용하세요
When the hierarchy itself (parent-child links, depth) is more important than the quantities -- use a network diagram or node-link tree
사각형 간 정밀한 비교가 필요할 때 -- 면적 지각은 길이보다 정확도가 낮으므로 막대 차트를 사용하세요
When precise comparison between rectangles is needed -- area perception is less accurate than length; use a bar chart
계층 구조가 없는 데이터의 경우 -- 막대 차트나 누적 막대 차트를 사용하세요
For data without hierarchical structure -- use a bar chart or stacked bar chart
리프 노드가 매우 적을 때(10개 미만) -- 중첩 레이아웃의 오버헤드가 이점 없이 복잡성만 더합니다
When there are very few leaf nodes (fewer than 10) -- the overhead of nested layout adds complexity without benefit

구조 / Anatomy

사각형(타일): 각 리프 노드는 값에 비례하는 면적을 가진 사각형입니다.
Rectangles (tiles): Each leaf node is a rectangle whose area is proportional to its value.
중첩: 부모 노드는 자식을 포함하는 경계 사각형으로 표현되어 시각적 계층을 만듭니다.
Nesting: Parent nodes are represented by the bounding rectangle containing their children, creating a visual hierarchy.
색상: 면적과 독립적으로 두 번째 변수(범주, 변화, 성과)를 인코딩하는 경우가 많습니다.
Color: Often encodes a second variable (category, change, performance) independent of area.
레이블: 노드를 식별하는 사각형 내부의 텍스트. 읽을 수 있는 텍스트를 담을 만큼 큰 타일에만 표시됩니다.
Labels: Text inside rectangles identifying the node. Only shown for tiles large enough to contain legible text.
테두리: 타일을 구분하는 선; 상위 수준 그룹화에 더 두꺼운 테두리를 사용하면 계층을 드러내는 데 도움이 됩니다.
Borders: Lines separating tiles; thicker borders for higher-level groupings help reveal the hierarchy.
패딩: 중첩된 그룹 사이의 공간으로, 계층 구조를 더 잘 보이게 합니다.
Padding: Space between nested groups to make the hierarchical structure more visible.

변형 / Variations

정사각형화 트리맵: 종횡비가 1에 가까운(정사각형에 가까운) 사각형을 최적화하는 알고리즘을 사용해 가독성을 높입니다. 가장 흔한 변형입니다.
Squarified treemap: Uses an algorithm that optimizes for rectangles with aspect ratios close to 1 (squares), improving readability. This is the most common variant.
슬라이스-앤-다이스 트리맵: 각 단계에서 가로와 세로 절단을 번갈아 사용하여 얇은 조각을 만들지만 안정적인 순서를 유지합니다.
Slice-and-dice treemap: Alternates horizontal and vertical slicing at each level, producing thin slivers but preserving stable ordering.
보로노이 트리맵: 사각형 대신 불규칙한 다각형 셀을 사용해 유기적인 형태를 만듭니다. 종횡비는 더 좋지만 면적 비교는 더 어렵습니다.
Voronoi treemap: Uses irregular polygonal cells instead of rectangles, creating organic shapes. Better aspect ratios but harder to compare areas.
계단식 트리맵: 중첩된 사각형을 어긋나게 배치하여 깊이를 보여주는 3D 같은 그림자 효과를 만듭니다.
Cascaded treemap: Offsets nested rectangles to create a 3D-like shadow effect showing depth.
확대 가능 트리맵: 그룹을 클릭하면 확대되어 자식을 전체 해상도로 볼 수 있고, 다시 위로 탐색할 수 있습니다.
Zoomable treemap: Allows clicking a group to zoom in and see its children at full resolution, then navigating back up.

코드 레퍼런스 / Code Reference

// D3 - squarified treemap
const root = d3.treemap()
  .size([width, height])
  .padding(2)
  (d3.hierarchy(data).sum(d => d.value).sort((a, b) => b.value - a.value));

const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
svg.selectAll("rect")
  .data(root.leaves())
  .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 => color(d.parent.data.name));