Easing

This chart visualizes d3-ease’s easing functions. The x-axis represents the normalized time t in the range [0, 1]. The y-axis represents the eased time, ease(t).

forked from mbostock's block: Easing

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

.axis--y .domain,
.axis .tick:nth-child(2n - 1) text {
  display: none;
}

.axis--x .domain {
  fill: #e7e7e7;
  stroke: none;
}

.axis .tick line {
  stroke: #fff;
}

.axis .tick:nth-child(2n - 1) line {
  stroke-opacity: 0.5;
}

.line path {
  fill: none;
  stroke: #000;
  stroke-width: 2px;
}

#ease-type {
  position: absolute;
  top: 100px;
  left: 130px;
}

</style>
<select id="ease-type">
  <option selected value="linear">linear</option>
  <option value="quadIn">quadIn</option>
  <option value="quadOut">quadOut</option>
  <option value="quadInOut">quadInOut</option>
  <option value="cubicIn">cubicIn</option>
  <option value="cubicOut">cubicOut</option>
  <option value="cubicInOut">cubicInOut</option>
  <option value="polyIn">polyIn</option>
  <option value="polyOut">polyOut</option>
  <option value="polyInOut">polyInOut</option>
  <option value="sinIn">sinIn</option>
  <option value="sinOut">sinOut</option>
  <option value="sinInOut">sinInOut</option>
  <option value="expIn">expIn</option>
  <option value="expOut">expOut</option>
  <option value="expInOut">expInOut</option>
  <option value="circleIn">circleIn</option>
  <option value="circleOut">circleOut</option>
  <option value="circleInOut">circleInOut</option>
  <option value="bounceIn">bounceIn</option>
  <option value="bounceOut">bounceOut</option>
  <option value="bounceInOut">bounceInOut</option>
  <option value="backIn">backIn</option>
  <option value="backOut">backOut</option>
  <option value="backInOut">backInOut</option>
  <option value="elasticIn">elasticIn</option>
  <option value="elasticOut">elasticOut</option>
  <option value="elasticInOut">elasticInOut</option>
</select>
<script src="//d3js.org/d3.v4.0.0-alpha.49.min.js"></script>
<script>

var margin = {top: 120, right: 120, bottom: 120, left: 120},
    width = 960 - margin.left - margin.right,
    height = 960 - margin.top - margin.bottom;

var x = d3.scaleLinear()
    .range([0, width]);

var y = d3.scaleLinear()
    .range([height, 0]);

var path = d3.line()
    .x(function(t) { return x(t); })
    .y(function(t) { return y(ease(t)); });

var ease;

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append("g")
    .attr("class", "axis axis--x")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x)
        .tickSize(-height)
        .tickPadding(6))
  .append("text")
    .attr("class", "axis-title")
    .attr("x", width - 10)
    .attr("y", 8)
    .attr("dy", ".71em")
    .attr("text-anchor", "end")
    .attr("font-weight", "bold")
    .text("t = ");

svg.append("g")
    .attr("class", "axis axis--y")
    .call(d3.axisLeft(y)
        .tickSize(-width)
        .tickPadding(6))
  .append("text")
    .attr("class", "axis-title")
    .attr("x", -24)
    .attr("dy", ".32em")
    .attr("text-anchor", "end")
    .attr("font-weight", "bold")
    .text("ease(t) = ");

var line = svg.append("g")
    .attr("class", "line")
  .append("path")
    .datum(d3.range(0, 1, 0.002).concat(1));

var dot1 = svg.append("circle")
    .attr("r", 5);

var dot2 = svg.append("circle")
    .attr("cx", width + 20)
    .attr("r", 5);

var pathBetweenDots = svg.append("line")
  .attr("stroke", "blue")
  .attr("stroke-dasharray", "3,4")
  .attr("x2", width + 20);

var select = d3.select("#ease-type")
    .on("change", changed)
    .property("value", top.location.hash ? top.location.hash.slice(1) : "linear")
    .each(changed);

function changed() {
  ease = d3["ease" + this.value[0].toUpperCase() + this.value.slice(1)] || d3.easeLinearIn;
  line.attr("d", path);
}

d3.timer(function(elapsed) {
  var t = (elapsed % 3000) / 3000;
  var coord = {'x': x(t), 'y': y(ease(t))};
  dot1.attr("cx", coord.x).attr("cy", coord.y);
  dot2.attr("cy", coord.y);
  pathBetweenDots.attr("x1", coord.x).attr("y1", coord.y).attr("y2", coord.y)
});

</script>

https://d3js.org/d3.v4.0.0-alpha.49.min.js