Overlapping Bump Chart

Playing around with the idea of a bump chart comparison with two overlapping areas. Based on Farmers Markets data from data.gov.

Another iteration with step interpolation instead of cardinal.

Alt text

<!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'>

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>

https://d3js.org/d3.v4.js

https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.9.0/d3-legend.min.js