Designer. Geek. Beer addict. Data queen.
Published
Edited
Jul 8, 2022
9 forks
17 stars
container = html `<div style="height:300px"></div>`
deckgl = {
const props = {
container,
map: mapboxgl,
mapStyle: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
initialViewState: {
longitude: -122.402,
latitude: 37.79,
zoom: 12,
pitch: 0,
bearing: 0
},
controller: true,
layers: [scatterplotLayer, textLayer]
};
// Avoid creating multiple instances
const prevDeckInstance = this;
if (prevDeckInstance) {
prevDeckInstance.setProps(props);
return prevDeckInstance;
}
return new deck.DeckGL(props);
}
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
});
}
textLayer = {
return new deck.TextLayer({
data: [
{position: [-122.402, 37.79], text: 'Hello World'}
],
getPosition: d => d.position,
getText: d => d.text
});
}
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.
