D3 Examples - Data based orientations in SVG Gradients - Final example

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

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

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
        <title>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=Bangers' rel='stylesheet' type='text/css'>
        <link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
        <link href='https://fonts.googleapis.com/css?family=Lato:400,900' rel='stylesheet' type='text/css'>
        
        <!-- jQuery -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <!-- Bootstrap -->
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    
        <!-- Two scripts to make the Bootstrap tooltip follow the mouse movement
             taken from https://github.com/ghophp/bootstrap-popover-move -->
        <script src="bootstrap.tooltip.js"></script>
        <script src="bootstrap.popover.js"></script>
        
        <script src="d3.layout.chord.sort.js"></script>
        
        <style>
            body {
              font-size: 14px;
              font-family: 'Lato', sans-serif;
              text-align: left;
              color: #757575;
              cursor: default;
            }
            
            .title {
                margin-top: 20px;
                margin-bottom: 10px;
                margin-left: 20px;
                font-size:32px;
                font-family: 'Oswald', sans-serif;
                color: #2B2B2B;
            }
            
            .texts {
                margin-left: 20px;
                margin-right: 20px;
                line-height: 140%;
            }
            
            .credit {
                color: #9E9E9E;
                font-size: 10px;
                margin-bottom: 0.5em;
            }
            
            .notes {
                color: #9E9E9E;
                font-size: 10px;
            }
            
            .popover {
                pointer-events: none;
            }
            
            #chart{
              font-size: 16px;
              font-family: 'Bangers', sans-serif;
              text-align: center;
              fill: #2B2B2B;
            }
            
            @media (min-width: 600px) {
                #chart{
                    font-size: 20px;
                }
            }
        </style>
    </head>
    <body>
    
        <div class = "title">Common genes across different conditions</div>
​
        <div id = "chart"></div>
 
        <script src="script.js"></script>
​
  </body>
</html>
    