From 68198be7a14682dba34f307f3dc44d96126aad8f Mon Sep 17 00:00:00 2001 From: akaalena Date: Mon, 1 May 2023 21:58:42 +0200 Subject: [PATCH 1/4] sliders --- doc/python/sliders.md | 185 +++++++++++++++++++++++++++++++++++++++++- 1 file changed, 181 insertions(+), 4 deletions(-) diff --git a/doc/python/sliders.md b/doc/python/sliders.md index 2ebe84f040..33be4831ab 100644 --- a/doc/python/sliders.md +++ b/doc/python/sliders.md @@ -5,10 +5,10 @@ jupyter: text_representation: extension: .md format_name: markdown - format_version: '1.1' - jupytext_version: 1.1.7 + format_version: '1.3' + jupytext_version: 1.14.5 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.2 + version: 3.8.16 plotly: description: How to add slider controls to your plots in Python with Plotly. display_as: controls @@ -89,6 +89,183 @@ The method determines which [plotly.js function](https://plot.ly/javascript/plot - `"animate"`: start or pause an animation +#### Update Method +The `"update"` method should be used when modifying the data and layout sections of the graph. +This example demonstrates how to update the data displayed while simultaneously updating layout attributes such as the annotations. + +```python +import plotly.graph_objects as go +import numpy as np + +# Create figure +fig = go.Figure() + +min_val = 0 +max_val = 0 + +# Add traces, one for each slider step +start = -1 +for step in np.arange(start, 5, 0.1): + x_vec=np.arange(0, 10, 0.01) #np.arange(start, 1, 0.1) + y_vec=np.cos(step * np.arange(0, 10, 0.01)) + fig.add_trace( + go.Scatter( + visible=False, + line=dict(color="#00CED1", width=4), + name="𝜈 = " + str(step), + x=x_vec, + y=y_vec)) + if step == start: + min_val = np.min(y_vec) + max_val = np.max(y_vec) + else: + tmp_min = np.min(y_vec) + tmp_max = np.max(y_vec) + min_val = min(min_val, tmp_min) + max_val = max(max_val, tmp_max) + +# Make 10th trace visible +fig.data[10].visible = True + +# Add Annotations +annotation_info = [dict(x=1, + y=0, + xref="paper", yref="paper", + text="Min value:
%.4f" % min_val, + ax=0, ay=40, + showarrow=False, + xanchor="left", yanchor="bottom"), + dict(x=1, + y=1, + xref="paper", yref="paper", + text="Max value:
%.4f" % max_val, + ax=0, ay=-40, + showarrow=False, + xanchor="left", yanchor="top") + ] +# Create and add slider +steps = [] +for i in range(len(fig.data)): + step = dict( + method="update", + label=str(i), + args=[{"visible": [False] * len(fig.data)}, + {"title": "Slider switched to step: " + str(i), # layout attribute + "annotations": annotation_info}], # layout attribute + ) + step["args"][0]["visible"][i] = True # Toggle i'th trace to "visible" + steps.append(step) + +sliders = [dict( + active=10, + currentvalue={"prefix": "Slider value: "}, + pad={"t": 30}, + steps=steps +)] + +fig.update_layout( + sliders=sliders +) + +fig.show() +``` + +#### Relayout Method +The `"relayout"` method should be used when modifying layout attributes. +This example demonstrates how to update which groups are in clusters. + +```python +import plotly.graph_objects as go +import numpy as np + +# Create figure +fig = go.Figure() + +x0 = np.random.normal(2, 0.2, 400) +y0 = np.random.normal(2, 0.3, 400) +x1 = np.random.normal(3, 0.1, 600) +y1 = np.random.normal(6, 0.3, 400) +x2 = np.random.normal(4, 0.4, 200) +y2 = np.random.normal(4, 0.5, 200) + +# Add traces +fig.add_trace( + go.Scatter( + x=x0, + y=y0, + mode="markers", + marker=dict(color="DarkOrange") + ) +) + +fig.add_trace( + go.Scatter( + x=x1, + y=y1, + mode="markers", + marker=dict(color="Crimson") + ) +) + +fig.add_trace( + go.Scatter( + x=x2, + y=y2, + mode="markers", + marker=dict(color="RebeccaPurple") + ) +) + +fig.add_shape(type="circle", + xref="x", yref="y", + x0=min(x0), y0=min(y0), + x1=max(x2), y1=max(y1), + line_color="RebeccaPurple",) + +initial_cluster = [dict(type="circle", + xref="x", yref="y", + x0=min(x0), y0=min(y0), + x1=max(x0), y1=max(y0), + line=dict(color="DarkOrange"))] +cluster2 = [dict(type="circle", + xref="x", yref="y", + x0=min(x0), y0=min(y0), + x1=max(x1), y1=max(y1), + line=dict(color="Crimson"))] +cluster3 = [dict(type="circle", + xref="x", yref="y", + x0=min(x0), y0=min(y0), + x1=max(x2), y1=max(y1), + line=dict(color="RebeccaPurple"))] + +clusters = [initial_cluster, cluster2, cluster3] + +# Create and add slider +steps = [] +for i in range(len(fig.data)): + step = dict( + method="relayout", + label=str(i+1), + args=["shapes", clusters[i]], + ) + steps.append(step) + +sliders = [dict( + active=3, + currentvalue={"prefix": "Groups in cluster: "}, + pad={"t": 50}, + steps=steps +)] + +fig.update_layout( + title_text="Groups", + showlegend=False, + sliders=sliders +) + +fig.show() +``` + ### Sliders in Plotly Express Plotly Express provide sliders, but with implicit animation using the `"animate"` method described above. The animation play button can be omitted by removing `updatemenus` in the `layout`: From ca572274d818316b5a4d2bf6490dbf28e4c85278 Mon Sep 17 00:00:00 2001 From: akaalena Date: Tue, 2 May 2023 22:56:11 +0200 Subject: [PATCH 2/4] sliders demo - an example with companies --- doc/python/sliders.md | 42 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) diff --git a/doc/python/sliders.md b/doc/python/sliders.md index 33be4831ab..d5a8c4da05 100644 --- a/doc/python/sliders.md +++ b/doc/python/sliders.md @@ -170,6 +170,48 @@ fig.update_layout( fig.show() ``` +Another example. + +```python +import plotly.graph_objects as go +import numpy as np + +companies = ['Company A','Company B','Company C','Company D','Company E','Company F','Company G','Company H'] +outcomes = [7.8, 12.3, 20.4, 8.9, -5.7, -16.3, 10.2, -1.5] + +# Create figure +fig = go.Figure() + +# Add trace +fig.add_trace(go.Bar( + x=companies, + y=outcomes, + marker=dict(color = "green") +)) + +min_outcome = int(min(outcomes)) +max_outcome = int(max(outcomes)) + +value = 0 +#args = [{'y':[y for y in outcomes if y>value], +# 'x':[x for x in companies for y in outcomes if y>value]}] +steps = [dict(method="update", + args=[{'x':[[c for c, o in zip(companies,outcomes) if o>k]]}, + {'y':[[[y for y in outcomes if y>k]]]}], + label=f"{k}") for k in range(min_outcome, max_outcome)] + +sliders = [dict( + active=0, + currentvalue={"prefix": "Current value: "}, + steps=steps +)] + +fig.update_layout(title="Companies and outcomes", + sliders=sliders) + +fig.show() +``` + #### Relayout Method The `"relayout"` method should be used when modifying layout attributes. This example demonstrates how to update which groups are in clusters. From 7c2d40445b73276c810220899842b2cf51a9c37f Mon Sep 17 00:00:00 2001 From: akaalena Date: Wed, 3 May 2023 12:05:04 +0200 Subject: [PATCH 3/4] sliders demo - new examples --- doc/python/sliders.md | 41 +++++++++++++++-------------------------- 1 file changed, 15 insertions(+), 26 deletions(-) diff --git a/doc/python/sliders.md b/doc/python/sliders.md index d5a8c4da05..b4d5a41665 100644 --- a/doc/python/sliders.md +++ b/doc/python/sliders.md @@ -170,11 +170,12 @@ fig.update_layout( fig.show() ``` -Another example. +This example demonstrates how sliders can be employed to data filtering. Here we show companies, represented with bars, when values of the outcome variable are above the threshold. The change in trace attributes is associated with the change in layout attribute. The title is updated when the value of the threshold is more than zero. ```python import plotly.graph_objects as go import numpy as np +import math companies = ['Company A','Company B','Company C','Company D','Company E','Company F','Company G','Company H'] outcomes = [7.8, 12.3, 20.4, 8.9, -5.7, -16.3, 10.2, -1.5] @@ -189,24 +190,23 @@ fig.add_trace(go.Bar( marker=dict(color = "green") )) -min_outcome = int(min(outcomes)) -max_outcome = int(max(outcomes)) +min_outcome = math.ceil(min(outcomes)) +max_outcome = math.ceil(max(outcomes)) -value = 0 -#args = [{'y':[y for y in outcomes if y>value], -# 'x':[x for x in companies for y in outcomes if y>value]}] +titles = ["Companies and outcomes", "Companies with positive outcomes"] steps = [dict(method="update", - args=[{'x':[[c for c, o in zip(companies,outcomes) if o>k]]}, - {'y':[[[y for y in outcomes if y>k]]]}], + args=[{'x': [[c for c, o in zip(companies,outcomes) if o>k]], #trace attributes that are updated by each slider step + 'y': [[y for y in outcomes if y>k]]}, #trace attributes that are updated by each slider step + {'title': titles[1] if k>0 else titles[0]}], #layout attributes that are updated label=f"{k}") for k in range(min_outcome, max_outcome)] sliders = [dict( active=0, - currentvalue={"prefix": "Current value: "}, + currentvalue={"prefix": "threshold: "}, steps=steps )] -fig.update_layout(title="Companies and outcomes", +fig.update_layout(title=titles[0], sliders=sliders) fig.show() @@ -258,12 +258,6 @@ fig.add_trace( ) ) -fig.add_shape(type="circle", - xref="x", yref="y", - x0=min(x0), y0=min(y0), - x1=max(x2), y1=max(y1), - line_color="RebeccaPurple",) - initial_cluster = [dict(type="circle", xref="x", yref="y", x0=min(x0), y0=min(y0), @@ -280,20 +274,15 @@ cluster3 = [dict(type="circle", x1=max(x2), y1=max(y1), line=dict(color="RebeccaPurple"))] -clusters = [initial_cluster, cluster2, cluster3] +clusters = [[], initial_cluster, cluster2, cluster3] # Create and add slider -steps = [] -for i in range(len(fig.data)): - step = dict( - method="relayout", - label=str(i+1), - args=["shapes", clusters[i]], - ) - steps.append(step) +steps = [dict(method="relayout", + args=["shapes", clusters[k]], + label=f"{k}") for k in range(len(clusters))] sliders = [dict( - active=3, + active=0, currentvalue={"prefix": "Groups in cluster: "}, pad={"t": 50}, steps=steps From 22bbdc18443c921cedfaadd845c0a5365af5c9c8 Mon Sep 17 00:00:00 2001 From: akaalena Date: Thu, 4 May 2023 12:36:11 +0200 Subject: [PATCH 4/4] minor changes --- doc/python/sliders.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/doc/python/sliders.md b/doc/python/sliders.md index b4d5a41665..75cef7a8f4 100644 --- a/doc/python/sliders.md +++ b/doc/python/sliders.md @@ -207,6 +207,7 @@ sliders = [dict( )] fig.update_layout(title=titles[0], + yaxis_title="outcome [mil.]", sliders=sliders) fig.show() @@ -278,7 +279,7 @@ clusters = [[], initial_cluster, cluster2, cluster3] # Create and add slider steps = [dict(method="relayout", - args=["shapes", clusters[k]], + args=["shapes", clusters[k]], label=f"{k}") for k in range(len(clusters))] sliders = [dict(