linear gradient with draggable stops.

100%

linear gradient with draggable stops.

✓ Published0🌍 Public

Last edited Feb 19, 2025

Created on Aug 30, 2015

This example demonstrates an interactive linear gradient with draggable axis ticks, where the color stops align proportionally to their corresponding domain values. It shows how gradient offsets update in real time as users drag ticks horizontally to modify the domain. Built with D3.js (v3), it uses a linear scale, SVG `linearGradient` definitions, and drag behavior to redraw the gradient dynamically. The color scheme is selectable from a dropdown, and the domain regenerates randomly, while tick labels display both the value and its percentage offset. Rendering is handled via SVG, with data represented as hardcoded hex color ranges and generated numeric domains.

AI-generated description

Linear gradient with stops offset proportionally to the input domain value they represent.

For example given the domain: [0, 5, 10, 50, 100] And the range: ["#190729", "#191996", "#2F972F", "#FFFF66", "#FF1919"] The stops would be offset by: 0%, 5%, 10%, 50%, 100%

The colour at the percentage offset is represented by the hex value at the same index position in the scheme, colours between stops are interpolated in a linear fashion.

When a scheme is selected a random domain is generated and the gradient is redrawn using it. Information on the current domain and selected range is given along with the stop percentages and the domain values that they correspond to.

Aditionally the axis ticks can be dragged horizontally to alter the gradient.

Run gist here

Similar vizzes

Loading thumbnail…

Linear Gradient

Two horizontal SVG rects demonstrate linear gradients: a static HTML/SVG version with hardcoded stops and a dynamic D3 v4 version using `d3.scaleLinear` for the color range. The D3 code programmatically appends `stop` elements to a `linearGradient` definition, mapping five color values across offsets from 0% to 100%. Both rects are stroked in black, and the example contrasts explicit markup with data-driven gradient creation. The gradient fills are applied via the `fill` attribute referencing the gradient IDs, with the D3 version relying on the `d3-selection` API to construct the SVG structure.

EEfratVil

77% match

Loading thumbnail…

Drag Slider

This slider example demonstrates interactive color selection by dragging a circular handle along a horizontal track. The handle position maps linearly to hue values from 0 to 180 degrees, updating the SVG background color in real time. Built with D3 v4, it uses `d3.drag` for pointer interaction and `d3.scaleLinear` with clamping. A transition animates the initial hue from 0 to 70 on load, while tick labels show degree values. The visualization renders entirely in SVG, with layered track lines for visual depth.

Mmbostock

75% match

Loading thumbnail…

Linear Gradient Rotation

A linear gradient filled square rotates interactively based on a slider input, demonstrating how SVG gradient transforms can animate smoothly. The square’s fill uses a vertical linear gradient with eight evenly spaced color stops, mapped from a d3.scaleLinear over a range of pastel hues. Dragging the range input triggers a transition that applies a `gradientTransform` rotation attribute to the gradient definition, rotating the color bands within the fixed square. The code relies on d3.v4, SVG, and `transition.attr` to update the rotation, while the slider’s value directly drives the angle. No external data is used; the visualization purely illustrates gradient manipulation and interaction.

EEfratVil

75% match

Loading thumbnail…

D3 linear slider

This example shows a draggable linear slider rendered as an SVG triangle handle that moves along an axis. Dragging the handle updates a numeric value between 34 and 100, logged to the console via a callback. The slider is built using D3 v7's `scaleLinear` for positioning, `axisBottom` for tick marks, and `drag` for user interaction. The handle is drawn with `symbol` and `symbolTriangle`, while `slideScale.invert` converts the dragged position back into the data domain.

AAlpineStranger

73% match

Loading thumbnail…

Pan & Zoom Axes

This example shows interactive pan and zoom axes, where a colorful gradient-filled rectangle serves as the plotting area and responds to user drags and wheel gestures. The visualization uses d3-zoom to handle transforms, which rescale the linear scales for both the x and y axes via *transform*.rescaleX and *transform*.rescaleY, updating the axis tick marks and grid lines accordingly. The same transform is applied directly to the SVG rectangle using the SVG transform attribute, while a reset button triggers a smooth transition back to the initial view. The code relies on d3.axisBottom and d3.axisRight to render the axes, with a custom linear gradient defined in SVG defs for the background fill.

GGerardoFurtado

72% match

Loading thumbnail…

MyDragSlider

The graphic displays a draggable slider that controls the background color of the SVG canvas, with a shaded track, tick marks, and a circular handle. Dragging the handle changes its horizontal position along a linear scale from 1990 to 2014, and the background hue updates to a corresponding HSL color. This example uses d3.v4, SVG elements, and the `d3.drag()` API to handle pointer interactions, while the slider’s track and ticks are built with standard D3 selection and scale methods.

QQ-Zhao

71% match

Loading thumbnail…

Linear Gradient

This example demonstrates a full-screen rectangle filled with a diagonal linear gradient. The gradient transitions from a solid green color at the top-left corner to a solid red color at the bottom-right corner, using the `pad` spread method. The visualization is rendered as SVG, constructed with the D3.js v3 library. It uses `d3.select` to append an `svg` element, defines a `linearGradient` inside a `defs` block with two `stop` elements, and applies the gradient as a fill via a URL reference.

Mmbostock

71% match

Loading thumbnail…

Axis Transition

A linear x-axis centered vertically in a full-screen SVG repeatedly updates its domain to a random value between 10 and 10,000 every second. Each update triggers a smooth transition of the axis tick positions using D3 v4’s `d3.interval` and the `.transition().call(x_axis)` pattern with `d3.axisBottom`. The example is built with the `d3-marcon` helper library for margin conventions and renders purely as a demonstration of animated scale-domain changes.

FFrissAnalytics

71% match