Fork of d3-simple-slider

100%

Fork of d3-simple-slider

✓ Published0🌍 Public

Last edited Feb 19, 2023

Created on Feb 19, 2023

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.

AI-generated description

This line chart shows one week of temperature (in degrees Celcius) in cities around the world. The data comes from Data Canvas - Sense Your City.

MIT Licensed

Similar vizzes

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

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

91% match

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

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

82% match

Loading thumbnail…

d3-simple-slider

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.

AAlainRo

81% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a custom time-based slider widget built with D3.js v5, rendered as an SVG element. The slider allows users to drag a handle across a timeline to select a date range, with tick marks displaying formatted dates or times depending on the duration. It uses `d3.scaleTime` for mapping dates to pixel positions and a custom drag interaction to update the handle. The code also includes a `triggerEvent` function that dispatches a message when the slider position changes, though the surrounding application logic is not shown.

Mmayuri-gosapphire

80% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a custom time-based slider widget built with D3.js v5, allowing users to drag a handle across a timeline to select a date range. The slider displays tick labels formatted as days or times depending on the span between start and end dates, and updates a handle position in response to drag events. It uses d3.scaleTime, d3.drag, and d3.timeFormat to map dates to pixel coordinates and render the interactive controls. The SVG rendering includes a track, overlay, ticks, and handle, with event handlers dispatching slider position changes to an external store.

Mmayuri-gosapphire

79% match

Loading thumbnail…

Fork of Blank Slate with Hot Reloading

This example presents an interactive range slider built with D3.js (version 7) and rendered as SVG. Two draggable circular handles on a horizontal track allow users to select a numeric interval between 0 and 100, with the current selection displayed below. The slider uses `d3.scaleLinear()` to map data values to pixel positions and `d3.drag()` to manage handle movement, constraining positions within the track and preventing handle overlap.

Jji3ji3ji3195@gmail.com

78% match