Example of slider

100%

Example of slider

✓ Published0🌍 Public

Last edited Jan 26, 2017

Created on Jan 26, 2017

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.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/7d0abfbc501e6419365d4380c006895d'>fresh block</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/b5a6e4317942766843e992b0b31d0840'>fresh block</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/64f796edf1dafdd168a1f5e8425eac6c'>fresh block</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/9ed2bf9222d348d71e5aa626e55391e6'>fresh block</a>

mit Licensed

Similar vizzes

Loading thumbnail…

slider

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

Aashpradhan01123

79% match

Loading thumbnail…

sliders

This visualization demonstrates interactive sliders built with D3.js, where each slider’s filled portion changes color dynamically as the user drags the handle. The sliders use a brush interaction to capture input, and the fill color is mapped through a custom cubehelix color scale (d3.scale.cubehelix) based on the slider’s current value. The SVG rendering includes horizontal and vertical orientations, with text labels and a clean, minimal design. The code also includes an animated transition example, though it is commented out.

SSpaceActuary

78% match

Loading thumbnail…

Scatter Plot With Slider

This scatter plot displays country-level data with latitude and longitude mapped to the x and y axes. A slider control dynamically adjusts the maximum x-axis domain, triggering a smooth 1000-millisecond transition that repositions all circles. Built with D3.js v4 and the d3-simple-slider library, the visualization uses SVG rendering and includes interactive tooltips on hover. Data is loaded from a remote CSV file hosted on GitHub.

Ssaurabh18n

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

Scatter Plot With Slider

A scatter plot displays countries positioned by latitude and longitude, with each point colored orange and labeled via a tooltip on hover. A slider below the chart adjusts the upper limit of the x-axis, triggering a smooth 1000-millisecond transition that rescales the domain and repositions the circles. Built with React and D3 v4, the code uses d3.csv for data loading, d3.scaleLinear for axes, and d3.transition for animation. The data comes from a GitHub-hosted CSV file, and the visualization is rendered as SVG.

GGa1307988

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

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

76% match

Loading thumbnail…

sliders

A set of draggable horizontal and vertical range sliders lets a user adjust a value, and each slider’s fill color shifts through a cubehelix color ramp. Built with D3.js version 3.5.5, the sliders use the `d3.svg.brush` API to manage drag interactions, with the brush extent mapped through a linear scale. A separate `cubehelix.min.js` script provides the `d3.scale.cubehelix` color interpolation, which is applied to the slider’s value to produce a smooth, perceptually uniform gradient. The SVG output is rendered directly in the browser, with the slider bars updating live during the drag.

SSpaceActuary

75% match