Designer. Geek. Beer addict. Data queen.
Public
Edited
May 1, 2024
6 stars
deck.gl Shader Injectiondeck.gl Tutorial: Subclassing A LayerGetting Started with deck.gldeck.gl Tutorial: Custom Composite Layer
deck.gl Tutorial: Custom Primitive Layer
container = html `<div style="height:450px;"></div>`
defaultProps = {
return {
// Center of each circle, in [longitude, latitude, (z)]
getPosition: {type: 'accessor', value: x => x.position},
// Radius of each circle, in meters
getRadius: {type: 'accessor', value: 1},
// Color of each circle, in [R, G, B, (A)]
getColor: {type: 'accessor', value: [0, 0, 0, 255]},
// Amount to soften the edges
smoothRadius: {type: 'number', min: 0, value: 0.5},
}
}
layer0 = {
const {Layer} = deck;
// Our custom layer class
class ScatterplotLayer extends Layer {
initializeState() {
// TODO
}
updateState() {
// TODO
}
}
ScatterplotLayer.layerName = 'ScatterplotLayer';
ScatterplotLayer.defaultProps = defaultProps;
return new ScatterplotLayer({
id: `scatterplot-${Date.now()}`,
data,
getPosition: d => d.position,
getRadius: d => d.size,
getColor: d => d.color
});
}
layer0.props.smoothRadius
getModel = {
const {Model, Geometry} = luma;
return gl => {
// Four corners of the quad
const positions = new Float32Array([-1, -1, -1, 1, 1, 1, 1, -1]);
const geometry = new Geometry({
drawMode: gl.TRIANGLE_FAN,
vertexCount: 4,
attributes: {
positions: {size: 2, value: positions}
}
});
return new Model(gl, {vs: vertexShader, fs: fragmentShader, geometry, isInstanced: true});
}
}
layer2 = {
const {Layer} = deck;
class ScatterplotLayer extends Layer {
initializeState() {
const {gl} = this.context;
// Register attributes
this.getAttributeManager().addInstanced({
instancePositions: {
size: 3,
type: gl.DOUBLE,
accessor: 'getPosition'
},
instanceRadius: {
size: 1,
accessor: 'getRadius',
defaultValue: 1
},
instanceColors: {
size: 4,
normalized: true,
type: gl.UNSIGNED_BYTE,
accessor: 'getColor',
defaultValue: [0, 0, 0, 255]
}
});
// Save the model in layer state
this.setState({
model: getModel(gl)
});
}
updateState() {
// Retrieve the model from layer state
this.state.model.setUniforms({
smoothRadius: this.props.smoothRadius
});
}
}
ScatterplotLayer.layerName = 'ScatterplotLayer';
ScatterplotLayer.defaultProps = defaultProps;
const layer = new ScatterplotLayer({
id: `scatterplot-${Date.now()}`,
data,
getPosition: d => d.position,
getRadius: d => d.size,
getColor: d => d.color
});
deckgl.setProps({layers: [layer]});
return layer;
}
layer2.getAttributeManager().attributes;
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.