Drill-down / Roll-up

설명 / Description

드릴다운과 롤업은 계층적 데이터를 위한 상호 보완적인 탐색 기법입니다. 드릴다운은 사용자가 집계 요소를 클릭하여 확장할 수 있게 하여, 현재 뷰를 그 요소의 하위 항목에 대한 더 상세한 분류로 대체합니다. 롤업은 이 동작을 반대로 수행하여 계층을 다시 더 높은 집계 수준으로 되돌립니다. 데이터 계층을 수직으로 탐색하는 이 방식은 지리(국가 -> 주 -> 도시), 시간(연도 -> 분기 -> 월 -> 일), 제품(부서 -> 카테고리 -> 항목), 조직(회사 -> 부문 -> 팀)처럼 수준별로 조직된 데이터를 탐색하는 가장 자연스러운 방법 중 하나입니다.

Drill-down and roll-up are complementary navigation techniques for hierarchical data. Drill-down lets the user click on an aggregate element to expand it, replacing the current view with a more detailed breakdown of that element's children. Roll-up reverses the operation, moving back up the hierarchy to a higher level of aggregation. This vertical navigation through data hierarchies is one of the most natural ways to explore data that is organized in levels — geography (country -> state -> city), time (year -> quarter -> month -> day), product (department -> category -> item), or organization (company -> division -> team).

이 패턴은 비즈니스 인텔리전스의 OLAP(Online Analytical Processing) 개념에 뿌리를 두고 있으며, 데이터 큐브의 차원을 따라 드릴다운하는 것이 주요 분석 작업입니다. 시각화 분야에서는 확대 가능한 트리맵(블랑쉬와 르콜리네, Blanch & Lecolinet, 2007)과 인터랙티브 대시보드를 통해 이 기법이 널리 알려졌습니다. 핵심적인 디자인 과제는 전환 과정에서 맥락을 유지하는 것입니다: 사용자가 "전자제품"으로 드릴다운할 때, 지금 보고 있는 것이 부분집합이라는 사실을 알아야 하고, 상위 수준으로 돌아가는 명확한 경로도 필요합니다.

The pattern is rooted in OLAP (Online Analytical Processing) concepts from business intelligence, where drill-down along dimensions of a data cube is a primary analytical operation. In visualization, the technique gained prominence through zoomable treemaps (Blanch & Lecolinet, 2007) and interactive dashboards. The critical design challenge is maintaining context during the transition: when the user drills into "Electronics," they need to know they are now seeing a subset, and they need a clear path back to the parent level.

브레머와 문즈너(Brehmer & Munzner, 2013)는 이를 시각화의 세부 수준을 바꾸는 "탐색(navigate)" 동작으로 분류합니다. 수준 간의 애니메이션 전환은 매우 중요합니다 — 이는 연속성을 제공하여 사용자가 클릭한 집계 안에 상세 뷰가 담겨 있다는 것을 이해하도록 돕습니다. 브레드크럼 경로, 뒤로 가기 버튼, 애니메이션 줌 전환은 모두 사용자가 계층 내 위치 감각을 유지하도록 돕는 역할을 합니다.

Brehmer and Munzner (2013) classify this as a "navigate" action that changes the level of detail in the visualization. The animated transition between levels is crucial — it provides continuity, helping the user understand that the detailed view is contained within the aggregate they clicked. Breadcrumb trails, back buttons, and animated zoom transitions all serve to maintain the user's sense of location within the hierarchy.

Drill Down — try it yourself

언제 사용하나 / When to Use

데이터가 자연스러운 계층 구조(지리적, 시간적, 조직적, 분류학적)를 가질 때.
When the data has a natural hierarchical structure (geographic, temporal, organizational, taxonomic).
모든 수준을 동시에 보여주면 시각적으로 압도적인 혼잡이 생길 때.
When showing all levels simultaneously would create an overwhelming amount of visual clutter.
사용자의 작업이 서로 다른 세분화 수준에서의 구성을 이해하는 것을 포함할 때.
When the user's task involves understanding composition at different levels of granularity.
초기 뷰가 상위 수준의 KPI를 보여주고, 사용자가 기여 요인으로 드릴다운하여 이상치를 조사해야 하는 대시보드에서.
In dashboards where the initial view shows high-level KPIs and the user needs to investigate anomalies by drilling into contributing factors.
트리맵, 선버스트 다이어그램, 또는 다른 계층적 시각화가 주된 차트 유형일 때.
When treemaps, sunburst diagrams, or other hierarchical visualizations are the primary chart type.

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

데이터가 평면적(계층이 없음)일 때 — 대신 필터나 정렬을 사용하세요.
When the data is flat (no hierarchy) — use filter or sort instead.
계층이 두 수준밖에 없을 때 — 그룹형이나 누적 막대 차트가 두 수준을 동시에 보여줄 수 있습니다.
When the hierarchy has only two levels — a grouped or stacked bar chart can show both levels simultaneously.
탐색 중 상위 수준의 맥락이 계속 보여야 할 때 — 대신 초점+맥락이나 전체+세부 뷰를 사용하세요.
When context from the parent level must remain visible during exploration — use focus+context or overview+detail instead.
드릴다운 경로가 4~5단계보다 더 깊을 때 — 사용자가 방향 감각을 잃을 수 있습니다.
When the drill-down path is more than 4-5 levels deep, which can cause the user to lose their bearings.
요소의 양 때문에 수준 간 애니메이션이 너무 느리거나 혼란스러울 때.
When animation between levels would be too slow or disorienting due to the volume of elements.

작동 방식 / How It Works

사용자가 집계된 뷰를 봅니다 — 예를 들어, 지역별(북부, 남부, 동부, 서부) 매출 막대 차트.
The user sees an aggregated view — for example, a bar chart of sales by region (North, South, East, West).
사용자가 하나의 집계를 클릭하여(예: "북부" 막대) 드릴다운 의도를 나타냅니다.
The user clicks on one aggregate (e.g., the "North" bar), signaling intent to drill down.
시스템이 전환을 애니메이션으로 처리하여 집계 뷰에서 선택한 항목의 하위 항목을 보여주는 상세 뷰로 이동합니다(예: 북부 내 개별 주).
The system animates a transition from the aggregate view to a detailed view showing the children of the selected item (e.g., individual states within North).
브레드크럼 경로나 뒤로 가기 버튼이 나타나 탐색 경로(전체 > 북부)를 보여주고 롤업을 가능하게 합니다.
A breadcrumb trail or back button appears, showing the navigation path (All > North) and allowing roll-up.
사용자는 계속해서 더 깊은 수준으로 드릴다운할 수 있습니다(전체 > 북부 > 뉴욕 > NYC).
The user can continue drilling into deeper levels (All > North > New York > NYC).
롤업하려면 사용자가 브레드크럼, 뒤로 가기 버튼, 또는 "위로" 탐색 요소를 클릭합니다. 뷰가 애니메이션으로 상위 수준으로 되돌아갑니다.
To roll up, the user clicks the breadcrumb, the back button, or an "up" navigation element. The view animates back to the parent level.
선택적으로 "드릴스루" 변형은 차트를 바꾸는 대신 별도의 상세 뷰(테이블, 리포트)를 엽니다.
Optionally, a "drill-through" variant opens a separate detail view (a table, a report) rather than changing the chart.

변형 / Variations

인플레이스 드릴다운: 차트가 제자리에서 변형됩니다. 지역별 막대 차트가 주(state)별 막대 차트로 바뀝니다. 대시보드에서 가장 흔합니다.
In-place drill-down: The chart transforms in place. The bar chart of regions becomes a bar chart of states. Most common in dashboards.
확대형 드릴다운: 클릭된 요소가 시각적으로 확장되고, 뷰가 그 안으로 확대됩니다(확대 가능한 트리맵, 선버스트 다이어그램).
Zoomable drill-down: The clicked element expands visually, and the view zooms into it (zoomable treemaps, sunburst diagrams).
사이드 패널 드릴다운: 집계를 클릭하면 메인 뷰를 바꾸지 않고 인접한 패널에 상세 분류가 열립니다.
Side-panel drill-down: Clicking an aggregate opens a detailed breakdown in an adjacent panel without changing the main view.
시간적 드릴다운: 연도 막대를 클릭하면 동일한 지표의 분기별, 그다음 월별, 그다음 일별 뷰로 확장됩니다.
Temporal drill-down: Clicking a year bar expands to quarterly, then monthly, then daily views of the same metric.
테이블로의 드릴스루: 집계를 클릭하면 그것을 구성하는 개별 레코드의 테이블이 열립니다 — BI 도구에서 흔합니다.
Drill-through to table: Clicking an aggregate opens a table of the individual records that compose it — common in BI tools.
애니메이션 브레드크럼: 수준이 추가/제거될 때 브레드크럼 경로가 애니메이션되어 계층적 탐색을 강화합니다.
Animated breadcrumb: The breadcrumb trail animates as levels are added/removed, reinforcing the hierarchical navigation.

코드 레퍼런스 / Code Reference

// Conceptual drill-down on a bar chart
let currentLevel = "region"; // region -> state -> city
let breadcrumb = ["All"];

function renderBars(groupKey) {
  const grouped = d3.rollup(filtered, v => d3.sum(v, d => d.sales), d => d[groupKey]);
  // ... render bars from grouped data ...
  svg.selectAll("rect").on("click", (event, [key]) => {
    filtered = filtered.filter(d => d[groupKey] === key);
    breadcrumb.push(key);
    currentLevel = nextLevel(currentLevel);
    renderBars(currentLevel);
  });
}