Skip to content

Instantly share code, notes, and snippets.

@mbostock
Last active Aug 15, 2019
Embed
What would you like to do?
Easing
license: gpl-3.0
height: 960
redirect: https://observablehq.com/@d3/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).

<!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 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;
dot1.attr("cx", x(t)).attr("cy", y(ease(t)));
dot2.attr("cy", y(ease(t)));
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment