H3 Tutorial: Intro to h3-js (v4)Surface construction with H3H3 PathfindingH3 Tutorial: Rendering HexagonsH3 Tutorial: Using Point LayersH3 Tutorial: Suitability AnalysisH3 Radius Lookup"Flat" H3 Grid via Gnomonic ProjectionH3 Index InspectorShape simplification with H3H3 Indexes: Cartesian vs SphericalH3 Continuous ElevationArea VariationIndexing OrderH3 Mapbox Style Heat MapH3 Deck.gl Heat MapH3 Hierarchical (Non)ContainmentH3 Index Bit LayoutH3 Adaptive GridCell counts per countryIndexing Polygons With H3H3 Tutorial: Intro to h3-js (v3)
Privacy-Preserving Spatial Indexing with H3
outputCellValues = {
const outputCells = new Map();
function getAnonymizingSum(cells) {
return cells.map(cell => popMap.get(cell) ?? 0).reduce((sum, val) => sum + val, 0);
}
for (const {lat, lng} of locations) {
// Get the set of cells at the target res that have an anonymizing value over the threshold
let currentRes = h3Resolution;
let candidateSet = [h3.latLngToCell(lat, lng, currentRes)];
while (getAnonymizingSum(candidateSet) < populationThreshold && currentRes > 3) {
currentRes--;
const parentCell = h3.latLngToCell(lat, lng, currentRes);
candidateSet = h3.cellToChildren(parentCell, h3Resolution);
}
// Add all cells to the output map
for (const cell of candidateSet) {
const currentValue = outputCells.get(cell) ?? 0;
outputCells.set(cell, currentValue + (1 / candidateSet.length))
}
}
return outputCells;
}
deckglLayer = {
const layer = new deck.PolygonLayer({
id: 'h3-hexes' + Date.now(),
data: Array.from(outputCellValues.entries()),
getPolygon: d => h3.cellToBoundary(d[0], true),
getFillColor: d => colorScale(d[1]),
opacity: 0.4,
stroked: true,
pickable: true,
});
return layer;
}
colorScale(1)
colorScale = d3.scaleThreshold()
.domain([0, 0.02, 0.04, 0.7, 0.9, 0.1, 0.3, 0.5, 0.7, 0.9, 1])
.range([
[255, 255, 204],
[255, 237, 160],
[254, 217, 118],
[254, 178, 76],
[253, 141, 60],
[252, 78, 42],
[227, 26, 28],
[189, 0, 38],
[128, 0, 38]
]);
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.
