-
Notifications
You must be signed in to change notification settings - Fork 0
/
_heatmap_queen.html
67 lines (60 loc) · 2.01 KB
/
_heatmap_queen.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html>
<head>
<script src="d3.v3.min.js" charset="utf-8"></script>
<link href="C:/Windows/System32/bower_components/chess-dataviz/dist/ChessDataViz.css" rel="stylesheet">
</head>
<body>
<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>
<script src="C:/Windows/System32/bower_components/chess-dataviz/dist/ChessDataViz.min.js"></script>
<script>
d3.json('http://localhost:8000/test_old.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);
});
});
</script>
</body>
</html>