A recreation of a Protovis example in D3, using the stack layout.
-
-
Save anotherjavadude/2908586 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
| date | wounds | other | disease | |
|---|---|---|---|---|
| 5/1854 | 0 | 95 | 105 | |
| 6/1854 | 0 | 40 | 95 | |
| 7/1854 | 0 | 140 | 520 | |
| 8/1854 | 20 | 150 | 800 | |
| 9/1854 | 220 | 230 | 740 | |
| 10/1854 | 305 | 310 | 600 | |
| 11/1854 | 480 | 290 | 820 |
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> | |
| <html> | |
| <head> | |
| <title>Crimean War</title> | |
| <script src="http://d3js.org/d3.v2.js"></script> | |
| <style type="text/css"> | |
| svg { | |
| width: 960px; | |
| height: 500px; | |
| border: solid 1px #ccc; | |
| font: 10px sans-serif; | |
| shape-rendering: crispEdges; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script type="text/javascript"> | |
| var w = 960, | |
| h = 500, | |
| p = [20, 50, 30, 20], | |
| x = d3.scale.ordinal().rangeRoundBands([0, w - p[1] - p[3]]), | |
| y = d3.scale.linear().range([0, h - p[0] - p[2]]), | |
| z = d3.scale.ordinal().range(["lightpink", "darkgray", "lightblue"]), | |
| parse = d3.time.format("%m/%Y").parse, | |
| format = d3.time.format("%b"); | |
| var svg = d3.select("body").append("svg:svg") | |
| .attr("width", w) | |
| .attr("height", h) | |
| .append("svg:g") | |
| .attr("transform", "translate(" + p[3] + "," + (h - p[2]) + ")"); | |
| d3.csv("crimea.csv", function(crimea) { | |
| // Transpose the data into layers by cause. | |
| var causes = d3.layout.stack()(["wounds", "other", "disease"].map(function(cause) { | |
| return crimea.map(function(d) { | |
| return {x: parse(d.date), y: +d[cause]}; | |
| }); | |
| })); | |
| // Compute the x-domain (by date) and y-domain (by top). | |
| x.domain(causes[0].map(function(d) { return d.x; })); | |
| console.log(x.domain()); | |
| y.domain([0, d3.max(causes[causes.length - 1], function(d) { return d.y0 + d.y; })]); | |
| // Add a group for each cause. | |
| var cause = svg.selectAll("g.cause") | |
| .data(causes) | |
| .enter().append("svg:g") | |
| .attr("class", "cause") | |
| .style("fill", function(d, i) { return z(i); }) | |
| .style("stroke", function(d, i) { return d3.rgb(z(i)).darker(); }); | |
| // Add a rect for each date. | |
| var rect = cause.selectAll("rect") | |
| .data(Object) | |
| .enter().append("svg:rect") | |
| .attr("x", function(d) { return x(d.x); }) | |
| .attr("y", function(d) { return -y(d.y0) - y(d.y); }) | |
| .attr("height", function(d) { return y(d.y); }) | |
| .attr("width", x.rangeBand()); | |
| // Add a label per date. | |
| var label = svg.selectAll("text") | |
| .data(x.domain()) | |
| .enter().append("svg:text") | |
| .attr("x", function(d) { return x(d) + x.rangeBand() / 2; }) | |
| .attr("y", 6) | |
| .attr("text-anchor", "middle") | |
| .attr("dy", ".71em") | |
| .text(format); | |
| // Add y-axis rules. | |
| var rule = svg.selectAll("g.rule") | |
| .data(y.ticks(5)) | |
| .enter().append("svg:g") | |
| .attr("class", "rule") | |
| .attr("transform", function(d) { return "translate(0," + -y(d) + ")"; }); | |
| rule.append("svg:line") | |
| .attr("x2", w - p[1] - p[3]) | |
| .style("stroke", function(d) { return d ? "#fff" : "#000"; }) | |
| .style("stroke-opacity", function(d) { return d ? .7 : null; }); | |
| rule.append("svg:text") | |
| .attr("x", w - p[1] - p[3] + 6) | |
| .attr("dy", ".35em") | |
| .text(d3.format(",d")); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment