Overview + Detail

Description

Overview+detail is a multi-scale navigation pattern that presents two simultaneous views of the same data: a small overview showing the full extent of the data space, and a larger detail view showing a zoomed-in portion. A visible indicator on the overview (a rectangle, a highlighted region) shows which portion of the data is currently displayed in the detail view. The user can drag this indicator on the overview to navigate, or interact directly with the detail view via zoom and pan.

This pattern was formalized by Cockburn, Karlson, and Bederson (2009) in their survey of multi-scale interfaces, where they contrast overview+detail with focus+context (which integrates both scales into a single view) and zoom-and-pan (which shows only one scale at a time). The key advantage of overview+detail is that the user never loses their bearings — the overview provides a persistent spatial reference, while the detail view provides legibility. The cost is screen real estate: two views require more space than one.

The canonical example is the navigator/minimap pattern used in mapping applications, code editors, and image viewers. In data visualization, the pattern is most common with time-series data, where a small area chart at the bottom shows the full timeline and a brush allows the user to select the time window shown in the main chart. Bloomberg terminals, stock trading platforms, and tools like Observable Plot’s Plot.frame() with a focus area all implement this pattern.

When to Use

• When the data spans a large range (long time series, large geographic area, big network) and showing it all at full resolution is not legible.
• When the user needs to both maintain global context and examine local detail.
• When navigation via zoom-and-pan alone would cause the user to lose their position in the data space.
• In dashboards with time-series data where the user needs to select a time window.
• When the overview itself carries analytical value (e.g., showing the overall trend) separate from the detailed view.

When NOT to Use

• When screen space is limited (mobile, small embedded widgets) and two views cannot coexist.
• When the data fits comfortably at a single scale — adding an overview is wasted space.
• When a focus+context approach (fisheye, distortion) better preserves the single-view experience the user expects.
• When the overview would be too small to be useful (trying to show a 10,000-node network in a 100x50 pixel minimap).

How It Works

1. The overview is rendered at a small size showing the full extent of the data. A rectangular brush or highlighted region indicates the current detail viewport.
2. The detail view is rendered at a larger size showing only the data within the indicated region, at higher resolution.
3. The user drags the brush on the overview to navigate. The detail view updates in real time to show the corresponding data.
4. Alternatively, the user zooms/pans in the detail view, and the overview brush automatically updates to reflect the new viewport.
5. Resizing the brush on the overview changes the zoom level of the detail view (wider brush = more data shown = lower zoom).
6. Both views remain synchronized at all times — any change in one is immediately reflected in the other.

Variations

• Stacked overview: The overview is placed directly above or below the detail view, sharing the same horizontal axis. Most common for time series (e.g., stock charts).
• Corner minimap: A small inset in the corner of the detail view shows the overview. Common in maps and network visualizations.
• Side-by-side: Overview and detail are placed next to each other at comparable sizes. Used when the overview itself is analytically important.
• Collapsible overview: The overview can be toggled on/off to reclaim screen space when not needed.
• Multi-detail: One overview feeds multiple detail views, each showing a different zoomed-in region for comparison.
• Semantic overview: The overview uses a different, simpler visual encoding than the detail view (e.g., overview shows a density heatmap, detail shows individual points).

Code Reference

// D3.js overview + detail for a time series
const brushOverview = d3.brushX()
  .extent([[0, 0], [overviewWidth, overviewHeight]])
  .on("brush end", ({ selection }) => {
    const [x0, x1] = selection.map(overviewXScale.invert);
    detailXScale.domain([x0, x1]);
    detailPath.attr("d", lineGenerator.x(d => detailXScale(d.date)));
    detailXAxis.call(d3.axisBottom(detailXScale));
  });

overviewSvg.append("g").call(brushOverview)
  .call(brushOverview.move, overviewXScale.range());