Transpose

Inspired by this Wikipedia illustration by LucasVB. Just working my way up to illustrating swizzling!

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

<style>

body {
  position: relative;
  padding: 10px;
  font-family: sans-serif;
}

div {
  box-sizing: border-box;
  position: absolute;
  border: 1px solid #fff;
  padding: 5px;
  text-align: right;
}

</style>

var w = 60,
    h = 30,
    p = 10,
    i = 2 + (Math.random() * 10 | 0),
    j = 2 + (Math.random() * 10 | 0),
    rainbow = d3.scaleSequential(d3.interpolateRainbow).domain([0,Math.max(i,j)]),
    data = d3.merge(
      d3.range(i).map(
        (i) => d3.range(j).map(
          (j) => ({i, j})
        )
      )
    )

var cell = d3.select("body").selectAll("div")
  .data(data)
  .enter()
  .append("div")
  .style("font-weight", d => d.i == 0 || d.j == 0 ? 'bold' : 'normal')
  .style("color", d => rainbow(d.j))
  .text((d) => {
    if (d.i == 0 && d.j == 0) {
      return
    } else if (d.i == 0) {
      return d.j
    } else if (d.j == 0) {
      return String.fromCharCode("A".charCodeAt(0) + d.i - 1)
    } else {
      return Math.random() * 100 | 0
    }
  })
  .style("width", w + "px")
  .style("height", h + "px")
  .style("left", (d) => w * d.i + "px")
  .style("top", (d) => h * d.j + "px")

cell.transition()
  .duration(1000)
  .delay(1000)
  .style("top", (d) => h * d.j + p * d.j + "px")
  .style("border-color", "#eee")
.transition()
  .duration(1000)
  .style("color", d => rainbow(d.i))
  .style("left", (d) => w * d.i + p * d.i + "px")
  .style("top", (d) => h * d.j + "px")
.transition()
  .duration(2000)
  .style("left", (d) => w * d.j + "px")
  .style("top", (d) => h * d.i + p * d.i + "px")
.transition()
  .duration(1000)
  .style("border-color", "#fff")
  .style("left", (d) => w * d.j + "px")
  .style("top", (d) => h * d.i + "px")

</script>

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