Skip to content

Instantly share code, notes, and snippets.

@mbostock
Last active November 15, 2016 18:09
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save mbostock/56ea94205411ee9e4dbec3742f7ad08c to your computer and use it in GitHub Desktop.
Eased Scale
license: gpl-3.0

This example demonstrates how to ease an interpolator for use with a continuous scale. I’m not sure exactly why you would do this… but it’s possible! An alternative (and probably simpler) approach would be to create a sequential scale with a fixed output interpolator.

<!DOCTYPE html>
<meta charset="utf-8">
<svg width="960" height="500"></svg>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
margin = {top: 210, right: 20, bottom: 220, left: 20},
width = svg.attr("width") - margin.left - margin.right,
height = svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var x = d3.scaleLinear()
.domain([0, 1])
.range([0, width])
.interpolate(easeInterpolate(d3.easeQuadInOut));
g.append("g")
.attr("class", "axis axis--x")
.call(d3.axisBottom(x));
function easeInterpolate(ease) {
return function(a, b) {
var i = d3.interpolate(a, b);
return function(t) {
return i(ease(t));
};
};
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment