Panels are used to contain and replicate child marks. Description forthcoming.
See also: pv.Panel API reference
SVG element creation, etc.
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.
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 Anderson’s Flowers example in the meantime.
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 the inheritance documentation for more details.