Hi, I would like to use Observable Plot to draw maps consisting of hexagons. I have already calculated the axial coordinates of the hexagon marks, and would like to draw the grid without using the hexbin transform (or any other transforms).
Here is my attempt so far:
// Parameters
const cols = 10; // Number of columns (axial q)
const rows = 10; // Number of rows (axial r)
const radius = 23; // Radius of hexagons
const bins = [];
// Generate axial coordinates
for (let q = 0; q < cols; q++) {
for (let r = 0; r < rows; r++) {
bins.push({ q, r });
}
}
return Plot.plot({
marks: [
Plot.hexagon(bins, {
r: radius, // Hexagon radius
x: (d) => Math.sqrt(3) * radius * (d.q + ((d.r / 2) % 1)), // Horizontal position
y: (d) => 1.5 * radius * d.r // Vertical position
})
]
});
I also created a notebook for this:
As you can see, I am struggling with setting the hexagon radius, and x, y mapping function in order to align it perfectly. I’d appreciate any help in the right direction. Thanks.
