Plotly animated slider in Python

Question

I was trying to recreate this example in a Jupyter notebook.

https://plot.ly/python/gapminder-example/

but was getting this error:

PlotlyDictKeyError: 'slider' is not allowed in 'layout'

Path To Error: ['layout']['slider']

Valid attributes for 'layout' at path ['layout'] under parents ['figure']:

    ['angularaxis', 'annotations', 'autosize', 'bargap', 'bargroupgap',
    'barmode', 'barnorm', 'boxgap', 'boxgroupgap', 'boxmode', 'calendar',
    'direction', 'dragmode', 'font', 'geo', 'height', 'hiddenlabels',
    'hiddenlabelssrc', 'hidesources', 'hoverlabel', 'hovermode', 'images',
    'legend', 'mapbox', 'margin', 'orientation', 'paper_bgcolor',
    'plot_bgcolor', 'radialaxis', 'scene', 'separators', 'shapes',
    'showlegend', 'sliders', 'smith', 'ternary', 'title', 'titlefont',
    'updatemenus', 'width', 'xaxis', 'yaxis']

Run `<layout-object>.help('attribute')` on any of the above.
'<layout-object>' is the object at ['layout']

The animation runs without the slider dict added to layout and the slider is visible and operational, but does not change the graph. When I move the slider it produces the following error in the console:

Uncaught (in promise) undefined

either when I try to create the figure with go.Figure() or when I try to plot the json figure constructed without go.Figure() when I run offline.ilpot(<figure>) — Caleb Everett
– Caleb Everett, Commented Jul 25, 2017 at 19:55

Naren Murali · Accepted Answer · 2017-09-21 18:36:00Z

8

+50

Update:

I checked the graph you have, I am observing the below error sometimes.

Uncaught (in promise) undefined

This error might by due to plotly missing an click or other event, but this is internally within the plotly.js file, if you go to Plotly Slider animation link and to the slider animation section, click play and click on the slider while play is running we get this error, even when I click on pause I get this error. But the animation keeps on playing if I press the play again, hence there is no major impact! It's just that an event is not handled properly.

So as in the case of the graph you provided, I can get the animation working fine, eventhough I get the error (Uncaught (in promise) undefined) I am still able to play the animation!

You can use either iplot(fig, validate=False) or plot(fig) to show the graphs in Python with the animation!

Answer:

The error is because the layout object has a property called sliders not slider, so wherever you are using slider under layout, please change this, also this plot is very complicated and may have other errors also, please share the code, for debugging. But for now this will be my answer.

Before:

['layout']['slider']

After:

['layout']['sliders']

Please replace all the slider properties that are related to layout, these need to be changed to sliders.

References:

I have handled issues related to this particular slider animated Plotly graph. Please refer to them if need, they may help solve your issue!

edited Sep 21, 2017 at 18:36

answered Sep 14, 2017 at 14:38

Naren Murali

66.2k6 gold badges51 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

0xc0de Over a year ago

The ctrl+f part is unnecessary, and probably incorrect too.

0xc0de Over a year ago

What if the OP is using notebook in a terminal and not something in, eg. a browser?

Naren Murali Over a year ago

@0xc0de ok got it

Naren Murali · Accepted Answer · 2025-01-23 07:52:28Z

You are probably hitting this error because of a typo in that notebook. It should be sliders instead of slider, see the docs.

The other error too, seems to be caused by this typo. It seems that this code is in an event handler that gets triggered whenever you move the slider.

So below line (and similar ones):

figure['layout']['slider']

should be corrected to:

figure['layout']['sliders']

Here is the code for that example:

import plotly.plotly as py
import plotly.graph_objs as go
from plotly.grid_objs import Grid, Column
from plotly.tools import FigureFactory as FF 

import pandas as pd
import time

url = 'https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv'
dataset = pd.read_csv(url)

table = FF.create_table(dataset.head(10))
py.iplot(table, filename='animations-gapminder-data-preview')


years_from_col = set(dataset['year'])
years_ints = sorted(list(years_from_col))
years = [str(year) for year in years_ints]
years.remove('1957')

# make list of continents
continents = []
for continent in dataset['continent']:
    if continent not in continents: 
        continents.append(continent)

columns = []
# make grid
for year in years:
    for continent in continents:
        dataset_by_year = dataset[dataset['year'] == int(year)]
        dataset_by_year_and_cont = dataset_by_year[dataset_by_year['continent'] == continent]
        for col_name in dataset_by_year_and_cont:
            # each column name is unique
            column_name = '{year}_{continent}_{header}_gapminder_grid'.format(
                year=year, continent=continent, header=col_name
            )
            a_column = Column(list(dataset_by_year_and_cont[col_name]), column_name)
            columns.append(a_column)

# upload grid
grid = Grid(columns)
url = py.grid_ops.upload(grid, 'gapminder_grid'+str(time.time()), auto_open=False)

figure = {
    'data': [],
    'layout': {},
    'frames': [],
    'config': {'scrollzoom': True}
}

# fill in most of layout
figure['layout']['xaxis'] = {'range': [30, 85], 'title': 'Life Expectancy', 'gridcolor': '#FFFFFF'}
figure['layout']['yaxis'] = {'title': 'GDP per Capita', 'type': 'log', 'gridcolor': '#FFFFFF'}
figure['layout']['hovermode'] = 'closest'
figure['layout']['plot_bgcolor'] = 'rgb(223, 232, 243)'

figure['layout']['sliders'] = {
    'args': [
        'slider.value', {
            'duration': 400,
            'ease': 'cubic-in-out'
        }
    ],
    'initialValue': '1952',
    'plotlycommand': 'animate',
    'values': years,
    'visible': True
}

figure['layout']['updatemenus'] = [
    {
        'buttons': [
            {
                'args': [None, {'frame': {'duration': 500, 'redraw': False},
                         'fromcurrent': True, 'transition': {'duration': 300, 'easing': 'quadratic-in-out'}}],
                'label': 'Play',
                'method': 'animate'
            },
            {
                'args': [[None], {'frame': {'duration': 0, 'redraw': False}, 'mode': 'immediate',
                'transition': {'duration': 0}}],
                'label': 'Pause',
                'method': 'animate'
            }
        ],
        'direction': 'left',
        'pad': {'r': 10, 't': 87},
        'showactive': False,
        'type': 'buttons',
        'x': 0.1,
        'xanchor': 'right',
        'y': 0,
        'yanchor': 'top'
    }
]


sliders_dict = {
    'active': 0,
    'yanchor': 'top',
    'xanchor': 'left',
    'currentvalue': {
        'font': {'size': 20},
        'prefix': 'Year:',
        'visible': True,
        'xanchor': 'right'
    },
    'transition': {'duration': 300, 'easing': 'cubic-in-out'},
    'pad': {'b': 10, 't': 50},
    'len': 0.9,
    'x': 0.1,
    'y': 0,
    'steps': []
}

custom_colors = {
    'Asia': 'rgb(171, 99, 250)',
    'Europe': 'rgb(230, 99, 250)',
    'Africa': 'rgb(99, 110, 250)',
    'Americas': 'rgb(25, 211, 243)',
    #'Oceania': 'rgb(9, 255, 255)' 
    'Oceania': 'rgb(50, 170, 255)'
}

col_name_template = '{year}_{continent}_{header}_gapminder_grid'
year = 1952
for continent in continents:
    data_dict = {
        'xsrc': grid.get_column_reference(col_name_template.format(
            year=year, continent=continent, header='lifeExp'
        )),
        'ysrc': grid.get_column_reference(col_name_template.format(
            year=year, continent=continent, header='gdpPercap'
        )),
        'mode': 'markers',
        'textsrc': grid.get_column_reference(col_name_template.format(
            year=year, continent=continent, header='country'
        )),
        'marker': {
            'sizemode': 'area',
            'sizeref': 200000,
            'sizesrc': grid.get_column_reference(col_name_template.format(
                 year=year, continent=continent, header='pop'
            )),
            'color': custom_colors[continent]
        },
        'name': continent
    }
    figure['data'].append(data_dict)
    
    
for year in years:
    frame = {'data': [], 'name': str(year)}
    for continent in continents:
        data_dict = {
            'xsrc': grid.get_column_reference(col_name_template.format(
                year=year, continent=continent, header='lifeExp'
            )),
            'ysrc': grid.get_column_reference(col_name_template.format(
                year=year, continent=continent, header='gdpPercap'
            )),
            'mode': 'markers',
            'textsrc': grid.get_column_reference(col_name_template.format(
                year=year, continent=continent, header='country'
                )),
            'marker': {
                'sizemode': 'area',
                'sizeref': 200000,
                'sizesrc': grid.get_column_reference(col_name_template.format(
                    year=year, continent=continent, header='pop'
                )),
                'color': custom_colors[continent]
            },
            'name': continent
        }
        frame['data'].append(data_dict)

    figure['frames'].append(frame)
    slider_step = {'args': [
        [year],
        {'frame': {'duration': 300, 'redraw': False},
         'mode': 'immediate',
       'transition': {'duration': 300}}
     ],
     'label': year,
     'method': 'animate'}
    sliders_dict['steps'].append(slider_step)

figure['layout']['sliders'] = [sliders_dict]

py.icreate_animations(figure, 'gapminder_example'+str(time.time()))

Note: Strange but the code executed successfully for me with the above mentioned typo as well.

Demo output.

user2147028 · Accepted Answer · 2017-09-13 06:07:21Z

1

You need plotly >= 2.0.0 try pip install plotly --upgrade

answered Sep 13, 2017 at 6:07

user2147028

1,29113 silver badges19 bronze badges

1 Comment

user14492 Over a year ago

That's not it. I have 2.0.15 and I have the same issue.

Lightness Races in Orbit · Accepted Answer · 2018-02-11 18:10:55Z

1

As others have mentioned, the documentation is incorrect. But simply replacing all slider with sliders will still give an error. Therefore, here's a self contained example.

http://nbviewer.jupyter.org/gist/empet/365cf202391bf7a58021388fadd52004

edited Feb 11, 2018 at 18:10

Lightness Races in Orbit

387k77 gold badges670 silver badges1.1k bronze badges

answered Sep 18, 2017 at 9:16

user14492

2,2944 gold badges30 silver badges52 bronze badges

5 Comments

Lightness Races in Orbit Over a year ago

Please bring the content here. Answers must stand alone.

user14492 Over a year ago

@LightnessRacesinOrbit please start support for embedded jupyter notebook elements. You can always edit and copy-paste.

Lightness Races in Orbit Over a year ago

Why should I do it? You do it.

user14492 Over a year ago

I don't believe that answers need to be standalone. So I shan't. Act on thy believes and the mass shall follow'th.

Lightness Races in Orbit Over a year ago

Why don't you believe this well-documented and self-evident thing?

Collectives™ on Stack Overflow

Plotly animated slider in Python

4 Answers 4

3 Comments

Comments

1 Comment

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related