index.js
import { select } from 'd3';
// Create an SVG container
var svg = d3.select("body").append("svg")
.attr("width", 800)
.attr("height", 800);
// Define the data for the chessboard
// create an empty array
var board = [];
// define the names of the columns
let columns = ["a", "b", "c", "d", "e", "f", "g", "h"];
// define the names of the rows
var rows = [8,7,6,5,4,3,2,1];
// loop through the columns and rows to create the names of the squares
for (let i = 0; i < columns.length; i++) {
for (let j = 0; j < rows.length; j++) {
board.push(columns[j] + rows[i]);
}
}
// Create the stacked text boxes
var m1 = svg.append("text")
.text("d4 d5")
.attr("x", 500)
.attr("y", 50)
.style("font-size", "50px")
.style("dy", "-5px")
.on("mouseover", function() {
d3.select("#d4").style("fill", "red");
d3.select("#d5").style("fill", "red");
})
.on("mouseout", function() {
