title: d3js: Uncaught TypeError: Cannot read property 'length' of undefined
body: <p>I am a newbie to d3. I'm pretty sure there is not an issue with my data. Any point in the right direction would be appreciated.</p>
  
  <pre><code>(function() {
  
    d3.json("data.json", function(error, json){
      if(error) return console.warn(error);
      data = json;
  
      var format = d3.time.format("%a %b %d %Y")
      var amountFn = function(d){return d.amount}
      var dateFn = function(d){
        console.log(d.bonus);
        return format.parse(d.date)
  
      }
  
  
      var x = d3.time.scale()
        .range([10, 280])
        .domain(d3.extent(data, dateFn));
  
      var y = d3.scale.linear()
        .range([180, 10])
        .domain(d3.extent(data, amountFn));
  
      var svg = d3.select('#demo').append("svg:svg")
        .attr("width", 300)
        .attr("height", 200)
  
      svg.selectAll("circle").data(data).enter()
        .append("svg:circle")
        .attr("r", 4)
        .attr("cx", function(d){return x(dateFn(d.draw_date))})
        .attr("cy", function(d){return y(amountFn(d))})
    });
  
  
   })();
  </code></pre>
  
  <p>my data being retrieved is in the following formats.</p>
  
  <pre><code>[
      {
          "date": "2015-08-26T00:00:00",
          "amount": "30"
      },
      ...more data
  ]
  </code></pre>