Big walls, cities, computing, and design.
Public
Edited
Apr 13, 2023
1 star
Week 10 - deck.gl
container = html`<div style="height:400px"></div>`
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]
})
sfBuildings = d3.json(
"https://data.sfgov.org/api/geospatial/bnc6-9btz?method=export&format=GeoJSON"
)
mapContainer = html`<div style="height:500px"></div>`
info = html`<div></div>`
deckgl3D = {
// This is an Observable hack: clear previously generated content
mapContainer.innerHTML = "";
return new deck.DeckGL({
// The HTML container to render into
container: mapContainer,
// Mapbox settings
// set `map: false` to turn off Mapbox base map
map: mapboxgl2,
// This token is for demo-purpose only and rotated regularly. Get your token at https://www.mapbox.com
mapboxApiAccessToken:
"pk.eyJ1IjoidWJlcmRhdGEiLCJhIjoiY2pudzRtaWloMDAzcTN2bzN1aXdxZHB5bSJ9.2bkj3IiRC8wj3jLThvDGdA",
mapStyle: "mapbox://styles/mapbox/dark-v9",
// Viewport settings
initialViewState: {
longitude: -122.4,
latitude: 37.78,
zoom: 11,
pitch: 30,
bearing: 0
},
controller: true
});
}
colorScale = {
// Convert from height to RGB values
const linearScale = d3.scaleLinear().domain([0, 500]).range([1, 0]);
return (height) => {
const color = d3.color(d3.interpolateRdYlGn(linearScale(height)));
return [color.r, color.g, color.b];
};
}
layer = {
const layer = new deck.GeoJsonLayer({
// This is an Observable hack - changing the id will force the layer to refresh when the cell reevaluates
id: `geojson-${Date.now()}`,
data: sfBuildings,
extruded: true,
getFillColor: (f) => colorScale(f.properties.gen_hght * 1),
getElevation: (f) =>
f.properties.gen_hght < 2000 ? f.properties.gen_hght * 1 : 0,
pickable: true,
onClick: (evt) => (info.innerHTML = evt.object.properties.gen_hght)
});
return layer;
}
deckgl3D.setProps({ layers: [layer] })
deck = require.alias({
// optional dependencies
h3: {}
})('deck.gl@latest/dist/dist.dev.js')
mapboxgl = require('mapbox-gl@1.13.1/dist/mapbox-gl.js')
mapboxgl2 = require("mapbox-gl@1.13.1/dist/mapbox-gl.js")
d3 = require("https://d3js.org/d3.v5.min.js")
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.
