D3 Examples - rect-blinds

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
​
<style>
body{
    background-color: rgb(38, 38, 38);
    margin: 0px;
}
​
​
</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 w = 30,
        bw = 10
        width  = window.innerWidth
        height = window.innerHeight
​
var svg = d3.select('body')
    .append('svg')
        .attr({height: height, width: width})
​
function drawLines(){
    var curX = 0,
            lines = []
​
    while(curX < width){
        var curWidth = Math.random()*w + bw
​
        lines.push({width: curWidth + 1, x: curX})
        curX += curWidth
    }
​
    var rects = svg.append('g').dataAppend(lines, 'rect')
            .attr('x', function(d){ return d.x + (1-Math.random())*200 })
            .attr('height', height)
            .attr('width', 0)
            .attr('fill', randColor())
​
    rects
        .transition()
            // .ease('elastic')
            .delay(function(d, i){ return (bw + w - d.width)*100 })
            .duration(function(d, i){ return 5000 + (d.width - bw - w)*100 })
            .attr('width', ƒ('width'))
​
    rects.transition('x')
            .ease('linear')
            .duration(function(d, i){ return 4000 + (d.width - bw - w)*100 })
            .attr('x', ƒ('x'))
​
    setTimeout(drawLines, 6000)
}
drawLines()
​
​
function randColor(){
    return 'rgb(' + [Math.random()*255, Math.random()*255, Math.random()*255].map(Math.round) + ')'
}
​
</script>
    