Focus + Context

설명 / Description

초점+맥락은 관심 영역(초점)을 확대하면서 주변 데이터(맥락)는 압축되거나 왜곡되거나 덜 강조된 형태로 계속 보이게 하는 단일 뷰 기법입니다. 두 개의 별도 뷰가 필요한 전체+세부 뷰와 달리, 초점+맥락은 비선형 공간 왜곡 — 초점 영역을 늘리고 나머지를 압축하는 — 을 적용하여 두 스케일을 하나의 화면에 통합합니다. 이를 통해 국소적인 세부 정보를 제공하면서도 시청자가 데이터 공간 내 자신의 위치 감각을 유지할 수 있게 합니다.

Focus+context is a single-view technique that magnifies a region of interest (the focus) while keeping the surrounding data (the context) visible in a compressed, distorted, or de-emphasized form. Unlike overview+detail, which requires two separate views, focus+context integrates both scales into one display by applying a non-linear spatial distortion — stretching the focal area and compressing everything else. This preserves the viewer's sense of position within the data space while providing local detail.

이 개념은 이중 초점 디스플레이(bifocal display, Spence and Apperley, 1982)에서 시작되어 퍼나스(Furnas)의 어안 뷰(fisheye views, 1986)에 의해 널리 알려졌습니다. 이는 사전 중요도와 현재 초점으로부터의 거리를 조합하여 확대율을 부여하는 "관심도(degree of interest)" 함수 개념을 정식화한 것입니다. 시각화에서 가장 익숙한 구현으로는 어안 렌즈(커서 주변의 방사형 왜곡), 테이블 렌즈(표에서 선택된 행과 열을 확장), 그리고 선택된 국가를 확대하면서 이웃 국가는 계속 보이게 하는 지도 왜곡 기법이 있습니다.

The concept originated with the bifocal display (Spence and Apperley, 1982) and was popularized by Furnas's fisheye views (1986), which formalize the idea of a "degree of interest" function that assigns magnification based on a combination of a priori importance and distance from the current focus. In visualization, the most familiar implementations are the fisheye lens (a radial distortion around the cursor), the table lens (expanding selected rows and columns of a table), and cartographic distortion techniques that enlarge a selected country while keeping neighbors visible.

전체+세부 뷰에 대한 주요 이점은 화면 효율성 — 두 개 대신 하나의 뷰 — 과 공간적 인접성의 보존입니다. 주요 단점은 왜곡 자체가 오해를 불러일으킬 수 있다는 점입니다: 압축된 맥락 영역의 거리와 크기는 실제와 다르기 때문에 오독을 유발할 수 있습니다. 효과적인 초점+맥락 디자인은 어느 영역이 얼마나 왜곡되었는지를 알리는 명확한 시각적 단서(점진적 전환, 휘어지는 격자선)를 사용하여 이러한 위험을 최소화합니다.

The main advantage over overview+detail is screen efficiency — one view instead of two — and the preservation of spatial adjacency. The main disadvantage is that the distortion itself can mislead: distances and sizes in the compressed context region are not veridical, which can cause misinterpretation. Effective focus+context designs minimize this risk by using clear visual cues (gradual transition, grid lines that bend) to signal which regions are distorted and by how much.

Focus And Context — try it yourself

언제 사용하나 / When to Use

데이터가 공간적으로 연속적이고 사용자가 뷰를 전환하지 않고도 국소적 세부 정보와 전체 맥락을 함께 봐야 할 때
When the data is spatially continuous and the user needs to see both local detail and global context without switching views.
한 노드 클러스터를 확대하면 전체 그래프 구조를 놓치게 되는 밀집된 네트워크에서
In dense networks where zooming in on one node cluster would lose the overall graph topology.
전체 추세를 계속 보면서도 특정 기간의 세부 값을 보고 싶은 긴 시계열에서
In long time series where the user wants to see detailed values for one period while keeping the overall trend visible.
한 부분을 확장하면서 다른 부분은 압축하는 것이 스크롤보다 더 자연스러운 대형 표에서
In large tables where expanding one section while compressing others is more natural than scrolling.
화면 공간이 제한적이어서 두 개의 별도 뷰(전체+세부)가 들어갈 수 없을 때
When screen real estate is limited and two separate views (overview+detail) would not fit.

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

초점 영역과 맥락 영역 간의 정확한 비교가 중요할 때 — 왜곡으로 인해 정확한 비교가 불가능해집니다
When precise comparison between the focus and context regions is important — the distortion makes accurate comparison impossible.
청중이 왜곡을 실제 데이터 패턴으로 오해할 가능성이 있을 때(더 커 보이는 영역이 실제 데이터에서는 더 크지 않은 경우)
When the audience might misinterpret the distortion as representing real data patterns (areas that appear larger are not actually larger in the data).
시각화가 이미 단일 스케일에서 충분히 읽기 쉬워서 확대가 필요 없을 때
When the visualization is already legible at a single scale and there is no need for magnification.
경계를 왜곡하면 실제 지리적 관계에 대해 혼란을 초래하는 지도에서
In geographic maps where distorting boundaries would cause confusion about actual geographic relationships.
더 단순한 기법(줌, 필터, 전체+세부 뷰)으로도 왜곡을 이해하는 인지적 비용 없이 같은 목표를 달성할 수 있을 때
When a simpler technique (zoom, filter, or overview+detail) would achieve the same goal without the cognitive cost of understanding the distortion.

작동 방식 / How It Works

사용자가 초점을 위치시킵니다 — 커서를 영역 위로 옮기거나, 클릭하거나, 초점 표시기를 드래그하는 방식으로요.
The user positions the focus — by moving the cursor over a region, clicking, or dragging a focal indicator.
시스템이 왜곡 함수를 계산합니다. 이 함수는 초점 영역을 확대하고 주변 맥락을 압축합니다. 왜곡은 보통 부드러운 함수입니다(예: 렌즈 모양의 가우시안이나 다항식 왜곡).
The system computes a distortion function that magnifies the focus region and compresses the surrounding context. The distortion is typically a smooth function (e.g., a lens-shaped Gaussian or polynomial warping).
모든 데이터 마크가 왜곡 함수에 따라 재배치됩니다. 초점 근처의 마크는 서로 벌어지고(확대), 초점에서 먼 마크는 함께 압축됩니다.
All data marks are repositioned according to the distortion function. Marks near the focus are spread apart (magnified); marks far from the focus are compressed together.
선택적으로 마크 속성도 함께 조정됩니다 — 텍스트 레이블은 확대된 영역에서만 나타나고, 선 굵기가 조정되며, 색상 채도가 왜곡 수준에 따라 달라집니다.
Optional: mark properties also scale — text labels appear only in the magnified region, line widths adjust, color saturation varies with distortion level.
사용자가 초점을 옮기면 왜곡이 실시간으로 재계산되고 마크가 부드럽게 재배치됩니다.
As the user moves the focus, the distortion recalculates in real time, and marks smoothly reposition.
맥락 영역은 항상 계속 보이며, 세부 정보는 줄어들지만 사용자가 전체 그림을 놓치지 않도록 합니다.
The context region remains visible at all times, though at reduced detail, ensuring the user never loses the global picture.

변형 / Variations

어안 렌즈: 원형 왜곡 영역이 커서를 따라다닙니다. 네트워크 시각화와 노드-링크 다이어그램에서 가장 흔합니다. 퍼나스(Furnas, 1986)에 기반합니다.
Fisheye lens: A circular distortion region follows the cursor. Most common in network visualizations and node-link diagrams. Based on Furnas (1986).
직교좌표 어안: 왜곡이 x축과 y축을 따라 독립적으로 적용되어 직사각형 초점 영역이 늘어납니다. 행렬/표 뷰에서 사용됩니다.
Cartesian fisheye: Distortion is applied independently along x and y axes, stretching a rectangular focal region. Used in matrix/table views.
테이블 렌즈(Rao & Card, 1994): 선택된 행과 열이 확장되고, 선택되지 않은 행은 압축됩니다. 초점+맥락을 표 형태 데이터와 결합합니다.
Table lens (Rao & Card, 1994): Rows and columns expand when selected, compressing non-selected rows. Combines focus+context with tabular data.
이중 초점 디스플레이: 리본의 양 끝에 두 개의 초점 영역이 있고, 그 사이는 압축된 맥락입니다. 스펜스와 애펄리(Spence and Apperley)의 원래 설계입니다.
Bifocal display: Two focal regions at opposite ends of a ribbon, with compressed context between them. Original Spence and Apperley design.
퍼스펙티브 월: 초점 영역이 시청자를 정면으로 향하고 맥락은 원근감 있게 멀어지는 3D 효과입니다. 오늘날에는 드물게 사용됩니다.
Perspective wall: A 3D perspective effect where the focal region faces the viewer and context recedes into perspective. Less common today.
의미론적 초점: 공간적 왜곡 대신, 초점 영역은 더 풍부한 세부 정보(레이블, 주석)를 보여주고 맥락은 단순화된 마크를 보여줍니다. 기하학적 왜곡은 없습니다.
Semantic focus: Instead of spatial distortion, the focus region shows richer detail (labels, annotations) while the context shows simplified marks. No geometric distortion.
탄력적 초점: 확대 정도가 슬라이더나 스크롤 휠로 제어되어, 사용자가 초점의 세부 정보와 맥락의 범위 사이 균형을 조정할 수 있습니다.
Elastic focus: The degree of magnification is controlled by a slider or scroll wheel, allowing the user to tune the balance between focus detail and context coverage.

코드 레퍼런스 / Code Reference

// D3.js fisheye distortion on a scatterplot
// Using d3-fisheye plugin (conceptual)
const fisheye = d3.fisheye.circular().radius(120).distortion(3);

svg.on("mousemove", function (event) {
  fisheye.focus(d3.pointer(event));
  svg.selectAll("circle")
    .each(function (d) {
      d.fisheye = fisheye({ x: xScale(d.x), y: yScale(d.y) });
    })
    .attr("cx", d => d.fisheye.x)
    .attr("cy", d => d.fisheye.y)
    .attr("r", d => d.fisheye.z * 4);
});