bubbabjh

@bubbabjh·2 public vizzes

Chess board Visualization

This visualization displays a chessboard with move annotations on the side, where hovering over a move like "d4 d5" highlights the corresponding squares in red. Built with D3.js v7, it uses D3 selections to append SVG `rect` elements for the board squares and `text` elements for coordinates and moves, with mouseover and mouseout events to trigger color changes via style modifications. Data for the board squares is generated programmatically from column and row arrays.

Dec 15, 2022

Loading thumbnail…

test

This example displays a chessboard with algebraic square labels and a list of chess moves. Hovering over a move highlights the corresponding starting and destination squares in red. The visualization uses D3 v7 to generate SVG rectangles for the board and text elements for the labels, with mouseover and mouseout events dynamically adjusting fill colors and element stacking order. The data is defined programmatically as an array of square names.

Dec 15, 2022