D3 Examples - canvas circles

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
​
<style>
body{
    background-color: rgb(38, 38, 38);
    margin: 0px;
}
​
svg{
    overflow: visible;
}
​
circle{
    stroke-width: 5;
}
​
</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/30)
​
var svg = d3.select('body')
    .append('svg')
        .attr({height: height, width: width})
​
​
function drawCircles(){
    offset++
​
    var circles = []
    d3.range(0, width + s, s).forEach(function(x, i){
        d3.range(0, height + s, s).forEach(function(y, j){
            circles.push({
                pos: [x, y], i: i, j: j,
                num: Math.ceil(Math.random()*3)})
        })
    })
​
    // circles = _.sortBy(circles, function(d){ return (d.i + d.j + offset) % 3 })
    circles = _.shuffle(circles)
​
    var gs = svg.append('g.circle-g').dataAppend(circles, 'g')
            .translate(ƒ('pos'))
​
    gs.append('circle')
            .attr('r', 0)
            .attr('fill', randColor())
            .attr('stroke', randColor())
        .transition().duration(2000)
            .ease('linear')
            .attr('r', s)
            // .attr('fill', randColor())
        .transition().duration(500)
            .remove()
            // .attr('stroke', randColor())
​
​
​
    // var numCircles = d3.selectAll('.circle-g').size()
    // d3.selectAll('.circle-g')
    //      .filter(function(d, i){ return i + 3 < numCircles })
    //      .remove()
​
​
    setTimeout(drawCircles, 1000)
}
drawCircles()
​
​
function randColor(){
    return 'rgb(' + [Math.random()*255, Math.random()*255, Math.random()*255].map(Math.round) + ')'
}
​
</script>
    