D3 Examples - rect-spiral

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
​
<style>
body{
    background-color: rgb(38, 38, 38);
    margin: 0px;
}
​
svg{
    overflow: visible;
}
​
</style>
​
<body></body>
​
<script src="/1wheel/raw/67b47524ed8ed829d021/d3-3.5.5.js"></script>
<script src="/1wheel/raw/67b47524ed8ed829d021/lodash-3.8.0.js"></script>
<script src='/1wheel/raw/1b6758978dc2d52d3a37/d3-jetpack.js'></script>
<script src='/1wheel/raw/1b6758978dc2d52d3a37/d3-starterkit.js'></script>
​
​
<script>
​
var offset = 0,
        width  = window.innerWidth,
        height = window.innerHeight,
        s = Math.sqrt(width*height/200)
​
var svg = d3.select('body')
    .append('svg')
        .attr({height: height, width: width})
​
​
function drawSquares(){
    offset++
​
    var squares = []
    d3.range(0, width + s, s).forEach(function(x, i){
        d3.range(0, height + s, s).forEach(function(y, j){
            if ((i + j + offset) % 2) return
            squares.push({x: x, y: y, i: i, j: j, 
                isLeft: Math.random() < .5,
                isTop:  Math.random() < .5})
        })
    })
​
    svg.append('g').dataAppend(squares, 'rect')
            .attr('x', function(d){ return d.isLeft ? d.x : d.x + s })
            .attr('y', function(d){ return d.isTop  ? d.y : d.y + s })
            .attr({width: 0, height: 0})
            .style('fill', randColor())
        .transition()
            // .ease('bounce')
            .duration(1000)
            .delay(function(d, i){
                return d.isTop*1000 + d.isLeft*1000 + (d.isLeft && !d.isTop)*1000*2 })
            .attr({width: s, height: s})
            .attr({x: ƒ('x'), y: ƒ('y')})
​
​
​
​
    setTimeout(drawSquares, 5/4*1000)
}
drawSquares()
​
​
function randColor(){
    return 'rgb(' + [Math.random()*255, Math.random()*255, Math.random()*255].map(Math.round) + ')'
}
​
</script>
    