container = html `<div style="height:800px"></div>`
deckgl = {
return new deck.DeckGL({
container,
map: mapboxgl,
mapboxAccessToken: '',
mapStyle: 'https://free.tilehosting.com/styles/darkmatter/style.json?key=U0iNgiZKlYdwvgs9UPm1',
longitude: -1.4157,
latitude: 52.2324,
zoom: 4,
minZoom: 1,
maxZoom: 15,
pitch: 40.5
});
}
{
const hexagonLayer = new deck.HexagonLayer({
id: 'heatmap',
colorRange,
data,
elevationRange: [0, 1000],
elevationScale: 100,
extruded: true,
getPosition: d => [d.lng, d.lat],
opacity: 1,
radius,
upperPercentile,
lightSettings
});
deckgl.setProps({layers: [hexagonLayer]});
return hexagonLayer;
}
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.
