Area Chart with Brushing

100%

Area Chart with Brushing

✓ Published0🌍 Public

Last edited Feb 29, 2020

Created on Feb 29, 2020

This example presents an area chart of monthly price data from January 2000 through March 2010, rendered as an SVG with a main focus chart and a smaller context panel beneath it. The visualization demonstrates linked brushing: users can select a range on the context panel with a brush, which zooms the focus chart to that time period. The code uses d3’s scaleTime, scaleLinear, area, and brushX APIs, with axes generated by axisBottom and axisLeft. The interactive brushing triggers a zoom by re-computing the x-domain and redrawing the focus area and axis.

AI-generated description

MIT 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

89% 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

88% 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

82% 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

82% 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

82% match

Loading thumbnail…

Brush() & Filter()

This visualization demonstrates brush-style filtering interactions on a time-series line chart, using an area chart to display stock prices from June to August 2010. The chart includes a red dashed average line and colored area fills, with data points rendered as circles that respond to mouseover tooltip events. The visualization uses d3.csv for data loading, d3.scaleTime and d3.scaleLinear for coordinate mapping, and d3.axisBottom/d3.axisLeft for axes. The code relies on D3 v5’s selection, area, and curveMonotoneX APIs to construct the SVG-based animated chart, while red/green selection states are applied to the points.

11andrey3

81% match

Loading thumbnail…

Brush() & Filter()

This example demonstrates interactive brushing and filtering on a time-series area chart of stock data. The visualization renders a blue filled area with overlaid circles representing daily values, plus a red dashed line marking the average. Using D3 v5, the chart employs `d3.area()`, `d3.scaleTime()`, and `d3.axisBottom()` for SVG rendering, while mouseover tooltips display date and value details. A brush component filters data points, highlighting selected circles in green while dimming others, with CSV data loaded via `d3.csv()`. The animation and interaction rely on D3’s selection and transition APIs.

BBrightPeace

81% match

Loading thumbnail…

Focus + Context Scatter Plots

This example demonstrates focus+context area charts using D3.js, with a linked brush that filters a detailed view. The main chart (focus) displays the full dataset as a filled area, while a smaller context chart beneath it shows the same data. When a brush is dragged across the context chart, it defines a time interval that automatically updates the focus chart's x-axis domain, enabling zooming and panning. The implementation uses Chiasm components for reactive data flow, with the brush interval acting as a shared state between the two views. The visualization effectively illustrates how brushing and linking can provide both overview and detail in time-series data exploration.

CCurran Kelleher

81% match