D3 Examples - squares-around-circles

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
​
<style>
body{
    background-color: rgb(38, 38, 38);
    margin: 0px;
}
​
path{
    stroke: white;
    stroke-width: 2px;
    fill: none;
}
​
circle{
    fill: white;
}
​
​
​
</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 s = 20,
        l = s/2
        width  = 960 - 0*2
        height = 500 - 0*2
​
​
//offset from center for each num
var x1 = [ l,  l, -l, -l]
var y1 = [-l,  l,  l, -l]
var x2 = [ l, -l, -l,  l]
var y2 = [ l,  l, -l, -l]
​
​
var x1 = [ l,  l, -l,  l]
var y1 = [-l,  l, -l, -l]
var x2 = [ l, -l, -l, -l]
var y2 = [ l,  l,  l, -l]
​
​
​
var svg = d3.select('body')
    .append('svg')
        .attr({height: height + 0*2, width: width + 0*2})
​
var grid = []
d3.range(0, width + s, s*6).map(function(x, i){
    d3.range(0, height + s, s*3).map(function(y, j){
        d3.range(0, 4).map(function(sideNum){
            grid.push({
                x:  x + (j % 2)*s*3,
                y:  y,
                n:  sideNum
            })
        })
    })
})
​
​
svg.dataAppend(grid, 'circle')
        .attr('r', 3)
        .attr('cx', ƒ('x'))
        .attr('cy', ƒ('y'))
​
var lines = svg.dataAppend(grid, 'path')
        .attr('d', pointToPath)
​
​
​
function cycleAnimation(){
    grid.forEach(pushLinesOut)
    lines
        .transition().delay(500).duration(1500)
            .attr('d', pointToPath)
​
    // lines.attr('d', pointToPathReverse)
    // grid.forEach(rotateLines)
    // lines
    //  .transition().delay(2500).duration(1500)
    //      .attr('d', pointToPathReverse)
​
    setTimeout(cycleAnimation, 4000)
}
cycleAnimation()
​
​
function pushLinesOut(d){
    if (d.n % 2){
        d.y += d.n == 1 ? 3*s : -3*s
    } else{
        d.x += d.n == 0 ? 3*s : -3*s
    }
​
    d.n = (d.n + 2) % 4
}
​
function rotateLines(d){
    d.n = (d.n - 1 + 4) % 4
}
​
function pointToPath(d){
    return 'M' + [d.x + x1[d.n], d.y + y1[d.n]] +
                 'L' + [d.x + x2[d.n], d.y + y2[d.n]] + 'Z'
}
​
function pointToPathReverse(d){
    return 'M' + [d.x + x2[d.n], d.y + y2[d.n]] +
                 'L' + [d.x + x1[d.n], d.y + y1[d.n]]
}
​
​
​
</script>
    