How to display Plotly sliders in output with google collaboratory?

Question

I want to recreate this plotly plot with sliders: https://plot.ly/python/sliders/. Using these instructions for colab: Plotly notebook mode with google colaboratory. However the sliders aren't appearing.

Here is the code:

import numpy as np 
import plotly.graph_objs as go
from plotly.offline import download_plotlyjs, init_notebook_mode, iplot

#from  https://stackoverflow.com/questions/47230817/plotly-notebook-mode-with-google-colaboratory
def configure_plotly_browser_state():
  import IPython
  display(IPython.core.display.HTML('''
        <script src="/static/components/requirejs/require.js"></script>
        <script>
          requirejs.config({
            paths: {
              base: '/static/base',
              plotly: 'https://cdn.plot.ly/plotly-1.5.1.min.js?noext',
            },
          });
        </script>
        '''))


init_notebook_mode(connected=True)

#from plotly sliders
data = [dict(
        visible = False,
        line=dict(color='#00CED1', width=6),
        name = ' = '+str(step),
        x = np.arange(0,10,0.01),
        y = np.sin(step*np.arange(0,10,0.01))) for step in np.arange(0,5,0.1)]
data[10]['visible'] = True


#configure added to visualize in colab
configure_plotly_browser_state()

steps = []
for i in range(len(data)):
    step = dict(
        method = 'restyle',  
        args = ['visible', [False] * len(data)],
    )
    step['args'][1][i] = True # Toggle i'th trace to "visible"
    steps.append(step)

sliders = [dict(
    active = 10,
    currentvalue = {"prefix": "Frequency: "},
    pad = {"t": 50},
    steps = steps
)]

layout = dict(sliders=sliders)

fig = dict(data=data, layout=layout)

#removed py. from original plotly code 
iplot(fig, filename='Sine Wave Slider')

The code runs and it generates the plot. However it does not include the slider bar. How do I include it ? Here is the expected output: Here is the output plot wihotut the slider.

score 2 · Accepted Answer · answered Jun 14 '19 at 02:54

Error lies in the mismatch of the version. The Slider feature was not available in the version 1.5.1

You need to change this particular line of code:

 paths: {
          base: '/static/base',
          plotly: 'https://cdn.plot.ly/plotly-latest.min.js?noext', 
        },

In order to have latest version of plotly available inside the window. You can see the working demo here

How to display Plotly sliders in output with google collaboratory?

1 Answers1