title: "Error: <path> attribute d: Expected number, "MNaN,NaNLNaN,NaNL…". " Error with D3
body: <p>I'm importing some data from Quandl's API to make a chart of brent oil prices over the years. I'm serving the data from a HTTP-request made with Angular. Somehow the data being served is not being read as numbers, since i get the following error:</p>
  
  <blockquote>
    <p>Error:  attribute d: Expected number, "MNaN,NaNLNaN,NaNL…".</p>
  </blockquote>
  
  <pre><code>app.service('oilService', function($http) {
    delete $http.defaults.headers.common['X-Requested-With'];
    this.getData = function() {
    var URL = "https://www.quandl.com/api/v1/datasets/CHRIS/ICE_B1.json";
    return $http({
       method: 'GET',
       url: URL
    })
   }
  })
  
  .directive('oilGraph', function() {
   return {
    scope: {},
    controller: function(oilService) {
    var width = 200;
    var height = 100;
  
    var parseTime = d3.timeParse("%y-%m-%d");
  
    var x = d3.scaleTime().range([0, width]);
    var y = d3.scaleLinear().range([height, 0]);
  
    var valueline = d3.line()
        .x(function(d) { return x(d.date); })
        .y(function(d) { return y(d.settle); });
    var svg = d3.select("#oilgraph").append("svg")
          .attr("width", width)
          .attr("height", height);
  
    oilService.getData()
    .then(function(data) {
  
        var mapped_data = data.data.data.map(function(d) {
          return {
            date: parseTime(d[0]),
            settle: d[4]
          };
        })
  
        x.domain(d3.extent(data, function(d) { return d.date; }));
        y.domain([0, d3.max(data, function(d) { return d.settle; })]);
  
        svg.append("path")
            .data([mapped_data])
            .attr("class", "line")
            .attr("d", valueline);
  
        svg.append("g")
            .attr("transform", "translate(0," + height + ")")
            .call(d3.axisBottom(x));
  
        svg.append("g")
            .call(d3.axisLeft(y));
      })
     })
    }
   }
  })
  </code></pre>