How to draw a chess board in D3?

Question

I would like to draw a chess board in D3:

I would be satisfied with just being able to draw the initial game position (as above).

It may be the case that one does not need image files for king, queen, knight, etc. (there are 12 distinct pieces) since they are all part of Unicode as codepoints 2654-265F:

The Unicode characters appear in any modern browser:

♔ ♕ ♖ ♗ ♘ ♙

♚ ♛ ♜ ♝ ♞ ♟

Unicode chess symbols on Wikipedia: here

Python script to display chess board in a terminal using Unicode characters: here. Its result:

Any pointers or help would be much appreciated.

Answer 1

Here is the codepen of the solution.

CODE WALKTROUGH

Definition of enumerated type for all chess pieces:

var pieces = {     NONE :          {name: "None",          code: " "},      WHITE_KING :    {name: "White King",    code: "\u2654"},      WHITE_QUEEN :   {name: "White Queen",   code: "\u2655"},      WHITE_ROOK :    {name: "White Rook",    code: "\u2656"},      WHITE_BISHOP :  {name: "White Bishop",  code: "\u2657"},      WHITE_KNIGHT :  {name: "White Knight",  code: "\u2658"},      WHITE_POWN :    {name: "White Pown",    code: "\u2659"},      BLACK_KING :    {name: "Black King",    code: "\u265A"},      BLACK_QUEEN :   {name: "Black Queen",   code: "\u265B"},      BLACK_ROOK :    {name: "Black Rook",    code: "\u265C"},      BLACK_BISHOP :  {name: "Black Bishop",  code: "\u265D"},      BLACK_KNIGHT :  {name: "Black Knight",  code: "\u265E"},      BLACK_POWN :    {name: "Black Pown",    code: "\u265F"},  };     

Board initialization:

    var board =[];      for(var i = 0; i < boardDimension*boardDimension; i++) {         board.push({             x: i % boardDimension,             y: Math.floor(i / boardDimension),             piece: pieces.NONE         });     };      board[0].piece = pieces.BLACK_ROOK     board[1].piece = pieces.BLACK_KNIGHT     board[2].piece = pieces.BLACK_BISHOP     board[3].piece = pieces.BLACK_QUEEN     board[4].piece = pieces.BLACK_KING     board[5].piece = pieces.BLACK_BISHOP     board[6].piece = pieces.BLACK_KNIGHT     board[7].piece = pieces.BLACK_ROOK      board[8].piece = pieces.BLACK_POWN     board[9].piece = pieces.BLACK_POWN     board[10].piece = pieces.BLACK_POWN     board[11].piece = pieces.BLACK_POWN     board[12].piece = pieces.BLACK_POWN     board[13].piece = pieces.BLACK_POWN     board[14].piece = pieces.BLACK_POWN     board[15].piece = pieces.BLACK_POWN      board[6*8 + 0].piece = pieces.WHITE_POWN     board[6*8 + 1].piece = pieces.WHITE_POWN     board[6*8 + 2].piece = pieces.WHITE_POWN     board[6*8 + 3].piece = pieces.WHITE_POWN     board[6*8 + 4].piece = pieces.WHITE_POWN     board[6*8 + 5].piece = pieces.WHITE_POWN     board[6*8 + 6].piece = pieces.WHITE_POWN     board[6*8 + 7].piece = pieces.WHITE_POWN      board[7*8 + 0].piece = pieces.WHITE_ROOK     board[7*8 + 1].piece = pieces.WHITE_KNIGHT     board[7*8 + 2].piece = pieces.WHITE_BISHOP     board[7*8 + 3].piece = pieces.WHITE_QUEEN     board[7*8 + 4].piece = pieces.WHITE_KING     board[7*8 + 5].piece = pieces.WHITE_BISHOP     board[7*8 + 6].piece = pieces.WHITE_KNIGHT     board[7*8 + 7].piece = pieces.WHITE_ROOK 

Drawing squares:

    svg.append("rect")          .style("class", "fields")          .style("class", "rects")          .attr("x", function (d) {              return d.x*fieldSize;          })          .attr("y", function (d) {              return d.y*fieldSize;          })          .attr("width", fieldSize + "px")          .attr("height", fieldSize + "px")          .style("fill", function (d) {              if ( ((d.x%2 == 0) && (d.y%2 == 0)) ||                   ((d.x%2 == 1) && (d.y%2 == 1))    )                   return "beige";              else                  return "tan";          }); 

Drawing pieces, using Unicode characters:

    svg.append("text")         .attr("x", function (d) {             return d.x*fieldSize;         })         .attr("y", function (d) {             return d.y*fieldSize;         })         .style("font-size", "40")         .attr("text-anchor", "middle")         .attr("dy", "35px")         .attr("dx", "20px")         .text(function (d) {             return d.piece.code;          })         .append("title")         .text(function(d) {             return d.piece.name;         }); 

Answer 2

Just for public knowledge I made a mini plugin for plot a chessboard via d3.

You can see it in https://github.com/jbkunst/d3-chessboard.

How it works:

    var sel = d3.select("#chess-container");     var board = d3chessboard();     sel.call(board);