Contour plot regions bleeding into null area

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:

{ x: [0, 0.5, 0.5, 1]
, y: [0, 0.5, 0.5, 1]
, z:
    [ [0.5, 0.5, 0.5, 1]
    , [0, 0, 0, 0.5]
    , [null, null, 0, 0.5]
    , [null, null, 0, 0.5]
    ]
}

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.

Any way to fix this?

Thanks very much for writing in.

I’m having a bit of hard time locating the “bleeding out” problem you’re referring to.

Copying your x/y/z data into a simple codepen gives me: https://codepen.io/etpinard/pen/xxKzNoq

From there, what do we need to do to see the contours “bleeding out”?

Thanks again!!

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 :frowning:. This is my data:

{ x: [0, 1]
, y: [0, 1]
, z:
    [ [ 0, 1 ]
    , [ null, 0 ]
    ]
}

I also have smoothing: 0.

Here is a simple codepen showcasing the issue: https://codepen.io/ucode/pen/ExYRBZX

Thanks for the codepen!

If I understand correctly, you’re saying the the darkest blue contour fill region should not go pass the y=x line?

That’s correct. Everything above y=x should be white. The dark blue band should be the same thickness as the other bands.

Thanks for your help! I opened a bug report https://github.com/plotly/plotly.js/issues/4200

I invite you to subscribe to it to stay up-to-date with development.

Thank you etienne, I will subscribe to the GitHub issue.

three reasons why you should buy plotly pro: support open source, get great support, host your plots and dashboards online