Published
Edited
Feb 4, 2021
3 forks
29 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
deck = require.alias({
h3: {}
})('deck.gl@latest/dist.min.js')
Insert cell
Insert cell
mapboxgl = require('mapbox-gl@1.6.0/dist/mapbox-gl.js')
Insert cell
Insert cell
d3 = require("https://d3js.org/d3.v5.min.js")
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
deckgl = {
// 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: mapboxgl,
// 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
});
}
Insert cell
mapContainer = html `<div style="height:500px"></div>`
Insert cell
Insert cell
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];
}
}
Insert cell
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
});
deckgl.setProps({layers: [layer]});
return layer;
}
Insert cell

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.
Learn more