Plotly icreate_animations offline on Jupyter Notebook

Question

I am trying to replicate this plotly tutorial on a Jupyter Notebook with a dataset that matches the one given in the example, I just had to change the name of one column. Th

Answer 1

So lets start with the issues in the code.

1. You are using from plotly.grid_objs import Grid, Column to make the graph but this is a functionality of plotly online, I have substituted your logic for grid with a simple dataframe, which basically does the same thing.

2. Second, I noticed that the graph was not displaying data, after analyzing I finally found out that you had set the range for X-Axis to [30, 85], but the X-Axis values between 1-15k.

Please find below my updated code. I hope this solves your issue.

Code:

import pandas as pd
import numpy as np
from __future__ import division
import plotly.plotly as py
from plotly.offline import download_plotlyjs, init_notebook_mode, iplot
from plotly.graph_objs import *
init_notebook_mode()

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

dataset=pd.read_csv('god_mod_copia.csv')

years_from_col = set(dataset['year'])
years_ints = sorted(list(years_from_col))
years = [str(year) for year in years_ints]
# make list of continents
continents = []
for continent in dataset['continent']:
    if continent not in continents: 
        continents.append(continent)
df = pd.DataFrame()
# 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
            temp = '{year}+{continent}+{header}_grid'.format(
                year=year, continent=continent, header=col_name
            )
            #if dataset_by_year_and_cont[col_name].size != 0:
            df = df.append({'value': list(dataset_by_year_and_cont[col_name]), 'key': temp}, ignore_index=True)

figure = {
    'data': [],
    'layout': {},
    'frames': []
}
figure['layout']['xaxis'] = {'title': 'GDP per Capita', 'type': 'log', 'autorange': True} #was not set properly
figure['layout']['yaxis'] = {'title': 'Life Expectancy', 'autorange': True} #was not set properly
figure['layout']['hovermode'] = 'closest'
figure['layout']['showlegend'] = True
figure['layout']['sliders'] = {
    'args': [
        'slider.value', {
            'duration': 400,
            'ease': 'cubic-in-out'
        }
    ],
    'initialValue': '2007',
    '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}_grid'
year = 2007
for continent in continents:
    data_dict = {
        'x': df.loc[df['key']==col_name_template.format(
            year=year, continent=continent, header='GDP_per_capita'
        ), 'value'].values[0],
        'y': df.loc[df['key']==col_name_template.format(
            year=year, continent=continent, header='Life_satisfaction'
        ), 'value'].values[0],
        'mode': 'markers',
        'text': df.loc[df['key']==col_name_template.format(
            year=year, continent=continent, header='country'
        ), 'value'].values[0],
        'marker': {
            'sizemode': 'area',
            'sizeref': 200000,
            'size': df.loc[df['key']==col_name_template.format(
                year=year, continent=continent, header='Total_population'
            ), 'value'].values[0],
            '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 = {
            'x': df.loc[df['key']==col_name_template.format(
                year=year, continent=continent, header='GDP_per_capita'
            ), 'value'].values[0],
            'y': df.loc[df['key']==col_name_template.format(
                year=year, continent=continent, header='Life_satisfaction'
            ), 'value'].values[0],
            'mode': 'markers',
            'text': df.loc[df['key']==col_name_template.format(
                year=year, continent=continent, header='country'
            ), 'value'].values[0],
            'marker': {
                'sizemode': 'area',
                'sizeref': 200000,
                'size': df.loc[df['key']==col_name_template.format(
                    year=year, continent=continent, header='Total_population'
                ), 'value'].values[0],
                'color': custom_colors[continent]
            },
            'name': continent
        }
        frame['data'].append(data_dict)

    figure['frames'].append(frame) #this block was indented and should not have been.
    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]
iplot(figure, config={'scrollzoom': True})

Answer 2

Here's an edited version of Naren Murali's code (his code doesn't work out of the box anymore).

There were corrections needed to make it compatible with the publicly available data set from the tutorial referred by OP. Some plotly libraries/functions had to be updated to work with latest plotly (4.7.1).

from __future__ import division
import pandas as pd
import numpy as np
import chart_studio.plotly as py
import plotly.graph_objs as go
from plotly.offline import download_plotlyjs, init_notebook_mode, iplot
init_notebook_mode()

from chart_studio.grid_objs import Grid, Column
from plotly import figure_factory as FF 

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

years_from_col = set(dataset['year'])
years_ints = sorted(list(years_from_col))
years = [str(year) for year in years_ints]
# make list of continents
continents = []
for continent in dataset['continent']:
    if continent not in continents: 
        continents.append(continent)
df = pd.DataFrame()
# 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
            temp = '{year}+{continent}+{header}_grid'.format(
                year=year, continent=continent, header=col_name
            )
            #if dataset_by_year_and_cont[col_name].size != 0:
            df = df.append({'value': list(dataset_by_year_and_cont[col_name]), 'key': temp}, ignore_index=True)

figure = {
    'data': [],
    'layout': {},
    'frames': []
}
figure['layout']['xaxis'] = {'title': 'GDP per Capita', 'type': 'log', 'autorange': True} #was not set properly
figure['layout']['yaxis'] = {'title': 'Life Expectancy', 'autorange': True} #was not set properly
figure['layout']['hovermode'] = 'closest'
figure['layout']['showlegend'] = True
figure['layout']['sliders'] = {
    'args': [
        'slider.value', {
            'duration': 400,
            'ease': 'cubic-in-out'
        }
    ],
    'initialValue': '2007',
    '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}_grid'
year = 1952
for continent in continents:
    data_dict = {
        'x': df.loc[df['key']==col_name_template.format(
            year=year, continent=continent, header='gdpPercap'
        ), 'value'].values[0],
        'y': df.loc[df['key']==col_name_template.format(
            year=year, continent=continent, header='lifeExp'
        ), 'value'].values[0],
        'mode': 'markers',
        'text': df.loc[df['key']==col_name_template.format(
            year=year, continent=continent, header='country'
        ), 'value'].values[0],
        'marker': {
            'sizemode': 'area',
            'sizeref': 200000,
            'size': df.loc[df['key']==col_name_template.format(
                year=year, continent=continent, header='pop'
            ), 'value'].values[0],
            '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 = {
            'x': df.loc[df['key']==col_name_template.format(
                year=year, continent=continent, header='gdpPercap'
            ), 'value'].values[0],
            'y': df.loc[df['key']==col_name_template.format(
                year=year, continent=continent, header='lifeExp'
            ), 'value'].values[0],
            'mode': 'markers',
            'text': df.loc[df['key']==col_name_template.format(
                year=year, continent=continent, header='country'
            ), 'value'].values[0],
            'marker': {
                'sizemode': 'area',
                'sizeref': 200000,
                'size': df.loc[df['key']==col_name_template.format(
                    year=year, continent=continent, header='pop'
                ), 'value'].values[0],
                'color': custom_colors[continent]
            },
            'name': continent
        }
        frame['data'].append(data_dict)

    figure['frames'].append(frame) #this block was indented and should not have been.
    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]
iplot(figure, config={'scrollZoom': True})