Skip to content

Commit 67c1830

Browse files
emmanuellenicolaskruchten
authored andcommitted
minor changes
1 parent 4f3bc89 commit 67c1830

File tree

2 files changed

+25
-28
lines changed

2 files changed

+25
-28
lines changed

python/images.md

Lines changed: 18 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ jupyter:
3434

3535
#### Add a Background Image
3636

37-
In this page we explain how to add static, non-interactive images as background, logo or annotation images to a figure. For exploring image data in interactive charts, see the [tutorial on displaying image data](./imshow/).
37+
In this page we explain how to add static, non-interactive images as background, logo or annotation images to a figure. For exploring image data in interactive charts, see the [tutorial on displaying image data](/python/imshow).
3838

3939
```python
4040
import plotly.graph_objects as go
@@ -48,8 +48,7 @@ fig.add_trace(
4848
)
4949

5050
# Add images
51-
fig.update_layout(
52-
images=[
51+
fig.add_layout_image(
5352
go.layout.Image(
5453
source="https://images.plot.ly/language-icons/api-home/python-logo.png",
5554
xref="x",
@@ -61,7 +60,6 @@ fig.update_layout(
6160
sizing="stretch",
6261
opacity=0.5,
6362
layer="below")
64-
]
6563
)
6664

6765
# Set templates
@@ -114,14 +112,14 @@ fig.add_trace(
114112
)
115113

116114
# Add image
117-
fig.update_layout(
118-
images=[dict(
115+
fig.add_layout_image(
116+
dict(
119117
source="https://raw.githubusercontent.com/cldougl/plot_images/add_r_img/vox.png",
120118
xref="paper", yref="paper",
121119
x=1, y=1.05,
122120
sizex=0.2, sizey=0.2,
123121
xanchor="right", yanchor="bottom"
124-
)],
122+
)
125123
)
126124

127125
# update layout properties
@@ -173,30 +171,26 @@ for (x, y), n in zip(simulated_absorptions, names):
173171
fig.add_trace(go.Scatter(x=x, y=y, name=n))
174172

175173
# Add images
176-
fig.update_layout(
177-
images=[go.layout.Image(
174+
fig.add_layout_image(
175+
go.layout.Image(
178176
source="https://raw.githubusercontent.com/michaelbabyn/plot_data/master/benzene.png",
179-
xref="paper",
180-
yref="paper",
181177
x=0.75,
182178
y=0.65,
183-
sizex=0.3,
184-
sizey=0.3,
185-
xanchor="right",
186-
yanchor="bottom"
187-
), go.layout.Image(
179+
))
180+
fig.add_layout_image(go.layout.Image(
188181
source="https://raw.githubusercontent.com/michaelbabyn/plot_data/master/naphthalene.png",
189-
xref="paper",
190-
yref="paper",
191182
x=0.9,
192183
y=0.3,
184+
)
185+
)
186+
fig.update_layout_images(dict(
187+
xref="paper",
188+
yref="paper",
193189
sizex=0.3,
194190
sizey=0.3,
195191
xanchor="right",
196192
yanchor="bottom"
197-
)
198-
]
199-
)
193+
))
200194

201195
# Add annotations
202196
fig.update_layout(
@@ -279,8 +273,8 @@ fig.update_yaxes(
279273
)
280274

281275
# Add image
282-
fig.update_layout(
283-
images=[go.layout.Image(
276+
fig.add_layout_image(
277+
go.layout.Image(
284278
x=0,
285279
sizex=img_width * scale_factor,
286280
y=img_height * scale_factor,
@@ -290,7 +284,7 @@ fig.update_layout(
290284
opacity=1.0,
291285
layer="below",
292286
sizing="stretch",
293-
source="https://raw.githubusercontent.com/michaelbabyn/plot_data/master/bridge.jpg")]
287+
source="https://raw.githubusercontent.com/michaelbabyn/plot_data/master/bridge.jpg")
294288
)
295289

296290
# Configure other layout

python/imshow.md

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,10 @@ jupyter:
3737
v4upgrade: true
3838
---
3939

40+
This tutorial shows how to display and explore image data. If you would like
41+
instead a logo or static image, use `go.layout.Image` as explained
42+
[here](/python/images).
43+
4044
### Displaying RBG image data with px.imshow
4145

4246
`px.imshow` displays multichannel (RGB) or single-channel ("grayscale") image data.
@@ -73,7 +77,7 @@ fig.show()
7377

7478
### Display single-channel 2D image as grayscale
7579

76-
For a 2D image, `px.imshows` uses a colorscale to map scalar data to colors. The default colorscale is `gray`, ie grayscale images.
80+
For a 2D image, `px.imshow` uses a colorscale to map scalar data to colors. The default colorscale is `gray`, ie grayscale images.
7781

7882
```python
7983
import plotly.express as px
@@ -85,7 +89,6 @@ fig.show()
8589

8690
### Choose the colorscale to display a single-channel image
8791

88-
For a 2D image, `px.imshows` uses a colorscale to map scalar data to colors. The default colorscale is `gray`, ie grayscale images.
8992

9093
```python
9194
import plotly.express as px
@@ -97,9 +100,9 @@ fig.show()
97100

98101
### Display multichannel image data with go.Image
99102

100-
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`](https://plot.ly/python/heatmaps/).
103+
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).
101104

102-
Note that the `go.Image` trace is different from the `go.layout.Image` class, which can be used for [adding background images or logos to figures](./images/).
105+
Note that the `go.Image` trace is different from the `go.layout.Image` class, which can be used for [adding background images or logos to figures](/python/images).
103106

104107
```python
105108
import plotly.graph_objects as go

0 commit comments

Comments
 (0)