Public
Edited
Jun 26, 2024
tripcontainer = html`<div style="height:700px"></div>`;
{
let layer = new deck.TripsLayer({
id: 'trips-layer',
data: paths,
getPath: d => d.path,
getTimestamps: d => d.timestamps.map(p => p - minTimestamp),
getColor: d => d.color,
opacity: 0.8,
widthMinPixels: 3,
rounded: true,
trailLength: Infinity,
currentTime: currentMinute * 60 * 1000
})
tripdeckgl.setProps({
layers: [
layer
]
})
return "onchange"
}
tripdeckgl = new deck.DeckGL({
container: tripcontainer,
map: mapboxgl,
mapboxAccessToken: '',
mapboxApiAccessToken: token,
mapStyle: 'mapbox://styles/mapbox/standard',
layers: [],
initialViewState: {
longitude: 20.680278,
latitude: 52.330556,
zoom: 11.5,
pitch: 0
},
controller: true
});
getDeckGLMap([
new deck.ScatterplotLayer({
id: 'scatterplot-layer',
data,
pickable: true,
opacity: 1,
filled: true,
radiusScale: 1,
radiusMinPixels: 2,
radiusMaxPixels: 2,
getPosition: d => [d.lon, d.lat],
getRadius: d => 1,
getFillColor: d => [255, 140, 0]
})
])
maxAdjustedTimestamp = d3.max(data, d => new Date(d["timestamp"]).getTime()) - minTimestamp
maxMinutes = Math.floor(maxAdjustedTimestamp /1000 / 60)
paths = data.reduce( (accum, d) => {
if(accum[d.track] === undefined){
accum[d.track] = {
track: d.track,
path: [],
timestamps: [],
};
}
accum[d.track].path.push([d.lon, d.lat])
accum[d.track].timestamps.push(d.timestamp)
let trucks = []
for(let truckid in accum){
accum[truckid].color = [255,140,0]
trucks.push(accum[truckid])
}
return trucks
}, {})
data = {
const load = await FileAttachment("traj.csv").csv({typed: true})
return load.map(d => ({...d, track: 0}))
}
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.
