Angular with kriging.js, how to implement?

Question

I have a problem with kriging.js in my Angular application. Regardless of the selected model, sigma2 and alpha values, it always generates a one-color canvas, blue or red. The data I'm using is three arrays: with values, with x and y coordinates. The data is correct and I should be 100% able to generate a kriging map from it.

My variogram: const variogram = kriging.train(values, xCoords, yCoords, "exponential", 0, 10);

Method to generate canvas:

 generateKrigingMap(variogram: any): HTMLCanvasElement {
    const width = 500;
    const height = 500;
  
    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    const context = canvas.getContext('2d');

    if (context) {
      const color = d3.scaleSequential(d3.interpolateRdBu).domain([-52, -48]);
  
      context.save();
      context.fillStyle = 'white'; 
      context.fillRect(0, 0, width, height);
      context.restore();
  
      for (let x = 0; x < width; x+=10) {
        for (let y = 0; y < height; y+=10) {
            const value = kriging.predict(x, y, variogram);
            context.fillStyle = color(value);
            context.fillRect(x, y, 10, 10);
        }
      }
  
      return canvas;
    } else {
      throw new Error('Canvas context is not available.');
    }
  }

I tried changing the models, sigma2 and alpha values, and modifying the canvas size along with the .fillRect size. Unfortunately, nothing helped and I can't locate the error.

During the console.log of different values, for example, const value = kriging.predict(x, y, variogram) I noticed that value is always identical, so the color from this value will also be identical. Is the problem with my variogram or elsewhere?

EDIT: The .domain([-52, -48]) is because values of my data set are in range of this two values, I know it's not universal but for now I just want to generate kriging map for this specific data set

Answer 1

To resolve problem I needed to use projection from d3. In my case it was const projection = d3.geoMercator(). Then I needed to modify nested for like that:

for (let x = 0; x < width; x+=10) {
        for (let y = 0; y < height; y+=10) {
            const p = projection.invert([x, y])
            const value = kriging.predict(...p, variogram);
            context.fillStyle = color(value);
            context.fillRect(x, y, 10, 10);
        }
      }

invert transforms my x, y values to coordinates. Also projection needed this:

projection.fitExtent(
[
  [myBbox[0], myBbox[1],
  [myBbox[2], myBbox[3]
],
{
   geoJsonObject
}
)

Where bbox is bounding box of my polygon const myBbox = turf.bbox(geoJsonObject)

Thanks to that projection.invert returns coordinates that are inside my polygon so that fillRect colors the appropriate areas on the canvas