Diagonal III

Someone just wanted to animate boxes in diagonally. The key is mapping ℕ✕ℕ → ℕ by the Cantor pairing function!

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

See also:

Straight diagonal using comparator on existing data
Stepped diagonal using Cantor pairing comparator on existing data
Zigzag diagonal using alternating Cantor pairing comparator on existing data
Generating by triangular numbers

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

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>

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(function(d) { return cantorPairingFunction(d.column, d.row); })
      .sort(comparatorCantor)
      .style('background-color', function(d,i) { return color(i); })
    .transition()
      .duration(duration)
      .delay(function(d,i) { return i * delay; })
      .style('opacity', 1);

// https://en.wikipedia.org/wiki/Pairing_function#Cantor_pairing_function
// i.e., from 2D coord to serialized 1D coord
function cantorPairingFunction(x,y) {
  return (1/2) * (x + y) * (x + y + 1) + y;
}

function comparatorCantor(a,b) {
  return cantorPairingFunction(a.column, a.row) - cantorPairingFunction(b.column, b.row);
}

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>

https://d3js.org/d3.v4.0.0-alpha.35.min.js