ChessDataViz - HeatMap Example (Defaults)

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.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-1" class="cdv-heatmap"></div>
<div class="caption">World Rapid Chess Championship 2015, square utilization by white (how many times a piece landed on a square)</div>

CSS

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

JavaScript

d3.json('https://ebemunk.com/chess-dataviz/data/wrc.json', function(err, data) {
  var heatmapExample1 = new CrhessDataViz.HeatMap('#heatmap-example-1', null, data.heatmaps.squareUtilization);
});