container = html `<div style="height:600px">
<div id="tooltip"></div>
<div id="legend">
${legendEntries.map(({color, value}) => html`<div class="legend-entry">
<div class="swatch" style="background:${color};"></div>
<div class="label">${value}</div>
</div>`)}
</div>
</div>`
legendEntries = [
{color: 'red', value: '0-10'},
{color: 'yellow', value: '10-100'}
]
tooltip = container.querySelector('#tooltip')
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
});
}
{
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: onHover
});
deckgl.setProps({layers: [geojsonLayer]});
return geojsonLayer;
}
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 </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 = '';
}
};
}
html `<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.css' rel='stylesheet' />
<style>
#tooltip:empty {
display: none;
}
#tooltip {
font-family: Helvetica, Arial, sans-serif;
font-size: 11px;
position: absolute;
padding: 4px;
margin: 8px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
max-width: 300px;
font-size: 10px;
z-index: 9;
pointer-events: none;
}
#legend {
position:absolute;
right:8px;
bottom:8px;
background:white;
padding:4px;
border:1px solid red;
z-index:500;
}
#legend .legend-entry {
display:flex;
}
#legend .swatch{
width:1rem;
height:1rem;
margin-right:0.5rem;
}
</style>
(Stylesheets)`
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.
