Contour plot regions bleeding into null area

plotly.js
1

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?

2

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!!

3

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.

4

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

5

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?

6

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

7

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.

8

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