• Stars
    star
    604
  • Rank 74,189 (Top 2 %)
  • Language
    JavaScript
  • License
    BSD 3-Clause "New...
  • Created over 9 years ago
  • Updated about 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Easing functions for smooth animation.

d3-ease

Easing is a method of distorting time to control apparent motion in animation. It is most commonly used for slow-in, slow-out. By easing time, animated transitions are smoother and exhibit more plausible motion.

The easing types in this module implement the ease method, which takes a normalized time t and returns the corresponding “eased” time . Both the normalized time and the eased time are typically in the range [0,1], where 0 represents the start of the animation and 1 represents the end; some easing types, such as elastic, may return eased times slightly outside this range. A good easing type should return 0 if t = 0 and 1 if t = 1. See the easing explorer for a visual demonstration.

These easing types are largely based on work by Robert Penner.

Installing

If you use npm, npm install d3-ease. You can also download the latest release on GitHub. For vanilla HTML in modern browsers, import d3-ease from Skypack:

<script type="module">

import {easeCubic} from "https://cdn.skypack.dev/d3-ease@3";

const e = easeCubic(0.25);

</script>

For legacy environments, you can load d3-ease’s UMD bundle from an npm-based CDN such as jsDelivr; a d3 global is exported:

<script src="https://cdn.jsdelivr.net/npm/d3-ease@3"></script>
<script>

const e = d3.easeCubic(0.25);

</script>

Try d3-ease in your browser.

API Reference

# ease(t)

Given the specified normalized time t, typically in the range [0,1], returns the “eased” time , also typically in [0,1]. 0 represents the start of the animation and 1 represents the end. A good implementation returns 0 if t = 0 and 1 if t = 1. See the easing explorer for a visual demonstration. For example, to apply cubic easing:

const te = d3.easeCubic(t);

Similarly, to apply custom elastic easing:

// Before the animation starts, create your easing function.
const customElastic = d3.easeElastic.period(0.4);

// During the animation, apply the easing function.
const te = customElastic(t);

# d3.easeLinear(t) <>

Linear easing; the identity function; linear(t) returns t.

linear

# d3.easePolyIn(t) <>

Polynomial easing; raises t to the specified exponent. If the exponent is not specified, it defaults to 3, equivalent to cubicIn.

polyIn

# d3.easePolyOut(t) <>

Reverse polynomial easing; equivalent to 1 - polyIn(1 - t). If the exponent is not specified, it defaults to 3, equivalent to cubicOut.

polyOut

# d3.easePoly(t) <>
# d3.easePolyInOut(t) <>

Symmetric polynomial easing; scales polyIn for t in [0, 0.5] and polyOut for t in [0.5, 1]. If the exponent is not specified, it defaults to 3, equivalent to cubic.

polyInOut

# poly.exponent(e) <>

Returns a new polynomial easing with the specified exponent e. For example, to create equivalents of linear, quad, and cubic:

const linear = d3.easePoly.exponent(1);
const quad = d3.easePoly.exponent(2);
const cubic = d3.easePoly.exponent(3);

# d3.easeQuadIn(t) <>

Quadratic easing; equivalent to polyIn.exponent(2).

quadIn

# d3.easeQuadOut(t) <>

Reverse quadratic easing; equivalent to 1 - quadIn(1 - t). Also equivalent to polyOut.exponent(2).

quadOut

# d3.easeQuad(t) <>
# d3.easeQuadInOut(t) <>

Symmetric quadratic easing; scales quadIn for t in [0, 0.5] and quadOut for t in [0.5, 1]. Also equivalent to poly.exponent(2).

quadInOut

# d3.easeCubicIn(t) <>

Cubic easing; equivalent to polyIn.exponent(3).

cubicIn

# d3.easeCubicOut(t) <>

Reverse cubic easing; equivalent to 1 - cubicIn(1 - t). Also equivalent to polyOut.exponent(3).

cubicOut

# d3.easeCubic(t) <>
# d3.easeCubicInOut(t) <>

Symmetric cubic easing; scales cubicIn for t in [0, 0.5] and cubicOut for t in [0.5, 1]. Also equivalent to poly.exponent(3).

cubicInOut

# d3.easeSinIn(t) <>

Sinusoidal easing; returns sin(t).

sinIn

# d3.easeSinOut(t) <>

Reverse sinusoidal easing; equivalent to 1 - sinIn(1 - t).

sinOut

# d3.easeSin(t) <>
# d3.easeSinInOut(t) <>

Symmetric sinusoidal easing; scales sinIn for t in [0, 0.5] and sinOut for t in [0.5, 1].

sinInOut

# d3.easeExpIn(t) <>

Exponential easing; raises 2 to the exponent 10 * (t - 1).

expIn

# d3.easeExpOut(t) <>

Reverse exponential easing; equivalent to 1 - expIn(1 - t).

expOut

# d3.easeExp(t) <>
# d3.easeExpInOut(t) <>

Symmetric exponential easing; scales expIn for t in [0, 0.5] and expOut for t in [0.5, 1].

expInOut

# d3.easeCircleIn(t) <>

Circular easing.

circleIn

# d3.easeCircleOut(t) <>

Reverse circular easing; equivalent to 1 - circleIn(1 - t).

circleOut

# d3.easeCircle(t) <>
# d3.easeCircleInOut(t) <>

Symmetric circular easing; scales circleIn for t in [0, 0.5] and circleOut for t in [0.5, 1].

circleInOut

# d3.easeElasticIn(t) <>

Elastic easing, like a rubber band. The amplitude and period of the oscillation are configurable; if not specified, they default to 1 and 0.3, respectively.

elasticIn

# d3.easeElastic(t) <>
# d3.easeElasticOut(t) <>

Reverse elastic easing; equivalent to 1 - elasticIn(1 - t).

elasticOut

# d3.easeElasticInOut(t) <>

Symmetric elastic easing; scales elasticIn for t in [0, 0.5] and elasticOut for t in [0.5, 1].

elasticInOut

# elastic.amplitude(a) <>

Returns a new elastic easing with the specified amplitude a.

# elastic.period(p) <>

Returns a new elastic easing with the specified period p.

# d3.easeBackIn(t) <>

Anticipatory easing, like a dancer bending his knees before jumping off the floor. The degree of overshoot is configurable; if not specified, it defaults to 1.70158.

backIn

# d3.easeBackOut(t) <>

Reverse anticipatory easing; equivalent to 1 - backIn(1 - t).

backOut

# d3.easeBack(t) <>
# d3.easeBackInOut(t) <>

Symmetric anticipatory easing; scales backIn for t in [0, 0.5] and backOut for t in [0.5, 1].

backInOut

# back.overshoot(s) <>

Returns a new back easing with the specified overshoot s.

# d3.easeBounceIn(t) <>

Bounce easing, like a rubber ball.

bounceIn

# d3.easeBounce(t) <>
# d3.easeBounceOut(t) <>

Reverse bounce easing; equivalent to 1 - bounceIn(1 - t).

bounceOut

# d3.easeBounceInOut(t) <>

Symmetric bounce easing; scales bounceIn for t in [0, 0.5] and bounceOut for t in [0.5, 1].

bounceInOut

More Repositories

1

d3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript
106,311
star
2

d3-shape

Graphical primitives for visualization, such as lines and areas.
JavaScript
2,458
star
3

d3-plugins

[DEPRECATED] A repository for sharing D3.js V3 plugins.
JavaScript
1,808
star
4

d3-force

Force-directed graph layout using velocity Verlet integration.
JavaScript
1,702
star
5

d3-scale

Encodings that map abstract data to visual representation.
JavaScript
1,567
star
6

d3-queue

Evaluate asynchronous tasks with configurable concurrency.
JavaScript
1,411
star
7

d3-hierarchy

2D layout algorithms for visualizing hierarchical data.
JavaScript
1,064
star
8

d3-geo-projection

Extended geographic projections for d3-geo.
JavaScript
1,058
star
9

d3-geo

Geographic projections, spherical shapes and spherical trigonometry.
JavaScript
988
star
10

d3-scale-chromatic

Sequential, diverging and categorical color scales.
JavaScript
787
star
11

d3-sankey

Visualize flow between nodes in a directed acyclic network.
JavaScript
763
star
12

d3-format

Format numbers for human consumption.
JavaScript
611
star
13

d3-delaunay

Compute the Voronoi diagram of a set of two-dimensional points.
JavaScript
606
star
14

d3-selection

Transform the DOM by selecting elements and joining to data.
JavaScript
547
star
15

d3-zoom

Pan and zoom SVG, HTML or Canvas using mouse or touch input.
JavaScript
495
star
16

d3-contour

Compute contour polygons using marching squares.
JavaScript
487
star
17

d3-interpolate

Interpolate numbers, colors, strings, arrays, objects, whatever!
JavaScript
482
star
18

d3-array

Array manipulation, ordering, searching, summarizing, etc.
JavaScript
452
star
19

d3-dsv

A parser and formatter for delimiter-separated values, such as CSV and TSV.
JavaScript
416
star
20

d3-color

Color spaces! RGB, HSL, Cubehelix, CIELAB, and more.
JavaScript
389
star
21

d3-drag

Drag and drop SVG, HTML or Canvas using mouse or touch input.
JavaScript
328
star
22

d3-time-format

Parse and format times, inspired by strptime and strftime.
JavaScript
324
star
23

d3-voronoi

Compute the Voronoi diagram of a set of two-dimensional points.
JavaScript
250
star
24

d3-hexbin

Group two-dimensional points into hexagonal bins.
JavaScript
231
star
25

d3-time

A calculator for humanity’s peculiar conventions of time.
JavaScript
227
star
26

d3-quadtree

Two-dimensional recursive spatial subdivision.
JavaScript
225
star
27

d3-transition

Animated transitions for D3 selections.
JavaScript
219
star
28

d3-fetch

Convenient parsing for Fetch.
JavaScript
215
star
29

d3-axis

Human-readable reference marks for scales.
JavaScript
204
star
30

d3.github.com

The D3 website.
JavaScript
195
star
31

d3-path

Serialize Canvas path commands to SVG.
JavaScript
192
star
32

d3-timer

An efficient queue for managing thousands of concurrent animations.
JavaScript
159
star
33

d3-brush

Select a one- or two-dimensional region using the mouse or touch.
JavaScript
154
star
34

d3-3.x-api-reference

An archive of the D3 3.x API Reference.
153
star
35

d3-random

Generate random numbers from various distributions.
JavaScript
136
star
36

d3-chord

Visualizations relationships or network flow with a circular layout.
JavaScript
122
star
37

d3-tile

Compute the quadtree tiles to display in a rectangular viewport.
JavaScript
120
star
38

d3-collection

Handy data structures for elements keyed by string.
JavaScript
111
star
39

d3-request

A convenient alternative to XMLHttpRequest.
JavaScript
109
star
40

d3-geo-polygon

Clipping and geometric operations for spherical polygons.
JavaScript
102
star
41

d3-polygon

Geometric operations for two-dimensional polygons.
JavaScript
97
star
42

d3-require

A minimal, promise-based implementation to require asynchronous module definitions.
JavaScript
79
star
43

d3-selection-multi

Multi-value syntax for d3-selection and d3-transition.
JavaScript
75
star
44

d3-dispatch

Register named callbacks and call them with arguments.
JavaScript
75
star
45

versor

a home for Mike Bostock's versor.js
JavaScript
34
star
46

d3-bundler

DEPRECATED; use rollup/rollup.
JavaScript
34
star
47

d3-hsv

The HSV (Hue, Saturation, Value) color space.
JavaScript
26
star
48

d3-logo

D3 brand assets.
23
star
49

d3-cam16

A d3 implementation of the CIECAM16 color appearance model.
JavaScript
22
star
50

d3-hcg

The HCG (Hue, Chroma, Grayness) color space derived from the Munsell color system.
JavaScript
20
star
51

d3-scripts

Common scripts for D3 modules.
JavaScript
15
star
52

d3-hull

DEPRECATED; see d3-polygon’s hull function.
JavaScript
14
star
53

blur-benchmark

temporary benchmark for d3.blur implementations
JavaScript
2
star