Plotly.js: `image` future directions

[antoinerg]

Following the introduction of image trace type in https://github.com/plotly/plotly.js/pull/4289, here are a few future directions this trace type could go:

• add support for x and y
• add new color models
• add optimized rendering pathway in browsers that support it by drawing the image once and rely on CSS image-rendering: pixelated to provide a pixelated view of it

[etpinard]

• renaming it pixmap :smile:

[archmoj]

I was wondering it might be of interest to have an option of printing numbers (or other characters) instead of drawing rectangles. Something similar to pixmap actually!
https://franz.com/support/documentation/current/doc/cg/cg-pixmaps.htm
Also that reminds me of this article http://www.cs.utah.edu/~gk/papers/vissym04/vissym04kindlmann.pdf which @nicolaskruchten showed me a while ago may be possible using vectors.

[archmoj]

Also to metion:

• supporting typed arrays
• support aspectratio
• HDR images https://en.wikipedia.org/wiki/High-dynamic-range_imaging

[emmanuelle]

I have the impression that at the moment nan values are converted to 0. We could instead keep the same behaviour as Heatmap where nan regions are transparent and show the background.

[antoinerg]

I have the impression that at the moment nan values are converted to 0. We could instead keep the same behaviour as Heatmap where nan regions are transparent and show the background.

I agree we should probably clean things up when we're not receiving numbers and show a transparent color. This is implemented in the following https://github.com/plotly/plotly.js/compare/master...image-nan. Now the question is what to display in the hover for color? A transparent pixel should not exist in rgb or hsl so there's no way of defining it in those color models. I think not displaying anything would be better.

Anyway, as you know, I'm leaving in vacation tomorrow so feel free to take over the image-nan branch!

[emmanuelle]

The optimized rendering pathway would be great to display large images (1000x1000 and larger) in reasonable time. I'm a big fan of adding this possibility.

[antoinerg]

Commit https://github.com/plotly/plotly.js/commit/d9a17cd8cb9e2798028321f71a101a52d089030a shows an early example using image-rendering: pixelated.