d3-contour | Compute contour polygons using marching squares | Math library

I'm trying to update my d3js contours plot with new data. I'm using set interval method to create new random data and would like to generate new contours/animate current contours to new positions if that makes sense. Currently the code creates the contour plot for the fist data and doesn't update the contours with different data. Ideally, I would like to have a smooth transition of contours from one state to another according to the data I'm providing.

I have been largely unsuccessful in getting a d3 contour to work by following this example on observable at a single elevation. My code ends up just displaying a black box.

My attempt at generating the contour can be seen below. I also put it here in Fiddle with the elevation data from the observable example.

I use dc.js for showing the results of multiple classification algorithms. More specifically, I want to show a precision recall chart (each point corresponds to a result of a classification system). I already used a dc.js scatter chart for this which works fine. Additionally I would like to have a d3 contour in the background of the chart which shows the F-measure. This is already implemented. The only issue is that the contour part is in the foreground and not in the background of the chart. Please have a look at the jsfiddle for a full example.

Two questions are still open for me because I'm not a dc.js or d3 expert:

1. Is there a way to put the contour in the background or the symbols(cycles) of the scatter chart in the foreground (I already tried it with the help of this stackoverflow question but with no success)
2. I used the 'g.brush' selector to get the area of the inner chart. This works fine as long as the brushing is turned on. Is the selector a good way to go or are there better alternatives (which may also work if brushing is switched off).

In my example I put the contour part in the upper left corner to see if it works but I also provide the code (currently uncommented) to increase the width and height of the contour to the correct size.

I am trying to create a d3-contour map using solar radiation as a google maps overlay using canvas not svg. I am new to d3 and am developing my js knowledge, I'm struggling to find complete examples on the interwebs to work from.

As an initial step I have made some dummy data for a 7 x 7 grid with made up values (10-40) which I want to display on a html page without google maps.

I use d3-contour which creates MultiPolygons. I am trying to draw these to a canvas element. With my code, nothing appears in html however no errors are in the console. Here is my code...