Public
Edited
May 22
Insert cell
Insert cell
some_text = 'hi Nick!'
Insert cell
container = html `<div style="height:300px"></div>`
Insert cell
Insert cell
deckgl.setProps({
layers: [scatterplotLayer, textLayer],
})
Insert cell
deckgl.setProps({
initialViewState: {
longitude: -122.402,
latitude: 37.79,
zoom: 13,
pitch: 0,
bearing: 0
},
})
Insert cell
Insert cell
scatterplotLayer = {
return new deck.ScatterplotLayer({
data: [
{position: [-122.402, 37.79], color: [255, 0, 0], radius: 1000}
],
getPosition: d => d.position,
getColor: d => d.color,
getRadius: d => d.radius,
opacity: 0.3
});
}
Insert cell
textLayer = {
return new deck.TextLayer({
data: [
{position: [-122.402, 37.79], text: some_text}
],
getPosition: d => d.position,
getText: d => d.text
});
}
Insert cell
Insert cell
deckgl = new deck.DeckGL({
container,
controller: true,
})
Insert cell
Insert cell
deck = require.alias({
// optional dependencies
h3: {}
})('deck.gl@latest/dist.min.js')
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