Public
Edited
Mar 25
//getDeckGLMap = (layers, pitch) => {
function getDeckGLMap(layers, pitch=0){
let container = html`<div style="height:700px"></div>`;
let deckgl = new deck.DeckGL({
container,
map: mapboxgl,
mapboxAccessToken: '',
mapboxApiAccessToken: token,
mapStyle: 'mapbox://styles/mapbox/dark-v10',
layers: layers,
initialViewState: {
latitude: 37.7557, //SF
longitude: -122.44026,
zoom: 11,
pitch: pitch
},
controller: true
});
return container;
}
data = (await FileAttachment("sf_100k@2.csv").csv({
typed: true
}))
getDeckGLMap([
new deck.ScatterplotLayer({
id: 'scatterplot-layer',
data: data,
pickable: true,
opacity: 1,
filled: true,
radiusScale: 1,
radiusMinPixels: 1,
radiusMaxPixels: 1,
getPosition: d => [d.X, d.Y],
getRadius: 10,
getFillColor: [255, 140, 0]
})
])
function getAgeColor(age, alpha = 200) {
let base;
if (age <= 20) base = [0, 128, 255];
// Blue for younger ages
else if (age <= 40) base = [0, 255, 128];
// Green for middle ages
else if (age <= 60) base = [255, 255, 0];
// Yellow for older ages
else base = [200, 200, 200];
return [...base, alpha];
};
getDeckGLMap([
new deck.ScatterplotLayer({
id: 'scatterplot-layer',
data: data,
pickable: true,
filled: true,
getPosition: d => [d.X, d.Y],
getRadius: 10,
getFillColor: d => getAgeColor(d.age,100)
})
])
getDeckGLMap([
new deck.HeatmapLayer({
id: 'heatmapLayer',
data:data,
getPosition: d => [d.X, d.Y],
aggregation: 'SUM',
radiusPixels: 5,
colorDomain: [100, 1000]
})
])
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.
