Designer. Geek. Beer addict. Data queen.
container = html `<div style="height:450px"></div>`
deckgl = {
return new deck.DeckGL({
container,
views: [
new deck.OrthographicView({id: 'ortho', width: '50%', controller: true}),
new deck.MapView({id: 'map', x: '50%', width: '50%', controller: true})
],
initialViewState: {
ortho: {target: [12345.7, 23456.8, 0], zoom: 14},
map: {longitude: -122.416, latitude: 37.755, zoom: 19}
}
});
}
{
const layers = [
new deck.ScatterplotLayer({
id: 'orthographic-64',
opacity: 0.1,
data: pointGrid(1e4, [12345.65, 23456.75, 12345.75, 23456.85]),
getPosition: p => p,
getRadius: 0,
radiusMinPixels: 6
}),
new deck.ScatterplotLayer({
id: 'lngLat-64',
opacity: 0.1,
data: pointGrid(1e4, [-122.417, 37.7545, -122.415, 37.7555]),
getPosition: p => p,
getRadius: 0,
radiusMinPixels: 6
})
];
deckgl.setProps({layers});
return layers;
}
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.
