d3
Version:
A small, free JavaScript library for manipulating documents based on data.
110 lines (93 loc) • 3.04 kB
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;
font: 10px sans-serif;
}
.rule {
shape-rendering: crispEdges;
}
path.line {
fill: none;
}
</style>
</head>
<body>
<script type="text/javascript">
var p = [20, 50, 30, 20],
w = 960 - p[1] - p[3],
h = 500 - p[0] - p[2],
x = d3.time.scale().range([0, w]),
y = d3.scale.linear().range([h, 0]),
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] + "," + p[0] + ")");
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][0].x, causes[0][causes[0].length - 1].x]);
y.domain([0, d3.max(causes[causes.length - 1], function(d) { return d.y0 + d.y; })]);
// Add an area for each cause.
svg.selectAll("path.area")
.data(causes)
.enter().append("svg:path")
.attr("class", "area")
.style("fill", function(d, i) { return z(i); })
.attr("d", d3.svg.area()
.x(function(d) { return x(d.x); })
.y0(function(d) { return y(d.y0); })
.y1(function(d) { return y(d.y0 + d.y); }));
// Add a line for each cause.
svg.selectAll("path.line")
.data(causes)
.enter().append("svg:path")
.attr("class", "line")
.style("stroke", function(d, i) { return d3.rgb(z(i)).darker(); })
.attr("d", d3.svg.line()
.x(function(d) { return x(d.x); })
.y(function(d) { return y(d.y0 + d.y); }));
// Add a label per date.
svg.selectAll("text")
.data(x.ticks(12))
.enter().append("svg:text")
.attr("x", x)
.attr("y", h + 6)
.attr("text-anchor", "middle")
.attr("dy", ".71em")
.text(x.tickFormat(12));
// 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)
.style("stroke", function(d) { return d ? "#fff" : "#000"; })
.style("stroke-opacity", function(d) { return d ? .7 : null; });
rule.append("svg:text")
.attr("x", w + 6)
.attr("dy", ".35em")
.text(d3.format(",d"));
});
</script>
</body>
</html>