ChessDataViz - Eval and Time Example

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-eval-time wrap" id="evalandtime">
</div>
<div class="caption">
  Anish Giri vs Veselin Topalov (0-1) in London Chess Classic 2015, round 1.
  <br>
  <button id="interactive" class="button button-primary">Toggle Interactive</button>
</div>

CSS

.cdv-eval-time {
  text-align: center;
}
body {
  background-color: #777777;
}

JavaScript

d3.json('https://ebemunk.com/chess-dataviz/data/london-chess-classic-2015.json', function(err, data) {
  var evalAndTime = new ChessDataViz.EvalAndTime('#evalandtime', {
    width: 500,
    height: 300
  }, ChessDataViz.util.parseGameNotation(data[0].notation));

  var button = d3.select('#interactive');

  button.on('click', function() {
    var classed = button.classed('button-primary');
    button.classed('button-primary', !classed);
    evalAndTime.options({
      interactive: !classed
    });
  });
});