@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 /> & <Chord.Ribbon />

APIs

#<Chord />

# children(chords: { chords: Chords; }) => ReactNoderequired

Child render function, passed the configured chords.

# matrixnumber[][]required

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.

# padAnglenumber

Sets the pad angle between adjacent groups to the specified number in radians.

# sortChordsDefaultSortComporator

Comparator used to sort the chords by their combined flow; this only affects the z-order of the chords.

# sortGroupsDefaultSortComporator

Comparator used to sort the groups by their total outflow.

# sortSubgroupsDefaultSortComporator

Comparator used to sort the subgroups corresponding to matrix[i][0 … n - 1] for a given group i by their total outflow.

#<Ribbon />

# chordChordrequired

Chord for which to render a ribbon.

# children({ path }: { path: string; }) => string

Override the default rendering of a chord <path />.

# classNamestring

Classname to apply to the rendered <path />.

# endAnglenumber | NumAccessor

Sets the end angle or end angle accessor for the ribbon generator.

# radiusnumber | NumAccessor

Sets the radius or radius accessor for the ribbon generator.

# source(d: Chord) => ChordSubgroup

Sets the source accessor (defaults to chord.source).

# startAnglenumber | NumAccessor

Sets the start angle or start angle accessor for the ribbon generator.

# target(d: Chord) => ChordSubgroup

Sets the target accessor (defaults to chord.source).