[DO NOT MERGE] Animations #550
Conversation
|
@rreusser Looks very nice 🏆 |
|
@monfera Thanks! Just realizing the extent to which I'm only scratching the surface of getting all aspects of this working end to end, but it's a start! |
|
Not sure the best way to add this, but I'm very excited by the idea of using animations in my plot.ly plots! |
Conflicts: src/components/drawing/index.js
…tions Conflicts: src/traces/scatter/plot.js
…tions Conflicts: src/plot_api/plot_api.js
|
Wow, this looks great. I love the new demos! |
|
Thanks @john-soklaski! Just got to the step where I need to revisit the tests and figure out what's failing. 😬 A couple more fun ones here: https://rreusser.github.io/gaussian-mixture-estimator/ |
|
Have managed to extend most of scatter traces to persist and transition SVG elements. Here's a demo that includes keys, error bars, points, lines, and fills: https://rreusser.github.io/animation-experiments/#error-bars-4 The fill/line transitions technically work fine, but they're ugly when the points don't match up just right, so Q: What are the top priorities?
|
|
Based on quick slack discussion, next up: scale transitions |
| @@ -65,6 +65,10 @@ module.exports = { | |||
| 'See `y0` for more info.' | |||
| ].join(' ') | |||
| }, | |||
| key: { | |||
There was a problem hiding this comment.
@rreusser how are these different to trace.uid ?
Is there a case, in general, where multiple traces would share the same key ?
There was a problem hiding this comment.
trace.uid is a single key per trace. key is an array of keys for every data point in a trace. So if some data points drop out, object constancy is maintained, i.e. https://rreusser.github.io/animation-experiments/#error-bars-4 (if you can ignore the fill/line issue for a moment, the points are matched by key instead of by array index)
There was a problem hiding this comment.
Ha I see. Thanks for the clarification.
Maybe key should default to the calcdata indices of the first plot call?
There was a problem hiding this comment.
So it would default to integer keys, but anything keyable is permissible? (e.g. key=['Argentina', 'Afghanistan', ...])
Edit: Wait, isn't this what d3 does implicitly? If it's not keyed, then it really doesn't need to construct or use keys at all, right?
There was a problem hiding this comment.
but anything keyable is permissible?
Yeah. That sounds right.
A long-running PR to manage progress on animations.
Demo at: https://rreusser.github.io/animation-experiments
Demo source at: https://github.com/rreusser/animation-experiments