Geospatial Visual Analytics
container = html `<div style="height:600px"><div id="tooltip"></div></div>`
deckgl = {
return new deck.DeckGL({
container,
map: mapboxgl,
// This token is for demo purpose only and rotated regularly. Get your own token at https://www.mapbox.com
mapboxApiAccessToken: 'pk.eyJ1IjoidWJlcmRhdGEiLCJhIjoiY2pudzRtaWloMDAzcTN2bzN1aXdxZHB5bSJ9.2bkj3IiRC8wj3jLThvDGdA',
mapStyle: 'mapbox://styles/mapbox/light-v9',
initialViewState: {
latitude: 49.254,
longitude: -123.13,
zoom: 11,
maxZoom: 16,
pitch: 45
},
controller: true,
getTooltip
});
}
{
const geojsonLayer = new deck.GeoJsonLayer({
data,
opacity: 0.8,
stroked: false,
filled: true,
extruded: true,
wireframe: true,
fp64: true,
getElevation: f => Math.sqrt(f.properties.valuePerSqm) * 10,
getFillColor: f => colorScale(f.properties.growth),
getLineColor: f => [255, 255, 255],
pickable: true
});
deckgl.setProps({layers: [geojsonLayer]});
return geojsonLayer;
}
getTooltip = {
return ({object}) => {
return object && `Average Property Value
${object.properties.valuePerSqm}
Growth
${Math.round(object.properties.growth * 100)}`;
};
}
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.
