d3.js sin waves

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <style type="text/css">

body {
  background: #333;
}

rect {
  stroke-width: 2.5px;
}

/*
.square:nth-child(2n + 1) rect {
}
*/

</style>
  </head>
  <body>
      <svg></svg>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@2.6.0/d3.js"></script>
    <script type="text/javascript" src="jwerty.js"></script>
    <script type="text/javascript">

var w = 960,
    h = 500,
    start = Date.now();

var rings = [ ];
var lines = [ ];

var n = 25;
var m = 70;

for (i in d3.range(n))
{
    if(i < 3)
        var speed = (i-3) * 1e-2;
    else
        var speed = (i-2) * 1e-2;
    //var speed = 50e-2 / (i + 1)
    //var speed = .001 *  n / (.5*i+1)
    var speed = .001 * i * 4;

var data = d3.range(m) 
    lines.push({ 
        //radius: 65*i, 
        width: 5, 
        height: 15,
        speed: speed,
        //speed: speed_scale(i),
        index: i,
        data: data
    })

}

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

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

//console.log("line enter", d)
  d3.select(this).selectAll("path.path")
      .data([d])
      .enter()
    .append("svg:path")
      .attr("class", "path")
      //.attr("transform", function(_, i) { return "translate(" + [0, h - spacing * d.index] + ")"; })
    .attr("d", function(d,i) {
              return line_maker( d, 0 ) 
            }
        )
      .attr("stroke-width", function(e,i) { return e.width;})
      .attr("stroke", "#fff")
      .attr("fill", "none")

update_spacing()
}

var svg = d3.select("svg")
    .attr("width", w)
    .attr("height", h)
  .append("svg:g")
    //.attr("transform", "translate(" + w / 2 + "," + h / 2 + ")scale(.6)");

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

jwerty.key('a', function () { 
    omega -= .01;
    console.log("omega", omega)
});
jwerty.key('d', function () { 
    omega += .01;
    console.log("omega", omega)
});

var pause = false;
jwerty.key('p', function () { 
    pause = !pause;
});

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

//console.log("th", th, hscale(99))
    console.log("spacing", spacing)
    d3.selectAll("g.line path")
        .attr("transform", function(d, i) { 
            //console.log("h",h, spacing, d.index);
            //return "translate(" + [0, th - spacing * d.index] + ")"; 
            return "translate(" + [0, h/2 + th / 2 - spacing * d.index] + ")"; 
        })
}
jwerty.key('↑', function () { 
    spacing += 1;
    update_spacing();
});
jwerty.key('↓', function () { 
    spacing -= 1;
    update_spacing();
});
//jwerty.key('↑', function () { 
jwerty.key('←', function () { 
    sm -= .01;
    console.log("speed multiplier", sm);
});
//jwerty.key('↓', function () { 
jwerty.key('→', function () { 
    sm += .01;
    console.log("speed multiplier", sm);
});

var color = d3.scale.linear()
    .domain([-1, 1])
    .interpolate(d3.interpolateRgb)
    .range(['#fff', '#000'])

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

b = 1;
d3.timer(function() {
  if(pause) return false;
  var elapsed = Date.now() - start
  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-opacity", function(d,i) { return opacity(d.index);})

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

Modified http://mbostock.github.com/d3/d3.js?2.6.0 to a secure url

https://mbostock.github.com/d3/d3.js?2.6.0