Data based orientations in SVG Gradients - Final example - Avenger Movie Collaborations

This Chord diagram shows the final result 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. Because all the chords run in different directions, I had to set up the orientation of each gradient by using the chord.chords() dataset

In this end result I’ve made the Avenger names wrap around the arcs (as explained in another blog on Placing Texts on Arcs with D3.js ) and added a simple tooltip on a hover

You can find the steps leading up to this one here

• Step 1 A normal Chord diagram with the Avengers dataset
• 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