Skip to content

Instantly share code, notes, and snippets.

@mbostock

mbostock/.block

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.
Download ZIP
Stacked Bar Chart
Raw
.block
license: gpl-3.0
Raw
README.md
Raw
crimea.tsv
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
Raw
index.html
<!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>
@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