D3.js Easing Checker

<!doctype html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Easing Test</title>
	<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
	<script>
		var dataset = ["linear", "quad", "cubic", "sin", "exp", "circle", "elastic", "back", "bounce"]
			width = 960,
			height = 500,
			xPadding = 300,
			yPadding = 30,
			r = 20;

var svg = d3.select("body").append("svg")
					.attr({
						width: width,
						height: height
					});

svg.selectAll("text")
			.data(dataset)
			.enter()
			.append("text")
			.attr({
				x: xPadding,
				y: function(d, i){ return i * (height/dataset.length) + yPadding; },
				dx: -100,
				dy: 5,
				"font-size": 18
			})
			.style("text-anchor", "middle")
			.text(function(d){ return d; });

svg.selectAll("line")
			.data(dataset)
			.enter()
			.append("line")
			.attr({
				x1: xPadding,
				y1: function(d, i){ return i * (height/dataset.length) + yPadding; },
				x2: width-xPadding,
				y2: function(d, i){ return i * (height/dataset.length) + yPadding; },
				stroke: "darkorange"
			})

svg.selectAll("circle")
			.data(dataset)
			.enter()
			.append("circle")
			.attr("class", function(d){ return d; })
			.attr({
				cx: xPadding,
				cy: function(d, i){ return i * (height/dataset.length) + yPadding; },
				r: r,
				fill: "orange"
			})
			.on("mouseover", function(d){
				d3.select(this).attr("fill", "green");
			})
			.on("mouseout", function(d){
				d3.select(this).attr("fill", "orange");
			})
			.on("click", function(d){
				d3.select(this)
					.transition()
					.duration(1000)
					.ease(d)
					.attr("cx", width-xPadding)
					.each("end", function(){
						d3.select(this)
							.transition()
							.delay(500)
							.duration(500)
							.attr({
								cx: xPadding
							})
					})
			})

</script>
</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js