d3-simple-slider

100%

d3-simple-slider

✓ Published0🌍 Public

Last edited May 14, 2018

Created on May 14, 2018

This example demonstrates four interactive slider configurations built with the d3-simple-slider library and D3 v4, each handling a different data type and scale. The sliders showcase value selection for percentages, discrete integer steps, time-based data using JavaScript `Date` objects formatted with `d3.timeFormat`, and dense value arrays with custom tick marks. The code renders each slider as an SVG element via `d3.sliderHorizontal()`, binding change events to update text displays in real time, and includes reset links that programmatically set slider values. The implementation highlights the library’s flexibility in adapting to varied input formats while maintaining a consistent, user-friendly interface.

AI-generated description

Renders a simple interactive slider.

Inspired by The New York Times Is It Better to Rent or Buy?

forked from <a href='http://bl.ocks.org/johnwalley/'>johnwalley</a>'s block: <a href='http://bl.ocks.org/johnwalley/e1d256b81e51da68f7feb632a53c3518'>d3-simple-slider</a>

bsd-3-clause Licensed

Similar vizzes

Loading thumbnail…

d3-simple-slider

This example demonstrates a variety of interactive slider configurations using the d3-simple-slider library, built on D3 v5. It showcases simple, stepped, time-based, filled, ranged, and vertical sliders, along with alternative handles and transitions, with each slider updating a displayed value. The page includes extended examples inspired by a New York Times article and a color picker, all rendered as SVG elements within a Bootstrap layout. The sliders are created using `d3.sliderBottom` and `d3.sliderTop` APIs, with options for tick formatting, step values, and fill colors, and respond to user input via the `onchange` event.

Ggotyou007

88% match

Loading thumbnail…

time slider

This example showcases various interactive slider configurations built with D3 v5 and the d3-simple-slider library. It demonstrates core functionalities like simple continuous sliders, step-based sliders for discrete values, and time-based sliders using the `d3.timeFormat` and `d3.timeScale` for date handling. Additional features include filled sliders, range selection, vertical orientation, customized handles, and smooth transitions. The visualization also presents practical applications, such as a New York Times-style slider and a color picker, all rendered as SVG elements with Bootstrap styling for layout.

Mmanoj-soft

86% match

Loading thumbnail…

Fork of d3-simple-slider

This example demonstrates a slider component built with the d3-simple-slider library, rendered as SVG with animation support. It showcases various slider configurations, including simple, step-based, time-based, fill, range, and vertical orientations, plus extended features like alternative handles and transitions. The slider updates displayed values dynamically via the `onchange` event. The code integrates Bootstrap for layout and uses D3 v5 for DOM manipulation. Data is not explicitly sourced, though the slider’s range and tick formatting adapt to numeric, date, and percentage inputs.

Llimenzi

83% match

Loading thumbnail…

Fork of d3-simple-slider

This fork of d3-simple-slider demonstrates the basic and extended functionality of the slider component. It showcases six core configurations—simple, step, time, fill, range, and vertical—along with an alternative handle and a transition option. Each slider is paired with a live value display, updating on user interaction. The example also includes recreations of the New York Times rent-or-buy slider and a color picker, all rendered as interactive SVG elements using the d3.sliderBottom and related APIs.

AAdan Rodriguez

81% match

Loading thumbnail…

Fork of d3-simple-slider

This fork of d3-simple-slider demonstrates various interactive slider configurations, including simple, step, time, fill, range, vertical, and transition options. Built with D3 v5 and the d3-simple-slider library, the page also integrates a small multi-line chart that visualizes estimated death counts across different age brackets from the q3.csv dataset. The chart uses D3's scaleLinear, scaleTime, axisBottom, axisLeft, line, and curveCatmullRom APIs to render the data with SVG paths and animated transitions.

AAdan Rodriguez

80% match

Loading thumbnail…

D3 sliders

This example shows an interactive bar chart of a small dataset where dragging a vertical HTML range slider recolors bars below a threshold value from light blue to dark blue. The chart uses D3 version 7 scales (`scaleBand` and `scaleLinear`) to position and size SVG rectangles, and React is mentioned as the framework context. The slider’s `change` event triggers a D3 transition over 500 milliseconds to animate the fill color change, demonstrating linked interaction between an HTML input and D3-managed SVG elements.

KKaustav Sen

78% match

Loading thumbnail…

Slider test 1

A range slider, built with the d3-simple-slider library, selects an interval on a horizontal axis. The slider’s default value is set between 0.015 and 0.02, and its current selection is displayed as a formatted percentage range in a paragraph. A D3 v6 SVG visualization renders the control, with the slider’s fill color set to blue. The underlying data, drawn from a CSV file, is not used in the interaction.

Llarsboergo

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

78% match