Fixed size slider

100%

Fixed size slider

✓ Published0🌍 Public

Last edited Sep 4, 2018

Created on Sep 4, 2018

A line chart displays 200 randomly generated data points, where the y-values follow a normal distribution. A fixed-size brush selection highlights a narrow range of data, and the brush can only be dragged horizontally, not resized. The visualization uses D3 v4 with `d3.brushX` to create the slider, while the chart itself is rendered as an SVG path via `d3.line`. The code removes the brush handles and overlay to enforce the fixed selection size.

AI-generated description

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

forked from <a href='http://bl.ocks.org/EfratVil/'>EfratVil</a>'s block: <a href='http://bl.ocks.org/EfratVil/5edc17dd98ece6aabc9744384e46f45b'>Fixed size slider</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Fixed size slider

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`.

EEfratVil

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

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

75% match

Loading thumbnail…

Brush Slider Test

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.

Aalexmacy

75% match

Loading thumbnail…

Brushable Horizontal Bar Chart - I

This example shows a brushable horizontal bar chart that lets viewers explore a large, randomly generated dataset by adjusting a selection box in a mini chart on the right. The main chart on the left displays the selected bars in detail, with the y-axis labels and bar lengths updating based on the brush extent. The chart uses D3 v3 with SVG rendering, employing `d3.svg.brush` for the interactive selection, `d3.scale.ordinal` and `d3.scale.linear` for scales, and an ordinal brush pattern adapted from an external example. Scrolling the mouse wheel also moves the brush, and resizing handles allow users to change the number of visible bars.

SSav10

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

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

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

72% match