Drawing Area Shapes

This Area class extends the lower level functionality of the d3-shape area generator by drawing the produced area to the screen and using the largest rectangle function to find the optimal placement for a label. Following the d3 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 points to draw a custom area:

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}
];

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