D3 Examples - Data based orientations in SVG Gradients

Data based orientations in SVG Gradients - Step 1

What you see here are movie collaborations between the Avengers in the MCU (up until & including Thor Ragnarok). This is how a normal chord diagram would look with the Avenger collaborations dataset. As you can see each chord is given only 1 color. But 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. That is what will be addressed in the next two steps.

You can find the steps after this one here

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
        <title>Step 1 - 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 = "script.js"></script>
​
  </body>
</html>
    