Public
Edited
Sep 18, 2023
1 fork
Importers
defaultProps = {
return {
// Center of each circle, in [longitude, latitude, (z)]
getPosition: {type: 'accessor', value: x => x.position},
getColor: {type: 'accessor', value: [0, 0, 0, 255]},
getRadius: {type: 'accessor', value: 1},
}
}
make_scatter_instanced = (deck, luma, point_radius, data) => {
var getModel = make_model(deck, luma)
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]
},
// createing a picking color attribute
customPickingColors: {
size: 3,
type: gl.UNSIGNED_BYTE,
update: this.calculatePickingColors
// update: calculatePickingColors
}
});
// Save the model in layer state
this.setState({
model: getModel(gl)
});
}
// updateState() {
// }
//////////////////////////////////////////////////
calculatePickingColors(attribute) {
const {data} = this.props;
const {value, size} = attribute;
let i = 0;
let index = 0;
for (const object of data) {
// console.log(index)
// Use the index index instead of object.id
const pickingColor = this.encodePickingColor(index);
value[index * 3] = pickingColor[0];
value[index * 3 + 1] = pickingColor[1];
value[index * 3 + 2] = pickingColor[2];
index++;
}
}
//////////////////////////////////////////////////
}
ScatterplotLayer.layerName = 'ScatterplotLayer';
ScatterplotLayer.defaultProps = defaultProps;
const layer = new ScatterplotLayer({
id: `scatterplot-${Date.now()}`,
data,
getPosition: d => d.position,
getRadius: d => point_radius, // d.radius,
getColor: d => d.color,
pickable: true,
// required for tooltip
});
return layer;
}
vertexShader = `
attribute vec3 positions;
attribute vec3 instancePositions;
attribute vec3 instancePositions64Low;
attribute float instanceRadius;
attribute vec4 instanceColors;
varying vec4 vColor;
varying vec2 vPosition;
attribute vec3 customPickingColors;
void main(void) {
vec3 offsetCommon = positions * project_size(instanceRadius);
vec3 positionCommon = project_position(instancePositions, instancePositions64Low);
gl_Position = project_common_position_to_clipspace(vec4(positionCommon + offsetCommon, 1.0));
vPosition = positions.xy;
vColor = instanceColors;
picking_setPickingColor(customPickingColors);
}`
fragmentShader = `
precision highp float;
varying vec4 vColor;
varying vec2 vPosition;
void main(void) {
float distToCenter = length(vPosition);
if (distToCenter > 1.0) {
discard;
}
gl_FragColor = vec4(vColor.rgb, vColor.a);
// Should be the last Fragment shader instruction that updates gl_FragColor
gl_FragColor = picking_filterPickingColor(gl_FragColor);
}`;
make_model = (deck, luma) => {
const {Model, Geometry} = luma;
// required for tooltip
const {picking} = deck
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,
// required for tooltip
modules: [picking]
});
}
}
getModel = {
const {Model, Geometry} = luma;
// required for tooltip
const {picking} = deck
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,
// required for tooltip
modules: [picking]
});
}
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
import {deck, luma} from "@cornhundred/deck-gl-import"
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.
