Performance issues when displaying large matrices as heatmaps

📊 Plotly Python
1

Hi all,
I’m really excited about using plotly to make .html files that can be interactively explored, but I’ve hit a few bumps and I’d like to hear your recommendations.

I’m currently trying to display scatter traces on top of large heatmaps (almost like drawing out the convex hull over the objects in a picture). The heatmaps are made from integer arrays that are typically ~5,000 x 5,000, and I think that’s where my performance issues mainly come from. I’ve noticed that the .html files end up being quite large (a few hundred Mb), take a while to load and have a noticeable lag when zooming in/out even when hovering is turned off (though these last two concerns depend a little on how busy my laptop is when I open the .html file).

Does any workaround come to anyone’s mind? I’ve considered saving the arrays into images and using images instead of the heatmaps, but I’d rather not create temporary image files…

Thanks!

2

Hi @euridkf23,

Yeah, a ~25 million element heatmap is pushing it a bit. To address the lag when interacting with the plot, I’d recommend trying the GPU-accelerated heatmapgl trace and see if that offers any improvement. This won’t change the file size or time to load the plot, but it may improve the interactivity.

Do you need to have the figure stored in a standalone HTML file, or could you interact with it in the Jupyter notebook? If you can stay in the notebook, then it might be worth looking into using Datashader to render the images in Python and then display only the image using plotly. Here’s the datashader raster documentation (http://datashader.org/user_guide/5_Rasters.html), and here’s an example of wiring up Datashader and a plotly FigureWidget (https://plot.ly/python/change-callbacks-datashader/).

-Jon