Class pv.Layout.Grid

Extends pv.Layout.
Implements a grid layout with regularly-sized rows and columns. The number of rows and columns are determined from their respective properties. For example, the 2×3 array:

1 2 3
4 5 6

can be represented using the rows property as:

[[1, 2, 3], [4, 5, 6]]

If your data is in column-major order, you can equivalently use the columns property. If the rows property is an array, it takes priority over the columns property. The data is implicitly transposed, as if the pv.transpose operator were applied.

This layout exports a single cell mark prototype, which is intended to be used with a bar, panel, layout, or subclass thereof. The data property of the cell prototype is defined as the elements in the array. For example, if the array is a two-dimensional array of values in the range [0,1], a simple heatmap can be generated as:

vis.add(pv.Layout.Grid)
    .rows(arrays)
  .cell.add(pv.Bar)
    .fillStyle(pv.ramp("white", "black"))

The grid subdivides the full width and height of the parent panel into equal rectangles. Note, however, that for large, interactive, or animated heatmaps, you may see significantly better performance through dynamic pv.Image generation.

For irregular grids using value-based spatial partitioning, see {@link pv.Layout.Treemap}.
Defined in: Grid.js.

Class Summary
Constructor Attributes	Constructor Name and Description
	pv.Layout.Grid() Constructs a new, empty grid layout.

Field Summary
Field Attributes	Field Name and Description
	cell The cell prototype.
	cols The number of columns.
	defaults Default properties for grid layouts.
	rows The number of rows.

Fields borrowed from class pv.Panel:: canvas, children, overflow, transform
Fields borrowed from class pv.Bar:: fillStyle, height, lineWidth, strokeStyle, width
Fields borrowed from class pv.Mark:: bottom, childIndex, cursor, data, events, index, left, parent, proto, reverse, right, root, scale, title, top, type, visible

Methods borrowed from class pv.Panel:: add, anchor
Methods borrowed from class pv.Mark:: anchorTarget, def, event, extend, margin, mouse, render

Class Detail

pv.Layout.Grid()

Constructs a new, empty grid layout. Layouts are not typically constructed directly; instead, they are added to an existing panel via pv.Mark#add.

Field Detail

{pv.Mark} cell

The cell prototype. This prototype is intended to be used with a bar, panel, or layout (or subclass thereof) to render the grid cells.

{number} cols

The number of columns. This property can also be specified as the data in column-major order; in this case, the cols property is implicitly set to the length of the array, and the rows property is set to the length of the first element in the array.

{pv.Layout.Grid} defaults

Default properties for grid layouts. By default, there is one row and one column, and the data is the propagated to the child cell.

{number} rows

The number of rows. This property can also be specified as the data in row-major order; in this case, the rows property is implicitly set to the length of the array, and the cols property is set to the length of the first element in the array.

Classes

Class pv.Layout.Grid