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.

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

Fisheye lens: A circular distortion region follows the cursor. Most common in network visualizations and node-link diagrams. Based on Furnas (1986).
Cartesian fisheye: Distortion is applied independently along x and y axes, stretching a rectangular focal region. Used in matrix/table views.
Table lens (Rao & Card, 1994): Rows and columns expand when selected, compressing non-selected rows. Combines focus+context with tabular data.
Bifocal display: Two focal regions at opposite ends of a ribbon, with compressed context between them. Original Spence and Apperley design.
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);
});