fresh block

100%

✓ Published0🌍 Public

Last edited Feb 3, 2018

Created on Feb 3, 2018

This example shows an interactive slider that controls the background color of the page, with a draggable circular handle positioned along a horizontal axis labeled in degrees from 0 to 180. A brushed value updates the hue of the background using `d3.hsl`. The code uses D3 v3’s `d3.svg.brush`, `d3.scale.linear`, and axis components to build the slider, while the `brush` and `brushend` events handle dragging and snap the value to the nearest ten degrees. The rendering is done through SVG elements, with a transition animating the initial brush extent.

AI-generated description

Since Mike is upgrading to d3.v5, a lot of old examples that works for d3.v3 is already gone. I'll just put this here in case anyone somehow need it.

I use this slider at my work here : http://scienic-data.com/normalized-stacked-barchart-browser-usage-statistic-full/

mit Licensed

Similar vizzes

Loading thumbnail…

Drag Slider

This slider example demonstrates interactive color selection by dragging a circular handle along a horizontal track. The handle position maps linearly to hue values from 0 to 180 degrees, updating the SVG background color in real time. Built with D3 v4, it uses `d3.drag` for pointer interaction and `d3.scaleLinear` with clamping. A transition animates the initial hue from 0 to 70 on load, while tick labels show degree values. The visualization renders entirely in SVG, with layered track lines for visual depth.

Mmbostock

79% match

Loading thumbnail…

MyDragSlider

The graphic displays a draggable slider that controls the background color of the SVG canvas, with a shaded track, tick marks, and a circular handle. Dragging the handle changes its horizontal position along a linear scale from 1990 to 2014, and the background hue updates to a corresponding HSL color. This example uses d3.v4, SVG elements, and the `d3.drag()` API to handle pointer interactions, while the slider’s track and ticks are built with standard D3 selection and scale methods.

QQ-Zhao

78% match

Loading thumbnail…

Smooth Slider

A slider demonstrates smooth color interpolation between hues. Dragging the handle sets a target hue, and the background color transitions toward it with an exponential easing effect, creating a fluid visual response. The example uses D3.js v4 with a linear scale mapping degrees to pixel positions, a custom drag interaction via `d3.drag()`, and a timer-driven tween to animate the hue value. SVG elements include styled tracks, ticks, and a circular handle, while the background color updates via `d3.hsl()`.

Mmbostock

77% match

Loading thumbnail…

Blank Canvas

A slider controls the background hue of an SVG canvas. Dragging the handle updates the color in real time, with tick labels showing the degree value. The visualization uses d3.drag for interaction, d3.interpolate for a smooth intro animation, and d3.hsl to convert the slider value to a color. The code imports d3 via `import {} from 'd3'` and renders with SVG elements.

RRostyslav

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…

D3 Slider

A D3 slider demonstrates a draggable handle on a horizontal track, showing how a single numeric value can be changed through direct manipulation. The code uses an SVG line for the track and a circle for the handle, with the drag behavior updating the circle’s `cx` attribute based on the pointer’s x-coordinate. The handle’s position is clamped between the track’s endpoints using a ternary expression, and the `d3.behavior.drag` API handles the drag events. The example renders entirely with SVG, and the interaction logic is implemented in plain D3 without additional libraries.

CCurran Kelleher

76% match

Loading thumbnail…

D3.js Round Slider

This example shows a round slider built with D3.js, where a draggable handle moves along a circular track to represent a value. The visualization renders an SVG circle as the slider’s circumference and a small draggable dot that users can click and pull around the ring. The code uses D3’s `d3.drag` and `d3.event` to handle pointer interactions, calculating the handle’s position via trigonometric functions (`Math.acos`, `Math.sin`, `Math.cos`) based on its distance from the center. The slider’s state is stored in a simple data array, and the handle’s color changes from steelblue to red while dragging, as defined in the accompanying CSS.

PPhilippe Rivière

76% match

Loading thumbnail…

fresh block

This example shows a simple line chart with circular dots plotted against a linear scale, where both axes use a value range of 0 to 1. The visualization begins with a static rendering, but the dots respond to mouseover and mouseout events, changing color to red and scaling up briefly before returning to black. The code uses D3 v4 with `d3.scaleLinear`, `d3.line`, and `d3.axisBottom`/`d3.axisLeft` to generate the chart, while SVG circle elements handle the interactive hover behavior via `transition().duration(500)`. Data is randomly generated with `d3.randomUniform`, and the chart fills the browser window.

663anp3ca

74% match