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:

node - for rendering nodes; typically a pv.Dot.
link - for rendering links; typically a pv.Line.
label - for rendering node labels; typically a pv.Label.

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
	pv.Layout.Arc() Constructs a new, empty arc layout.

Field Summary
Field Attributes	Field Name and Description
	defaults Default properties for arc layouts.
	directed Whether this arc digram is directed (bidirectional); only applies to non-radial orientations.
	orient 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:

left - left-to-right.
right - right-to-left.
top - top-to-bottom.
bottom - bottom-to-top.
radial - radially, starting at 12 o'clock and proceeding clockwise.

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.

Classes

Class pv.Layout.Arc