Line chart with d3.brush

100%

Line chart with d3.brush

✓ Published0🌍 Public

Last edited Mar 9, 2017

Created on Mar 9, 2017

This example shows monthly S&P 500 index prices from 2000 to 2010 as a line chart with a brushable timeline below it. The main chart displays the full time series in steelblue, while the lower context chart uses d3.brushX to select a range for zooming. The code enforces a minimum one-year selection window, and d3.zoom synchronizes panning and zooming with the brush. Data is loaded from a CSV file using the queue library, and all rendering uses SVG with d3.v4.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/twlynch/'>twlynch</a>'s block: <a href='http://bl.ocks.org/twlynch/24fc6c48058e575576915479c8ae8ab5'>Line chart with d3.brush</a>

none Licensed

Similar vizzes

Loading thumbnail…

Area Chart with Brushing

This area chart displays monthly S&P 500 price data from January 2000 through March 2010, rendered as a brushed time series. The visualization shows price fluctuations over time in steel blue, with an interactive brushX selection tool below the main chart that allows users to zoom into specific date ranges. The example uses d3.v5 with SVG rendering, employing scaleTime, scaleLinear, axisBottom, axisLeft, brushX, and area functions to construct the focus and context views, with data loaded from a CSV file.

Ffloresh

85% match

Loading thumbnail…

Brush & Zoom

This example demonstrates a Focus + Context interaction for exploring monthly S&P 500 index prices. The main chart displays the full time series as a smooth area, while a smaller context chart below shows the entire dataset with a draggable brush. Using d3-brush and d3-zoom together, the brush selection drives the zoom transform on the focus chart, and zooming on the focus chart updates the brush position. The SVG is rendered with d3.v4, and the data comes from a local CSV file.

TThanaporn-sk

82% match

Loading thumbnail…

Untitled

This example demonstrates a linked dataset of monthly S&P 500 index prices from a CSV file, presented as a brushable area chart. Users can adjust the visible time range by dragging a brush in the lower context panel, which updates the main focus chart’s x-axis domain. The code uses `d3.brushX` for selection, `d3.zoom` for panning, and `d3.area` with `d3.curveMonotoneX` to render the paths. Both charts are drawn in SVG with axes generated by `d3.axisBottom` and `d3.axisLeft`.

Ffaversin17

81% match

Loading thumbnail…

Area Chart with Brushing

This area chart displays monthly S&P 500 price data from a CSV file, with a focus chart and a smaller context chart below it. Users can brush along the context chart’s x-axis to zoom into a specific time range, updating the main chart’s domain. The visualization uses D3 v5’s `brushX`, `scaleTime`, `scaleLinear`, and `area` generators, with SVG rendering. The main area path is clipped to prevent overflow during brushing, and the context chart mirrors the full dataset for navigation.

Ffloresh

81% match

Loading thumbnail…

Programmatically Control a d3 brush

This example demonstrates focus+context zooming on a time-series chart of S&P 500 monthly closing prices, where a d3.svg.brush in the lower context panel is programmatically repositioned by clicking year buttons. The code uses d3.svg.area and d3.time.scale to render the data, then calls brush.extent() and brush.event() on a transition to animate the brush selection and update the focus panel. The implementation shows how to trigger brush events programmatically, unlike the default mouse interaction, and is built with d3.v3 and SVG.

TThanaporn-sk

81% match

Loading thumbnail…

Brush & Zoom

This example shows a focus and context view of the Standard & Poor’s 500 stock index over time, with a large area chart on the top and a smaller overview below. A colored brush in the context pane selects a date range, while a transparent rectangular overlay on the focus pane enables direct zooming and panning via the `d3.zoom` API; both interactions synchronize the visible data domain. The code combines `d3.brushX` with `d3.zoom`, and uses `d3.scaleTime`, `d3.axisBottom`, and `d3.area` to render the monthly price data from the CSV file as scalable vector graphics (SVG).

Mmbostock

81% match

Loading thumbnail…

Brush & Zoom

This example demonstrates a Focus + Context visualization of S&P 500 monthly prices, combining brushing and zooming. The main chart displays the full time series, while a smaller context chart below shows the entire dataset with a brushable selection window. Users can either drag a brush on the context chart to define a focused region, or scroll/pinch on the main chart to zoom. The two interactions are synchronized via d3-brush and d3-zoom, with the y-scale automatically rescaling to the visible date range. The area chart uses a monotone-x curve, with the focus area clipped and styled in steel blue.

GGerardoFurtado

81% match

Loading thumbnail…

Brush & Zoom

This example implements a focus-plus-context visualization of monthly S&P 500 closing prices. The large focus chart displays the full time series as an area chart, while a smaller context chart below it includes a draggable brush for selecting a date range; zooming is performed via a transparent overlay rectangle supporting wheel and drag interactions. It uses the d3.brushX component for the selection and d3.zoom for the pan-and-scale transform, with both updating the focus area's x-axis domain. The data is loaded from a CSV file (sp500.csv), and all graphics are rendered as SVG paths.

深深度碎片

81% match