config = ({
lat: 20,
lng: 0,
zoom: 1,
points: 10_000,
delay: 500
});
{
renderH3IndexesToMap(map, 'hexes', hexagons, null, true)
return md`*{map rendering logic}*`
}
hexagons = {
const grid = {};
for (let i = 0; i < config.points; i++) {
await Promises.delay(config.delay, ++i);
const pt = [Math.random() * 179 - 90, Math.random() * 359 - 180];
addPointToGrid(pt, grid);
yield Object.keys(grid).filter(cell => grid[cell].length);
}
}
function addPointToGrid(pt, grid) {
let res = 15;
const finest = h3.latLngToCell(pt[0], pt[1], res);
while (res >= 0) {
const cell = h3.cellToParent(finest, res);
if (cell in grid) {
// Add to grid
grid[cell].push(finest);
// Subdivide if needed
if (grid[cell].length > maxPointsPerCell) {
const childRes = res + 1;
if (childRes <= 15) {
// Make a grid entry for each child
for (const child of h3.cellToChildren(cell, childRes)) {
grid[child] = [];
}
// Reallocate points to child cells
for (const fineCell of grid[cell]) {
const child = h3.cellToParent(fineCell, childRes);
grid[child].push(fineCell)
}
// Drop the parent
delete grid[cell];
}
}
break;
} else if (res === 0) {
grid[cell] = [finest];
break;
}
res--;
}
}
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.
