0

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()
Trenton McKinney
  • 56,955
  • 33
  • 144
  • 158
Mimi
  • 11
  • 1
  • 2
    An animation in matplotlib is a python code which repeatedly performs certain draw-events on a canvas. mpld3 is library which can translate a subset of a matplotlib figure to html/javascript such that it is shown in the browser. The final mpld3 figure does not have any python code in it because Browsers don't understand python and you usually do not have a python server to serve your webpage. An animation however would require the python code to run on the client side. You would hence need to write the animation in mpld3 (if that is possible?) or somehow run a python server. – ImportanceOfBeingErnest Nov 25 '18 at 22:15

1 Answers1

0

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.

Silmathoron
  • 1,781
  • 1
  • 15
  • 32
  • 1
    The demo of mpld3 only works in the context of a Jupyter notebook (displayed via HTML) where the backend `IPython.notebook.kernel` object is acessible in the Javascript. I don't think mpl3d has any means for the JS elements (e.g. slider) to feed-back to the python code. The click-and-drag example manipulates the Javascript elements directly. In all cases it seems like it's just a static plot that's generated by the Python code, which is then translated into HTML that is modified via JS. – Myridium Apr 25 '20 at 08:11