Plot.plot({
marks: [
Plot.cell(
d3.range(8 * 8).map((d) => ({ x: d % 8, y: Math.floor(d / 8) })),
{
x: "x",
y: "y",
fill: (d) => ((d.y + d.x) % 2 ? "seagreen" : "ivory"),
inset: -3
}
),
Plot.text(tidy, {
x: "x",
y: "y",
text: (d) => unicode[d.p.toLowerCase()],
fill: (d) => (isWhite(d.p) ? "white" : "black"),
stroke: (d) => (!isWhite(d.p) ? "white" : "black"),
fontSize: size / 10
})
],
x: { tickFormat: (d) => "abcdefgh"[d], label: null },
y: { tickFormat: (d) => 8 - d, label: null },
margin: 20,
width: size,
height: size
})
isWhite = (p) => p.toUpperCase() === p
size = 480
unicode = ({ r: "♜", n: "♞", b: "♝", q: "♛", k: "♚", p: "♟" })
tidy = board
.flatMap((R, y) => R.map((p, x) => ({ p, x, y })))
.filter((d) => d.p)
board = new FENBoard(fen).board
FENBoard = import("https://cdn.skypack.dev/fen-chess-board?min").then((r) => r.default)
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
