8000 new tutorial on displaying image data by emmanuelle · Pull Request #163 · plotly/plotly.py-docs · GitHub
[go: up one dir, main page]
Skip to content

new tutorial on displaying image data #163

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your 8000 account

Merged
merged 12 commits into from
Nov 12, 2019
Merged

new tutorial on displaying image data #163

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
cfac436
new tutorial on displaying image data
emmanuelle Nov 1, 2019
2056d13
minor changes
emmanuelle Nov 5, 2019
10d64b9
minor changes
emmanuelle Nov 6, 2019
4654c06
updated how to disable ticks
emmanuelle Nov 6, 2019
f97dfc4
zmax update
emmanuelle Nov 7, 2019
4f3bc89
new tutorial on displaying image data
emmanuelle Nov 1, 2019
67c1830
minor changes
emmanuelle Nov 5, 2019
cc59b3c
minor changes
emmanuelle Nov 6, 2019
9d01e29
updated how to disable ticks
emmanuelle Nov 6, 2019
4e93741
zmax update
emmanuelle Nov 7, 2019
7696258
Merge branch 'image' of https://github.com/plotly/plotly.py-docs into…
emmanuelle Nov 12, 2019
bd06f3b
fix color_continuous_scale
emmanuelle Nov 12, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
minor changes
  • Loading branch information
@emmanuelle @nicolaskruchten
emmanuelle authored and nicolaskruchten committed Nov 12, 2019
commit 67c18302626f3fe2b9c2e59493d53153be6f26e8
42 changes: 18 additions & 24 deletions python/images.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ jupyter:

#### Add a Background Image

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/).
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).

```python
import plotly.graph_objects as go
Expand All @@ -48,8 +48,7 @@ fig.add_trace(
)

# Add images
fig.update_layout(
images=[
fig.add_layout_image(
go.layout.Image(
source="https://images.plot.ly/language-icons/api-home/python-logo.png",
xref="x",
Expand All @@ -61,7 +60,6 @@ fig.update_layout(
sizing="stretch",
opacity=0.5,
layer="below")
]
)

# Set templates
Expand Down Expand Up @@ -114,14 +112,14 @@ fig.add_trace(
)

# Add image
fig.update_layout(
images=[dict(
fig.add_layout_image(
dict(
source="https://raw.githubusercontent.com/cldougl/plot_images/add_r_img/vox.png",
xref="paper", yref="paper",
x=1, y=1.05,
sizex=0.2, sizey=0.2,
xanchor="right", yanchor="bottom"
)],
)
)

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

# Add images
fig.update_layout(
images=[go.layout.Image(
fig.add_layout_image(
go.layout.Image(
source="https://raw.githubusercontent.com/michaelbabyn/plot_data/master/benzene.png",
xref="paper",
yref="paper",
x=0.75,
y=0.65,
sizex=0.3,
sizey=0.3,
xanchor="right",
yanchor="bottom"
), go.layout.Image(
))
fig.add_layout_image(go.layout.Image(
source="https://raw.githubusercontent.com/michaelbabyn/plot_data/master/naphthalene.png",
xref="paper",
yref="paper",
x=0.9,
y=0.3,
)
)
fig.update_layout_images(dict(
xref="paper",
yref="paper",
sizex=0.3,
sizey=0.3,
xanchor="right",
yanchor="bottom"
)
]
)
))

# Add annotations
fig.update_layout(
Expand Down Expand Up @@ -279,8 +273,8 @@ fig.update_yaxes(
)

# Add image
fig.update_layout(
images=[go.layout.Image(
fig.add_layout_image(
go.layout.Image(
x=0,
sizex=img_width * scale_factor,
y=img_height * scale_factor,
Expand All @@ -290,7 +284,7 @@ fig.update_layout(
opacity=1.0,
layer="below",
sizing="stretch",
source="https://raw.githubusercontent.com/michaelbabyn/plot_data/master/bridge.jpg")]
source="https://raw.githubusercontent.com/michaelbabyn/plot_data/master/bridge.jpg")
)

# Configure other layout
Expand Down
11 changes: 7 additions & 4 deletions python/imshow.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,10 @@ jupyter:
v4upgrade: true
---

This tutorial shows how to display and explore image data. If you would like
instead a logo or static image, use `go.layout.Image` as explained
[here](/python/images).

### Displaying RBG image data with px.imshow

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

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

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

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

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

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

```python
import plotly.express as px
Expand All @@ -97,9 +100,9 @@ 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`](https://plot.ly/python/heatmaps/).
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).

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/).
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).

```python
import plotly.graph_objects as go
Expand Down
0