Error with D3 line graph path

Question

Been staring at this code for a bit too long now and can't work out why I am getting NaN values for the date part or the path. I am still pretty new to D3 but this is looking like the examples I have found and also some other similar working code I have for this type of graph so I'm a bit stumped.

Essentially the part that is causing the issue is the x() function which is returning the NaN values.

Instead of using the native JS Date function I have also tried getting D3 to parse the dates but get the same error.

I have made a test case for this here: http://tributary.io/inlet/fe23c00c6e3ed6d4b0de and a codepen if this is easier http://codepen.io/jamieholliday/pen/ogaLRg?editors=101

var svg = d3.select("svg");
var data = [{
      "date" : "2015-03-06",
      "score" : 30
    }, {
      "date" : "2015-02-06",
      "score" : 22
    }, {
      "date" : "2015-01-06",
      "score" : 43
    }, {
      "date" : "2014-12-06",
      "score" : 10
    }, {
      "date" : "2014-11-06",
      "score" : 38
    }, {
      "date" : "2015-02-20",
      "score" : 30
    }, {
      "date" : "2015-03-05",
      "score" : 44
    }, {
      "date" : "2015-03-11",
      "score" : 37
    } ];

var x = d3.time.scale()
    .domain(d3.extent(data, function(d) { return new Date(d.date);}))
                    .range(0, 500);

var y = d3.scale.linear()
        .domain([0, d3.max(data, function(d) {return d.score;})])
        .range([500, 0]);

var line = d3.svg.line()
    .x(function(d) { 
        return x(new Date(d.date));
    })
    .y(function(d) { 
        return y(d.score);
    });

svg.append('path')
    .attr('d', line(data))

Answer 1

You just need to make sure you use an array to specify the range for the x scale:

.range([0, 500]);

rather than

.range(0, 500);

Easy mistake to make! Fiddle here: http://jsfiddle.net/henbox/os7xtkLk/ . You'll also need to sort your dates before plotting