Matplotlib animation in browser

Question

I'm having trouble trying to view my animated graph in the browser using mpld3. Any tips as to what I'm doing incorrectly? If I could figure out how to convert it to html so I can embed it in my website, that would be even better.

import matplotlib.pyplot as plt
import mpld3
import matplotlib.animation as animation
from matplotlib import style
import pandas as pd
import matplotlib.dates
from mpldatacursor import datacursor

style.use('fivethirtyeight')

fig = plt.figure()
ax = plt.subplot2grid((1,1), (0,0))

dateparse = lambda x: pd.datetime.strptime(x, 
                                       '%m/%d/%y %I:%M:%S %p')
def animate (i):
    df = pd.read_csv('arp.csv', 
                     index_col='Number',
                     parse_dates=['Date'], 
                     date_parser=dateparse, 
                     delimiter =',')

    e = i+1440
    df_tfvolts = df.iloc[i:e, 1]
    df_tftime = df.iloc[i:e, 0]
    b = matplotlib.dates.date2num(df.iloc[i:e, 0])
    ax.clear()
    ax.plot(df_tftime, df_tfvolts, 'r')
    ax.fill_between(b, df_tfvolts, facecolor='r', alpha =0.3)

    for label in ax.xaxis.get_ticklabels():
        label.set_rotation(30)

    plt.title('Lghtbug 7')
    plt.subplots_adjust(top=0.893, 
                        bottom=0.2, 
                        right=0.962, 
                        left=0.11)

    plt.xlabel('Date')
    plt.ylabel('Volt')


    datacursor(hover=True, bbox = None, point_labels = None, 
               draggable = True)

ani = animation.FuncAnimation (fig, 
                               animate, 
                               interval=10)

mpld3.show()

Answer 1

I you really want to make an animation, you can have a look at the surface3d example from the Bokeh library (code is here).

Otherwise, if you just want to be able to see progressively what happens along your data, I would advise using a slider. There is supposedly a way to do it in mpld3 but the demo does not work... you can check this other example with Bokeh.