So here's my data my goal is to sum up each line by hour to get data like this

below ..

to ultimately get something like this

so far i am able to get rollup of one line i'm stuck to how can I achieve this task. I am trying to use rollup

.rollup(function(d) { function(d) {return d3.sum(d, function(g) { return  g.line1;} )
.rollup(function(d) { function(d) {return d3.sum(d, function(g) { return  g.line2;} )

but it doesn't allow me to use multiple rollup in one dataset.

/

   var data = [
  {
    "hour":1,
    "line1":2,
    "line2":2
  },
  {
    "hour":1,
    "line1":1,
    "line2":5
  },
  {
    "hour":1,
    "line1":1,
    "line2":5
  },
  {
    "hour":1,
    "line1":4,
    "line2":2
  },
  {
    "hour":2,
    "line1":3,
    "line2":1
  },
  {
    "hour":2,
    "line1":3,
    "line2":4
  },
  {
    "hour":3,
    "line1":2,
    "line2":1
  },
  {
    "hour":3,
    "line1":4,
    "line2":2
  },
  {
    "hour":3,
    "line1":2,
    "line2":2
  },
  {
    "hour":4,
    "line1":3,
    "line2":4
  },
  {
    "hour":4,
    "line1":4,
    "line2":4
  },
  {
    "hour":4,
    "line1":4,
    "line2":1
  },
  {
    "hour":4,
    "line1":4,
    "line2":5
  },
  {
    "hour":4,
    "line1":3,
    "line2":1
  }
];

var margin = {top: 8, right: 10, bottom: 2, left: 10},
    width = 300 - margin.left - margin.right,  
    height = 200 - margin.top - margin.bottom,
    top2 = margin.top + 50 ;

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

var y = d3.scale.linear()
    .range([height, 0]);

var line1 = d3.svg.line()
    .interpolate("basis")
    .x(function(d) { return x(d.hour); })
    .y(function(d) { return y(d.line1); });  /

var line2 = d3.svg.line()
    .interpolate("basis")
    .x(function(d) { return x(d.hour); })
    .y(function(d) { return y(d.line2); });

var svg = d3.selectAll("svg")
      .data(data)
    .enter().append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + 50 + margin.top + margin.bottom);


 d3.nest()
.key(function(d) {return d.hour;})
.rollup(function(d) { function(d) {return d3.sum(d, function(g) { return  g.line1;} )
.rollup(function(d) { function(d) {return d3.sum(d, function(g) { return  g.line2;} )
.entries(data)

So here's my data my goal is to sum up each line by hour to get data like this

below ..

to ultimately get something like this

so far i am able to get rollup of one line i'm stuck to how can I achieve this task. I am trying to use rollup

.rollup(function(d) { function(d) {return d3.sum(d, function(g) { return  g.line1;} )
.rollup(function(d) { function(d) {return d3.sum(d, function(g) { return  g.line2;} )

but it doesn't allow me to use multiple rollup in one dataset.

https://jsfiddle/noxvwhxa/

   var data = [
  {
    "hour":1,
    "line1":2,
    "line2":2
  },
  {
    "hour":1,
    "line1":1,
    "line2":5
  },
  {
    "hour":1,
    "line1":1,
    "line2":5
  },
  {
    "hour":1,
    "line1":4,
    "line2":2
  },
  {
    "hour":2,
    "line1":3,
    "line2":1
  },
  {
    "hour":2,
    "line1":3,
    "line2":4
  },
  {
    "hour":3,
    "line1":2,
    "line2":1
  },
  {
    "hour":3,
    "line1":4,
    "line2":2
  },
  {
    "hour":3,
    "line1":2,
    "line2":2
  },
  {
    "hour":4,
    "line1":3,
    "line2":4
  },
  {
    "hour":4,
    "line1":4,
    "line2":4
  },
  {
    "hour":4,
    "line1":4,
    "line2":1
  },
  {
    "hour":4,
    "line1":4,
    "line2":5
  },
  {
    "hour":4,
    "line1":3,
    "line2":1
  }
];

var margin = {top: 8, right: 10, bottom: 2, left: 10},
    width = 300 - margin.left - margin.right,  
    height = 200 - margin.top - margin.bottom,
    top2 = margin.top + 50 ;

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

var y = d3.scale.linear()
    .range([height, 0]);

var line1 = d3.svg.line()
    .interpolate("basis")
    .x(function(d) { return x(d.hour); })
    .y(function(d) { return y(d.line1); });  /

var line2 = d3.svg.line()
    .interpolate("basis")
    .x(function(d) { return x(d.hour); })
    .y(function(d) { return y(d.line2); });

var svg = d3.selectAll("svg")
      .data(data)
    .enter().append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + 50 + margin.top + margin.bottom);


 d3.nest()
.key(function(d) {return d.hour;})
.rollup(function(d) { function(d) {return d3.sum(d, function(g) { return  g.line1;} )
.rollup(function(d) { function(d) {return d3.sum(d, function(g) { return  g.line2;} )
.entries(data)

• javascript
• svg
• d3.js

1 Answer 1

You can return a plex object in the rollup function that contains both sums you're interested in:

var nested = d3.nest()
  .key(function(d) {return d.hour;})
  .rollup(function(d) {
    return {
        line1: d3.sum(d, function(e) { return e.line1; }),
        line2: d3.sum(d, function(e) { return e.line2; })
    };
  })
  .entries(data);

Complete demo here.