slider

100%

✓ Published1🌍 Public

Last edited Jul 25, 2020

Created on Jul 25, 2020

A playable slider scrubs through a date range from January to July 2020, with a draggable handle and animated play button. The time-based scale uses `d3.scaleTime` with `d3.drag` for interaction, and the handle position updates a text label showing the formatted date. The animation advances the slider via `setInterval`, incrementing the current value until it reaches the end. Data comes from `circles.csv`.

AI-generated description

A bare minimum HTML page.

Similar vizzes

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

80% match

Loading thumbnail…

Example of slider

A slider controls a dynamic scatterplot of 20 points, each representing a year from 2000 to 2020, with x and y positions generated randomly. The visualization shows how point positions change across years as the user drags the range input. The code uses D3.js v4 to bind data, create SVG circles, and update them via a transition. The slider’s input event triggers a filter on the pre-generated dataset, updating the circles’ coordinates and the displayed year label. Axes are rendered using d3.axisBottom and d3.axisLeft, with color mapping via d3.scaleOrdinal.

GGerardoFurtado

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

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

77% match

Loading thumbnail…

Untitled

This interactive visualization displays dated events as colored circles along a timeline, with a draggable slider and play button controlling the temporal view. A single circle represents each entry in the `circles.csv` dataset, positioned by date and colored using `d3.hsl` based on the date value. The animation smoothly transitions circle radii as new data points appear. The code leverages d3.v4 APIs including `d3.scaleTime`, `d3.drag`, and `d3.csv`, rendering SVG elements with a React-compatible setup. A step function advances the slider position, triggering updates to the plot.

NNathanGBIM

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

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

77% match