D3 Examples - Bumps Chart

xxxxxxxxxx
 
<html>
  <head>
    <link rel="stylesheet" href="bumps.css" />
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
    <script src="https://unpkg.com/d3-bumps-chart@1.0.0-beta.0/dist/d3-bumps-chart.js"></script>
  </head>
​
  <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>
​
    