Slippy Map TileSweet, Sweet FantasyOSM Tile MathGeotoolbox playgroundAzure Tile MathSQLite Geospatial - buffers!SQLite Geospatial - intersections!TurfJS split linePIPUpdate marker without refreshing map?Bars/Pub DensityFR Temp DataFR Precip DataPizza PopularityNorth pole on the move!H3 Coverage CalculationH3 coverage - France climate model data
Aggregating Points by H3 Hexagons
heatmap = Plot.plot({
projection: {
type: "mercator",
domain: rewind(hexes)
},
marks: [
Plot.geo(rewind(hexes), {
fill: (d) => d3.interpolateBlues(d.properties.value),
stroke: "#aaa",
strokeWidth: 0.5
}),
Plot.geo(points, {
fill: (d) => (d.properties.selected ? "#FF8319" : "#666"),
r: 1.75
})
],
height: 400,
width: 800
})
points = {
// generate random points
let pts = turf.randomPoint(pointCount, { bbox: [2.27, 48.86, 2.4, 48.9] });
// flag 20% as "selected"
pts.features.forEach(
(f, i) =>
(f.properties = {
selected: i <= pointCount * selectPercent ? true : false
})
);
return pts;
}
selectedLayer = {
// assign h3id to each point, reduce to counts by id
const allhex = points.features
.filter((d) => d.properties.selected)
.map((d) => {
const [lng, lat] = d.geometry.coordinates;
return h3.latLngToCell(lat, lng, h3res);
})
.reduce((layer, hex) => {
if (layer[hex]) {
layer[hex] += 1;
} else {
layer[hex] = 1;
}
return layer;
}, {});
const max = d3.max(Object.values(allhex));
const min = d3.min(Object.values(allhex));
// normalize counts to 0-1, return the object
return Object.fromEntries(
Object.entries(allhex).map(([hex, value]) => [
hex,
(value - min) / (max - min)
])
);
}
hexes = geojson2h3.h3SetToFeatureCollection(
Object.keys(selectedLayer),
(hex) => ({
value: selectedLayer[hex]
})
)
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.
