From a8ae4ab476532a53ab2c20ce4659d631c8050a87 Mon Sep 17 00:00:00 2001 From: Liam Connors Date: Tue, 19 Jul 2022 13:14:16 -0400 Subject: [PATCH 01/34] Update parallel-coordinates-plot.md Add example with unselected --- doc/python/parallel-coordinates-plot.md | 41 ++++++++++++++++++++++--- 1 file changed, 37 insertions(+), 4 deletions(-) diff --git a/doc/python/parallel-coordinates-plot.md b/doc/python/parallel-coordinates-plot.md index 9a6e38a382a..5b64d9dfc7e 100644 --- a/doc/python/parallel-coordinates-plot.md +++ b/doc/python/parallel-coordinates-plot.md @@ -5,12 +5,12 @@ jupyter: text_representation: extension: .md format_name: markdown - format_version: '1.1' - jupytext_version: 1.1.1 + format_version: '1.3' + jupytext_version: 1.13.7 kernel_info: name: python2 kernelspec: - display_name: Python 3 + display_name: Python 3 (ipykernel) language: python name: python3 language_info: @@ -22,7 +22,7 @@ jupyter: name: python nbconvert_exporter: python pygments_lexer: ipython3 - version: 3.7.3 + version: 3.9.0 plotly: description: How to make parallel coordinates plots in Python with Plotly. display_as: scientific @@ -171,6 +171,39 @@ fig = go.Figure(data= fig.show() ``` +### Unselected Line Color and Opacity + + +*New in 5.10* + +The color and opacity of unselected lines can be set with `unselected`. Here, we set the color to `lightgray` and the opacity to `0.5`. + +```python +import plotly.graph_objects as go + +fig = go.Figure(data= + go.Parcoords( + line_color='blue', + dimensions = list([ + dict(range = [1,5], + constraintrange = [1,2], # change this range by dragging the pink line + label = 'A', values = [1,4]), + dict(range = [1.5,5], + tickvals = [1.5,3,4.5], + label = 'B', values = [3,1.5]), + dict(range = [1,5], + tickvals = [1,2,4,5], + label = 'C', values = [2,4], + ticktext = ['text 1', 'text 2', 'text 3', 'text 4']), + dict(range = [1,5], + label = 'D', values = [4,2]) + ]), + unselected = dict(line = dict(color = 'lightgray', opacity = 0.5)) + ) +) +fig.show() +``` + #### Reference See [function reference for `px.(parallel_coordinates)`](https://plotly.com/python-api-reference/generated/plotly.express.parallel_coordinates) or https://plotly.com/python/reference/parcoords/ for more information and chart attribute options! From 7f97ac28e1b288a42659180e25dfba3d967ff19d Mon Sep 17 00:00:00 2001 From: Liam Connors Date: Tue, 19 Jul 2022 13:38:42 -0400 Subject: [PATCH 02/34] Adding a prefix and suffix --- doc/python/indicator.md | 35 +++++++++++++++++++++++++++++++---- 1 file changed, 31 insertions(+), 4 deletions(-) diff --git a/doc/python/indicator.md b/doc/python/indicator.md index 24dce1932ec..283953ae6f1 100644 --- a/doc/python/indicator.md +++ b/doc/python/indicator.md @@ -5,10 +5,10 @@ jupyter: text_representation: extension: .md format_name: markdown - format_version: '1.1' - jupytext_version: 1.2.1 + format_version: '1.3' + jupytext_version: 1.13.7 kernelspec: - display_name: Python 3 + display_name: Python 3 (ipykernel) language: python name: python3 language_info: @@ -20,7 +20,7 @@ jupyter: name: python nbconvert_exporter: python pygments_lexer: ipython3 - version: 3.7.3 + version: 3.9.0 plotly: description: How to make gauge charts in Python with Plotly. display_as: financial @@ -61,6 +61,8 @@ In this tutorial we introduce a new trace named "Indicator". The purpose of "ind
  • (increasing|decreasing).symbol: symbol displayed on the left of the delta
  • font.(family|size): to control the font
  • position: position relative to `number` (either top, left, bottom, right)
  • +
  • suffix: a string to appear before the delta. +
  • prefix: a string to appear after the delta. Finally, we can have a simple title for the indicator via `title` with 'text' attribute which is a string, and 'align' which can be set to left, center, and right. There are two gauge types: [angular](https://plotly.com/python/gauge-charts/) and [bullet](https://plotly.com/python/bullet-charts/). Here is a combination of both shapes (angular, bullet), and different modes (gauge, delta, and value): @@ -201,6 +203,31 @@ fig.add_trace(go.Indicator( fig.show() ``` +#### Adding a Prefix and Suffix + + +On both a `number` and a `delta`, you can add a string to appear before the value using `suffix`. You can add a string to appear after the value with `prefix`. In the following example, we add '$' as a `prefix` and 'm' as `suffix` for both the `number` and `delta`. + +Note: `suffix` and `prefix` on `delta` are new in 5.10 + +```python +import plotly.graph_objects as go + +fig = go.Figure(go.Indicator( + mode = "number+delta", + value = 492, + number = {"prefix": "$", "suffix": "m"}, + delta = {"reference": 512, "valueformat": ".0f", "prefix": "$", "suffix": "m"}, + title = {"text": "Profit"}, + domain = {'y': [0, 1], 'x': [0.25, 0.75]})) + +fig.add_trace(go.Scatter( + y = [325, 324, 405, 400, 424, 404, 417, 432, 419, 394, 410, 426, 413, 419, 404, 408, 401, 377, 368, 361, 356, 359, 375, 397, 394, 418, 437, 450, 430, 442, 424, 443, 420, 418, 423, 423, 426, 440, 437, 436, 447, 460, 478, 472, 450, 456, 436, 418, 429, 412, 429, 442, 464, 447, 434, 457, 474, 480, 499, 497, 480, 502, 512, 492])) + +fig.update_layout(xaxis = {'range': [0, 62]}) +fig.show() +``` + #### Reference See https://plotly.com/python/reference/indicator/ for more information and chart attribute options! From 7ff89540a9e1c1225b06d68fbce172cccff4310a Mon Sep 17 00:00:00 2001 From: Liam Connors Date: Tue, 19 Jul 2022 15:33:51 -0400 Subject: [PATCH 03/34] Create selections.md --- doc/python/selections.md | 123 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 123 insertions(+) create mode 100644 doc/python/selections.md diff --git a/doc/python/selections.md b/doc/python/selections.md new file mode 100644 index 00000000000..05daa1b384a --- /dev/null +++ b/doc/python/selections.md @@ -0,0 +1,123 @@ +--- +jupyter: + jupytext: + notebook_metadata_filter: all + text_representation: + extension: .md + format_name: markdown + format_version: '1.3' + jupytext_version: 1.13.7 + kernelspec: + display_name: Python 3 (ipykernel) + language: python + name: python3 + language_info: + codemirror_mode: + name: ipython + version: 3 + file_extension: .py + mimetype: text/x-python + name: python + nbconvert_exporter: python + pygments_lexer: ipython3 + version: 3.9.0 + plotly: + description: How to use selections in Python. Examples of adding and styling selections. + display_as: file_settings + language: python + layout: base + name: Selections + order: 26 + permalink: python/selections/ + thumbnail: thumbnail/make_selection.png +--- + +## Adding Selections + +*New in 5.10* + +You can add persistent selections to a rendered figure using the **Box Select** and **Lasso Select** tools in the mode bar. +To add multiple selections, select **Shift** when making new selections. +To clear a selection, double-click it. You can clear all selections by double-clicking any unselected area of the figure. + + + +You can also add selections to a figure that displays when it renders using `fig.add_selection`. +Here, we add a rectangular selection that connects the points `3.0`, `6.5`, `3.5`, and `5.5`. + + +```python +import plotly.express as px + +df = px.data.iris() + +fig = px.scatter(df, x="sepal_width", y="sepal_length") +fig.add_selection(type="rect", x0=3.0, y0=6.5, x1=3.5, y1=5.5) + +fig.show() +``` + +## Styling Selections + + +In the above example, we added a selection to the figure that is displayed when the figure renders. +`fig.add_selection` accepts additional properties that you can use to style the selection. Here, we add a `color`, `width`, and specify the `dash` type for the selection. + + +```python +import plotly.express as px + +df = px.data.iris() + +fig = px.scatter(df, x="sepal_width", y="sepal_length") +fig.add_selection(type="rect", + x0=2.5, y0=6.5, x1=3.5, y1=5.5, + line=dict( + color="Crimson", + width=2, + dash="dash", + )) + +fig.show() + +``` + +## Fill Color for Active Selections + +You can style active selections with `activeselection`. In this example, we set active selections to appear with a `fillcolor` of `blue`. + +```python +import plotly.express as px + +df = px.data.iris() + +fig = px.scatter(df, x="sepal_width", y="sepal_length") +fig.add_selection(type="rect", x0=3.0, y0=6.5, x1=3.5, y1=5.5) + +fig.update_layout(dragmode='select', + activeselection=dict(fillcolor='blue')) + +fig.show() +``` + +## Styling New Selections + +You can style new selections made on the figure by setting properties on `newselection`. +Try making a new selection on the figure to try it out. + +```python +import plotly.express as px + +df = px.data.iris() + +fig = px.scatter(df, x="sepal_width", y="sepal_length") + +fig.update_layout(dragmode='select', + newselection=dict(line=dict(color='blue'))) + +fig.show() +``` + +## More on Selections + +For more on selections, see the [selections section of the `dcc.Graph` page](https://dash.plotly.com/dash-core-components/graph#selections) in the Dash docs. From cfcf5f5524631820b45072f3e043d23cceea5a10 Mon Sep 17 00:00:00 2001 From: Liam Connors Date: Tue, 19 Jul 2022 15:40:33 -0400 Subject: [PATCH 04/34] Update link --- doc/python/box-plots.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/doc/python/box-plots.md b/doc/python/box-plots.md index 342c6da47e7..80f1d29bfcc 100644 --- a/doc/python/box-plots.md +++ b/doc/python/box-plots.md @@ -5,10 +5,10 @@ jupyter: text_representation: extension: .md format_name: markdown - format_version: '1.2' - jupytext_version: 1.4.2 + format_version: '1.3' + jupytext_version: 1.13.7 kernelspec: - display_name: Python 3 + display_name: Python 3 (ipykernel) language: python name: python3 language_info: @@ -20,7 +20,7 @@ jupyter: name: python nbconvert_exporter: python pygments_lexer: ipython3 - version: 3.7.7 + version: 3.9.0 plotly: description: How to make Box Plots in Python with Plotly. display_as: statistical @@ -90,7 +90,7 @@ fig.show() ### Choosing The Algorithm For Computing Quartiles -By default, quartiles for box plots are computed using the `linear` method (for more about linear interpolation, see #10 listed on [http://www.amstat.org/publications/jse/v14n3/langford.html](http://www.amstat.org/publications/jse/v14n3/langford.html) and [https://en.wikipedia.org/wiki/Quartile](https://en.wikipedia.org/wiki/Quartile) for more details). +By default, quartiles for box plots are computed using the `linear` method (for more about linear interpolation, see #10 listed on [http://jse.amstat.org/v14n3/langford.html](http://jse.amstat.org/v14n3/langford.html) and [https://en.wikipedia.org/wiki/Quartile](https://en.wikipedia.org/wiki/Quartile) for more details). However, you can also choose to use an `exclusive` or an `inclusive` algorithm to compute quartiles. From 16880be8d2e514b7276c101bfaf8276bbd00cec2 Mon Sep 17 00:00:00 2001 From: Liam Connors Date: Tue, 19 Jul 2022 15:42:08 -0400 Subject: [PATCH 05/34] add methods to calculate quartiles --- doc/python/violin.md | 28 ++++++++++++++++++++++++---- 1 file changed, 24 insertions(+), 4 deletions(-) diff --git a/doc/python/violin.md b/doc/python/violin.md index 8e9d2a4e4a7..b6ac86f182e 100644 --- a/doc/python/violin.md +++ b/doc/python/violin.md @@ -5,10 +5,10 @@ jupyter: text_representation: extension: .md format_name: markdown - format_version: '1.2' - jupytext_version: 1.4.2 + format_version: '1.3' + jupytext_version: 1.13.7 kernelspec: - display_name: Python 3 + display_name: Python 3 (ipykernel) language: python name: python3 language_info: @@ -20,7 +20,7 @@ jupyter: name: python nbconvert_exporter: python pygments_lexer: ipython3 - version: 3.7.7 + version: 3.9.0 plotly: description: How to make violin plots in Python with Plotly. display_as: statistical @@ -274,6 +274,26 @@ fig = px.strip(df, x='day', y='tip') fig.show() ``` +### Choosing The Algorithm For Computing Quartiles + +By default, quartiles for violin plots are computed using the `linear` method (for more about linear interpolation, see #10 listed on [http://www.amstat.org/publications/jse/v14n3/langford.html](http://www.amstat.org/publications/jse/v14n3/langford.html) and [https://en.wikipedia.org/wiki/Quartile](https://en.wikipedia.org/wiki/Quartile) for more details). + +However, you can also choose to use an `exclusive` or an `inclusive` algorithm to compute quartiles. + +The _exclusive_ algorithm uses the median to divide the ordered dataset into two halves. If the sample is odd, it does not include the median in either half. Q1 is then the median of the lower half and Q3 is the median of the upper half. + +The _inclusive_ algorithm also uses the median to divide the ordered dataset into two halves, but if the sample is odd, it includes the median in both halves. Q1 is then the median of the lower half and Q3 the median of the upper half. + +```python +import plotly.express as px + +df = px.data.tips() +fig = px.violin(df, y="total_bill") +fig.update_traces(quartilemethod="exclusive") # or "inclusive", or "linear" by default + +fig.show() +``` + #### Reference See [function reference for `px.violin()`](https://plotly.com/python-api-reference/generated/plotly.express.violin) or https://plotly.com/python/reference/violin/ for more information and chart attribute options! From 540d9d903270bec83c4256957c0c0da20f70d7ed Mon Sep 17 00:00:00 2001 From: Liam Connors Date: Tue, 19 Jul 2022 15:45:18 -0400 Subject: [PATCH 06/34] Update violin.md --- doc/python/violin.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/doc/python/violin.md b/doc/python/violin.md index b6ac86f182e..87442c21413 100644 --- a/doc/python/violin.md +++ b/doc/python/violin.md @@ -276,7 +276,7 @@ fig.show() ### Choosing The Algorithm For Computing Quartiles -By default, quartiles for violin plots are computed using the `linear` method (for more about linear interpolation, see #10 listed on [http://www.amstat.org/publications/jse/v14n3/langford.html](http://www.amstat.org/publications/jse/v14n3/langford.html) and [https://en.wikipedia.org/wiki/Quartile](https://en.wikipedia.org/wiki/Quartile) for more details). +By default, quartiles for violin plots are computed using the `linear` method (for more about linear interpolation, see #10 listed on [http://jse.amstat.org/v14n3/langford.html](http://jse.amstat.org/v14n3/langford.html) and [https://en.wikipedia.org/wiki/Quartile](https://en.wikipedia.org/wiki/Quartile) for more details). However, you can also choose to use an `exclusive` or an `inclusive` algorithm to compute quartiles. From 600bf7a478062aac5236752baf81f3a3df7d8afc Mon Sep 17 00:00:00 2001 From: Liam Connors Date: Tue, 19 Jul 2022 15:51:15 -0400 Subject: [PATCH 07/34] Update setting-graph-size.md --- doc/python/setting-graph-size.md | 40 ++++++++++++++++++++++++++++---- 1 file changed, 36 insertions(+), 4 deletions(-) diff --git a/doc/python/setting-graph-size.md b/doc/python/setting-graph-size.md index 56ae8ef621d..5adefb28ace 100644 --- a/doc/python/setting-graph-size.md +++ b/doc/python/setting-graph-size.md @@ -5,10 +5,10 @@ jupyter: text_representation: extension: .md format_name: markdown - format_version: '1.2' - jupytext_version: 1.6.0 + format_version: '1.3' + jupytext_version: 1.13.7 kernelspec: - display_name: Python 3 + display_name: Python 3 (ipykernel) language: python name: python3 language_info: @@ -20,7 +20,7 @@ jupyter: name: python nbconvert_exporter: python pygments_lexer: ipython3 - version: 3.7.6 + version: 3.9.0 plotly: description: How to manipulate the graph size, margins and background color. display_as: file_settings @@ -127,6 +127,38 @@ fig.update_yaxes(automargin=True) fig.show() ``` +### Automatically Adjust Specific Margins +You can also set auto-margin for specific sides of the figure. Here, we set `automargin` on the `left` and `top` of the figure. + +```python +import plotly.graph_objects as go + + +fig = go.Figure() + +fig.add_trace(go.Bar( + x=["Apples", "Oranges", "Watermelon", "Pears"], + y=[3, 2, 1, 4] +)) + +fig.update_layout( + autosize=False, + width=500, + height=500, + yaxis=dict( + title_text="Y-axis Title", + ticktext=["Very long label", "long label", "3", "label"], + tickvals=[1, 2, 3, 4], + tickmode="array", + titlefont=dict(size=30), + ) +) + +fig.update_yaxes(automargin='left+top') + +fig.show() +``` + #### Reference See https://plotly.com/python/reference/layout/ for more information and chart attribute options! From 11347f245982586dc3f688008bed883e4ba6a25d Mon Sep 17 00:00:00 2001 From: Liam Connors Date: Tue, 19 Jul 2022 15:59:32 -0400 Subject: [PATCH 08/34] minor edits --- doc/python/selections.md | 2 +- doc/python/setting-graph-size.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/doc/python/selections.md b/doc/python/selections.md index 05daa1b384a..655483ee50a 100644 --- a/doc/python/selections.md +++ b/doc/python/selections.md @@ -29,7 +29,7 @@ jupyter: name: Selections order: 26 permalink: python/selections/ - thumbnail: thumbnail/make_selection.png + thumbnail: thumbnail/make_selection.jpg --- ## Adding Selections diff --git a/doc/python/setting-graph-size.md b/doc/python/setting-graph-size.md index 5adefb28ace..9fb71604edb 100644 --- a/doc/python/setting-graph-size.md +++ b/doc/python/setting-graph-size.md @@ -128,7 +128,7 @@ fig.show() ``` ### Automatically Adjust Specific Margins -You can also set auto-margin for specific sides of the figure. Here, we set `automargin` on the `left` and `top` of the figure. +You can also set `automargin` for specific sides of the figure. Here, we set `automargin` on the `left` and `top` of the figure. ```python import plotly.graph_objects as go From 15afc1135bfacce710751f94ef5c7b811f8f8d84 Mon Sep 17 00:00:00 2001 From: Liam Connors Date: Tue, 19 Jul 2022 19:15:18 -0400 Subject: [PATCH 09/34] Update indicator.md --- doc/python/indicator.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/doc/python/indicator.md b/doc/python/indicator.md index 283953ae6f1..d3c17d1855a 100644 --- a/doc/python/indicator.md +++ b/doc/python/indicator.md @@ -61,8 +61,8 @@ In this tutorial we introduce a new trace named "Indicator". The purpose of "ind
  • (increasing|decreasing).symbol: symbol displayed on the left of the delta
  • font.(family|size): to control the font
  • position: position relative to `number` (either top, left, bottom, right)
  • -
  • suffix: a string to appear before the delta. -
  • prefix: a string to appear after the delta. +
  • prefix: a string to appear before the delta +
  • suffix: a string to appear after the delta Finally, we can have a simple title for the indicator via `title` with 'text' attribute which is a string, and 'align' which can be set to left, center, and right. There are two gauge types: [angular](https://plotly.com/python/gauge-charts/) and [bullet](https://plotly.com/python/bullet-charts/). Here is a combination of both shapes (angular, bullet), and different modes (gauge, delta, and value): From b47c824b2ce450bd660cbedf403d8d8f31213aad Mon Sep 17 00:00:00 2001 From: Liam Connors Date: Tue, 19 Jul 2022 19:16:47 -0400 Subject: [PATCH 10/34] Update indicator.md --- doc/python/indicator.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/doc/python/indicator.md b/doc/python/indicator.md index d3c17d1855a..ad956598657 100644 --- a/doc/python/indicator.md +++ b/doc/python/indicator.md @@ -206,7 +206,7 @@ fig.show() #### Adding a Prefix and Suffix -On both a `number` and a `delta`, you can add a string to appear before the value using `suffix`. You can add a string to appear after the value with `prefix`. In the following example, we add '$' as a `prefix` and 'm' as `suffix` for both the `number` and `delta`. +On both a `number` and a `delta`, you can add a string to appear before the value using `prefix`. You can add a string to appear after the value with `suffix`. In the following example, we add '$' as a `prefix` and 'm' as `suffix` for both the `number` and `delta`. Note: `suffix` and `prefix` on `delta` are new in 5.10 From e8d9959f1a1ca73cf8d24bdac1e3e9645e9e8cb4 Mon Sep 17 00:00:00 2001 From: Liam Connors Date: Tue, 19 Jul 2022 19:23:44 -0400 Subject: [PATCH 11/34] minor edits --- doc/python/indicator.md | 2 +- doc/python/violin.md | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/doc/python/indicator.md b/doc/python/indicator.md index ad956598657..379cbbfdc5e 100644 --- a/doc/python/indicator.md +++ b/doc/python/indicator.md @@ -206,7 +206,7 @@ fig.show() #### Adding a Prefix and Suffix -On both a `number` and a `delta`, you can add a string to appear before the value using `prefix`. You can add a string to appear after the value with `suffix`. In the following example, we add '$' as a `prefix` and 'm' as `suffix` for both the `number` and `delta`. +On both a `number` and a `delta`, you can add a string to appear before the value using `prefix`. You can add a string to appear after the value using `suffix`. In the following example, we add '$' as a `prefix` and 'm' as `suffix` for both the `number` and `delta`. Note: `suffix` and `prefix` on `delta` are new in 5.10 diff --git a/doc/python/violin.md b/doc/python/violin.md index 87442c21413..0e0e86cdd1b 100644 --- a/doc/python/violin.md +++ b/doc/python/violin.md @@ -276,6 +276,8 @@ fig.show() ### Choosing The Algorithm For Computing Quartiles +*New in 5.10* + By default, quartiles for violin plots are computed using the `linear` method (for more about linear interpolation, see #10 listed on [http://jse.amstat.org/v14n3/langford.html](http://jse.amstat.org/v14n3/langford.html) and [https://en.wikipedia.org/wiki/Quartile](https://en.wikipedia.org/wiki/Quartile) for more details). However, you can also choose to use an `exclusive` or an `inclusive` algorithm to compute quartiles. From 8741c88cbb7a6edd681bdb2418df86b247358511 Mon Sep 17 00:00:00 2001 From: Liam Connors Date: Tue, 19 Jul 2022 19:28:10 -0400 Subject: [PATCH 12/34] Update setting-graph-size.md --- doc/python/setting-graph-size.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/doc/python/setting-graph-size.md b/doc/python/setting-graph-size.md index 9fb71604edb..d89e4f16f03 100644 --- a/doc/python/setting-graph-size.md +++ b/doc/python/setting-graph-size.md @@ -128,6 +128,9 @@ fig.show() ``` ### Automatically Adjust Specific Margins + +*New in 5.10* + You can also set `automargin` for specific sides of the figure. Here, we set `automargin` on the `left` and `top` of the figure. ```python From 562731407f4769417d7bdddfa4e46e66127e88f7 Mon Sep 17 00:00:00 2001 From: Liam Connors Date: Thu, 21 Jul 2022 11:51:20 -0400 Subject: [PATCH 13/34] Update doc/python/selections.md Co-authored-by: Mojtaba Samimi <33888540+archmoj@users.noreply.github.com> --- doc/python/selections.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/doc/python/selections.md b/doc/python/selections.md index 655483ee50a..9920aeb2377 100644 --- a/doc/python/selections.md +++ b/doc/python/selections.md @@ -38,7 +38,7 @@ jupyter: You can add persistent selections to a rendered figure using the **Box Select** and **Lasso Select** tools in the mode bar. To add multiple selections, select **Shift** when making new selections. -To clear a selection, double-click it. You can clear all selections by double-clicking any unselected area of the figure. +To clear a selection, double-click it. On a subplot you can clear all selections by double-clicking any unselected area of the subplot. From ae737ac40a3118824dfd7d9387edf078bdd59df8 Mon Sep 17 00:00:00 2001 From: Liam Connors Date: Thu, 21 Jul 2022 11:51:32 -0400 Subject: [PATCH 14/34] Update doc/python/selections.md Co-authored-by: Mojtaba Samimi <33888540+archmoj@users.noreply.github.com> --- doc/python/selections.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/doc/python/selections.md b/doc/python/selections.md index 9920aeb2377..b3bbb9011de 100644 --- a/doc/python/selections.md +++ b/doc/python/selections.md @@ -43,7 +43,7 @@ To clear a selection, double-click it. On a subplot you can clear all selections You can also add selections to a figure that displays when it renders using `fig.add_selection`. -Here, we add a rectangular selection that connects the points `3.0`, `6.5`, `3.5`, and `5.5`. +Here, we add a rectangular selection with a region between `3.0` and `6.5` on the x axis and between `3.5` and `5.5` on the y axis. ```python From b5fa2844b0c7c9aa3ef55d36d302d1b0ad6582cf Mon Sep 17 00:00:00 2001 From: Liam Connors Date: Thu, 21 Jul 2022 11:53:36 -0400 Subject: [PATCH 15/34] Update parallel-coordinates-plot.md --- doc/python/parallel-coordinates-plot.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/doc/python/parallel-coordinates-plot.md b/doc/python/parallel-coordinates-plot.md index 5b64d9dfc7e..f4a8e4e19aa 100644 --- a/doc/python/parallel-coordinates-plot.md +++ b/doc/python/parallel-coordinates-plot.md @@ -198,7 +198,7 @@ fig = go.Figure(data= dict(range = [1,5], label = 'D', values = [4,2]) ]), - unselected = dict(line = dict(color = 'lightgray', opacity = 0.5)) + unselected = dict(line = dict(color = 'green', opacity = 0.5)) ) ) fig.show() From c5bf5dfc014ac58bfa39c14038075d9947d28261 Mon Sep 17 00:00:00 2001 From: Liam Connors Date: Thu, 21 Jul 2022 11:55:34 -0400 Subject: [PATCH 16/34] Update parallel-coordinates-plot.md --- doc/python/parallel-coordinates-plot.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/doc/python/parallel-coordinates-plot.md b/doc/python/parallel-coordinates-plot.md index f4a8e4e19aa..ee0c58bd999 100644 --- a/doc/python/parallel-coordinates-plot.md +++ b/doc/python/parallel-coordinates-plot.md @@ -176,7 +176,7 @@ fig.show() *New in 5.10* -The color and opacity of unselected lines can be set with `unselected`. Here, we set the color to `lightgray` and the opacity to `0.5`. +The color and opacity of unselected lines can be set with `unselected`. By setting `opacity=0`, you can hide the unselected lines. Here, we set the color to `lightgray` and the opacity to `0.5`. ```python import plotly.graph_objects as go From 36824080fbb1f6338e4b88147f5143532b2ffb35 Mon Sep 17 00:00:00 2001 From: Liam Connors Date: Thu, 21 Jul 2022 12:02:33 -0400 Subject: [PATCH 17/34] Update selections.md --- doc/python/selections.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/doc/python/selections.md b/doc/python/selections.md index b3bbb9011de..381b1af7ec1 100644 --- a/doc/python/selections.md +++ b/doc/python/selections.md @@ -84,7 +84,7 @@ fig.show() ## Fill Color for Active Selections -You can style active selections with `activeselection`. In this example, we set active selections to appear with a `fillcolor` of `blue`. +You can style the active selection with `activeselection`. A selection is active when it is selected or created. In this example, we set active selections to appear with a `fillcolor` of `yellow`. ```python import plotly.express as px @@ -95,7 +95,7 @@ fig = px.scatter(df, x="sepal_width", y="sepal_length") fig.add_selection(type="rect", x0=3.0, y0=6.5, x1=3.5, y1=5.5) fig.update_layout(dragmode='select', - activeselection=dict(fillcolor='blue')) + activeselection=dict(fillcolor='yellow')) fig.show() ``` From e955334d2806d3ee764e0a0a55ca6f56fd9bc973 Mon Sep 17 00:00:00 2001 From: Liam Connors Date: Thu, 21 Jul 2022 14:24:50 -0400 Subject: [PATCH 18/34] Update selections.md --- doc/python/selections.md | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/doc/python/selections.md b/doc/python/selections.md index 381b1af7ec1..69b0d776b6b 100644 --- a/doc/python/selections.md +++ b/doc/python/selections.md @@ -57,6 +57,22 @@ fig.add_selection(type="rect", x0=3.0, y0=6.5, x1=3.5, y1=5.5) fig.show() ``` +## Selections using Path + + +In the above example, we added a rectangular selection (`type="rect"`). You can also render a custom SVG for a selection by setting `type="path"` and defining a `path`. Here, we create a selection with the path "M2,6.5L4,7.5L4,6Z" + +```python +import plotly.express as px + +df = px.data.iris() + +fig = px.scatter(df, x="sepal_width", y="sepal_length") +fig.add_selection(type="path", path="M2,6.5L4,7.5L4,6Z") + +fig.show() +``` + ## Styling Selections @@ -84,7 +100,7 @@ fig.show() ## Fill Color for Active Selections -You can style the active selection with `activeselection`. A selection is active when it is selected or created. In this example, we set active selections to appear with a `fillcolor` of `yellow`. +You can style the active selection with `activeselection`. In this example, we set active selections (when created or clicked) to appear with a `fillcolor` of `yellow`. ```python import plotly.express as px From 186dec43e17c98ad1b7ec2f95b37d3fcd6b36453 Mon Sep 17 00:00:00 2001 From: Liam Connors Date: Thu, 21 Jul 2022 16:08:43 -0400 Subject: [PATCH 19/34] Update doc/python/selections.md Co-authored-by: Mojtaba Samimi <33888540+archmoj@users.noreply.github.com> --- doc/python/selections.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/doc/python/selections.md b/doc/python/selections.md index 69b0d776b6b..a3ed7a64e5d 100644 --- a/doc/python/selections.md +++ b/doc/python/selections.md @@ -60,7 +60,9 @@ fig.show() ## Selections using Path -In the above example, we added a rectangular selection (`type="rect"`). You can also render a custom SVG for a selection by setting `type="path"` and defining a `path`. Here, we create a selection with the path "M2,6.5L4,7.5L4,6Z" +In the above example, we added a rectangular selection (`type="rect"`). You can also render a custom SVG for a selection by defining a `path` that can include single or multiple polygons. Here, we create a selection with a single polygon path "M2,6.5L4,7.5L4,6Z". + +Please note that multiple polygons e.g. "M0,0L0,10L10,10,L10,0Z M2,2L2,8L8,8,L8,2Z" could be used to subtract certain regions from the selection. ```python import plotly.express as px From 6d1a2dab752cb19184869b7e42008d09825bc923 Mon Sep 17 00:00:00 2001 From: Liam Connors Date: Thu, 21 Jul 2022 16:14:50 -0400 Subject: [PATCH 20/34] Update selections.md --- doc/python/selections.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/doc/python/selections.md b/doc/python/selections.md index a3ed7a64e5d..0e484a9a1a5 100644 --- a/doc/python/selections.md +++ b/doc/python/selections.md @@ -52,15 +52,15 @@ import plotly.express as px df = px.data.iris() fig = px.scatter(df, x="sepal_width", y="sepal_length") -fig.add_selection(type="rect", x0=3.0, y0=6.5, x1=3.5, y1=5.5) +fig.add_selection(x0=3.0, y0=6.5, x1=3.5, y1=5.5) fig.show() ``` -## Selections using Path +## Selections Using a Custom SVG -In the above example, we added a rectangular selection (`type="rect"`). You can also render a custom SVG for a selection by defining a `path` that can include single or multiple polygons. Here, we create a selection with a single polygon path "M2,6.5L4,7.5L4,6Z". +In the above example, we added a rectangular selection. You can also render a custom SVG for a selection by defining a `path` that can include single or multiple polygons. Here, we create a selection with a single polygon path "M2,6.5L4,7.5L4,6Z". Please note that multiple polygons e.g. "M0,0L0,10L10,10,L10,0Z M2,2L2,8L8,8,L8,2Z" could be used to subtract certain regions from the selection. @@ -70,7 +70,7 @@ import plotly.express as px df = px.data.iris() fig = px.scatter(df, x="sepal_width", y="sepal_length") -fig.add_selection(type="path", path="M2,6.5L4,7.5L4,6Z") +fig.add_selection(path="M2,6.5L4,7.5L4,6Z") fig.show() ``` @@ -88,7 +88,7 @@ import plotly.express as px df = px.data.iris() fig = px.scatter(df, x="sepal_width", y="sepal_length") -fig.add_selection(type="rect", +fig.add_selection( x0=2.5, y0=6.5, x1=3.5, y1=5.5, line=dict( color="Crimson", @@ -110,7 +110,7 @@ import plotly.express as px df = px.data.iris() fig = px.scatter(df, x="sepal_width", y="sepal_length") -fig.add_selection(type="rect", x0=3.0, y0=6.5, x1=3.5, y1=5.5) +fig.add_selection(x0=3.0, y0=6.5, x1=3.5, y1=5.5) fig.update_layout(dragmode='select', activeselection=dict(fillcolor='yellow')) From e2eb238af62cf99ba6d1dcc234808009a7b766c9 Mon Sep 17 00:00:00 2001 From: Liam Connors Date: Thu, 21 Jul 2022 16:24:19 -0400 Subject: [PATCH 21/34] add time series example --- doc/python/selections.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/doc/python/selections.md b/doc/python/selections.md index 0e484a9a1a5..c82ec62e7db 100644 --- a/doc/python/selections.md +++ b/doc/python/selections.md @@ -136,6 +136,20 @@ fig.update_layout(dragmode='select', fig.show() ``` +## Selections with Time Series + +Selections are also supported on time series figures. Here, we add a rectangular selection with a region between the dates `2019-01-01"` and `"2019-10-01"` on the x axis and between `1` and `1.15` on the y axis. + + +```python +import plotly.express as px + +df = px.data.stocks() +fig = px.line(df, x='date', y="GOOG") +fig.add_selection(x0="2019-01-01", y0=1, x1="2019-10-01", y1=1.17) +fig.show() +``` + ## More on Selections For more on selections, see the [selections section of the `dcc.Graph` page](https://dash.plotly.com/dash-core-components/graph#selections) in the Dash docs. From cb07e200719b07519366e9180fe9af80b09e213b Mon Sep 17 00:00:00 2001 From: Liam Connors Date: Thu, 21 Jul 2022 16:52:01 -0400 Subject: [PATCH 22/34] Update selections.md --- doc/python/selections.md | 112 ++++++++++++++++++++++++++++++++++++++- 1 file changed, 110 insertions(+), 2 deletions(-) diff --git a/doc/python/selections.md b/doc/python/selections.md index c82ec62e7db..b9dc4610a81 100644 --- a/doc/python/selections.md +++ b/doc/python/selections.md @@ -138,7 +138,7 @@ fig.show() ## Selections with Time Series -Selections are also supported on time series figures. Here, we add a rectangular selection with a region between the dates `2019-01-01"` and `"2019-10-01"` on the x axis and between `1` and `1.15` on the y axis. +Selections are also supported on time series figures. Here, we add a rectangular selection with a region between the dates `2019-01-01"` and `"2019-10-01"` on the x axis and between `0.95` and `1.17` on the y axis. ```python @@ -146,7 +146,115 @@ import plotly.express as px df = px.data.stocks() fig = px.line(df, x='date', y="GOOG") -fig.add_selection(x0="2019-01-01", y0=1, x1="2019-10-01", y1=1.17) +fig.add_selection(x0="2019-01-01", y0=0.95, x1="2019-10-01", y1=1.17) +fig.show() +``` + +## Selections on Subplots + + +You can add selections to subplots by specifying axis ids using `xaxis` and `yaxis`. Here, we add one selection on the plot with axis ids `x` and `y2` and two selections to the the plot with axis ids `x` and `y`. + +```python +import plotly.graph_objects as go + +import numpy as np + +t = np.linspace(-1, 1.2, 2000) +x = (t**3) + (0.3 * np.random.randn(2000)) +y = (t**6) + (0.3 * np.random.randn(2000)) + +fig = go.Figure() +fig.add_trace(go.Histogram2dContour( + x = x, + y = y, + colorscale = 'Blues', + reversescale = True, + xaxis = 'x', + yaxis = 'y' + )) +fig.add_trace(go.Scatter( + x = x, + y = y, + xaxis = 'x', + yaxis = 'y', + mode = 'markers', + marker = dict( + color = 'rgba(0,0,0,0.3)', + size = 3 + ) + )) +fig.add_trace(go.Histogram( + y = y, + xaxis = 'x2', + marker = dict( + color = 'rgba(0,0,0,1)' + ) + )) +fig.add_trace(go.Histogram( + x = x, + yaxis = 'y2', + marker = dict( + color = 'rgba(0,0,0,1)' + ) + )) + +fig.update_layout( + autosize = False, + xaxis = dict( + zeroline = False, + domain = [0,0.85], + showgrid = False + ), + yaxis = dict( + zeroline = False, + domain = [0,0.85], + showgrid = False + ), + xaxis2 = dict( + zeroline = False, + domain = [0.85,1], + showgrid = False + ), + yaxis2 = dict( + zeroline = False, + domain = [0.85,1], + showgrid = False + ), + height = 600, + width = 600, + bargap = 0, + hovermode = 'closest', + showlegend = False, + selections = [{ + "x0": 0.5, + "x1": -0.5, + "xref": "x", + "y0": 190, + "y1": 0, + "yref": "y2", + "line":dict(color="yellow") + }, { + "x0": -0.2, + "x1": -1.5, + "xref": "x", + "y0": 2, + "y1": -1, + "yref": "y", + "line":dict( + color="yellow" + ) + }, { + "path": "M0.75,2.39L0.98,3.38L1.46,3.68L1.80,3.35L2.01,2.51L1.67,1.15L1.18,0.50L0.65,0.66L0.54,0.83L0.49,1.56Z", + "xref": "x", + "yref": "y", + "line":dict( + color="yellow" + ) + }] +) + + fig.show() ``` From 0e536e918ea99e9733fe8a43141cab7115dd8aff Mon Sep 17 00:00:00 2001 From: Liam Connors Date: Thu, 21 Jul 2022 16:52:46 -0400 Subject: [PATCH 23/34] Update selections.md --- doc/python/selections.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/doc/python/selections.md b/doc/python/selections.md index b9dc4610a81..1087f91c2ab 100644 --- a/doc/python/selections.md +++ b/doc/python/selections.md @@ -138,7 +138,7 @@ fig.show() ## Selections with Time Series -Selections are also supported on time series figures. Here, we add a rectangular selection with a region between the dates `2019-01-01"` and `"2019-10-01"` on the x axis and between `0.95` and `1.17` on the y axis. +Selections are also supported on time series figures. Here, we add a rectangular selection with a region between the dates `2019-01-01"` and `"2019-10-01"` on the x axis and between `0.95` and `1.15` on the y axis. ```python @@ -146,7 +146,7 @@ import plotly.express as px df = px.data.stocks() fig = px.line(df, x='date', y="GOOG") -fig.add_selection(x0="2019-01-01", y0=0.95, x1="2019-10-01", y1=1.17) +fig.add_selection(x0="2019-01-01", y0=0.95, x1="2019-10-01", y1=1.15) fig.show() ``` From fbc1668a3a537be8b72def37aed7559e0d63c167 Mon Sep 17 00:00:00 2001 From: Liam Connors Date: Thu, 21 Jul 2022 17:58:45 -0400 Subject: [PATCH 24/34] Update selections.md --- doc/python/selections.md | 60 ++++++++++++++++++++++------------------ 1 file changed, 33 insertions(+), 27 deletions(-) diff --git a/doc/python/selections.md b/doc/python/selections.md index 1087f91c2ab..7cafd3b064a 100644 --- a/doc/python/selections.md +++ b/doc/python/selections.md @@ -225,33 +225,39 @@ fig.update_layout( width = 600, bargap = 0, hovermode = 'closest', - showlegend = False, - selections = [{ - "x0": 0.5, - "x1": -0.5, - "xref": "x", - "y0": 190, - "y1": 0, - "yref": "y2", - "line":dict(color="yellow") - }, { - "x0": -0.2, - "x1": -1.5, - "xref": "x", - "y0": 2, - "y1": -1, - "yref": "y", - "line":dict( - color="yellow" - ) - }, { - "path": "M0.75,2.39L0.98,3.38L1.46,3.68L1.80,3.35L2.01,2.51L1.67,1.15L1.18,0.50L0.65,0.66L0.54,0.83L0.49,1.56Z", - "xref": "x", - "yref": "y", - "line":dict( - color="yellow" - ) - }] + showlegend = False, + selections = [ + dict( + x0 = 0.5, + x1 = -0.5, + xref = "x", + y0 = 190, + y1= 0, + yref = "y2", + line = dict( + color="yellow" + ) + ), + dict( + x0 = -0.2, + x1 = -1.5, + xref = "x", + y0 = 2, + y1= -1, + yref = "y", + line = dict( + color="yellow" + ) + ), + dict( + path= "M0.75,2.39L0.98,3.38L1.46,3.68L1.80,3.35L2.01,2.51L1.67,1.15L1.18,0.50L0.65,0.66L0.54,0.83L0.49,1.56Z", + xref= 'x', + yref = 'y', + line = dict( + color='yellow' + ) + ) + ] ) From a8c564960eb1747c9e2aa96e4efed87a08a48b25 Mon Sep 17 00:00:00 2001 From: Liam Connors Date: Fri, 22 Jul 2022 12:47:53 -0400 Subject: [PATCH 25/34] Update doc/python/selections.md Co-authored-by: Mojtaba Samimi <33888540+archmoj@users.noreply.github.com> --- doc/python/selections.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/doc/python/selections.md b/doc/python/selections.md index 7cafd3b064a..7f6dc50bc05 100644 --- a/doc/python/selections.md +++ b/doc/python/selections.md @@ -150,7 +150,7 @@ fig.add_selection(x0="2019-01-01", y0=0.95, x1="2019-10-01", y1=1.15) fig.show() ``` -## Selections on Subplots +## Referencing Selections on Multiple Cartesian Subplots You can add selections to subplots by specifying axis ids using `xaxis` and `yaxis`. Here, we add one selection on the plot with axis ids `x` and `y2` and two selections to the the plot with axis ids `x` and `y`. From 263a9b8ff1d73a98ea07bcd603c4c1033bc2fe00 Mon Sep 17 00:00:00 2001 From: Liam Connors Date: Fri, 22 Jul 2022 12:57:07 -0400 Subject: [PATCH 26/34] add random seed --- doc/python/selections.md | 1 + 1 file changed, 1 insertion(+) diff --git a/doc/python/selections.md b/doc/python/selections.md index 7f6dc50bc05..b8e90cd5417 100644 --- a/doc/python/selections.md +++ b/doc/python/selections.md @@ -160,6 +160,7 @@ import plotly.graph_objects as go import numpy as np +np.random.seed(0) t = np.linspace(-1, 1.2, 2000) x = (t**3) + (0.3 * np.random.randn(2000)) y = (t**6) + (0.3 * np.random.randn(2000)) From 9e66af47072f34104ee7efaefdb359bd2eeba003 Mon Sep 17 00:00:00 2001 From: Liam Connors Date: Fri, 22 Jul 2022 12:58:39 -0400 Subject: [PATCH 27/34] Update doc/python/selections.md Co-authored-by: Mojtaba Samimi <33888540+archmoj@users.noreply.github.com> --- doc/python/selections.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/doc/python/selections.md b/doc/python/selections.md index b8e90cd5417..1a36878b85b 100644 --- a/doc/python/selections.md +++ b/doc/python/selections.md @@ -32,7 +32,7 @@ jupyter: thumbnail: thumbnail/make_selection.jpg --- -## Adding Selections +## Adding Selections to Cartesian subplots *New in 5.10* From 222b3b20510864168b06231917efd488c8a15241 Mon Sep 17 00:00:00 2001 From: Liam Connors Date: Fri, 22 Jul 2022 12:58:58 -0400 Subject: [PATCH 28/34] Update selections.md --- doc/python/selections.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/doc/python/selections.md b/doc/python/selections.md index 1a36878b85b..12040622d10 100644 --- a/doc/python/selections.md +++ b/doc/python/selections.md @@ -32,7 +32,7 @@ jupyter: thumbnail: thumbnail/make_selection.jpg --- -## Adding Selections to Cartesian subplots +## Adding Selections to Cartesian Subplots *New in 5.10* From b705619a0b900ce046678974f8cdbfd7297df434 Mon Sep 17 00:00:00 2001 From: Liam Connors Date: Fri, 22 Jul 2022 13:00:23 -0400 Subject: [PATCH 29/34] Update doc/python/selections.md Co-authored-by: Mojtaba Samimi <33888540+archmoj@users.noreply.github.com> --- doc/python/selections.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/doc/python/selections.md b/doc/python/selections.md index 12040622d10..cb692df9d5d 100644 --- a/doc/python/selections.md +++ b/doc/python/selections.md @@ -153,7 +153,7 @@ fig.show() ## Referencing Selections on Multiple Cartesian Subplots -You can add selections to subplots by specifying axis ids using `xaxis` and `yaxis`. Here, we add one selection on the plot with axis ids `x` and `y2` and two selections to the the plot with axis ids `x` and `y`. +You can add selections to multiple Cartesian subplots by specifying `xref` and/or `yref`. Here, we add one selection on the plot with axis ids `x` and `y2` and two selections to the the plot with axis ids `x` and `y`. ```python import plotly.graph_objects as go From 1d753ed8ce0aa8706aea02c4b18817550fa9f940 Mon Sep 17 00:00:00 2001 From: Liam Connors Date: Fri, 22 Jul 2022 15:10:44 -0400 Subject: [PATCH 30/34] Update selections.md --- doc/python/selections.md | 45 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 45 insertions(+) diff --git a/doc/python/selections.md b/doc/python/selections.md index cb692df9d5d..78a748cbc1c 100644 --- a/doc/python/selections.md +++ b/doc/python/selections.md @@ -150,6 +150,51 @@ fig.add_selection(x0="2019-01-01", y0=0.95, x1="2019-10-01", y1=1.15) fig.show() ``` +## Referencing Selections on a Scatterplot Matrix + + +You can add selections to a scatteplot matrix by specifying `xref` and/or `yref`. Here, we add one selection on the plot with axis ids `x2` and `y2` and another on the plot with ids `x3` and `y`. + +```python +import plotly.express as px + +df = px.data.iris() + +fig = px.scatter_matrix(df, + dimensions=["sepal_length", "sepal_width", "petal_length", "petal_width"], + color="species") + +fig.update_layout( + xaxis = {"matches": "y"}, + xaxis2 = {"matches": "y2"}, + xaxis3 = {"matches": "y3"}, + xaxis4 = {"matches": "y4"}, + height = 900, + width = 750, + dragmode = 'select', + selections = [ + dict( + x0 = 3, + x1 = 4, + xref = "x2", + y0 = 8, + y1= 6, + yref = "y" + ), + dict( + x0 = 5, + x1 = 1, + xref = "x3", + y0 = 5, + y1= 4, + yref = "y", + ) + ] +) + +fig.show() +``` + ## Referencing Selections on Multiple Cartesian Subplots From fa2f3f4a51d70ed51dbd8cc14e389a391bf0aa25 Mon Sep 17 00:00:00 2001 From: Liam Connors Date: Fri, 22 Jul 2022 15:12:07 -0400 Subject: [PATCH 31/34] Update selections.md --- doc/python/selections.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/doc/python/selections.md b/doc/python/selections.md index 78a748cbc1c..ba5aa578e0c 100644 --- a/doc/python/selections.md +++ b/doc/python/selections.md @@ -153,7 +153,7 @@ fig.show() ## Referencing Selections on a Scatterplot Matrix -You can add selections to a scatteplot matrix by specifying `xref` and/or `yref`. Here, we add one selection on the plot with axis ids `x2` and `y2` and another on the plot with ids `x3` and `y`. +You can add selections to a scatterplot matrix by specifying `xref` and/or `yref`. Here, we add one selection on the plot with axis ids `x2` and `y2` and another on the plot with ids `x3` and `y`. ```python import plotly.express as px From c67480277eac4a02b532938a18ea616a7ed3d53d Mon Sep 17 00:00:00 2001 From: Liam Connors Date: Fri, 22 Jul 2022 15:46:59 -0400 Subject: [PATCH 32/34] Update selections.md --- doc/python/selections.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/doc/python/selections.md b/doc/python/selections.md index ba5aa578e0c..66c218ec2e7 100644 --- a/doc/python/selections.md +++ b/doc/python/selections.md @@ -100,9 +100,10 @@ fig.show() ``` -## Fill Color for Active Selections +## Styling New Selections -You can style the active selection with `activeselection`. In this example, we set active selections (when created or clicked) to appear with a `fillcolor` of `yellow`. +You can style new selections made on the figure by setting properties on `newselection`. +Try making a new selection on the figure to try it out. ```python import plotly.express as px @@ -110,18 +111,16 @@ import plotly.express as px df = px.data.iris() fig = px.scatter(df, x="sepal_width", y="sepal_length") -fig.add_selection(x0=3.0, y0=6.5, x1=3.5, y1=5.5) fig.update_layout(dragmode='select', - activeselection=dict(fillcolor='yellow')) + newselection=dict(line=dict(color='blue'))) fig.show() ``` -## Styling New Selections +## Fill Color for Active Selections -You can style new selections made on the figure by setting properties on `newselection`. -Try making a new selection on the figure to try it out. +You can style the active selection with `activeselection`. In this example, we set active selections (when created or clicked) to appear with a `fillcolor` of `yellow`. ```python import plotly.express as px @@ -129,9 +128,10 @@ import plotly.express as px df = px.data.iris() fig = px.scatter(df, x="sepal_width", y="sepal_length") +fig.add_selection(x0=3.0, y0=6.5, x1=3.5, y1=5.5) fig.update_layout(dragmode='select', - newselection=dict(line=dict(color='blue'))) + activeselection=dict(fillcolor='yellow')) fig.show() ``` From 51e599e7fbe8dc3037fb797b503606806848979b Mon Sep 17 00:00:00 2001 From: Liam Connors Date: Fri, 22 Jul 2022 15:48:12 -0400 Subject: [PATCH 33/34] Update selections.md --- doc/python/selections.md | 90 ++++++++++++++++++++-------------------- 1 file changed, 45 insertions(+), 45 deletions(-) diff --git a/doc/python/selections.md b/doc/python/selections.md index 66c218ec2e7..b6bb1a55553 100644 --- a/doc/python/selections.md +++ b/doc/python/selections.md @@ -150,51 +150,6 @@ fig.add_selection(x0="2019-01-01", y0=0.95, x1="2019-10-01", y1=1.15) fig.show() ``` -## Referencing Selections on a Scatterplot Matrix - - -You can add selections to a scatterplot matrix by specifying `xref` and/or `yref`. Here, we add one selection on the plot with axis ids `x2` and `y2` and another on the plot with ids `x3` and `y`. - -```python -import plotly.express as px - -df = px.data.iris() - -fig = px.scatter_matrix(df, - dimensions=["sepal_length", "sepal_width", "petal_length", "petal_width"], - color="species") - -fig.update_layout( - xaxis = {"matches": "y"}, - xaxis2 = {"matches": "y2"}, - xaxis3 = {"matches": "y3"}, - xaxis4 = {"matches": "y4"}, - height = 900, - width = 750, - dragmode = 'select', - selections = [ - dict( - x0 = 3, - x1 = 4, - xref = "x2", - y0 = 8, - y1= 6, - yref = "y" - ), - dict( - x0 = 5, - x1 = 1, - xref = "x3", - y0 = 5, - y1= 4, - yref = "y", - ) - ] -) - -fig.show() -``` - ## Referencing Selections on Multiple Cartesian Subplots @@ -307,6 +262,51 @@ fig.update_layout( ) +fig.show() +``` + +## Referencing Selections on a Scatterplot Matrix + + +You can add selections to a scatterplot matrix by specifying `xref` and/or `yref`. Here, we add one selection on the plot with axis ids `x2` and `y2` and another on the plot with ids `x3` and `y`. + +```python +import plotly.express as px + +df = px.data.iris() + +fig = px.scatter_matrix(df, + dimensions=["sepal_length", "sepal_width", "petal_length", "petal_width"], + color="species") + +fig.update_layout( + xaxis = {"matches": "y"}, + xaxis2 = {"matches": "y2"}, + xaxis3 = {"matches": "y3"}, + xaxis4 = {"matches": "y4"}, + height = 900, + width = 750, + dragmode = 'select', + selections = [ + dict( + x0 = 3, + x1 = 4, + xref = "x2", + y0 = 8, + y1= 6, + yref = "y" + ), + dict( + x0 = 5, + x1 = 1, + xref = "x3", + y0 = 5, + y1= 4, + yref = "y", + ) + ] +) + fig.show() ``` From 9417bcbefd8408f10ae2d03a1cb389be86e9895e Mon Sep 17 00:00:00 2001 From: Liam Connors Date: Tue, 26 Jul 2022 12:07:55 -0400 Subject: [PATCH 34/34] Update doc/python/selections.md --- doc/python/selections.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/doc/python/selections.md b/doc/python/selections.md index b6bb1a55553..de61ed4490e 100644 --- a/doc/python/selections.md +++ b/doc/python/selections.md @@ -27,7 +27,7 @@ jupyter: language: python layout: base name: Selections - order: 26 + order: 38 permalink: python/selections/ thumbnail: thumbnail/make_selection.jpg ---