Render Heatmap figure to Heatmapgl

The Python Heatmapgl documentation page only explains how to initialize a heatmapgl figure from an image, it’s unclear how to use this figure type to visualize an array of values. Is it possible to use the WebGL renderer on a standard plotly.graph_objs.Heatmap figure? I tried initializing a figure from the same arguments as the Basic Heatmap example but it gave me a very strange result.

I considered feeding a regular heatmap to the heatmapgl renderer as a PNG bytearray, but this doesn’t work very well. You’d need a way to convert between pixels and values for the x/y axes to make sense, but that seems like an easier problem to deal with than the fact that PNGs exported from a plotly figure include problematic layout artifacts like marginal whitespace, figure borders, mandatory ticklabels, etc.

Hi @neoncontrails, welcome to the forums!

Heatmapgl is intended to support a subset of the functionality of the standard heatmap trace. But what is somewhat unintuitive about it is that it always performs smoothing between points. This is close to what you get when setting zsmooth='fast' in a standard heatmap trace. See https://github.com/plotly/plotly.js/issues/2924 for some discussion.

If you can build a PNG of the image that you want then you could also display this as a background image. See https://plot.ly/python/images/#zoom-on-static-images. What’s not shown in these examples is that the source parameter to layout.image can be an inline data uri (See https://en.wikipedia.org/wiki/Data_URI_scheme). Or you can set layout.image to a pillow PIL.Image.Image object and it will automatically be converted to a data uri. But keep in mind, as a background image you won’t get hover info.

Hope that helps a bit,
-Jon