Skip to content

Instantly share code, notes, and snippets.

@cmackay
Last active October 20, 2015 17:08
Show Gist options
  • Save cmackay/a485bc474a126cb015b5 to your computer and use it in GitHub Desktop.
Save cmackay/a485bc474a126cb015b5 to your computer and use it in GitHub Desktop.
d3 stacked bar
{"description":"d3 stacked bar","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/SEzUGVk.gif"}
var data = [{
key: 'Category A',
values: [{
'x': '2015-01-01T08:00:00+00:00',
'y': 185
}, {
'x': '2015-02-01T08:00:00+00:00',
'y': 450
}, {
'x': '2015-03-01T08:00:00+00:00',
'y': 450
}, {
'x': '2015-04-01T08:00:00+00:00',
'y': 400
}, {
'x': '2015-05-01T08:00:00+00:00',
'y': 530
}, {
'x': '2015-06-01T08:00:00+00:00',
'y': 550
}]
}, {
key: 'Category B',
values: [{
'x': '2015-01-01T08:00:00+00:00',
'y': 500
}, {
'x': '2015-02-01T08:00:00+00:00',
'y': 400
}, {
'x': '2015-03-01T08:00:00+00:00',
'y': 1300
}, {
'x': '2015-04-01T08:00:00+00:00',
'y': 1350
}, {
'x': '2015-05-01T08:00:00+00:00',
'y': 1400
}, {
'x': '2015-06-01T08:00:00+00:00',
'y': 1450
}]
}, {
key: 'Category C',
values: [{
'x': '2015-01-01T08:00:00+00:00',
'y': 300
}, {
'x': '2015-02-01T08:00:00+00:00',
'y': 200
}, {
'x': '2015-03-01T08:00:00+00:00',
'y': 200
}, {
'x': '2015-04-01T08:00:00+00:00',
'y': 150
}, {
'x': '2015-05-01T08:00:00+00:00',
'y': 200
}, {
'x': '2015-06-01T08:00:00+00:00',
'y': 247
}]
}];
var opts = {
width : 742,
height : 596,
margin: {
top : 40,
right : 60,
bottom : 40,
left : 96
},
colors: [
'#26dd2c',
'#dcdc09',
'#f7075f'
],
axis: {
x: {
tickFormat: d3.time.format.utc('%-m/%y')
},
y: {
tickFormat: d3.format('-$,f')
}
}
};
d3.select('body').style('background', '#fff');
var stack = d3.layout.stack()
.values(function (d) {
return d.values;
}),
layers = stack(data),
plotWidth = opts.width - opts.margin.left - opts.margin.right,
plotHeight = opts.height - opts.margin.top - opts.margin.bottom;
var x = d3.scale.ordinal()
.rangeBands([0, plotWidth], 0.31008);
var y = d3.scale.linear()
.range([plotHeight, 0]);
var color = d3.scale.ordinal()
.range(opts.colors);
var xAxis = d3.svg.axis()
.scale(x)
.tickFormat(opts.axis.x.tickFormat)
.orient('bottom');
var yAxis = d3.svg.axis()
.scale(y)
.tickFormat(opts.axis.y.tickFormat)
.orient('left');
data.map(function (stack) {
stack.values.map(function (value) {
// convert to date object
value.x = d3.time.format.iso.parse(value.x);
return value;
});
return stack;
});
x.domain(data[0].values.map(function (v) { return v.x; }));
y.domain([0, d3.max(layers, function (layer) {
// max is largest combined bar
return d3.max(layer.values, function (d) {
return d.y0 + d.y;
});
})]);
var svg = d3.select('svg')
.attr('width', opts.width)
.attr('height', opts.height)
.append('g')
.attr('transform', function () {
return 'translate(' + opts.margin.left + ',' + opts.margin.top + ')';
});
svg.append('g')
.attr('class', 'y axis')
.call(yAxis);
svg.selectAll('.y.axis g.tick')
.append('line')
.attr('class', 'grid-line')
.classed('baseline', function (d) {
return d === 0;
})
.attr('stroke', '#000')
.attr('x1', 0)
.attr('y1', 0)
.attr('x2', plotWidth)
.attr('y2', 0);
svg.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0,' + plotHeight + ')')
.call(xAxis);
var layer = svg.selectAll('.stack')
.data(layers)
.enter()
.append('g')
.attr('class', 'stack')
.style('fill', function (d, i) {
return color(i);
});
var rect = layer.selectAll('rect')
.data(function (d) {
return d.values;
})
.enter()
.append('rect')
.attr('class', 'bar')
.attr('x', function (d) {
return x(d.x);
})
.attr('y', function (d) {
return y(d.y0 + d.y);
})
.attr('width', x.rangeBand)
.attr('height', function (d) {
return y(d.y0) - y(d.y0 + d.y);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment