Accepted answer

The .range() method in d3 scales accepts an array that defines the output values of the scale.

At this line:

  //set the ranges
   var x = d3.scaleBand().range(0, width);
   var y = d3.scaleLinear().range([height, 0]);

Notice how the Y scale range is defined correctly, but the X range is missing the [ ], turning the array into two invalid parameters. Since the output of the scale is invalid, it causes the NaN errors on the path, and the x axis can't render properly.

Declaring the range as an array should fix the error:

   var x = d3.scaleBand().range([0, width]);

Related Query