Published
Edited
Jun 21, 2018
4 stars
Also listed in…
3D
Visualizations
Insert cell
Insert cell
Insert cell
container = html `<div style="height:600px"><div id="tooltip"></div></div>`
Insert cell
Insert cell
Insert cell
Insert cell
deckgl = {
return new deck.DeckGL({
container,
map: mapboxgl,
mapboxAccessToken: '',
mapStyle: 'https://free.tilehosting.com/styles/positron/style.json?key=U0iNgiZKlYdwvgs9UPm1',
latitude: 49.254,
longitude: -123.13,
zoom: 11,
maxZoom: 16,
pitch: 45
});
}
Insert cell
{
const geojsonLayer = new deck.GeoJsonLayer({
data: 'https://raw.githubusercontent.com/uber-common/deck.gl-data/master/examples/geojson/vancouver-blocks.json',
opacity: 0.8,
stroked: false,
filled: true,
extruded: true,
wireframe: true,
fp64: true,
lightSettings,
getElevation: f => Math.sqrt(f.properties.valuePerSqm) * 10,
getFillColor: f => colorScale(f.properties.growth),
getLineColor: f => [255, 255, 255],
pickable: true,
onHover
});
deckgl.setProps({layers: [geojsonLayer]});
return geojsonLayer;
}
Insert cell
onHover = {
return function(info) {
const {x, y, object} = info;
if (object) {
tooltip.style.top = `${y}px`;
tooltip.style.left = `${x}px`;
tooltip.innerHTML = `
<div><b>Average Property Value &nbsp;</b></div>
<div><div>${object.properties.valuePerSqm} / m<sup>2</sup></div></div>
<div><b>Growth</b></div>
<div>${Math.round(object.properties.growth * 100)}%</div>
`;
} else {
tooltip.innerHTML = '';
}
};
}
Insert cell
Insert cell
Insert cell
Insert cell
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