Panel

Description forthcoming.

See also: pv.Panel API reference.

The Root Panel

SVG element creation, etc.

Composition

The recommended approach for multiple series is to use a Panel to iterate over each:

new pv.Panel()
    .width(150)
    .height(150)
  .add(pv.Panel)
    .data([[1, 1.2, 1.7, 1.5, .7, .5, .2],
           [.4, .2, .8, 1.2, 1.5, 1.1, .8]])
    .left(function() this.index * 10)
  .add(pv.Bar)
    .data(function(array) array)
    .bottom(0)
    .width(10)
    .height(function(d) d * 80)
    .left(function() this.index * 25)
  .root.render();

There are actually two panels in this visualization: the root panel, which serves as the canvas, and a child panel that serves to replicate our bars for each series. The data on the child panel is a two-dimensional array: an array of arrays. The data on the bar simply dereferences the array, thus iterating over the elements in the array.

Note that the automatic index property is used in two places: once on the panel to offset series, and once on the bar to offset individual data elements. Also note that because we used panels to iterate over our series, we can take advantage of the default fill style, which allocates categorical colors by parent index.

Using the data stack

When marks are nested inside panels, their properties can declare additional arguments. These arguments are the data associated with enclosing panels.

Example forthcoming. See the Barley Yields example in the meantime.

Inheritance

Unlike normal marks, when you add a mark to a panel, that mark does not inherit the properties of the panel. However, the position of the mark will be offset by the panel's margins.

See MarkInheritance.