Plotly python animation showing only 1 continent animation

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

Data link:

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)

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). 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

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)

Hi @gsudhanshu,

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

figure['frames'][0]
{'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