Skip to content

Instantly share code, notes, and snippets.

@tophtucker
Last active May 12, 2016 02:43
Show Gist options
  • Save tophtucker/07acfe8e14559532fd226c954783cd7d to your computer and use it in GitHub Desktop.
Save tophtucker/07acfe8e14559532fd226c954783cd7d to your computer and use it in GitHub Desktop.
Diagonal II
height: 600

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:

<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment