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">Movie collaborations between Avengers in the MCU</div>
        <div class = "explanation texts">
            <p style="margin-bottom: 0em;">The visualization below shows how often the original Avengers have appeared in MCU movies together since Iron Man 
            in 2008 and counting up to Thor: Ragnarok scheduled in 2017. The thicker a line, the more movies in which both characters appeared.</p>
            <p style="margin-top: 0.5em;">Because all six have appeared in both Avengers movies, the minimum number of co-appearances is 2. 
            Iron Man and Black Widow are the Avengers who have appeared most often together, with 5 movies.</p></div>
        <div id = "chart"></div>
        <div class="credit texts">Created by Nadieh Bremer | <a href="https://www.visualcinnamon.com/">VisualCinnamon.com</a></div>
        <div class = "notes texts">
            The 12 MCU movies taken into account are: Iron Man, Iron Man 2, Iron Man 3, Captain America: The First Avenger, Captain America: The Winter Soldier, 
            Captain America: Civil War, Thor, Thor: The Dark World, Thor: Ragnarok, The Incredible Hulk, The Avengers & Avengers: Age of Ultron</div>
 
        <script src="script.js"></script>
​
  </body>
</html>
    