Public
Edited
Dec 24, 2022
Insert cell
deck = require.alias({
h3: {},
s2Geometry: {}
})('deck.gl@latest/dist.min.js')
Insert cell
getDeckGLMap = (layers, pitch) => {
if (pitch === undefined) {
pitch = 0;
}

let container = html `<div style="height:700px"></div>`;

let deckgl = new deck.DeckGL({
container,
layers: layers,
initialViewState: {
longitude: -82.9835,
latitude: 42.2767,
zoom: 11.5,
pitch: pitch
},
controller: true
});

return container;
}
Insert cell
import {data} from "@johnhaldeman/tutorial-on-deckgl"
Insert cell
getDeckGLMap([
new deck.ScatterplotLayer({
id: 'scatterplot-layer',
coordinateSystem: deck.COORDINATE_SYSTEM.LNGLAT,
data: data,
pickable: true,
opacity: 1,
filled: true,
radiusScale: 1,
radiusMinPixels: 5,
radiusMaxPixels: 5,
getPosition: d => [d.Longitude, d.Latitude],
getRadius: d => 1,
getFillColor: d => [255, 140, 0]
})
], 20)
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