SVG Heatmaps

[zbjornson]

Currently the color brick area of heatmaps is rendered using data: URLs. This makes it harder to produce high-quality exported images (especially for print) unless you're careful with how the image is resampled after exporting (difficult to do given that it's a PNG embedded in an SVG).

Would you consider using SVG instead, at least for zsmooth=false?

I made a quick patch to try this out. With a 50 x 200 brick heatmap, performance seems pretty close. I could turn this into a PR if it would be accepted.

[alexcjohnson]

Thanks @zbjornson. I guess you mean rendering each brick as a separate solid-color rectangle? This could be an interesting mode to have available, but we wouldn't want it to always turn to SVG when zsmooth=false - aside from performance questions when you get to even larger sizes, I seem to recall some situations where it's still tricky to get the stitching right when two shapes are expected to exactly meet - for example stacked or gapless bar charts.

@etpinard what do you think, another zsmooth value ('rects'?) or a new attribute (rendering=('image'|'rects') where 'rects' forces zsmooth=false)?

[zbjornson]

rendering each brick as a separate solid-color rectangle

Yes, this. :)

Thanks for the prompt reply. I didn't realize there are possibly issues with aligning SVG shapes, good to know.

[alexcjohnson]

The problem is not with aligning them, it's that antialiasing can produce subpixel artifacts (can look like gaps or overdrawing, depending on the circumstance) even on perfectly-aligned shapes. Normally the solution to this is to disable antialiasing (shape-rendering="crispEdges") but that sometimes fails: it looks ugly if your shapes are not perfectly horizontal or vertical, it can delete tiny elements, and in some exported environments it's not respected anyway.

[alyst]

I wanted a heatmap with a clearly visible grid. But enabling gaps between the tiles produces antialiasing artifacts, and the resulting grid doesn't look publication-ready, unfortunately.
Also the PDF version produced with Orca looks like vector-based interpretation of antialiasing. In addition to smoothing attempt, the tiles look individually misaligned.

I guess "rects" mode for the heatmap trace would have solved that.
The normal grid lines drawn on top of the gapless heatmap would have solved it even better, but I learned that it's not possible.

@zbjornson Can you publish your patch, please? That would be really helpful, at least for me!

[alyst]

An additional consideration why "rects" would be very useful: it's not possible to edit the pixel-based heatmap. E.g. if we want to manually introduce bigger gaps between the groups of X or Y axis categories in AdobeIllustrator.

[zbjornson]

@alyst my patch was a super rough one just for benchmarking and is far from usable, sorry. I'll be revisiting it within the next few months and will post or PR it if I can.

Using SVG rects might fix #888 as well, if the mouse event listeners are placed on the rects directly.

[gvwilson]

Hi - we are trying to tidy up the stale issues and PRs in Plotly's public repositories so that we can focus on things that are still important to our community. Since this one has been sitting for several years, I'm going to close it; if it is still a concern, please add a comment letting us know what recent version of our software you've checked it with so that I can reopen it and add it to our backlog. Thanks for your help - @gvwilson