index.html

## index.html
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<body>
<script src="http://d3js.org/d3.v3.js"></script>
<script type="text/javascript">

svg = d3.select("body").append("svg")

var w = 2000,
    h = 500,
    begin = Date.now();

var lines = [ ];

var n = 5;
var motion = 80;

for (i in d3.range(n)){
    var data = d3.range(motion)
    lines.push({
        width: 5,
        height: 50,
        speed: 100,
        index: i,
        data: data
    })
}

var xscale = d3.scale.linear()
    .domain([0,motion])
    .range([0, w])

var omega = -.22
function line_maker( data, speed )
{
    var freq = Math.PI*.4 + 3 * omega * data.index // * 3000
    var svgline = d3.svg.line()
    .x(function(d,i)
    {
        return xscale(d);
    })
    .y(function(d,i)
    {
        var theta = freq * d/motion * Math.PI * 4
        var y = data.height * (Math.sin(theta + (n-data.index) * .1 * speed * .18 ));
        return y
    })
    .interpolate("basis")
    return svgline(data.data);
}

var spacing = 26;
function lineEnter(d, i) {

  d3.select(this).selectAll("path.path")
      .data([d])
      .enter()
    .append("svg:path")
      .attr("class", "path")
    	.attr("d", function(d,i) { return line_maker( d, 0 )})
      .attr("stroke-width", function(e,i) { return e.width;})
      .attr("fill", "none")

    update_spacing()
}

var svg = d3.select("svg")
    .attr("width", w)
    .attr("height", h)
  .append("svg:g")

var line = svg.selectAll("g.line")
    .data(lines)
  .enter().append("svg:g")
    .attr("class", "line")
    .each(lineEnter);

var sm = .39
function update_spacing()
{
    var th = spacing * n;
    var hscale = d3.scale.linear()
        .domain([0, n])
        .range([0, h])

    console.log("spacing", spacing)
    d3.selectAll("g.line path")
        .attr("transform", function(d, i) {
            return "translate(" + [0, h/2 + th / 2 - spacing * d.index] + ")";
        })
}

var color = d3.scale.linear()
    .domain([-1, 1])
    .interpolate(d3.interpolateRgb)
    .range(['#112c6f', '#61a9db']) //hmm

var opacity = d3.scale.linear()
    .domain([0, n])
    .range([1, .2])

b = 1;
d3.timer(function() {
  var elapsed = Date.now() - begin
  var damp = .3

  rotate = function(d,i) {
  var speed = sm * d.speed * elapsed * .1
    return "rotate(" + speed + ")";
  };

  line = d3.selectAll("g.line path")
      .attr("d", function(d,i) {
             //var speed = a * d.speed * elapsed + .01 * d.index
             var speed = sm * .08 * elapsed + d.index * 4
             return line_maker( d, speed )
        })
			.attr("stroke", function(d,i){ return color(d.index);})
      .attr("stroke-opacity", function(d,i) { return opacity(d.index);})

});
</script>
</body>
</html>

## thumbnail.png

      
        

          Raw
        
        
          
            
          
          
            
              thumbnail.png