d3js stack chart with simple data

Question

I need a very basic example to create a stack chart like this example with a predefined array like this: ``` var data = [[ 1, 4, 2, 7], [21, 2, 5, 10], [ 1, 17, 16, 6]] ``` Whatever I do ends creating errors. E.g. TypeError: data is undefined. Here is my simplified code so far: ```

Accepted Answer

You can see a working example at http://jsfiddle.net/DyrsK/2/.

Generally I find it easier to permute the input data a little bit to get into the default form that `d3` expects. For this example I took your data and computed the `x`, `y` and `y0` values and then passed that to the default stack layout.

```
var data = [[ 1,  4,  2,  7],
            [21,  2,  5, 10],
            [ 1, 17, 16,  6]];

// permute the data
data = data.map(function(d) { 
    return d.map(function(p, i) { 
        return {x:i, y:p, y0:0};
    });
});
```

I think there is an easier way to do this, but I had trouble with the `out()` function of `d3.layout.stack()` since your input data was a value but the `out()` function expects it to be a reference value. This meant that there wasn't a way to update the values with the computed offsets and so the data being returned by `stack()` was always equal to the input values.

After getting the stack function to work, the rest pretty much followed from the example you linked to:

```
var stack = d3.layout.stack()
      .offset("zero")

var layers = stack(data);

var area = d3.svg.area()
    .interpolate('cardinal')
    .x(function(d, i) { return x(i); })
    .y0(function(d) { return y(d.y0); })
    .y1(function(d) { return y(d.y0 + d.y); });

svg.selectAll(".layer")
      .data(layers)
      .enter().append("path")
      .attr("class", "layer")
      .attr("d", function(d) { return area(d); })
      .style("fill", function(d, i) { return colors(i); });
```

Hope this helps!

d3js stack chart with simple data

Solution

Problem