[WIP] Frame + Animate API

[rreusser]

New PR since switching to plotly's GH repo. I think this one is the real deal, at last.

Tasks

• merge master (last merged: July 5)
• SVG element persistence
• frame API
  • Plotly.addFrames (see: addFrames docs)
  • Plotly.deleteFrames (see: deleteFrames docs)
  • frame/base frame merging logic
• Plotly.transition
  • flag animatable/unanimatable properties (in schema?)
  • axis transitions
  • data transitions
  • restyle/relayout for props that don't fit
  • resolve issue with transforms vs. redrawing svg elements (the point-scaling ugliness)
  • interrupts
• Plotly.animate

Known Issues

• simultaneous data transition + layout transition = transform problems
• error bars not removed/transformed correctly when multiple simultaneous transitions
• extract non-transitionable properties and restyle separately
• expand redrawn scatter traces to the full set of interdependent traces
• tweak fill close order to avoid wraparound ugliness when path point count changes
• option to disable line simplification
• flag to preserve autoscale mode?
• built-in layout.slider control
• ensure no transitions if duration = 0
• scrollzoom seems disabled after transition

[etpinard]

@rreusser oops ... two Plotly.animate got in.

[rreusser]

Fixed & removed renameFrame

[etpinard]

What about the transition options? For example, the delay and easing function?

Should they be per frame (i.e. specified inside each frame object) or per animation (i.e. pass onto Plotly.animate)?

[etpinard]

To my 👀 , I think the later makes the most sense.

I like to think of frames as diffs for data and layout. How to transition between these diffs should be a property of the widget (e.g. slider, dropdown menus). For example, given a set of frames a, b, c, then:

var layout = {
  slider: {
    frames: ['a', 'b', 'c'],
    transition: {
      delay: 100,
      duration: 1000,
      easing: 'cubic'
    }
  }
};

and per-frame transition options would then be set as:

var layout = {
  slider: {
    frames: ['a', 'b', 'c'],
    transition: {
      delay: [100, 200, 300],
      duration: [1000, 2000, 3000],
      easing: ['cubic', 'linear', 'sin']
    }
  }
};

[rreusser]

Works for me, and even if it's some weird unforeseen corner case like d3 zoom transitions, it'd still be defined in the proper place this way.

[rreusser]

note to self: *slice. by a stupid coincidence this works, but it destroys the input which was the only reason for this line in the first place.

[rreusser]

additional note to self: stop reviewing own PR.

[etpinard]

fantastic 🎉

[etpinard]

🎉 great.