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.
Defined in: Arc.js.
Constructor Attributes | Constructor Name and Description |
---|---|
Constructs a new, empty arc layout.
|
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 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
- 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.
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.