Focus+Context+Scanning

100%

Focus+Context+Scanning

✓ Published0🌍 Public

Last edited Sep 23, 2016

Created on Sep 23, 2016

This example demonstrates a focus+context area chart for exploring daily price data over time. It shows a large main chart for detailed viewing and a smaller overview chart below it. Users can click and drag a brush in the context panel to pan or zoom the focused view. The visualization uses D3 v3's `d3.svg.brush` component for both the context selection and a scanning feature in the main chart, which reveals a dropline and circle on mouseover. The data is loaded from a CSV file, and the SVG rendering includes animated brush interactions.

AI-generated description

This examples demonstrates how to use D3's brush component to implement focus + context zooming. Click and drag in the small chart below to pan or zoom.

forked from <a href='http://bl.ocks.org/vlandham/'>vlandham</a>'s block: <a href='http://bl.ocks.org/vlandham/4215939'>Focus+Context via Brushing</a>

mit Licensed

Similar vizzes

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

88% match

Loading thumbnail…

Gist d66394e7abd5ee805eeb82284db3106f

This example combines d3.brush and d3.zoom to implement Focus + Context navigation for a stock price dataset. The main panel displays daily candlestick bars (open, high, low, close) and an area chart of cumulative returns, while a smaller context panel shows the full price range. Dragging the brush in the context panel updates the focus domain, and panning or zooming in the focus area conversely adjusts the brush. The code uses d3.area, d3.axisBottom, and d3.axisLeft, with data loaded from a CSV file.

深深度碎片

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

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

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

84% 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.

深深度碎片

84% match

Loading thumbnail…

Area Chart with Brushing

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.

BBrightPeace

84% match

Loading thumbnail…

Context+brush+Analytics

This example visualizes the Nasdaq Composite Index as a time series line chart, with a linked brush-based context view below for zooming and panning. Users can brush over the main chart to scan values, revealing draggable drop lines that display precise date and price details on mouseover. The visualization uses D3.js v3 with SVG rendering and animations, employing `d3.svg.brush`, `d3.svg.line`, and `d3.time.scale` to handle interactions and data from a CSV file. A secondary scan brush overlays the main chart for additional exploration.

RRicCheng

84% match