title: Plotly animation with factors
body: <p>Converting a num vector to factors yields unexpected results in a plot_ly animation.</p>
  
  <blockquote>
    <p>If frame is a numeric variable (or a character string), frames are always ordered in increasing (alphabetical) order; but for factors, the ordering reflects the ordering of the levels <a href="https://plotly-book.cpsievert.me/key-frame-animations.html" rel="nofollow noreferrer">plotly book</a></p>
  </blockquote>
  
  <p>With the data set: </p>
  
  <pre><code>&gt;str(genTotal)
   data.frame':   1620 obs. of  4 variables:
   $ generation: int  0 0 0 0 0 0 0 0 0 0 ...
   $ fitness   : num  2.38 2.38 2.38 2.38 21.82 ...
   $ x         : num  0.946 0.946 0.946 0.946 -2.26 ...
   $ x2        : num  -0.0686 -0.0686 -0.0686 -0.0686 2.0935 ...
  </code></pre>
  
  <p>As expected the keyframes are sorted alphabetically:
  <a href="https://i.stack.imgur.com/5w3mF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5w3mF.png" alt="enter image description here"></a></p>
  
  <hr>
  
  <p>When converting <em>generation</em> to a factor as suggested, suddenly all frames are drawn on top of each other:</p>
  
  <pre><code>genTotal$generation &lt;- factor(genTotal$generation, ordered = TRUE)
  
  'data.frame':   1620 obs. of  4 variables:
   $ generation: Factor w/ 81 levels "0","50","100",..: 1 1 1 1 1 1 1 1 1 1 ...
   $ fitness   : num  2.38 2.38 2.38 2.38 21.82 ...
   $ x         : num  0.946 0.946 0.946 0.946 -2.26 ...
   $ x2        : num  -0.0686 -0.0686 -0.0686 -0.0686 2.0935 ... 
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/iT0vJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iT0vJ.png" alt="enter image description here"></a></p>
  
  <p>With the code </p>
  
  <pre><code>plot_ly(data = df, x = ~ x, y = ~y, z = ~rastrigin, type = "contour") %&gt;%
    colorbar(title = "Value") %&gt;%
    add_trace(data = genTotal,x=~x,y=~x2,type = "scatter", mode = "markers",
              frame = genTotal$generation,
              inherit = FALSE,
              marker = list(size = 10,
                    color = 'rgba(255, 182, 193, .7)',
                    line = list(color = 'rgba(152, 0, 0, 1)',width = 2))
    )
  </code></pre>
  
  <p><strong>Questions:</strong>
  Why are suddenly all frames drawn on top of each other? </p>
  
  <p>How can I correctly (ordered) animate a plot_ly plot with a numeric frame vector?</p>
  
  <p>Updated: as requested the dput of <a href="https://pastebin.com/ytB1xkMG" rel="nofollow noreferrer">genTotal</a> and <a href="https://pastebin.com/uejWJ6p5" rel="nofollow noreferrer">df</a></p>