I'm tring to create a multi-line chart using D3.js v4. I'm using this example: https://bl.ocks.org/mbostock/3884955.

Sample csv Data:

storageSystem,poolId,availableVolumeCapacity,date

system01,0,18031398,20170413

system01,1,15626268,20170413

system01,2,61256286,20170413

system01,3,119514990,20170413

system02,0,15046668,20170413

system02,1,12486558,20170413

system02,2,12303396,20170413

system03,0,35171335,20170413

system03,1,17263722,20170413

system01,0,18031387,20170414

system01,1,15626257,20170414

system01,2,61256275,20170414

system01,3,119514989,20170414

system02,0,15046657,20170414

system02,1,12486547,20170414

system02,2,12303385,20170414

system03,0,35171324,20170414

system03,1,17263711,20170414

Data Object:

0: Object

  color: #8c564b

  key: system03

  values: Array(2)

    0: Object

      key: 0

      values: Array(23)

        0: Object

          availableVolumeCapacity: 35171335

          date: Thu Apr 13 2017 00:00:00 GMT+0000 (Coordinated Universal Time)

          poolId: 0

          storageSystem: system03

    1: Object

      key: 1

      values: Array(23)

        0: Object

          availableVolumeCapacity: 17263722

          date: Thu Apr 13 2017 00:00:00 GMT+0000 (Coordinated Universal Time)

          poolId:1

          storageSystem: system03

D3.js Code:

var svg = d3.select(svg)

    m = {top: 20, right: 20, bottom: 50, left: 20},

    w = svg.attr(width) - m.left - m.right,

    h = svg.attr(height) - m.top - m.bottom,

    g = svg.append(g).attr(transform, translate( + m.left + , + m.top + ));



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



var x = d3.scaleTime().range([0, w]),

    y = d3.scaleLinear().range([h, 0]),

    z = d3.scaleOrdinal(d3.schemeCategory10);



var line = d3.line()

    .curve(d3.curveBasis)

    .x(function(d) { return x(d.date); })

    .y(function(d) { return y(d.availableVolumeCapacity); });



d3.csv(ssystem.csv, function(error, data) {

    if (error) throw error;

    data.forEach(function(d) {

            d.date = parseTime(d.date);

            d.availableVolumeCapacity = +d.availableVolumeCapacity;

});



x.domain(d3.extent(data, function(d) { return d.date; }));

y.domain([0, d3.max(data, function(d) { return d.availableVolumeCapacity; })]);



var dataNest = d3.nest()

    .key(function(d) {return d.storageSystem; })

    .key(function(d) {return d.poolId; })

    .entries(data);



console.log(dataNest)



legendSpace = w/dataNest.length;



dataNest.forEach(function(d,i) {

    svg.append(path)

        .attr(class, line)

        .style(stroke, function() {

            return d.color = z(d.key); })

        .attr(id, 'tag'+d.key.replace(/s+/g, ''))

        .attr(d, line(d.values));

    svg.append(text)

        .attr(x, (legendSpace/2)+i*legendSpace)

        .attr(y, h + (m.bottom/2)+ 5)

        .attr(class, legend)

        .style(fill, function() {

            return d.color = z(d.key); })

        .on(click, function(){

            // Determine if current line is visible

            var active = d.active ? false : true,

            newOpacity = active ? 0 : 1;

            // Hide or show the elements based on the ID

            d3.select(#tag+d.key.replace(/s+/g, ''))

                .transition().duration(100)

                .style(opacity, newOpacity);

            // Update whether or not the elements are active

            d.active = active;

            })

        .text(d.key);

});



svg.append(g)

      .attr(class, axis axis--x)

      .attr(transform, translate(0, + h + ))

      .call(d3.axisBottom(x));



svg.append(g)

      .attr(class, axis axis--y)

      .call(d3.axisLeft(y))

    .append(text)

      .attr(transform, rotate(-90))

      .attr(y, 6)

      .attr(dy, 0.71em)

      .attr(fill, #000)

      .text(Capacity (MB));

});

I'm seeing the following error 4 times from the console:

Error: <path> attribute d: Expected number, MNaN,NaNLNaN,NaN.

(anonymous) @ d3.v4.min.js:205

ul @ d3.v4.min.js:3768

al @ d3.v4.min.js:3775

(anonymous) @ multi-line.js:51

(anonymous) @ multi-line.js:45

(anonymous) @ d3.v4.min.js:5857

call @ d3.v4.min.js:3622

e @ d3.v4.min.js:5840

Any help is much appreciated.