title: X scale function in D3.js keeps returning undefined
body: <p>I am new to D3.js and trying to make a bar chart with GDP on Y axis and date on X axis.</p>
  
  <p>I am trying to make a xScale with d3.timeScale() but for some reason the code keeps returning undefined when using it. Below is my code, what am I doing wrong?</p>
  
  <pre><code>var data = [
    [
      "2011-01-01",
      15238.4 ]
    , 
      ["2015-07-01",
      18064.7
    ]
  ];
  
  var w = 1000;
  var h = 300;
  var barPadding = 1;
  
  var svg = d3.select("#chart")
              .append("svg")
              .attr("height", h);
  
  var maxDate = d3.max(data, function(d){
  
    return d[0];
  
  });
  
  var minDate = d3.min(data, function(d){
  
    return d[0];
  
  });
  
  var maxGDP = d3.max(data, function(d){
  
    return d[1];
  
  });
  
  var minGDP = d3.min(data, function(d){
  
    return d[1];
  
  });
  
  
  minDate = new Date(minDate);
  
  maxDate = new Date(maxDate)
  
  var xScale = d3.scaleTime()
                       .domain([minDate, maxDate])
                       .range(0,w)
  
  var yScale = d3.scaleLinear()
                       .domain([minGDP, maxGDP])
                       .range(0,h)
  
              .attr("width", w)
  
  var bars = svg.selectAll("rect")
                .data(data)
                .enter()
                .append("rect")
  
  var barAttributes = bars
                         .attr("x", function(d) { return xScale(d[0]);})
                         .attr("y", function(d) { return h - (d[1]/100);})
                         .attr("width", function(d,i) { return w/data.length;})
                         .attr("height", function(d) { return (d[1]/100) *4 ;})
                         .attr("fill", "#8e44ad");     
  </code></pre>