Easing Functions II

100%

Easing Functions II

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on May 29, 2015

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.

AI-generated description

This chart visualizes D3’s built-in easing functions in “out” mode.* (See also “in” and “in-out” mode.) The x-axis represents the normalized time t in the range [0, 1]. The y-axis represents the eased time, ease(t). This value is typically in the same range, but not always.

*Pre-release D3 4.0 easing functions are shown. D3 3.x has a bug in “elastic” and “bounce” easing.

gpl-3.0 Licensed

Similar vizzes

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

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

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

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

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

80% match

Loading thumbnail…

Eased Scale

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.

Mmbostock

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

78% match

Loading thumbnail…

Transition Easing Comparison in v4

Ten animated steel-blue circles demonstrate ten D3 v4 easing functions, with each circle labeled by its easing type (easeElastic, easeBounce, easeLinear, and so on). Every circle repeatedly transitions horizontally 210 to 720 pixels and back over four seconds using `transition().ease()` with the corresponding default function. The example uses SVG elements rendered in an HTML page loading d3.v4.min.js, and each animation loops indefinitely via the transition’s `"end"` event. The static labels and moving circles highlight the distinct acceleration, deceleration, and overshoot patterns of each easing curve.

Dd3noob

78% match