title: D3.js Line Graph - Error: <path> attribute d: Expected number
body: <p>I'm trying to create a data visualisation using this <a href="https://bl.ocks.org/larsenmtl/e3b8b7c2ca4787f77d78f58d41c3da91" rel="nofollow noreferrer">example</a>. I'm trying to put my own data in it but I have a few errors and I've seen other people's similar questions but, still I can't figure out what's wrong. The errors I'm getting are: </p>
  
  <blockquote>
    <p>Error:  attribute d: Expected number, "MNaN,251.47058823…".<br>
    Error:  attribute d: Expected number, "MNaN,198.52941176…".</p>
  </blockquote>
  
  <p>My code is:</p>
  
  <pre><code>var margin = {top: 20, right: 80, bottom: 30, left: 50},
      width = 900 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;
  
  var parseTime = d3.timeParse("%Y%m%d");
  
  var x = d3.scaleTime().range([0, width]),
      y = d3.scaleLinear().range([height, 0]),
      z = d3.scaleOrdinal(d3.schemeCategory10);
  
  var xAxis = d3.axisBottom(x)
      yAxis = d3.axisLeft(y);
  
  var color = d3.scaleOrdinal(d3.schemeCategory10);
  
  var line = d3.line()
      .curve(d3.curveBasis)
      .x(function(d) { return x(d.date); })
      .y(function(d) { return y(d.number); });
  
  var svg = d3.select("body").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 + ")");
  
  d3.csv("testData3.csv", function(error, data) {
  
    color.domain(d3.keys(data[0]).filter(function(key) {
      return key !== "date";
    }));
  
    data.forEach(function(d) {
      d.date = parseTime(d.date);
    });
  
    var initials = color.domain().map(function(name) {
      return {
        name: name,
        values: data.map(function(d) {
          return {
            date: d.date,
            number: +d[name]
          };
        })
      };
    });
  
    x.domain(d3.extent(data, function(d) { return d.date; }));
    y.domain([d3.min(initials, function(c) { return d3.min(c.values, function(v) { return v.number; });}),
    d3.max(initials, function(c) { return d3.max(c.values, function(v) { return v.number; });})]);
  
    svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);
  
    svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
      .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Temperature (ºC)");
  
    var initial = svg.selectAll(".initial")
      .data(initials)
      .enter().append("g")
      .attr("class", "initial");
  
    initial.append("path")
      .attr("class", "line")
      .attr("d", function(d) {
        return line(d.values);
      })
      .style("stroke", function(d) {
        return color(d.name);
      });
  
  });
  </code></pre>
  
  <p>And I created this 'dataset' to test it:</p>
  
  <pre><code>date,GN,RM
  1990-01-01,10,14
  1991-01-01,8,15
  1992-01-01,14,11
  1993-01-01,22,8
  1994-01-01,25,3
  1995-01-01,21,4
  1996-01-01,17,1
  1997-01-01,19,-2
  1998-01-01,20,-5
  1999-01-01,20,-3
  1990-02-01,16,4
  1991-02-01,9,9
  1992-02-01,-3,13
  1993-02-01,2,15
  1994-02-01,7,19
  1995-02-01,7,20
  1996-02-01,12,21
  1997-02-01,16,26
  1998-02-01,18,24
  1999-02-01,19,29
  </code></pre>
  
  <p>Thank you in advance!</p>