imshow tutorial: add xarray example

Author: emmanuelle

doc/python/imshow.md

@@ -110,6 +110,32 @@ fig.update_layout(coloraxis_showscale=False)
 fig.show()
 ```
 
+### Display an xarray image with px.imshow
+
+[xarrays](http://xarray.pydata.org/en/stable/) are labeled arrays (with labeled axes and coordinates). If you pass an xarray image to `px.imshow`, its axes labels and coordinates will be used for ticks. (If you don't want this behavior, just pass `img.values` which is a NumPy array if `img` is an xarray).
+
+```python
+import plotly.express as px
+import xarray as xr
+# Load xarray from dataset included in the xarray tutorial
+# We remove 273.5 to display Celsius degrees instead of Kelvin degrees
+airtemps = xr.tutorial.open_dataset('air_temperature').air.isel(lon=20) - 273.5
+fig = px.imshow(airtemps.T, color_continuous_scale='RdBu_r', origin='lower')
+fig.show()
+```
+
+### Display an xarray image with square pixels
+
+For xarrays, by default `px.imshow` does not constrain pixels to be square, since axes often correspond to different physical quantities (e.g. time and space), contrary to a plain camera image where pixels are square (most of the time). If you want to impose square pixels, set the parameter `aspect` to "equal" as below.
+
+```python
+import plotly.express as px
+import xarray as xr
+airtemps = xr.tutorial.open_dataset('air_temperature').air.isel(time=500) - 273.5
+fig = px.imshow(airtemps, color_continuous_scale='RdBu_r', aspect='equal')
+fig.show()
+```
+
 ### Display multichannel image data with go.Image
 
 It is also possible to use the `go.Image` trace from the low-level `graph_objects` API in order to display image data. Note that `go.Image` only accepts multichannel images. For single images, use [`go.Heatmap`](/python/heatmaps).