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 = (
d3,
deck,
luma,
point_radius,
data,
apply_map_morph,
get_color_function,
map_type,
transitions,
) => {
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,
getPosition: apply_map_morph,
getRadius: d => point_radius, // d.radius,
// getColor: d => d.color,
getColor: get_color_function,
pickable: true,
// required for tooltip
updateTriggers: {
// getFillColor: [select_meta, selected_clusters],
getPosition: map_type,
},
transitions: transitions,
onClick: (info, event) => {
console.log('clicking!!!')
// if (mutable selected_clusters[0] !== info.object[cluster_name]){
// mutable select_meta = cluster_name
// mutable selected_clusters = [info.object[cluster_name]]
// d3.select('#meta_dropdown').select('select').node().value = 'none'
// } else {
// mutable select_meta = cluster_name
// mutable selected_clusters = []
// d3.select('#meta_dropdown').select('select').node().value = cluster_name
// }
}
});
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]
});
}
}
tmp_function = (arg) => {console.log('here ' + arg)}
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.
