Skip to content

Instantly share code, notes, and snippets.

@mbostock
Created February 26, 2016 22:06
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save mbostock/43aebffeacf96d8d881f to your computer and use it in GitHub Desktop.
Save mbostock/43aebffeacf96d8d881f to your computer and use it in GitHub Desktop.
Transform Transitions II
license: gpl-3.0
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
margin: 0;
}
div {
position: absolute;
width: 20px;
height: 20px;
border: solid 1px #fff;
}
</style>
<body>
<script src="//d3js.org/d3.v4.0.0-alpha.22.min.js"></script>
<script>
var z = 20,
x = 960 / z,
y = 500 / z;
d3.select("body").selectAll("div")
.data(d3.range(x * y))
.enter().append("div")
.style("transform", function(d) { return "translate(" + (d % x) * z + "px, " + Math.floor(d / x) * z + "px)"; })
.style("background-color", function(d) { return d3.hsl(d % x / x * 360, 1, Math.floor(d / x) / y); })
.on("mouseover", mouseover);
function mouseover(d) {
d3.select(this)
.style("pointer-events", "none")
.raise()
.transition()
.duration(750)
.style("transform", "translate(480px, 240px) scale(20) rotate(180deg)")
.transition()
.delay(1500)
.style("transform", "translate(480px, 240px) scale(0.01)")
.remove();
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment