Chord Layout

API Reference ▸ Layouts

Chord diagrams show relationships among a group of entities. For example, consider a hypothetical population of people with different hair colors: black, blonde, brown and red. Each person in this population has a preferred hair color for a dating partner; of the 29,630 (hypothetical) people with black hair, 40% (11,975) prefer partners with the same hair color. This preference is asymmetric: for example, only 10% of people with blonde hair prefer black hair, while 20% of people which black hair prefer blonde hair.

A chord diagram visualizes these relationships by drawing quadratic Bézier curves between arcs. The source and target arcs represents two mirrored subsets of the total population, such as the number of people with black hair that prefer blonde hair, and the number of people with blonde hair that prefer black hair.

The chord layout is designed to work in conjunction with the chord shape and the arc shape. The layout is used to generate data objects which describe the chords, serving as input to the chord shape. The layout also generates descriptions for the groups, which can be used as input to the arc shape.

# d3.layout.chord()

# chord.matrix([matrix])

# chord.padding([padding])

# chord.sortGroups([comparator])

# chord.sortSubgroups([comparator])

# chord.sortChords([comparator])

# chord.chords()

# chord.groups()