D3 Examples - star wars

star wars
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>shift7 character connectivity</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>
      
 .stripe {
  width: 200px;
  padding:80px 0px;
  position: absolute;
  height: 0vh;
  min-height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#light {
  background: #e8e8e8;
}
#dark {
  background: #131313;
}
.container {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  width: 200px;
  margin: 0 auto;
  background: #fff;
  border-radius: 10px;
}
.person {
  width: 196px;
  height: 196px;
  position: relative;
  overflow: hidden;
}
/* Finn */
#finn .body {
  position: absolute;
  width: 100px;
  height: 150px;
  background: transparent;
  top: 130px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 40px;
  z-index: 1;
  overflow: hidden;
}
#finn .body:before {
  content: "";
  position: absolute;
  background: #000102;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  height: 100%;
}
#finn .face {
  position: absolute;
  width: 80px;
  height: 75px;
  background: #965c48;
  border-radius: 50%;
  top: 55px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
}
#finn .hair {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 43px;
  width: 80px;
  height: 80px;
  background: #33292a;
  border-radius: 50%;
}
#finn .ear {
  position: absolute;
  background: #965c48;
  width: 26px;
  height: 26px;
  border-radius: 100%;
  left: 50px;
  top: 76px;
}
#finn .ear.right {
  left: 120px;
}
#finn .ear:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  background: #744737;
  border-radius: 100%;
}
#finn .neck {
  position: absolute;
  z-index: 2;
  width: 30px;
  height: 50px;
  border-radius: 12px;
  left: 50%;
  transform: translateX(-50%);
  top: 90px;
  background: #744737;
}
#finn .eyes {
  position: absolute;
  top: 30px;
  width: 10px;
  height: 10px;
  background: #2f1d16;
  border-radius: 50%;
  left: 25%;
  transform: translateX(-50%);
}
#finn .eyes:after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: #2f1d16;
  top: 0;
  border-radius: 50%;
  right: -40px;
}
#finn .nose {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 14px;
  background: #744737;
  top: 31px;
  border-radius: 4px;
}
#finn .mouth {
  position: absolute;
  background: #2f1d16;
  width: 30px;
  height: 4px;
  border-radius: 0 0 5px 5px;
  top: 55px;
  left: 50%;
  transform: translateX(-50%);
}
#finn .jacket {
  background: #d1a868;
  position: absolute;
  top: 0;
  width: 30%;
  height: 100%;
}
#finn .jacket-left {
  left: 0;
}
#finn .jacket-right {
  right: 0;
}
#finn .jacket:after {
  content: "";
  width: 6px;
  position: absolute;
  top: 0;
  height: 110%;
  background: #a27631;
}
#finn .jacket-left:after {
  left: 100%;
  transform: translateX(-2px);
}
#finn .jacket-right:after {
  right: 100%;
  transform: translateX(2px);
}
#finn .jacket-left:before {
  content: "";
  background: #a61c19;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 20px;
}
#finn .jacket-right:before {
  content: "";
  background: #a61c19;
  position: absolute;
  top: 20px;
  left: 0;
  width: 100%;
  height: 10px;
}
/* Rey */
#rey .body {
  position: absolute;
  width: 100px;
  height: 150px;
  background: transparent;
  top: 130px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 40px;
  z-index: 3;
  overflow: hidden;
}
#rey .fold-left {
  position: absolute;
  top: 0px;
  left: -30px;
  width: 100%;
  height: 100%;
  background: #bdb5b4;
  transform: rotate(-30deg);
}
#rey .fold-right {
  position: absolute;
  top: 0px;
  right: -30px;
  width: 100%;
  height: 100%;
  background: #b0a8a7;
  transform: rotate(30deg);
}
#rey .face {
  position: absolute;
  width: 80px;
  height: 80px;
  background: #f0beaf;
  border-radius: 50%;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
}
#rey .hair {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 40px;
  width: 80px;
  height: 50px;
  background: #363435;
  border-radius: 50% 50% 0 0;
}
#rey .hair:before {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  left: 50%;
  top: -10px;
  background: #363435;
  transform: translateX(-50%);
}
#rey .bangs {
  position: absolute;
  left: 50%;
  top: 40px;
  width: 60px;
  height: 20px;
  background: #363435;
  z-index: 4;
  transform: translateX(-50%);
  border-radius: 50% 50% 50% 50%;
}
#rey .hair-left {
  position: absolute;
  background: #363435;
  height: 30px;
  width: 4px;
  top: 66px;
  left: 56px;
  z-index: 6;
  border-radius: 0% 0% 5px 5px;
  transform: rotate(8deg);
}
#rey .hair-right {
  position: absolute;
  background: #363435;
  height: 30px;
  width: 4px;
  top: 66px;
  right: 56px;
  z-index: 6;
  border-radius: 0% 0% 5px 5px;
  transform: rotate(-8deg);
}
#rey .neck {
  position: absolute;
  z-index: 2;
  width: 30px;
  height: 60px;
  border-radius: 12px;
  left: 50%;
  transform: translateX(-50%);
  top: 110px;
  background: #e89b84;
}
#rey .eyes {
  position: absolute;
  top: 34px;
  width: 10px;
  height: 10px;
  background: #424b54;
  border-radius: 50%;
  left: 25%;
  transform: translateX(-50%);
}
#rey .eyes:after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: #424b54;
  top: 0;
  border-radius: 50%;
  right: -40px;
}
#rey .nose {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 14px;
  background: #db9b99;
  top: 36px;
  border-radius: 4px;
}
#rey .mouth {
  position: absolute;
  background: #424b54;
  width: 30px;
  height: 8px;
  border-radius: 0 0 100px 100px;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
}
#rey .lightsaber {
  position: absolute;
  bottom: -30px;
  left: 30%;
  width: 10px;
  height: 0;
  background: #4fc3f7;
  z-index: 10;
  border-radius: 4px 4px 0 0;
  transform: rotate(30deg);
  animation-name: saber;
  animation-duration: 6s;
  animation-timing-function: linear;
  animation-delay: 1s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  transform-origin: left bottom;
}
@keyframes saber {
  0% {
    height: 0;
  }
  5% {
    height: 160px;
  }
  55% {
    height: 160px;
  }
  60% {
    height: 0;
  }
  100% {
    height: 0;
  }
}
/* Poe */
#poe .body {
  position: absolute;
  width: 100px;
  height: 150px;
  background: #ea6b26;
  top: 130px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 40px;
  z-index: 1;
  overflow: hidden;
}
#poe .flight-suit {
  position: absolute;
  left: 50%;
  width: 80px;
  top: 130px;
  height: 150px;
  transform: translateX(-50%);
  background: #d2d5c2;
  z-index: 2;
  border-radius: 15px 15px 0 0;
  overflow: hidden;
}
#poe .flight-suit:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 20px;
  background: #ea6b26;
  border-radius: 0 0 6px 6px;
}
#poe .flight-suit:after {
  content: "";
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 30px;
  background: #fffffe;
  border-radius: 2px;
}
#poe .tube {
  position: absolute;
  background: #35302d;
  width: 6px;
  height: 40px;
  top: 30px;
  left: 24px;
}
#poe .buttons {
  position: absolute;
  width: 32px;
  height: 20px;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}
#poe .b1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  background: #61a1c5;
}
#poe .b2 {
  position: absolute;
  top: 0;
  left: 8px;
  width: 14px;
  height: 20px;
  background: #454545;
}
#poe .b3 {
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 12px;
  background: #61a1c5;
}
#poe .helmet {
  position: absolute;
  width: 80px;
  height: 45px;
  background: #35302d;
  border-radius: 50% 50% 0 0;
  top: 35px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  overflow: hidden;
}
#poe .helmet:before {
  content: "";
  position: absolute;
  width: 8px;
  height: 100%;
  top: 0;
  left: 26px;
  background: #b9444d;
}
#poe .helmet:after {
  content: "";
  position: absolute;
  width: 24px;
  height: 80%;
  background: #ccc7c4;
  right: 10px;
  top: 0;
  border-radius: 0 0 12px 12px;
}
#poe .helmet-triangle {
  position: absolute;
  top: 0;
  left: 2px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 20px 50px 0;
  border-color: transparent #b9444d transparent transparent;
}
#poe .helmet-back {
  position: absolute;
  width: 80px;
  height: 80px;
  background: #35302d;
  border-radius: 50% 50% 10px 10px;
  top: 35px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
#poe .helmet-back:before {
  content: "";
  position: absolute;
  bottom: 16px;
  width: 10px;
  height: 40px;
  border-radius: 50%;
  background: #35302d;
  left: -5px;
}
#poe .helmet-back:after {
  content: "";
  position: absolute;
  bottom: 16px;
  width: 10px;
  height: 40px;
  border-radius: 50%;
  background: #35302d;
  right: -5px;
}
#poe .helmet-face {
  position: absolute;
  width: 70px;
  height: 14px;
  left: 50%;
  transform: translateX(-50%);
  top: 110px;
  z-index: 10;
}
#poe .helmet-face:before {
  content: "";
  position: absolute;
  left: -3px;
  top: 0;
  width: 25px;
  height: 100%;
  background: #35302d;
  border-radius: 0 50% 5px 100%;
  transform: rotate(25deg);
}
#poe .helmet-face:after {
  content: "";
  position: absolute;
  right: -3px;
  top: 0;
  width: 25px;
  height: 100%;
  background: #35302d;
  border-radius: 50% 0 100% 5px;
  transform: rotate(-25deg);
}
#poe .helmet-ornament {
  position: absolute;
  background: #b9444d;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  top: 14px;
  left: 48px;
  z-index: 10;
}
#poe .helmet-ornament:before {
  content: "";
  width: 16px;
  height: 16px;
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  background: #ccc7c4;
  border-radius: 50%;
}
#poe .helmet-ornament:after {
  content: "";
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 16px;
  background: #b9444d;
  border-radius: 2px;
}
#poe .face {
  position: absolute;
  width: 70px;
  height: 75px;
  background: #e1ae96;
  border-radius: 50%;
  top: 55px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  overflow: hidden;
}
#poe .visor {
  position: absolute;
  width: 100%;
  height: 22px;
  top: 20px;
  background: rgba(245, 124, 0, 0.3);
}
#poe .neck {
  position: absolute;
  z-index: 3;
  width: 30px;
  height: 50px;
  border-radius: 12px;
  left: 50%;
  transform: translateX(-50%);
  top: 90px;
  background: #d68f6e;
}
#poe .eyes {
  position: absolute;
  top: 30px;
  width: 10px;
  height: 10px;
  background: #424b54;
  border-radius: 50%;
  left: 25%;
  transform: translateX(-50%);
}
#poe .eyes:after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: #424b54;
  top: 0;
  border-radius: 50%;
  right: -35px;
}
#poe .nose {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 14px;
  background: #d68f6e;
  top: 31px;
  border-radius: 4px;
}
#poe .mouth {
  position: absolute;
  background: #424b54;
  width: 30px;
  height: 6px;
  border-radius: 0 0 50% 50%;
  top: 55px;
  left: 50%;
  transform: translateX(-50%);
}
#poe .jacket {
  background: #ea6b26;
  position: absolute;
  top: 0;
  width: 30%;
  height: 100%;
}
#poe .jacket-left {
  left: 0;
}
#poe .jacket-right {
  right: 0;
}
#poe .jacket:after {
  content: "";
  width: 6px;
  position: absolute;
  top: 0;
  height: 110%;
  background: #9b400f;
}
#poe .jacket-left:after {
  left: 100%;
  transform: translateX(-2px);
}
#poe .jacket-right:after {
  right: 100%;
  transform: translateX(2px);
}
#poe .jacket-left:before {
  content: "";
  background: #a61c19;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 20px;
}
#poe .jacket-right:before {
  content: "";
  background: #a61c19;
  position: absolute;
  top: 20px;
  left: 0;
  width: 100%;
  height: 10px;
}
            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">Connections in <i>Star Wars: The Force Awakens</i></div>
                <div class="credit texts">   Created by Dan Hammer | <a href="https://www.danham.me/r/">danham.me/r</a></div>
        <div class = "explanation texts">
            <p style="margin-bottom: 0em;">The visualization below shows the common links between characters in Star Wars: The Force Awakens. The thicker a line, the deeper the connection between characters, as identified by USC.</p>
​
        <div id = "chart"></div>
<section class="stripe" id="light">
    <div class="container">
​
        <div class="person" id="rey">
            <div class="hair"></div>
            <div class="face">
                <div class="eyes"></div>
                <div class="nose"></div>
                <div class="mouth"></div>
            </div>
            <div class="bangs"></div>
            <div class="neck"></div>
            <div class="body">
                <div class="fold-right"></div>
                <div class="fold-left"></div>
            </div>
            <div class="lightsaber"></div>
        </div>
        
    </div>
</section>
      
      
​
      
​
        <div class = "notes texts">
            </div>
​
        <script src="script.js"></script>
​
  </body>
</html>
    