A graphical toolkit for visualization
Protovis
Overview
Examples
Documentation
Download
Index
« Previous / Next »

Becker’s Barley

View full screen.

The Trellis display by Becker et al. helped establish small multiples as a “powerful mechanism for understanding interactions in studies of how a response depends on explanatory variables”. Here we reproduce a trellis of Barley yields from the 1930s, complete with main-effects ordering to facilitate comparison. These examples demonstrate Protovis’ support for data transformation via the nest operator.

Notice anything unusual about one of the sites? This anomaly led Becker et al. to suspect a major error with the data that went undetected for six decades.

Next: Bertin’s Hotel

Source

<html>
  <head>
    <title>Barley Yields</title>
    <link type="text/css" rel="stylesheet" href="ex.css?3.2"/>
    <script type="text/javascript" src="../protovis-r3.2.js"></script>
    <script type="text/javascript" src="barley.js"></script>
    <style type="text/css">

#fig {
  width: 350px;
  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 = 242,
    h = 132,
    x = pv.Scale.linear(10, 70).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)
    .left(90)
    .right(20)
    .bottom(25);

/* A panel per site-year. */
var cell = vis.add(pv.Panel)
    .data(barley)
    .height(h)
    .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(12)
    .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(-1)
    .text(function(d) d.variety);

/* X-ticks. */
vis.add(pv.Rule)
    .data(x.ticks(7))
    .left(x)
    .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) 170 + this.index * 40)
    .top(-8)
  .anchor("right").add(pv.Label)
    .text(function(d) d.year);

vis.render();

    </script>
  </div></div></body>
</html>

Data

var barley = [
  { yield: 27.00000, variety: "Manchuria", year: 1931, site: "University Farm" },
  { yield: 48.86667, variety: "Manchuria", year: 1931, site: "Waseca" },
  { yield: 27.43334, variety: "Manchuria", year: 1931, site: "Morris" },
  { yield: 39.93333, variety: "Manchuria", year: 1931, site: "Crookston" },
  { yield: 32.96667, variety: "Manchuria", year: 1931, site: "Grand Rapids" },
  { yield: 28.96667, variety: "Manchuria", year: 1931, site: "Duluth" },
  { yield: 43.06666, variety: "Glabron", year: 1931, site: "University Farm" },
  { yield: 55.20000, variety: "Glabron", year: 1931, site: "Waseca" },
  { yield: 28.76667, variety: "Glabron", year: 1931, site: "Morris" },
  { yield: 38.13333, variety: "Glabron", year: 1931, site: "Crookston" },
  { yield: 29.13333, variety: "Glabron", year: 1931, site: "Grand Rapids" },
  { yield: 29.66667, variety: "Glabron", year: 1931, site: "Duluth" },
  { yield: 35.13333, variety: "Svansota", year: 1931, site: "University Farm" },
  { yield: 47.33333, variety: "Svansota", year: 1931, site: "Waseca" },
  { yield: 25.76667, variety: "Svansota", year: 1931, site: "Morris" },
  { yield: 40.46667, variety: "Svansota", year: 1931, site: "Crookston" },
  { yield: 29.66667, variety: "Svansota", year: 1931, site: "Grand Rapids" },
  { yield: 25.70000, variety: "Svansota", year: 1931, site: "Duluth" },
  { yield: 39.90000, variety: "Velvet", year: 1931, site: "University Farm" },
  { yield: 50.23333, variety: "Velvet", year: 1931, site: "Waseca" },
  { yield: 26.13333, variety: "Velvet", year: 1931, site: "Morris" },
  { yield: 41.33333, variety: "Velvet", year: 1931, site: "Crookston" },
  { yield: 23.03333, variety: "Velvet", year: 1931, site: "Grand Rapids" },
  { yield: 26.30000, variety: "Velvet", year: 1931, site: "Duluth" },
  { yield: 36.56666, variety: "Trebi", year: 1931, site: "University Farm" },
  { yield: 63.83330, variety: "Trebi", year: 1931, site: "Waseca" },
  { yield: 43.76667, variety: "Trebi", year: 1931, site: "Morris" },
  { yield: 46.93333, variety: "Trebi", year: 1931, site: "Crookston" },
  { yield: 29.76667, variety: "Trebi", year: 1931, site: "Grand Rapids" },
  { yield: 33.93333, variety: "Trebi", year: 1931, site: "Duluth" },
  { yield: 43.26667, variety: "No. 457", year: 1931, site: "University Farm" },
  { yield: 58.10000, variety: "No. 457", year: 1931, site: "Waseca" },
  { yield: 28.70000, variety: "No. 457", year: 1931, site: "Morris" },
  { yield: 45.66667, variety: "No. 457", year: 1931, site: "Crookston" },
  { yield: 32.16667, variety: "No. 457", year: 1931, site: "Grand Rapids" },
  { yield: 33.60000, variety: "No. 457", year: 1931, site: "Duluth" },
  { yield: 36.60000, variety: "No. 462", year: 1931, site: "University Farm" },
  { yield: 65.76670, variety: "No. 462", year: 1931, site: "Waseca" },
  { yield: 30.36667, variety: "No. 462", year: 1931, site: "Morris" },
  { yield: 48.56666, variety: "No. 462", year: 1931, site: "Crookston" },
  { yield: 24.93334, variety: "No. 462", year: 1931, site: "Grand Rapids" },
  { yield: 28.10000, variety: "No. 462", year: 1931, site: "Duluth" },
  { yield: 32.76667, variety: "Peatland", year: 1931, site: "University Farm" },
  { yield: 48.56666, variety: "Peatland", year: 1931, site: "Waseca" },
  { yield: 29.86667, variety: "Peatland", year: 1931, site: "Morris" },
  { yield: 41.60000, variety: "Peatland", year: 1931, site: "Crookston" },
  { yield: 34.70000, variety: "Peatland", year: 1931, site: "Grand Rapids" },
  { yield: 32.00000, variety: "Peatland", year: 1931, site: "Duluth" },
  { yield: 24.66667, variety: "No. 475", year: 1931, site: "University Farm" },
  { yield: 46.76667, variety: "No. 475", year: 1931, site: "Waseca" },
  { yield: 22.60000, variety: "No. 475", year: 1931, site: "Morris" },
  { yield: 44.10000, variety: "No. 475", year: 1931, site: "Crookston" },
  { yield: 19.70000, variety: "No. 475", year: 1931, site: "Grand Rapids" },
  { yield: 33.06666, variety: "No. 475", year: 1931, site: "Duluth" },
  { yield: 39.30000, variety: "Wisconsin No. 38", year: 1931, site: "University Farm" },
  { yield: 58.80000, variety: "Wisconsin No. 38", year: 1931, site: "Waseca" },
  { yield: 29.46667, variety: "Wisconsin No. 38", year: 1931, site: "Morris" },
  { yield: 49.86667, variety: "Wisconsin No. 38", year: 1931, site: "Crookston" },
  { yield: 34.46667, variety: "Wisconsin No. 38", year: 1931, site: "Grand Rapids" },
  { yield: 31.60000, variety: "Wisconsin No. 38", year: 1931, site: "Duluth" },
  { yield: 26.90000, variety: "Manchuria", year: 1932, site: "University Farm" },
  { yield: 33.46667, variety: "Manchuria", year: 1932, site: "Waseca" },
  { yield: 34.36666, variety: "Manchuria", year: 1932, site: "Morris" },
  { yield: 32.96667, variety: "Manchuria", year: 1932, site: "Crookston" },
  { yield: 22.13333, variety: "Manchuria", year: 1932, site: "Grand Rapids" },
  { yield: 22.56667, variety: "Manchuria", year: 1932, site: "Duluth" },
  { yield: 36.80000, variety: "Glabron", year: 1932, site: "University Farm" },
  { yield: 37.73333, variety: "Glabron", year: 1932, site: "Waseca" },
  { yield: 35.13333, variety: "Glabron", year: 1932, site: "Morris" },
  { yield: 26.16667, variety: "Glabron", year: 1932, site: "Crookston" },
  { yield: 14.43333, variety: "Glabron", year: 1932, site: "Grand Rapids" },
  { yield: 25.86667, variety: "Glabron", year: 1932, site: "Duluth" },
  { yield: 27.43334, variety: "Svansota", year: 1932, site: "University Farm" },
  { yield: 38.50000, variety: "Svansota", year: 1932, site: "Waseca" },
  { yield: 35.03333, variety: "Svansota", year: 1932, site: "Morris" },
  { yield: 20.63333, variety: "Svansota", year: 1932, site: "Crookston" },
  { yield: 16.63333, variety: "Svansota", year: 1932, site: "Grand Rapids" },
  { yield: 22.23333, variety: "Svansota", year: 1932, site: "Duluth" },
  { yield: 26.80000, variety: "Velvet", year: 1932, site: "University Farm" },
  { yield: 37.40000, variety: "Velvet", year: 1932, site: "Waseca" },
  { yield: 38.83333, variety: "Velvet", year: 1932, site: "Morris" },
  { yield: 32.06666, variety: "Velvet", year: 1932, site: "Crookston" },
  { yield: 32.23333, variety: "Velvet", year: 1932, site: "Grand Rapids" },
  { yield: 22.46667, variety: "Velvet", year: 1932, site: "Duluth" },
  { yield: 29.06667, variety: "Trebi", year: 1932, site: "University Farm" },
  { yield: 49.23330, variety: "Trebi", year: 1932, site: "Waseca" },
  { yield: 46.63333, variety: "Trebi", year: 1932, site: "Morris" },
  { yield: 41.83333, variety: "Trebi", year: 1932, site: "Crookston" },
  { yield: 20.63333, variety: "Trebi", year: 1932, site: "Grand Rapids" },
  { yield: 30.60000, variety: "Trebi", year: 1932, site: "Duluth" },
  { yield: 26.43334, variety: "No. 457", year: 1932, site: "University Farm" },
  { yield: 42.20000, variety: "No. 457", year: 1932, site: "Waseca" },
  { yield: 43.53334, variety: "No. 457", year: 1932, site: "Morris" },
  { yield: 34.33333, variety: "No. 457", year: 1932, site: "Crookston" },
  { yield: 19.46667, variety: "No. 457", year: 1932, site: "Grand Rapids" },
  { yield: 22.70000, variety: "No. 457", year: 1932, site: "Duluth" },
  { yield: 25.56667, variety: "No. 462", year: 1932, site: "University Farm" },
  { yield: 44.70000, variety: "No. 462", year: 1932, site: "Waseca" },
  { yield: 47.00000, variety: "No. 462", year: 1932, site: "Morris" },
  { yield: 30.53333, variety: "No. 462", year: 1932, site: "Crookston" },
  { yield: 19.90000, variety: "No. 462", year: 1932, site: "Grand Rapids" },
  { yield: 22.50000, variety: "No. 462", year: 1932, site: "Duluth" },
  { yield: 28.06667, variety: "Peatland", year: 1932, site: "University Farm" },
  { yield: 36.03333, variety: "Peatland", year: 1932, site: "Waseca" },
  { yield: 43.20000, variety: "Peatland", year: 1932, site: "Morris" },
  { yield: 25.23333, variety: "Peatland", year: 1932, site: "Crookston" },
  { yield: 26.76667, variety: "Peatland", year: 1932, site: "Grand Rapids" },
  { yield: 31.36667, variety: "Peatland", year: 1932, site: "Duluth" },
  { yield: 30.00000, variety: "No. 475", year: 1932, site: "University Farm" },
  { yield: 41.26667, variety: "No. 475", year: 1932, site: "Waseca" },
  { yield: 44.23333, variety: "No. 475", year: 1932, site: "Morris" },
  { yield: 32.13333, variety: "No. 475", year: 1932, site: "Crookston" },
  { yield: 15.23333, variety: "No. 475", year: 1932, site: "Grand Rapids" },
  { yield: 27.36667, variety: "No. 475", year: 1932, site: "Duluth" },
  { yield: 38.00000, variety: "Wisconsin No. 38", year: 1932, site: "University Farm" },
  { yield: 58.16667, variety: "Wisconsin No. 38", year: 1932, site: "Waseca" },
  { yield: 47.16667, variety: "Wisconsin No. 38", year: 1932, site: "Morris" },
  { yield: 35.90000, variety: "Wisconsin No. 38", year: 1932, site: "Crookston" },
  { yield: 20.66667, variety: "Wisconsin No. 38", year: 1932, site: "Grand Rapids" },
  { yield: 29.33333, variety: "Wisconsin No. 38", year: 1932, site: "Duluth" }
];
Copyright 2010 Stanford Visualization Group