D3 Examples - Data based orientations in SVG Gradients

Data based orientations in SVG Gradients - Step 3

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

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
        <title>Step 3 - Collaborations between MCU Avengers</title>
    
        <!-- D3.js -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
        
        <!-- Google Fonts -->
        <link href='https://fonts.googleapis.com/css?family=Lato:400,900' rel='stylesheet' type='text/css'>
        
        <style>
            body {
              font-size: 12px;
              font-family: 'Lato', sans-serif;
              text-align: center;
              fill: #2B2B2B;
              cursor: default;
            }
            
            @media (min-width: 600px) {
                #chart{
                    font-size: 16px;
                }
            }
        </style>
    </head>
    <body>
    
        <div id = "chart"></div>
        
        <script src = "d3.layout.chord.sort.js"></script>
        <script src = "script.js"></script>
​
  </body>
</html>
    