Data based orientations in SVG Gradients - Step 3

This Chord diagram shows the third step of the example used in my blog on Data-based orientations for gradients in a d3.js Chord Diagram

What you see here are movie collaborations between the Avengers in the MCU (up until & including Thor Ragnarok). Because collaborations are symmetrical, the chords are all as thick at the beginnen as at the end. Therefore, I wanted each chord to represent both the Avengers that it connects through a gradient. In this step the chords have been given a gradient that runs along the chords and have been sorted differently to reduce overlap.

You can find the steps before this one and the final result here

• Step 1 A normal Chord diagram with the Avengers dataset
• Step 2 A Chord diagram with gradients running across the chords
• Final result with nicer labels and tooltip