I can’t seem to get Plotly.js’ contour plot to look correct with a null area.

I was able to get my first contour map to display the way I wanted for a unit square. Top left quadrant is white (null), bottom left quadrant is horizontal levels decreasing in value until 0 at y = 0.5, top left quadrant is vertical levels increasing in value from 0 at x = 0.5, and finally bottom right quadrant is diagonal lines increase from 0 at x = 0.5: https://lbmaps.web.app/
I accomplished this with the following data:

I had to duplicate parts to get the contour plot to display the null area properly. Otherwise the top of the lower left quadrant bleeds into the null area. Unfortunately, I have not been able to successfully do the same for a simpler contour plot where the diagonal levels increase from 0 at y = x towards the bottom right corner. You can see this by clicking the “Observational probabilities?” checkbox. The blue bleeds into the null area.

Thank you etienne for responding. I should’ve been more clear. The plot you have in your codepen and I have at https://lbmaps.web.app works well. Actually beautiful! You can see I had to finagle the values to get that null area to not bleed. For example, when x ∈ {0, 0.5}, z takes on the values 0 and then null for y = 0.5.

The problem is with a different (but similar) plot. This plot you can see by visiting the URL above and then unchecking “Observational probabilities?” I simply want diagonal levels with the NW triangle (half the plot) null. I can’t seem to finagle these values to get the null area not to bleed though . This is my data: