Focus + Context

100%

Focus + Context

✓ Published0🌍 Public

Last edited Jun 1, 2020

Created on May 31, 2020

This visualization depicts Apple’s stock price over time as a blue area chart, using a focus+context technique to explore the data. A smaller overview chart shows the full time series, while a gray brushed region can be dragged to pan or resized to zoom the main chart’s date range. The code uses D3 v5’s `d3.brushX` for the interactive selection, `d3.scaleUtc` and `d3.scaleLinear` for axes, and SVG `clipPath` to constrain the focus area. Data comes from Yahoo Finance via CSV.

AI-generated description

MIT Licensed

Similar vizzes

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.

深深度碎片

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

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

深深度碎片

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

77% match

Loading thumbnail…

HTML Starter

This example shows a time series of monthly stock price data with a focus and context view. The main chart displays the price trend as an area chart, while a smaller brushable overview allows users to select a date range. The selection is reflected in the main chart through a coordinated zoom and pan interaction. The visualization is built with D3 v5, using `d3.brushX` for the range selection and `d3.zoom` for pan and zoom transforms. The SVG rendering uses `d3.area` with a monotone curve, and the data is loaded from a CSV file containing date and price pairs.

RRostyslav

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

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

Loading thumbnail…

D3.chart Boilerplate Example

A multi-panel financial chart displays Apple stock price trends from 2010, with closing prices, a moving average line, and trade volume bars in the main view. A separate brushable context area below enables zooming and panning across the full date range. Built with D3 v4, the visualization uses `d3.timeParse`, `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, `d3.area`, and `d3.brushX` to render the SVG elements from the included aapl.csv dataset. Styling is defined in separate CSS and Stylus files.

深深度碎片

76% match