CODEWITHSUNDEEP
javascriptsvgd3.js
JPC
JPC

Reputation: 5173

How to group multiple values in nested D3 to create multiple rollup sum chart ?

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

below .. enter image description here

to ultimately get something like this enter image description here

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.net/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)

Upvotes: 2

Views: 4602

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109232

You can return a complex 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.

Upvotes: 6

Related Questions