mbostock/.block

## .block
license: gpl-3.0
height: 960
redirect: https://observablehq.com/@d3/easing

## README.md

      
    Raw
  

              README.md
            
          
    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).

  
## index.html
<!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>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	license: gpl-3.0
	height: 960
	redirect: https://observablehq.com/@d3/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 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>