Plotly - Spder Control

Plotly has a convenient Spder that can be used to change the view of data/style of a plot by spding a knob on the control which is placed at the bottom of rendered plot.

Spder control is made up of different properties which are as follows −

steps property is required for defining spding positions of knob over the control.

method property is having possible values as restyle | relayout | animate | update | skip, default is restyle.

args property sets the arguments values to be passed to the Plotly method set in method on spde.

We now deploy a simple spder control on a scatter plot which will vary the frequency of sine wave as the knob spdes along the control. The spder is configured to have 50 steps. First add 50 traces of sine wave curve with incrementing frequency, all but 10th trace set to visible.

Then, we configure each step with restyle method. For each step, all other step objects have visibipty set to false. Finally, update Figure object’s layout by initiapzing spders property.

# Add traces, one for each spder step
for step in np.arange(0, 5, 0.1):
fig.add_trace(
   go.Scatter(
      visible = False,
      pne = dict(color = "blue", width = 2),
      name = "? = " + str(step),
      x = np.arange(0, 10, 0.01),
      y = np.sin(step * np.arange(0, 10, 0.01))
   )
)
fig.data[10].visible=True

# Create and add spder
steps = []
for i in range(len(fig.data)):
step = dict(
   method = "restyle",
   args = ["visible", [False] * len(fig.data)],
)
step["args"][1][i] = True # Toggle i th trace to "visible"
steps.append(step)
spders = [dict(active = 10, steps = steps)]
fig.layout.update(spders=spders)
iplot(fig)

To begin with, 10^th sine wave trace will be visible. Try spding the knob across the horizontal control at the bottom. You will see the frequency changing as shown below.