"error: Attribute D: Expected Number, "mnan,nanlnan,nanl…". " Error With D3

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 ser

Solution 1:

Your problem is just a wrong specifier. Since your dates have the century...

"2017-06-16"

... you should use %Y instead of %y. According to the API:

%Y - year with century as a decimal number.

Thus, this should be your specifier:

var parseTime = d3.timeParse("%Y-%m-%d");

Besides that, you have to use mapped_data in the scales, not data.

Here is your code with that changes:

var width = 500;
var height = 200;

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) {
    returnx(d.date);
  })
  .y(function(d) {
    returny(d.settle);
  });

var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height);

d3.json("https://www.quandl.com/api/v1/datasets/CHRIS/ICE_B1.json", function(data) {

  var mapped_data = data.data.map(function(d) {
    return {
      date: parseTime(d[0]),
      settle: d[4]
    };
  });

  x.domain(d3.extent(mapped_data, function(d) {
    return d.date;
  }));
  y.domain([0, d3.max(mapped_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));

})

path {
  fill: none;
  stroke: black;
}

<scriptsrc="https://d3js.org/d3.v4.min.js"></script>

Solution 2:

As far as i can see, in your code at

       svg.append("path")
      .data([mapped_data])
      .attr("class", "line")
      .attr("d", valueline);`

.attr("d", valueline);, "valueline is giving you nan", either you want to use property of value line. i.e x and y property of it you setting it in above of your code.