Real-world systems are complex, with patterns often influenced by a large number of intertwined variables that may be correlated. When visualizing such data, it's common to build a suite of simpler charts each showing relationships between two variables at a time. While that has the benefit of making each individual chart more manageable to build and understand, it can also mean sacrificing insights into the interconnectedness that links data together across variables in different charts.
Linked brushing is one way to reintroduce some of that interconnectedness to your data displays. With linked brushing, a user selects a subset of values by dragging (or brushing) over the chart area. Then, any “linked” charts update automatically to reflect or highlight the same data, as shown below.
Linked brushing is a specific type of cross-filtering, a general term for filtering data displayed in one or more charts, based on the user’s selection in another. When there exist obvious or pre-defined categories, cross-filtering using simple selection (for example, by clicking on one wedge of a pie chart to filter to only that category) may be a better option — and it’s certainly more common in dashboards. But brushing can be particularly useful when you don’t want to limit a user to selecting a pre-defined category or region, giving them more control over which subset of the data they dig into.
In this post, we highlight three examples that show how linked brushing can help users explore patterns across dimensions, dive deeper into local spatial trends, and focus on time periods of interest. For the right data, linked brushing can produce richer, more engaging visualizations that reveal relationships across metrics, without overcomplicating individual charts.
Brushing can give viewers a fast, fluid way to investigate patterns across dimensions, making it a useful option for quick exploration. For example, in the scatterplot matrix below, a user selects points (representing body size measurements for 344 penguins, including flipper length, body mass, and bill dimensions) by dragging the mouse over any area, in any chart. The records within the selected area are simultaneously highlighted across all charts
One way this can be particularly useful is when you want to investigate outliers or anomalies you notice in the data. For example, if you notice a cluster of penguins with unexpectedly low body weights, you could brush over those points to reveal if the same individuals were noticeably smaller across other dimensions.
Try it out yourself! Visit this notebook to explore the chart above, and to see the code that implements brushing in the chart above using D3.
With geospatial data, linked brushing can help a viewer to focus on events and patterns within and across regions of interest, and to see how those patterns change across another dimension (like time!).
The example below, made with Mosaic vgplot, visualizes one million taxi pickup and dropoff locations, along with pickup times, recorded in New York City from January 1 to January 3, 2010. Brushing across values in the histogram, or over either map, will filter to only show the included records in both maps. Explore this example in our Framework documentation to see how spatial patterns in taxi rides change throughout the day.
Want to go beyond a simple rectangular brush? See example code for lasso selection in D3, which lets you manually draw a custom shape to select values.
As mentioned previously, brushing isn’t the only way to explore spatial patterns across different charts and metrics. Imagine if the maps in the example above included an additional layer with New York City neighborhood boundaries. Instead of brushing (which typically refers to a specific action where a user manually drags over an area of a chart to highlight the selected elements), a user might just click on any spatial polygon to focus on pickups and dropoffs within the borders of one or more neighborhoods. This action isn’t technically brushing, but is a cross-filtering method that highlights the same data subset across charts, albeit one that limits user selections to pre-defined regions.
And, it’s possible to build charts that combine the two, allowing a user to brush over discrete categories or regions, for example to brush over ordinal categories to select sequential groups.
Brushing can also help a viewer to zoom in on interesting patterns in time series data, without needing to know or select specific start and end dates in advance. If you see an interesting event, change, or anomaly in time series data, brushing can quickly give a more detailed view of the surrounding period.
The example below shows 30- and 15-year fixed-rate mortgage rates from weekly Freddie Mac lender surveys (ongoing since 1971). Brushing over the long-term time series chart produces a zoomed-in chart of mortgage rates within the selected window. This lets a viewer dig into short-term trends, while still showing how it fits into the bigger picture of the full dataset for useful context.
As shown in the examples, brushing can be a useful option when you want to maintain simplicity of individual charts, while allowing a viewer to explore patterns or anomalies across metrics, dive into localized trends in spatial data, or zoom in on time periods of interest.
For more inspiration, and to start building richer interactive charts, check out the example galleries for our open-source data visualization libraries: