Skip to content

Instantly share code, notes, and snippets.

@mbostock

mbostock/.block

Last active June 7, 2023 02:09
Show Gist options
  • Save mbostock/70d5541b547cc222aa02 to your computer and use it in GitHub Desktop.
Save mbostock/70d5541b547cc222aa02 to your computer and use it in GitHub Desktop.
Download ZIP
Chained Transitions
Raw
.block
license:gpl-3.0
redirect:https://observablehq.com/@d3/chained-transitions
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
max-width: 960px;
margin: 1px;
}
div {
width: 10px;
height: 10px;
margin: 1px 0 0 1px;
float: left;
background: #eee;
display: inline-block;
}
</style>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var n = 4002;
var whiteblue = d3.interpolateRgb("#eee", "steelblue"),
blueorange = d3.interpolateRgb("steelblue", "orange"),
orangewhite = d3.interpolateRgb("orange", "#eee");
d3.select("body").selectAll("div")
.data(d3.range(n))
.enter().append("div")
.transition()
.delay(function(d, i) { return i + Math.random() * n / 4; })
.ease(d3.easeLinear)
.on("start", function repeat() {
d3.active(this)
.styleTween("background-color", function() { return whiteblue; })
.transition()
.delay(1000)
.styleTween("background-color", function() { return blueorange; })
.transition()
.delay(1000)
.styleTween("background-color", function() { return orangewhite; })
.transition()
.delay(n)
.on("start", repeat);
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment