ChessDataViz - Move Paths Example (Defaults)

by ebemunk

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-move-paths" id="movepaths">
</div>
<div class="caption">Journey of the white queen's knight during World Rapid Chess Championship 2015.
</div>

CSS

.cdv-move-paths {
  text-align: center;
}

.cdv-move-paths .black rect {
  fill: #2b2b2b;
}
.cdv-move-paths .white rect {
  fill: #6c6c6c;
}

JavaScript

d3.json('https://ebemunk.com/chess-dataviz/data/wrc.json', function(err, data) {
  var movePaths = new ChessDataViz.MovePaths('#movepaths', null, data.moves);
});