Stacked Brush Plots

100%

Stacked Brush Plots

✓ Published0🌍 Public

Last edited Apr 20, 2017

Created on Mar 11, 2017

This stacked brush plot example shows four synchronized panels for exploring a dataset of 100,000 points. Each panel displays the data as an SVG area chart, and brushing in one panel automatically zooms the subsequent panel into that selected range, creating a telescoping overview-detail interface. The code extends Mike Bostock's brush zoom example, using D3 v3 APIs such as `d3.svg.brush`, `d3.svg.area`, and `d3.scale.linear` to manage the linked extents and redraw areas dynamically.

AI-generated description

Implements multiple, stacked plots with brushing. This extends the example at http://bl.ocks.org/mbostock/1667367 and allows for multiple panels where each subsequent panel zooms from the previous. Data points are also smoothed, permitting data with over 100,000 points to have an overview with subsequent telescoping while maintaining context.

forked from <a href='http://bl.ocks.org/tommct/'>tommct</a>'s block: <a href='http://bl.ocks.org/tommct/4c8c6cf9cf25cbe4f018'>D3 Stacked Brush Plots</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Brush & Zoom II

This example demonstrates how brushing a scatterplot with d3.brush zooms to the selected region, while double-clicking resets the view. The code generates 900 random points in three gaussian clusters, rendering them as colored circles and using a linear scale to map coordinates. The brush’s `end` event updates the x and y domains, then animates the axes and points via `transition`. A 350ms idle timeout distinguishes a brush clear from a double-click reset.

Mmbostock

78% match

Loading thumbnail…

part 3, Zoom and Panning with D3.js and canvas

This example demonstrates interactive zooming, panning, and brushing of a synthetic scatterplot containing 10,000 random data points, rendered with a hybrid SVG–Canvas approach. The D3.js v4 code overlays an SVG layer for axes and controls on top of a Canvas layer for efficient point drawing, using `d3.zoom` and `d3.brush` to handle transformations and selections. A toolbar offers Reset, Zoom, and Brush modes, where zooming rescales axes via `d3.scaleLinear` and redraws points with `Canvas` arc primitives, while brushing highlights the selected region on the SVG layer.

FFrissAnalytics

78% match

Loading thumbnail…

Scatter plot brushing

This example demonstrates interactive brushing on a scatter plot, where users can drag a rectangular selection to highlight points within that region in orange while dimming others remain blue. The visualization uses 300 randomly generated data points from a normal distribution, rendered as SVG circles with axes. The brushing interaction is implemented using d3.brush, with the brushed event updating circle fills based on the selection bounds, while brushended resets the colors with a smooth transition when the brush is cleared. The code uses d3.scaleLinear for positioning and d3.axisBottom/axisLeft for axes.

EEfratVil

77% match

Loading thumbnail…

Programmatically Control a d3 brush

This example demonstrates programmatic control of a D3 brush in a focus+context zoom chart, showing how buttons can drive the brush to zoom into specific years of S&P 500 stock data. The code uses d3.svg.brush, brush.extent(), and brush.event() to set the brush range and trigger the brush’s event handlers, applying transitions for a slowed-down visual effect. The chart renders as SVG with two areas, axes, and a brush overlay, updating the focus panel dynamically as the brushed domain changes.

TThanaporn-sk

76% match

Loading thumbnail…

D3 Brush and Tooltip Complete

This example shows a scatterplot of 49 random data points where users can brush-zoom over the chart and see tooltips with each point’s X and Y values. The chart uses D3 v3 with SVG circles, linear scales, and axes. Brushing is implemented via `d3.svg.brush()` applied to the background, while a custom `d3.helper.tooltip()` creates and moves an HTML tooltip on mouseover and mousemove. Brush events highlight selected points by toggling a CSS class, and a clear button resets the selection.

TThanaporn-sk

76% match

Loading thumbnail…

Scatter plot with zoom

This scatter plot visualizes 300 normally distributed data points and supports interactive zooming through a brushed region. Users can drag to select a rectangular area, which triggers a smooth animated transition that rescales the x and y axes to focus on the selected points. Double-clicking outside the brushed area resets the view to the full dataset. The implementation uses D3 v4’s `d3.brush` for selection handling, `d3.scaleLinear` for coordinate mapping, and `transition.attr` to animate the circles’ positions. The axes are updated via `d3.axisBottom` and `d3.axisLeft`, with a clip path preventing points from spilling outside the plotting area.

EEfratVil

76% match

Loading thumbnail…

Brush & Zoom

This example combines d3-brush and d3-zoom to create a Focus + Context interface for exploring time-series data. The main chart (focus) displays the S&P 500 index as a smooth area chart, while a smaller context chart below shows the same data. Users can brush a region in the context chart to zoom the focus view, or scroll/wheel over the focus chart to pan and zoom directly. The two views stay synchronized: brushing the context updates the focus, and zooming in the focus moves the brush. The visualization uses SVG rendering with D3 v4, with axes for time and price, and a clip path to constrain the area mark.

AAlainRo

76% match

Loading thumbnail…

Brush & Zoom

This example demonstrates a Focus + Context technique for time-series data, combining brushing and zooming to explore the S&P 500 index. The main chart displays the full time series as an area, while a smaller context chart below shows the same data. Users can brush a region in the context chart to zoom into that time range in the focus chart, or use the mouse wheel to pan and zoom directly on the focus view. The y-axis dynamically rescales to the visible data, and the brush handle in the context view updates accordingly. The implementation uses D3 v4 with SVG, featuring two area charts with synchronized scales, a brush for selection, and a zoom behavior for interactive navigation.

GGerardoFurtado

76% match