Chained Transitions

A test of chained transition using d3-transition’s new d3.active.

<!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>

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