D3 Examples - slinky

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
​
<style>
body{
    background-color: rgb(41, 18, 4);
}
​
path{
    stroke: white;
    stroke-width: 4px;
    fill: none;
}
​
</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 width = 960,
        height = 500,
        outerR = 200,
        innerR = 1, 
        n = 1000
​
var svg = d3.select('body')
    .append('svg')
        .attr({height: height, width: width})
    .append('g')
        .translate([width/2, height/2])
​
​
svg.append('path')
​
​
var circlePoints = d3.range(0, Math.PI*2 + 1, Math.PI*2/n)
    .map(function(θ){
        var rv = [Math.cos(θ)*outerR, Math.sin(θ)*outerR]
        rv.θ = θ
        return rv 
    })
​
var pathA = circlePoints.map(function(d){
    var θ = d.θ*16
    return [d[0]*Math.cos(θ)*innerR, d[1]*Math.sin(θ)*innerR]
})
​
​
d3.timer(function(t){
    var periods = Math.sin(t/1000)*3
    var pathA = circlePoints.map(function(d){
        var θ = d.θ*periods
        return [d[0]*Math.cos(θ)*innerR, d[1]*Math.sin(θ)*innerR]
    })
​
    svg.select('path').attr('d', pointsToPath(pathA))
​
})
​
function pointsToPath(array){
    return 'M' + array.join('L')
}
​
</script>
    