title: How to Animate multiple columns as dots with matplotlib from pandas dataframe with NaN in python
body: <p>I have a question that maybe is asked before, but I couldn't find any post describing my problem.</p>
  
  <p>I have two pandas dataframes, each with the same index, representing x coordinates in one dataframe and y coordinates in the other. Each colum represent a car that started a specific timestep, logged every step until it arrived, and then stopped logging. </p>
  
  <p>Everytime a car starts on its route, a column is added to each dataframe and the coordinates of each step are added to each frame (every step it moves trough space therefor has new x,y coordinates), (see example for the x coordinates dataframe)</p>
  
  <p><a href="https://i.stack.imgur.com/Z9k6n.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Z9k6n.png" alt="enter image description here"></a></p>
  
  <p>But I am trying to animate the tracks of each car by plotting the coordinates in an animated graph, but I cannot seem to get it worked. My code:</p>
  
  <pre><code>    %matplotlib notebook
  from matplotlib import animation
  from JSAnimation import IPython_display
  from IPython.display import HTML
  
  fig = plt.figure(figsize=(10,10))
  #ax = plt.axes()
  
  
  #nx.draw_networkx_edges(w_G,nx.get_node_attributes(w_G, 'pos'))
  n_steps = simulation.x_df.index
  
  def init():
      graph, = plt.plot([],[],'o')
      return graph,
  
  def get_data_x(i):
      return simulation.x_df.loc[i]
  
  def get_data_y(i):
      return simulation.y_df.loc[i]
  
  
  def animate(i):
      x = get_data_x(i)
      y= get_data_y(i)
      graph.set_data(x,y)
      return graph,
  
  
  animation.FuncAnimation(fig, animate, frames=100, init_func = init, repeat=True)
  
  plt.show()
  </code></pre>
  
  <p>It does not plot anything, so any help would be very much appreciated. </p>
  
  <hr>
  
  <p><strong>EDIT</strong>: Minimal, Complete, and Verifiable example!</p>
  
  <p>So two simple examples of the x and y dataframes that I have. Each has the same index.</p>
  
  <pre><code>import random
  import geopandas as gpd
  import networkx as nx
  import matplotlib.pyplot as plt
  import numpy as np
  import math
  import pandas as pd
  from shapely.geometry import Point
  from matplotlib import animation
  from JSAnimation import IPython_display
  %matplotlib inline
  
  
  
  [IN]:   df_x = pd.DataFrame(data=np.array([[np.NaN, np.NaN, np.NaN, np.NaN], [4, np.nan, np.NaN,np.NaN], [7, 12, np.NaN,np.NaN], [6, 18, 12,9]]), index= [1, 2, 3, 4], columns=[1, 2, 3, 4])
  </code></pre>
  
  <p>gives:</p>
  
  <pre><code>[OUT]
  
           1     2     3    4
      1  NaN   NaN   NaN  NaN
      2  4.0   NaN   NaN  NaN
      3  7.0  12.0   NaN  NaN
      4  6.0  18.0  12.0  9.0
  </code></pre>
  
  <p>And the y coordinate dataframe:</p>
  
  <pre><code>[IN] df_y = pd.DataFrame(data=np.array([[np.NaN, np.NaN, np.NaN, np.NaN], [6, np.nan, np.NaN,np.NaN], [19, 2, np.NaN,np.NaN], [4, 3, 1,12]]), index= [1, 2, 3, 4], columns=[1, 2, 3, 4])'
  </code></pre>
  
  <p>gives:</p>
  
  <pre><code>[OUT]
            1    2    3     4
      1   NaN  NaN  NaN   NaN
      2   6.0  NaN  NaN   NaN
      3  19.0  2.0  NaN   NaN
      4   4.0  3.0  1.0  12.0
  </code></pre>
  
  <p>Now I want to create an animation, by creating a frame by plotting the x coordinate and the y coordinate of each column per each row of both dataframes. In this example, frame 1 should not contain any plot. Frame 2 should plot point (4.0 , 6.0) (of column 1). Frame 3 should plot point (7.0,19.0) (column1) and point (12.0,2.0) (column 2). Frame 4 should plot point (6.0, 4.0) (column 1), point (18.0,3.0) (column 2), point (12.0,1.0) (column 3) and (9.0, 12.0) column 4. Therefore I wrote the following code:</p>
  
  <p>I tried writing the following code to animate this:</p>
  
  <pre><code>  [IN] %matplotlib notebook
  from matplotlib import animation
  from JSAnimation import IPython_display
  from IPython.display import HTML
  
  fig = plt.figure(figsize=(10,10))
  #ax = plt.axes()
  
  graph, = plt.plot([],[],'o')
  
  def get_data_x(i):
      return df_x.loc[i]
  
  def get_data_y(i):
      return df_y.loc[i]
  
  
  def animate(i):
      x = get_data_x(i)
      y= get_data_y(i)
      graph.set_data(x,y)
      return graph,
  
  animation.FuncAnimation(fig, animate, frames=4, repeat=True)
  plt.show()
  </code></pre>
  
  <p>But this does not give any output. Any suggestions?</p>