| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061 |
- <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.linear(crimea, function(d) d.date).range(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.Area)
- .fillStyle(fill.by(pv.parent))
- .strokeStyle(function() this.fillStyle().darker())
- .lineWidth(1);
- vis.add(pv.Label)
- .data(x.ticks())
- .left(x)
- .bottom(0)
- .textBaseline("top")
- .textMargin(5)
- .text(pv.Format.date("%b"));
- 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>
|