Brush Slider Test

100%

Brush Slider Test

✓ Published0🌍 Public

Last edited Sep 3, 2018

Created on Sep 3, 2018

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.

AI-generated description

Update 1/27/2017

This has been updated to d3.js v4 with comments explaining some of the changes. Brushes have been one of the more difficult aspects of moving from v3 to v4, but updating this block has clarified a lot for me.

Testing a brush-style slider, loosely based on Mike Bostock's <a href="https://bl.ocks.org/mbostock/4349545">Brush Handles example.</a>

The number feedback at the top can be sent to a chart as a filter.

forked from <a href='http://bl.ocks.org/alexmacy/'>alexmacy</a>'s block: <a href='http://bl.ocks.org/alexmacy/eb284831aff6f9d0119b'>Brush Slider Test</a>

forked from <a href='http://bl.ocks.org/jerryorta-dev/'>jerryorta-dev</a>'s block: <a href='http://bl.ocks.org/jerryorta-dev/c87e857e01071197ac693e7de5cb2cc4'>Brush Slider Test</a>

mit Licensed

Similar vizzes

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

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

80% match

Loading thumbnail…

Brush Handles

This example shows an 800-point scatterplot with a draggable, visible brush handle range selection. The brush is rendered as two semi-circular handles on either side of the selection extent, which the user can drag to resize the range. The code extends `d3.brushX` with custom `path` elements and uses `d3.arc` to define their shapes. When the brush moves, a `brushmoved` function updates the handle positions and highlights the selected circles by toggling an "active" class, which changes their fill opacity.

FFrissAnalytics

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

79% match

Loading thumbnail…

Brush I

A brushable scatterplot displays 300 randomly generated points. A horizontal brush initially selects a range, highlighting points within it in red with a brown stroke. The example uses d3.brushX to define the brush and handles the brush event to update the selection state. Clicking re-centers the brush using a fixed width, demonstrating interactive selection on an SVG rendered with d3.scaleLinear and d3.axisBottom.

MMorganhaoyu

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

78% match

Loading thumbnail…

Range Slider D3 V4

This example shows an interactive range slider built with D3 v4, where a user can brush along a band scale to select a subset of values from a fixed array of numbers 1 through 10. The visualization displays the current selection as an orange arrow and a label showing the selected range. The slider includes adjustable step size, slider size, and initial index via HTML inputs, with an "Apply" button to update the scale dynamically. The code relies on `d3.scaleBand`, `d3.brushX`, and SVG element manipulation to compute snapped positions and render the selection handle.

CChandrakantThakkarDigiCorp

78% match

Loading thumbnail…

Brush Handles

This example shows a scatterplot of 800 random points on a linear x-scale, with a draggable d3.brushX selection. Custom semicircular path handles are attached to the brush’s west and east edges, letting users resize the selection by dragging these visible arcs instead of the invisible brush boundary. The brushmoved handler updates the handle positions and highlights points inside the selected range. It uses d3.brushX, d3.axisBottom, d3.randomNormal, and d3.arc for the handle shapes, rendering to SVG.

Mmbostock

77% match