Jonathan SchofieldMar 1

Coming to you from just north of the sea, at the bottom of Portsmouth South, a preview of a thing I have made.

It’s a resizeable interactive hexmap of UK constituencies:

- It builds upon the hexmap layout developed by Open Innovations: https://open-innovations.org/blog/2023-08-03-hexes-for-the-next-general-election
- But instead of SVG, it’s rendered from JSON using CSS grid, and each cell is a `<button>` that can open an info panel.

It’s a work in progress for something I’m collaborating on. Hopefully, more on the interface later this month.

Show threadFilip
@urlyman
This all sounds really cool, but what's most intriguing to me is how on earth you are making a CSS grid hexagonal. Are these like two grids overlayed on top of each other, one for the even rows and one with an offset for the odd rows?
Mar 1 at 9:40pmWeb
Show threadJonathan SchofieldMar 1

@fnohe yes, you got it!

A grid per row
Each cell hexagonalised with clip-path
Alternating rows locked in with margins

Show threadJonathan SchofieldMar 1

@fnohe the prototype is made with a JSON approach that’s a bit of a kludge. And my data schema has evolved since then.

As soon as I get the html prototype aligned with the data schema I’ll put the code in a repo and share it