The avatar for @helloeujin
Youjin Shin | 신유진
Data Visualization Specialist | Previously @WashingtonPost @WallStreetJournal @MITSenseableCity
Public
3D
Edited
Mar 12, 2023
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 basic
deck.gl | LineLayer + Tooltip
deck.gl | TripsLayer + Animationdeck.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
deckgl.setProps({ layers: layers});
Insert cell
deckgl = {
return new deck.DeckGL({
container,
// layers,
map: mapboxgl,
mapStyle: 'https://basemaps.cartocdn.com/gl/dark-matter-nolabels-gl-style/style.json',
initialViewState: INITIAL_VIEW_STATE,
controller: true,
pickingRadius: 5,
parameters: {
blendFunc: [GL.SRC_ALPHA, GL.ONE, GL.ONE_MINUS_DST_ALPHA, GL.ONE],
blendEquation: GL.FUNC_ADD
},
getTooltip: getTooltip
});
}
Insert cell
Insert cell
layers = [
// new deck.ScatterplotLayer({
// id: 'airports',
// data: airports,
// radiusScale: 20,
// getPosition: d => d.coordinates,
// getFillColor: [255, 140, 0],
// getRadius: d => getSize(d.type),
// pickable: true
// }),
new deck.LineLayer({
id: 'flight-paths',
// data: flightPaths,
data: DATA_URL.FLIGHT_PATHS,
opacity: 0.8,
getSourcePosition: d => d.start,
getTargetPosition: d => d.end,
getColor,
getWidth,
pickable: true
})
]
Insert cell
getTooltip = ({object}) => {
return (
object &&
`\
${object.country || object.abbrev || ''}
${object.name.indexOf('0x') >= 0 ? '' : object.name}`
);
}
Insert cell
getWidth = 3 //3
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
flightPaths = (await fetch(DATA_URL.FLIGHT_PATHS)).json()
Insert cell
airports = (await fetch(DATA_URL.AIRPORTS)).json()
Insert cell
DATA_URL = ({
AIRPORTS:
'https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/line/airports.json',
FLIGHT_PATHS:
'https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/line/heathrow-flights.json'
})
Insert cell
Insert cell
mapboxgl = require("mapbox-gl@1.6.0/dist/mapbox-gl.js")
Insert cell
deck = require.alias({
h3: {}
})("deck.gl@latest/dist.min.js") //@8.8.25 or @latest
Insert cell
// luma = deck && window.luma
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