d3-Chessboard is a chessboard a la D3. No CSS, no images, no (chess) validations. Just a chessboard using the spirit of reusable charts.
You can see how it looks here.
- Choose your selector!
- Create the
d3chessboard()
element - Call it!
var sel = d3.select("#chess-container");
var board = d3chessboard();
sel.call(board);
You can use a FEN string to plot a specific position.
var fenstring = "rnbqkbnr/pp1ppppp/8/2p5/4P3/8/PPPP1PPP/RNBQKBNR w KQkq c6 0 2";
var sel2 = d3.select("#chess-container2");
var board2 = d3chessboard()
.fen(fenstring)
.size(600)
.textopacity(0.5)
.whitecellcolor("#FAFAFA")
.blackcellcolor("#CCC");
sel2.call(board2);
This plugin needs jhlywa' chessjs. Check index.html
.
Aps! Obviously you need d3js too!
- http://bost.ocks.org/mike/chart/
- https://github.com/jhlywa/chess.js
- http://d3js.org/
- Day/Hour Heatmap by tjdecke
- http://stackoverflow.com/questions/27806132/how-to-draw-a-chess-board-in-d3
- http://stackoverflow.com/questions/12303989/cartesian-product-of-multiple-arrays-in-javascript
- http://bl.ocks.org/mbostock/1846692
- Version 0.1.3 released. Removing
picefontsize
andtextfontsize
parameters (2015-06-28). - Version 0.1.2 released. Adding
picefontsize
,textfontsize
,textopacity
parameters (2015-06-26). - Version 0.1.1 released. Parameters
width
andheigth
replaced withsize
(2015-06-24). - Version 0.1 released (2015-06-23).
- Posibility to implement other chess fonts or svg images.