Brush Slider Test

100%

Brush Slider Test

✓ Published0🌍 Public

Last edited Jan 28, 2017

Created on Mar 18, 2016

This example demonstrates a brush-style slider for selecting a numeric range from 0 to 100, displaying the current selection as two numbers above the axis. Built with D3 v4, it uses a `d3.brushX` brush on an SVG element with a `d3.axisBottom` scale. The brush’s extent is initialized to [20, 50] via `brush.move`, and the `brushed` event handler retrieves the selection using `d3.brushSelection`, then maps it back to the scale with `x.invert` to update the displayed values. The rendered output is an SVG axis with a movable brush handle, serving as a filter for downstream charts.

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.

mit Licensed

Similar vizzes

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

95% match

Loading thumbnail…

Simple brush

A simple brush interface displays a numeric range selection on an empty plot with an X axis. Dragging the brush updates a text label showing the current extent values. The example uses D3 version 3.5.5 with `d3.svg.brush` and `d3.scale.linear`, rendering via SVG. Data consists of 800 random numbers generated with `Math.random`, though they are not visualized.

RRobinL

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

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

79% match

Loading thumbnail…

sliders

Four interactive sliders demonstrate d3.svg.brush with a custom cubehelix color scale. Each slider maps a numerical value to a changing fill color via `d3.scale.cubehelix`, creating a rainbow gradient that transitions along the slider track as the brush extent is dragged. The SVG rendering uses rect elements for the slider bar and background, with a Montserrat font for labels. The code is built with D3 3.5.5 and includes a cubehelix interpolation plugin, showing how brush events can drive continuous color updates.

SSpaceActuary

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

78% match

Loading thumbnail…

Brush Handles

This example shows a D3.js scatterplot with 800 random data points, where a brush component selects points along the x-axis. Visible, draggable resize handles replace the default invisible brush boundary, with oversized arc-shaped paths making the interaction area obvious. The code uses `d3.svg.brush`, `d3.svg.arc`, and `d3.svg.axis` with an SVG rendering. Circle opacity changes during selection, and selected points receive a red stroke, while the brush extent itself remains semi-transparent. The data is generated via `d3.range(800).map(Math.random)`.

Aandrewthornton

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

78% match