Fixed size slider

100%

Fixed size slider

✓ Published0🌍 Public

Last edited Sep 16, 2017

Created on Sep 16, 2017

This example shows a line chart of 200 randomly generated data points, with a fixed-size brush slider that can only be moved side to side. The chart uses D3 v4 with SVG rendering, where the brush is created using `d3.brushX()` and initially positioned over a range of data points. The code explicitly removes the brush handles and overlay to prevent resizing, leaving only the movable brush window. The line is drawn with `d3.line()` and scaled using `d3.scaleLinear()`, while axes are added via `d3.axisBottom` and `d3.axisLeft`.

AI-generated description

Line chart with fixed size slider. Slider can only be moved from side to side.

Similar vizzes

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

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

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

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

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

73% match

Loading thumbnail…

Scatter plot brushing

This example demonstrates interactive brushing on a scatter plot, where users can drag a rectangular selection to highlight points within that region in orange while dimming others remain blue. The visualization uses 300 randomly generated data points from a normal distribution, rendered as SVG circles with axes. The brushing interaction is implemented using d3.brush, with the brushed event updating circle fills based on the selection bounds, while brushended resets the colors with a smooth transition when the brush is cleared. The code uses d3.scaleLinear for positioning and d3.axisBottom/axisLeft for axes.

EEfratVil

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

72% match

Loading thumbnail…

Untitled

This example shows a brushable line chart for exploring genomic coverage data, plotting the percentage of covered positions along a chromosome. The main focus panel displays multiple colored lines, while a smaller context panel below provides a zoomed-out overview. Using D3.js v5, the visualization employs `d3.brushX` to allow brushing on the context chart, which updates the x-axis domain of the focus panel via a brush event handler. Data is loaded from a CSV file with `d3.csv`, and lines are rendered as SVG paths using `d3.line` with scales from `d3.scaleLinear`.

FFlorian Breitwieser

72% match