Published
Edited
Sep 2, 2022
2 forks
10 stars
Insert cell
Insert cell
h3 = require("h3-js@3")
Insert cell
Insert cell
Insert cell
h3.UNITS
Insert cell
Insert cell
h3Address = h3.geoToH3(37.3615593, -122.0553238, zoom)
Insert cell
Insert cell
hexCenterCoordinates = h3.h3ToGeo(h3Address)
Insert cell
Insert cell
hexBoundary = h3.h3ToGeoBoundary(h3Address)
Insert cell
Insert cell
// Get all neighbors within 1 step of the hexagon
kRing = h3.kRing(h3Address, 1)
Insert cell
Insert cell
Insert cell
// Get the set of hexagons within a polygon
hexagons = {
const hexagons = h3.polyfill(
triangle.coordinates[0]
.slice(0, -1)
.map((d) => [d[1], d[0]])
.reverse(),
zoom
);

// Get the outline of a set of hexagons, as a GeoJSON-style MultiPolygon
return h3
.h3SetToMultiPolygon(hexagons, true)
.map((hex) => [hex[0].reverse()]);
}
Insert cell
Insert cell
d3 = require("d3@7")
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// note: This doesn't deal with holes, luckily our geometry doesnt have any.
poly = d3.merge(
california.geometry.coordinates.map((d) =>
h3.polyfill(
d[0].slice(0, -1).map((d) => [d[1], d[0]]),
7
)
)
)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
hexworld = level => ({
type: "FeatureCollection",
features: h3
.getRes0Indexes()
.map(i => h3.h3ToChildren(i, level))
.flat()
.map(d => ({
type: "Feature",
properties: { id: d, pentagon: h3.h3IsPentagon(d) },
geometry: {
type: "Polygon",
coordinates: [h3.h3ToGeoBoundary(d, true).reverse()]
}
}))
})
Insert cell
hexworld(2)
Insert cell
Insert cell
h3.numHexagons(4)
Insert cell
Insert cell
Insert cell
Insert cell
projection = d3.geoMercator()
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