A recreation of a Protovis example in D3 using the stack layout.
Last active
September 17, 2021 06:42
-
-
Save mbostock/1134768 to your computer and use it in GitHub Desktop.
Stacked Bar Chart
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: gpl-3.0 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
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?
@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.
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
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.