# Plotly python animation showing only 1 continent animation

**URL:** <https://community.plotly.com/t/plotly-python-animation-showing-only-1-continent-animation/24495>\
**Category:** 📊 Plotly Python\
**Created:** [June 13, 2019, 1:55am UTC](https://community.plotly.com/t/plotly-python-animation-showing-only-1-continent-animation/24495 "2019-06-13T01:55:32Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![gsudhanshu](https://avatars.discourse-cdn.com/v4/letter/g/f14d63/32.png) [@gsudhanshu](https://community.plotly.com/u/gsudhanshu)\
**Post date:** [June 13, 2019, 1:55am UTC](https://community.plotly.com/t/plotly-python-animation-showing-only-1-continent-animation/24495/1 "2019-06-13T01:55:32Z")

</div>

I am using bubble/cluster chart animation example as base on my data. The animation only shows animation of green color coded mfg\_part while there are 3 color coded mfg\_parts

screenshot:  
 ![1](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/a/a0aca41bd175df987e735a2993fd8cf6a6d52ceb.png)

Data link:

> **[temp\_inv](https://docs.google.com/spreadsheets/d/16A6kF1mEUbvxoef9ow8kWYevGMIxXT20ObVLXsLCKMY/edit?usp=sharing)**
>
> temp\_inv
> 
> Date,mfg\_part\_id,qty,cost
> 2015-12-22 0:00:00,Dummy\_Legs\_0001,2074,29669.84227
> 2015-12-22 0:00:00,Dummy\_Base\_0001,2074,29669.84227
> 2015-12-22 0:00:00,Dummy\_Back\_0001,2074,29669.84227
> 2016-01-07...

My code:  
from plotly.offline import init\_notebook\_mode, iplot  
from IPython.display import display, HTML

init\_notebook\_mode(connected=True)

invdf = pd.read\_csv(“temp\_inv.csv”)

dates = invdf[“Date”].values.tolist()

# make list of parts

parts = [‘Dummy\_Legs\_0001’, ‘Dummy\_Base\_0001’, ‘Dummy\_Back\_0001’]

# make figure

figure = {  
‘data’: [],  
‘layout’: {},  
‘frames’: []  
}

# fill in most of layout

figure[‘layout’][‘xaxis’] = {‘title’: ‘Time’}  
figure[‘layout’][‘yaxis’] = {‘title’: ‘Inventory Cost’, ‘type’: ‘log’}  
figure[‘layout’][‘hovermode’] = ‘closest’  
figure[‘layout’][‘sliders’] = {  
‘args’: [  
‘transition’, {  
‘duration’: 200,  
‘easing’: ‘cubic-in-out’  
}  
],  
‘initialValue’: ‘2015-12-22 00:00:00’,  
‘plotlycommand’: ‘animate’,  
‘values’: dates,  
‘visible’: True  
}  
figure[‘layout’][‘updatemenus’] = [  
{  
‘buttons’: [  
{  
‘args’: [None, {‘frame’: {‘duration’: 200, ‘redraw’: False},  
‘fromcurrent’: True, ‘transition’: {‘duration’: 200, ‘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’: ‘Time:’,  
‘visible’: True,  
‘xanchor’: ‘right’  
},  
‘transition’: {‘duration’: 200, ‘easing’: ‘cubic-in-out’},  
‘pad’: {‘b’: 10, ‘t’: 50},  
‘len’: 0.9,  
‘x’: 0.1,  
‘y’: 0,  
‘steps’: []  
}

# make data

dt = “2015-12-22 00:00:00”  
for part in parts:  
dataset\_by\_date = invdf[invdf[‘Date’] == dt]  
dataset\_by\_date\_and\_part = dataset\_by\_date[dataset\_by\_date[‘mfg\_part\_id’] == part]

```
data_dict = {
    'x': list(dataset_by_date_and_part['Date']),
    'y': list(dataset_by_date_and_part['cost']),
    'mode': 'markers',
    'text': list(dataset_by_date_and_part['mfg_part_id']),
    'marker': {
        'sizemode': 'area',
        'sizeref': 1,
        'size': list(dataset_by_date_and_part['qty'])
    },
    'name': part
}
figure['data'].append(data_dict)

```

# make frames

for dt in dates:  
frame = {‘data’: [], ‘name’: str(dt)}  
for part in parts:  
dataset\_by\_date = invdf[invdf[‘Date’] == dt]  
dataset\_by\_date\_and\_part = dataset\_by\_date[dataset\_by\_date[‘mfg\_part\_id’] == part]

```
    data_dict = {
        'x': list(dataset_by_date_and_part['Date']),
        'y': list(dataset_by_date_and_part['cost']),
        'mode': 'markers',
        'text': list(dataset_by_date_and_part['mfg_part_id']),
        'marker': {
            'sizemode': 'area',
            'sizeref': 1,
            'size': list(dataset_by_date_and_part['qty'])
        },
        'name': part
    }
    frame['data'].append(data_dict)

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

```

figure[‘layout’][‘sliders’] = [sliders\_dict]

iplot(figure)

---

<div class="post-metadata">

**Author:** ![jmmease](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jmmease/32/3706_2.png) [@jmmease](https://community.plotly.com/u/jmmease)\
**Post date:** [June 13, 2019, 10:33am UTC](https://community.plotly.com/t/plotly-python-animation-showing-only-1-continent-animation/24495/2 "2019-06-13T10:33:59Z")

</div>

Hi @gsudhanshu,

Could you please place your example code in a fenced code block (See [https://help.github.com/en/articles/creating-and-highlighting-code-blocks](https://help.github.com/en/articles/creating-and-highlighting-code-blocks)). This way the markdown formatter won’t mess up the code formatting, and it will be possible to copy/paste the code.

Just to clarify, are you expecting there to be three markers, one for each color, per frame?

-Jon

---

<div class="post-metadata">

**Author:** ![gsudhanshu](https://avatars.discourse-cdn.com/v4/letter/g/f14d63/32.png) [@gsudhanshu](https://community.plotly.com/u/gsudhanshu)\
**Post date:** [June 13, 2019, 11:52am UTC](https://community.plotly.com/t/plotly-python-animation-showing-only-1-continent-animation/24495/3 "2019-06-13T11:52:05Z")

</div>

My code:

```auto
from plotly.offline import init_notebook_mode, iplot
from IPython.display import display, HTML

init_notebook_mode(connected=True)

invdf = pd.read_csv("temp_inv.csv")

dates = invdf["Date"].values.tolist()
# make list of parts
parts = ['Dummy_Legs_0001', 'Dummy_Base_0001', 'Dummy_Back_0001']

# make figure
figure = {
    'data': [],
    'layout': {},
    'frames': []
}

# fill in most of layout
figure['layout']['xaxis'] = {'title': 'Time'}
figure['layout']['yaxis'] = {'title': 'Inventory Cost', 'type': 'log'}
figure['layout']['hovermode'] = 'closest'
figure['layout']['sliders'] = {
    'args': [
        'transition', {
            'duration': 200,
            'easing': 'cubic-in-out'
        }
    ],
    'initialValue': '2015-12-22 00:00:00',
    'plotlycommand': 'animate',
    'values': dates,
    'visible': True
}
figure['layout']['updatemenus'] = [
    {
        'buttons': [
            {
                'args': [None, {'frame': {'duration': 200, 'redraw': False},
                         'fromcurrent': True, 'transition': {'duration': 200, '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': 'Time:',
        'visible': True,
        'xanchor': 'right'
    },
    'transition': {'duration': 200, 'easing': 'cubic-in-out'},
    'pad': {'b': 10, 't': 50},
    'len': 0.9,
    'x': 0.1,
    'y': 0,
    'steps': []
}

# make data
dt = "2015-12-22 00:00:00"
for part in parts:
    dataset_by_date = invdf[invdf['Date'] == dt]
    dataset_by_date_and_part = dataset_by_date[dataset_by_date['mfg_part_id'] == part]

    data_dict = {
        'x': list(dataset_by_date_and_part['Date']),
        'y': list(dataset_by_date_and_part['cost']),
        'mode': 'markers',
        'text': list(dataset_by_date_and_part['mfg_part_id']),
        'marker': {
            'sizemode': 'area',
            'sizeref': 1,
            'size': list(dataset_by_date_and_part['qty'])
        },
        'name': part
    }
    figure['data'].append(data_dict)
    
# make frames
for dt in dates:
    frame = {'data': [], 'name': str(dt)}
    for part in parts:
        dataset_by_date = invdf[invdf['Date'] == dt]
        dataset_by_date_and_part = dataset_by_date[dataset_by_date['mfg_part_id'] == part]

        data_dict = {
            'x': list(dataset_by_date_and_part['Date']),
            'y': list(dataset_by_date_and_part['cost']),
            'mode': 'markers',
            'text': list(dataset_by_date_and_part['mfg_part_id']),
            'marker': {
                'sizemode': 'area',
                'sizeref': 1,
                'size': list(dataset_by_date_and_part['qty'])
            },
            'name': part
        }
        frame['data'].append(data_dict)

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

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

iplot(figure)

```

---

<div class="post-metadata">

**Author:** ![jmmease](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jmmease/32/3706_2.png) [@jmmease](https://community.plotly.com/u/jmmease)\
**Post date:** [June 15, 2019, 10:41am UTC](https://community.plotly.com/t/plotly-python-animation-showing-only-1-continent-animation/24495/4 "2019-06-15T10:41:29Z")

</div>

Hi @gsudhanshu,

When I run your example, and look at the first frame, is see

```python
figure['frames'][0]

```

```auto
{'data': [{'x': ['2015-12-22 0:00:00', '2015-12-22 0:00:00'],
           'y': [29669.842269999997, 36029.36497],
           'mode': 'markers',
           'text': ['Dummy_Legs_0001', 'Dummy_Legs_0001'],
           'marker': {'sizemode': 'area', 'sizeref': 1, 'size': [2074, 2095]},
           'name': 'Dummy_Legs_0001'},
          {'x': ['2015-12-22 0:00:00', '2015-12-22 0:00:00'],
           'y': [29669.842269999997, 36029.36497],
           'mode': 'markers',
           'text': ['Dummy_Base_0001', 'Dummy_Base_0001'],
           'marker': {'sizemode': 'area', 'sizeref': 1, 'size': [2074, 2095]},
           'name': 'Dummy_Base_0001'},
          {'x': ['2015-12-22 0:00:00', '2015-12-22 0:00:00'],
           'y': [29669.842269999997, 36029.36497],
           'mode': 'markers',
           'text': ['Dummy_Back_0001', 'Dummy_Back_0001'],
           'marker': {'sizemode': 'area', 'sizeref': 1, 'size': [2074, 2095]},
           'name': 'Dummy_Back_0001'}],
           'name': '2015-12-22 0:00:00'}

```

This frame has 3 traces that have identical x/y data. I think this is why you’re only seeing one marker per frame, because the markers are stacked on top of each other. You can confirm this by clicking on the legend to toggle the visibility of the top marker.

Looking at your dataset, it looks like this same duplication is present (each set of 3 rows has the same value in the `qty` and `cost` columns)

Do you expect the `qty` and `cost` values to be different for the different `mfg_part_id` values on a particular date?

-Jon

-Jon