Brush v4

100%

✓ Published0🌍 Public

Last edited Jun 19, 2017

Created on Jun 19, 2017

This example demonstrates a brush that snaps to day boundaries after the user releases it. The brush initially captures a selection over a time-scaled axis (`d3.scaleTime`), then on the `end` event, the `d3.brushX` handler rounds the selected dates to the nearest day using `d3.timeDay.round`. If the rounded selection is empty, it falls back to `floor` and `offset`. The brush then smoothly transitions to the snapped selection via `d3.transition` and `brush.move`, rendering the grid as SVG with day and hour ticks.

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.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/6232537'>Brush v4</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Brush Snapping

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.

Mmbostock

91% match

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

90% match

Loading thumbnail…

Brush Handles d3v4 II

This example demonstrates a D3 v4 brush with custom resize handles on a scatterplot of 800 random points. The brush selects a horizontal range along the x-axis, highlighting points within the selection by adding an “active” class. Custom path-based handles replace the default brush edges, using a `brushResizePath` function to draw arrow-like grips. The code uses `d3.brushX`, `d3.axisBottom`, and `d3.scaleLinear`, with the brush’s `start`, `brush`, and `end` events driving the highlighting logic via `d3.event.selection`.

FFrissAnalytics

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

d3-brush example

A minimal interactive brush demonstration renders a 400 by 400 SVG rectangle, where the user drags to select a rectangular region. The example uses the d3-brush API from D3 version 4 to track selection coordinates, logging the starting and ending positions to the browser console during brushing and reporting the absence of a selection when the brush is cleared. The code defines the brush extent to match the full drawing area and attaches start, brush, and end event handlers.

FFrissAnalytics

78% match

Loading thumbnail…

Brush Slider Test

This example demonstrates a brush-style slider that filters a numeric range, displaying the selected minimum and maximum values as text above the axis. Rendered as SVG, it uses D3 v4’s `d3.brushX()` to create the interactive selection and `d3.brushSelection` to read the current range. The x-axis is generated with `d3.axisBottom` and a linear scale, with the brush initially positioned between 20 and 50 via `brush.move`. The code also notes key API changes from D3 v3 to v4, such as handling brush extents on the brushed element.

FFrissAnalytics

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

77% match

Loading thumbnail…

Brush Handles d3v4 II

This example demonstrates d3-brush with custom resize handles in D3 v4, highlighting the brush selection over a scatterplot of 800 random points. It shows how brushed points become highlighted with a red stroke, while custom path-based handles render on the left and right edges of the selection. The implementation uses d3.brushX, d3.scaleLinear, and d3.axisBottom, with the handle path defined via a custom function resembling the crossfilter approach. The brush’s start and brush events trigger the brushmoved function, which updates point activity and handle positioning based on the current selection.

PPhilippe Rivière

77% match