Brush Snapping

100%

Brush Snapping

✓ Published0🌍 Public

Last edited Aug 8, 2019

Created on Aug 14, 2013

A time-series brush snaps to day boundaries upon release. The example shows a timeline from August 2013 with a grid of 12-hour ticks; selecting a range triggers an `end` event, and the brush smoothly transitions to a rounded day-aligned selection using `brush.move` with a D3 transition. If rounding yields an empty interval, the code uses `timeDay.floor` and `timeDay.offset` to ensure a valid one-day range. The visualization uses d3.v4, an SVG axis with custom tick formatting, and an animated brushing interaction over a date scale.

AI-generated description

This brush snaps to day boundaries. On release, the brush fires an end event, allowing a listener to modify the brush selection. Using brush.move to initiate a transition, the brush smoothly interpolates from the original selection to the rounded selection. Compare this approach to using immediate snapping while brushing.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Brush Snapping II

A time-series brush snaps selections to day boundaries on a date axis. The visualization uses a D3 v4 SVG chart with a horizontal brush, where brushing fires a *brush* event that rounds the selection’s start and end dates to the nearest day. The code uses `d3.brushX` with an `.on("brush")` listener, `d3.event.selection.map(x.invert)`, `d3.timeDay.round`, and `d3.select(this).call(d3.event.target.move, …)` to adjust the brush’s extent. The axis grid highlights hourly ticks with reduced opacity.

Mmbostock

93% match

Loading thumbnail…

Brush Snapping III

This example shows three clusters of 300 normally distributed points each, colored by cluster using `d3.schemeCategory10`, with visible x- and y-axes. A horizontal brush, created with `d3.brushX`, snaps its selection to integer coordinates on the x-axis. During a brush drag, the code maps the selection back to data space, rounds the values, and uses `d3.event.target.move` to reposition the brush, ensuring the selection always covers a complete unit interval.

Mmbostock

79% match

Loading thumbnail…

Brushing

This example demonstrates brushing on a scatterplot of borehole data, plotting depth against time. Users drag a horizontal brush across the chart to zoom the x-axis into a selected date range, with circles and the axis smoothly transitioning over one second. The visualization uses D3 v4 APIs including `d3.brushX`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.transition` to update the view, while the data is loaded as CSV from an external URL. SVG rendering animates the filtered result.

SShane Carey

78% match

Loading thumbnail…

Brush Transitions

This example demonstrates brush transitions, a feature introduced in D3 3.3, where a rectangular brush automatically animates back to its default position after the user finishes dragging or selecting a new region. The visualization shows 5,000 random points with a brush overlay; as the brush moves, points within the current extent are highlighted red using a quadtree-based search. The code uses `d3.svg.brush`, `d3.geom.quadtree`, and `d3.scale.identity`, with SVG circles for rendering. Applying the brush to a `transition` (rather than a selection) smoothly returns the brush to its original extent, and interacting with the brush interrupts any ongoing transition.

FFrissAnalytics

78% match

Loading thumbnail…

Brush Transitions

A scatterplot of 5,000 random points displays a red brush selection over a central region. Dragging or creating a new selection highlights points within the brush extent, while releasing the mouse triggers a smooth animated transition of the brush back to its original 100-by-100 pixel default position. The example demonstrates D3 3.3's brush transitions, implemented with `d3.svg.brush`, a quadtree for efficient point lookup, and `transition.call` to reapply brush extents during animation.

Mmbostock

77% match

Loading thumbnail…

Brush Transitions

Five thousand random points are drawn in an SVG scatterplot. A draggable brush region highlights points inside it in red, and after the mouse is released, the brush smoothly animates back to its original position from the default extent. The example uses D3’s `d3.svg.brush`, `d3.geom.quadtree` for efficient point selection, and a transition on the brush call to animate the extent, interrupting any ongoing transition if the user interacts again.

FFrissAnalytics

76% match

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

76% match

Loading thumbnail…

The Brush

A line chart displays randomly generated data points, with a transparent red brush overlay that highlights a selected data point and its corresponding value label. Dragging the brush across the chart triggers the highlighting, which animates smoothly. Built with D3 v3, the visualization uses SVG rendering, `d3.svg.brush()` for selection, and `d3.svg.axis()` for gridlines and ticks, with all data generated randomly in the browser.

11Cr18Ni9

75% match