Published
Edited
Dec 4, 2019
4 forks
Importers
4 stars
drawCanvas = function(canvasOverlay, params) {
let canvas = params.canvas;
let context = canvas.getContext('2d');
context.globalAlpha = 0.5;
let gpu = new GPU({mode: "gpu"})
const krender = gpu.createKernel(function(xpos, ypos, values, colorScale) {
var nominator=0;
var denominator=0;
var flagDist = -1;
for (var i = 0; i < this.constants.numPoints; i++) {
var dist = Math.sqrt((this.thread.x-xpos[i])*(this.thread.x-xpos[i])+
(this.thread.y-ypos[i])*(this.thread.y-ypos[i]) + 2);
nominator=nominator+(values[i]/dist)
denominator=denominator+(1/dist)
if(dist < 0.1){
flagDist = i;
}
}
var value = 0;
if(flagDist >= 0){
value = values[flagDist];
} else {
value = nominator/denominator;
}
var c = Math.ceil(255 * value);
this.color(colorScale[c*4]/255, colorScale[1 + c*4]/255, colorScale[2 + c*4]/255, 1);
})
.setConstants({ numPoints: points.length })
.setOutput([canvas.width, canvas.height])
.setGraphical(true);
let xPos = [];
let yPos = [];
let values = [];
points.forEach(function(d){
values.push(d.value);
let coords = canvasOverlay._map.latLngToContainerPoint(
L.latLng(d.lat, d.lon));
xPos.push(coords.x);
yPos.push(coords.y);
});
krender(xPos, yPos, values, csImageData);
const result = krender.getCanvas();
context.drawImage(result, 0, 0);
}
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.
