D3 Examples - easing functions

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body {  
      margin:0;
      position:fixed;
      top:0;
      right:0;
      bottom:0;
      left:0;
    }
    .fixed-cell {
      min-width: 40px;
      min-height: 20px;
      margin: 5px;
      position: fixed;
      text-align: center;
      border: #969696 solid thin;
      padding: 5px;
    }
  </style>
</head>
​
<body>
<script type="text/javascript"> 
var data = [ 
            {name: 'Linear', fn: d3.easeLinear}, 
            {name: 'Cubic', fn: d3.easeCubic}, 
            {name: 'CubicIn', fn: d3.easeCubicIn}, 
            {name: 'Sin', fn: d3.easeSin}, 
            {name: 'SinIn', fn: d3.easeSinIn}, 
            {name: 'Exp', fn: d3.easeExp}, 
            {name: 'Circle', fn: d3.easeCircle}, 
            {name: 'Back', fn: d3.easeBack}, 
            {name: 'Bounce', fn: d3.easeBounce}, 
            {name: 'Elastic', fn: d3.easeElastic}, 
            {name: 'Custom', fn: function(t){ return t * t; }}
    ], 
colors = d3.scaleOrdinal(d3.schemeCategory20); 
 
d3.select("body").selectAll("div") 
            .data(data) 
        .enter() 
        .append("div") 
            .attr("class", "fixed-cell") 
            .style("top", function (d, i) { 
            return i * 40 + "px"; 
            }) 
            .style("background-color", function (d, i) { 
            return colors(i); 
            }) 
            .style("color", "white") 
            .style("left", "500px") 
            .text(function (d) { 
            return d.name; 
            }); 
 
d3.selectAll("div").each(function(d){ 
d3.select(this) 
      .transition().ease(d.fn) 
      .duration(1500) 
      .style("left", "10px"); 
    }); 
</script> 
</body>
​
    