tophtucker/.block

## .block
height: 600

## readme.md

      
    Raw
  

              readme.md
            
          
    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.
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


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

## preview.png

      
    Raw
  

              preview.png
            
          
## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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>