Skip to content

Instantly share code, notes, and snippets.

@fivetentaylor

fivetentaylor/index.html

Last active December 18, 2015 06:09
Show Gist options
  • Save fivetentaylor/5737802 to your computer and use it in GitHub Desktop.
Save fivetentaylor/5737802 to your computer and use it in GitHub Desktop.
Download ZIP
modified the "bounce" easing function in d3.js
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Welcome to d3!</title>
<style>
body {
width: 35em;
margin: 0 auto;
font-family: Tahoma, Verdana, Arial, sans-serif;
}
</style>
</head>
<body>
<script src='https://rawgithub.com/fivetentaylor/d3/master/d3.min.js' type='text/javascript' charset='utf-8'></script>
<script>
var bounce = [0.1,0.2,0.3,0.4,0.49];
var svg = d3.select('body').append('svg');
var rects = svg.selectAll('rect').data(bounce);
rects.enter().append('rect')
.attr('width',100)
.attr('height',100)
.attr('x',function(d,i){ return i * 110; });
rects.each(function(d){
d3.select(this)
.attr('transform','translate(0,-400)')
.transition()
.duration(3000)
.ease('bounce', d)
.attr('transform','translate(0,400)');
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment