Published
Edited
Jul 8, 2022
18 forks
32 stars
Insert cell
Insert cell
Insert cell
container = html `<div style="height:600px"></div>`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
deckgl = {
const props = {
container,
map: mapboxgl,
mapStyle: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
initialViewState: {
longitude: -1.4157,
latitude: 52.2324,
zoom: 6,
minZoom: 5,
maxZoom: 15,
pitch: 40.5
},
controller: true,
layers: [hexagonLayer]
};
// Avoid creating multiple instances
const prevDeckInstance = this;
if (prevDeckInstance) {
prevDeckInstance.setProps(props);
return prevDeckInstance;
}
return new deck.DeckGL(props);
}
Insert cell
hexagonLayer = {
return new deck.HexagonLayer({
id: 'heatmap',
colorRange,
data,
elevationRange: [0, 1000],
elevationScale: 250,
extruded: true,
getPosition: d => [d.lng, d.lat],
opacity: 1,
radius,
upperPercentile
});
}
Insert cell
Insert cell
Insert cell
Insert cell
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