How to have a faster rendering, when moving a slider for colorscale range, with Plotly?

Question

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

But it is very slow : we have a 1 fps movement when dragging the slider.

Solutions like replacing "heatmap" by "heatmapgl" don't really solve the problem (it maybe improves to 2 fps).

How to have a more responsive / faster change of the color scale with a slider?

For many applications, it is crucial to be able to see in "realtime" (more than 10 fps), the result of a change in the color scale, and it is possible to do this with Matplotlib, etc.

How to get the same behaviour in Plotly JS?

var z = Array.from({length: 500}, () => Array.from({length: 1000}, () => Math.floor(Math.random() * 500)));  
var steps = [], i;
for (i = 0; i < 500; i++)
    steps.push({label: i, method: 'restyle', args: ['zmin', i]});
Plotly.newPlot('myDiv',  [{z: z, colorscale: 'Jet', type: 'heatmap'}], {sliders: [{steps: steps}]});

<script src="https://cdn.plot.ly/plotly-2.16.2.min.js"></script>
<div id="myDiv"></div>

Answer 1

Full credit to EricLavault for his great findings and his answer which gives a nice solution until the Plotly.JS heatmap code is improved.

Here is, for future reference, one more workaround to circuvent the bugs: using a HTML native slider (<input type="range">) instead of the Plotly slider. For me it gives another improvement of the number of frame per second from his answer by a factor at least 2.

var z = Array.from({length: 500}, () => Array.from({length: 1000}, () => Math.floor(Math.random() * 500)));  

const data = [{
  z: z, 
  colorscale: 'Jet', 
  type: 'heatmap', 
  zsmooth: 'fast'
}];

const layout = {
  width: 1200,
  height: 650,
  margin: {
    t: 40,
    b: 110,
    l: 90,
    r: 110
  }
};

Plotly.newPlot('myDiv', data, layout);

document.getElementById("slider").oninput = (e) => {
    Plotly.restyle('myDiv', { zmin: e.target.value });
};

.subplot.xy .heatmaplayer image { image-rendering: pixelated; }
input { width: 100%; }

<script src="https://cdn.plot.ly/plotly-2.16.2.min.js"></script>
<div id="myDiv"></div>
<input type="range" id="slider" min="0" max="500" />

Answer 2

The heatmap needs to be entirely redrawn for each slider step, which takes time particularly because of the number of points (500k).

However, as discussed in the comments, it appears that it takes longer when there is no smoothing algorithm (zsmooth:false) than when there is (zsmooth:'best' or zsmooth:'fast'), which is not logical : it should rather be the other way around because of the interpolation cost. Looking at the code, I can confirm there is a performance issue that could be addressed.

Until a PR fixes the issue, there is a workaround solution you can use, which consists of setting :

1. zsmooth:'fast' in order to benefit from the (currently) fastest drawing method.
2. image-rendering: pixelated to prevent the browser from doing the smoothing.

Of course, because it would be too easy, you will land on a bug, which is that high resolution heatmaps are somehow "truncated" when using zsmooth:'fast' (this has been fixed in version 2.21.0). To circumvent this one, we need to set explicit width, height and margins in the layout.

Nb. regarding the plot size, setting an explicit width, height and margins might be necessary if you want to give the user a chance to properly see the heatmap, ie. at least one pixel per brick obviously unless a specific (zooming) range is defined, and for the slider as well one pixel per step (in the end, the resolution might be an issue per se).

var z = Array.from({length: 500}, () => Array.from({length: 1000}, () => Math.floor(Math.random() * 500)));  
var steps = [], i;

for (i = 0; i < 500; i++)
    steps.push({label: i, method: 'restyle', args: ['zmin', i]});

const data = [{
  z: z, 
  colorscale: 'Jet', 
  type: 'heatmap', 
  zsmooth: 'fast'
}];

const layout = {
  sliders: [{steps: steps}],
  width: 1200,
  height: 650,
  margin: {
    t: 40,
    b: 110,
    l: 90,
    r: 110
  }
};

Plotly.newPlot('myDiv', data, layout);

.subplot.xy .heatmaplayer image {
  image-rendering: pixelated;  
}

<script src="https://cdn.plot.ly/plotly-2.16.2.min.js"></script>
<div id="myDiv"></div>

Answer 3

My advice to improve the responsiveness of the color scale slider in a Plotly.js heatmap:

Replace 'restyle' with 'animate' method for slider steps. Create custom frames array to store slider frames. Set duration and transition time to 0 for instantaneous updates. Use a separate function to update the color scale based on the slider value.

Answer 4

var z = Array.from({length: 500}, () => Array.from({length: 1000}, () => Math.floor(Math.random() * 500)));
var steps = [], i;
for (i = 0; i < 500; i++)
    steps.push({label: i, method: 'restyle', args: ['zmin', i]});

var myPlot = Plotly.newPlot('myDiv', [{z: z, colorscale: 'Jet', type: 'heatmap'}], {sliders: [{steps: steps}]});

function slider(func, w) {
  let timeElasped;
  return function executor(...args) {
    const l = () => {
      clearTimeout(timeElasped);
      func(...args);
    };
    clearTimeout(timeElasped);
    timeElasped = setTimeout(l, w);
  };
}

var updateZ = function(z) {
  Plotly.restyle('myDiv', 'zmin', z);
}

var sliderUpdateZ = slider(updateZ, 50);

myPlot.on('plotly_sliderchange', function(e){
  sliderUpdateZ(e.step.value);
});

<script src="https://cdn.plot.ly/plotly-2.16.2.min.js"></script>
<div id="myDiv"></div>