|
| 1 | +<!DOCTYPE html> |
| 2 | +<html> |
| 3 | + <head> |
| 4 | + <title>Crimean War</title> |
| 5 | + <script type="text/javascript" src="../../d3.js"></script> |
| 6 | + <script type="text/javascript" src="../../d3.layout.js"></script> |
| 7 | + <script type="text/javascript" src="../../d3.time.js"></script> |
| 8 | + <script type="text/javascript" src="../../d3.csv.js"></script> |
| 9 | + <style type="text/css"> |
| 10 | + |
| 11 | +svg { |
| 12 | + width: 960px; |
| 13 | + height: 500px; |
| 14 | + border: solid 1px #ccc; |
| 15 | + font: 10px sans-serif; |
| 16 | + shape-rendering: crispEdges; |
| 17 | +} |
| 18 | + |
| 19 | + </style> |
| 20 | + </head> |
| 21 | + <body> |
| 22 | + <script type="text/javascript"> |
| 23 | + |
| 24 | +var w = 960, |
| 25 | + h = 500, |
| 26 | + p = [20, 50, 30, 20], |
| 27 | + x = d3.scale.ordinal().rangeRoundBands([0, w - p[1] - p[3]]), |
| 28 | + y = d3.scale.linear().range([0, h - p[0] - p[2]]), |
| 29 | + z = d3.scale.ordinal().range(["lightpink", "darkgray", "lightblue"]), |
| 30 | + parse = d3.time.format("%m/%Y").parse, |
| 31 | + format = d3.time.format("%b"); |
| 32 | + |
| 33 | +var svg = d3.select("body").append("svg:svg") |
| 34 | + .attr("width", w) |
| 35 | + .attr("height", h) |
| 36 | + .append("svg:g") |
| 37 | + .attr("transform", "translate(" + p[3] + "," + (h - p[2]) + ")"); |
| 38 | + |
| 39 | +d3.csv("crimea.csv", function(crimea) { |
| 40 | + |
| 41 | + // Transpose the data into layers by cause. |
| 42 | + var causes = d3.layout.stack()(["wounds", "other", "disease"].map(function(cause) { |
| 43 | + return crimea.map(function(d) { |
| 44 | + return {x: parse(d.date), y: +d[cause]}; |
| 45 | + }); |
| 46 | + })); |
| 47 | + |
| 48 | + // Compute the x-domain (by date) and y-domain (by top). |
| 49 | + x.domain(causes[0].map(function(d) { return d.x; })); |
| 50 | + y.domain([0, d3.max(causes[causes.length - 1], function(d) { return d.y0 + d.y; })]); |
| 51 | + |
| 52 | + // Add a group for each cause. |
| 53 | + var cause = svg.selectAll("g.cause") |
| 54 | + .data(causes) |
| 55 | + .enter().append("svg:g") |
| 56 | + .attr("class", "cause") |
| 57 | + .style("fill", function(d, i) { return z(i); }) |
| 58 | + .style("stroke", function(d, i) { return d3.rgb(z(i)).darker(); }); |
| 59 | + |
| 60 | + // Add a rect for each date. |
| 61 | + var rect = cause.selectAll("rect") |
| 62 | + .data(Object) |
| 63 | + .enter().append("svg:rect") |
| 64 | + .attr("x", function(d) { return x(d.x); }) |
| 65 | + .attr("y", function(d) { return -y(d.y0) - y(d.y); }) |
| 66 | + .attr("height", function(d) { return y(d.y); }) |
| 67 | + .attr("width", x.rangeBand()); |
| 68 | + |
| 69 | + // Add a label per date. |
| 70 | + var label = svg.selectAll("text") |
| 71 | + .data(x.domain()) |
| 72 | + .enter().append("svg:text") |
| 73 | + .attr("x", function(d) { return x(d) + x.rangeBand() / 2; }) |
| 74 | + .attr("y", 6) |
| 75 | + .attr("text-anchor", "middle") |
| 76 | + .attr("dy", ".71em") |
| 77 | + .text(format); |
| 78 | + |
| 79 | + // Add y-axis rules. |
| 80 | + var rule = svg.selectAll("g.rule") |
| 81 | + .data(y.ticks(5)) |
| 82 | + .enter().append("svg:g") |
| 83 | + .attr("class", "rule") |
| 84 | + .attr("transform", function(d) { return "translate(0," + -y(d) + ")"; }); |
| 85 | + |
| 86 | + rule.append("svg:line") |
| 87 | + .attr("x2", w - p[1] - p[3]) |
| 88 | + .style("stroke", function(d) { return d ? "#fff" : "#000"; }) |
| 89 | + .style("stroke-opacity", function(d) { return d ? .7 : null; }); |
| 90 | + |
| 91 | + rule.append("svg:text") |
| 92 | + .attr("x", w - p[1] - p[3] + 6) |
| 93 | + .attr("dy", ".35em") |
| 94 | + .text(d3.format(",d")); |
| 95 | +}); |
| 96 | + |
| 97 | + </script> |
| 98 | + </body> |
| 99 | +</html> |
0 commit comments