gmapsContainer = html `<div style="height:600px"></div>`
mutable scatterPlotHover = ""
data_text = Files.text(data_in)
data = JSON.parse(data_text)
data.length
{
let scatterploLayer = new deck.ScatterplotLayer({
id: 'scatterplot-layer',
data,
stroked: true,
filled: true,
pickable: true,
getPosition: d => [d.pickup_lng, d.pickup_lat],
getRadius: d => 20,
getFillColor: d => [0, 0, 0],
getLineColor: d => [0, 0, 0],
onHover: ({object, x, y}) => {
const tooltip = `Total bookings: ${object.total_bookings}`;
mutable scatterPlotHover = tooltip
/* Update tooltip
http://deck.gl/#/documentation/developer-guide/adding-interactivity?section=example-display-a-tooltip-for-hovered-object
*/
}
})
let hexLayer = new deck.HexagonLayer({
id: 'heatmap',
radius: 1000,
colorScaleType: 'quantile',
opacity: 0.2,
pickable: true,
colorRange: [
[255, 237, 177],
[253, 231, 160],
[255, 216, 89],
[255, 195, 0],
[241, 146, 14],
[227, 97, 28],
[199, 0, 57],
[144, 12, 63],
[90, 24, 70],
[65, 3, 46],
[50, 1, 35]
],
data,
getPosition: d => [d.pickup_lng, d.pickup_lat],
getColorValue: (d) => {
if (d.length >= 1) {
// hexMap[``]
let totalBookings = 0;
for (let datum of d) {
if (datum.hasOwnProperty('total_bookings')) {
totalBookings += datum['total_bookings']
}
}
return totalBookings;
}
return 0;
},
})
googleMap.overlayMapTypes.setAt( 0, null);
let overlay = new deck.GoogleMapsOverlay({
layers: [
hexLayer,
scatterploLayer
]
});
overlay.setMap(googleMap);
}
google.maps
// This embeds my key. Get your own key - this one will be cycled out very soon!
google = require('https://maps.googleapis.com/maps/api/js?key=AIzaSyC1DI-P2Ymglwb1ey5dVIXsmXhIxReUHmE')
.catch(() => window.google)
googleMap = new google.maps.Map(gmapsContainer, {
styles: map_style,
center: {
lng: -3.007182,
lat: 53.404542,
},
zoom: 10
});
viewof data_in = html`<input type=file accept="*/*">`
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.
