Fork of Blank Slate with Hot Reloading

100%

Fork of Blank Slate with Hot Reloading

✓ Published0🌍 Public

Last edited Oct 28, 2024

Created on Oct 28, 2024

Forked from 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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 range selecter

This example shows an interactive range selector built with D3 v7, displayed as a horizontal slider with two triangular drag handles positioned over an axis. Users adjust the left and right handles to select a numeric interval between a minimum of 34 and a maximum of 100, with the current range logged to the console on release. The visualization renders in SVG and uses d3.scaleLinear, d3.axisBottom, d3.drag, and d3.symbolTriangle to manage the scale, ticks, and handle movement. The handles are constrained so they cannot cross, and their positions are recalculated using scale inversion.

AAlpineStranger

80% match

Loading thumbnail…

Fork of Blank Slate with Hot Reloading

This example creates a minimal blank slate visualization with a single circle positioned at fixed coordinates. It demonstrates a live-updating D3.js setup where the SVG canvas resizes to its container and renders one data point. The code uses D3’s `select`, `selectAll` with data joins, and `join` to manage the SVG and circle elements, with hot reloading enabled for rapid development iteration.

RRyan Offstein

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

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

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

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

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

78% match

Loading thumbnail…

Range Slider

This example presents a range slider visualization that lets users drag a handle to select a numeric value between 0 and 100. A large circular dragger and a triangular pointer both respond to mouse drags, with a label updating to show the current percentage. The implementation uses the d3-marcon library for layout, along with d3-scaleLinear for mapping data values to pixel coordinates, d3-drag for interactive dragging, and d3-axisBottom for rendering the scale. The slider’s body, axis, and dragger are styled via CSS classes.

FFrissAnalytics

78% match