Very slow heatmap color scale change with slider

plotly.js
1

The following code works to change the “min” of the color scale of a heatmap with a slider

Live demo

But it is very slow. How to have a more responsive / faster change of the color scale with a slider?

<script src="https://cdn.plot.ly/plotly-2.16.2.min.js"></script>
<div id="myDiv"></div>
<script>
var z = [], steps = [], i;
for (i = 0; i < 500; i++) 
    z.push(Array.from({length: 800}, () => Math.floor(Math.random() * 100)));  
for (i = 0; i < 100; i++)
    steps.push({ label: i, method: 'restyle', args: ['zmin', i]});
Plotly.newPlot('myDiv',  [{z: z, colorscale: 'Jet', type: 'heatmap'}], {sliders: [{steps: steps}]});
</script>
2

Hello @stamljf,

I dont think that there is a quicker way to do what you are trying to do.

3

Thank you for your answer!

I hoped it was possible to speed up the rendering.

By the way, are some parts of Plotly.JS using WASM? If so, I can imagine it could boost the rendreing speed sometimes?

4

Wait, I figured it out.

Use heatmapgl instead of heatmap. This allows it to use webgl instead of svg. :slight_smile:

1 Like
5

Promising!

The second seems to apply a different smoothing (or alsiasing ?)

Do you see a difference in performance ?

6

Yes, the gl is much quicker, probably about half of the time to move the slider.

Yeah, there are some differences, but the performance boost is noticeable.