| height: 600 |
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:
| <!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(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> |
