| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102 |
- <html>
- <head>
- <title>Barley Yields</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="barley.js"></script>
- <style type="text/css">
- #fig {
- width: 334px;
- height: 833px;
- }
- </style>
- </head>
- <body><div id="center"><div id="fig">
- <script type="text/javascript+protovis">
- /* Compute yield medians by site and by variety. */
- function median(data) pv.median(data, function(d) d.yield);
- var site = pv.nest(barley).key(function(d) d.site).rollup(median);
- var variety = pv.nest(barley).key(function(d) d.variety).rollup(median);
- /* Nest yields data by site then year. */
- barley = pv.nest(barley)
- .key(function(d) d.site)
- .sortKeys(function(a, b) site[b] - site[a])
- .key(function(d) d.year)
- .sortValues(function(a, b) variety[b.variety] - variety[a.variety])
- .entries();
- /* Sizing and scales. */
- var w = 332,
- h = 132,
- x = pv.Scale.linear(10, 90).range(0, w),
- c = pv.Colors.category10();
- /* The root panel. */
- var vis = new pv.Panel()
- .width(w)
- .height(h * pv.keys(site).length)
- .top(15.5)
- .left(.5)
- .right(.5)
- .bottom(25);
- /* A panel per site-year. */
- var cell = vis.add(pv.Panel)
- .data(barley)
- .height(h)
- .left(90)
- .top(function() this.index * h)
- .strokeStyle("#999");
- /* Title bar. */
- cell.add(pv.Bar)
- .height(14)
- .fillStyle("bisque")
- .anchor("center").add(pv.Label)
- .text(function(site) site.key);
- /* A dot showing the yield. */
- var dot = cell.add(pv.Panel)
- .data(function(site) site.values)
- .top(23)
- .add(pv.Dot)
- .data(function(year) year.values)
- .left(function(d) x(d.yield))
- .top(function() this.index * 11)
- .size(10)
- .lineWidth(2)
- .strokeStyle(function(d) c(d.year));
- /* A label showing the variety. */
- dot.anchor("left").add(pv.Label)
- .visible(function() !this.parent.index)
- .left(-2)
- .text(function(d) d.variety);
- /* X-ticks. */
- vis.add(pv.Rule)
- .data(x.ticks())
- .left(function(d) 90 + x(d))
- .bottom(-5)
- .height(5)
- .strokeStyle("#999")
- .anchor("bottom").add(pv.Label);
- /* A legend showing the year. */
- vis.add(pv.Dot)
- .extend(dot)
- .data([{year:1931}, {year:1932}])
- .left(function(d) 260 + this.index * 40)
- .top(-8)
- .anchor("right").add(pv.Label)
- .text(function(d) d.year);
- vis.render();
- </script>
- </div></div></body>
- </html>
|