Bumps Chart

<body>
    <div id="bumps-chart">
      <svg width="100%" preserveAspectRatio="xMidYMin"></svg>
    </div>
    <script>
      d3.json('results.json').then(function(events) {
        var gender = 'Women';
        var set = 'Town Bumps';
        var el = document.getElementById('bumps-chart');

var chart = d3.bumpsChart();

chart
          .year(2008)
          .numYearsToView(5)
          .windowWidth(window.document.body.clientWidth)
          .on('selectYear', (start, end) => console.log(start + '-' + end))
          .on('highlightCrew', crew => console.log(crew))
          .on('toggleSelectedCrew', crew => console.log(crew));

var transformedEvents = events
          .filter(e => e.gender.toLowerCase() === gender.toLowerCase())
          .filter(e => e.set === set)
          .sort((a, b) => a.year - b.year)
          .map(event => d3.transformData(event));

var data = d3.joinEvents(transformedEvents, set, gender);

d3.select(el)
          .datum(data)
          .call(chart);
      });
    </script>
  </body>
</html>

https://d3js.org/d3.v5.min.js

https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js

https://unpkg.com/d3-bumps-chart@1.0.0-beta.0/dist/d3-bumps-chart.js