D3 Examples - Overlapping Bump Chart

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link href='https://fonts.googleapis.com/css?family=Lato:300,900' rel='stylesheet' type='text/css'>
​
    <style>
      body{
        background-color: whitesmoke;
      }
​
      svg {
         background-color: white;
         font-family: 'Lato';
      }
​
      text.title {
        text-anchor: middle;
        font-size: 20px;
      }
​
      .legend text {
        font-size: 12px;
      }
​
       path {
         fill-opacity: .8;
       }
​
       circle {
         fill: grey;
         opacity: .7;
       }
​
       .comp1 {
         fill: rgb(0, 200, 200);
       }
​
       .comp2 {
         fill: rgb(200, 0, 200);
       }
​
       .compBoth {
         fill: #ac8cdc;
       }
​
       path.comp1, path.comp2 {
         opacity: .5;
       }
​
       rect {
         opacity: .8;
         cursor: pointer;
       }
​
       rect.comp1 {
         stroke: rgb(0, 200, 200);
       }
​
       rect.comp2 {
         stroke: rgb(200, 0, 200);
       }
​
       rect:not(.selected) {
         fill: white;
       }
​
       .types {
         font-size: 8px;
         text-transform: uppercase;
         font-weight: bold;
         cursor: pointer;
       }
​
    </style>
</head>
<body>
    <svg width="960" height="500"></svg>
    <script src="https://d3js.org/d3.v4.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.9.0/d3-legend.min.js"></script>
    <script src="index.js"></script>
</body>
</html>
​
    