<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdn.jsdelivr.net/lodash/4.15.0/lodash.min.js"></script>
<script src="../build/d3-bumps-chart.js"></script>

<script>
  var el = document.getElementById('bumps-chart');
  var chart = bumpsChart.bumpsChart();
  chart.setup(el);

  d3.json("./example/results.json", function(error, events) {

    var gender = "Women";
    var set = "Town Bumps";

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

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

    var props = {
      data: data,
      year: { start: 2015, end: 2016 },
      selectedCrews: new Set(),
      highlightedCrew: null,
      addSelectedCrew: bumpsChart.bumpsChart().addSelectedCrew,
      removeSelectedCrew: bumpsChart.bumpsChart().removeSelectedCrew,
      highlightCrew: bumpsChart.bumpsChart().highlightCrew,
      windowWidth: window.width
    };

    chart.update(props);
  });
</script>