I apologize if this has been asked, but I cant find a good explanation. Go to ObservableHQ and you’ll find, for example, a beeswarm plot that loads with the swarm adjusting itself around the axis in a very fluid animation. Even going to other React-based charting software, animations are also fluid and ubiquitous. But not in dash/plotly.
Dash and plotly are amazing, but the animations are lackluster, to put it very lightly. Why is this? I’m sure there’s a reason… why can’t we have D3 style, fluid animations and “built-in” transitions… even a basic bar chart is not able to be animated, but this is trivial in other applications/languages using js-based charting. For the animations we do have - ie. the scatterplot animation - they are not fluid, choppy, look unprofessional, and definitely nowhere near the quality of D3 animations. By this standard, plotly FEELS clunky and choppy. Even simply hovering over the chart to get a hovertext feels choppier than hovering over another react-based or D3-based chart… whyyyyyy?
How can we improve this? Or will animations always be this way for Dash/plotly just by the nature of how it was designed? Help me out here!
Thank you <3
Totally understand your frustration… I think plotly does a lot of things very well, but there are improvements needed on this aspect. I don’t know why either, it might be that the chart component has too many layers and functionality slowing down the animations…
That said, if you need a very customized vis with animations, one road I can suggest is to write a custom component and build it directly in javascript/D3. I’ve done it in a few internal applications in my company and “open-sourced” the approach (like in this post). Not quick or easy, but possible.
Hope this can help!
1 Like
Thanks for the feedback! There is no technical reason that prevents us from doing more, it’s just a matter of an organization funding the work and our own customer’s priorities.
Would love to hear from folks about what types of animations they would like to see in their own Dash apps. Also keep in mind that some of the D3 stuff that you see out there is very bespoke, and can be difficult to abstract out into a more general pattern.
1 Like
Thanks for responding! I assumed that it was due a technical challenge with how Dash interacts with the dom, so that’s great to hear it’s possible. Some general examples from D3 ( d3.transition(), pretty simple :
Streamgraph Transitions / D3 / Observable and d3.forceSimulation(), a little more complex maybe?: https://observablehq.com/@d3/force-directed-graph ). Those two methods cover a lot of vation.
I’m sure everyone has their opinion on this of course - I’m curious what others think… What I’m imagining foremost is much more global… perhaps a global way to adjust the transition of all elements like d3.transition()… maybe that’s a new attribute on a figure’s layout, or dcc.Graph().
Ideally, I’d “land” in my dashboard application with my chart elements (like bars, bubbles, etc.) gently transitioning/sliding/bouncing into place from some offset. Can Dash theoretically incorporate those two d3 methods? I think those two alone would cover a lot of variation and you might be able to apply a global setting to Dash that sets a (slight) location offset number behind the scenes to all elements at load and when the user loads the page, all the elements slowly accelerate into place from that random offset distance that maybe can even be adjusted (the offset distance, randomness (verically or horizontally or both, ie jitter), and delay/duration).
I’m very much a js newbie, so if that’s all ridiculous hogwash, I apologize. This article seems really relevant to this but I’ll need to learn a lot more js/react to understand it: Declarative D3 transitions with React 16.3 | React for Data Visualization
1 Like
thanks for sharing. I was actually looking for more examples of how to do this.