Add facet_col and animation_frame argument to imshow #2746

emmanuelle · 2020-09-03T12:39:18Z

Work in progress in order to represent a 3d images as a series of facetted slices or as an animation

To do:
[x] Support xarrays and dimensions given by name instead of number
[x] Add some checks (what happens if facet_col is passed but the array is 2d etc) for various corner cases
[x] Add animation_frame argument following the same logic
[x] Write doc
[x] Make it possible to have at the same time animate_frame and facet_col so that it's possible to visualize 4d datasets.
[ ] If possible, address in parallel plotly/plotly.js#3539 so that it's possible to have square pixels in subplots. Otherwise probably I'll just unmatch axes.

The PR should be rebased once #2691 is merged, for now it was branched off #2691's branch.

emmanuelle · 2020-09-07T21:18:07Z

@nicolaskruchten I think the PR is now ready for a first review.

mkcor

I'm excited for these additions!

packages/python/plotly/plotly/express/_imshow.py

doc/python/imshow.md

mkcor · 2020-09-08T08:36:13Z

packages/python/plotly/plotly/express/_imshow.py

@@ -186,6 +189,14 @@ def imshow(
        their lengths must match the lengths of the second and first dimensions of the
        img argument. They are auto-populated if the input is an xarray.

+    facet_col: int, optional (default None)
+        axis number along which the image array is slices to create a facetted plot.


Suggested change

axis number along which the image array is slices to create a facetted plot.

axis along which the image array is sliced to create a facetted plot.

I'm not entirely positive about my suggestion to remove 'number' in 'axis number'... From https://numpy.org/doc/stable/glossary.html, it looks like conventional terminology would be just 'axis' (as in 'axis 0' and 'axis 1'); I was tempted by 'axis index' but this would be confusing with dataframes (as in, 'index' vs 'columns'). Maybe 'axis number' is conventional terminology after all?

axis is fine indeed. It could also be "axis position" (as in the docstring of np.moveaxis). We can also ask other opinions, what do you think about the terminology @nicolaskruchten ?

Co-authored-by: Marianne Corvellec <marianne.corvellec@ens-lyon.org>

emmanuelle · 2020-09-08T21:29:49Z

Thanks for the useful comments @mkcor!

…into imshow-animation

emmanuelle · 2020-09-17T11:56:26Z

With the last batch of commits, it is now possible to use at the same time animation_frame and facet_col.

luiztauffer · 2020-10-15T13:29:09Z

This looks great! I was banging my head to get something like this working with the current animate.
Will this integrate with the current animate for other graphic types? For example, will we be capable of simultaneously animating a subplot with a Scatter and a second subplot with an Imshow?

I am building a dashboard like this, want to show the relationship between variables of different types, a line time series and an Image time series:

The user interaction works very well, and I can create animation of the left-side bar to automatically loop through the interval. Would be excellent if I could have the right side graphic updating at the same time

emmanuelle · 2020-11-18T12:23:27Z

I've merged master with the recent image-related additions, there were a few conflicts for fix but all is good now!

emmanuelle · 2020-11-18T12:23:55Z

doc/python/imshow.md

+
+### Animations of xarray datasets
+
+*Introduced in plotly 4.11*


Suggested change

*Introduced in plotly 4.11*

*Introduced in plotly 4.13*

mkcor

Approving up to the changes I suggested, because I can't wait to see this land in Plotly! ❤️

doc/python/imshow.md

mkcor · 2020-11-19T11:22:12Z

doc/python/imshow.md

+
+### Combining animations and facets
+
+It is possible to view 4-dimensional datasets (for example, 3-D images evolving with time) using a combination of `animation_frame` and `facet_col`.


Suggested change

It is possible to view 4-dimensional datasets (for example, 3-D images evolving with time) using a combination of `animation_frame` and `facet_col`.

It is possible to view four-dimensional datasets (for example, 3-D images evolving with time) using a combination of `animation_frame` and `facet_col`.

(because above text reads 'three-dimensional')

mkcor · 2020-11-19T11:23:45Z

packages/python/plotly/plotly/express/_imshow.py

@@ -113,6 +117,19 @@ def imshow(
        their lengths must match the lengths of the second and first dimensions of the
        img argument. They are auto-populated if the input is an xarray.

+    animation_frame: int or str, optional (default None)
+        axis number along which the image array is sliced to create an animation plot.
+        If `img` is an xarray, `animation_frame` can be the name of one the dimensions.


Suggested change

If `img` is an xarray, `animation_frame` can be the name of one the dimensions.

If `img` is an xarray, `animation_frame` can be the name of one of the dimensions.

mkcor · 2020-11-19T11:24:06Z

packages/python/plotly/plotly/express/_imshow.py

+
+    facet_col: int or str, optional (default None)
+        axis number along which the image array is sliced to create a facetted plot.
+        If `img` is an xarray, `facet_col` can be the name of one the dimensions.


Suggested change

If `img` is an xarray, `facet_col` can be the name of one the dimensions.

If `img` is an xarray, `facet_col` can be the name of one of the dimensions.

nicolaskruchten · 2020-11-19T14:47:16Z

This PR will land, I promise! We just need plotly/plotly.js#5287 to be merged and released... In principle it'll be next week :)

packages/python/plotly/plotly/express/_imshow.py

nicolaskruchten · 2020-11-23T20:20:40Z

packages/python/plotly/plotly/express/_imshow.py

@@ -408,9 +499,18 @@ def imshow(
    else:
        raise ValueError(
            "px.imshow only accepts 2D single-channel, RGB or RGBA images. "
-            "An image of shape %s was provided" % str(img.shape)
+            "An image of shape %s was provided."
+            "Alternatively, 3-D single or multichannel datasets can be"


3- or 4-D ?

nicolaskruchten · 2020-11-23T20:24:09Z

packages/python/plotly/plotly/express/_imshow.py

+    # Now build figure
+    col_labels = []
+    if facet_col is not None:
+        slice_label = "slice" if labels.get("facet") is None else labels["facet"]


the PX default behaviour here is to have the label be called facet_col and have it be overrideable via labels["facet_col"] OR to have it be the value of facet_col (i.e. "day of week") and have it be overrideable via labels["day of week"]

OR to have it be the value of facet_col (i.e. "day of week") and have it be overrideable via labels["day of week"]

we can maybe leave this out for now/do it later... px.imshow already doesn't do this for x/y/color and it mostly only applies in the case of xarray.

yes exactly here we don't have column names, and the case of xarrays is handled correctly I think. So I can leave it like this?

packages/python/plotly/plotly/express/_imshow.py

nicolaskruchten · 2020-11-23T20:32:47Z

packages/python/plotly/plotly/express/_imshow.py

+            )
+    if animation_frame:
+        fig.frames = frame_list
+    fig.update_layout(layout)


it's a bit odd to have layout and layout_patch here... it was odd before I guess but might be worth looking at merging them together earlier?

packages/python/plotly/plotly/express/_imshow.py

emmanuelle · 2020-11-24T16:58:40Z

Thanks for the review!

nicolaskruchten · 2020-11-24T17:16:05Z

There are still a few labels["facet"] and labels["animation"] that need to be converted to labels["facet_col"] and labels["animation_frame"] I think, and another "slice" string :)

doc/python/imshow.md

packages/python/plotly/plotly/express/_imshow.py

nicolaskruchten · 2020-12-03T02:25:24Z

OK, now that master is on Plotly.js 1.58.0 let's merge this thing!

nicolaskruchten · 2020-12-03T02:27:46Z

I added a changelog entry directly on master

emmanuelle added 2 commits September 3, 2020 11:12

use init_figure from main px core

afb5c4d

WIP: add facet_col arg to imshow

8be8ca0

emmanuelle mentioned this pull request Sep 3, 2020

Add (interactive) slice explorer in plotly. scikit-image/scikit-image#4953

Merged

emmanuelle added 10 commits September 4, 2020 23:38

animations work for grayscale images, with or without binary string

d236bc2

animations now work + tests

c8e852e

docs on facets and animations + add subplots titles

12cec34

Merge branch 'master' into imshow-animation

ab427ae

solved old unnoticed conflict

7a3a9f4

attempt to use imshow with binary strings and xarrays

b689a2f

added test

fbb3f65

animation work for xarrays, still need to fix slider label

882810f

added test with xarray and animations

ba65990

added doc

cf644e5

emmanuelle requested a review from nicolaskruchten September 7, 2020 15:18

emmanuelle changed the title ~~[WIP] Add facet_col argument to imshow~~ Add facet_col and animation_frame argument to imshow Sep 7, 2020

added pooch to doc requirements

72674b7

mkcor reviewed Sep 8, 2020

View reviewed changes

emmanuelle and others added 2 commits September 8, 2020 23:24

Update packages/python/plotly/plotly/express/_imshow.py

bd42385

Co-authored-by: Marianne Corvellec <marianne.corvellec@ens-lyon.org>

Update doc/python/imshow.md

fc2375b

Co-authored-by: Marianne Corvellec <marianne.corvellec@ens-lyon.org>

emmanuelle added 7 commits September 9, 2020 22:48

remove commented-out code

a431fad

animation + facet kinda working now, but it broke labels

b652039

added test

59c6622

simplified code

c7285a3

simplified code

91c066e

polished code and added doc example

ac5aa1f

Merge branch 'imshow-animation' of https://github.com/plotly/plotly.py …

36b9f98

…into imshow-animation

nicolaskruchten mentioned this pull request Oct 6, 2020

Implement scaleanchor domain constraints on matching axes plotly/plotly.js#3539

Closed

nicolaskruchten mentioned this pull request Oct 8, 2020

The Image downloaded using the "download as png" button is distorted plotly/plotly.js#5202

Closed

mkcor mentioned this pull request Oct 9, 2020

Fix typo in imshow docs. #2820

Merged

emmanuelle added 2 commits November 17, 2020 14:45

updated doc

8cdc6af

Merge branch 'master' into imshow-animation

cf1c2b9

emmanuelle commented Nov 18, 2020

View reviewed changes

mkcor approved these changes Nov 19, 2020

View reviewed changes

nicolaskruchten reviewed Nov 23, 2020

View reviewed changes

packages/python/plotly/plotly/express/_imshow.py Show resolved Hide resolved

nicolaskruchten reviewed Nov 23, 2020

View reviewed changes

packages/python/plotly/plotly/express/_imshow.py Outdated Show resolved Hide resolved

nicolaskruchten reviewed Nov 23, 2020

View reviewed changes

packages/python/plotly/plotly/express/_imshow.py Outdated Show resolved Hide resolved

emmanuelle added 3 commits November 24, 2020 17:30

add facet_col_spacing and facet_row_spacing

5d1d8d8

modify error message + animation_frame label

c27f88a

improve code readibility

502fdfd

added example with sequence of images

135b01b

emmanuelle commented Nov 24, 2020

View reviewed changes

doc/python/imshow.md Show resolved Hide resolved

emmanuelle added 2 commits November 24, 2020 22:14

typoe

6ac3e36

label names

a5a2252

nicolaskruchten reviewed Nov 27, 2020

View reviewed changes

packages/python/plotly/plotly/express/_imshow.py Outdated Show resolved Hide resolved

label name

77cb5cd

nicolaskruchten merged commit 56d912f into master Dec 3, 2020

archmoj deleted the imshow-animation branch November 23, 2021 23:34

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add facet_col and animation_frame argument to imshow #2746

Add facet_col and animation_frame argument to imshow #2746

emmanuelle commented Sep 3, 2020 •

edited

emmanuelle commented Sep 7, 2020

mkcor left a comment

mkcor Sep 8, 2020

emmanuelle Sep 8, 2020

emmanuelle commented Sep 8, 2020

emmanuelle commented Sep 17, 2020

luiztauffer commented Oct 15, 2020 •

edited

emmanuelle commented Nov 18, 2020

emmanuelle Nov 18, 2020

mkcor left a comment

mkcor Nov 19, 2020

mkcor Nov 19, 2020

mkcor Nov 19, 2020

nicolaskruchten commented Nov 19, 2020

nicolaskruchten Nov 23, 2020

emmanuelle Nov 24, 2020

nicolaskruchten Nov 23, 2020

nicolaskruchten Nov 23, 2020

emmanuelle Nov 24, 2020

nicolaskruchten Nov 23, 2020

emmanuelle commented Nov 24, 2020

nicolaskruchten commented Nov 24, 2020

nicolaskruchten commented Dec 3, 2020

nicolaskruchten commented Dec 3, 2020

	axis number along which the image array is slices to create a facetted plot.
	axis along which the image array is sliced to create a facetted plot.


		### Animations of xarray datasets

		Introduced in plotly 4.11


		### Combining animations and facets

		It is possible to view 4-dimensional datasets (for example, 3-D images evolving with time) using a combination of `animation_frame` and `facet_col`.

	It is possible to view 4-dimensional datasets (for example, 3-D images evolving with time) using a combination of `animation_frame` and `facet_col`.
	It is possible to view four-dimensional datasets (for example, 3-D images evolving with time) using a combination of `animation_frame` and `facet_col`.

	If `img` is an xarray, `animation_frame` can be the name of one the dimensions.
	If `img` is an xarray, `animation_frame` can be the name of one of the dimensions.

	If `img` is an xarray, `facet_col` can be the name of one the dimensions.
	If `img` is an xarray, `facet_col` can be the name of one of the dimensions.

Add facet_col and animation_frame argument to imshow #2746

Add facet_col and animation_frame argument to imshow #2746

Conversation

emmanuelle commented Sep 3, 2020 • edited

emmanuelle commented Sep 7, 2020

mkcor left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

emmanuelle commented Sep 8, 2020

emmanuelle commented Sep 17, 2020

luiztauffer commented Oct 15, 2020 • edited

emmanuelle commented Nov 18, 2020

Choose a reason for hiding this comment

mkcor left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nicolaskruchten commented Nov 19, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

emmanuelle commented Nov 24, 2020

nicolaskruchten commented Nov 24, 2020

nicolaskruchten commented Dec 3, 2020

nicolaskruchten commented Dec 3, 2020

emmanuelle commented Sep 3, 2020 •

edited

luiztauffer commented Oct 15, 2020 •

edited