//Try changing all these parameters
//Layout properties
var w = 700
    , h = 500
    , n = 25
    , m = 40
    , spacing = 65
    , opacity = 0.8
    , stroke_width = 15

//Sin wave function
//y = amplitude * sin( omega * theta + phase)
var amplitude = 15
    , theta = Math.PI * 3.5
    , omega = -0.1
    , phase = -0.5


var lines = [ ];
for (i in d3.range(n)) {

    var data = d3.range(m)
    lines.push({
        index: i,
        data: data
    })
}

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

function line_maker( data ) {
    var freq = omega * data.index
    var svgline = d3.svg.line()
        .x(function(d,i) {
            return xscale(d);
        })
        .y(function(d,i) {
            var th = d/m * theta
            var ph = (n-data.index) * phase
            var y = amplitude * Math.sin(freq * th + ph );
            return y
        })
        .interpolate("basis")
        //.interpolate("linear")
    return svgline(data.data);
}

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

function update_spacing()
{
    var th = spacing * n;
    var hscale = d3.scale.linear()
        .domain([0, n])
        .range([0, h])
    d3.selectAll("g.line path")
        .attr("transform", function(d, i) {
            //return "translate(" + [0, th - spacing * d.index] + ")";
            return "translate(" + [0, 40+h/2 + th / 2 - spacing * d.index] + ")";
        })
}

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 color = d3.scale.linear()
    .domain([0, n])
    //.interpolate(d3.interpolateRgb)
    .interpolate(d3.interpolateHsl)
    .range(['#D40067', '#4DA9DF'])

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

d3.selectAll("g.line path")
    .attr("d", function(d,i) {
        return line_maker(d)
    })
    .attr("stroke", function(d,i) { return color(d.index);})
    .attr("opacity", opacity);