johnwalley/.block

## .block
license: mit

## bumps.css
body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
}

## index.html
<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>

## thumbnail.png

      
    Raw
  

              thumbnail.png
            
          
## results.json

      
    Raw
  

              results.json
            
          
      This file has been truncated, but you can view the full file.
	<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>