Class pv.Layout.Matrix

Extends pv.Layout.Network.
Implements a network visualization using a matrix view. This is, in effect, a visualization of the graph's adjacency matrix: the cell at row i, column j, corresponds to the link from node i to node j. The fill color of each cell is binary by default, and corresponds to whether a link exists between the two nodes. If the underlying graph has links with variable values, the fillStyle property can be substited to use an appropriate color function, such as pv.ramp.

For undirected networks, the matrix is symmetric around the diagonal. For directed networks, links in opposite directions can be rendered on opposite sides of the diagonal using directed(true). The graph is assumed to be undirected by default.

The mark prototypes for this network layout are slightly different than other implementations:

node - unsupported; undefined. No mark is needed to visualize nodes directly, as the nodes are implicit in the location (rows and columns) of the links.
link - for rendering links; typically a pv.Bar. The link mark is added directly to the layout, with the data property defined as all possible pairs of nodes. Each pair is represented as a pv.Network.Layout.Link, though the linkValue attribute may be 0 if no link exists in the graph.
label - for rendering node labels; typically a pv.Label. The label mark is added directly to the layout, with the data property defined via the layout's nodes property; note, however, that the nodes are duplicated so as to provide a label across the top and down the side. Properties such as strokeStyle and fillStyle can be overridden to compute properties from node data dynamically.

For more details on how to use this layout, see pv.Layout.Network.
Defined in: Matrix.js.

Class Summary
Constructor Attributes	Constructor Name and Description
	pv.Layout.Matrix() Constructs a new, empty matrix network layout.

Field Summary
Field Attributes	Field Name and Description
	directed Whether this matrix visualization is directed (bidirectional).

Fields borrowed from class pv.Layout.Network:: label, link, node
Fields borrowed from class pv.Panel:: canvas, children, defaults, 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

Method Summary
Method Attributes	Method Name and Description
	sort(f) Specifies an optional sort function.

Methods borrowed from class pv.Layout.Network:: reset
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.Matrix()

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

Field Detail

{boolean} directed

Whether this matrix visualization is directed (bidirectional). By default, the graph is assumed to be undirected, such that the visualization is symmetric across the matrix diagonal. If the network is directed, then forward links are drawn above the diagonal, while reverse links are drawn below.

Method Detail

{pv.Layout.Matrix} sort(f)

Specifies an optional sort function. The sort function follows the same comparator contract required by pv.Dom.Node#sort. Specifying a sort function provides an alternative to sort the nodes as they are specified by the nodes property; the main advantage of doing this is that the comparator function can access implicit fields populated by the network layout, such as the linkDegree.

Note that matrix visualizations are particularly sensitive to order. This is referred to as the seriation problem, and many different techniques exist to find good node orders that emphasize clusters, such as spectral layout and simulated annealing.

Parameters:
{function} f: comparator function for nodes.

Returns:: {pv.Layout.Matrix} this.

Classes

Class pv.Layout.Matrix