Geospatial Visual Analytics
Public
Edited
Dec 21, 2024
deckgl.setProps({ layers: [layer_pointcloud, layer_heat] })
deckgl = {
const INITIAL_VIEW_STATE = {
latitude: 37.76755723850794,
longitude: -122.46528671495236,
zoom: 12,
bearing: 20,
pitch: 60
};
return new deck.DeckGL({
container,
// views: orbitview,
map: maplibre,
hash: true,
// layer: layer,
mapStyle:
"https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json",
initialViewState: INITIAL_VIEW_STATE,
controller: true,
getTooltip: ({ object }) => object && object.message,
effects: [new deck.LightingEffect({ ambientLight })]
});
}
layer_pointcloud = {
const pointcloud = new deck.PointCloudLayer({
id: `pointcloud-${Date.now()}`,
// id: 'pointcloud',
data: plotcherry,
opacity: 0.8,
pickable: true,
// coordinateSystem: COORDINATE_SYSTEM.METER_OFFSETS,
// coordinateOrigin: [-122.4, 37.74],
radiusPixels: radius,
getPosition: (d) => [d.longitude, d.latitude, d.doy],
// getNormal: (d) => [-1, 0, 0],
getColor: (d) => [255, 221, 0],
getTooltip: (object) => {
if (!object) {
return null; // Handle cases where no object is picked
}
const { longitude, latitude, doy } = object;
// Customize the tooltip content as needed
return `Longitude: ${longitude.toFixed(4)}, Latitude: ${latitude.toFixed(
4
)}, Day of Year: ${doy.toFixed(2)}`;
}
});
return pointcloud;
}
layer_heat = {
const heatmap = new deck.HeatmapLayer({
id: `heatmap-${Date.now()}`,
// id: "heatmap",
data: plotcherry,
getPosition: (d) => [d.longitude, d.latitude, d.doy],
getWeight: (d) => d.views,
aggregation: "SUM",
radiusPixels: 80
});
return heatmap;
}
orbitview = new deck.OrbitView({
id: "3d-scene",
// orbitAxis: "Y",
controller: true
})
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.
