Hi there. I am using R and found the ‘Intro to Animations’ article (https://plot.ly/r/animations/) very useful to animate a 3d scatter plot. it works very fine even if I open this plot in the browser (Safari). But when I try to integrate this plot into a Dash App it stops working. Neither the play button nor using the slider manually works. The plot is and stays stuck in the very first position. Everything else seems indistinguishable.
So is it not possible to use animated plots of this type in the Dash App or did I made some error?
Thanks 
I included some code that everybody can copy and check for themselves. It is basically an example from the aforementioned link.
df <- data.frame(
x = c(1,2,1),
y = c(1,2,1),
f = c(1,2,3)
)
p <- df %>%
plot_ly(
x = ~x,
y = ~y,
frame = ~f,
type = 'scatter',
mode = 'markers',
showlegend = F
)
p
This is the example and works fine.
app = Dash$new()
app$layout(
dccGraph(id = 'p', figure = p)
)
app$run_server()
Now integrated into the Dash App. Does not work anymore.
1 Like
Hi @HansPeter123 is there an error message in the Javascript console? This should not happen, at least for Python we have examples of plotly animations within Dash… (see for example https://dash.plot.ly/getting-started-part-2, the second example which is the first example with a graph)
Hi Emmanuelle,
- I am not sure were to find the Javascript console in Rstudio (I am not a developer
)
- I examined the example mentioned in your answer and it is also included in the corresponding dashR tutorial. Those work fine but also include an extra callback and don’t have a play button.
Btw. In the python tutorial the possibility for multiple callback outputs is mentioned, but not in the one for R. Is it only possible in python or also in R?
Thank you
Hi @HansPeter123 Hi @Emmanuelle
As far as I understood, Dash graph cannot process frames. (Update: this is no longer true; see posts below). That’s why automatic animations don’t work with Dash. Please correct me if I’m wrong. To tackle that, I wrote up a quick hack with dcc.Interval and dcc.Slider. It’s not perfect but I think it’s what you’re looking for.
I take the n-intervals inside dcc.Interval, and I use that number to update the value of the slider and build the graph. For example:
@app.callback(
[Output('slider_year', 'value'),
Output('the_graph','figure')],
[Input('auto-stepper', 'n_intervals')])
def on_click(n_intervals):
if n_intervals == 0:
dff=df[df['year']==n_intervals+1985]
scatterplot = px.scatter(...plot graph...)
return (1985, scatterplot)
else:
dff=df[df['year']==n_intervals+1985]
...and so on and so on...
Here’s the full code.
1 Like
Hi adamschroeder, thank you for taking the time. I basically chose this type of graph for its convenience and simplicity. In the past I used what was suggested: using a separate slider to control the figure. This did not yield the result I would like. Thats why I examined the graphing library and was very happy when I found the animated plots. Realizing it can’t be implemented into Dash is a bummer.
Your suggestion is written in python, until now I only used R. For me as a non-programmer R and Rstudio are very easy to use and I can make the API request, save and manipulate the data and then ultimately create a local dash app. Do you think it would make sense to migrate to python or at least create the dash app in python? I seems to me python is used by more people and therefore there is more knowledge and help to find when asking for solutions written in python.
If so, what IDE would you recommend. In the past I used PyCharm - at least I tried.
Thank you
Hi @HansPeter123
I like python but do not have enough experience with R and it’s usage with Dash to say which one is better to know. I would advice not making the transition to Python just based on my example code, because I’m pretty sure what I did can be done in R as well. Sorry I can’t be more helpful, but the best person to answer your question about python or R would be someone that knows both and has worked with both on Dash.
I use Atom as my IDE. I like it and it’s commonly used, but I hear PyCharm is solid as well. Either one you choose, you should be fine.
1 Like
Thanks @chriddyp
Im glad to hear I was wrong. I looked all over but couldnfind example code of automatic animations used within Dash. Can you please direct me to an example code so I can start building off of that.
Thank you.
I haven’t tested this, but I believe the Python examples should work. So, from the official docs at https://plot.ly/python/animations/
import plotly.express as px
df = px.data.gapminder()
fig = px.scatter(df, x="gdpPercap", y="lifeExp", animation_frame="year", animation_group="country",
size="pop", color="continent", hover_name="country",
log_x=True, size_max=55, range_x=[100,100000], range_y=[25,90])
then app.layout = dcc.Graph(figure=fig)
1 Like
So Dash Apps are capable of processing those type of plots. But the solution you provided here looks very much the same as the code I mentioned in the original post, just written in Python instead of R. What should I do to make the plot work?
@HansPeter123 when I mentioned the Javascript console I was thinking of the console of your web browser, where the app opens. You typically open it through a “developer tools” menu of your web browser, and googling for the name of your browser + “console” should give you the exact details. I should have made this clearer!
1 Like
Hi @Emmanuelle thank you for clarifying this.
I used the code as shown in my first post
- This is the figure
- This is the Javascript console. Clicking the play button changes nothing, moving the slider manually from first to second position leads to this:
