Linked Views

Description

Linked views (or coordinated multiple views, CMV) is an interaction architecture in which multiple visualizations of the same (or related) datasets are connected so that user actions in one view propagate to all others. When the user hovers, selects, brushes, or filters in any single view, the corresponding data items are highlighted, selected, or filtered in every linked view. This coordination transforms a set of independent charts into an integrated analytical environment.

The theoretical framework for coordinated multiple views was established by Roberts (2007) and refined by Weaver (2004), building on earlier work in systems like Becker and Cleveland’s brushing scatterplots. The core principle is that different visual encodings reveal different aspects of multidimensional data — a scatterplot shows bivariate relationships, a bar chart shows univariate distributions, a map shows spatial patterns — and coordinating these views lets the user see how a pattern in one dimension relates to patterns in others. This is why CMV is the standard architecture for exploratory data analysis tools from Tableau to Vega-Lite.

The design space for coordination includes what is shared (selection, filter, highlight, navigation), how it is shared (unidirectional or bidirectional), and which views participate. Not every view needs to respond to every interaction — a well-designed system lets the analyst configure which views are linked and how. The implementation typically involves a shared state store (event bus, reactive state, or shared data model) that dispatches interaction events to all participating views.

When to Use

• When the dataset has multiple dimensions that benefit from different visual encodings shown simultaneously.
• When the analytical task involves understanding multivariate relationships (e.g., “do the high-GDP countries also have high life expectancy?”).
• When a single chart type cannot adequately represent the complexity of the data.
• In dashboard-style interfaces where multiple metrics are displayed and the user needs to investigate their connections.
• When the user population includes analysts who will spend significant time exploring the data.

When NOT to Use

• When a single view is sufficient for the analytical task — adding linked views introduces visual complexity without analytical benefit.
• When the screen is too small to display multiple views legibly (mobile devices, narrow widgets).
• When the datasets in different views are unrelated — linking them would create false associations.
• When the audience is primarily consuming a narrative (explanatory mode) and does not need exploratory multi-view tools.
• When performance constraints prevent real-time synchronization across views (large datasets, slow rendering).

How It Works

1. Multiple views are rendered, each showing a different visual encoding of the same dataset or related data. For example: a scatterplot of (income, health), a bar chart of region, and a map of country locations.
2. A shared state manager (event bus, reactive store, or shared selection model) connects all views.
3. When the user interacts in one view (hovers over a point, brushes a region, clicks a bar), the view emits an event describing the affected data items.
4. All other views receive the event and visually reflect it — highlighting the corresponding marks, filtering to show only matching data, or updating summary statistics.
5. The coordination is bidirectional — the user can initiate interactions in any view, and all others respond.
6. Optionally, views can be un-linked or grouped into coordination sets for complex dashboards with many views.

Variations

• Highlight linking: Hovering or selecting in one view highlights corresponding marks in others. Lightest coordination — no data is filtered.
• Filter linking: Brushing or filtering in one view filters the data in all others. Stronger coordination that reduces the visible dataset.
• Navigation linking: Zooming or panning in one view synchronizes the viewport of others (e.g., two maps showing different variables at the same zoom level).
• Encoding linking: Changing a visual encoding parameter (color scale, axis) in one view propagates to others for consistency.
• Asymmetric linking: Interactions flow one direction — the “driver” view controls the “driven” views, but not vice versa.
• Faceted linking: Small multiples share the same encoding but show different data subsets. Hovering in one facet highlights the same data point across all facets.

Code Reference

// Shared selection state linking a bar chart and scatterplot
const state = { selected: null };

// Bar chart: on hover, set selected category
barChart.selectAll("rect").on("mouseover", (e, d) => {
  state.selected = d.category;
  updateAll();
});

// Scatterplot responds to shared state
function updateAll() {
  scatter.selectAll("circle")
    .style("opacity", d =>
      !state.selected || d.category === state.selected ? 1 : 0.1
    );
  barChart.selectAll("rect")
    .style("opacity", d =>
      !state.selected || d.category === state.selected ? 1 : 0.2
    );
}