Designer. Geek. Beer addict. Data queen.
Public
Edited
May 1, 2024
4 stars
container = html `<div style="height:400px"></div>`
data = FileAttachment("scatterplot-data.json").json()
circleLayer = {
return new CircleLayer({
data,
getPosition: d => d.position,
getRadius: d => d.size,
getShape: d => Math.floor(Math.random() * 3),
fadeDistance: [200, 800]
})
}
CircleLayer = {
const SHAPES = {
SQUARE: 0,
DIAMOND: 1,
CROSS: 2
}
class CircleLayer extends deck.ScatterplotLayer {
static layerName = 'ScatterplotLayer' + Date.now()
static defaultProps = {
getShape: {type: 'access', value: SHAPES.SQUARE},
fadeDistance: {type: 'array', value: [0, 100], compare: true}
}
initializeState() {
super.initializeState()
this.getAttributeManager().addInstanced({
instanceShapes: {
size: 1,
accessor: 'getShape'
}
})
}
getShaders() {
return {
...super.getShaders(),
inject: {
'vs:#decl': `
attribute float instanceShapes;
uniform vec2 fadeDistance;
varying float vShape;
`,
'vs:#main-end': `
vShape = instanceShapes;
`,
'vs:DECKGL_FILTER_COLOR': `
float d = length(geometry.worldPosition.xy);
color.a = (fadeDistance.y - d) / (fadeDistance.y - fadeDistance.x);
`,
'fs:#decl': `
varying float vShape;
const int SHAPE_SQUARE = 0;
const int SHAPE_DIAMOND = 1;
const int SHAPE_CROSS = 2;
`,
'fs:DECKGL_FILTER_COLOR': `
vec2 uv = abs(geometry.uv);
int shape = int(vShape);
if (shape == SHAPE_SQUARE) {
if (uv.x > 0.7 || uv.y > 0.7) discard;
} else if (shape == SHAPE_DIAMOND) {
if (uv.x + uv.y > 1.0) discard;
} else if (shape == SHAPE_CROSS) {
if (uv.x > 0.25 && uv.y > 0.25) discard;
}
`
}
}
}
draw(opts) {
opts.uniforms.fadeDistance = this.props.fadeDistance;
super.draw(opts)
}
}
return CircleLayer
}
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.
