Data based orientations in SVG Gradients - Step 1

This Chord diagram shows the first 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). This is how a normal chord diagram would look with the Avenger collaborations dataset. As you can see each chord is given only 1 color. But 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. That is what will be addressed in the next two steps.

You can find the steps after this one here

• Step 2 A Chord diagram with gradients running across the chords
• Step 3 A Chord diagram where a custom chord ordering is applied to reduce overlap
• Final result with nicer labels and tooltip