Eased Scale

100%

✓ Published0🌍 Public

Last edited Nov 15, 2016

Created on Jul 1, 2016

A single horizontal axis spans the width of the SVG canvas, with tick labels evenly spaced from 0 to 1 in the domain. The example applies a custom interpolator to a d3.scaleLinear continuous scale, easing the mapping so that intermediate positions follow a quadratic in-out curve rather than a linear progression. The code defines an easeInterpolate function that wraps d3.interpolate and passes the eased time value to the axis position. This demonstrates how to inject a d3.easeQuadInOut easing function into the scale’s interpolation, affecting only the spacing of tick marks rather than the data values.

AI-generated description

This example demonstrates how to ease an interpolator for use with a continuous scale. I’m not sure exactly why you would do this… but it’s possible! An alternative (and probably simpler) approach would be to create a sequential scale with a fixed output interpolator.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Easing Functions II

Easing Functions II displays D3’s built-in easing functions in “out” mode across a grid of small multiples, with each chart plotting the normalized time *t* on the x-axis against the eased time *ease(t)* on the y-axis. The visualization uses d3.svg.axis and d3.svg.line to render axes and curves, with hover interactions highlighting individual functions in red. It embeds pre-release D3 4.0 easing code via a gist, acknowledging a known bug in D3 3.x for elastic and bounce easing. The SVG output is generated with d3.scale.linear for both axes.

Mmbostock

80% match

Loading thumbnail…

Easing

This interactive chart visualizes the easing functions from the d3-ease library, plotting normalized time *t* on the *x*-axis against the eased time *ease(t)* on the *y*-axis. A dropdown menu lets the viewer select among 28 easing functions, and animated dots trace the progress of a 3-second cycle along the selected curve. The SVG visualization uses `d3.scaleLinear`, `d3.line`, `d3.axisBottom`, and `d3.axisLeft` for the plot, while a `d3.timer` drives the animation. The chart is built with D3 v4 alpha and rendered as SVG.

Mmbostock

78% match

Loading thumbnail…

Easing Functions III

This chart compares D3’s built-in easing functions in “in-out” mode by plotting each as a line on a shared grid. The x-axis shows normalized time t from 0 to 1, and the y-axis shows the eased output ease(t). Each function is rendered as an SVG path using a d3.svg.line generator, with axes created via d3.svg.axis. The code includes a pre-release D3 4.0 easing library, and hovering highlights a line in red.

Mmbostock

77% match

Loading thumbnail…

Easing

A dropdown menu selects one of 26 easing functions from d3-ease, and the chart renders its curve as an SVG line path with axes showing normalized time t from 0 to 1 on the x-axis and eased time ease(t) on the y-axis. Two animated dots trace the curve: one moves along the path while the other slides vertically, both updating via d3.timer every 3 seconds. The visualization uses d3.scaleLinear, d3.line, and d3.axisBottom/Left with SVG rendering, and changes the function dynamically by reading the select element’s value to call the corresponding d3.ease method.

FFrissAnalytics

77% match

Loading thumbnail…

Easing Functions

This chart displays 31 of D3’s easing functions in “in” mode, plotting each function as a line across a square coordinate system. The x-axis shows normalized time from 0 to 1, while the y-axis shows the eased output, which can sometimes exceed this range. The code uses D3 v3 with SVG rendering, building axes and lines via `d3.svg.axis` and `d3.svg.line`.

Mmbostock

77% match

Loading thumbnail…

Accelerate, Then Coast II

This interactive example visualizes a configurable easing function that reflects the "Accelerate, Then Coast" curve to produce slow-out effects. Two sliders adjust the acceleration exponent and the reflection center, allowing comparison between symmetric in-out easing and asymmetric alternatives. The SVG displays the easing curve with axes, while an animated circle traces its path over five seconds, updating reference lines to show progress. The code uses D3 v3 for scales, axes, transitions, and range inputs, with custom easing functions `easeReflect` and `easeAccelerateThenCoast` implemented in JavaScript.

Mmbostock

74% match

Loading thumbnail…

Ease

Ten colored circles bounce horizontally across an SVG canvas, each demonstrating a different D3 easing function: elastic, bounce, linear, sine, quadratic, cubic, poly, circle, exponential, and back. The animation repeats continuously, with each circle labeled by its easing type. The visualization uses D3 v6 transitions with the `.ease()` method and `d3.ease*` functions, rendered in an HTML page with JavaScript.

Vvivianaaai@qq.com

72% match

Loading thumbnail…

Manual Axis Interpolation

This example demonstrates a custom axis transition in D3, animating a slow zoom from a three-year time span down to a single day. The visualization uses `d3.time.scale.utc` and `d3.svg.axis` to render the x-axis, while a manual `tween` callback redraws the axis synchronously for each animation frame, unlike the automatic interpolation typically used. The transition runs over 8.5 seconds, with the code defining two date domains and interpolating between them via `d3.interpolate`. The axis is redrawn continuously within an SVG container, showing intermediate tick labels as the scale changes.

Mmbostock

72% match