Zoom and Pan

설명 / Description

확대/축소와 이동은 하나의 스케일로는 알아볼 수 있게 표시할 수 없을 만큼 많은 정보를 담은 데이터 시각화를 위한 기본적인 탐색 인터랙션입니다. 확대는 관심 영역을 크게 보여주어 더 미세한 세부 정보를 드러내고, 이동은 보이는 뷰포트를 데이터 공간 전체에서 옮깁니다. 이 둘이 합쳐지면 시스템이 무엇을 보여줄지 미리 결정할 필요 없이 사용자가 여러 세분화 수준에서 데이터를 탐색할 수 있습니다.

Zoom and pan is the fundamental navigation interaction for data visualizations that contain more information than can be legibly displayed at a single scale. Zooming magnifies a region of interest, revealing finer detail, while panning shifts the visible viewport across the data space. Together they let the user explore data at multiple levels of granularity without the system needing to decide a priori what should be visible.

이 패턴은 슈나이더만(Shneiderman)의 시각 정보 탐색 만트라("개요를 먼저, 확대와 필터링, 그다음 필요시 세부 정보")에서 "확대" 단계를 직접적으로 뒷받침합니다. 핵심적인 설계상의 긴장은 기하학적 줌(단순히 픽셀을 확대하여 마크를 크게 만드는 방식)과 시맨틱 줌(줌 수준이 바뀌면 시각적 표현 자체가 바뀌는 방식 — 예를 들어 국가 수준을 넘어 확대해야만 지도에 도시 이름이 드러나는 것) 사이에 있습니다. 시맨틱 줌은 구현하기 더 어렵지만 다중 스케일 데이터에는 훨씬 더 유용합니다.

This pattern directly supports the "zoom" step in Shneiderman's Visual Information Seeking Mantra: "Overview first, zoom and filter, then details-on-demand." The key design tension is between geometric zoom (which simply magnifies pixels, making marks larger) and semantic zoom (which changes the visual representation as the zoom level changes — for example, revealing city names on a map only after zooming past the country level). Semantic zoom is harder to implement but dramatically more useful for multi-scale data.

웹에서 확대/축소와 이동은 보통 스크롤 휠(확대), 드래그(이동), 핀치 제스처(터치에서의 확대)로 트리거됩니다. D3의 d3-zoom 모듈은 변환 상태, 제스처 판별, 매끄러운 애니메이션 전환을 처리하는 잘 설계된 구현을 제공합니다. Leaflet과 Mapbox GL 같은 지도 라이브러리는 확대/축소와 이동을 그 주위로 다른 모든 것이 구축되는 핵심 인터랙션 프리미티브로 취급합니다.

On the web, zoom-and-pan is typically triggered by scroll wheel (zoom), drag (pan), and pinch gestures (zoom on touch). D3's d3-zoom module provides a well-engineered implementation that handles transform state, gesture disambiguation, and smooth animated transitions. Maps libraries like Leaflet and Mapbox GL treat zoom-and-pan as the primary interaction primitive around which everything else is built.

Zoom And Pan — try it yourself

언제 사용하나 / When to Use

데이터 공간이 뷰포트보다 훨씬 클 때 — 지도, 큰 네트워크, 긴 시계열.
When the data space is much larger than the viewport — geographic maps, large networks, long time series.
시각화가 여러 스케일에서 의미 있는 세부 정보를 가질 때(예: 하위 군집을 포함하는 군집이 있는 산점도).
When the visualization has meaningful detail at multiple scales (e.g., a scatterplot with clusters that contain sub-clusters).
사용자가 개요 시점과 근접 검토 사이를 오갈 필요가 있을 때.
When the user needs to shift between an overview perspective and a close-up inspection.
줌 수준이 분석의 의미 있는 단위를 바꾸는 지리적 시각화에서(국가 → 주 → 도시).
In geographic visualizations where zoom level changes the meaningful unit of analysis (country → state → city).
레이블, 주석, 작은 마크가 더 높은 줌 수준에서만 알아볼 수 있게 될 때.
When labels, annotations, or small marks become legible only at higher zoom levels.

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

전체 데이터셋이 전체 해상도로 뷰포트에 편안하게 들어갈 때 — 확대는 불필요한 복잡성을 더합니다.
When the entire dataset fits comfortably in the viewport at full resolution — zooming adds unnecessary complexity.
마크가 이미 크고 뚜렷한 단순한 막대 차트나 파이 차트에서.
In simple bar charts or pie charts where the marks are already large and distinct.
확대가 시각적 인코딩을 깨뜨릴 때(예: 비례 영역 차트를 확대하면 상대적 크기에 대해 오해를 줄 수 있음).
When zooming would break the visual encoding (e.g., zooming into a proportional area chart can mislead about relative sizes).
스크롤 확대가 페이지 스크롤과 충돌하는 페이지에서 — 사용자가 차트 안에 갇힐 수 있습니다.
On pages where scroll-to-zoom conflicts with page scrolling — users may get trapped inside the chart.
저자가 독자가 보는 것을 통제하는 내러티브/설명형 시각화에서.
In narrative/explanatory visualizations where the author controls what the reader sees.

작동 방식 / How It Works

확대하려면 사용자가 마우스 휠을 앞으로 스크롤하거나, 터치스크린에서 바깥으로 핀치하거나, "+" 버튼을 클릭합니다. 뷰포트는 커서 위치(또는 핀치 중심점) 주위로 확대됩니다.

To zoom in, the user scrolls the mouse wheel forward, pinches outward on a touch screen, or clicks a "+" button. The viewport magnifies around the cursor position (or the pinch centroid).

축소하려면 사용자가 뒤로 스크롤하거나, 안쪽으로 핀치하거나, "-"를 클릭합니다. 뷰포트가 개요를 향해 다시 줄어듭니다.

To zoom out, the user scrolls backward, pinches inward, or clicks "-". The viewport shrinks back toward the overview.

이동하려면 사용자가 클릭하고 드래그합니다(또는 터치에서 스와이프합니다). 뷰포트가 이동하며 데이터 공간의 다른 부분을 드러냅니다.

To pan, the user clicks and drags (or swipes on touch). The viewport translates, revealing different parts of the data space.

시스템은 기하학적 변환(이동 + 스케일)을 시각화 레이어에 적용하여 뷰를 실시간으로 갱신합니다.

The system applies a geometric transform (translate + scale) to the visualization layer, updating the view in real time.

선택적으로 시맨틱 줌 로직이 각 줌 수준에서 렌더링되는 내용을 조정합니다 — 집계, 필터링, 또는 레이블 표시.

Optionally, semantic zoom logic adjusts what is rendered at each zoom level — aggregating, filtering, or showing labels.

제약 조건(최소/최대 줌, 이동 경계)이 사용자가 너무 깊이 확대하거나 빈 공간으로 이동하는 것을 막습니다.

Constraints (min/max zoom, pan boundaries) prevent the user from zooming too far in or panning into empty space.

변형 / Variations

기하학적 줌: 순수한 스케일 변환. 확대할수록 마크가 커집니다. 단순하지만 터무니없이 큰 마크를 만들 수 있습니다.
Geometric zoom: Pure scale transform. Marks get bigger as you zoom in. Simple but can create absurdly large marks.
시맨틱 줌: 표현이 줌 수준에 따라 바뀝니다. 지도가 대표적인 예입니다(대륙 → 국가 → 도시 → 거리). 데이터 시각화에서는 구간화된 히트맵에서 개별 점으로 전환하는 것을 의미할 수 있습니다.
Semantic zoom: The representation changes with zoom level. Maps are the canonical example (continent → country → city → street). In data visualization, this might mean switching from a binned heatmap to individual points.
축 줌: 한쪽 축만 확대 가능하고(보통 시계열의 x축), 다른 축은 자동 조정됩니다. 시간 데이터에 유용합니다.
Axis zoom: Only one axis is zoomable (commonly the x-axis for time series), while the other auto-adjusts. Useful for temporal data.
미니맵 연동 줌: 작은 개요 인셋이 현재 뷰포트를 나타내는 사각형과 함께 전체 데이터 공간을 보여줍니다.
Minimap-linked zoom: A small overview inset shows the full data space with a rectangle indicating the current viewport.
애니메이션 줌: 즉각적인 점프 대신 매끄러운 애니메이션 전환으로 더블클릭이나 버튼으로 트리거되는 줌.
Animated zoom: Double-click or button-triggered zoom with a smooth animated transition rather than an instantaneous jump.
제한된 줌: 줌이 연속적이지 않고(지도 타일 줌 수준처럼) 이산적인 수준으로 제한됩니다.
Constrained zoom: Zoom is restricted to discrete levels (like map tile zoom levels) rather than continuous.

코드 레퍼런스 / Code Reference

// D3.js zoom and pan on a scatterplot
const zoom = d3.zoom()
  .scaleExtent([0.5, 20])
  .on("zoom", ({ transform }) => {
    const newX = transform.rescaleX(xScale);
    const newY = transform.rescaleY(yScale);
    xAxis.call(d3.axisBottom(newX));
    yAxis.call(d3.axisLeft(newY));
    svg.selectAll("circle")
      .attr("cx", d => newX(d.x))
      .attr("cy", d => newY(d.y));
  });

svg.call(zoom);