Diagonal II by tophtucker

Someone just wanted to animate boxes in diagonally. Just sum the row and column: .transition().delay(function(d,i) { return (d.row + d.column) * delay; }).

This does not depend on data initially being sorted, or in any particular shape or arrangement; it could be square, rectangular, sparse, etc.

index.html

<!DOCTYPE html>
<meta charset="utf-8">

<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  position: relative;
  font-family: sans-serif;
}

div {
  background: black;
  border: 1px solid white;
  position: absolute;
  width: 40px;
  height: 40px;
  color: rgba(255,255,255,.5);
  font-size: 16px;
  text-align: center;
  overflow: hidden;
  padding-top: 10px;
}
</style>

<body></body>

<script src="//d3js.org/d3.v4.0.0-alpha.35.min.js" charset="utf-8"></script>
<script>

var dimensions = [960,600];
var gridSize = 40;
var delay = 40;
var duration = 400;

var color = d3.scaleRainbow().domain([0,15]);

d3.select('body')
  .selectAll('div')
      .data(makeData)
    .enter()
      .append('div')
      .style('left', function(d) { return d.column * gridSize + 'px'; })
      .style('top', function(d) { return d.row * gridSize + 'px'; })
      .style('opacity', 0)
      .text(sum)
      .sort(comparatorStraight)
      .style('background-color', function(d,i) { return color(sum(d)); })
    .transition()
      .duration(duration)
      .delay(function(d,i) { return sum(d) * delay; })
      .style('opacity', 1);

function sum(a) {
  return a.row + a.column;
}

function comparatorStraight(a,b) {
  return (a.row + a.column) - (b.row + b.column);
}

function makeData() {
  return d3.range((dimensions[0]/gridSize)*(dimensions[1]/gridSize)).map(function(d) {
    return {
      row: Math.floor(d / (dimensions[0]/gridSize)),
      column: d % (dimensions[0]/gridSize)
    }
  });
}

</script>