forked from mbostock/protovis
/
crimea-stacked-bar.html
60 lines (52 loc) · 1.44 KB
/
crimea-stacked-bar.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<html>
<head>
<title>Crimean War</title>
<link type="text/css" rel="stylesheet" href="../ex.css"/>
<script type="text/javascript" src="../../protovis.js"></script>
<script type="text/javascript" src="crimea.js"></script>
<style type="text/css">
#fig {
width: 600px;
height: 300px;
}
</style>
</head>
<body><div id="center"><div id="fig">
<script type="text/javascript+protovis">
var w = 545,
h = 280,
x = pv.Scale.ordinal(crimea, function(d) d.date).splitBanded(0, w),
y = pv.Scale.linear(0, 2200).range(0, h),
fill = pv.colors("lightpink", "darkgray", "lightblue"),
format = pv.Format.date("%b");
var vis = new pv.Panel()
.width(w)
.height(h)
.margin(19.5)
.right(40);
vis.add(pv.Layout.Stack)
.layers(causes)
.values(crimea)
.x(function(d) x(d.date))
.y(function(d, t) y(d[t]))
.layer.add(pv.Bar)
.antialias(false)
.width(x.range().band)
.fillStyle(fill.by(pv.parent))
.strokeStyle(function() this.fillStyle().darker())
.lineWidth(1)
.anchor("bottom").add(pv.Label)
.visible(function() !this.parent.index && !(this.index % 3))
.textBaseline("top")
.textMargin(5)
.text(function(d) format(d.date));
vis.add(pv.Rule)
.data(y.ticks(5))
.bottom(y)
.strokeStyle(function(i) i ? "rgba(255, 255, 255, .7)" : "black")
.anchor("right").add(pv.Label)
.textMargin(6);
vis.render();
</script>
</div></div></body>
</html>