Skip to content

Instantly share code, notes, and snippets.

@mbostock
Last active September 17, 2021 06:42
Show Gist options
  • Star 6 You must be signed in to star a gist
  • Fork 15 You must be signed in to fork a gist
  • Save mbostock/1134768 to your computer and use it in GitHub Desktop.
Save mbostock/1134768 to your computer and use it in GitHub Desktop.
Stacked Bar Chart
license: gpl-3.0
date total disease wounds other
4/1854 8571 1 0 5
5/1854 23333 12 0 9
6/1854 28333 11 0 6
7/1854 28772 359 0 23
8/1854 30246 828 1 30
9/1854 30290 788 81 70
10/1854 30643 503 132 128
11/1854 29736 844 287 106
12/1854 32779 1725 114 131
1/1855 32393 2761 83 324
2/1855 30919 2120 42 361
3/1855 30107 1205 32 172
4/1855 32252 477 48 57
5/1855 35473 508 49 37
6/1855 38863 802 209 31
7/1855 42647 382 134 33
8/1855 44614 483 164 25
9/1855 47751 189 276 20
10/1855 46852 128 53 18
11/1855 37853 178 33 32
12/1855 43217 91 18 28
1/1856 44212 42 2 48
2/1856 43485 24 0 19
3/1856 46140 15 0 35
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.axis text {
font: 10px sans-serif;
}
.axis line,
.axis path {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.axis--x path {
display: none;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var causes = ["wounds", "other", "disease"];
var parseDate = d3.time.format("%m/%Y").parse;
var margin = {top: 20, right: 50, bottom: 30, left: 20},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width]);
var y = d3.scale.linear()
.rangeRound([height, 0]);
var z = d3.scale.category10();
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickFormat(d3.time.format("%b"));
var yAxis = d3.svg.axis()
.scale(y)
.orient("right");
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.tsv("crimea.tsv", type, function(error, crimea) {
if (error) throw error;
var layers = d3.layout.stack()(causes.map(function(c) {
return crimea.map(function(d) {
return {x: d.date, y: d[c]};
});
}));
x.domain(layers[0].map(function(d) { return d.x; }));
y.domain([0, d3.max(layers[layers.length - 1], function(d) { return d.y0 + d.y; })]).nice();
var layer = svg.selectAll(".layer")
.data(layers)
.enter().append("g")
.attr("class", "layer")
.style("fill", function(d, i) { return z(i); });
layer.selectAll("rect")
.data(function(d) { return d; })
.enter().append("rect")
.attr("x", function(d) { return x(d.x); })
.attr("y", function(d) { return y(d.y + d.y0); })
.attr("height", function(d) { return y(d.y0) - y(d.y + d.y0); })
.attr("width", x.rangeBand() - 1);
svg.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "axis axis--y")
.attr("transform", "translate(" + width + ",0)")
.call(yAxis);
});
function type(d) {
d.date = parseDate(d.date);
causes.forEach(function(c) { d[c] = +d[c]; });
return d;
}
</script>
@kgryte
Copy link

kgryte commented Jul 4, 2013

A quick couple of comments. First, just curious as to the source of your data. In Nightingale's original work, the numbers are different than yours. Second, in your Protovis polar area diagram example, you have the wedge radii as exactly proportional to the number of deaths, where, in fact, areas should represent deaths, from which radii are calculated. I have created a D3 mock-up which seems in better agreement with Nightingale's original work. Unless that is if I am missing something.

@adius
Copy link

adius commented May 9, 2014

I still don't get why you always use one letter variable names. You're code is always so hard to understand. If I hadn't stumbled upon Margin Conventions I'd still have no idea what p is supposed to be.

@michaelgallon
Copy link

I've tried to make a version of this where the data is updated by json but am having trouble doing the update right, it keeps stacking the numbers and line of the horizontal axis lines. Is there an updating example anywhere?

@agarwal
Copy link

agarwal commented May 13, 2015

@mbostock Can you please specify a license for this gist, and all your gists. I checked various related projects, such as the bl.ocks.org website and repo, but I don't find any mention of a license for the individual gists. Thanks.

And of course, thank you for all your great work.

@mbostock
Copy link
Author

The data in this example was wrong; see mbostock/protovis#10. I am going to correct it shortly.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment