Class Index | File Index

Classes


Class pv.Layout.Rollup


Extends pv.Layout.Network.
Implements a network visualization using a node-link diagram where nodes are rolled up along two dimensions. This implementation is based on the "PivotGraph" designed by Martin Wattenberg:

The method is designed for graphs that are "multivariate", i.e., where each node is associated with several attributes. Unlike visualizations which emphasize global graph topology, PivotGraph uses a simple grid-based approach to focus on the relationship between node attributes & connections.
This layout requires two psuedo-properties to be specified, which assign node positions along the two dimensions #x and #y, corresponding to the left and top properties, respectively. Typically, these functions are specified using an pv.Scale.ordinal. Nodes that share the same position in x and y are "rolled up" into a meta-node, and similarly links are aggregated between meta-nodes. For example, to construct a rollup to analyze links by gender and affiliation, first define two ordinal scales:
var x = pv.Scale.ordinal(nodes, function(d) d.gender).split(0, w),
    y = pv.Scale.ordinal(nodes, function(d) d.aff).split(0, h);
Next, define the position psuedo-properties:
    .x(function(d) x(d.gender))
    .y(function(d) y(d.aff))
Linear and other quantitative scales can alternatively be used to position the nodes along either dimension. Note, however, that the rollup requires that the positions match exactly, and thus ordinal scales are recommended to avoid precision errors.

Note that because this layout provides a visualization of the rolled up graph, the data properties for the mark prototypes (node, link and label) are different from most other network layouts: they reference the rolled-up nodes and links, rather than the nodes and links of the full network. The underlying nodes and links for each rolled-up node and link can be accessed via the nodes and links attributes, respectively. The aggregated link values for rolled-up links can similarly be accessed via the linkValue attribute.

For undirected networks, links are duplicated in both directions. For directed networks, use directed(true). The graph is assumed to be undirected by default.
Defined in: Rollup.js.

Class Summary
Constructor Attributes Constructor Name and Description
 
Constructs a new, empty rollup network layout.
Field Summary
Field Attributes Field Name and Description
 
Whether the underlying network is directed.
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
 
x(f)
Specifies the x-position function used to rollup nodes.
 
y(f)
Specifies the y-position function used to rollup nodes.
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.Rollup()
Constructs a new, empty rollup network layout. Layouts are not typically constructed directly; instead, they are added to an existing panel via pv.Mark#add.
See:
"Visual Exploration of Multivariate Graphs" by M. Wattenberg, CHI 2006.
Field Detail
{boolean} directed
Whether the underlying network is directed. By default, the graph is assumed to be undirected, and links are rendered in both directions. If the network is directed, then forward links are drawn above the diagonal, while reverse links are drawn below.
Method Detail
{pv.Layout.Rollup} x(f)
Specifies the x-position function used to rollup nodes. The rolled up nodes are positioned horizontally using the return values from the given function. Typically the function is specified as an ordinal scale. For single-dimension rollups, a constant value can be specified.
Parameters:
{function} f
the x-position function.
Returns:
{pv.Layout.Rollup} this.
See:
pv.Scale.ordinal

{pv.Layout.Rollup} y(f)
Specifies the y-position function used to rollup nodes. The rolled up nodes are positioned vertically using the return values from the given function. Typically the function is specified as an ordinal scale. For single-dimension rollups, a constant value can be specified.
Parameters:
{function} f
the y-position function.
Returns:
{pv.Layout.Rollup} this.
See:
pv.Scale.ordinal

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