The avatar for @olange
Olivier Lange
Software artisan · Data is alive, flows, and belongs to you
Published
Edited
Nov 25, 2021
5 stars
3
Gōng-fu I/O
An Hexgrid Web Component
Hexagonal game board with ‹hex grid› cells
H3 geospatial indexes playgroundD3 Geo — How to center the sphere on a ‹lat,lon› coord‹h3-worldmap› web componentConnecting Datascript with ObservableConnecting GUN and SEA with ObservablePlaying with Gunnery.jsVariants of the shape of the area attribute value of our ‹h3-worldmap› web component
Also listed in…
Hexagonal Grids
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
spiralR3 = hexSpiral( center, 3)
Insert cell
Insert cell
Insert cell
function hexSpiral( center, radius) {
let results = [];
for( let k = 0; k <= radius; k++) {
const ring = hexRing( center, k);
console.log(ring);
results = results.concat( ring);
}
return results;
}
Insert cell
Insert cell
Insert cell
Insert cell
ringR3 = hexRing( center, 3)
Insert cell
Insert cell
function hexRing(center, radius) {
let results = [];
if( radius === 0) {
results.push( center);
} else {
const dir4 = hexgrid.Hex.direction(4); // South-West
let hex = center.add( dir4.scale( radius));
for( let i = 0; i < 6; i++) {
for( let j = 0; j < radius; j++) {
results.push( hex);
hex = hex.neighbor( i);
}
}
}
return results;
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more