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.
| Constructor Attributes | Constructor Name and Description |
|---|---|
|
Constructs a new, empty rollup network layout.
|
| 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 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
- See:
- "Visual Exploration of Multivariate Graphs" by M. Wattenberg, CHI 2006.
- Parameters:
- {function} f
- the x-position function.
- Returns:
- {pv.Layout.Rollup} this.
- See:
- pv.Scale.ordinal
- Parameters:
- {function} f
- the y-position function.
- Returns:
- {pv.Layout.Rollup} this.
- See:
- pv.Scale.ordinal