| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465 |
- <html>
- <head>
- <title>Crimean War</title>
- <link type="text/css" rel="stylesheet" href="../ex.css"/>
- <script type="text/javascript" src="../../protovis-r3.2.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, 4 / 5),
- y = pv.Scale.linear(0, 1500).range(0, h),
- k = x.range().band / causes.length,
- format = pv.Format.date("%b");
- var vis = new pv.Panel()
- .width(w)
- .height(h)
- .margin(19.5)
- .right(40);
- var panel = vis.add(pv.Panel)
- .data(crimea)
- .left(function(d) x(d.date))
- .width(x.range().band);
- panel.add(pv.Bar)
- .data(causes)
- .bottom(0)
- .width(k)
- .left(function() this.index * k)
- .height(function(t, d) y(d[t]))
- .fillStyle(pv.colors("lightpink", "darkgray", "lightblue"))
- .strokeStyle(function() this.fillStyle().darker())
- .lineWidth(1);
- panel.anchor("bottom").add(pv.Label)
- .visible(function() !(this.parent.index % 3))
- .textBaseline("top")
- .textMargin(5)
- .text(function(d) format(d.date));
- vis.add(pv.Rule)
- .data(y.ticks())
- .bottom(y)
- .strokeStyle(function(i) i ? "rgba(255, 255, 255, .5)" : "black")
- .anchor("right").add(pv.Label)
- .visible(function() !(this.index & 1))
- .textMargin(6);
- vis.render();
- </script>
- </div></div></body>
- </html>
|