Displaying a graph

Question

Below is the code to create graph

var margin = {
  top: 20,
  right: 20,
  bottom: 30,
  left: 50
},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;

Answer 1

First Give a domain to y scale:

  y.domain([d3.min(newDataArray, function(d) {
    return d3.min([d.fit, d.upr, d.lwr]);//min of all 3
  }), d3.max(newDataArray, function(d) {
    return d3.max([d.fit, d.upr, d.lwr]);//max of all 3
  })]);

Second create line generators for all three:

  var linefit = d3.svg.line()
    .x(function(d, i) {
      console.log(d);
      return x(i);
    })
    .y(function(d) {
      return y(d.fit);
    });
  var lineupr = d3.svg.line()
    .x(function(d, i) {
      console.log(d);
      return x(i);
    })
    .y(function(d) {

      return y(d.upr);//give upr
    });
  var linelwr = d3.svg.line()
    .x(function(d, i) {
      console.log(d);
      return x(i);
    })
    .y(function(d) {

      return y(d.lwr);//get y for lwr
    });  

Last create 3 paths with different colors and call their respective line generators.

  //line for fit
  svg.append("path")
    .datum(newDataArray)
    .attr("class", "line")
    .attr("d", function(d) {
      return linefit(d)
    })
    .style("stroke", "red");
    //line for upr
    svg.append("path")
    .datum(newDataArray)
    .attr("class", "line")
    .attr("d", function(d) {
      return lineupr(d)
    })
    .style("stroke", "blue");
    //line for lwr
      svg.append("path")
    .datum(newDataArray)
    .attr("class", "line")
    .attr("d", function(d) {
      return linefit(d)
    })
    .style("stroke", "red");

    svg.append("path")
    .datum(newDataArray)
    .attr("class", "line")
    .attr("d", function(d) {
      return linelwr(d)
    })
    .style("stroke", "green");

working code here