block by nbremer a23f7f85f30f5cd9e1e8602a5a4e6d75

Data based orientations in SVG Gradients - Step 2

Full Screen

This Chord diagram shows the second 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. This is what you see in this step. In the next step we’ll look at how to improve the chord ordering to prevent as much overlap as possible.

You can find the first step and those after this step here

script.js

index.html