block by nbremer 4de6f0a9d9d06373fc639e32e9c346cc

Data based orientations in SVG Gradients - Step 3

Full Screen

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

script.js

index.html

d3.layout.chord.sort.js