Display fitted model in dataspace about data-space HOT 1 CLOSED

const q = 4; 
const x0 = -q / 2, x1 = app.width + 28 + q;
const y0 = -q / 2, y1 = app.height + q;
const n = Math.ceil((x1 - x0) / q);
const m = Math.ceil((y1 - y0) / q);
const grid = new Array(n * m);
grid.x = -q;
grid.y = -q;
grid.k = q;
grid.n = n;
grid.m = m;

value = (x, y) =>
  (1 + (x + y + 1) ** 2 * (19 - 14 * x + 3 * x ** 2 - 14 * y + 6 * x * y + 3 * y ** 2))
  * (30 + (2 * x - 3 * y) ** 2 * (18 - 32 * x + 12 * x * x + 48 * y - 36 * x * y + 27 * y ** 2))

thresholds = d3.range(1, 20).map(i => Math.pow(2, i))

color = d3.scaleLog()
    .domain(d3.extent(thresholds))
    .interpolate(d => d3.interpolateMagma)

x = d3.scaleLinear([-2, 2], [0, app.width + 28])
y = d3.scaleLinear([-2, 1], [app.height, 0])

// Converts from grid coordinates (indexes) to screen coordinates (pixels).
transform = ({type, value, coordinates}) => {
  return {type, value, coordinates: coordinates.map(rings => {
    return rings.map(points => {
      return points.map(([x, y]) => ([
        grid.x + grid.k * x,
        grid.y + grid.k * y
      ]));
    });
  })};
}

// We just have to pass the x and y values to the server to predict them using the model, then the rest of the code is the sames?
for (let j = 0; j < m; ++j) {
    for (let i = 0; i < n; ++i) {
      grid[j * grid.n + i] = value(x.invert(i * q + x0), y.invert(j * q + y0));
    }
  }

contours = d3.contours()
    .size([grid.n, grid.m])
    .thresholds(thresholds)
  (grid)
    .map(transform)

app.svg.append("g")
      .attr("fill", "none")
      .attr("stroke", "#fff")
      .attr("stroke-opacity", 0.5)
    .selectAll("path")
    .data(contours) // Here is where the contours gets added 
    .join("path")
      .attr("fill", d => color(d.value)) // Here is the color value!
      .attr("d", d3.geoPath());