Published
Edited
Feb 2, 2021
function tripsLayer() {
const layer = new deck.TripsLayer({
id: 'TripsLayer',
data: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/sf.trips.json',
/* props from TripsLayer class */
currentTime: 500,
getTimestamps: d => d.waypoints.map(p => p.timestamp - 1554772579000),
trailLength: 600,
/* props inherited from PathLayer class */
// billboard: false,
getColor: [253, 128, 93],
getPath: d => d.waypoints.map(p => p.coordinates),
// getWidth: 1,
// miterLimit: 4,
rounded: true,
// widthMaxPixels: Number.MAX_SAFE_INTEGER,
widthMinPixels: 8,
// widthScale: 1,
// widthUnits: 'meters',
/* props inherited from Layer class */
// autoHighlight: false,
// coordinateOrigin: [0, 0, 0],
// coordinateSystem: COORDINATE_SYSTEM.LNGLAT,
// highlightColor: [0, 0, 128, 128],
// modelMatrix: null,
opacity: 0.8,
// pickable: false,
// visible: true,
// wrapLongitude: false,
});
return layer
}
deckgl = {
invalidation.then(() => container.innerHTML = "");
return new deck.DeckGL({
container,
map: mapboxgl,
mapStyle: "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json",
initialViewState: INITIAL_VIEW_STATE,
controller: true,
layers: [tripsLayer()]
});
}
INITIAL_VIEW_STATE = ({
longitude: -122.4,
latitude: 37.74,
zoom: 11,
maxZoom: 20,
pitch: 30,
bearing: 0
})
mapboxgl = require('mapbox-gl@~1.13.0/dist/mapbox-gl.js')
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.
