ChessDataViz - Openings 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">
<link rel="stylesheet" href="https://ebemunk.com/chess-dataviz/vendor/ChessDataViz.min.css">
<script src="https://ebemunk.com/chess-dataviz/vendor/ChessDataViz.min.js"></script>
<link rel="stylesheet" href="https://ebemunk.com/chess-dataviz/style.css">
<div class="cdv-openings" id="openings">
</div>
<div class="caption">
  World Rapid Chess Championship 2015 openings breakdown.
  <br> Looking at variation: <span id="variation"></span>
  <br> Percentage of games with this variation: <span id="percentage"></span>
  <br>
  <button id="all" class="button button-primary">All Openings</button>
  <button id="d4" class="button">d4 Variations</button>
</div>

CSS

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

JavaScript

d3.json('https://github.com/Hungry-Caterpillar/Data/blob/master/selfplay.json', function(err, data) {
  var openings = new ChessDataViz.Openings('#openings', {
    arcThreshold: 0.002,
    textThreshold: 0.03,
    colors: d3.scale.ordinal().range(['cyan', 'gold', 'steelblue', 'gray'])
  }, data.openings);

  openings.dispatch
    .on('mouseenter', function(d, moves) {
      d3.select('#variation').text(moves.join(' '));
      var percent = d.value / data.openings.value * 100;
      percent = percent.toFixed(2);
      d3.select('#percentage').text(percent + '%');
    })
    .on('mouseleave', function() {
      d3.select('#variation').text('');
      d3.select('#percentage').text('');
    });

  var allButton = d3.select('#all');
  var d4Button = d3.select('#d4');

  allButton.on('click', function() {
    allButton.classed('button-primary', true);
    d4Button.classed('button-primary', false);
    openings.data(data.openings);
  });
  d4Button.on('click', function() {
    allButton.classed('button-primary', false);
    d4Button.classed('button-primary', true);
    openings.data(data.openings.children[1]);
  });
});