Edit in JSFiddle

var data = [
    [{y: 10}, {y: 20}, {y: 30}], // 青
    [{y: 15}, {y: 5}, {y: 10}],  // 赤
    [{y: 25}, {y: 10}, {y: 5}],  // 緑
];

var container = d3.select('#container');
var svg = container.append('svg').attr({width: 120, height: 200});

// グラフを重ねるレイアウトを使う
var stack = d3.layout.stack();
stack(data);

var group = svg.selectAll('g')
	.data(data).enter().append('g');

var max = d3.max(data[data.length - 1], function(d) { return d.y + d.y0; });

var chart_width = 20;
var colors = ['#89e1f4', '#fab0a3', '#a1db8d'];
var y_scale = d3.scale.linear().domain([0, max]).range([0, 200]);

// 表示
group.selectAll('rect')
    .data(function(d) {
        return d;
    })
    .enter()
    .append('rect')
    .attr({
        fill: function(d, i, s) {
            return colors[s];
        },
        x: function(d, i) {
            return chart_width * i + 10 * i;
        },
        y: function(d, i, s) {
            return 200 - y_scale(d.y0 + d.y);
		},
        width: chart_width,
        height: function(d) {
            return y_scale(d.y);
        }
    });

<div id="container"></div>