How to control how far away Plotly starts clipping graph?

p1ho · October 5, 2018, 1:40pm

I noticed in the heatmap examples found here: https://plot.ly/javascript/heatmaps/

if you zoom in and you switch the drag mode to ‘pan’; when you drag the graph to the left, the data that should be there on the right side of the data block is no longer rendered until you release the click.

Is there a way where we can control the threshold of this clipping?

I’m asking because I’m working on animating heatmaps, and I would like the range of data rendered before I animate to it. (Currently, it’ll slide to the new range, but the data in that range only shows after the animation completes, similar to releasing of the click in the example above).

Thanks in advance!

etienne · October 5, 2018, 2:53pm

Not at the moment, unfortunately. It would be a nice feature though.

p1ho · October 5, 2018, 3:30pm

I see, yes I think it would be really nice!

I think I’ll just have to create a quick loader for my case, would really love the animation though.

EDIT:
I was asking about whether a certain block of code is relevant to this, after testing, it didn’t seem like it was.

etienne · October 5, 2018, 4:24pm

here:

github.com

plotly/plotly.js/blob/97cb217c6588c2246b41983f47c822463e52b59a/src/traces/heatmap/plot.js#L103-L113


// make an image that goes at most half a screen off either side, to keep
// time reasonable when you zoom in. if zsmooth is true/fast, don't worry
// about this, because zooming doesn't increase number of pixels
// if zsmooth is best, don't include anything off screen because it takes too long
if(zsmooth !== 'fast') {
    var extra = zsmooth === 'best' ? 0 : 0.5;
    left = Math.max(-extra * xa._length, left);
    right = Math.min((1 + extra) * xa._length, right);
    top = Math.max(-extra * ya._length, top);
    bottom = Math.min((1 + extra) * ya._length, bottom);
}

p1ho · October 5, 2018, 5:40pm

Life saver! Thank you!

For those of you reading later, change the ‘0.5’ on line 108 to a bigger value (I changed to 1.5 and it works great!)