In this blog, I’ll show you how to add a color gradient to the chords of a d3.js Chord Diagram. This comes in handy when there is no net difference in the chords. But you can apply the technique to any gradient that you want to orient based on data. We’re going to look at the collaborations between Avengers. With all those cameo’s happening in the MCU I wanted to know how often two Avengers had appeared in a movie together. This results in a symmetrical dataset since, if Thor appeared in a movie together with Hawkeye, the reverse is true as well.
Chord Diagrams are meant to show flows, where the flow from category A to B is usually not the same as the flow from B to A. In the default setting, all chords are given the color of the category that had a bigger net flow. However, Chord Diagrams can be used to visualize other datasets besides asymmetrical flows (for example, several months ago I wrote a blog on how to use it as a circular flow diagram). In the case of symmetrical flows/connections, it would be more “fair” if the chord is colored to represent both categories