D3 Multi-Level Nesting for Multi-Line Chart

Question

I'm trying to create a multi-line chart based on the below csv:

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

Here is the relationship table of how the data is connected:

So far I have defined my nested key as storageSystem , but how would I set poolId as the subkey? I have tried adding poolId , but this returns Error: <path> attribute d: Expected number,"MNaN,NaNLNaN,NaN".

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

d3.csv("ssytem.csv", function(error, data) {
    if (error) {
        throw error;
    } else {
        console.log(data);
    }
    data.forEach(function(d) {
            d.date = parseDate(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);

Data Object:

0: Object
 availableVolumeCapacity: 35171324
 date: Thu Apr 13 2017 00:00:00 GMT+0000 (Coordinated Universal Time)
 poolId: "0"
 storageSystem: "system03"
1: Object
 availableVolumeCapacity: 17263711
 date: Thu Apr 13 2017 00:00:00 GMT+0000 (Coordinated Universal Time)
 poolId: "1"
 storageSystem: "system03"

Answer 1

You add another key call:

var dataNest = d3.nest()
    .key(function(d) {return d.storageSystem; })
    .key(function(d) {return d.poolId; })
    .entries(data);

This is how dataNest will look like:

[
  {
    "key": "system01",
    "values": [
      {
        "key": "0",
        "values": [
          {
            "storageSystem": "system01",
            "poolId": "0",
            "availableVolumeCapacity": "18031398",
            "date": "20170413"
          },
          {
            "storageSystem": "system01",
            "poolId": "0",
            "availableVolumeCapacity": "18031387",
            "date": "20170414"
          }
        ]
      },
      {
        "key": "1",
        "values": [
          {
            "storageSystem": "system01",
            "poolId": "1",
            "availableVolumeCapacity": "15626268",
            "date": "20170413"
          },
          {
            "storageSystem": "system01",
            "poolId": "1",
            "availableVolumeCapacity": "15626257",
            "date": "20170414"
          }
        ]
      },
      ... and so on

Notice it has two levels so to get to an actual data object you'll need to access a grouping result member like this:

 var s = `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`; const data = d3.csvParse(s); const dataNest = d3.nest().key(d => d.storageSystem).key(d => d.poolId).entries(data); const container = d3.select('#container'); const lists = container.selectAll('ul').data(dataNest); const listsEnter = lists.enter().append('ul').text(d => d.key) const items = lists.merge(listsEnter).selectAll('li').data(d => d.values); const itemsEnter = items.enter().append('li').text(d => `Pool: ${d.key}`) items.merge(itemsEnter).selectAll('p').data(d => d.values) .enter().append('p').text(d => `Available Capacity: ${d.availableVolumeCapacity}`) 

 ul { font-weight: bold; } li { font-weight: normal; margin: 10px 0; } p { font-size: 13px } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.8.0/d3.min.js"></script> <div id="container"></div>