Public
Edited
Sep 12, 2023
Insert cell
Insert cell
container = html `<div style="height:600px"><div id="tooltip"></div></div>`
Insert cell
Insert cell
Insert cell
Insert cell
Select a data source…
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Select a data source…
Type Chart, then Shift-Enter. Ctrl-space for more options.

Insert cell
roaddata = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
[
116.26191000524402,
40.01346243590182
],
[
116.26191262306759,
40.01341607545047
],
[
116.26191490936715,
40.01337305146164
],
[
116.26191719868861,
40.01332966034864
],
[
116.26191945904797,
40.01328598892853
]
]
}
}
]
}
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