D3.js streamgraph example - generating correct area function values

Question

I\'m new to d3js and trying to adapt the streamgraph example from here http://bl.ocks.org/mbostock/4060954:

Answer 1

In your yDomain definition, you need to return the max of each layer's values, since each layer is a map - it has both a key and an array of values, rather than just a flat array of numbers.

var yDomain = d3.max(layers0.concat(layers1), function(layer) { 
    return d3.max(layer.values, //Used to be layer
        function(d) { 
          return d.y0 + d.y; 
        }); 
});

Also, for your stack definition, you need to remove the second offset call.. it negates the "wiggle" one, so you will get a normal stacked graph rather than a streamgraph.

stack = d3.layout.stack().offset("wiggle")  // Used to have .offset("zero") here
      .values(function(d) { return d.values; })

Here's an example with both of those changed : http://jsfiddle.net/G6dTy/3/ . The numbers for the guestbook are small, and are dwarfed by the other two values.

It might be informative to take a look at the Stacked area chart example