container = html `<div style="height:600px;"></div>`
ini_zoom = [-3, -3]
deckgl.viewState.zoom // = [3, 0]
// num_points = 100
num_points = 0.001 * 1000 * 1000
num_cols = Math.floor(Math.sqrt(num_points))
mil_points = num_points /1e6
Math.pow(0.96, 0)
num_cols
data = {
const DEGREE_TO_RADIANS = Math.PI / 180;
let r = 0;
let a = 0;
// const num_cols = 100;
// const num_rows = 100;
var row_index = 0
return new Array(num_points).fill(0).map(_ => {
const cosA = Math.cos(a * DEGREE_TO_RADIANS);
const sinA = Math.sin(a * DEGREE_TO_RADIANS);
const radius = Math.pow(0.96, r);
const dist = 45
var inst_col = (a % num_cols)
if (a % num_cols === 0){
row_index += 1;
}
const p = {
size: radius * radius * 20,
position: [dist * inst_col, dist * row_index * 1],
color: [(cosA + 1) / 2 * 255, (sinA + 1) / 2 * 255, 128]
};
a += 1;
return p;
});
}
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},
smoothRadius: {type: 'number', min: 0, value: 0.0},
}
}
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
vertexShader = `
attribute vec3 positions;
attribute vec3 instancePositions;
attribute vec3 instancePositions64Low;
attribute float instanceRadius;
attribute vec4 instanceColors;
varying vec4 vColor;
varying vec2 vPosition;
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;
}`
// gl_FragColor = vec4(vColor.rgb, vColor.a);
fragmentShader = `
precision highp float;
uniform float smoothRadius;
varying vec4 vColor;
varying vec2 vPosition;
void main(void) {
gl_FragColor = vec4(vColor.rgb, 1.0);
}`;
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.getAttributeManager().getAttributes();
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.
