The avatar for @helloeujin
Youjin Shin | 신유진
Data Visualization Specialist | Previously @WashingtonPost @WallStreetJournal @MITSenseableCity
Public
3D
Edited
Jul 23, 2024
1 star
3D
deck.gl | population density map of South Koreathree.js | Physics basicthree.js | Shader (galaxy)three.js | Shader patternsthree.js | Shader (Sea)three.js | Shader basicdeck.gl | LineLayer + Tooltip
deck.gl | TripsLayer + Animation
deck.gl | HexagonLayer + Camera Animationthree.js | FontLoaderthree.js | Camera animationthree.js | GLTFLoaderthree.js | OrbitControls
Insert cell
Insert cell
Insert cell
container = html `<div style="height:600px" class="container"></div>`
Insert cell
trips.map((d) => d.path)
Insert cell
trips.map((d) => d.timestamps)
Insert cell
deckgl.setProps({ layers: layers});
Insert cell
deckgl = {
return new deck.DeckGL({
container,
// layers,
map: mapboxgl,
// mapStyle: "https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json",
mapStyle: 'https://basemaps.cartocdn.com/gl/dark-matter-nolabels-gl-style/style.json',
initialViewState: INITIAL_VIEW_STATE,
controller: true
});
}
Insert cell
layers = [
// new deck.PolygonLayer({
// id: 'ground',
// data: landCover,
// getPolygon: f => f,
// stroked: false,
// getFillColor: [0, 0, 0, 0]
// }),

new deck.TripsLayer({
id: "trips",
// id: `trips-jan23-${Date.now()}`,
data: trips,
getPath: (d) => d.path,
getTimestamps: (d) => d.timestamps,
getColor: (d) => (d.vendor === 0 ? theme.trailColor0 : theme.trailColor1),
opacity: 0.35, //
widthMinPixels: 2,
rounded: true,
trailLength: 180, // 180
currentTime,
shadowEnabled: false
}),
new deck.PolygonLayer({
id: "buildings",
data: buildings,
extruded: true,
wireframe: false,
opacity: 0.3,
getPolygon: (f) => f.polygon,
getElevation: (f) => f.height,
getFillColor: theme.buildingColor,
material: theme.material
})
]
Insert cell
currentTime = {
while (true) {
const timestamp = Date.now() / 1000; // Playhead i.e. real-world current time in seconds
const loopTime = loopLength / animationSpeed; // Real-world duration of animation loop in seconds
const time = Math.round(((timestamp % loopTime) / loopTime) * loopLength); // Animation world current “time”

yield time;
}
}
Insert cell
animationSpeed = 30
Insert cell
loopLength = 1800 // unit corresponds to the timestamp in source data
Insert cell
Insert cell
// MAP_STYLE = 'https://basemaps.cartocdn.com/gl/dark-matter-nolabels-gl-style/style.json';
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
trips = (await fetch(dataUrl.TRIPS)).json()
Insert cell
buildings = (await fetch(dataUrl.BUILDINGS)).json()
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more