Designer. Geek. Beer addict. Data queen.
deckgl = new deck.DeckGL({
container,
map: mapboxgl,
mapStyle: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
initialViewState: {
longitude: -74,
latitude: 40.71,
zoom: 12
},
controller: true
});
pickupLocations = FileAttachment("uber-pickup-locations.csv").csv()
scatterLayer = new deck.ScatterplotLayer({
id: 'pickup-locations',
data: pickupLocations,
getPosition: d => [Number(d.lng), Number(d.lat)],
getRadius: d => Math.sqrt(d.count),
radiusUnits: 'pixels',
getFillColor: [255, 255, 255]
})
heatmapLayer = new deck.HeatmapLayer({
id: 'heatmap',
data: pickupLocations,
getPosition: d => [Number(d.lng), Number(d.lat)],
getWeight: d => Number(d.count),
radiusPixels: 30,
intensity: 1
})
gridLayer = new deck.GridLayer({
id: 'pickup-grid-bins',
data: pickupLocations,
getPosition: d => [Number(d.lng), Number(d.lat)],
getElevationWeight: d => Number(d.count),
extruded: true,
cellSize: 200,
elevationScale: 5
})
deckgl.setProps({
layers: [gridLayer]
})
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.
