Class Index | File Index

Classes


Class pv.Layout.Arc


Extends pv.Layout.Network.
Implements a layout for arc diagrams. An arc diagram is a network visualization with a one-dimensional layout of nodes, using circular arcs to render links between nodes. For undirected networks, arcs are rendering on a single side; this makes arc diagrams useful as annotations to other two-dimensional network layouts, such as rollup, matrix or table layouts. For directed networks, links in opposite directions can be rendered on opposite sides using directed(true).

Arc layouts are particularly sensitive to node ordering; for best results, order the nodes such that related nodes are close to each other. A poor (e.g., random) order may result in large arcs with crossovers that impede visual processing. A future improvement to this layout may include automatic reordering using, e.g., spectral graph layout or simulated annealing.

This visualization technique is related to that developed by M. Wattenberg, "Arc Diagrams: Visualizing Structure in Strings" in IEEE InfoVis, 2002. However, this implementation is limited to simple node-link networks, as opposed to structures with hierarchical self-similarity (such as strings).

As with other network layouts, three mark prototypes are provided:

For more details on how this layout is structured and can be customized, see pv.Layout.Network.
Defined in: Arc.js.

Class Summary
Constructor Attributes Constructor Name and Description
 
Constructs a new, empty arc layout.
Field Summary
Field Attributes Field Name and Description
 
Default properties for arc layouts.
 
Whether this arc digram is directed (bidirectional); only applies to non-radial orientations.
 
The orientation.
Fields borrowed from class pv.Layout.Network:
label, link, node
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
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.Arc()
Constructs a new, empty arc layout. Layouts are not typically constructed directly; instead, they are added to an existing panel via pv.Mark#add.
Field Detail
{pv.Layout.Arc} defaults
Default properties for arc layouts. By default, the orientation is "bottom".

{boolean} directed
Whether this arc digram is directed (bidirectional); only applies to non-radial orientations. By default, arc digrams are undirected, such that all arcs appear on one side. If the arc digram is directed, then forward links are drawn on the conventional side (the same as as undirected links--right, left, bottom and top for left, right, top and bottom, respectively), while reverse links are drawn on the opposite side.

{string} orient
The orientation. The default orientation is "left", which means that nodes will be positioned from left-to-right in the order they are specified in the nodes property. The following orientations are supported:
Method Detail
{pv.Layout.Arc} 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 arc diagrams 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.Arc} this.

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