D3 Layered nesting for a multi-line chart

Question

I am 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 a relationship table of how the data is related:

So far I have defined my subkey as storageSystem, but how would I set it poolIdas a subkey? I tried adding poolId, but it returnsError: <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 one more call key:

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

Here's what it looks like dataNest:

[
  {
    "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

Please note that it has two levels, so to get the actual data object, you need access to the grouping result element as follows:

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>

Run codeHide result