Stacked Bar Chart

by Igor Cuckovic

JavaScript

var data = [
  [{y:21},{y:10},{y:10},{y:38},{y:20}],
  [{y:14},{y:25},{y:21},{y:10},{y:10}],
  [{y:14},{y:35},{y:21},{y:10},{y:4}]
];

var height = 600;
var width = 500;

var ch = 100;
var yScale = d3.scale.linear()
    .domain([0, 38])
    .range([0, ch]);

var colors = ["#ff0000", "#00ff00", "#0000ff"];

var color = d3.scale.category20();

var svg = d3.select("body").append("svg")
.attr({
    "width": width,
    "height": height
});

var stack = d3.layout.stack();
stack(data);

var group = svg.append("g")
    .attr("transform", "translate(80, 120)");

var layers = group.selectAll("g")
    .data(data)
    .enter()
    .append("g")
    .style("fill", function(d, i) {return color(i);});

var stacks = layers.selectAll("rect")
    .data(function(d){return d;})
    .enter()
    .append("rect")
    .attr({
        "width": 30,
        "height": function(d, i) {return yScale(d.y);},
        "x": function(d, i) {return i * 50;},
        "y": function(d, i) { return  ch - yScale(d.y + d.y0); }
        
    });


console.log(data);


//make a color scale, stackify the data, then draw the rects 
//on a group you can translate around