Easing Functions

This chart visualizes D3’s easing functions in “in” mode.* (See also “out” 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.

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.background {
  fill: #e7e7e7;
}

.axis path,
.axis line {
  fill: none;
  stroke: #fff;
  shape-rendering: crispEdges;
}

.line text {
  font: bold 14px sans-serif;
}

.axis text {
  font: 10px sans-serif;
}

.line path {
  fill: none;
  stroke: #000;
  stroke-width: 1.2px;
  stroke-linejoin: round;
}

.line:hover text {
  fill: red;
}

.line:hover path {
  stroke: red;
}

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

/* https://github.com/d3/d3-ease Copyright 2015 Michael Bostock, Copyright 2001 Robert Penner. */
var ease=function(){"use strict";function t(t,n){t=Math.max(1,j(t,1)),n=1.5*j(n,.3)*O;var u=n*Math.asin(1/t);return function(e){return t*((e=2*e-1)<0?Math.pow(2,10*e)*Math.sin((u-e)/n):Math.pow(2,-10*e)*Math.sin((e-u)/n)+2)/2}}function n(t,n){t=Math.max(1,j(t,1)),n=j(n,.3)*O;var u=n*Math.asin(1/t);return function(e){return t*Math.pow(2,-10*e)*Math.sin((e-u)/n)+1}}function u(t,n){t=Math.max(1,j(t,1)),n=j(n,.3)*O;var u=n*Math.asin(1/t);return function(e){return t*Math.pow(2,10*--e)*Math.sin((u-e)/n)}}function e(t){return t=1.525*j(t,1.70158),function(n){return((n*=2)<1?n*n*((t+1)*n-t):(n-=2)*n*((t+1)*n+t)+2)/2}}function r(t){return t=j(t,1.70158),function(n){return--n*n*((t+1)*n+t)+1}}function i(t){return t=j(t,1.70158),function(n){return n*n*((t+1)*n-t)}}function o(t){return z>t?J*t*t:B>t?J*(t-=A)*t+C:E>t?J*(t-=D)*t+F:J*(t-=G)*t+H}function c(t){return((t*=2)<=1?1-o(1-t):o(t-1)+1)/2}function s(t){return 1-o(1-t)}function a(t){return((t*=2)<=1?1-Math.sqrt(1-t*t):Math.sqrt(1-(t-=2)*t)+1)/2}function f(t){return Math.sqrt(1- --t*t)}function h(t){return 1-Math.sqrt(1-t*t)}function M(t){return((t*=2)<=1?Math.pow(2,10*t-10):2-Math.pow(2,10-10*t))/2}function p(t){return 1-Math.pow(2,-10*t)}function l(t){return Math.pow(2,10*t-10)}function w(t){return(1-Math.cos(K*t))/2}function b(t){return Math.sin(t*L)}function q(t){return 1-Math.cos(t*L)}function x(t){return((t*=2)<=1?t*t*t:(t-=2)*t*t+2)/2}function k(t){return--t*t*t+1}function v(t){return t*t*t}function y(t){return((t*=2)<=1?t*t:--t*(2-t)+1)/2}function d(t){return t*(2-t)}function g(t){return t*t}function m(t){return+t}function I(t){return t=j(t,3),function(n){return((n*=2)<=1?Math.pow(n,t):2-Math.pow(2-n,t))/2}}function N(t){return t=j(t,3),function(n){return 1-Math.pow(1-n,t)}}function P(t){return t=j(t,3),function(n){return Math.pow(n,t)}}var O=1/(2*Math.PI),j=function(t,n){return null==t||isNaN(t)?n:+t},z=4/11,A=6/11,B=8/11,C=.75,D=9/11,E=10/11,F=.9375,G=21/22,H=63/64,J=1/z/z,K=Math.PI,L=K/2,Q=(new Map).set("linear-in",m).set("linear-out",m).set("linear-in-out",m).set("quad-in",g).set("quad-out",d).set("quad-in-out",y).set("cubic-in",v).set("cubic-out",k).set("cubic-in-out",x).set("poly-in",v).set("poly-out",k).set("poly-in-out",x).set("sin-in",q).set("sin-out",b).set("sin-in-out",w).set("exp-in",l).set("exp-out",p).set("exp-in-out",M).set("circle-in",h).set("circle-out",f).set("circle-in-out",a).set("bounce-in",s).set("bounce-out",o).set("bounce-in-out",c).set("back-in",i()).set("back-out",r()).set("back-in-out",e()).set("elastic-in",u()).set("elastic-out",n()).set("elastic-in-out",t()),R=(new Map).set("poly-in",P).set("poly-out",N).set("poly-in-out",I).set("back-in",i).set("back-out",r).set("back-in-out",e).set("elastic-in",u).set("elastic-out",n).set("elastic-in-out",t),S=function(t,n,u){var e=(t+="").indexOf("-");return 0>e&&(t+="-in"),arguments.length>1&&R.has(t)?R.get(t)(n,u):Q.get(t)||m};return S}();

var margin = 140,
    outerSize = 960,
    innerSize = outerSize - margin * 2;

var y = d3.scale.linear()
    .domain([0, 1])
    .range([innerSize, 0]);

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickSize(-innerSize)
    .tickPadding(8);

var x = d3.scale.linear()
    .domain([0, 1])
    .range([0, innerSize]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickSize(-innerSize)
    .tickPadding(8);

var path = d3.svg.line();

var svg = d3.select("body").append("svg")
    .attr("width", outerSize)
    .attr("height", outerSize)
  .append("g")
    .attr("transform", "translate(" + margin + "," + (margin - 120) + ")");

svg.append("rect")
    .attr("class", "background")
    .attr("width", innerSize)
    .attr("height", innerSize);

svg.append("g")
    .attr("class", "axis axis--x")
    .attr("transform", "translate(0," + innerSize + ")")
    .call(xAxis)
  .append("text")
    .attr("class", "axis-title")
    .attr("x", innerSize - 10)
    .attr("y", 8)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text("t = ");

svg.append("g")
    .attr("class", "axis axis--y")
    .call(yAxis)
  .append("text")
    .attr("class", "axis-title")
    .attr("x", -24)
    .attr("dy", ".32em")
    .style("text-anchor", "end")
    .text("ease(t) = ");

var line = svg.selectAll(".line")
    .data([
      "linear-in",
      "quad-in",
      "cubic-in",
      "sin-in",
      "exp-in",
      "circle-in",
      "elastic-in",
      "back-in",
      "bounce-in"
    ])
  .enter().append("g")
    .attr("class", "line");

line.append("path")
    .attr("id", function(d) { return d; })
    .attr("d", function(d) {
      var e = ease(d);
      return path(d3.range(0, 1, .002).concat(1).map(function(t) {
        return [x(t), y(e(t))];
      }));
    });

line.append("text")
    .attr("dy", "-3px")
  .append("textPath")
    .attr("xlink:href", function(d) { return "#" + d; })
    .attr("startOffset", "24%")
    .text(function(d) { return d; });

d3.select(self.frameElement).style("height", outerSize + "px");

</script>

https://d3js.org/d3.v3.min.js