ChessDataViz - HeatMap Example (Fancy)

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.7/d3-tip.min.js"></script>
<script src="https://ebemunk.com/chess-dataviz/vendor/ChessDataViz.min.js"></script>
<link rel="stylesheet" href="https://ebemunk.com/chess-dataviz/vendor/ChessDataViz.min.css">
<link rel="stylesheet" href="https://ebemunk.com/chess-dataviz/style.css">
<div id="heatmap-example-2" class="cdv-heatmap"></div>
<div class="caption">
  World Rapid Chess Championship 2015, checking squares of queens (how many times a queen delivered a check on a square)
  <br>
  <button id="w-btn" class="button button-primary">White Queens</button>
  <button id="b-btn" class="button">Black Queens</button>
</div>

CSS

.cdv-heatmap {
  text-align: center;
}

JavaScript

d3.json('E:/go-work/src/pgnstats/data.json', function(err, data) {
  var heatmapExample2 = new ChessDataViz.HeatMap('#heatmap-example-2', {
    colorScale: ['cyan', 'gold'],
    sizeScale: false,
    accessor: {
      color: 'w',
      piece: 'q'
    }
  }, data.heatmaps.checkSquares);

  var tip = d3.tip()
    .attr('class', 'd3-tip')
    .offset([25, -6])
    .html(function(d) {
      return d;
    });

  heatmapExample2.dispatch.on('mouseenter', tip.show);
  heatmapExample2.dispatch.on('mouseleave', tip.hide);
  heatmapExample2.dataContainer.call(tip);

	var wButton = d3.select('#w-btn');
  var bButton = d3.select('#b-btn');

  wButton.on('click', function() {
    heatmapExample2.options({
      accessor: {
        color: 'w',
        piece: 'q'
      }
    });

    wButton.classed('button-primary', true);
    bButton.classed('button-primary', false);
  });

  bButton.on('click', function() {
    heatmapExample2.options({
      accessor: {
        color: 'b',
        piece: 'q'
      }
    });

    wButton.classed('button-primary', false);
    bButton.classed('button-primary', true);
  });
});