block by carlvlewis fbbf7bb9d70f82e4d7d96edfbd28e8ca

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

Full Screen

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

script.js

index.html

bootstrap.popover.js

bootstrap.tooltip.js

d3.layout.chord.sort.js