Add Crimean War stacked bar example.
This commit is contained in:
Родитель
3be57161b1
Коммит
d7ae2b8527
|
@ -0,0 +1,99 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Crimean War</title>
|
||||
<script type="text/javascript" src="../../d3.js"></script>
|
||||
<script type="text/javascript" src="../../d3.layout.js"></script>
|
||||
<script type="text/javascript" src="../../d3.time.js"></script>
|
||||
<script type="text/javascript" src="../../d3.csv.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; }));
|
||||
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>
|
|
@ -0,0 +1,24 @@
|
|||
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
|
||||
12/1854,295,310,1100
|
||||
1/1855,230,460,1440
|
||||
2/1855,180,520,1270
|
||||
3/1855,155,350,935
|
||||
4/1855,195,195,560
|
||||
5/1855,180,155,550
|
||||
6/1855,330,130,650
|
||||
7/1855,260,130,430
|
||||
8/1855,290,110,490
|
||||
9/1855,355,100,290
|
||||
10/1855,135,95,245
|
||||
11/1855,100,140,325
|
||||
12/1855,40,120,215
|
||||
1/1856,0,160,160
|
||||
2/1856,0,100,100
|
||||
3/1856,0,125,90
|
|
Загрузка…
Ссылка в новой задаче