Restyle a heatmap

plotly.js
1

I’d like to update the data of a heatmap.
I understand that restlye is faster than newPlot.

The problem is that I cannot make it work: when I call restyle with exactly the same data as the one I used to create the heatmap, the heatmap is completely broken.

See this codepen.

Please help.

2

That’s because restyle doesn’t expect the same input arguments as new newPlot.

Here’s how to make your example work: http://codepen.io/etpinard/pen/jBgpKR

Assuming you already looked at https://plot.ly/javascript/plotlyjs-function-reference/#plotlyrestyle, https://github.com/plotly/plotly.js/issues/247 has more info on how restyle works.

3

Thanks a lot Etienne. This was exactly what I was looking for!

Regarding the performance of updating the data of a heatmap.

I have a 50x50 data matrix.
With restyle, on my MacBookPro it takes between 50 and 100 msec to redraw the heatmap depending on the browser:

  • Safari 10.0.3: 50 msec
  • Chrome 57: 80 msec
  • Firefox 52: 100 msec

Here is the codepen http://codepen.io/viebel/pen/LyPvzO

What could I do in order to make the heatmap render faster?

Thanks.

4

You can try setting the xaxis and yaxis range fields so that plotly.js doesn’t have to go though its auto-range routine.

Apart form that, that’s about as fast as you can do at the moment with heatmap. Maybe heatmapgl would perform better, but I have my doubts.

5

Thanks a lot Etienne!
With heatmapgl and autorange: false, it gets down to 35mec on Chrome.