D3 multi-line chart - Error: <path> attribute d: Expected number, "MNaN,NaNLNaN,NaNC…"

Question

I'm tring to create a multi-line chart using D3.js. Here is my sample csv data:

A,B,C,D,E,F,G,date
53831,72169.87,54219,72555,63466,115312,126390,4/26/16
53031,70901.11,5976,5111,62388,111626,123198,7/10/16
51834,69917.12,5449,4902,62990,114296,124833,4/24/16
54637,73016.92,58535,77379,63090,113216,125261,6/14/16
54801,73072.4,57997,75674,63090,113216,125261,6/27/16
53578,71718.19,51085,69152,63370,115061,125949,5/3/16
51679,68897.14,6021,5421,61514,110330,121972,7/24/16

Here is my code snippet. However I keep seeing the error like d is not an expected number(as title shows). Can anyone please point me out?

Also I feel like the way I'm parsing data is ugly (two for loop). Any suggestions are welcome.

// Set the dimensions of the canvas / graph
var margin = {
    top: 30,
    right: 20,
    bottom: 30,
    left: 50
  },
  width = 800 - margin.left - margin.right,
  height = 500 - margin.top - margin.bottom;

// Parse the date / time
var parseDate = d3.time.format("%b %Y").parse;

// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);

// Define the axes
var xAxis = d3.svg.axis().scale(x)
  .orient("bottom");

var yAxis = d3.svg.axis().scale(y)
  .orient("left");

var line = d3.svg.line()
  .interpolate("basis")
  .x(function (d) {
    return x(d.date);
  })
  .y(function (d) {
    return y(d.value);
  });

// Adds the svg canvas
var svg = d3.select("#d3-line-chart")
  .append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform",
    "translate(" + margin.left + "," + margin.top + ")");

//get the data
d3.csv("test.csv", function (error, data) {
  var res = [];
  var cols = d3.keys(data[0])
    .filter(function (key) {
      return key;
    });

  for (var j = 0; j < cols.length - 1; j++) {
    var col = cols[j];
    var row = [];
    for (var i = 0; i < data.length; i++) {
      row.push({
        symbol: col,
        date: data[i]["date"],
        value: +data[i][col]
      });
    }
    res.push(row);
  }

  // Scale the range of the data
  x.domain(d3.extent(res, function (d) {
    return d.date;
  }));
  y.domain([0, d3.max(res, function (d) {
    return d.value;
  })]);


  svg.selectAll(".line")
    .data(res)
    .enter().append("path")
    .attr("class", "line")
    .attr("d", line);

  // Add the X Axis
  svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

  // Add the Y Axis
  svg.append("g")
    .attr("class", "y axis")
    .call(yAxis);

});

Answer 1

Firstly, provide sorted data in the CSV on the basis of date so:

Instead of this:

A,B,C,D,E,F,G,date
53831,72169.87,54219,72555,63466,115312,126390,4/26/16
53031,70901.11,5976,5111,62388,111626,123198,7/10/16
51834,69917.12,5449,4902,62990,114296,124833,4/24/16
54637,73016.92,58535,77379,63090,113216,125261,6/14/16
54801,73072.4,57997,75674,63090,113216,125261,6/27/16
53578,71718.19,51085,69152,63370,115061,125949,5/3/16
51679,68897.14,6021,5421,61514,110330,121972,7/24/16

Provide sorted CSV:

A,B,C,D,E,F,G,date
51834,69917.12,5449,4902,62990,114296,124833,4/24/16
53831,72169.87,54219,72555,63466,115312,126390,4/26/16
53578,71718.19,51085,69152,63370,115061,125949,5/3/16
54637,73016.92,58535,77379,63090,113216,125261,6/14/16
54801,73072.4,57997,75674,63090,113216,125261,6/27/16
53031,70901.11,5976,5111,62388,111626,123198,7/10/16
51679,68897.14,6021,5421,61514,110330,121972,7/24/16

Secondly:

The date parser you providing is incorrect:

var parseDate = d3.time.format("%b %Y").parse;

Should have been this:

var parseDate = d3.time.format("%m/%d/%Y").parse;

Because your date is in the format ,4/26/16.

Thirdly,

The way you are calculating the x and y domain extent is wrong:

So instead of this:

  // Scale the range of the data
  x.domain(d3.extent(res, function (d) {
    return d.date;
  }));
  y.domain([0, d3.max(res, function (d) {
    return d.value;
  })]);

It should have been:

  x.domain(d3.extent(data, function (d) {
    return parseDate(d.date);
  }));
  y.domain([0, d3.max(res, function (d) {
    return d3.max(d, function(d2){console.log(d2);return d2.value;});
  })]);

Reason: the res array you creating is an array inside an array so need that handling in here.

Working code here