Area Generator

This generator extends the lower level functionality of the d3-shape area generator, drawing the produced area to the screen, following their definition of an area:

An area is defined by two bounding lines, either splines or polylines. Typically, the two lines share the same x-values (x0 = x1), differing only in y-value (y0 and y1); most commonly, y0 is defined as a constant representing zero. The first line (the topline) is defined by x1 and y1 and is rendered first; the second line (the baseline) is defined by x0 and y0 and is rendered second, with the points in reverse order.

In the simplest case, it only needs a few data values:

var data = [
  {x: 0, y0: 300, y1: 200},
  {x: 150, y0: 100, y1: 0},
  {x: 450, y0: 300, y1: 180},
  {x: 700, y0: 140, y1: 40}
];

It can be passed to the area generator like this:

new d3plus.Area()
  .data(data)
  .y0(function(d) { return d.y0; })
  .y1(function(d) { return d.y1; })
  .label("An Example D3plus Area")
  .render();

This is also a great example of the largest rectangle function put to use in order to find the optimal placement for the label.