Data utilities
Umbrella package
@visx/chord
Chord diagrams show directed relationships among a group of entities in a radial layout.
Installation
npm install --save @visx/chord
Examples
<Chord.Chord /> & <Chord.Ribbon />
APIs
#<Chord />
Child render function, passed the configured chords.
Square data matrix of size n×n, where the matrix represents the directed flow amongst a network (a complete digraph) of n
nodes. The given matrix must be an array of length n
, where each element matrix[i]
is an array of n
numbers, where each matrix[i][j]
represents the flow from the ith
node in the network to the jth
node. Each number matrix[i][j]
must be nonnegative, though it can be zero if there is no flow from node i
to node j
.
number
Sets the pad angle between adjacent groups to the specified number in radians.
DefaultSortComporator
Comparator used to sort the chords by their combined flow; this only affects the z-order
of the chords.
DefaultSortComporator
Comparator used to sort the groups by their total outflow.
DefaultSortComporator
Comparator used to sort the subgroups corresponding to matrix[i][0 … n - 1]
for a given group i by their total outflow.
#<Ribbon />
Chord for which to render a ribbon.
({ path }: { path: string; }) => string
Override the default rendering of a chord <path />
.
string
Classname to apply to the rendered <path />
.
number | NumAccessor
Sets the end angle or end angle accessor for the ribbon generator.
number | NumAccessor
Sets the radius or radius accessor for the ribbon generator.
(d: Chord) => ChordSubgroup
Sets the source accessor (defaults to chord.source).
number | NumAccessor
Sets the start angle or start angle accessor for the ribbon generator.
(d: Chord) => ChordSubgroup
Sets the target accessor (defaults to chord.source).