Class Index | File Index

Classes


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
 
Constructs a new, empty grid layout.
Field Summary
Field Attributes Field Name and Description
 
The cell prototype.
 
The number of columns.
 
Default properties for grid layouts.
 
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.

Documentation generated by JsDoc Toolkit 2.3.2 on Sun May 30 2010 18:10:24 GMT-0700 (PDT)